/* Album detail pages. Generated markup — see tools/build_album_pages.py. The shared chrome — tokens, reset, gutter, masthead, nav, breadcrumbs, footer — lives in `site.css`, which is linked before this file. Only what these pages own is below. */ /* The verdict strip and the homepage "Read the review" link both travel a long way down the page. An instant jump reads as being teleported; easing it makes the distance legible, which is the point — the reader should see the players and the track list go past. Album pages only: the other page types have no comparable long in-page journey, and making this site-wide would change how the catalogue's filter jumps behave. */ html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } .narrow{max-width:800px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)} /* `align-items:start`, not `end`. Bottom-aligning the cover with the text column meant the cover sank by however tall that column grew, and the empty rectangle ABOVE it grew with it. Measured across all 203 album pages on 31 August 2026: 198 had a gap over 60px, 123 over 150px, 51 over 250px, worst 571px -- a quarter of the screen empty on arrival. Shortening the personnel line does not fix it; simulating a one-line Personnel on every page still left 169 pages over 60px and a worst case of 439px, because the rest of the height is long titles wrapping the h1 and long album notes. The cause is this property. */ .top{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(2rem,5vw,3.2rem)} /* `contain`, not `cover`. Bob's ruling, 31 August 2026, from audit/hero-crop-options.html. The box stays square so the hero grid does not move, but a wider-than-tall scan is fitted inside it whole instead of having both edges cut away: `Transformation` was printing its artist line as "ave Helbock Trio" and clipping the Gramola logo. Eight sleeves in the catalogue are not square; the other 195 render identically either way, because a 1:1 image fills a 1:1 box under both keywords. The letterbox bands are `--ink-2`, which this rule already paints behind every cover, so the change introduces no new colour. THE SMALL GRID CARDS ARE NOT THIS RULE -- `.rec .art img` in site.css keeps `object-fit:cover`, which is what holds the card rack even. This also completes the composer-badge ruling in docs/claude/03, which rests on the full sleeve being one click away from the card. Until now it was not, on these eight. */ .cover{width:100%;display:block;aspect-ratio:1;object-fit:contain;background:var(--ink-2)} .eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin:0 0 .9rem} /* Same safety net as the entity headings: the 2.1rem floor cannot shrink, and album titles are not a closed set — the next one catalogued may carry a longer unbreakable word than any currently here. */ /* line-height 1, not .9 — same fault as the entity headings. Album titles wrap constantly at narrow widths and this catalogue is full of descenders: "Jazz Sébastien Bach", "Jazzgang Amadeus Mozart", every "J.S. Bach" title. Below 1 the line box is shorter than the glyphs. */ .top h1{font-size:clamp(2.1rem,6vw,4.6rem);font-weight:900;line-height:1;letter-spacing:-.035em;text-transform:uppercase;margin:0 0 .65rem;overflow-wrap:break-word} .top .artist{font-family:var(--serif);font-size:clamp(1.15rem,2.3vw,1.6rem);color:var(--chalk);margin:0 0 1.4rem} .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:.9rem 1.4rem;border-top:1px solid var(--line);padding-top:1.2rem} .facts div{display:flex;flex-direction:column;gap:.25rem} /* Personnel spans the grid: it is a sentence, not a token. In column five it wrapped down a 159px gutter with roughly 546px of empty grid beside it, so even a short credit line ran to four or five lines. Set on a class, not :last-child, so reordering the facts cannot silently move it. */ .facts .wide{grid-column:1/-1} .facts dt{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .facts dd{margin:0;font-size:.92rem;font-variant-numeric:tabular-nums} .album-note{border-top:1px solid var(--line);margin-top:1.25rem;padding-top:1rem;max-width:760px} .album-note p{font-family:var(--serif);font-size:1rem;line-height:1.55;color:var(--read);margin:.55rem 0 0} .sec{padding:clamp(2.5rem,5.5vw,4rem) 0} .sec.hear{padding-bottom:0} .sec.works{padding-top:clamp(1.2rem,2.4vw,1.7rem)} h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:400;letter-spacing:-.025em;margin:0 0 .45rem} .kick{font-family:var(--serif);font-size:1.05rem;line-height:1.55;color:#BDB9B0;max-width:760px;margin:.2rem 0 1.5rem} /* `minmax(0,1fr)`, never a bare `1fr` — BRIEF.md §4's third CSS trap. A bare `1fr` is `minmax(auto,1fr)`, whose `auto` floor is min-content, so the column refuses to shrink below its widest content. The mobile override below already used the guarded form; this rule did not, and was one wide caption away from the same defect. */ .ab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line)} /* `.ab.solo` — ONE full-width player, for a record that carries the classical original ITSELF. Bob's ruling, 21 August 2026: such a record "plays whole in the right-hand player, and the left-hand classical player is not used", because a record built as a comparison already IS the comparison. Three records need it — Makowicz's *Brillante*, the Goldberg album, and Skip Martin's *Scheherajazz*, which hands off between symphonic and jazz playing INSIDE single tracks, so no arrangement of two frames could ever serve it. It is a modifier on the existing grid rather than a new device, which is what §3e asks. */ .ab.solo{grid-template-columns:minmax(0,1fr)} .side{background:var(--ink);padding:1.1rem} .side .label{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:.8rem} .side .n{font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase} .orig .n{color:var(--cyan)} .jazz .n{color:var(--brass)} /* The label above the player and the note below it are both --read, not --dim -- Bob's choice of 19 August 2026, made by comparing four values at full size on Mozart Jazz. He asked for the reading colour by name: "I prefer d = #D3CFC6 (12.19:1, the reading colour) for the text above and below the YouTube videos". The role test is what makes this right rather than a patch. `--dim` is furniture a reader glances at -- breadcrumbs, stat labels, the filter row's three words -- and Bob confirmed those work as they are. These two are read: `.who` identifies WHICH recording is loaded, and `.queue-scope` explains what the queue does and does not contain. Naming the recording is the thing this whole site exists to do, so it cannot be the least legible line on the page. Measured 5.52:1 before, 12.19:1 now. The track list's `.src` column made exactly this journey on 18 August and for exactly this reason. */ .side .who{font-family:var(--serif);font-style:italic;color:var(--read);font-size:.9rem;text-align:right} .frame{position:relative;aspect-ratio:16/9;background:#08080A;overflow:hidden} .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .unavailable{aspect-ratio:16/9;background:var(--ink-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(1.2rem,4vw,2.4rem)} .unavailable strong{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.65rem);font-weight:400;margin-bottom:.5rem} .unavailable p{max-width:34rem;color:#BDB9B0;line-height:1.55;margin:0;font-size:.9rem} .yt-link{display:inline-block;margin-top:1rem;padding:.65rem .85rem;background:var(--brass);color:#17161A;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase} .yt-link:hover{background:var(--chalk)} .queue-scope{font-size:.72rem;color:var(--read);line-height:1.5;margin:.7rem 0 0} .spot{margin-top:1px;background:var(--ink-2);padding:1rem 1.1rem} .spot iframe{display:block;width:100%;height:416px;border:0;border-radius:0} .caveat{font-size:.72rem;color:var(--dim);line-height:1.5;margin:.7rem 0 0} /* The "open in Spotify" control, above the player, on all 227 pages that embed one. WHY IT EXISTS. Spotify does not allow a signed-in session inside an embedded player on a mobile browser, so a visitor on a phone gets 30-second previews however they are logged in; the problem disappears only in a browser's desktop mode. That is Spotify's restriction and nothing here changes it. The embed does offer a way out to the app -- tapping its cover art -- but nothing says so, which is how it went unnoticed for months. This is the same escape made visible. WHY `--dim` AND NOT `--line`. At `--line` the outline sits at 1.28:1 against this panel, where WCAG 1.4.11 asks 3.00:1 for the boundary of a control you have to be able to find; the box was effectively invisible and only the label read as a control at all. `--dim` is 5.12:1. The filter CHIPS on the catalogue keep `--line` deliberately -- dozens of them in one labelled cluster read as a set even when each outline is faint, and a chosen chip fills solid cobalt. A lone button has neither, so it cannot borrow their excuse. Bob's call, 1 September 2026. WHY IT IS AN `` STYLED AS A BUTTON. It navigates to Spotify, so it must behave like a link: long-press and right-click offer "open in new tab", middle-click works, the destination shows on hover, and a screen reader announces a link. A `