/* Greg Hayes. Two fonts (August, 2026-10-02: "i should only have 2 fonts on the site"). Geist for names, titles, text and labels, with his name and the titles in Geist Bold. Instrument Serif for sentences: his own words, the sentence that opens the About page, and the two statements about his room. The opening is a dark picture; everything after it is on one solid black (August, 2026-10-04: "I like the black"; until then two warm near-blacks, a room that took 9% of the record's colour, a light on the shelf's floor, a sheen on every sleeve and a gold wash behind the awards: section 28 of the design notes). Colour comes from the covers and the photographs; gold is for awards, as marks. (The rules lower down that set titles in the serif are what #serif brings back, to compare.) */
:root{--lv:0;--tint:0%;
  --bg:#000;--paper:#000;--ink:#f2efe8;--mute:#9a958b;--rule:rgba(242,239,232,.16);--gold:#e8b64c;--tink:#ffdca6;
  --night:#060606;--ivory:#f2efe8;--dim:#a19d93;
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;--mono:var(--sans);  /* the small labels and numbers. Geist Mono until 2026-10-02; the name of the variable and of the .mono class are kept from then */
  --title:'Instrument Serif',Georgia,serif;
  --pad:clamp(18px,2.4vw,36px);--gap:clamp(12px,1.6vw,24px);--out:cubic-bezier(.2,.7,.2,1);
  --dock-w:250px;--dock-up:124px}  /* the player: how wide it is, and how far a thing under it steps up to clear it */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.01em;font-variant-numeric:tabular-nums}  /* a small label: Geist, with figures of equal width so years and times line up */
.sc{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.num{font-variant-numeric:tabular-nums lining-nums}
.u{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--out);padding-bottom:2px}
.u:hover,.u:focus-visible{background-size:100% 1px;outline:none}

/* header: ivory over the picture, ink once the page is past it */
header{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:var(--pad);color:var(--ivory);transition:color .4s var(--out),opacity .45s var(--out),transform .45s var(--out)}
/* no menu during the opening: it arrives once the opening has been scrolled to its end, and leaves again at the top */
.js header:not(.show){opacity:0;transform:translateY(-8px);pointer-events:none}
header nav{display:flex;gap:clamp(12px,1.8vw,26px)}
header.on-paper{color:var(--ink)}

/* the opening. The picture's colour is tied to the music level: no music, no colour. */
.intro{height:250vh;background:var(--night)}  /* how far you scroll to bring the colour in: one and a half screens (was 2.3; August, 2026-10-01: "a little shorter") */
.land{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;color:var(--ivory)}  /* the large viewport height (2026-11-04; was 100svh): on an iPhone, Safari's bar floats over the foot of the page, and with the small height the next part (Selected work) showed under it while the opening played (August: "i can see the 'selected work' on while the landing page animation is working"). The photograph and the print now run to the foot of the screen, under the bar; the dial keeps clear of it (.ctl). On a computer the two heights are the same */
.lvf{filter:grayscale(calc(1 - var(--lv))) brightness(calc(.6 + var(--lv) * .4)) contrast(calc(1.1 - var(--lv) * .1))}
.pic{position:absolute;inset:0}
.pic img,.pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% min(0px,calc(47lvh - 30.4vw))}  /* the photograph is set so the dark band between the window and the console falls behind his name. From the top; and in a window wider than about 1.55 to 1 (most laptop browser windows) it slides up, because there it is scaled to the width: the band is then 30.4vw down the picture and his name about 47% down the window, and hung from the top the name lay across the orchestra and the man at the console was cut to the top of his head */
.veil{position:absolute;inset:0;background:radial-gradient(64% 26% at 50% 52%,rgba(0,0,0,.55),transparent 74%),radial-gradient(120% 90% at 50% 45%,transparent 35%,rgba(0,0,0,.55) 100%),linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.05) 35%,rgba(0,0,0,.5))}  /* a soft shade behind the name, and the corners a little darker */
.card{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;text-align:center;padding:calc(var(--pad) + 44px) var(--pad) var(--pad)}
.ttl{grid-row:2;transform:translateY(-2.4vh);opacity:1;color:var(--ink)}  /* 2026-10-15, August: "greg hayes over the picture should be white". It was grey at Music zero and came up to the warm tint; now the site's ivory at every level */
h1{font-family:var(--title);font-size:clamp(43px,10.5vw,168px);font-weight:400;letter-spacing:-.01em;line-height:1}
.ttl p{margin-top:clamp(12px,1.6vw,22px);font-size:clamp(15px,1.5vw,21px);letter-spacing:.02em;opacity:calc(.8 + var(--lv) * .2);text-wrap:balance}  /* the line under his name (back on 2026-10-05 with Greg's words; it was off for a day) */
body.noline .ttl p{display:none}  /* #noline: the name alone, to compare */
.ctl{grid-row:3;align-self:end;display:grid;justify-items:center;padding-bottom:calc(clamp(8px,2vh,24px) + 100lvh - 100svh)}  /* lifted by what a phone's bars may cover, so the dial is never under Safari's bar (nothing on a computer) */
/* the knob: a flat ivory dial with one indicator line, and a hairline arc that fills as the music comes up. No ticks, no labels. */
.knob{width:clamp(66px,6.4vw,92px);aspect-ratio:1;touch-action:none;cursor:grab;display:block;border-radius:50%;overflow:visible}
.knob:active{cursor:grabbing}
.knob:focus-visible{outline:1px solid var(--ivory);outline-offset:8px}
.knob .trk{fill:none;stroke:rgba(242,239,232,.3);stroke-width:1}
.knob .arc{fill:none;stroke:var(--ivory);stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--lv) * 100)}
.knob .disc{fill:var(--ivory);filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.knob .ptr{transform-origin:50px 50px;transform:rotate(calc(-135deg + var(--lv) * 270deg))}
.knob .ptr line{stroke:#0c0c0d;stroke-width:2.6;stroke-linecap:round}
/* the arrow (2026-11-05; August: "lets lose the little button knob on the first image and replace with a thin, slightly
   bouncing arrow that shows people to scroll"): one ivory hairline with its head, bobbing a few pixels. It and a click
   anywhere on the opening take the page down to Selected work (js/opening.js). The dial is kept for #scroll, where the
   scroll brings the colour in and the dial shows how far. */
.cue{display:none;margin:0;padding:10px 16px;border:0;background:none;color:var(--ivory);cursor:pointer}
.cue svg{display:block;height:clamp(34px,4vw,46px);width:auto;aspect-ratio:16/44;overflow:visible}
.cue path{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.cue:focus-visible{outline:1px solid var(--ivory);outline-offset:2px}
body.autoc .knob{display:none}
body.autoc .cue{display:block}
@media (prefers-reduced-motion:no-preference){.cue svg{animation:cue 2.4s ease-in-out infinite}}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.land > *{animation:fadeup 1.5s ease .2s both}
.land > .lvf{animation-duration:2.2s}
body.rest .land > *{animation:none}
@keyframes fadeup{from{opacity:0}}

/* the discography: LP sleeves standing in a row, seen from above and to the side with no perspective, like a product shot */
@property --py{syntax:'<length>';inherits:false;initial-value:0px}
@property --ry{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --rx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --sc{syntax:'<number>';inherits:false;initial-value:1}
@property --pz{syntax:'<length>';inherits:false;initial-value:0px}
.track{height:calc(100vh + var(--len,2000) * 1px)}
.shelf{--W:clamp(138px,15vw,224px);--H:var(--W);--S:29px;--T:3px;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;cursor:default;background:color-mix(in oklab,var(--room,#a9a59a) var(--tint),var(--bg))}  /* (2026-11-02) the records and the row about a third larger at every size (Greg on the call: "what if we made these albums … a third or even twice as big … I think everything can just be bigger", so the covers read on their own; at 1280 the row now runs 2026 to 2021, not 2020). Was clamp(104px,11.5vw,168px) and 22px; js/shelf.js has S = 29 to match. --tint (in :root): how much of the record's colour the room takes. 9% since 2026-10-01: at 22% a yellow cover turned the whole room olive ("a little gimmicky") */
.shelf.ready{transition:background-color .9s var(--out)}
.shelf.over{cursor:pointer}
.floor{position:absolute;inset:0;background:radial-gradient(90% 70% at 35% 75%,rgba(255,255,255,.55),transparent 70%)}
.cam{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,transparent 3%,#000 24%);mask-image:linear-gradient(to bottom,transparent 3%,#000 24%)}
.world{position:absolute;left:22%;top:76%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-28deg) rotateY(-38deg)}
.row{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translateZ(var(--go,0px))}
.shade{position:absolute;left:8px;top:0;width:calc(var(--W) + 26px);height:calc(var(--n) * var(--S));transform-origin:top;transform:rotateX(-90deg);background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,.1) 60%,transparent);filter:blur(9px)}
/* a sleeve: the cover on the front (a film poster sits centred on a sleeve of its own colour), card edges top and side */
/* --pz moves a held sleeve straight toward the viewer (undo the camera, translateZ, redo it). With no perspective that changes
   nothing on screen, only what it is drawn in front of, so the taller divider cards and its neighbours cannot slice it once
   it is turned to face you.
   The lift is in three overlapping parts (2026-10-02; frames checked with #pop14-f150 and #drop14-f150). Up: the sleeve
   slides up out of the row in its own plane, behind its neighbours as a real one would be; then, once it is
   nearly clear of them, it comes forward (--pz, over 0.18s, so it passes in front of them one by one); then it turns to
   face you. Down is the same backwards: it turns flat, goes back to its depth while it is still up, and slides down into
   its place behind them. Before, --pz jumped at once: the whole cover
   flashed in front of the row the moment it started up, and snapped behind its neighbours 0.2s into the way down. */
.lp{position:absolute;left:0;top:calc(var(--H) * -1);width:var(--W);height:var(--H);transform-style:preserve-3d;transform:translateZ(calc(var(--i) * var(--S) * -1)) rotateY(38deg) rotateX(28deg) translateZ(var(--pz,0px)) rotateX(-28deg) rotateY(-38deg) translateY(var(--py,0px)) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) scale(var(--sc,1));transition:--ry .2s ease,--rx .2s ease,--sc .2s ease,--pz .14s linear .1s,--py .4s cubic-bezier(.4,0,.2,1) .22s;
  background:var(--img,none) center/var(--fit,cover) no-repeat,var(--bg,#bdb9ae)}
/* the sleeve's thickness: a lighter line along its top edge and a darker one down its side, drawn as two shadows on the
   sleeve itself. (They were two more 3D pieces per sleeve until 2026-10-02; a thousand pieces was too many to move.) */
.lp{box-shadow:0 -1.5px 0 color-mix(in oklab,var(--bg,#bdb9ae) 55%,#fff),1.5px 0 0 color-mix(in oklab,var(--bg,#bdb9ae) 70%,#000)}
.lp.pop{--py:calc(var(--H) * -1.1);--ry:31deg;--rx:21deg;--sc:1.2;--pz:400px;transition:--py .5s cubic-bezier(.22,1,.36,1),--pz .18s linear .16s,--ry .5s cubic-bezier(.22,1,.36,1) .26s,--rx .5s cubic-bezier(.22,1,.36,1) .26s,--sc .5s cubic-bezier(.22,1,.36,1) .26s}
.lp.div{height:calc(var(--H) * 1.2);top:calc(var(--H) * -1.2);background:var(--paper);color:var(--ink)}
.lp.div{box-shadow:0 -1.5px 0 #fff,1.5px 0 0 #c9c8c3}
.lp.div b{position:absolute;right:8%;top:7%;font-family:var(--mono);font-weight:500;font-size:clamp(10px,1vw,14px)}
/* an award is a hype sticker on the sleeve, the way a record shop sells one */
.hy{position:absolute;right:5%;top:5%;width:30%;aspect-ratio:1;border-radius:50%;background:#f3d34a;color:#0c0c0d;display:grid;place-items:center;text-align:center;padding:6%;font:700 clamp(4.5px,.52vw,7px)/1.1 var(--sans);letter-spacing:.05em;text-transform:uppercase;transform:rotate(9deg);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.rule{position:absolute;left:calc(var(--W) + 30px);top:0;width:1px;height:calc(var(--n) * var(--S));transform-origin:top;transform:rotateX(-90deg);background:rgba(12,12,13,.26)}
.fy{position:absolute;left:0;bottom:0;transform-origin:0 100%;transform:translateZ(calc(var(--i) * var(--S) * -1)) translateX(calc(var(--W) + 30px)) rotateX(90deg);padding-left:18px;font-weight:600;font-size:clamp(34px,calc((var(--z) * 1px - 30px) / .8),min(10.5vw,150px));letter-spacing:-.055em;line-height:.78;color:rgba(12,12,13,.13);white-space:nowrap;pointer-events:none}
.fy::before{content:"";position:absolute;left:0;bottom:0;width:12px;height:1px;background:rgba(12,12,13,.5)}
.fy small{display:block;margin:12px 0 7px 2px;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(12,12,13,.5)}
.shelf .id{position:absolute;left:var(--pad);top:calc(var(--pad) + 46px);z-index:5}
.shelf .id h2{font-size:clamp(30px,4.2vw,64px);font-weight:600;letter-spacing:-.045em;line-height:.95}
.shelf .id p{margin-top:12px;color:var(--mute)}
.tc{display:none}
@media (hover:none){.hv{display:none}.tc{display:inline}}
/* Shelf / Crate: two words under the note, the one in view underlined (preview only, while Greg chooses) */
.view{display:flex;gap:16px;margin-top:14px}
.view button{padding:0 0 3px;color:var(--mute);border-bottom:1px solid transparent;font-size:inherit;letter-spacing:inherit;text-transform:inherit;transition:color .2s}
.view button:hover,.view button:focus-visible{color:var(--ink);outline:none}
.view button.on{color:var(--ink);border-bottom-color:var(--ink);cursor:default}
/* the caption is set like the small print on the back of a sleeve */
.cap{position:absolute;right:var(--pad);bottom:var(--pad);z-index:5;width:min(330px,calc(100% - var(--pad) * 2));border-top:1px solid var(--ink);padding-top:10px}
.cap .no,.bk .no{display:flex;justify-content:space-between;color:var(--mute)}
.cap h3{font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:8px 0 6px}
.cap dl,.bk dl{display:grid;grid-template-columns:auto 1fr;gap:1px 14px;font-size:12px}
.cap dt,.bk dt{color:var(--mute)}
.bk dd.pa{display:grid;gap:3px}  /* the awards the project received: one to a line, plain words, no gold */
.bk dd.pa span{display:block}
.cap .acts{display:flex;gap:18px;margin-top:10px}
/* the year readout sits under the heading: the top left is the one corner the row never crosses */
.yr{margin-top:clamp(22px,3vw,40px);font-family:var(--mono);font-size:clamp(28px,4vw,60px);letter-spacing:-.04em;line-height:1;color:rgba(12,12,13,.34)}
.yr small{display:block;font-size:11px;letter-spacing:.02em;color:var(--mute);margin-bottom:6px}
/* the open record: the sleeve, the vinyl sliding out of it, the back with the track list. The label is left plain for his Soundgmh logo. */
.ov{position:fixed;inset:0;z-index:50;background:color-mix(in oklab,var(--room,#a9a59a) var(--tint),var(--bg));display:grid;place-items:center;padding:calc(var(--pad) + 30px) var(--pad) var(--pad);overflow:auto;overflow-x:hidden;opacity:0;pointer-events:none;transition:opacity .35s ease}
.ov.on{opacity:1;pointer-events:auto}
.x{position:absolute;right:var(--pad);top:var(--pad)}
.rec{--sz:min(38vw,64vh,520px);display:grid;grid-template-columns:var(--sz) minmax(0,1fr);column-gap:calc(var(--sz) * .52 + 30px);align-items:start;width:min(1160px,100%)}
.sl{position:relative;width:var(--sz);aspect-ratio:1}
.sl .cv{position:absolute;inset:0;z-index:2;background:var(--img) center/var(--fit) no-repeat,var(--imgs,none) center/var(--fit) no-repeat,var(--bg);box-shadow:0 0 0 1px rgba(242,239,232,.09)}  /* a hairline, so a dark cover keeps its edge on black */
.sl .cv .hy{width:24%;font-size:clamp(8px,.95vw,12px);padding:4%}
.sl .cv.type{display:flex;flex-direction:column;justify-content:flex-end;padding:8%;color:#0c0c0d;background:var(--bg)}
.cv.type b{font-size:clamp(22px,3vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1}
.cv.type small{margin-top:8px;font-size:13px;color:var(--mute)}
.vinyl{position:absolute;inset:1.5%;z-index:1;border-radius:50%;box-shadow:0 0 0 1px rgba(242,239,232,.14);transform:translateX(0);transition:transform 1.1s var(--out) .18s}
/* the disc turns under a fixed sheen, at 33⅓ rpm (1.8s a turn) while its record plays; the small mark on the label shows it turning */
.dsc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--paper) 0 1.3%,var(--rm) 1.5% 16%,transparent 16.3%),repeating-radial-gradient(circle,#2a2a2a 0 1px,#121212 1px 3px)}  /* the grooves show: on black a flat black disc was not there */
.dsc::before{content:"";position:absolute;left:47.5%;top:38%;width:5%;height:1.3%;border-radius:4px;background:rgba(255,255,255,.6)}
.rec.spin .dsc{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 40deg,transparent 0 8%,rgba(255,255,255,.09) 13%,transparent 18% 58%,rgba(255,255,255,.07) 63%,transparent 68%)}
.ov.on .vinyl{transform:translateX(52%)}
.bk h3{font-size:clamp(24px,2.6vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1;margin:10px 0 12px}
.tl{columns:2;column-gap:20px;font-size:11.5px;line-height:1.5;margin-top:18px;border-top:1px solid var(--rule);padding-top:12px}
.tl .tk{display:flex;align-items:baseline;gap:8px;break-inside:avoid;width:calc(100% + 8px);margin:0 -4px;padding:1px 4px;text-align:left;border-radius:3px;line-height:1.5}
.tl button.tk{cursor:pointer;transition:background-color .15s}
.tl button.tk:hover,.tl button.tk:focus-visible{background:rgba(12,12,13,.08);outline:none}
/* pointing at a song or playing it swaps its number for ▶ without changing any size: the number turns transparent and keeps its
   room, the ▶ is drawn over it. (Shrinking the number to fit the ▶ rewrapped long titles and rebalanced the two columns, which moved
   rows out from under the pointer and made the list flicker, August 2026-09-30.) */
.tl button.tk:hover i,.tl button.tk:focus-visible i,.tl .tk.on i{color:transparent}
.tl button.tk:hover i::before,.tl button.tk:focus-visible i::before,.tl .tk.on i::before{content:"▶";position:absolute;left:0;top:0;font-size:8.5px;color:var(--ink)}
.tl .tk.on{background:var(--ink);color:var(--paper)}
.tl .tk.on em,.tl .tk.on i::before{color:var(--paper)}
.tl i{position:relative;flex:none;width:2.2em;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--mute)}
.tl span{flex:1;min-width:0}
.tl em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--mute)}
/* the whole record with his tracks marked (2026-10-19): the tracks that are not his are grey, his stay in ink, so the
   list is the album and his part of it is read at a glance; the small print under it says the count */
.tl.mixed .tk:not(.his) span{color:var(--mute)}
.tl.mixed .tk.on:not(.his) span{color:var(--paper)}
body.studio .tl.mixed .tk.on:not(.his) span{color:var(--mute)}
.small{font-size:10.5px;line-height:1.5;color:var(--mute);margin-top:16px}
.lo{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:16px}  /* where to listen: plain words in a row, only the services that have the record (Greg, 2026-10-05: Apple Music and Tidal beside Spotify) */
.lo > *{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}  /* a button does not take these from its parent */
.lo-l{color:var(--mute)}
.bar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:14px}
.code{height:34px;width:120px;background:repeating-linear-gradient(90deg,#0c0c0d 0 2px,transparent 2px 3px,#0c0c0d 3px 4px,transparent 4px 7px,#0c0c0d 7px 10px,transparent 10px 11px,#0c0c0d 11px 12px,transparent 12px 15px)}
body.shelf-only .intro,body.shelf-only .stub{display:none}
body.spines-only .intro,body.spines-only .stub,body.spines-only .track{display:none}
[hidden]{display:none!important}

/* the player dock: Spotify's own player, above everything including an open record. 250px wide and at the bottom right
   since 2026-10-05 (it was 380px at the bottom left, over the newest end of the timeline). Greg asked for about half
   the width; at 190px Spotify's own layout breaks (the title is cut and its buttons overlap), at 250px it holds. The
   one word over it closes it. Whatever sits at the bottom right steps up by --dock-up while a song plays. */
.dock{position:fixed;right:var(--pad);bottom:var(--pad);z-index:60;width:min(var(--dock-w),calc(100% - var(--pad) * 2));display:grid;gap:6px}
.dock-h{justify-self:end;background:var(--paper);color:var(--ink);padding:4px 0 2px 10px}
.dock iframe{display:block;width:100%;height:80px;border:0;border-radius:12px}
body.playing .spine-info{padding-right:calc(min(var(--dock-w),100% - var(--pad) * 2) + 24px)}
/* the player and the open record (2026-11-05): the record stays where it is when a song starts (it rose 62px, the panel's
   foot growing by the player's height). Only a record that scrolls already gets the room at its end; one that fits, with its
   lower corner under the player, can be scrolled that far by hand (js/shelf.js, dockFit) */
body.playing .ov.tall{padding-bottom:calc(var(--pad) + var(--dock-up))}
body.playing .ov.under:not(.tall)::after{content:'';position:absolute;left:0;top:100%;width:1px;height:var(--dock-up)}
.ov{scrollbar-gutter:stable}  /* where scrollbars take room (a mouse without a trackpad), the room for one is kept, so a scrollbar coming with that room does not narrow the record and move it */
body.playing .cap{bottom:calc(var(--pad) + var(--dock-up));background:var(--bg);box-shadow:0 0 0 var(--pad) var(--bg)}  /* the caption is at the bottom right (or across the bottom) in every layout: it steps up over the player. Stepped up it can stand over the near end of the row (on a phone it does), so it takes a black ground and stays readable */

/* credits: spines on a wall, only the name on each, a white year card where the year changes */
.spines{background:var(--paper);padding:clamp(64px,9vw,120px) var(--pad) 0;position:relative}
.spines .hd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;border-top:1px solid var(--ink);padding-top:10px;margin-bottom:clamp(18px,2.4vw,30px)}
.spines .hd h2{grid-column:1/6;font-size:clamp(22px,2.4vw,34px);font-weight:600;letter-spacing:-.035em}
.spines .hd p{grid-column:6/13;color:var(--mute)}
.tools{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-bottom:clamp(34px,4vw,56px)}
.find{flex:0 1 380px;min-width:0;background:none;border:0;border-bottom:1px solid var(--ink);font:inherit;font-size:15px;padding:10px 0;outline:none;border-radius:0;color:var(--ink)}
.find::placeholder{color:var(--mute)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--rule);border-radius:999px;padding:7px 15px;font-size:13px;transition:background-color .2s,color .2s}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.count{color:var(--mute);margin-left:auto}
.wall{--h:clamp(150px,15vw,210px);display:flex;flex-wrap:wrap;align-items:flex-end;row-gap:36px}
.sp{width:clamp(21px,1.85vw,27px);height:var(--h);flex:none;background:var(--c);color:var(--t);border-left:1px solid rgba(0,0,0,.18);box-shadow:0 1px 0 var(--ink);display:flex;justify-content:center;padding:10px 0;transition:transform .22s var(--out),opacity .22s}
.sp span{writing-mode:vertical-rl;font-size:clamp(10px,.82vw,12px);font-weight:500;letter-spacing:.01em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:100%}
.sp:hover,.sp:focus-visible,.sp.hit{transform:translateY(-12px);outline:none}
/* the hover area reaches 14px below the spine, so when a spine lifts 12px the pointer is still on it (no bobbing at the bottom edge) */
.sp{position:relative;overflow:visible}
.sp::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.wall.q .sp:not(.hit){opacity:.18}
.yt{width:clamp(21px,1.85vw,27px);height:calc(var(--h) * 1.12);flex:none;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:0 1px 0 var(--ink);writing-mode:vertical-rl;display:flex;justify-content:flex-start;align-items:center;padding-top:8px;font-family:var(--mono);font-size:10px;color:var(--mute)}
.spine-info{position:sticky;bottom:0;z-index:3;margin-top:30px;background:var(--paper);border-top:1px solid var(--ink);padding:11px 0 calc(12px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:13px;min-height:46px}
.spine-info .mono{color:var(--mute)}
.spine-info b{font-weight:600}
.spine-info span:last-child:not(.mono):not(.ro-1){color:var(--mute)}
/* the read-out holds one height whatever is pointed at (2026-11-04, August: "The bottom bar to credits moves up and down
   whether I'm hovering over the actual books on the shelf or … over the awards. That bar should stay still, regardless"):
   it grew a line for a record with awards and two for Encanto (46, 64, 82px), and the line under it and About moved with
   it. Now always two lines, each cut short with an ellipsis: the record and its details, then its awards (js/stacks.js
   writes them as .ro-1 and .ro-aw); the opened record says everything */
#spine-info{display:block;box-sizing:content-box;height:41px;min-height:0;overflow:hidden}
#spine-info > .ro-1,#spine-info > .ro-aw{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#spine-info > .ro-1{line-height:19px;color:var(--ink)}
#spine-info > .ro-1 > * + *{margin-left:14px}
#spine-info > .ro-aw{margin-top:4px;line-height:18px}

/* about: the bio in one place, on one screen (2026-10-04). Camille: "a little in the weeds with the bio option want to
   make it land in one place"; August: "too much text going on and a lot but i like the idea". First who he is, in one
   line. Then one thing at scale: the places he has recorded in and his own room, set like the studio credit on a record
   (the serif's one job here). Then the awards, with the gold marks the records carry, and four short facts under
   hairlines. Nothing is clicked through; the only links are three record titles, underlined so they can be seen.
   A window 1048px wide or more gets one screen: the sentence takes the height that is left (five lines, set by hand,
   since 2026-10-05, when Greg's own sentence of ten places replaced the six; it was four lines at up to 8.6vw),
   and never goes under 5vw, so a short window scrolls a little instead of squeezing it. Narrower, the section is as
   tall as its content. */
.about{display:flex;flex-direction:column;min-height:clamp(640px,100svh,900px);background:var(--paper);padding:clamp(76px,7.2vw,96px) var(--pad) clamp(22px,2.2vw,30px)}
.about .hd{border-top:1px solid var(--ink);padding-top:10px}
.about .hd h2{font-size:10.5px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;color:var(--mute)}  /* a small label: the sentence is the title */
.about .hd p{margin-top:6px;font-size:clamp(15px,1.25vw,17px);font-weight:500;letter-spacing:-.005em;text-wrap:balance}
.credit{margin-top:clamp(18px,2.2vw,30px);font-family:var(--title);font-weight:400;font-size:clamp(max(40px,5vw),min(8.3vw,calc((100svh - 440px) / 5)),150px);line-height:1;letter-spacing:-.014em;color:var(--mute)}
.credit span{display:block;white-space:nowrap}
.credit b{font-weight:400;color:var(--ink)}
.awards{list-style:none;display:flex;flex-wrap:wrap;gap:8px clamp(20px,2.6vw,36px);margin-top:auto;padding-top:clamp(20px,2.4vw,32px);font-size:clamp(15px,1.38vw,18px);line-height:1.4}
.awards li{position:relative;padding-left:23px}
.awards li::before{content:"";position:absolute;left:0;top:.3em;width:11px;height:11px;border-radius:50%}
.awards .win::before{background:var(--gold)}
.awards .nom::before{box-shadow:inset 0 0 0 1.5px var(--gold)}
.awards b{font-weight:600}
.awards .y{color:var(--mute)}
.about i,.about .nw{white-space:nowrap}  /* a title moves to the next line whole, and takes its comma with it */
.about i,.draft i{font-style:normal}  /* titles upright (2026-10-04): the page loads Geist upright only, so an italic was the browser slanting the roman. A title that opens a record has its underline; the others are plain */
.about .rl{background-image:linear-gradient(var(--mute),var(--mute));background-size:100% 1px}  /* the three titles that open a record: underlined at rest, so they can be told from plain italics */
.about .rl:hover,.about .rl:focus-visible{background-image:linear-gradient(currentColor,currentColor)}
.facts{display:grid;column-gap:var(--gap);row-gap:22px;margin-top:clamp(16px,1.8vw,24px)}
.facts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.facts div{border-top:1px solid var(--rule);padding-top:11px}
.facts dt{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin-top:7px;font-size:13.5px;line-height:1.48;max-width:40ch;text-wrap:balance}
.about .draft{margin-top:clamp(14px,1.6vw,20px)!important;max-width:118ch;line-height:1.5}
.draft{color:var(--mute);margin-top:2.2em!important}
.quote p{font-family:var(--title);font-size:clamp(22px,2.1vw,31px);line-height:1.22;color:var(--tink)}
.quote cite{display:none;margin-top:14px;font-style:normal;color:var(--mute)}  /* his name under his words: shown in #v2, where the quote stands alone at the end of the page with no label over it */
.rl{padding:0}
@media (max-width:1047px){
  .about{display:block;min-height:0;padding-top:clamp(64px,9vw,96px)}
  .credit{font-size:clamp(30px,6.8vw,72px)}
  .awards{flex-direction:column;gap:6px;margin-top:0}
  .facts{column-gap:clamp(24px,4.5vw,36px)}
  .facts.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts dd{max-width:44ch}
}
@media (max-width:760px){.credit{font-size:clamp(30px,8vw,62px)}}
@media (max-width:519px){
  .credit{font-size:clamp(28px,8.8vw,46px);line-height:1.02;text-wrap:balance}
  .credit span{display:inline;white-space:normal}
  .credit span:last-child{display:block}  /* "Mixed in Studio H." keeps a line to itself */
  .credit b{white-space:nowrap}
  .facts{row-gap:16px}
  .facts.four{grid-template-columns:minmax(0,1fr)}
}
body.about-only .intro,body.about-only .stub,body.about-only .track,body.about-only .spines{display:none}

/* ─── Proposal behind #flow (2026-09-30): the page as one continuous room, nothing boxed off ─────────────────────────
   No rules or bands between parts, one background lit by the last record's colour; the opening dissolves into the
   room and the end of the shelf dissolves into the spines, each part starting under the end of the one before; titles
   small and in the flow; each part rises into view as it arrives (scroll-driven CSS, so nothing depends on a script). */
@property --last{syntax:'<color>';inherits:true;initial-value:#6b5a4a}
:root{transition:--last .9s var(--out)}
body.flow{background:radial-gradient(110% 70% at 50% 0%,color-mix(in oklab,var(--last) 16%,transparent),transparent 70%) fixed,var(--bg)}
body.flow .shelf{background:transparent}  /* no band where the shelf starts: its room colour is the page's light instead, easing between records */
body.flow .spine-info{border-top:0;background:linear-gradient(to top,var(--bg) 60%,transparent)}
body.flow header.on-paper{background:linear-gradient(var(--bg) 20%,transparent)}
body.flow .spines,body.flow .about,body.flow .stub{background:transparent;border-top:0}
body.flow .spines .hd,body.flow .about .hd{border-top:0;padding-top:0}
body.flow .spines .hd h2,body.flow .stub h2{font-family:var(--title);font-weight:400;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.01em}
body.flow .stub{min-height:0;padding-top:clamp(90px,12vw,180px);padding-bottom:0}
body.flow #work{position:relative;z-index:3;margin-top:-45vh;padding-top:calc(45vh + 60px);padding-bottom:30vh;background:linear-gradient(to bottom,rgba(13,12,11,0),var(--bg) 45vh)}
body.flow .spines{position:relative;z-index:3;margin-top:-65vh;padding-top:calc(65vh + 40px);background:linear-gradient(to bottom,rgba(13,12,11,0),rgba(13,12,11,.92) 50vh,rgba(13,12,11,0) 100%)}
body.flow .about{padding-top:clamp(110px,14vw,200px)}
body.flow #contact{padding-bottom:clamp(120px,16vw,220px)}
@supports (animation-timeline: view()) {
  body.flow .spines .hd,body.flow .tools,body.flow .wall,body.flow .piles,body.flow .bio,body.flow .side,body.flow .stub > *{animation:flow-rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
@keyframes flow-rise{from{opacity:0;transform:translateY(56px)}}
@media (prefers-reduced-motion:reduce){body.flow .spines .hd,body.flow .tools,body.flow .wall,body.flow .piles,body.flow .bio,body.flow .side,body.flow .stub > *{animation:none}}

/* ─── Variation behind #clean (2026-09-30): the same shelf, simpler ───────────────────────────────────────────────────
   August: "make the discography smoother, cleaner, little more simple". No floor years, no film edge, no catalogue line,
   "scroll the shelf" label or sticker line in the caption; the year divider cards stay ("the dates should still be there",
   2026-10-01); the held record lifts less, and more slowly. One screen tall: it is walked by dragging, swiping or the
   timeline of years, and the page scrolls on past it (shelf.js, FREE). */
body.clean .fy,body.clean .rule,body.clean .shade,body.clean .yr small,body.clean .cap .no{display:none}
body.clean .shelf,body.crate .shelf{touch-action:pan-y;cursor:grab}
body.crate:not(.barcode) .bin{touch-action:none}  /* (2026-11-02) a finger on the crate flips its records, up and down as well as sideways; around it the page scrolls (Camille on the call: "You try to swipe it down and it moves the whole page") */
body.clean .shelf.over{cursor:pointer}
body.clean .shelf.busy,body.crate .shelf.busy{cursor:grabbing}  /* while the records are in the hand */
body.barcode .shelf .id p{max-width:min(300px,25vw);line-height:1.5}  /* the barcode variation keeps the note under the title; it wraps clear of the records */
body.clean .cap .st{display:none}  /* the sticker line (by class since 2026-10-04: a record with nobody named has one row fewer) */
body.clean .lp.pop{--py:calc(var(--H) * -.92);--ry:22deg;--rx:12deg;--sc:1.12}  /* a gentler pose than the first shelf's; the timing is the one above */
body.clean .lp.rip{--py:calc(var(--H) * -.3);transition:--py .24s cubic-bezier(.22,1,.36,1)}  /* the ripple while the row moves (js/shelf.js, ripple): a third of the way up, in the row; it drops back on the record's own timing */

/* ─── Variation behind #crate (2026-09-30): a crate of LPs flipped through one at a time (js/crate.js) ─────────────── */
body.crate .cam,body.crate .floor,body.crate .yr small,body.crate .cap .no{display:none}
.bin{--cw:min(54vh,38vw);position:absolute;left:50%;top:57%;width:var(--cw);height:var(--cw);margin:calc(var(--cw) / -2) 0 0 calc(var(--cw) / -2);perspective:1600px;perspective-origin:50% -45%;transform-style:preserve-3d;pointer-events:none}  /* the records lean back behind the bin's own plane, so the bin must let clicks through to them */
.cr{position:absolute;inset:0;display:none;transform-origin:50% 100%;cursor:pointer;pointer-events:auto;background:var(--imgl,none) center/var(--fit,cover) no-repeat,var(--img,none) center/var(--fit,cover) no-repeat,var(--bg,#2a2724);box-shadow:0 30px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14)}
.cr .hy{width:22%;font-size:clamp(7px,.8vw,11px)}

/* the timeline of years (js/scrub.js): a hairline with a tick where each year starts, labels where there is room, and a
   marker for where you are; click or drag along it to jump */
.scrub{position:absolute;left:var(--pad);right:calc(var(--pad) + min(330px,34vw) + 48px);bottom:calc(var(--pad) + 4px);height:34px;z-index:6;cursor:pointer;touch-action:none;outline-offset:6px}
.scrub::before{content:"";position:absolute;inset:-30px calc(var(--pad) * -1) calc(var(--pad) * -1 - 4px);z-index:-1;pointer-events:none;background:linear-gradient(to top,#000 50%,rgba(0,0,0,0))}  /* a soft backing, so it reads over the nearest sleeves on the shelf; it reaches the bottom edge of the screen (it stopped 9px short until 2026-10-04, and slivers of sleeves showed under it) */
.scrub .line{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--rule)}
.scrub b{position:absolute;top:5px;width:1px;height:9px;background:rgba(242,239,232,.32);font-weight:400}
.scrub b span{position:absolute;top:14px;left:0;transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:var(--mute);white-space:nowrap;display:none}
.scrub b.lab span,.scrub b.on span{display:block}
.scrub b.on{background:var(--ink)}
.scrub b.on span{color:var(--ink)}
.scrub .here{position:absolute;top:3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px rgba(13,12,11,.6);transition:left .12s linear}
/* (the layout for narrow windows and phones is with "The discography at any window size", further down) */

/* steps still to build */
.stub{min-height:70vh;padding:calc(var(--pad) * 4) var(--pad);border-top:1px solid var(--rule)}
.stub h2{font-size:clamp(28px,4vw,56px);font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.stub p{color:var(--mute)}

@media (prefers-reduced-motion:reduce){.land > *{animation:none}.lp,.vinyl{transition:none}}
/* the menu keeps all four words down to 420px wide (2026-10-04; Work was dropped at 760, so a narrow window had no way to Selected work and the awards). Narrower, where five words do not fit, Work goes */
@media (max-width:374px){header nav a:not([href$="#discography"]):not([href$="#about"]):not([href$="#contact"]){display:none}}  /* 419px until 2026-10-27: most phones lost Work; with a smaller gap under 420px (at the end of this file) the five words fit down to 375 */
@media (max-width:760px){
  .world{left:10%;top:70%}.cap{left:var(--pad);right:var(--pad);width:auto}.yr{font-size:30px;margin-top:14px}
  .rec{--sz:min(64vw,360px);grid-template-columns:1fr;row-gap:28px}.ov.on .vinyl{transform:translateX(34%)}.tl{columns:1}
  .spines .hd h2,.spines .hd p{grid-column:1/-1}.spines .hd p{margin-top:4px}.count{margin-left:0}
  body.playing .spine-info{padding-right:0;padding-bottom:calc(12px + var(--dock-up))}}

/* ─── The site tied together (August, 2026-09-30: "the landing page and the LPs look like different sites") ─────────
   The rooms after the opening stay dark, like the cinema and the mix room (the colours are in :root); titles take the
   name's serif; the shelf's timeline is a film edge with its perforations; awards are gold: a solid sticker and a gold
   disc for a win, a gold ring for a nomination, a dot or ring on the spine. These rules follow the ones they refine. */
.floor{display:none}  /* no light on the floor: the sleeves are the only light on the screen */
.lp.div{background:#e9e6df;color:#0c0c0d}
.fy{color:rgba(242,239,232,.075)}
.fy small{color:rgba(242,239,232,.4)}
.fy::before{background:rgba(242,239,232,.45)}
.fy{transform:translateZ(calc(var(--i) * var(--S) * -1)) translateX(calc(var(--W) + 44px)) rotateX(90deg)}
.rule{width:12px;background:repeating-linear-gradient(to bottom,transparent 0 5px,rgba(255,226,180,.5) 5px 14px,transparent 14px 22px);box-shadow:inset 1px 0 rgba(242,239,232,.28),inset -1px 0 rgba(242,239,232,.28)}
.yr{color:rgba(242,239,232,.3)}
.shelf .id h2,.spines .hd h2,.stub h2{font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:-.01em}
.shelf .id h2{font-size:clamp(42px,5.8vw,92px)}
.spines .hd h2,.stub h2{font-size:clamp(30px,3.4vw,52px)}
.cap h3,.bk h3{font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:0}
.cap h3{font-size:clamp(24px,2.3vw,32px)}
.bk h3{font-size:clamp(34px,3.6vw,54px)}
.code{background:repeating-linear-gradient(90deg,#f2efe8 0 2px,transparent 2px 3px,#f2efe8 3px 4px,transparent 4px 7px,#f2efe8 7px 10px,transparent 10px 11px,#f2efe8 11px 12px,transparent 12px 15px)}
.tl button.tk:hover,.tl button.tk:focus-visible{background:rgba(242,239,232,.1)}
.yt{background:#e9e6df;color:#5d5d61}
.hy.win{background:var(--gold);color:#1a1206}
.hy.nom{background:rgba(13,12,11,.55);color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)}
.rec.win .dsc{background:radial-gradient(circle,var(--paper) 0 1.3%,#f0cf7a 1.5% 16%,transparent 16.3%),repeating-radial-gradient(circle,#e6b95c 0 1px,#c9993b 1px 3px)}
.sp.win span,.sp.nom span{margin-top:14px}
.sp.win::before,.sp.nom::before{content:"";position:absolute;top:8px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%}
.sp.win::before{background:var(--gold)}
.sp.nom::before{box-shadow:inset 0 0 0 1.5px var(--gold)}

/* ─── Variation behind #barcode (2026-10-01): the barcode is the discography's timeline (js/band.js, js/crate.js) ───
   August picked idea 5 of the ways to make the spines smaller: every credit is a stripe of its cover's colour on one band
   under the crate, and the separate spines section goes. The crate holds every credit (a credit with no cover is a plain
   sleeve with its title on it); the search and the Film / TV / Records buttons sit top right and narrow what is in the
   crate; the band runs the full width along the bottom, with the caption above it. */
body.barcode .spines{display:none}
body.barcode .bin{--cw:min(50vh,36vw);top:50%}
body.barcode .cap{bottom:calc(var(--pad) + 126px)}
.band{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + 18px);height:44px;z-index:6;cursor:pointer;touch-action:none;outline-offset:12px}
.band canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.band b{position:absolute;top:100%;width:1px;height:5px;background:rgba(242,239,232,.3);font-weight:400}
.band b span{position:absolute;top:9px;left:-1px;font-family:var(--mono);font-size:10px;line-height:1;color:var(--mute);white-space:nowrap;display:none}
.band b.lab span,.band b.on span{display:block}
.band b.on{background:var(--ink)}
.band b.on span{color:var(--ink)}
.band .und{position:absolute;right:0;top:calc(100% + 9px);font-family:var(--mono);font-size:10px;line-height:1;color:var(--mute)}
.band .und.on{color:var(--ink)}
.band .aw{position:absolute;top:-17px;width:6px;height:6px;margin-left:-3px;border-radius:50%;transition:opacity .2s}
.band .aw.win{background:var(--gold)}
.band .aw.nom{box-shadow:inset 0 0 0 1.5px var(--gold)}
.band .aw.off{opacity:.2}
/* the record at the front of the crate: its stripe, wider, standing up out of the band */
.band .cur{position:absolute;top:-8px;bottom:-3px;width:9px;margin-left:-4.5px;box-shadow:0 0 0 1px var(--ink),0 4px 12px rgba(0,0,0,.6);transition:left .12s linear}
.band .tip{position:absolute;bottom:calc(100% + 24px);left:0;transform:translateX(-50%);white-space:nowrap;font-size:12px;line-height:1;background:var(--ink);color:var(--bg);padding:5px 8px;border-radius:3px;pointer-events:none;opacity:0;transition:opacity .12s}
.band .stem{position:absolute;bottom:100%;height:24px;width:1px;background:var(--ink);pointer-events:none;opacity:0;transition:opacity .12s}
.band.over .tip,.band.over .stem{opacity:1}
.dtools{position:absolute;right:var(--pad);top:calc(var(--pad) + 60px);z-index:6;width:min(330px,calc(100% - var(--pad) * 2));display:grid;gap:14px;cursor:auto}
.dtools .find{width:100%}
.dtools .chips{align-items:center}
.dtools .count{margin-left:auto}
/* a credit with no cover: a plain sleeve, the title printed on it */
.cr.type{color:#0c0c0d;background:var(--bg)}
.cr.type em{position:absolute;left:8%;top:7%;font-style:normal;color:rgba(12,12,13,.55)}
.cr.type span{position:absolute;left:8%;right:8%;bottom:8%}
.cr.type b{display:block;font:400 calc(var(--cw) * .112)/1.02 var(--title);letter-spacing:-.01em}
.cr.type small{display:block;margin-top:.8em;font-size:12px;color:rgba(12,12,13,.6)}
@media (max-width:760px){
  body.barcode .shelf .id p,body.barcode .yr{display:none}
  .dtools{left:var(--pad);right:var(--pad);width:auto;top:calc(var(--pad) + 100px);gap:10px}
  .dtools .chips{flex-wrap:nowrap;overflow-x:auto}
  body.barcode .bin{--cw:min(62vw,34vh);top:51%}
  .band{height:32px;bottom:calc(var(--pad) + 16px)}
  body.barcode .cap{bottom:calc(var(--pad) + 86px)}
  body.playing.barcode .cap{bottom:calc(var(--pad) + 210px)}
}

/* ─── Credits as stacks by year (js/stacks.js): records lying flat, one pile per year ──────────────────────────
   Mocked 2026-10-01 as idea 3 for making the spines smaller, and the default since the same day; the wall of upright
   spines is behind #wall. The piles are a chart of how much he did each year, and one pile at a time is open beside it
   with its titles reading straight across. Nothing changes size when you point at it; a click opens a pile. */
body.stacks .wall{display:none}
.piles{--u:clamp(8px,1.5svh,13px);--sh:clamp(18px,2.7svh,26px);--sg:2px;display:grid;grid-template-columns:minmax(0,1fr) min(540px,44%);column-gap:clamp(32px,4.4vw,72px);align-items:end}
/* --u is one record in the chart, --sh one record in the open pile. Both were about two thirds of this until 2026-10-06
   (August: "it's pretty compact. Maybe a little more space"); they follow the window's height, so the section still
   fits one screen in a window 800px high (22px records, where they were 16) and grows in a taller one. */
.chart{position:relative;display:flex;align-items:flex-end;gap:4px;height:calc(var(--max,29) * var(--u) + 44px);padding-bottom:30px}
.chart::after,.opened::after{content:"";position:absolute;left:0;right:0;bottom:29px;height:1px;background:var(--rule);pointer-events:none}  /* the floor the piles stand on */
.pile{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0}
.pile .slabs{display:flex;flex-direction:column;gap:2px;transition:filter .15s}
.pile .slabs i{display:block;height:calc(var(--u) - 2px);background:var(--c);box-shadow:inset 0 0 0 1px rgba(242,239,232,.1);transform:translateX(var(--dx));border-radius:1px;transition:opacity .2s}
.pile .slabs i.win{box-shadow:0 0 0 1.5px var(--gold);position:relative;z-index:1}
.pile .slabs i.nom{box-shadow:0 0 0 1px rgba(232,182,76,.6);position:relative;z-index:1}
.pile .slabs i.dim{opacity:.16}
.pile:hover .slabs,.pile:focus-visible .slabs{filter:brightness(1.35)}
.pile:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.pile .py{position:absolute;left:50%;top:calc(100% + 11px);transform:translateX(-50%);font-size:10px;line-height:1;color:var(--mute);white-space:nowrap;display:none}
.pile.lab .py,.pile.on .py{display:block}
.pile:last-child .py{left:auto;right:0;transform:none}  /* "Undated" is the last pile: its label ends where the chart ends */
.pile.on .py{color:var(--ink)}
.pile.on::after{content:"";position:absolute;left:0;right:0;top:calc(100% + 3px);height:2px;background:var(--ink)}  /* the open pile is underlined */
.opened{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding-bottom:30px}
.oh{display:flex;align-items:baseline;gap:12px}
.oh b{font:400 clamp(32px,3.4vw,46px)/1 var(--title)}
.oh .mono{color:var(--mute)}
.ostacks{display:flex;gap:20px;align-items:flex-end;height:calc(15 * (var(--sh) + var(--sg)))}
.ostack{flex:1 1 0;min-width:0;max-width:260px;display:flex;flex-direction:column;gap:var(--sg)}
.slab{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:var(--sh);padding:0 10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(242,239,232,.1);color:var(--t);font-size:max(11.5px,calc(var(--sh) * .52));font-weight:500;line-height:1;text-align:left;transform:translateX(var(--dx));border-radius:1px}
.slab span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--sh)}
.slab em{flex:none;font-style:normal;font-family:var(--mono);font-size:10.5px;opacity:.7}
.slab:hover,.slab:focus-visible{outline:1px solid var(--ink);z-index:2}
.slab.win::before,.slab.nom::before,.slab.pw::before,.slab.pn::before{content:"";flex:none;width:7px;height:7px;border-radius:50%}
.slab.win::before{background:var(--gold);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.slab.nom::before{box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 1px rgba(0,0,0,.35)}
/* an award the PROJECT received (the film, its score, the album), not one that names him: the same mark without the
   gold, in the record's own type colour. Gold is for his nine. */
.slab.pw::before{background:var(--t);opacity:.85}
.slab.pn::before{box-shadow:inset 0 0 0 1.5px var(--t);opacity:.7}
/* The Awards view (the sixth word in the row; Greg, 2026-10-05: "another filter bubble … that says awards and that can
   be the place to highlight them"). The chart keeps its shape with everything but the awarded records dimmed; beside it
   two lists, kept apart: the awards that name him, and the awards his projects received. */
.piles.aw{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
.opened.aw{justify-content:flex-end}
.agroups{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.2svh,26px)}
.agrp{min-width:0}
.agrp h4{margin:0 0 9px;font:500 10.5px/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.acols{columns:2;column-gap:20px}
.acols .slab{break-inside:avoid;margin-bottom:var(--sg)}
@media (min-width:1100px){.piles.aw{grid-template-columns:minmax(0,.55fr) minmax(0,1fr)}.agrp:not(.his) .acols{columns:3}}  /* a wide window: three across, so both lists stay on the one screen */
/* the title comes first: it keeps its own width (up to two thirds) and the award words take what is left */
.acols .slab span{flex:0 1 auto;max-width:66%}
.slab em.tag{flex:1 1 0;min-width:0;text-align:right;font-family:inherit;font-size:max(10.5px,calc(var(--sh) * .44));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* every award body named beside a record (2026-10-19; Greg: BlacKkKlansman "has Academy award nominations"): the words no longer
   fit one line beside the title, so in the Awards lists a record is two rows, the title and then its awards, and the slab is as
   tall as that; the dot keeps the first row */
.acols .slab{flex-wrap:wrap;height:auto;min-height:var(--sh);padding-bottom:5px;row-gap:0}
.acols .slab span{flex:1 1 0;max-width:none}
.acols .slab em.tag{flex:1 1 100%;text-align:left;white-space:normal;overflow:visible;line-height:1.3;margin-top:-3px;padding-left:15px}
.acols .slab:not(.win):not(.nom):not(.pw):not(.pn) em.tag{padding-left:0}
#spine-info .ro-aw{flex-basis:100%;color:var(--ink);font-size:12.5px;line-height:1.45}  /* the awards line of the read-out. Its own name since 2026-10-27: as "aws" it took Work's poster rules for its awards (a grid of one column, 180px tall over an awarded record); and an id, so it outranks the grey of .spine-info span:last-child */
#spine-info .ro-aw i{font-style:normal;color:var(--mute)}
#spine-info .ro-aw b{font-weight:600}
@media (max-width:760px){
  .piles,.piles.aw{--u:7px;--sh:28px;grid-template-columns:minmax(0,1fr);row-gap:40px}
  .chart{gap:2px}
  .ostacks{height:auto;min-height:calc(8 * (var(--sh) + var(--sg)))}
  .ostack{max-width:none}
  .slab{font-size:14px}
  .acols{columns:1}
  /* six words in the row on a phone, and the count at the end of the search line, not on a line of its own */
  .chips{gap:6px}
  .chip{padding:7px 11px;font-size:12.5px}
  .find{padding-right:74px}
  .count{position:absolute;right:0;top:13px;margin:0}
}

/* NOT USED SINCE 2026-10-04: the bio is one screen on the home page (see "about: the bio in one place"). The page these
   rules lay out is kept in site/archive/about-chapters.html, and the room's rules (.room, .spec, .r-pts, .ph) are here for
   the Studio section to draw on when its photographs and gear list arrive. Remove what that section does not take. */
/* ─── The About page (about.html, mock 2026-10-01): his story told through the studios, ending in his own room ──────
   Camille's idea, August's notes: the studios are the chapters. The opening sentence is set like the credit on a record
   ("Recorded in … Mixed in …") and each place in it links to its chapter. One hairline runs down the left through a ring
   at each stop and ends in a solid mark at his own room, the way the timeline marks where you are. Each stop: what he did
   there, the place, the studios, two or three sentences, records from those years with their real covers, and a labelled
   slot for a photograph. The room is the last stop and the Studio section (#studio). No script. */
body.page header{padding-bottom:calc(var(--pad) + 16px);background:linear-gradient(var(--bg) 58%,rgba(13,12,11,0))}  /* text scrolls under the menu on this page, so the menu has a ground of its own */
header .u[aria-current]{background-size:100% 1px}
.story{padding:0 var(--pad);--col:calc((100% - var(--gap) * 11) / 12)}
.s-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(120px,19vh,200px) 0 clamp(64px,9vw,128px)}
.s-hero .lbl{grid-column:1/-1;color:var(--mute);margin-bottom:clamp(18px,2.4vw,32px)}
.liner{grid-column:1/12;font-family:var(--title);font-weight:400;font-size:clamp(34px,5.6vw,88px);line-height:1.04;letter-spacing:-.014em;color:var(--mute);text-wrap:balance}
.liner a{color:var(--tink);white-space:nowrap;background:linear-gradient(currentColor,currentColor) 0 96%/0 1px no-repeat;transition:background-size .4s var(--out)}
.liner a:hover,.liner a:focus-visible{background-size:100% 1px;outline:none}
.s-intro{grid-column:7/12;margin-top:clamp(36px,5vw,76px);font-size:clamp(15px,1.15vw,17px);line-height:1.62}
.s-intro p + p{margin-top:.8em}
.stop,.r-hd{--pt:clamp(56px,7.4vw,112px);position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.stop{padding:var(--pt) 0}
.stop::before,.room::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--rule)}  /* the line through the stops */
.stop:first-child::before{top:calc(var(--pt) + 5px)}
.s-no{grid-column:1/2;grid-row:1;position:relative;padding-left:24px;line-height:11px;color:var(--mute);scroll-margin-top:90px}
.s-no::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--ink)}
.s-tx{grid-column:2/8;grid-row:1;min-width:0}
.s-k{color:var(--mute);line-height:11px}
.stop h2,.room h2{font-family:var(--title);font-weight:400;font-size:clamp(46px,7.6vw,120px);line-height:.94;letter-spacing:-.018em;margin-top:clamp(12px,1.4vw,20px)}
.s-st{margin-top:clamp(12px,1.3vw,18px);font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--tink)}
.s-tx .t{margin-top:clamp(20px,2.2vw,32px);max-width:56ch;font-size:clamp(15px,1.15vw,17px);line-height:1.62}
.from{grid-column:2/9;grid-row:2;margin-top:clamp(30px,3.6vw,52px)}  /* the sleeves run one column wider than the text */
.from h3{color:var(--mute);font-weight:400;margin-bottom:12px}
.svs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.3vw,18px)}
.sv{display:block}
.sv img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--bg);box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .35s var(--out)}
.sv img.contain{object-fit:contain}
.sv:hover img,.sv:focus-visible img{transform:translateY(-4px)}
.sv:focus-visible{outline:none}
.sv span{display:block;margin-top:9px;font-size:11px;line-height:1.35;color:var(--mute)}
.sv b{display:block;font-weight:500;color:var(--ink)}
/* a slot where a photograph will go: hatched, so it never passes for a picture, and labelled with what should fill it */
.ph{position:relative;display:flex;align-items:flex-end;aspect-ratio:var(--r,4/5);padding:12px 14px;border:1px solid var(--rule);color:var(--mute);background:repeating-linear-gradient(135deg,rgba(242,239,232,.04) 0 1px,transparent 1px 10px),color-mix(in oklab,var(--ink) 3%,var(--bg))}
.ph b{display:block;font-weight:400;color:var(--ink);letter-spacing:.07em;text-transform:uppercase;font-size:10px;margin-bottom:3px}
.ph.tall{grid-column:10/13;grid-row:1/span 2;--r:4/5}
.ph.wide{grid-column:8/13;grid-row:1;--r:3/2}
.stop .ph{margin-top:calc(11px + clamp(12px,1.4vw,20px))}  /* its top lines up with the top of the place name */
/* his own room: the last stop, set apart on a warmer ground */
.room{position:relative;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) clamp(72px,10vw,150px);background:color-mix(in oklab,var(--tink) 5%,var(--paper))}
.room::before{left:calc(var(--pad) + 5px);bottom:auto;height:calc(clamp(56px,7.4vw,112px) + 5px)}
.r-hd{padding-top:var(--pt)}
.r-hd .s-no::before{background:var(--ink);box-shadow:0 0 0 4px color-mix(in oklab,var(--tink) 5%,var(--paper))}  /* solid: where the line ends */
.ph.pano{--r:21/9;margin-top:clamp(36px,4.6vw,68px)}
.r-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:clamp(40px,5vw,76px)}
.lead{grid-column:2/8;font-family:var(--title);font-size:clamp(24px,2.6vw,40px);line-height:1.16;letter-spacing:-.005em}
.spec{grid-column:9/13;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;border-top:1px solid var(--rule);padding-top:14px;line-height:1.4}
.spec dt{color:var(--mute)}
.r-pts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(44px,5.6vw,84px)}
.r-pts div{grid-column:span 3;border-top:1px solid var(--ink);padding-top:12px}
.r-pts div:first-child{grid-column:2/5}
.r-pts div:nth-child(2){grid-column:5/9}
.r-pts div:nth-child(3){grid-column:9/13}
.r-pts h3{font-size:14px;font-weight:600;letter-spacing:-.005em}
.r-pts p{margin-top:8px;font-size:14px;line-height:1.58;color:color-mix(in oklab,var(--ink) 82%,var(--bg));max-width:40ch}
.r-ph{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(44px,5.6vw,84px)}
.r-ph .ph{grid-column:2/7;aspect-ratio:auto;height:clamp(200px,27vw,400px)}  /* the two pictures share a height, not a shape */
.r-ph .ph + .ph{grid-column:7/13}
.r-end{margin:clamp(44px,5.6vw,84px) 0 0 calc(var(--col) + var(--gap));max-width:26ch;font-family:var(--title);font-size:clamp(24px,2.6vw,40px);line-height:1.16;color:var(--tink)}
.words{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(72px,10vw,150px) 0 0}
.words .s-k{grid-column:2/-1;margin-bottom:clamp(16px,2vw,28px)}
.words .quote{grid-column:2/10}
.words .quote p{font-size:clamp(28px,3.9vw,60px);line-height:1.08;letter-spacing:-.01em}
.ph.slot{grid-column:2/8;display:block;aspect-ratio:auto;margin-top:clamp(36px,4.6vw,64px);padding:14px 16px;line-height:1.5}
.s-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:clamp(72px,10vw,150px) 0 clamp(40px,5vw,72px)}
.s-foot nav{grid-column:2/7;display:flex;gap:clamp(14px,2vw,28px);border-top:1px solid var(--ink);padding-top:12px}
.s-foot .draft{grid-column:8/13;margin-top:0!important;border-top:1px solid var(--rule);padding-top:12px;line-height:1.55}
@media (max-width:760px){
  .liner,.s-intro{grid-column:1/-1}
  .stop,.r-hd{grid-template-columns:minmax(0,1fr)}
  .s-no{grid-column:1/-1;margin-bottom:14px}
  .s-tx,.from,.stop .ph,.ph.tall,.ph.wide{grid-column:1/-1;grid-row:auto;margin-left:24px}
  .stop .ph{margin-top:30px;--r:3/2}
  .svs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
  .lead,.spec,.r-pts div,.r-pts div:first-child,.r-pts div:nth-child(2),.r-pts div:nth-child(3),.r-ph .ph,.r-ph .ph + .ph,.words .s-k,.words .quote,.ph.slot,.s-foot nav,.s-foot .draft{grid-column:1/-1}
  .spec,.r-pts div + div,.r-ph .ph + .ph,.s-foot .draft{margin-top:28px!important}
  .r-ph .ph{margin-left:0;height:auto;aspect-ratio:3/2}
  .r-end{margin-left:0}
}

/* ─── The About page, short (2026-10-01) ──────────────────────────────────────────────────────────────────────────
   August: "a little too vertically long… there should be a creative way of showing all of this stuff without it feeling
   really long and intimidating." So the opening sentence is the menu. Each place in it is a spine: pick one and it is lit
   like a paper sleeve, and its chapter shows underneath, one at a time, in the space of one screen (js/journey.js). The
   room and his words follow, each cut down to fit a screen or less. These rules apply only when the script is running
   (html.js); without it, or at about.html#long, the rules above give the long page. */
.pick,.step,.ph.b{display:none}
body.page{background:radial-gradient(110% 60% at 50% 0%,color-mix(in oklab,var(--last) var(--tint),transparent),transparent 72%) fixed,var(--bg)}  /* the light of the chapter in view, taken from one of its records */
.js .story .s-hero{padding:clamp(92px,13vh,124px) 0 0}
.js .story .s-hero .lbl{margin-bottom:clamp(12px,1.6vw,20px)}
.js .story .liner{grid-column:1/10;grid-row:2;font-size:clamp(30px,4.5vw,66px);line-height:1.08}
/* every place is underlined, so it reads as something to click (August, 2026-10-01: "make it a little more obvious that I
   can click the other places"). The line is the foot of the paper block: pointing at a place thickens it, and picking the
   place raises it into the block, from the same edge, so the three states are one thing at three heights. Two layers:
   the block over the word and its padding, the line under the word only. */
.js .story .liner a{color:var(--ink);padding:0 .07em;margin:0 -.07em;
  background:linear-gradient(#e9e6df,#e9e6df) left 0 bottom .09em/100% 0 no-repeat padding-box,linear-gradient(#e9e6df,#e9e6df) left 0 bottom .09em/100% 2px no-repeat content-box;
  transition:color .25s ease,background-size .3s var(--out)}
.js .story .liner a:hover,.js .story .liner a:focus-visible{color:var(--tink);background-size:100% 0,100% .11em}
.js .story .liner a.on,.js .story .liner a.on:hover,.js .story .liner a.on:focus-visible{color:#0c0c0d;background-size:100% 80%,100% 2px}  /* the place picked: a paper spine with its name on it */
.js .story .s-intro{grid-column:10/13;grid-row:2;margin-top:0;align-self:end;padding-bottom:.5em;font-size:13.5px;line-height:1.55}
.js .story .aw-line{font-size:14.5px;line-height:1.4}
.js .story .pick{display:block;grid-column:1/-1;grid-row:3;margin-top:clamp(18px,2.2vw,26px);color:color-mix(in oklab,var(--ink) 78%,var(--bg))}
.js .story .stops{display:grid;margin-top:clamp(18px,2.6vh,30px);border-top:1px solid var(--rule);touch-action:pan-y}
.js .story .stop{grid-area:1/1;padding:clamp(20px,3vh,30px) 0 0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.js .story .stop.on,.js .story .stops:not(.live) .stop:first-child{opacity:1;visibility:visible;transition:opacity .4s ease .08s,visibility 0s}
.js .story .stop::before,.js .story .stop .s-no{display:none}
.js .story .stop{scroll-margin-top:100vh}  /* about.html#london shows London's chapter; the page itself stays at the top instead of jumping down to it */
.js .story .stop .ph{grid-column:1/5;grid-row:1;--r:4/3;margin-top:0}
.js .story .stop .ph.b{display:flex;grid-column:10/13;--r:1/1}
.js .story .stop .s-tx{grid-column:5/10;grid-row:1;padding:0 clamp(0px,2.4vw,36px) 0 clamp(0px,1vw,14px)}
.js .story .stop h2{font-size:clamp(34px,4.3vw,62px);line-height:1;margin-top:10px}
.js .story .s-st{margin-top:10px}
.js .story .s-tx .t{margin-top:14px;font-size:15px;line-height:1.58;max-width:none}
.js .story .from{grid-column:10/13;grid-row:1;margin-top:0}
.js .story .svs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.js .story .sv span{display:none}  /* covers only: the line under them reads out the one pointed at, so nothing changes size */
.rd{display:none}
.js .story .rd{display:block;margin-top:12px;min-height:2.9em;color:var(--mute);line-height:1.45}
.js .story .rd b{font-weight:400;color:var(--ink)}
.js .story .step{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:clamp(14px,2.2vh,24px);padding-bottom:clamp(44px,7vh,80px)}
.step .n{color:var(--mute)}
.step button{margin-left:clamp(14px,2vw,26px)}
.step button:disabled{opacity:.35;cursor:default;background-size:0 1px}
/* his room, in one screen: the name and the facts, the picture, and what the room is for beside it */
.js .story .room{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding-top:clamp(40px,6vh,56px);padding-bottom:clamp(40px,6vh,56px)}
.js .story .room::before,.js .story .r-hd .s-no,.js .story .r-ph{display:none}
.js .story .r-hd{display:block;grid-column:1/8;grid-row:1;padding-top:0}
.js .story .room h2{font-size:clamp(44px,6.4vw,92px)}
.js .story .r-body{display:contents}
.js .story .spec{grid-column:8/13;grid-row:1;align-self:end}
.js .story .ph.pano{grid-column:1/8;grid-row:2/span 2;aspect-ratio:auto;align-self:stretch;min-height:clamp(220px,30vw,400px);margin-top:clamp(24px,3vw,40px)}  /* as tall as the text beside it */
.js .story .lead{grid-column:8/13;grid-row:2;margin-top:clamp(24px,3vw,40px);font-size:clamp(19px,1.9vw,27px);line-height:1.2}
.js .story .r-pts{grid-column:8/13;grid-row:3;grid-template-columns:minmax(0,1fr);row-gap:14px;margin-top:clamp(18px,2.2vw,28px)}
.js .story .r-pts div,.js .story .r-pts div:first-child,.js .story .r-pts div:nth-child(2),.js .story .r-pts div:nth-child(3){grid-column:1/-1;border-top-color:var(--rule);padding-top:10px}
.js .story .r-pts p{margin-top:4px;font-size:13.5px;line-height:1.5;max-width:none}
.js .story .r-end{grid-column:1/8;grid-row:4;margin:clamp(16px,2vw,24px) 0 0;max-width:none;font-size:clamp(19px,1.9vw,27px);line-height:1.2}  /* the last line sits under the picture */
/* his words, beside the slot for the text still to come */
.js .story .words{padding-top:clamp(56px,8vh,88px)}
.js .story .words .s-k{grid-column:1/-1}
.js .story .words .quote{grid-column:1/8}
.js .story .words .quote p{font-size:clamp(24px,3vw,44px);line-height:1.12}
.js .story .ph.slot{grid-column:8/13;grid-row:2;margin-top:0;align-self:start}
.js .story .s-foot{padding-top:clamp(56px,8vh,88px)}
.js .story .s-foot nav{grid-column:1/7}
@media (prefers-reduced-motion:no-preference){html:has(body.page){scroll-behavior:smooth}}
@media (max-width:760px){
  .js .story .liner,.js .story .s-intro,.js .story .pick{grid-column:1/-1;grid-row:auto}
  .js .story .s-intro{margin-top:18px;padding-bottom:0}
  .js .story .stop .ph,.js .story .stop .ph.b,.js .story .stop .s-tx,.js .story .from{grid-column:1/-1;grid-row:auto;margin-left:0}
  .js .story .stop .ph{--r:16/9}
  .js .story .stop .ph.b{display:none}
  .js .story .stop .s-tx{margin-top:18px;padding:0}
  .js .story .from{margin-top:22px}
  .js .story .r-hd,.js .story .spec,.js .story .ph.pano,.js .story .lead,.js .story .r-pts,.js .story .r-end,.js .story .words .quote,.js .story .ph.slot,.js .story .s-foot nav{grid-column:1/-1;grid-row:auto}
  .js .story .ph.slot{margin-top:24px!important}
  .js .story .r-hd .s-tx{margin-left:0}
  .js .story .ph.pano{aspect-ratio:16/10;align-self:auto;min-height:0}
  .js .story .r-end{margin-left:0}
}

/* ─── Selected work: six records in a row, each a sleeve with its vinyl showing (2026-10-01) ───────────────────────
   Records, not films: Greg wants the record work seen. One row, so the part is well under a screen. Pointing at a record
   slides its vinyl out a little further (nothing changes size); a click opens it; Play plays it. */
.work,.contact{background:var(--paper);padding:clamp(64px,9vw,120px) var(--pad) clamp(56px,7vw,96px)}
.work .hd,.contact .hd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;border-top:1px solid var(--ink);padding-top:10px;margin-bottom:clamp(28px,3.4vw,48px)}
.work .hd h2,.work .hd h3,.contact .hd h2{grid-column:1/6;font-family:var(--title);font-weight:400;font-size:clamp(30px,3.4vw,52px);letter-spacing:-.01em}
.work .hd p,.contact .hd p{grid-column:6/13;color:var(--mute)}
/* his words sit beside the two names, over the form (2026-10-04; they were in the bio). Ivory, not the warm tint: next to
   gold marks the tint reads as gold, and gold is for awards */
.say{grid-column:6/13}
.say .quote{margin-bottom:clamp(26px,3.2vw,44px)}
.say .quote .sc{display:block;color:var(--mute);margin-bottom:10px}
.say .quote p{font-size:clamp(20px,2vw,27px);line-height:1.2;color:var(--ink);text-wrap:balance}
.pks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:clamp(18px,2.8vw,44px);row-gap:40px}
.pk-sl{position:relative;display:block;width:82%;aspect-ratio:1}
.pk-sl img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover;background:var(--bg);box-shadow:0 0 0 1px rgba(242,239,232,.09)}
.pk-sl img.contain{object-fit:contain}
.pk-v{position:absolute;inset:3%;z-index:1;border-radius:50%;transform:translateX(26%);transition:transform .7s var(--out);box-shadow:0 0 0 1px rgba(242,239,232,.17);
  background:conic-gradient(from 40deg,transparent 0 8%,rgba(255,255,255,.1) 13%,transparent 18% 58%,rgba(255,255,255,.08) 63%,transparent 68%),radial-gradient(circle,var(--paper) 0 1.6%,var(--rm,#5d5d61) 1.9% 17%,transparent 17.4%),repeating-radial-gradient(circle,#2c2c2c 0 1px,#131313 1px 3px)}
.pk:hover .pk-v,.pk-sl:focus-visible .pk-v{transform:translateX(40%)}
.aww:hover .pk-v,.aww .pk-sl:focus-visible .pk-v{transform:translateX(46%)}  /* no further: at three across it would reach the next sleeve */
.pk-sl:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.pk h3{margin-top:18px;font-family:var(--title);font-weight:400;font-size:clamp(19px,1.8vw,26px);line-height:1.08}
.pk-t{margin-top:5px;font-size:13.5px;line-height:1.35}
.pk-c{margin-top:7px;color:var(--mute)}
.pk-a{margin-top:11px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}  /* Play; or, where no song can be played, "Listen on" and the services that have the record */
.pk-a > *{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}  /* a button does not take these from its parent */
.work .draft{margin-top:clamp(32px,4vw,52px)!important}
/* the awards spot (2026-10-04; Camille: "maybe an awards section in the work can stand out"). A band of its own under the
   selected records, on the same six columns. A win is a sleeve like the ones above with a gold disc, as a winner's
   record has when it is opened; the nominations are a row of small sleeves. Under them the three awards stand on one
   line, each with the gold mark the records carry: a solid dot for a win, a ring for a nomination. */
/* The awards band is told from the selected records by gold alone: the rule over its title, the dots, and the two gold
   records, which stand further out of their sleeves than the black ones above. (For a few hours on 2026-10-04 it had
   a room of its own, a ground that took a little gold with a soft light in it. August, on seeing it: "what do we think
   of the color fades? is that professional or AI." It was the clearest case of the second. By id: .aw is also the
   award marks on the #barcode band.) */
#awards{margin-top:clamp(44px,5.2vw,72px);scroll-margin-top:clamp(64px,7vw,96px)}
#awards .hd{border-top-color:color-mix(in oklab,var(--gold) 70%,transparent)}
.aww .pk-v{transform:translateX(34%)}
/* two rows shared by the three blocks: the sleeves, then the words. So the three awards start on one line whatever the
   sleeves above them need (a nominated title can run to two lines under its small sleeve). */
.aws{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto;column-gap:clamp(18px,2.8vw,44px);align-items:start}
.aww,.awn{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-items:start}
/* a gold record: the grooves show, as on a winner's disc */
.aww .pk-v{background:conic-gradient(from 40deg,transparent 0 8%,rgba(255,255,255,.3) 13%,transparent 18% 58%,rgba(255,255,255,.22) 63%,transparent 68%),radial-gradient(circle,var(--paper) 0 1.6%,#f0cf7a 1.9% 17%,transparent 17.4%),repeating-radial-gradient(circle,#e6b95c 0 1px,#c9993b 1px 3px)}
.awn{grid-column:3/7}
.awn ul{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:clamp(8px,1.1vw,16px);row-gap:18px}
.awn .pk-sl{width:100%}
.awn .pk-sl img{transition:transform .35s var(--out)}
.awn .pk-sl:hover img,.awn .pk-sl:focus-visible img{transform:translateY(-3px)}
.awn li p{margin-top:8px;font-size:11.5px;line-height:1.3}
.awn li .y{display:block}  /* the year it was nominated, over the title, so the seven years stand on one line */
.awn li b{display:block;font-weight:500}
.aws .y{color:var(--mute)}
.aw-x{margin-top:18px}
.aws h4{position:relative;padding-left:19px;font-family:var(--bfam,var(--sans));font-weight:700;letter-spacing:-.03em;font-size:clamp(17px,1.6vw,22px);line-height:1.1}
.aws h4 .y{display:block;margin-top:3px;font-weight:400;font-size:.74em;letter-spacing:0}  /* the year of the award, on a line of its own under its name at every width */
.aws h4::before{content:"";position:absolute;left:0;top:.26em;width:10px;height:10px;border-radius:50%}
.aws h4.win::before{background:var(--gold)}
.aws h4.nom::before{box-shadow:inset 0 0 0 1.5px var(--gold)}
.aw-t{margin-top:6px;font-size:13.5px;line-height:1.35}
.aw-c{margin-top:3px;font-size:13.5px;line-height:1.35}
.aw-r{margin-top:7px;color:var(--mute)}
.aw-t,.aw-c,.aw-r{text-wrap:balance}
/* narrower, the awards keep the columns the selected records use: three across below 1048px, two on a narrow phone.
   The nominations take a row of their own there, so their name goes above their sleeves, not under them. */
@media (max-width:1047px){
  .aws{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,3vw,32px)}
  .awn{grid-column:1/-1;display:flex;flex-direction:column-reverse;margin-top:clamp(30px,5vw,44px)}
  .awn .aw-x{margin:0 0 16px}
}
@media (max-width:760px){.awn ul{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px}}
@media (max-width:479px){.aws{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}}

/* ─── Contact (mock, 2026-10-01): the two of them on the left, the form on the right, his links, a last line ───── */
.ct{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.who{grid-column:1/6}
.person + .person{margin-top:clamp(22px,2.6vw,34px)}
.person h3{font-family:var(--title);font-weight:400;font-size:clamp(26px,2.8vw,40px);line-height:1.05}
.person p{margin-top:6px;font-size:14px}
.todo{color:var(--mute)}
.links{list-style:none;display:flex;flex-wrap:wrap;gap:10px clamp(16px,2vw,28px);margin-top:clamp(28px,3.4vw,44px);padding-top:14px;border-top:1px solid var(--rule)}
.form{grid-column:6/13;display:grid;row-gap:clamp(18px,2vw,26px)}
.form label{display:block}
.form label span{display:block;color:var(--mute)}
.form input,.form textarea{display:block;width:100%;margin-top:2px;padding:9px 0;background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;color:var(--ink);font:inherit;font-size:16px;line-height:1.45;outline:none;resize:vertical;transition:border-color .2s}
.form input:focus,.form textarea:focus{border-bottom-color:var(--ink)}
.send{display:flex;align-items:center;gap:18px}
.btn{padding:11px 26px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:500;transition:background-color .2s}
.btn:hover,.btn:focus-visible{background:var(--tink);outline:none}
.said{color:var(--mute)}
.said.on{color:var(--ink)}  /* Send was pressed: the note answers */
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(56px,7vw,96px);padding-top:14px;border-top:1px solid var(--rule);color:var(--mute)}
body.shelf-only .work,body.shelf-only .contact,body.spines-only .work,body.spines-only .contact,body.about-only .work,body.about-only .contact{display:none}
body.work-only .intro,body.work-only .track,body.work-only .spines,body.work-only .about,body.work-only .contact{display:none}
body.contact-only .intro,body.contact-only .track,body.contact-only .spines,body.contact-only .about,body.contact-only .work{display:none}
/* the hooks win over the posters' own display rules (2026-10-15: once Work D was the default, its grid outranked these, Work stayed above the shelf in the checks' page, and every pointer landed on it) */
body.shelf-only .work,body.spines-only .work,body.about-only .work,body.contact-only .work,body.shelf-only .contact,body.spines-only .contact,body.about-only .contact,body.work-only .contact,body.work-only .about,body.shelf-only .about,body.spines-only .about,body.contact-only .about,body.work-only .spines,body.about-only .spines,body.contact-only .spines,body.work-only .track,body.spines-only .track,body.about-only .track,body.contact-only .track{display:none!important}
body.flow .work,body.flow .contact{background:transparent}
body.flow .work .hd,body.flow .contact .hd{border-top:0;padding-top:0}

/* ─── The note about dragging, on the picture itself, at every window size (2026-10-01, reworked 2026-10-02) ───────
   August: "the click and drag is maybe a little more obvious. Maybe put that on the actual graphic", then "i dont think
   i see the click to drag info". It was only shown from 1048px wide, and it was hidden for the whole visit by the first
   wheel event that leaned sideways. Now: a pill on the shelf or crate at every size, in the sans at semibold, always there
   at rest; it steps out of the way while the records are being dragged or swiped (.busy) and comes back. On a wide
   window it sits just above the timeline ("…or pick a year below"); in the stacked layout it sits right under the
   timeline, over the top of the records ("…above"). The note under the title is not used in these views. */
.drag{display:none}
body.clean .shelf .id p,body.crate:not(.barcode) .shelf .id p{display:none}
body.clean .drag,body.crate:not(.barcode) .drag{position:absolute;left:50%;bottom:calc(var(--pad) + 52px);transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border:1px solid rgba(242,239,232,.72);border-radius:999px;background:rgba(13,12,11,.86);color:var(--ink);font-size:11.5px;font-weight:600;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:opacity .3s ease}
.shelf.busy .drag{opacity:0}
.shelf.used .drag{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}  /* dragged once: the note has done its job */
/* how to use the shelf and the crate (2026-11-05): one plain grey line under the Shelf / Crate switch that stays (js/shelf.js);
   the pill above is shown only with #pill. Stacked (phones), it stands where the pill stood, between the timeline and the
   records: the head is at the top, the timeline 115px under it */
body:not(.pill) .shelf .drag{display:none!important}
body:is(.clean,.crate) .shelf .id p.how{display:block;margin:14px 0 0;max-width:min(300px,40vw);font-size:12.5px;line-height:1.5;color:var(--mute);text-wrap:pretty}
body.barcode .shelf .id p.how{display:none}
.drag i{font-style:normal;font-weight:400;font-size:17px;line-height:1;letter-spacing:0;margin-top:-2px;animation:nudge 2.8s ease-in-out infinite}
@keyframes nudge{0%,58%,100%{transform:none}68%{transform:translateX(-4px)}84%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.drag i{animation:none}}
.drag .d-above{display:none}
@media (min-width:640.01px) and (max-width:1291px){.drag .d-what{display:none}}
@media (min-width:1292px) and (max-height:779px){.drag .d-what{display:none}}  /* a large window that is short: the long note reached the first sleeves */
body.clean .shelf,body.crate .shelf{-webkit-user-select:none;user-select:none}  /* a drag across the records must not select the words */
body.clean .cap,body.crate .cap{-webkit-user-select:text;user-select:text}
/* the Shelf / Crate switch reloads the page; it comes back with a short fade at its place, not a flash from the top */
html.swap body{animation:swapin .4s ease .1s both}
@keyframes swapin{from{opacity:0}}

@media (max-width:760px){
  .work .hd h2,.work .hd p,.contact .hd h2,.contact .hd p{grid-column:1/-1}
  .work .hd p,.contact .hd p{margin-top:4px}
  .pks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;row-gap:34px}
  .who,.say{grid-column:1/-1}
  .say{margin-top:44px}
}

/* ─── The discography at any window size (2026-10-02) ───────────────────────────────────────────────────────────────
   August's screenshots of a small window (about 590 by 480): the shelf squeezed between the timeline and the caption,
   the crate a few pixels wide, the title under the menu. Three changes.
   1. The one-screen discography has a floor on its height. When the window is shorter than the part needs, the part is
      taller than the window and simply scrolls past. Sizes inside it come from the part's own height (--sh), not the
      window's.
   2. The stacked layout (title, timeline, records, caption down the page) is used wherever the caption does not fit
      beside the records. The barcode variation keeps its own layout.
   3. The menu has a dark ground of its own once the opening is past, so what scrolls under it is covered.
   Which layout (2026-10-05). The row climbs from the lower left to the upper right, so how much of it shows depends on
   the height it is given. Stacked, the title, the timeline and the note are above it and the caption below, which
   takes about 470px: fine in a tall window, but in one that is wide and short (August's screenshot, about 1000 by
   650) the row was a stub in the left third, the held record was cut by the fade above it, and the right half of the
   screen was empty. It used to be chosen by width alone (below 1048px). Now it is stacked up to 640px wide (a phone,
   and August's preview pane, about 600 wide, which stays as he knows it), and between 641 and 1047 only when the
   window is upright or nearly square (no wider than nine tenths of its height: a tablet held upright, half of a laptop
   screen).
   A window from 641px wide that is wider than that gets the caption beside the records, as on a large screen, with
   the caption a little narrower. js/shelf.js asks the same question (STACKED): keep the two in step. */
header.on-paper{background:linear-gradient(#000 68%,rgba(0,0,0,0))}
body.clean .track,body.crate .track{height:auto}
body.clean .shelf,body.crate .shelf{--sh:max(620px,min(100svh,90vw));position:relative;height:var(--sh)}  /* no taller than nine tenths of the width (2026-11-04; August: "little too much black space up on the top here"): the row's size and rise follow the width and it stands near the foot, so a window taller than that only added black at the top; a taller window now scrolls on into Credits, as the stacked layout does past 940px */
/* the crate beside the caption: no wider than leaves the caption clear, no taller than leaves the note under it clear */
.bin{--cw:min(calc(var(--sh,100vh) * .54),38vw,calc(var(--sh,100vh) * .86 - 264px),calc(100vw - 780px))}
/* beside the records in a window 641 to 1047px wide: the caption is as wide as the room the timeline leaves it (the
   timeline stops min(330px,34vw) + 48px short of the right margin), the note about dragging is centred over the
   timeline, not the page (it would run into the caption), and the crate stands in the middle of the room left of the
   caption, as large as that room and the height allow. (left, right and the row's place are said in full because the
   phone rules further up, at 760px and below, move them.) */
@media (min-width:640.01px) and (max-width:1047px){
  body.clean .cap,body.crate:not(.barcode) .cap{left:auto;right:var(--pad);width:min(330px,34vw)}
  body.clean .shelf,body.crate:not(.barcode) .shelf{--sh:max(min(100svh,90vw),calc(326px + var(--W) * 2.26))}  /* 560 to 600px, not 620: the least that keeps the held record under the fade and clear of the large title, so a short window keeps the note in its first screenful */
  body.crate:not(.barcode) .yr{display:none}  /* the crate stands at the left here, under the large grey year: the year is on the timeline and in the caption */
  body.clean .cap h3,body.crate:not(.barcode) .cap h3{text-wrap:balance}  /* no single word left on the second line of a title */
  body.clean .cap dd,body.crate:not(.barcode) .cap dd{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}  /* a record with fourteen names made the narrow caption tall enough to reach the row; the full list is on the open record */
  body.clean .drag,body.crate:not(.barcode) .drag{background:#000}  /* a solid ground: the row's near end runs behind the note here once a year has been picked */
  body.clean .cap .acts,body.crate:not(.barcode) .cap .acts{flex-wrap:wrap;row-gap:8px}  /* in the narrower caption the two actions go on two lines whole; "Open the record · 24 tracks" broke in the middle */
  body.clean .cap .acts > *,body.crate:not(.barcode) .cap .acts > *{white-space:nowrap}
  body.clean .world{left:22%;top:min(76%,calc(var(--sh) - 190px))}  /* in a short window the row's near end stands a little higher, clear of the note that is now under it */
  body.clean .drag,body.crate:not(.barcode) .drag{left:calc(var(--pad) + (100% - var(--pad) * 2 - min(330px,34vw) - 48px) / 2)}
  body.crate:not(.barcode) .bin{--free:calc(100vw - var(--pad) * 2 - min(330px,34vw) - 48px);--cw:min(calc(var(--sh) * .54),calc(var(--sh) * .86 - 264px),calc(var(--free) - 24px));left:calc(var(--pad) + var(--free) / 2)}
}
/* down the page: the title and the switch, the timeline, the note about dragging, the records, the caption. The note
   sits right under the timeline so that it is in the first screenful even in a short window (August's pane is about
   590 by 500). --top is where the records begin and --foot is what the tallest caption needs under them. */
@media (max-width:640px), (max-width:1047px) and (max-aspect-ratio:9/10){
  body.clean .shelf,body.crate:not(.barcode) .shelf{--sh:clamp(720px,100svh,940px);--top:calc(var(--pad) + 266px);--foot:calc(var(--pad) + 190px)}  /* 2026-10-15: capped at 940px. The part was as tall as the window and the row stands at its foot, so a tall narrow window (August's pane pulled tall, 2000px) put a hole between the timeline and the records; 940 holds the title, the timeline, the note, the row and the caption with air, and a taller window scrolls on */
  body.clean .yr,body.crate:not(.barcode) .yr{display:none}
  body.clean .scrub,body.crate:not(.barcode) .scrub{left:var(--pad);right:var(--pad);bottom:auto;top:calc(var(--pad) + 150px)}
  body.clean .scrub::before,body.crate:not(.barcode) .scrub::before{display:none}
  body.clean .cap,body.crate:not(.barcode) .cap{left:var(--pad);right:var(--pad);width:auto}
  body.clean .drag,body.crate:not(.barcode) .drag{left:50%;bottom:auto;top:calc(var(--pad) + 200px)}
  body.clean .shelf .id p.how,body.crate:not(.barcode) .shelf .id p.how{position:absolute;left:0;right:0;top:128px;max-width:none;margin:0}  /* 128px under the head's line: just under the timeline's years (the head and the timeline both stand on --pad, so this holds at every phone width) */
  .drag .d-below{display:none}
  .drag .d-above,.drag .d-what{display:inline}
  /* the crate takes the room between the note and the caption, in the middle of it */
  body.crate:not(.barcode) .bin{--cw:min(72vw,calc(var(--sh) - var(--top) - var(--foot) - 16px),440px);left:50%;top:calc(var(--top) + (var(--sh) - var(--top) - var(--foot)) / 2)}
  /* the shelf's near end stands just above the caption; the held record lifts less; the far end fades before the note */
  body.clean .world{left:10%;top:calc(var(--sh) - var(--foot) - 34px)}
  body.clean .lp.pop{--py:calc(var(--H) * -.55);--sc:1.06}
  body.clean .cam{-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--pad) + 236px),#000 calc(var(--pad) + 262px));mask-image:linear-gradient(to bottom,transparent calc(var(--pad) + 236px),#000 calc(var(--pad) + 262px))}  /* the fade ends at 262, not 300 (2026-10-05): in a window no taller than the floor the held record's top was inside it and dimmed */
}
@media (max-width:559px){.drag .d-above{display:none}}
/* Selected work: six across needs a wide screen. Below 1048px it is two rows of three, and on a narrow phone three rows of two. */
@media (max-width:1047px){.pks{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,3vw,32px);row-gap:36px}}
@media (max-width:479px){.pks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;row-gap:34px}}
/* The About page below 1048px: the awards line and the introduction go under the sentence instead of beside it, where
   they were a tall narrow column. */
@media (max-width:1047px){
  .js .story .liner,.js .story .s-intro,.js .story .pick{grid-column:1/-1;grid-row:auto}
  .js .story .s-intro{margin-top:18px;padding-bottom:0;max-width:62ch}
}

/* ─── Titles in Geist Bold (August's pick, 2026-10-02: "geist bold") ───────────────────────────────────────────────
   He asked to see the discography "with a bolder sans serif font", was shown five beside the serif
   (site/shots/sans-options.png) and chose the site's own sans at bold. So the section titles and the record titles are
   Geist Bold, on both pages, and since later the same day so are his name on the opening and the line under it.
   Instrument Serif is kept for his words (the quote) and the sentence that opens the About page. These rules come after the serif ones they replace and apply unless the page is
   asked for the serif again (#serif, which adds body.serif, to compare). #sans=Family+Name tries another family through
   the variables below (js/opening.js); --bk scales a family that runs wide or narrow against Geist. */
body:not(.serif) .shelf .id h2,body:not(.serif) .spines .hd h2,body:not(.serif) .work .hd h2,body:not(.serif) .work .hd h3,body:not(.serif) .contact .hd h2,
body:not(.serif) .cap h3,body:not(.serif) .bk h3,body:not(.serif) .pk h3,body:not(.serif) .person h3,body:not(.serif) .oh b,
body:not(.serif) .stop h2,body:not(.serif) .room h2{font-family:var(--bfam,var(--sans));font-weight:var(--bw,700);letter-spacing:var(--bls,-.045em);text-transform:var(--bcase,none)}
body:not(.serif) .shelf .id h2{font-size:calc(clamp(38px,5.1vw,82px) * var(--bk,1));line-height:.95}
body:not(.serif) .spines .hd h2,body:not(.serif) .work .hd h2,body:not(.serif) .work .hd h3,body:not(.serif) .contact .hd h2{font-size:calc(clamp(27px,3vw,46px) * var(--bk,1));line-height:1}
body:not(.serif) .cap h3{font-size:calc(clamp(20px,1.9vw,27px) * var(--bk,1));line-height:1.08}
body:not(.serif) .bk h3{font-size:calc(clamp(28px,3vw,46px) * var(--bk,1));line-height:1.02}
body:not(.serif) .pk h3{font-size:calc(clamp(16px,1.5vw,21px) * var(--bk,1));line-height:1.12}
body:not(.serif) .person h3{font-size:calc(clamp(22px,2.3vw,33px) * var(--bk,1))}
body:not(.serif) .oh b{font-size:calc(clamp(28px,2.9vw,40px) * var(--bk,1))}
/* his name on the opening and the line under it (August, 2026-10-02: "can we make greg hayes and the text underneath part
   of this new fonting?"). Scoped to the opening: the About page's opening sentence is also an h1 and stays in the serif. */
body:not(.serif) .ttl h1{font-family:var(--bfam,var(--sans));font-weight:var(--bw,700);letter-spacing:var(--bls,-.045em);text-transform:var(--bcase,none);font-size:calc(clamp(40px,9.2vw,150px) * var(--bk,1));line-height:.95}
body:not(.serif) .ttl p{font-weight:500;letter-spacing:-.005em}
/* the About page: the places and the name of his room */
body:not(.serif) .stop h2,body:not(.serif) .room h2{font-size:clamp(40px,6.4vw,100px);line-height:.95}
.js body:not(.serif) .story .stop h2{font-size:clamp(30px,3.7vw,54px);line-height:1}
.js body:not(.serif) .story .room h2{font-size:clamp(38px,5.4vw,78px)}

/* ─── Two fonts: the small labels and numbers in Geist (2026-10-02) ──────────────────────────────────────────────────
   August: "i should only have 2 fonts on the site". There were three: Geist, Instrument Serif and Geist Mono. Shown both
   ways to get to two (site/shots/two-fonts.png), he picked B: keep the serif, drop the mono. So everything that was set
   in the mono is Geist: catalogue numbers, the years on the timeline and the divider cards, track numbers and times, the
   notes, the photograph slots, the room's list. Figures are tabular so they line up as they did, and the sizes are a
   touch larger because Geist runs smaller than its mono at the same size. Geist Mono is no longer loaded. */
.yr,.lp.div b,.tl i,.tl em,.scrub b span,.band b span,.band .und,.slab em,.yt,.fy small{font-variant-numeric:tabular-nums}
.yr{font-weight:500;letter-spacing:-.045em}
.lp.div b{font-weight:600}
.tl i,.tl em,.scrub b span,.band b span,.band .und{font-size:10.5px}
.slab em{font-size:11px}
.s-st{font-size:10.5px;font-weight:500;letter-spacing:.09em}
body:not(.serif) .cr.type b{font-family:var(--sans);font-weight:700;letter-spacing:-.04em}  /* a title on a plain sleeve (the barcode variation) is a title like the others */

/* ─── #v2: the "creative studio" pass (2026-10-04), behind a switch to compare ────────────────────────────────────────
   August: "Let's start thinking about how to make it feel more like a creative studio's website in its simplicity, its
   design." Read against his own two sites (augustorser.com, Bay One Ten), the gap was this: each screen should show one
   thing large (his name, real covers, the row of records, one sentence) with everything else small and said once. The
   page showed its section names larger than the work, three kinds of pill, a sleeve's small print drawn as decoration,
   and soft glows. #v2 puts body.studio on, #v1 takes it off; nothing here applies without it. Two more words show one
   part the other way: #v2-titles (body.titles) keeps the bold section titles, #v2-words (body.dnote) shows the note
   about dragging as plain words. By screen below; the reasons, what a blind comparison said and what was left alone are
   in section 29 of docs/DESIGN-NOTES.md. Scripts read the same classes for the few things a stylesheet cannot do.
   The pass takes things away around the records, never the records. A first, barer version also took out the vinyl
   beside the six selected records, the seven nominated covers, the pill round the drag note and the grey notes that
   say what is a stand-in. August, Greg or Camille had asked for each of those, so they are back as they were. */

/* every part opens the way About does: one line across the page and a small label, so the large words on a screen are
   the work's, not the section's. This takes the bold section titles of 2026-10-02 down to labels (Geist Bold stays for
   the names of records, awards and people); #v2-titles keeps the titles, to compare. */
body.studio:not(.titles) .work,body.studio:not(.titles) .contact,body.studio:not(.titles) .spines{padding-top:clamp(76px,7.2vw,96px)}
body.studio:not(.titles) .work .hd,body.studio:not(.titles) .contact .hd,body.studio:not(.titles) .spines .hd{display:block;margin-bottom:clamp(16px,2vw,26px)}
body.studio:not(.titles) .work .hd h2,body.studio:not(.titles) .work .hd h3,body.studio:not(.titles) .contact .hd h2,body.studio:not(.titles) .spines .hd h2,body.studio:not(.titles) .shelf .id h2{font-family:var(--sans);font-size:10.5px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;color:var(--mute)}
body.studio:not(.titles) .spines .hd p:not(.his){margin-top:6px;font-size:13.5px}  /* "One pile for each year, newest on the left." stays under the label: it says what the chart is */
@media (max-width:1047px){body.studio:not(.titles) .work,body.studio:not(.titles) .contact,body.studio:not(.titles) .spines{padding-top:clamp(64px,9vw,96px)}}  /* About's own figure at this width */

/* the opening: the name comes up with the music as before, but to ivory, not to the warm tint (which read as gold, and
   gold is for awards). No shadow under the dial. (js/art.js, which drew the film strip, left its glows off: it is in site/archive/opening-film/ since 2026-10-13), and js/opening.js has the
   colour all the way in at four fifths of the scroll, so the finished picture is seen standing still. */
body.studio .ttl{color:var(--ivory)}
body.studio .knob .disc{filter:none}

/* Selected work: his credit sits straight under each title and the six Play words stand on one line, however long a
   title runs (they stood at three heights). */
/* (the rules that stood the six Play words on one line were for the row of six; in H they gave the corner's Play a
   second gap, and are gone, 2026-10-27) */

/* Awards: the same line as the other parts (the gold rule goes: gold is the dot, the ring and the record). */
body.studio #awards .hd{border-top-color:var(--ink)}

/* Discography: the row is the large thing. The large grey year goes (the year is on the cards in the row, on the
   timeline and in the caption); with the title a label, the stacked layout moves up by the 38px the title gave back
   (js/shelf.js keeps its fade line in step: LABELS). The caption and the drag note are as they were. */
body.studio .yr{display:none}
/* beside the records in a window 641 to 1047px wide, with the title a label: the part may be shorter than the 620px it
   needs with the large title, down to what the held record needs to rise clear of the menu (about 490 to 520px). So in
   a short window the timeline and the note about dragging are still in the first screenful. */
@media (min-width:640.01px) and (max-width:1047px){
  body.studio:not(.titles).clean .shelf{--sh:max(min(100svh,90vw),calc(283px + var(--W) * 2))}  /* (no taller than nine tenths of the width, as above) */
  body.studio:not(.titles).crate:not(.barcode) .shelf{--sh:max(min(100svh,90vw),560px)}  /* the crate's size comes from the height: at 560px it is as large as it was stacked (about 220px) */
  /* the far end's fade stops above the held record when the part is that short (it is 24% of the height otherwise, and the record rose into it) */
  body.studio:not(.titles).clean .cam{-webkit-mask-image:linear-gradient(to bottom,transparent 3%,#000 min(24%,calc(var(--sh) - 240px - var(--W) * 1.75)));mask-image:linear-gradient(to bottom,transparent 3%,#000 min(24%,calc(var(--sh) - 240px - var(--W) * 1.75)))}
}
@media (max-width:640px), (max-width:1047px) and (max-aspect-ratio:9/10){
  body.studio:not(.titles).clean .shelf,body.studio:not(.titles).crate:not(.barcode) .shelf{--sh:clamp(682px,100svh,900px);--top:calc(var(--pad) + 228px)}
  body.studio:not(.titles).clean .scrub,body.studio:not(.titles).crate:not(.barcode) .scrub{top:calc(var(--pad) + 112px)}
  body.studio:not(.titles).clean .drag,body.studio:not(.titles).crate:not(.barcode) .drag{top:calc(var(--pad) + 162px)}
  body.studio:not(.titles).clean .cam{-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--pad) + 198px),#000 calc(var(--pad) + 224px));mask-image:linear-gradient(to bottom,transparent calc(var(--pad) + 198px),#000 calc(var(--pad) + 224px))}
}
/* #v2-words: the note about dragging as plain words in the menu's capitals, at the left margin over the timeline (under
   it in the stacked layout). No pill, arrow or loop. To compare only: August asked twice for the note to be easy to see. */
body.dnote.clean .drag,body.dnote.crate:not(.barcode) .drag{left:var(--pad);transform:none;padding:0;border:0;border-radius:0;background:none;font-size:10.5px;font-weight:400;letter-spacing:.09em}
@media (min-width:1048px), (min-width:640.01px) and (min-aspect-ratio:9001/10000){body.dnote.clean .drag,body.dnote.crate:not(.barcode) .drag{bottom:calc(var(--pad) + 50px)}}  /* wherever the layout is not the stacked one */

/* the opened record: on the page's margins (the sleeve from the left one, the words ending at the right one, under
   Close), without the costume of a sleeve's small print: no catalogue number (the site's own count of his list), no
   barcode, no ℗ line. The word Play stands where the sentence "Click a song to play it." was (js/shelf.js). A song
   under the pointer is underlined; the one playing stays ivory and the rest go grey. */
body.studio .bk .no span:first-child,body.studio .code,body.studio .bar > .mono{display:none}
body.studio .bar{display:none}  /* nothing is left in it: the barcode and the ℗ line are off, and Play stands at the head of the listening row */
@media (min-width:761px){
  body.studio .rec{width:100%}
  body.studio .bk{justify-self:end;width:100%;max-width:580px}
}
body.studio .tl .tk{border-radius:0}
body.studio .tl button.tk:hover,body.studio .tl button.tk:focus-visible{background:none}
body.studio .tl button.tk:hover span,body.studio .tl button.tk:focus-visible span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
body.studio .tl .tk.on{background:none;color:var(--ink)}
body.studio .tl .tk.on em{color:var(--mute)}
body.studio .tl .tk.on i::before{color:var(--ink)}
body.studio .tl:has(.tk.on) .tk:not(.on){color:var(--mute)}

/* Credits: the five filters are words like every other control (the chosen one ivory and underlined, the rest
   grey), with room above so they are as easy to press as the pills were; their underline stands on the same line as
   the search field's. The count says what it counts (js/stacks.js) and keeps to the right margin at every width, so
   it is not read as a sixth filter. The line under the chart keeps its words; its rule is the pale one. */
/* (2026-11-02) The filters are bubbles again, in the row under the heading after the search, as they were before the pass
   (Greg on the call: "I liked how these were little bubbles before. If those could move back to underneath here"): the
   pill's thin line, grey words, the chosen one filled ivory. From 2026-10-27 to then they were words in the heading's
   corner. The count keeps to the right margin. */
body.studio .tools{align-items:center}
body.studio .chip{color:var(--mute);transition:color .2s,background-color .2s,border-color .2s}
body.studio .chip:hover,body.studio .chip:focus-visible{color:var(--ink);border-color:var(--mute)}
body.studio .chip.on{color:var(--paper);background:var(--ink);border-color:var(--ink)}
body.studio .count{margin-left:auto}
body.studio .spine-info{border-top-color:var(--rule)}
body.studio .oh b{font-size:clamp(20px,1.9vw,27px)}

/* Contact: the two people and the form side by side as before; Send is a word; his quote is taken off the top of the
   form and set alone as the last thing on the site, its opening mark hung in the margin, his name under it in place
   of "In his words" over it. No "to come" among the links, no footer line. The note that the form is not connected
   stays beside Send until it is connected. */
/* (2026-10-27) the rules that set his quote alone at the end of the site, and hid the foot and "Playlists to come" to
   make it the last thing, are gone: the quote left Contact on 2026-10-26, and with them the page ended on Send. */
body.studio .form textarea{resize:none}
body.studio .btn,body.studio .btn:hover,body.studio .btn:focus-visible{padding:10px 0;border-radius:0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 7px)/100% 1px no-repeat;color:var(--ink);font-size:10.5px;font-weight:400;letter-spacing:.09em;text-transform:uppercase}
body.studio .btn:focus-visible,body.studio .chip:focus-visible{outline:1px solid var(--ink);outline-offset:4px}  /* the keyboard's place shows: a word that looks the same at rest and in focus would not say so */

/* ─── About mockups, second round (2026-10-07; js/about.js). Three one-screen versions that do not use the places
   sentence: D the people he works for as large names, E a photograph and his own words, F a plain sheet. Nothing here
   shows until one is opened (#about-d, #about-e, #about-f; #about-0 goes back): the switch and every mock part are
   hidden without the section's ab-mock class. Flat grounds, no new colours, the two fonts. The first round (A, B, C)
   is in site/archive/about-mockups-round1/. ──────────────────────────────────────────────────────────────────────── */
.ab-sw,.ab-people,.ab-few,.ab-pic,.ab-q,.ab-bio,.ab-label,.ab-sheet,.ab-note,.ab-role{display:none}
.about.ab-mock .hd{position:relative}
.about.ab-mock.ab-pick .ab-sw{display:flex;gap:16px;position:absolute;right:0;top:10px}
.ab-sw button{padding:0 0 3px;color:var(--mute);border-bottom:1px solid transparent;font-size:inherit;letter-spacing:inherit;text-transform:inherit;transition:color .2s}
.ab-sw button:hover,.ab-sw button:focus-visible{color:var(--ink);outline:none}
.ab-sw button.on{color:var(--ink);border-bottom-color:var(--ink);cursor:default}
.ab-sw button.more:not(.on){display:none}  /* the switch offers Live, D, L, M and N; another mockup shows in it only while it is the one open */
.about.ab-v :is(.credit,.facts,.draft:not(.ab-note)){display:none}
.about.ab-v .ab-note{display:block}

/* D: the people. The names are the one large thing, in the face the site uses for names; the small figure beside one
   is how many credits carry it */
.about.ab-d .ab-people{display:block;margin-top:clamp(18px,2.2vw,30px)}
.ab-people h3{font-weight:400;color:var(--mute);margin-bottom:clamp(6px,.8vw,10px)}
.ab-people h3 + .ab-names + h3{margin-top:clamp(18px,2.4vw,30px)}
.ab-names{font-family:var(--bfam,var(--sans));font-weight:var(--bw,700);letter-spacing:var(--bls,-.045em);font-size:clamp(26px,6.3vw,54px);line-height:1.07}
@media (min-width:1048px){.ab-names{font-size:clamp(28px,min(3.9vw,calc((100svh - 420px) / 7.7)),62px)}}
@media (min-width:761px) and (max-width:1047px){.ab-names{font-size:clamp(26px,min(6.3vw,calc((100svh - 360px) / 8.6)),54px)}}  /* a wide, short window: the names give way so both lists are on the first screen */
.ab-names .nw{white-space:nowrap}
.ab-nm{font:inherit;letter-spacing:inherit;color:var(--ink);padding:0;text-align:left}  /* a name or a place that is a button (not ab-n: that is the section's class while mockup N is open) */
.ab-nm sup{display:inline-block;font-size:.27em;font-weight:500;letter-spacing:0;line-height:0;color:var(--mute);vertical-align:baseline;position:relative;top:-1.9em;margin-left:.22em;font-variant-numeric:tabular-nums}
@media (hover:hover){.ab-nm:hover{text-decoration:underline;text-decoration-thickness:.045em;text-underline-offset:.13em}}  /* only where a pointer can point: a phone keeps :hover on the last thing tapped, and a place put away with a second tap stayed underlined */
.ab-nm:focus-visible{outline:1px solid var(--ink);outline-offset:.06em}  /* focus from the keys is a box, so it cannot be mistaken for the underline of the place that is picked */
.ab-c{color:var(--mute)}

/* E: a picture. Half the screen is a photograph; beside it his own words in the serif, then three lines of bio */
.about.ab-e .ab-pic{display:block;position:relative;overflow:hidden;background:#0b0b0b}
.ab-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.about.ab-e .ab-q{display:block;margin-top:clamp(22px,3vw,44px)}
.ab-q p{font-family:var(--title);font-size:clamp(25px,2.75vw,42px);line-height:1.14;letter-spacing:-.008em;text-wrap:pretty}
.ab-q cite{display:block;margin-top:14px;font-style:normal;font-size:12.5px;color:var(--mute)}
.about.ab-e .ab-bio{display:block;margin-top:clamp(20px,2.4vw,30px);max-width:46ch;font-size:clamp(14px,1.15vw,15.5px);line-height:1.5;text-wrap:pretty}
@media (min-width:761px){  /* side by side wherever there is the width for it, a wide and short window included; the photograph is as tall as the words beside it */
  .about.ab-e{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto;column-gap:calc(var(--gap) * 2)}
  .about.ab-e .ab-pic{grid-column:1;grid-row:1 / -1}
  .about.ab-e > :not(.ab-pic){grid-column:2}
  .about.ab-e .ab-bio{align-self:end}
  .about.ab-e .awards{flex-direction:column;gap:6px;margin-top:clamp(18px,2vw,26px);padding-top:0}
}
@media (max-width:760px){
  .about.ab-e .ab-pic{height:clamp(200px,38svh,400px);margin-bottom:clamp(20px,3.4vw,30px)}
  .ab-pic img{object-position:50% 56%}  /* the band keeps the glass and the back of the chair */
  .about.ab-e .awards{margin-top:clamp(20px,3.4vw,28px)}
}

/* F: the sheet. Nothing is large: one size of type, a label and what it is, a hairline between rows */
.about.ab-f .hd p{display:none}  /* the first row says it */
.about.ab-f .awards{display:none}
.about.ab-f .ab-sheet:not(.ab-three){display:block;margin-top:clamp(14px,1.8vw,24px)}  /* not K's three rows, which are a sheet too */
.ab-sheet > div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:clamp(9px,1.35svh,14px) 0;border-top:1px solid var(--rule)}
.ab-sheet > div:first-child{border-top:0;padding-top:0}
.ab-sheet dt{grid-column:1 / 4;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.ab-sheet dd{grid-column:4 / -1;font-size:clamp(17px,1.85vw,25px);font-weight:500;letter-spacing:-.018em;line-height:1.22;text-wrap:pretty}
.ab-sheet .awards{display:block!important;margin:0;padding:0;font-size:inherit;line-height:inherit}
.ab-sheet .awards li{padding-left:0}
.ab-sheet .awards li::before{left:calc(-1 * min(var(--gap),20px) - 2px);top:.42em;width:10px;height:10px}  /* the gold marks hang in the gutter, so the words stay flush with the rows above */
.ab-sheet .awards b{font-weight:500}
@media (max-width:760px){
  .ab-sheet > div{display:block}
  .ab-sheet dd{margin-top:5px}
  .ab-sheet .awards li{padding-left:21px}
  .ab-sheet .awards li::before{left:0}
}

/* ── third round (2026-10-08; August: "even more simple, less text, more space"). The same ideas with most of the
   words taken out: one thing, one line of small words, and the rest of the screen left empty. No awards line and no
   second paragraph in any of them. ── */
.about:is(.ab-g,.ab-h,.ab-j,.ab-k) > .awards{display:none}
.about:is(.ab-h,.ab-j,.ab-k) .hd p{display:none}
@media (max-width:1047px){.about:is(.ab-g,.ab-j,.ab-k){display:flex;flex-direction:column;min-height:clamp(420px,84svh,780px)}.about.ab-h{min-height:clamp(420px,84svh,780px)}}  /* the room is part of it: narrower windows keep a screen's height too (H keeps its own layout, a grid or a block) */
.about:is(.ab-g,.ab-j,.ab-k) .ab-note{margin-top:auto!important;padding-top:clamp(20px,3svh,36px)}  /* the grey note stays at the foot of the screen */

/* G: six names, one to a line, under who he is */
.about.ab-g .ab-few{display:block;margin-top:clamp(28px,5.5svh,60px)}
.ab-few h3{font-weight:400;color:var(--mute);margin-bottom:clamp(8px,1vw,12px)}
.ab-few .ab-names{font-size:clamp(30px,8.4vw,60px);line-height:1.04}
@media (min-width:761px){.ab-few .ab-names{font-size:clamp(30px,min(4.7vw,calc((100svh - 300px) / 6.8)),78px)}}
.ab-few .ab-nm{display:block}

/* H: the photograph, whole, and a wall label beside its foot */
.about.ab-h .ab-pic{display:block;position:relative;overflow:hidden;background:#0b0b0b;aspect-ratio:4/3}
.about.ab-h .ab-pic img{object-position:50% 50%}
.about.ab-h .ab-label{display:block;font-size:13.5px;line-height:1.5;color:var(--mute)}
.ab-label b{display:block;font-weight:500;color:var(--ink)}
.ab-label span{display:block}
@media (min-width:761px){
  .about.ab-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--gap)}  /* the first two rows are as tall as the photograph, so the label's foot is level with its foot; the third takes what is left of the screen */
  .about.ab-h .ab-pic{grid-column:1 / 8;grid-row:1 / 3;align-self:start;justify-self:start;width:min(100%,calc((100svh - 200px) * 4 / 3))}  /* its width gives way in a wide, short window, so its foot and the label stay on the first screen */
  .about.ab-h .hd{grid-column:9 / -1;grid-row:1}
  .about.ab-h .ab-label{grid-column:9 / -1;grid-row:2;align-self:end}
  .about.ab-h .ab-note{grid-column:1 / -1;grid-row:3;align-self:end}
}
@media (max-width:760px){
  .about.ab-h .ab-pic{margin-bottom:clamp(20px,3.4vw,30px)}
  .about.ab-h .ab-label{margin-top:clamp(18px,3vw,26px)}
}

/* J: his words alone, in the middle of the screen, his name and what he is under them */
.about.ab-j .ab-q{display:block;margin:auto 0;padding:clamp(24px,4svh,48px) 0}
.about.ab-j .ab-q p{font-size:clamp(24px,5.6vw,40px)}
@media (min-width:761px){.about.ab-j .ab-q{max-width:78%}.about.ab-j .ab-q p{font-size:clamp(26px,min(3.5vw,calc((100svh - 330px) / 7.2)),56px);line-height:1.1}}
.about.ab-j .ab-role{display:inline}

/* K: three rows at the foot of the screen, and nothing over them */
.about.ab-k .ab-three{display:block;margin-top:auto}
.ab-three > div{padding:clamp(14px,2.4svh,24px) 0}
.ab-three > div:first-child{border-top:1px solid var(--rule);padding-top:clamp(14px,2.4svh,24px)}
.ab-three dd{font-size:clamp(18px,2.1vw,29px)}
.about:is(.ab-j,.ab-k) .ab-note{margin-top:0!important}  /* K's rows and J's quote take the free height themselves; a second auto margin on the note would pull the quote up to a third of the way down */
.about:is(.ab-e,.ab-j) ~ .contact .quote{display:none}  /* E and J print his words here, so Contact lets go of them: they would stand on two screens running */

/* ── fourth round (2026-10-09): D's look and Greg's ten places together, and a place answers a click. L is D's form
   (small headings, large bold names); M is the sentence as a sentence in the same type; N is the live serif sentence
   with nothing under it but the awards. The answer is one line in one fixed spot: nothing else on the screen moves. ── */
.ab-places,.ab-sent,.ab-say{display:none}
.about.ab-l .ab-places{display:block;margin-top:clamp(18px,2.2vw,30px)}
.ab-places h3{font-weight:400;color:var(--mute);margin-bottom:clamp(6px,.8vw,10px)}
.ab-places .ab-names + h3{margin-top:clamp(18px,2.4vw,30px)}
.about.ab-m .ab-sent{display:block;margin-top:clamp(18px,2.2vw,30px);max-width:21em}
.ab-sent .ab-mx{display:block;white-space:nowrap}
/* L and M are four or five lines where D is seven, so in a short window they need not shrink as far as D does; and the
   lines are evened out, so the last place is never left on a line by itself */
.ab-places .ab-names,.ab-sent{text-wrap:balance}
@media (min-width:1048px){.ab-places .ab-names,.ab-sent,.ab-awf,.about.ab-m .ab-people .ab-names{font-size:clamp(28px,min(3.9vw,calc((100svh - 400px) / 5)),62px)}}  /* M's People lists start at M's own size, so the type does not change with the view where there is room; where there is not, the script sets them as large as fits (js/about.js, fit) */
@media (min-width:761px) and (max-width:879px), (min-width:761px) and (max-width:1047px) and (aspect-ratio < 23/20){.ab-places .ab-names,.ab-sent,.ab-awf,.about.ab-m .ab-people .ab-names{font-size:clamp(26px,min(6.3vw,calc((100svh - 380px) / 5.4)),54px)}}
@media (min-width:761px) and (max-width:1047px){.about.ab-n .credit{font-size:clamp(30px,min(6.8vw,calc((100svh - 352px) / 5)),72px)}}  /* N in a wide, short window: the sentence gives way so the line a place answers with, and the awards, are on the first screen */
.about.ab-v.ab-n .credit{display:block}  /* N keeps the live sentence itself (ab-v as well, to outweigh the rule that puts the live parts away: its :is() counts as two classes) */
.about.ab-n .credit b{cursor:pointer}
@media (hover:hover){.about.ab-n .credit b:hover{text-decoration:underline;text-decoration-thickness:.035em;text-underline-offset:.13em}}
.about.ab-n .credit b.on{text-decoration:underline;text-decoration-thickness:.035em;text-underline-offset:.13em}
.about.ab-n .credit b:focus-visible{outline:1px solid var(--ink);outline-offset:.04em}
.ab-p[aria-pressed="true"]{text-decoration:underline;text-decoration-thickness:.045em;text-underline-offset:.13em}
.about:is(.ab-l,.ab-m,.ab-n) .ab-say{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-height:2.9em;margin-top:clamp(16px,2.6svh,30px);font-size:clamp(14px,1.15vw,15.5px);line-height:1.45}  /* room for two lines is always kept, so a longer answer does not push the awards down */
.ab-say .ab-lab{flex:none;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.ab-say .ab-ask,.ab-say .ab-hint{color:var(--mute)}
.ab-say .ab-hint{font-size:12.5px}
@media (max-width:760px){
  .ab-say .ab-lab{flex-basis:100%}  /* on a phone the label is always over its line (it used to sit beside a short line and over a long one) */
  .about:is(.ab-l,.ab-m,.ab-n) .ab-say{min-height:4.3em}  /* and room is kept for the label and two rows of words, so the longest line (Los Angeles) no longer pushes the awards down 17px */
}
@media (max-width:400px){.ab-places .ab-names,.ab-sent,.ab-awf,.about.ab-m .ab-people .ab-names{font-size:6.66vw}}  /* small phones: "Eastern Europe and Scotland." still fits one line, so no place is left on a line alone */
/* narrower than 1048px these keep about a screen's height, as on a desktop, with the awards at its foot: left as tall as
   their words, Contact came up under them on the same screen */
@media (max-width:1047px){
  .about:is(.ab-l,.ab-m,.ab-n){display:flex;flex-direction:column;min-height:clamp(420px,84svh,780px)}
  .about:is(.ab-l,.ab-m,.ab-n) > .awards{margin-top:auto;padding-top:clamp(14px,2.4vw,22px)}
  .about.ab-m{min-height:clamp(420px,100svh,1100px)}  /* M has two faces and the People one is taller: with 84% of a screen the awards jumped down when it came up (136px on a tablet) */
}

/* ── M's second face (2026-10-09; August: "a button that reveals all of the musicians and artists that he's made a record
   with, like in D. I want that to look good and clean"). A Places / People switch of the site's own kind (.view, as
   Shelf / Crate) in the heading's corner: People puts D's two lists where the sentence was. Same type, same screen;
   the switch is in the heading so it does not move when the face changes. ── */
.ab-face{display:none}
.about.ab-m .ab-face{display:flex;position:absolute;right:0;top:37px;margin:0}
/* M's views (the sentence and its answer line, the People lists, the Awards lines) stand in ONE cell, each as tall as it
   is, and the ones not showing are only hidden: the cell is as tall as the tallest of them, so the section is the same
   height whichever is showing and nothing under it can jump, at any window size (2026-10-09: in mid-size windows the
   People view used to make the section up to 190px taller and move the control away from under the pointer, and in a
   short pane the Awards view made it 76px shorter). In every other mockup the cell is not a box at all. */
.ab-cell{display:contents}
.about.ab-m .ab-cell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}  /* the second row is the flexible one: what a taller view adds goes under the answer line, which stays right under the sentence */
.about.ab-m .ab-cell > .ab-sent{grid-area:1 / 1}
.about.ab-m .ab-cell > .ab-say{grid-area:2 / 1;align-self:start}
.about.ab-m .ab-cell > :is(.ab-people,.ab-awf){grid-area:1 / 1 / 3 / 2;display:block;align-self:start;margin-top:clamp(18px,2.2vw,30px)}
.about.ab-m .ab-cell > .ab-awf{max-width:21em}
.about.ab-m:not(.ab-aw-view) .ab-cell > .ab-awf{display:none}  /* no Awards view: it takes no room */
.about.ab-m.ab-fit0 .ab-cell > .ab-people{display:none}  /* for a moment, while the script measures the room the other views take (js/about.js, fit) */
.about.ab-m:not(.ab-who) .ab-cell > .ab-people,.about.ab-m:not(.ab-awf-on) .ab-cell > .ab-awf,.about.ab-m:is(.ab-who,.ab-awf-on) .ab-cell > :is(.ab-sent,.ab-say,.ab-slot){visibility:hidden}
@media (max-width:540px){.about.ab-m .ab-face{position:static;margin-top:12px}}  /* a phone: under the heading's sentence, which fills the line there. Up to 540px: the sentence is 370px of words and the switch 107, and from 406 to 512px wide the switch was printed on top of the sentence's end (the renders at 390 and 592 sat either side of it) */
/* the control's shape, three ways for August to try: side by side (above), People under Places, or one button */
.about.ab-m.ab-ctl-stack .ab-face{flex-direction:column;align-items:flex-end;gap:5px}
.about.ab-m.ab-ctl-stack .hd{padding-bottom:12px}  /* the second word hangs lower than the heading: the type under it starts a little later, so a long first line cannot run into it */
@media (max-width:540px){.about.ab-m.ab-ctl-stack .ab-face{align-items:flex-start}.about.ab-m.ab-ctl-stack .hd{padding-bottom:0}}
@media (max-width:540px){.ab-nm sup,.ab-fig{display:none}}  /* on a phone the figures would be 7px, too small to read, and larger they break the lines badly: the names stand alone there, and the note's sentence about figures goes with them */
.about.ab-m .ab-face button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}  /* the site's .view rule takes the outline off, and the pressed word then shows no focus at all */
.about.ab-m .ab-note.ab-two{display:grid}  /* M's two notes share one cell, so the note is the same height for both faces */
.ab-note.ab-two > span{grid-area:1 / 1}
.ab-note.ab-two > .off{visibility:hidden}
.ab-flip{display:none}
.about.ab-m.ab-ctl-one .ab-face{display:none}
.about.ab-m.ab-ctl-one .ab-flip{display:block;align-self:flex-start;margin-top:auto;padding:0 0 2px;font-size:clamp(15px,1.38vw,18px);font-weight:500;color:var(--ink);border-bottom:1px solid var(--mute)}
.about.ab-m.ab-ctl-one .ab-cell{margin-bottom:clamp(18px,2.6svh,28px)}  /* never hard against the words over it, where the section is no taller than its words (a phone's People face) */  /* one word and an arrow, underlined as the site's links are; it stands at the foot, over the awards, so it is in one place for both faces */
.about.ab-m.ab-ctl-one .ab-flip:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (hover:hover){.about.ab-m.ab-ctl-one .ab-flip:hover{border-bottom-color:var(--ink)}}
.about.ab-m.ab-ctl-one > .awards{margin-top:clamp(14px,2svh,22px);padding-top:0}
.about.ab-m.ab-ctl-one .ab-cell > .ab-people{margin-top:clamp(12px,1.5vw,20px)}  /* the People face gives up a few pixels of air so the button and the awards still fit a 1280 by 800 screen */
.about.ab-m.ab-ctl-one .ab-people h3 + .ab-names + h3{margin-top:clamp(14px,1.7vw,22px)}

/* ── the awards in M, four ways (2026-10-09; August: "That award section now feels a little out of place"): the row
   at the foot as it was; gone (ab-aw-none); a third view in M's own type (ab-aw-view, and ab-awf-on while it shows);
   or said in the heading's sentence (ab-aw-line). In the last three the row at the foot is not shown. ── */
.ab-awf,.ab-foot,.ab-opts{display:none}
.ab-face [data-face="awards"]{display:none}
.about.ab-m:is(.ab-aw-none,.ab-aw-view,.ab-aw-line) > .awards{display:none}
.about.ab-m:is(.ab-aw-none,.ab-aw-view,.ab-aw-line) .ab-note{margin-top:auto!important;padding-top:clamp(16px,2.4svh,28px)}  /* with no row of awards the note is what stands at the foot */
.about.ab-m.ab-ctl-one:is(.ab-aw-none,.ab-aw-view,.ab-aw-line) .ab-note{margin-top:clamp(12px,1.8svh,18px)!important;padding-top:0}  /* unless a control stands there over it: two auto margins would share the free height and lift the control off the foot */
.about.ab-m.ab-aw-view .ab-face [data-face="awards"]{display:block}
/* three words stacked hang one row lower than two: between 541 and 1047px wide the large type's first line is long
   enough to reach under them (AWARDS was printed across the end of "Encanto."), so the two sentence views start a row later */
@media (min-width:541px) and (max-width:1047px){.about.ab-m.ab-ctl-stack.ab-aw-view .ab-cell > :is(.ab-sent,.ab-awf){margin-top:calc(clamp(18px,2.2vw,30px) + 24px)}}
.ab-awf > span{display:block;text-wrap:balance}  /* each award starts its own line, as "Mixed in Studio H." does */
.ab-awf a.ab-nm{color:var(--ink)}
.about.ab-m.ab-ctl-one.ab-aw-view .ab-flip{display:none}
.about.ab-m.ab-ctl-one.ab-aw-view .ab-foot{display:flex;gap:clamp(16px,2vw,26px);align-self:flex-start;margin-top:auto}
.ab-foot button{padding:0 0 2px;font-size:clamp(15px,1.38vw,18px);font-weight:500;color:var(--mute);border-bottom:1px solid transparent}
.ab-foot button.on{color:var(--ink);border-bottom-color:var(--mute);cursor:default}
.ab-foot button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (hover:hover){.ab-foot button:hover{color:var(--ink)}}
/* the heading's sentence keeps clear of the switch in its corner: it wraps before it would run under the words (three
   words are wider than two, and the sentence that names the awards is longer) */
.about.ab-m{--swr:130px}
.about.ab-m.ab-aw-view{--swr:196px}
.about.ab-m.ab-ctl-stack{--swr:84px}
.about.ab-m.ab-ctl-one{--swr:0px}
@media (min-width:541px){.about.ab-m .hd p{max-width:calc(100% - var(--swr))}}
/* mock only: the grey words that switch between the ways */
.about.ab-m .ab-opts{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 26px;margin-top:6px;line-height:1.5;color:var(--mute)}
.ab-opts .ab-grp{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}  /* a group goes to the next line whole */
.ab-opts button{padding:0;font-size:inherit;color:var(--mute);border-bottom:1px solid transparent}
.ab-opts button.on{color:var(--ink);border-bottom-color:var(--mute);cursor:default}
.ab-opts button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
@media (hover:hover){.ab-opts button:hover{color:var(--ink)}}

/* ── photographs for the places (2026-10-13; Greg sent eight, for five of the places). In M a picked place shows its
   photograph, two ways to compare. BEHIND the words: the whole section, dimmed flat, the type over it as his name is
   over the opening's photograph. BESIDE the words: whole, on the black, in a second column that is there whether or
   not a photograph is in it. Where the window is too narrow for that way (a phone for either, a tablet for "beside")
   it stands whole in a slot UNDER the words, in the cell's third row. The picture never adds height, so nothing jumps.
   The script sets ab-beside and ab-under from the choice and the window's width. ── */
.ab-bg,.ab-slot{display:none;margin:0}
.about.ab-m{position:relative}
.about.ab-m > :not(.ab-bg){position:relative;z-index:1}
/* both ways are shown (August, 2026-10-13: "lets just show both options of a and b"): a Behind / Beside switch in the
   section's bottom right corner while a photograph is showing. A corner, so it does not move when the photograph does
   (under the sentence it would: the sentence is four lines one way and six the other). Not where there is one way only. */
.ab-pm{display:none}
.about.ab-m.ab-pick.ab-shot:not(.ab-who):not(.ab-awf-on) > .ab-pm{display:flex;gap:16px;position:absolute;z-index:2;right:var(--pad);bottom:clamp(22px,2.2vw,30px);margin:0}  /* the Behind / Beside comparison: only once an address has named a version (2026-10-15) */
.about.ab-m > .ab-pm button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
body.playing .about.ab-m.ab-shot:not(.ab-who):not(.ab-awf-on) > .ab-pm{bottom:calc(var(--pad) + var(--dock-up))}  /* the player is open in that corner: the switch steps up over it, as the caption does */
@media (max-width:760px),(max-width:1047px) and (aspect-ratio < 23/20){.about.ab-m > .ab-pm{display:none!important}}
.about.ab-m.ab-shot:not(.ab-under):not(.ab-beside):not(.ab-who):not(.ab-awf-on) .ab-bg{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.ab-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.36;animation:ab-in .45s ease both}
@keyframes ab-in{from{opacity:0}}
/* the bands above and below the photograph (js/about.js, FILL; 2026-11-03): the blurred photograph by default, a flat tone or
   the smeared edge by the address (fill=tone, fill=smear), black with fill=black. The photograph is dimmed by brightness now
   and not by opacity, so the fill does not show through it (over black the two look the same) */
.about.ab-m .ab-bg > img:not(.ab-fill){opacity:1;filter:brightness(.36)}
.about.ab-m .ab-bg .ab-fill{position:absolute;inset:0;width:100%;height:100%;opacity:1;transition:opacity .45s ease}
.about.ab-m .ab-bg.ab-wait .ab-fill{opacity:0;transition:none}  /* until the photograph is ready (js/about.js) */
.about.ab-m .ab-bg img.ab-fill{object-fit:cover;filter:blur(clamp(28px,3vw,56px)) brightness(.3) saturate(1.1);transform:scale(1.15)}
.about.ab-m .ab-bg canvas.ab-fill{filter:brightness(.36)}
@media (prefers-reduced-motion:reduce){.about.ab-m .ab-bg .ab-fill{transition:none}}
@media (prefers-reduced-motion:reduce){.ab-bg img,.ab-slot img{animation:none}}
.ab-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left top;animation:ab-in2 .35s ease both}
@keyframes ab-in2{from{opacity:0}}
.ab-slot.more{cursor:pointer}
/* beside: two columns, the photograph's top on the first line's */
.about.ab-m.ab-beside .ab-cell{flex:1 1 auto;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--gap) * 2)}  /* the cell takes the section's free height, so an upright photograph has room downwards */
.about.ab-m.ab-beside .ab-cell > .ab-slot{display:block;grid-area:1 / 2 / 3 / 3;position:relative;min-height:0;margin-top:calc(clamp(18px,2.2vw,30px) + .1em)}
.about.ab-m.ab-beside .ab-cell > :is(.ab-people,.ab-awf){grid-area:1 / 1 / 3 / 3}
@media (min-width:761px) and (max-width:1047px){.about.ab-m.ab-beside :is(.ab-sent,.ab-awf),.about.ab-m.ab-beside .ab-people .ab-names{font-size:clamp(24px,min(3.9vw,calc((100svh - 380px) / 6.4)),54px)}}  /* a wide, short window: the type follows the narrower column, so the longest line still fits it */
/* under: a third row */
.about.ab-m.ab-under{--slot:clamp(130px,22svh,230px)}
@media (max-height:700px){.about.ab-m.ab-under{--slot:clamp(130px,40vw,230px)}}  /* a short window (his preview pane): a fifth of its height is a thumbnail, so the slot follows the width and the section scrolls a little more */
.about.ab-m.ab-under .ab-cell{flex:1 1 auto;grid-template-rows:auto auto minmax(var(--slot),1fr)}
.about.ab-m.ab-under .ab-cell > .ab-slot{display:block;grid-area:3 / 1;position:relative;min-height:0;margin-top:clamp(12px,2svh,20px)}
.about.ab-m.ab-under .ab-cell > :is(.ab-people,.ab-awf){grid-area:1 / 1 / 4 / 2}
/* its caption, in the answer line: which room, and the count that steps through a place's photographs */
.about.ab-m .ab-say{align-content:flex-start}  /* the rows stand together at the top of the room kept for them, not spread through it */
.ab-say .ab-cap{flex-basis:100%;font-size:12.5px;color:var(--mute)}
.ab-step{margin-left:10px;padding:0 0 1px;font-size:inherit;color:var(--ink);border-bottom:1px solid var(--mute);font-variant-numeric:tabular-nums}
.ab-step:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
@media (hover:hover){.ab-step:hover{border-bottom-color:var(--ink)}}
.about.ab-m .ab-say{min-height:3.3em}  /* room for the caption's row as well, so a place with a photograph does not push anything down */
@media (min-width:761px) and (max-width:1047px){.about.ab-m.ab-beside .ab-say{min-height:5.6em}}  /* in the narrower column the longest answer (Los Angeles: its label, two rows, a caption) is four rows */
@media (max-width:760px){.about.ab-m .ab-say{min-height:5.9em}}
/* ── Greg's words in M (2026-10-13). A place he wrote about answers in his own sentence, in the serif, as his words are set
   everywhere on the site, with the plain line as its caption. His title line and one paragraph of his draft stand at the
   foot of the screen, with "Read the full piece", which opens the whole piece in a panel like an open record's. The room
   kept for an answer is sized for his longest sentence, so picking a place still moves nothing. ── */
.ab-say .ab-his{flex-basis:100%;max-width:44em;font-family:var(--title);font-size:clamp(18px,1.55vw,23px);line-height:1.22;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.about.ab-m .ab-say{min-height:8.6em}  /* Los Angeles: its label, three rows of his sentence and the caption */
.about.ab-m.ab-beside .ab-say{min-height:11em}  /* in the narrower column the sentence runs to four or five rows */
@media (min-width:761px) and (max-width:1047px){.about.ab-m.ab-beside .ab-say{min-height:12.5em}}
@media (max-width:760px){.about.ab-m .ab-say{min-height:13.5em}}
.ab-short{display:none}
.about.ab-m .ab-short{display:block;margin-top:auto;padding-top:clamp(18px,3svh,36px);max-width:58ch}
.ab-short .ab-lead{font-family:var(--title);font-size:clamp(21px,2.1vw,29px);line-height:1.18;letter-spacing:-.008em;color:var(--ink);text-wrap:balance}
.ab-short .ab-para{margin-top:clamp(8px,1vw,12px);font-family:var(--title);font-size:clamp(17px,1.5vw,21px);line-height:1.28;color:var(--ink);text-wrap:pretty}
.ab-more{display:inline-block;margin-top:clamp(10px,1.2vw,14px);padding:0 0 2px;font-size:clamp(13px,1.1vw,14.5px);font-weight:500;color:var(--ink);border-bottom:1px solid var(--mute)}
.ab-more:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (hover:hover){.ab-more:hover{border-bottom-color:var(--ink)}}
.about.ab-m .ab-note{margin-top:clamp(12px,1.8svh,18px)!important;padding-top:0}  /* his words take the foot: the note and the awards no longer do */
.about.ab-m > .awards{margin-top:clamp(14px,2svh,22px);padding-top:0}
.about.ab-m.ab-ctl-one .ab-flip{margin-top:clamp(14px,2svh,22px)}
.about.ab-m.ab-ctl-one.ab-aw-view .ab-foot{margin-top:clamp(14px,2svh,22px)}
.about.ab-m:is(.ab-who,.ab-awf-on) .ab-short{visibility:hidden}  /* the People and Awards faces keep the room, so the screen is one height, but his words show on the Places face only */
/* the whole piece, as a spread (2026-10-15; it was one centred column: "pretty boring"). A twelve-column grid: the label
   and the title across the top left; the paragraphs in columns 6 to 11; a photograph in columns 1 to 4 beside the
   paragraphs that name its room, standing as many rows of text as --rows says; two lines pulled out large across the
   page. Items are placed in order, so a photograph stays beside the paragraph it precedes. On a phone one column,
   the photographs between the paragraphs. */
.ab-ov{z-index:60;align-items:start}
.ab-piece{width:min(1400px,100%);margin:0 auto;padding:clamp(10px,4svh,48px) 0 clamp(40px,8svh,80px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.ab-piece .ab-lbl{grid-column:1/13;color:var(--mute)}
.ab-piece h3{grid-column:1/10;margin:12px 0 clamp(40px,7svh,88px);font-family:var(--title);font-weight:400;font-size:clamp(30px,3.8vw,60px);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
.ab-piece p{grid-column:6/12;margin:0 0 1.15em;font-family:var(--title);font-size:clamp(18px,1.4vw,21px);line-height:1.38;text-wrap:pretty}
.ab-piece p.ab-pull{grid-column:1/11;margin:clamp(28px,5svh,64px) 0 clamp(32px,6svh,72px);font-size:clamp(26px,2.8vw,48px);line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.ab-fig{grid-column:1/5;grid-row:span var(--rows,1);align-self:start;margin:.3em 0 1.15em}
.ab-fig img{display:block;width:100%;height:auto}
.ab-fig figcaption{margin-top:9px;font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--mute)}
.ab-piece .ab-sign{grid-column:1/11;margin-top:clamp(40px,7svh,88px);font-family:var(--bfam,var(--sans));font-weight:var(--bw,700);letter-spacing:var(--bls,-.045em);font-size:clamp(44px,6.4vw,112px);line-height:.95;color:var(--ink)}  /* his name large at the end, the signature, in the face his name has on the opening (2026-10-15) */
@media (max-width:760px){
  .ab-piece{display:block}
  .ab-piece h3{margin-bottom:clamp(28px,5svh,48px)}
  .ab-fig{margin:1.6em 0}
  .ab-piece p.ab-pull{font-size:clamp(24px,7vw,34px);margin:1.2em 0 1.4em}
  .ab-piece .ab-sign{font-size:clamp(40px,12vw,56px);margin-top:1.4em}
}
/* ── (Not on the page since later the same day: August, "I don't think I like just random quotes placed around the website unless it's a better design." The rules stay for a better design, if one comes; the markup is out.)
   Greg's words through the site (2026-10-14). One sentence of his About draft opens Work, the Discography and Credits,
   where each part's plain line stood; the quote at Contact is the one about working with him; the page ends on his last
   line. Everything of his is in the serif, in quotation marks, and nothing is added beside it: one line a part. ── */
.hd p.his,.shelf .id p.his{font-family:var(--title);font-size:clamp(19px,1.75vw,25px);line-height:1.22;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.work .hd p.his,.spines .hd p.his{max-width:28em}
body .shelf .id p.his{display:block;margin-top:clamp(14px,2vw,22px);max-width:21em;font-size:clamp(17px,1.5vw,22px)}  /* the shelf and crate views hide the head's other line (the instruction, which moved onto the picture); his stays */
@media (max-width:640px), (max-width:1047px) and (max-aspect-ratio:9/10){body .shelf .id p.his{display:none}}  /* the stacked layout (phones, upright windows; the same question as STACKED in js/shelf.js): the timeline sits right under the head there, so the head keeps its old height and the picture stays clear; his line for the shelf shows where the head has room */
.last{margin-top:clamp(56px,7vw,96px);max-width:30em}
.last p{font-family:var(--title);font-size:clamp(20px,2vw,27px);line-height:1.2;color:var(--ink);text-wrap:pretty}
.last cite{display:block;margin-top:12px;font-style:normal;font-size:12.5px;color:var(--mute)}
/* ── Mockups for August (2026-10-14). He wrote: "the Selected Works and Awards section just looks very busy … they don't have
   enough room", and of About: "looks a little busy, and maybe we need to apply some Swedish design language to this … text
   taking up the full width of the screen isn't right, and same with the height." Three for Work with the awards (#work-a,
   #work-b, #work-c) and two for About (#about-r, #about-s). What they share: the content stops at 1400px and leaves the rest
   of a wide screen empty, the type stops growing with the window, the discs go, and each part holds fewer things. ── */
body[class*="wk-"] .work{--cap:1400px}
body[class*="wk-"] .work .hd{max-width:var(--cap)}
body[class*="wk-"] .work .hd p{display:none}  /* the title alone over the records */
body[class*="wk-"] .pk-v{display:none}  /* the discs were the busiest thing in the row */
body[class*="wk-"] .pk-sl{width:100%}
/* A: three across, two rows, room between */
body.wk-a .pks{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,56px);row-gap:clamp(44px,4vw,72px);max-width:var(--cap)}
body.wk-a .pk h3{margin-top:18px;font-size:clamp(19px,1.5vw,24px)}
/* B: one record large, the six as rows beside it */
body.wk-b .pks{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:0;max-width:var(--cap);align-items:start}
body.wk-b .pk-big{grid-column:1/6;grid-row:1/8;margin:0;position:sticky;top:var(--pad)}
body.wk-b .pk-big .pk-sl{display:block;width:100%;aspect-ratio:1}
body.wk-b .pk-big img{display:block;width:100%;height:100%;object-fit:cover;background:var(--bg)}
body.wk-b .pk-big img.contain{object-fit:contain}
body.wk-b .pk{grid-column:7/13}
body.wk-b .pk .pk-sl{display:none}
/* B and C: a record is a row. A small sleeve (C), who, the record, the year and his credit, Play */
body:is(.wk-b,.wk-c) .pk{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) minmax(0,1.3fr) auto;column-gap:clamp(16px,2vw,32px);align-items:center;border-top:1px solid var(--rule);padding:15px 0}
body.wk-c .pks{display:block;max-width:var(--cap)}
body.wk-c .pk{grid-template-columns:64px minmax(0,1.3fr) minmax(0,2fr) minmax(0,1.3fr) auto}
body.wk-c .pk .pk-sl{width:64px}
body:is(.wk-b,.wk-c) .pk h3{margin:0;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.3}
body:is(.wk-b,.wk-c) .pk-t{margin:0;font-size:13.5px}
body:is(.wk-b,.wk-c) .pk-c{margin:0;font-size:11px}
body:is(.wk-b,.wk-c) .pk-a{margin:0;justify-self:end}
body:is(.wk-b,.wk-c) .pk:last-child{border-bottom:1px solid var(--rule)}
body.wk-b .pk{cursor:default}
body.wk-b .pk:not(.on) h3{color:var(--mute)}
/* the awards as rows, in all three: a small sleeve, the award and its year, the record, the category, his role. The seven
   small posters go; the row says "Seven nominations, 2018 to 2024" */
body[class*="wk-"] #awards{max-width:var(--cap);margin-top:clamp(56px,6vw,88px)}
body[class*="wk-"] .aws{display:block}
body[class*="wk-"] .aww,body[class*="wk-"] .awn{display:grid;grid-template-columns:64px minmax(0,1.3fr) minmax(0,2fr) minmax(0,2fr) minmax(0,1.3fr);grid-template-rows:auto;grid-row:auto;grid-column:auto;column-gap:clamp(16px,2vw,32px);align-items:center;border-top:1px solid var(--rule);padding:15px 0}
body[class*="wk-"] .aws > :last-child{border-bottom:1px solid var(--rule)}
body[class*="wk-"] .aww .pk-sl{width:64px}
body[class*="wk-"] .awn::before{content:"";display:block}  /* the sleeve's empty place, so the words line up with the rows above */
body[class*="wk-"] .awn ul{display:none}
body[class*="wk-"] .aw-x{display:contents}
body[class*="wk-"] .aws h4{font-size:15px;letter-spacing:-.01em;line-height:1.3}
body[class*="wk-"] .aws h4 .y{display:inline;margin:0 0 0 8px;font-size:inherit;font-weight:400}
body[class*="wk-"] .aw-t,body[class*="wk-"] .aw-c{margin:0;font-size:13.5px;line-height:1.3}
body[class*="wk-"] .aw-r{margin:0;font-size:11px}
body[class*="wk-"] .awn .aw-r{grid-column:5}
@media (max-width:760px){
  body.wk-a .pks{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.wk-b .pk-big{display:none}body.wk-b .pk{grid-column:1/-1}
  body:is(.wk-b,.wk-c) .pk,body[class*="wk-"] .aww,body[class*="wk-"] .awn{grid-template-columns:48px minmax(0,1fr);row-gap:2px}
  body.wk-b .pk{grid-template-columns:minmax(0,1fr)}
  body.wk-c .pk .pk-sl{width:48px;grid-row:1/4}
  body[class*="wk-"] .aww .pk-sl{width:48px;grid-row:1/5}  /* a win has four lines of words */
  body[class*="wk-"] .awn::before{grid-row:1/4}
  body:is(.wk-b,.wk-c) .pk-a{justify-self:start}
  body[class*="wk-"] .awn .aw-r{grid-column:auto}
}
/* About R and S: the live sentence, in a column of its own width; the section as tall as its words */
.ab-read{display:none}
.about:is(.ab-r,.ab-s){min-height:0;padding-bottom:clamp(72px,8vw,120px)}
.about.ab-v:is(.ab-r,.ab-s) .credit{display:block;font-size:clamp(34px,3.1vw,54px);line-height:1.05;letter-spacing:-.012em;max-width:13em;margin-top:clamp(28px,3vw,44px)}
.about:is(.ab-r,.ab-s) .credit span{display:inline;white-space:normal}
.about:is(.ab-r,.ab-s) .credit span:last-child{display:block}  /* "Mixed in Studio H." on a line of its own, as before */
.about:is(.ab-r,.ab-s) .awards{margin-top:clamp(28px,3vw,44px);padding-top:0;display:grid;gap:9px;font-size:15px;align-self:start}
.about:is(.ab-r,.ab-s) .facts{display:none}
.about:is(.ab-r,.ab-s) .ab-read{display:inline-block;align-self:flex-start;margin-top:clamp(28px,3vw,44px);padding:0 0 2px;font-size:13.5px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--mute)}
.about:is(.ab-r,.ab-s) .ab-read:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (hover:hover){.about:is(.ab-r,.ab-s) .ab-read:hover{border-bottom-color:var(--ink)}}
.about:is(.ab-r,.ab-s) .ab-note{margin-top:clamp(28px,3vw,44px)!important}
.about.ab-s{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-content:start}
.about.ab-s #studio{position:absolute}  /* the empty anchor at the top of the section is not a grid item (it took the first cell and sent the heading to the foot) */
.about.ab-s .hd{grid-column:1/13;grid-row:1}
.about.ab-s .credit{grid-column:5/12;grid-row:2}
.about.ab-s .awards{grid-column:1/4;grid-row:2}
.about.ab-s .ab-read{grid-column:1/4;grid-row:3;justify-self:start}
.about.ab-s .ab-note{grid-column:1/13}
@media (max-width:1047px){.about.ab-s .credit{grid-column:1/13;grid-row:2}.about.ab-s .awards{grid-column:1/13;grid-row:3}.about.ab-s .ab-read{grid-column:1/13;grid-row:4}}
/* ── Second round (2026-10-14, later). Work: D large names with the cover following the pointer, E a strip that scrolls
   sideways, F a spread of covers at different sizes. About: T, the sentence at the bottom left of a screen. ── */
/* D: names */
body.wk-d .pks{display:block;max-width:var(--cap)}
body.wk-d .pk{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,2vw,32px);align-items:baseline;border-top:1px solid var(--rule);padding:clamp(14px,1.4vw,22px) 0;cursor:pointer}
body.wk-d .pk:last-child{border-bottom:1px solid var(--rule)}
body.wk-d .pk .pk-sl{display:none}
body.wk-d .pk h3{grid-column:1;margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(30px,3.6vw,64px);letter-spacing:-.045em;line-height:1;color:var(--mute);transition:color .25s}
body.wk-d .pk:hover h3{color:var(--ink)}
body.wk-d .pk-t{grid-column:1;margin:6px 0 0;font-size:14px}
body.wk-d .pk-c{grid-column:2;grid-row:1;margin:0;font-size:11px;justify-self:end;align-self:baseline}
body.wk-d .pk-a{grid-column:2;grid-row:2;margin:0;justify-self:end}
.pk-fly{display:none}
body.wk-d .pk-fly{display:block;position:fixed;left:0;top:0;z-index:20;width:clamp(180px,20vw,320px);aspect-ratio:1;pointer-events:none;opacity:0;transition:opacity .2s;background:var(--bg)}
body.wk-d .pk-fly.on{opacity:1}
body.wk-d .pk-fly img{display:block;width:100%;height:100%;object-fit:cover;background:var(--bg);box-shadow:0 0 0 1px rgba(242,239,232,.09)}
body.wk-d .pk-fly img.contain{object-fit:contain}
@media (hover:none){body.wk-d .pk{grid-template-columns:56px minmax(0,1fr) auto}body.wk-d .pk .pk-sl{display:block;width:56px;grid-row:1/3;align-self:center}body.wk-d .pk h3,body.wk-d .pk-t{grid-column:2}body.wk-d .pk-c,body.wk-d .pk-a{grid-column:3}body.wk-d .pk-fly{display:none}}
/* E: a strip */
body.wk-e .work{padding-right:0}
body.wk-e .work .hd,body.wk-e #awards,body.wk-e .work .draft{margin-right:var(--pad)}
body.wk-e .pks{display:flex;gap:clamp(20px,2.6vw,40px);max-width:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:0 var(--pad) 12px 0;scrollbar-width:none}
body.wk-e .pks::-webkit-scrollbar{display:none}
body.wk-e .pk{flex:0 0 auto;width:clamp(260px,min(56vh,34vw),560px);scroll-snap-align:start}
body.wk-e .pk h3{margin-top:16px}
/* F: a spread */
body.wk-f .pks{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(48px,5vw,88px);max-width:var(--cap);align-items:end}
body.wk-f .pk:nth-child(1){grid-column:1/6}
body.wk-f .pk:nth-child(2){grid-column:8/11;padding-bottom:clamp(40px,6vw,120px)}
body.wk-f .pk:nth-child(3){grid-column:11/13;align-self:start;margin-top:clamp(40px,6vw,120px)}
body.wk-f .pk:nth-child(4){grid-column:2/5}
body.wk-f .pk:nth-child(5){grid-column:6/10;padding-bottom:clamp(24px,4vw,80px)}
body.wk-f .pk:nth-child(6){grid-column:10/13}
@media (max-width:760px){body.wk-e .pk{width:72vw}body.wk-f .pks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}body.wk-f .pk:nth-child(n){grid-column:auto;padding-bottom:0;margin-top:0;align-self:start}}
/* T: About at the bottom left */
.about.ab-t{min-height:clamp(560px,100svh,900px);padding-bottom:clamp(28px,3vw,44px)}
.about.ab-v.ab-t .credit{display:block;font-size:clamp(34px,3.1vw,54px);line-height:1.05;letter-spacing:-.012em;max-width:13em;margin-top:auto;padding-top:clamp(48px,8svh,96px)}
.about.ab-t .credit span{display:inline;white-space:normal}
.about.ab-t .credit span:last-child{display:block}
.about.ab-t .awards{margin-top:clamp(22px,2.4vw,36px);padding-top:0;display:grid;gap:9px;font-size:15px;align-self:start}
.about.ab-t .facts{display:none}
.about.ab-t .ab-read{display:inline-block;align-self:flex-start;margin-top:clamp(22px,2.4vw,36px);padding:0 0 2px;font-size:13.5px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--mute)}
.about.ab-t .ab-read:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (hover:hover){.about.ab-t .ab-read:hover{border-bottom-color:var(--ink)}}
.about.ab-t .ab-note{margin-top:clamp(18px,2vw,28px)!important}
/* ── The poster round (2026-10-14, later still). August: "You need to think more of Swedish poster design in the way that space
   is organized and set up for layouts" … "can you add that to these ideas". D, E, F and T are each one screen set up as a
   poster: the label at the top left, the one large element at the bottom left, the small blocks in the far corners (the
   awards at the top right as three lines; a record's details at the bottom right), and the middle left empty. ── */
body:is(.wk-d,.wk-e,.wk-f) .work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:var(--gap);min-height:clamp(560px,100svh,920px);padding-bottom:clamp(28px,3vw,44px)}
body:is(.wk-d,.wk-e,.wk-f) .work > .hd{grid-column:1/13;grid-row:1;max-width:none}
body:is(.wk-d,.wk-e,.wk-f) .work > .draft{grid-column:1/13;grid-row:4;margin-top:clamp(18px,2vw,28px)!important}
/* the awards: a small block of three lines at the top right */
body:is(.wk-d,.wk-e,.wk-f) #awards{grid-column:10/13;grid-row:2;align-self:start;margin-top:clamp(28px,3vw,44px);max-width:none}
body:is(.wk-d,.wk-e,.wk-f) #awards .hd{display:block;border-top:0;padding-top:0;margin-bottom:12px;max-width:none}
body:is(.wk-d,.wk-e,.wk-f) #awards .hd h3{font-family:var(--sans);font-size:10.5px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
body:is(.wk-d,.wk-e,.wk-f) .aws{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:11px}  /* one column: the band's six columns would set the three side by side */
body:is(.wk-d,.wk-e,.wk-f) .aww,body:is(.wk-d,.wk-e,.wk-f) .awn,body:is(.wk-d,.wk-e,.wk-f) .aws > :last-child{display:block;border:0;padding:0}
body:is(.wk-d,.wk-e,.wk-f) .aww .pk-sl,body:is(.wk-d,.wk-e,.wk-f) .awn::before,body:is(.wk-d,.wk-e,.wk-f) .aw-c,body:is(.wk-d,.wk-e,.wk-f) .aw-r{display:none}
body:is(.wk-d,.wk-e,.wk-f) .aw-x{display:block}
body:is(.wk-d,.wk-e,.wk-f) .aws h4{font-size:13.5px}
body:is(.wk-d,.wk-e,.wk-f) .aw-t{margin-top:2px;font-size:12.5px;color:var(--mute)}
/* a record's details: a small block at the bottom right (D), or under the large sleeve (F) */
.pk-cur{display:none}
body.wk-d .pk-cur{display:block;grid-column:10/13;grid-row:2;align-self:end;font-size:13.5px;line-height:1.4}
.pk-cur b,body.wk-f .pk-big figcaption b{display:block;font-weight:600}
.pk-cur .mono,body.wk-f .pk-big figcaption .mono{margin-top:3px;font-size:11px;color:var(--mute)}
.pk-cur .pk-a,body.wk-f .pk-big figcaption .pk-a{display:block;margin:10px 0 0;justify-self:start}
/* D: the names, a block at the bottom left; nothing beside them */
body.wk-d .pks{grid-column:1/9;grid-row:2;align-self:end;display:block;max-width:none}
body.wk-d .pk{display:block;border:0;padding:0}
body.wk-d .pk + .pk{margin-top:clamp(0px,.3vw,6px)}
body.wk-d .pk:last-child{border:0}
body.wk-d .pk h3{font-size:clamp(34px,4.4vw,88px);line-height:.98;letter-spacing:-.05em}
body.wk-d .pk.on h3{color:var(--ink)}
body.wk-d .pk .pk-t,body.wk-d .pk .pk-c,body.wk-d .pk .pk-a{display:none}
/* E: the strip at the foot, bleeding off the right edge; the middle empty */
body.wk-e .pks{grid-column:1/13;grid-row:3;align-self:end;margin-top:clamp(24px,3vw,48px)}
body.wk-e .pk{width:clamp(220px,min(42vh,28vw),460px)}
body.wk-e .work > .hd,body.wk-e .work > .draft,body.wk-e #awards{margin-right:var(--pad)}
/* F: one record large at the bottom left, the six small in a row at the top right (point at one to bring it up large) */
body.wk-f .pks{grid-column:1/13;grid-row:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:var(--gap);row-gap:0;max-width:none;align-items:start}
body.wk-f .pk-big{grid-column:1/7;grid-row:1/3;align-self:end;margin:0;padding-top:clamp(28px,3vw,44px)}
body.wk-f .pk-big .pk-sl{display:block;width:min(100%,52vh);aspect-ratio:1}  /* no taller than half the screen, so the poster stays one screen */
body.wk-f .pk-big img{display:block;width:100%;height:100%;object-fit:cover;background:var(--bg)}
body.wk-f .pk-big img.contain{object-fit:contain}
body.wk-f .pk-big figcaption{margin-top:14px;font-size:13.5px;line-height:1.4}
body.wk-f .pk{grid-row:1;align-self:start;display:block;border:0;padding:0;margin:0;cursor:pointer;opacity:.5;transition:opacity .25s}
body.wk-f .pk.on,body.wk-f .pk:hover{opacity:1}
body.wk-f .pk:nth-child(n){padding:0;margin:0;align-self:start}  /* the first spread's offsets, which outrank the plain rule above */
body.wk-f .pk:nth-child(2){grid-column:7}body.wk-f .pk:nth-child(3){grid-column:8}body.wk-f .pk:nth-child(4){grid-column:9}body.wk-f .pk:nth-child(5){grid-column:10}body.wk-f .pk:nth-child(6){grid-column:11}body.wk-f .pk:nth-child(7){grid-column:12}
body.wk-f .pk .pk-sl{display:block;width:100%}
body.wk-f .pk h3,body.wk-f .pk-t,body.wk-f .pk-c,body.wk-f .pk-a{display:none}
body.wk-f #awards{grid-row:2;align-self:end;margin-top:0}
@media (max-width:879px), (max-width:1047px) and (aspect-ratio < 23/20), (hover:none){
  body:is(.wk-d,.wk-e,.wk-f) .work{display:block;min-height:0}
  body:is(.wk-d,.wk-e,.wk-f) #awards{margin-top:clamp(40px,6vw,64px)}
  body.wk-d .pks{margin-top:clamp(24px,4vw,48px)}
  body.wk-d .pk-cur{margin-top:20px}
  body.wk-f .pks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:16px}
  body.wk-f .pk-big{grid-column:1/-1;grid-row:1;padding-top:0}
  body.wk-f .pk{grid-row:2}
  body.wk-f .pk:nth-child(2){grid-column:1}body.wk-f .pk:nth-child(3){grid-column:2}body.wk-f .pk:nth-child(4){grid-column:3}body.wk-f .pk:nth-child(5){grid-column:4}body.wk-f .pk:nth-child(6){grid-column:5}body.wk-f .pk:nth-child(7){grid-column:6}
}
/* T: the About poster: label top left, sentence bottom left, awards top right, the link bottom right */
.about.ab-t{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:var(--gap)}
.about.ab-t #studio{position:absolute}
.about.ab-t .hd{grid-column:1/13;grid-row:1}
.about.ab-v.ab-t .credit{grid-column:1/8;grid-row:3;align-self:end;margin-top:0}
.about.ab-t .awards{grid-column:10/13;grid-row:2;align-self:start;margin-top:clamp(28px,3vw,44px)}
.about.ab-t .ab-read{grid-column:10/13;grid-row:3;align-self:end;justify-self:start;margin-top:0}
.about.ab-t .ab-note{grid-column:1/13;grid-row:4}
@media (max-width:1047px){.about.ab-t{display:flex}.about.ab-v.ab-t .credit{margin-top:auto}.about.ab-t .awards{margin-top:clamp(22px,2.4vw,36px)}.about.ab-t .ab-read{margin-top:clamp(22px,2.4vw,36px)}}
/* 2026-10-14, evening. August: "can we remove this kind of text" (the grey "Mockup, not live…" notes): the mockups' notes are off.
   And "where is the writing in the about section": T carries his writing as the block at the bottom right, the title line,
   one paragraph and "Read the full piece", in place of the bare link. */
.about.ab-v .ab-note{display:none}
.about.ab-t .ab-read{display:none}
.about.ab-t .ab-short{display:block;grid-column:9/13;grid-row:3;align-self:end;max-width:none;padding-top:clamp(28px,3vw,44px)}
@media (max-width:1047px){.about.ab-t .ab-short{margin-top:clamp(28px,4vw,48px)}}
/* T, with the places (2026-10-14, night; August: "what about those images of the other studios? Why aren't they in here?").
   The sentence's places answer a click as in N and M: the line about the room, in his words where he wrote them, stands in
   the empty middle of the poster, just over the sentence; the place's photograph fills the whole poster behind the type,
   dimmed, as the opening has his name over a photograph. Nothing in the corners moves. */
.about.ab-t{position:relative}
.about.ab-t > :not(.ab-bg){position:relative;z-index:1}
.about.ab-t.ab-shot .ab-bg{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.about.ab-t .credit b{cursor:pointer}
@media (hover:hover){.about.ab-t .credit b:hover{text-decoration:underline;text-decoration-thickness:.035em;text-underline-offset:.13em}}
.about.ab-t .credit b.on{text-decoration:underline;text-decoration-thickness:.035em;text-underline-offset:.13em}
.about.ab-t .credit b:focus-visible{outline:1px solid var(--ink);outline-offset:.04em}
.about.ab-t .ab-say{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-end;gap:2px 14px;grid-column:1/8;grid-row:2;align-self:end;margin:0 0 clamp(20px,3svh,36px);max-width:44em;font-size:clamp(14px,1.15vw,15.5px);line-height:1.45}  /* it is inside the cell (display:contents), so the direct-child rule above does not lift it over the photograph */
@media (max-width:1047px){.about.ab-t .ab-say{margin:clamp(16px,2.6svh,30px) 0 0}}
/* M's places, 2026-10-15 (August: "I like the look of M a lot, and I think I like it with the image behind. How do we make
   it clear to click the ones that have images? … I also think I like when there is a white box when you're hovering above
   them, or when you've selected one, rather than the underlining."). A place that has photographs stands in a thin box
   at rest; under the pointer the box comes up to full ink; the picked place is a filled box, black words on ivory. A place
   with no photographs yet is plain and still answers with its line. */
.about.ab-m .ab-p{padding:0 .07em;margin:0 -.07em;text-decoration:none!important;transition:outline-color .2s,background-color .2s,color .2s}
.about.ab-m .ab-p.ab-has{outline:1px solid color-mix(in oklab,var(--ink) 32%,transparent);outline-offset:0}
@media (hover:hover){.about.ab-m .ab-p:hover{outline:1px solid var(--ink);outline-offset:0}}
.about.ab-m .ab-p[aria-pressed="true"]{background:var(--ink);color:var(--bg);outline:1px solid var(--ink);outline-offset:0}
.about.ab-m .ab-p:focus-visible{outline:1px solid var(--ink);outline-offset:.12em}
.about.ab-v .ab-note.ab-two{display:none}  /* M's note was still up: its own rule outranked the plain one (2026-10-15) */
/* (2026-10-15, later: the option line is back for one group, where the sentence stands; see the positions below) */
/* M as a poster (2026-10-15; August, of M on his wide screen: "This feels a bit too crowded right now … big, bold text is
   maybe less left-justified. Think again: Swedish poster design."). The sentence is the one large thing and stands in the
   middle of the screen: centred, no wider than 15em, a size that stops at 56px; the line a place answers with is centred
   under it. The small blocks keep the corners: the label and the one-liner top left, Places / People top right, his
   writing bottom left, the Behind / Beside switch bottom right. The left edge is no longer a stack. */
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){.ab-places .ab-names,.ab-sent,.ab-awf,.about.ab-m .ab-people .ab-names{font-size:clamp(28px,min(3.2vw,calc((100svh - 440px) / 6)),52px)}}
.about.ab-m{min-height:clamp(640px,100svh,1100px)}  /* the whole screen on a computer too (the rule that said so sat in a media query for narrower windows, and the base 900px cap won: at 1920 by 1080 the words filled it and nothing could centre) */
.about.ab-m .ab-short{max-width:52ch}
.about.ab-m .ab-short .ab-lead{font-size:clamp(20px,1.8vw,26px)}
.about.ab-m .ab-short .ab-para{font-size:clamp(16px,1.3vw,19px)}
.about.ab-m:not(.ab-beside) .ab-cell{margin-top:auto;margin-bottom:auto}
.about.ab-m:not(.ab-beside) .ab-cell > .ab-sent{text-align:center;margin-left:auto;margin-right:auto;max-width:15em}
.about.ab-m:not(.ab-beside) .ab-cell > .ab-say{justify-content:center;text-align:center;margin-left:auto;margin-right:auto;max-width:44em}
.about.ab-m:not(.ab-beside) .ab-cell > .ab-people{text-align:center}
.about.ab-m:not(.ab-beside) .ab-cell > .ab-awf{margin-left:auto;margin-right:auto;text-align:center}
@media (max-width:879px), (max-width:1047px) and (aspect-ratio < 23/20){.about.ab-m:not(.ab-beside) .ab-cell > :is(.ab-sent,.ab-say,.ab-people,.ab-awf){text-align:left;margin-left:0;margin-right:auto}.about.ab-m:not(.ab-beside) .ab-cell > .ab-say{justify-content:flex-start}.about.ab-m:not(.ab-beside) .ab-cell{margin-bottom:0}}  /* phones and tablets: flush left with the writing under it, as the low layout is on a computer; the sentence sits just over the picture, not centred in a hole. After the centring rules, which it has to outrank at equal specificity */
.about.ab-m .ab-short{margin-top:0}  /* the cell's own margins centre it between the heading and the writing */
/* (the slot under the words is never given auto side margins: its only content is an absolutely placed image, so with them it shrank to nothing and the phone showed no photograph, 2026-10-15) */
/* Where the sentence stands in M (2026-10-15; August: "do we like that centering? lets try some other variations, slightly
   more space"): centre (the poster above), or, on a computer, LEFT, flush left but one column in from the edge; RIGHT, in
   the right half of the screen, flush left there; LOW, at the bottom left with his writing at the bottom right, the middle
   empty. The type is a little smaller again (48px) and the room's line sits a little further under the sentence.
   #about-m-left, #about-m-right, #about-m-low; the grey words at the foot switch too. */
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){.ab-places .ab-names,.ab-sent,.ab-awf,.about.ab-m .ab-people .ab-names{font-size:clamp(28px,min(3vw,calc((100svh - 460px) / 6)),48px)}}
.about.ab-m:not(.ab-beside) .ab-cell > .ab-say{margin-top:clamp(22px,3.4svh,40px)}
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){
  .about.ab-m:is(.ab-pos-left,.ab-pos-right,.ab-pos-low):not(.ab-beside) .ab-cell > :is(.ab-sent,.ab-say,.ab-awf,.ab-people){text-align:left;margin-left:0;margin-right:auto}
  .about.ab-m:is(.ab-pos-left,.ab-pos-right,.ab-pos-low):not(.ab-beside) .ab-cell > .ab-say{justify-content:flex-start}
  .about.ab-m.ab-pos-left:not(.ab-beside) .ab-cell{margin-left:0}  /* 2026-10-15: flush with the writing under it (August: "left adjusted to fit the lower paragraph"); the one-column inset is gone */
  .about.ab-m.ab-pos-left:not(.ab-beside) .ab-cell > .ab-sent{max-width:15em}
  .about.ab-m.ab-pos-left .ab-short{max-width:min(15em * 2.5,58ch)}  /* the writing takes the sentence's column, so the two read as one block on the left */
  .about.ab-m.ab-pos-right:not(.ab-beside) .ab-cell{margin-left:41.666%}
  .about.ab-m.ab-pos-low:not(.ab-beside) .ab-cell{margin-top:auto;margin-bottom:0}
  .about.ab-m.ab-pos-low .ab-short{position:absolute;right:var(--pad);bottom:clamp(22px,2.2vw,30px);z-index:1;max-width:34ch;margin:0;padding:0}
  .about.ab-m.ab-pos-low.ab-shot:not(.ab-who):not(.ab-awf-on) > .ab-pm{bottom:auto;top:calc(var(--pad) + 140px)}  /* under Places / People, which sits 37px into the 55px heading, 96px down */  /* the writing has the bottom right corner: the Behind / Beside switch stands under Places / People */
  .about.ab-m.ab-pos-low .ab-opts{margin-top:clamp(18px,2.6svh,30px)}
}
/* Low is the pick (2026-10-15; August: "remove the 'the sentence' and then bring the other 'recorded in...' down so its bottom
   left and then the paragraph opposite it on the right side"). The grey line of four words is gone; low is the default and
   the other three answer only to the address (-centre, -left, -right). The sentence sits right at the foot: the room for
   the line a place answers with is kept ABOVE the sentence now, so the sentence itself is the lowest thing, level with
   the writing on the right. */
.about.ab-m .ab-opts{display:none!important}
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){
  .about.ab-m.ab-pos-low:not(.ab-beside) .ab-cell{grid-template-rows:minmax(0,1fr) auto}  /* the answer's room, then the sentence */
  .about.ab-m.ab-pos-low:not(.ab-beside) .ab-cell > .ab-say{grid-area:1 / 1;align-self:end;align-content:flex-end;margin:0 0 clamp(18px,2.6svh,30px)}
  .about.ab-m.ab-pos-low:not(.ab-beside) .ab-cell > .ab-sent{grid-area:2 / 1;margin-top:0}
  .about.ab-m.ab-pos-low:not(.ab-beside) .ab-cell > :is(.ab-people,.ab-awf){grid-area:1 / 1 / 3 / 2;align-self:end}
  .about.ab-m.ab-pos-low{padding-bottom:clamp(28px,3vw,44px)}
  .about.ab-m.ab-pos-low .ab-short{bottom:clamp(28px,3vw,44px)}  /* level with the sentence's foot */
}
/* The awards in the posters, in the poster's own type (2026-10-15; August: "awards section looks weird and not up to the
   design style"). No bullets: the award's name in the bold face at about a quarter of the names' size, the year beside
   it in gold for a win (the site's one mark for his own awards) and in grey for the nominations, the record under it in
   grey. One block, even gaps. */
body:is(.wk-d,.wk-e,.wk-f) .aws{gap:clamp(16px,1.6vw,24px)}
body:is(.wk-d,.wk-e,.wk-f) .aw-x{margin:0}
body:is(.wk-d,.wk-e,.wk-f) .awn{margin-top:0}  /* the old band's narrow layout gave the nominations 39px over them; in the block the gap is the grid's */
body:is(.wk-d,.wk-e,.wk-f) .aws h4{padding-left:0;font-size:clamp(18px,1.6vw,24px);line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
body:is(.wk-d,.wk-e,.wk-f) .aws h4::before{display:none}
body:is(.wk-d,.wk-e,.wk-f) .aws h4 .y{display:inline;margin:0 0 0 .4em;font-size:.8em;font-weight:500;letter-spacing:-.01em;color:var(--mute)}
body:is(.wk-d,.wk-e,.wk-f) .aws h4.win .y{color:var(--gold)}
body:is(.wk-d,.wk-e,.wk-f) .aw-t{margin-top:5px;font-size:13px;line-height:1.35;color:var(--mute)}
/* under 1048px the poster is a column: the names, each with its record, year and credit and Play under it (the block that
   followed the pointer is for a wide screen); then the awards; then the stand-in note. On a touch screen each name keeps
   its small sleeve. */
@media (max-width:879px), (max-width:1047px) and (aspect-ratio < 23/20), (hover:none){
  body:is(.wk-d,.wk-e,.wk-f) .work{display:flex;flex-direction:column}
  body:is(.wk-d,.wk-e,.wk-f) .work > .hd{order:1}
  body:is(.wk-d,.wk-e,.wk-f) .pks{order:2}
  body:is(.wk-d,.wk-e,.wk-f) #awards{order:3;margin-top:clamp(44px,7vw,72px)}
  body:is(.wk-d,.wk-e,.wk-f) .work > .draft{order:4}
  body.wk-d .pk-cur{display:none}
  body:is(.wk-d,.wk-e,.wk-f) .pks,body:is(.wk-d,.wk-e,.wk-f) #awards{align-self:stretch}  /* the wide poster's align-self:end, in a column, had pushed the names to the right edge */
  body.wk-d .pks{margin-top:clamp(28px,5vw,48px)}
  body.wk-d .pk{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:end;padding:0 0 clamp(14px,2.2vw,22px)}
  body.wk-d .pk + .pk{margin-top:0}
  body.wk-d .pk h3{grid-column:1/-1;grid-row:1;font-size:clamp(30px,5.6vw,44px)}
  body.wk-d .pk .pk-t{display:block;grid-column:1;grid-row:2;margin:5px 0 0;font-size:13.5px;line-height:1.35}
  body.wk-d .pk .pk-c{display:block;grid-column:1;grid-row:3;justify-self:start;align-self:start;margin:2px 0 0;font-size:11px}  /* (the wide poster's rule had it at row 1, right-aligned: the year stood over the name) */
  body.wk-d .pk .pk-a{display:flex;grid-column:2;grid-row:2/4;align-self:end;justify-self:end;margin:0}
}
@media (hover:none){  /* every touch screen gets the list (2026-10-27; the poster picks a record by pointing) */
  body.wk-d .pk{grid-template-columns:56px minmax(0,1fr) auto}
  body.wk-d .pk .pk-sl{display:block;width:56px;grid-column:1;grid-row:1/4;align-self:center}
  body.wk-d .pk h3{grid-column:2/-1}
  body.wk-d .pk .pk-t,body.wk-d .pk .pk-c{grid-column:2}
  body.wk-d .pk .pk-a{grid-column:3}
}
/* ── #air (2026-10-15). August: "allow for more space on the site because it feels a little piled up, and we have a lot of
   these lines that break up sections, but it's not consistent. How do we make this more professional now that we have this
   look?" The pass, to compare (body.air; #air turns it on for the visit, #noair off): every part is a poster that fills a
   screen; the title stands at the same height at the top left of each, including the Discography; no rule over any title
   (the screen's edge is the frame); the one hairline left is the page's foot; wider margins on a wide screen. ── */
body.air{--pad:clamp(20px,3.6vw,72px);--padx:clamp(20px,3.6vw,72px);--sect:clamp(84px,14svh,160px)}
/* the shelf keeps its own inner spacing (the note about dragging, the caption's foot and the timeline's foot are placed by --pad, and 15px more lifted the note onto the front record: tools/check.sh caught it); only its edges, the title, the timeline's ends and the caption's right, go to the page's new margin */
body.air .shelf{--pad:clamp(18px,2.4vw,36px)}
body.air .shelf .id{left:var(--padx)}
body.air .band{left:var(--padx);right:var(--padx)}
body.air .cap{right:var(--padx)}
body.air .work .hd,body.air .contact .hd,body.air .spines .hd,body.air .about .hd{border-top:0;padding-top:0}
body.air .work,body.air .contact,body.air .spines{padding-top:var(--sect)}
body.air .about{padding-top:var(--sect)}
body.air .work .hd,body.air .contact .hd{margin-bottom:clamp(40px,6svh,80px)}
body.air .spines .hd{margin-bottom:clamp(28px,4svh,48px)}
body.air .work{min-height:100svh}
body.air .spines{min-height:100svh}
body.air .contact{min-height:100svh;display:flex;flex-direction:column}
body.air .contact .foot{margin-top:auto;padding-top:14px}
body.air .about.ab-m{min-height:100svh}
@media (min-width:1048px), (min-width:640.01px) and (min-aspect-ratio:9001/10000){body.air .shelf .id{top:var(--sect)}}  /* the Discography's title at the same height as the others, where the row has the room */
/* ── Greg's V2 notes (2026-10-19). ABOUT AT REST IS AS TALL AS ITS WORDS. Greg, of the phone: "underneath tap a place. Can we lose
   the negative black space? so that 'an exploration of sound…' starts much higher up until you actually click on a place. then,
   when you click a place 'an exploration of…' moves down to make room for the pictures"; of the computer: "Can we remove the
   negative space that is there before you click a place. meaning that when you click a place the text moves down to accommodate
   the photo". So: the hint stands over the sentence, the room kept for an answer is gone, and the section is as tall as its
   words. On a computer the sentence and his writing stand side by side, level at the foot; when a place is picked the section
   grows to the poster it was (the photograph behind, the sentence low left, the writing low right), so the text moves down to
   make room for the picture. On a phone the photograph takes a row of its own under the sentence and pushes the writing down.
   #about-m-poster brings the full screen at rest back, to compare. ── */
.ab-body{display:contents}
.about.ab-m.ab-rest{transition:min-height .7s var(--out)}
.about.ab-m.ab-rest:not(.ab-on),body.air .about.ab-m.ab-rest:not(.ab-on){min-height:0}
.about.ab-m.ab-rest.ab-on{min-height:clamp(640px,100svh,1100px)}
.about.ab-m.ab-rest .ab-say{min-height:0!important}  /* no room kept: the answer takes what it needs and the words move */
.about.ab-m.ab-rest .ab-cell > .ab-say{margin-top:0}
.about.ab-m.ab-rest .ab-short{visibility:visible}  /* his writing shows on both faces: at rest nothing stands in for it */
.about.ab-m.ab-rest:not(.ab-who) .ab-cell > .ab-people,.about.ab-m.ab-rest.ab-who .ab-cell > .ab-sent,.about.ab-m.ab-rest:not(.ab-awf-on) .ab-cell > .ab-awf{display:none}  /* at rest the face not showing takes no room (hidden but in the flow, the People lists made the cell 450px taller than the sentence and pushed his writing off the phone's screen) */
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){
  .about.ab-m.ab-rest:not(.ab-beside) .ab-body{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--gap) * 2);margin-top:auto;padding-top:clamp(28px,4svh,48px)}
  .about.ab-m.ab-rest:not(.ab-beside) .ab-body > .ab-cell{flex:0 1 auto;width:58.333%;max-width:58.333%;margin:0}
  .about.ab-m.ab-rest .ab-short{position:static;flex:0 1 34ch;max-width:34ch;margin:0;padding:0}
  .about.ab-m.ab-rest.ab-pos-low:not(.ab-beside) .ab-cell{grid-template-rows:auto auto}
  .about.ab-m.ab-rest.ab-pos-low:not(.ab-beside) .ab-cell > .ab-say{align-self:end;margin:0 0 clamp(14px,2.2svh,24px)}
  .about.ab-m.ab-rest.ab-pos-low:not(.ab-beside) .ab-cell > :is(.ab-people,.ab-awf){grid-area:2 / 1 / 3 / 2;align-self:end;margin-top:0}  /* the names take the sentence's row; the answer line keeps the row above */
  .about.ab-m.ab-rest.ab-on .ab-body{padding-top:clamp(48px,8svh,96px)}
}
@media (max-width:879px), (max-width:1047px) and (aspect-ratio < 23/20){  /* (the shape, not the width alone, since 2026-10-27: a wide, short window such as 1000 by 650 gets the computer layout, where the sentence is the size it is at 1280 and his writing stays on the screen) */
  .about.ab-m.ab-rest.ab-on{min-height:0}  /* the photograph takes a row of its own: no screen to fill */
  .about.ab-m.ab-rest .ab-body{display:block}
  .about.ab-m.ab-rest .ab-cell{grid-template-rows:auto auto;flex:none;margin:clamp(18px,2.2vw,30px) 0 0}
  .about.ab-m.ab-rest .ab-cell > .ab-say{grid-area:1 / 1;align-self:start;margin:0 0 clamp(12px,2.4svh,18px)}
  .about.ab-m.ab-rest .ab-cell > .ab-sent{grid-area:2 / 1;margin-top:0}
  .about.ab-m.ab-rest .ab-cell > :is(.ab-people,.ab-awf){grid-area:2 / 1 / 3 / 2;margin-top:0}
  .about.ab-m.ab-rest.ab-under.ab-shot .ab-cell{grid-template-rows:auto auto auto}
  .about.ab-m.ab-rest.ab-under:not(.ab-shot) .ab-cell > .ab-slot{display:none}  /* no photograph, no row: the empty slot was 226px of black between the sentence and his writing */
  .about.ab-m.ab-rest.ab-under .ab-cell > .ab-slot{grid-area:3 / 1;height:auto;min-height:0;aspect-ratio:var(--ar,1.5);margin-top:clamp(16px,3.4vw,26px)}
  .about.ab-m.ab-rest .ab-short{margin-top:clamp(28px,6vw,44px);padding-top:0}
  .about.ab-m.ab-rest .ab-say .ab-lab{flex-basis:auto}
}
/* the People face answers too (Greg's follow-up: "make it more like the places page … some of the artists can be clickable");
   the answer line shows on that face, with the way to the Credits in it (his second note: "do like how you have it now, linking
   to the credits page. If we can keep that intact too") */
.about.ab-m.ab-rest.ab-who .ab-cell > :is(.ab-say,.ab-slot){visibility:visible}
.about.ab-m .ab-n{padding:0 .07em;margin:0 -.07em;text-decoration:none!important;transition:outline-color .2s,background-color .2s,color .2s}
.about.ab-m .ab-n.ab-has{outline:1px solid color-mix(in oklab,var(--ink) 32%,transparent);outline-offset:0}
@media (hover:hover){.about.ab-m .ab-n:hover{outline:1px solid var(--ink);outline-offset:0}}
.about.ab-m .ab-n[aria-pressed="true"]{background:var(--ink);color:var(--bg);outline:1px solid var(--ink);outline-offset:0}
.about.ab-m .ab-n:focus-visible{outline:1px solid var(--ink);outline-offset:.12em}
.ab-say .ab-go,.ab-say .ab-vid{padding:0 0 1px;font-size:inherit;color:var(--ink);border-bottom:1px solid var(--mute);text-decoration:none!important}
.ab-say .ab-go:focus-visible,.ab-say .ab-vid:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
@media (hover:hover){.ab-say .ab-go:hover,.ab-say .ab-vid:hover{border-bottom-color:var(--ink)}}
/* the expand mark beside the caption: four arrows to the corners, as Greg drew it; the photograph opens large, alone on black */
.ab-exp{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:10px;padding:0;color:var(--ink);vertical-align:-4px;opacity:.75}
.ab-exp svg{display:block}
@media (hover:hover){.ab-exp:hover{opacity:1}}
.ab-exp:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.ab-lb{z-index:70;background:#000;padding:calc(var(--pad) + 30px) var(--pad) var(--pad)}
.ab-lbf{margin:0;max-width:100%;text-align:center}
.ab-lbf img{display:block;max-width:min(100%,1800px);max-height:calc(100svh - var(--pad) * 2 - 60px);width:auto;height:auto;margin:0 auto}
.ab-lbf iframe{display:block;width:min(100%,1280px);aspect-ratio:16/9;border:0;background:#000;margin:0 auto}
.ab-lbf figcaption{margin-top:12px;font-size:12.5px;color:var(--mute)}
/* ── SELECTED WORK AS A LIST on a computer too (Greg: "Selected work can look more like the mobile page. With album art on the left
   followed by names in a list style. (no mouse animation needed)"). G: each record a row, the small sleeve, the name, the record,
   the year and his credit, Play at the end; the list at the bottom left of the poster and the awards at the top right as before;
   nothing follows the pointer. The name is smaller on a phone (Greg: "under selected work can the Artist name be a little bit
   smaller font"). ── */
body.wk-g .pk-fly,body.wk-g .pk-cur{display:none!important}
body.wk-g .pk{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:clamp(14px,1.6vw,22px);align-items:end;border:0;padding:0 0 clamp(14px,1.6vw,22px);cursor:pointer}
body.wk-g .pk + .pk{margin-top:0}
body.wk-g .pk .pk-sl{display:block;width:64px;grid-column:1;grid-row:1/4;align-self:center}
body.wk-g .pk h3{grid-column:2/-1;grid-row:1;font-size:clamp(24px,2.4vw,40px);line-height:1;letter-spacing:-.045em;color:var(--ink)}
@media (hover:hover){body.wk-g .pk:hover h3{text-decoration:underline;text-decoration-thickness:.04em;text-underline-offset:.12em}}
body.wk-g .pk .pk-t{display:block;grid-column:2;grid-row:2;margin:5px 0 0;font-size:13.5px;line-height:1.35}
body.wk-g .pk .pk-c{display:block;grid-column:2;grid-row:3;justify-self:start;align-self:start;margin:2px 0 0;font-size:11px}
body.wk-g .pk .pk-a{display:flex;grid-column:3;grid-row:2/4;align-self:end;justify-self:end;margin:0}
@media (min-width:1048px){body.wk-g .pks{grid-column:1/8}}
@media (max-width:1047px){body.wk-g .pk h3{font-size:clamp(22px,4.8vw,36px)}body.wk-g .pk{grid-template-columns:56px minmax(0,1fr) auto}body.wk-g .pk .pk-sl{width:56px}}
/* ── Places and people on one wall (2026-10-20; August: "have all the people and places together … a wall of cities and people in a
   very cool, creative way"). WALL: one sentence wall, the grey joining words telling the kinds apart. PLAQUES: every place and
   name a plaque in a thin box, places filled a little, people open. Mockups: #about-m-wall, #about-m-plaques. ── */
.ab-wall-p,.ab-tiles{display:none}
.about.ab-m.ab-wall .ab-cell > .ab-wall-p{display:block}
.about.ab-m.ab-plaq .ab-cell > .ab-tiles{display:flex}
.about.ab-m:is(.ab-wall,.ab-plaq) .ab-cell > :is(.ab-sent,.ab-people){display:none}
.about.ab-m:is(.ab-wall,.ab-plaq) .ab-face{display:none}  /* one face: no Places / People switch */
.about.ab-m .ab-cell > .ab-wall-p{grid-area:2 / 1;max-width:none;text-wrap:pretty;font-size:clamp(22px,min(2.5vw,calc((100svh - 420px) / 9)),40px);line-height:1.06}
.about.ab-m .ab-cell > .ab-tiles{grid-area:2 / 1;flex-wrap:wrap;gap:10px;align-content:flex-start}
.ab-tile{padding:.2em .5em .24em;font-family:var(--bfam,var(--sans));font-weight:700;letter-spacing:-.04em;font-size:clamp(20px,min(2vw,calc((100svh - 420px) / 11)),32px);line-height:1;color:var(--ink);outline:1px solid color-mix(in oklab,var(--ink) 32%,transparent);outline-offset:0;transition:outline-color .2s,background-color .2s,color .2s}
.ab-tile.ab-pl{background:color-mix(in oklab,var(--ink) 10%,transparent)}  /* a place: a filled plaque; a person: an open one */
@media (hover:hover){.ab-tile:hover{outline-color:var(--ink)}}
.ab-tile[aria-pressed="true"]{background:var(--ink);color:var(--bg);outline-color:var(--ink)}
.ab-tile:focus-visible{outline:1px solid var(--ink);outline-offset:.12em}
.about.ab-m.ab-rest:is(.ab-wall,.ab-plaq) .ab-cell > :is(.ab-say,.ab-slot){visibility:visible}
@media (min-width:1048px){
  .about.ab-m.ab-rest:is(.ab-wall,.ab-plaq):not(.ab-beside) .ab-body > .ab-cell{width:66.666%;max-width:66.666%}
  .about.ab-m.ab-rest.ab-pos-low:is(.ab-wall,.ab-plaq):not(.ab-beside) .ab-cell > :is(.ab-wall-p,.ab-tiles){align-self:end}
}
@media (max-width:1047px){.about.ab-m.ab-rest .ab-cell > :is(.ab-wall-p,.ab-tiles){grid-area:2 / 1;margin-top:0}}
/* the wall and his writing (2026-10-20; August, of the wall on his wide screen: "i like this but that quote piece should have its own
   line and look better"): on a computer the writing leaves the narrow column at the right and takes a row of its own under the
   wall, on the grid: the title line in the serif at the left, the paragraph and "Read the full piece" in a measured column
   beside it. The wall and the row stop at 1400px, so neither runs the width of a wide screen. */
@media (min-width:1048px){
  .about.ab-m.ab-rest:is(.ab-wall,.ab-cols,.ab-ledger,.ab-crawl,.ab-mix):not(.ab-beside) .ab-body{display:block}
  .about.ab-m.ab-rest:is(.ab-wall,.ab-cols,.ab-ledger,.ab-crawl,.ab-mix):not(.ab-beside) .ab-body > .ab-cell{width:auto;max-width:1400px}
  .about.ab-m.ab-rest:is(.ab-wall,.ab-cols,.ab-ledger,.ab-crawl,.ab-mix) .ab-short{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;max-width:1400px;margin-top:clamp(44px,7svh,92px);flex:none}
  .about.ab-m.ab-rest:is(.ab-wall,.ab-cols,.ab-ledger,.ab-crawl,.ab-mix) .ab-short .ab-lead{grid-column:1/6;grid-row:1/3;max-width:13em;font-size:clamp(24px,2.1vw,34px);line-height:1.14}
  .about.ab-m.ab-rest:is(.ab-wall,.ab-cols,.ab-ledger,.ab-crawl,.ab-mix) .ab-short .ab-para{grid-column:6/12;grid-row:1;margin:0;max-width:58ch;font-size:clamp(17px,1.35vw,21px);line-height:1.32}
  .about.ab-m.ab-rest:is(.ab-wall,.ab-cols,.ab-ledger,.ab-crawl,.ab-mix) .ab-short .ab-more{grid-column:6/12;grid-row:2;justify-self:start;margin-top:clamp(14px,1.6vw,20px)}
}
/* ── Selected work, H (2026-10-20; August, of D: "I really like how it looked before … simple looks better. But if he wants it that
   way, how do we do that?"). D's large names kept; each gets its small sleeve at the left, which is Greg's "album art on the left
   followed by names in a list"; nothing follows the pointer. The pointed-at record's details stay in the corner block. H is the
   live Selected work; #work-d is the poster alone, #work-g the full list. ── */
body.wk-h .pk-fly{display:none!important}
body.wk-h .pk{display:grid;grid-template-columns:clamp(48px,4.4vw,72px) minmax(0,1fr) auto;column-gap:clamp(14px,1.6vw,24px);align-items:center;border:0;padding:0}
body.wk-h .pk .pk-sl{display:block;width:100%;grid-column:1;grid-row:1/3;align-self:center}
body.wk-h .pk h3{grid-column:2}
body.wk-h .pk + .pk{margin-top:clamp(6px,.8vw,12px)}
@media (max-width:879px), (max-width:1047px) and (aspect-ratio < 23/20), (hover:none){body.wk-h .pk h3{font-size:clamp(22px,4.8vw,36px)}}  /* Greg (V2 notes): "under selected work can the Artist name be a little bit smaller font" on the phone; H had gone back to D's 30px floor */
@media (max-width:879px), (max-width:1047px) and (aspect-ratio < 23/20), (hover:none){body.wk-h .pk{grid-template-columns:56px minmax(0,1fr) auto;align-items:end;padding:0 0 clamp(14px,2.2vw,22px)}body.wk-h .pk .pk-sl{width:56px;grid-row:1/4}body.wk-h .pk h3{grid-column:2/-1}body.wk-h .pk .pk-t,body.wk-h .pk .pk-c{grid-column:2}body.wk-h .pk .pk-a{grid-column:3}body.wk-h .pk + .pk{margin-top:0}}
/* ── Three more directions for places and people (2026-10-20; August, of the wall on a wide screen: "this looks sparse. what other
   different creative directions can there be"). COLS, a triptych of large names; LEDGER, a session ledger in small type with
   dotted leaders (the leaders of August's own site); CRAWL, two bands edge to edge, moving. #about-m-cols, -ledger, -crawl. ── */
.ab-cols-w,.ab-ledger-w,.ab-crawl-w,.ab-mix-w{display:none}
.about.ab-m.ab-cols .ab-cell > .ab-cols-w,.about.ab-m.ab-ledger .ab-cell > .ab-ledger-w,.about.ab-m.ab-crawl .ab-cell > .ab-crawl-w{display:grid}
.about.ab-m:is(.ab-cols,.ab-ledger,.ab-crawl,.ab-mix) .ab-cell > :is(.ab-sent,.ab-people){display:none}
.about.ab-m:is(.ab-cols,.ab-ledger,.ab-crawl,.ab-mix) .ab-face{display:none}
.about.ab-m .ab-cell > :is(.ab-cols-w,.ab-ledger-w,.ab-crawl-w,.ab-mix-w){grid-area:2 / 1}
.about.ab-m.ab-rest:is(.ab-cols,.ab-ledger,.ab-crawl,.ab-mix) .ab-cell > :is(.ab-say,.ab-slot){visibility:visible}
/* COLS: three stacks of large names under small headings */
.ab-cols-w{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.ab-col h3{font-weight:400;color:var(--mute);margin:0 0 clamp(8px,1vw,14px)}
.ab-col h3.ab-sub{margin-top:clamp(14px,1.8vw,24px)}
.ab-ci{font-family:var(--bfam,var(--sans));font-weight:var(--bw,700);letter-spacing:var(--bls,-.045em);font-size:clamp(20px,min(2.1vw,calc((100svh - 380px) / 14)),36px);line-height:1.08;color:var(--ink)}
.ab-ci .ab-nm{font:inherit;color:inherit}
@media (max-width:1047px){.ab-cols-w{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3vw,28px)}.ab-ci{font-size:clamp(22px,5.6vw,34px)}}
/* LEDGER: rows with dotted leaders, two halves of the grid */
.ab-ledger-w{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--gap) * 2);align-items:start;font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.4}
.ab-lg h3{font-weight:400;color:var(--mute);margin:0 0 10px}
.ab-lg h3.ab-sub{margin-top:22px}
.ab-lr{display:flex;align-items:baseline;gap:10px;padding:5px 0}
.ab-lr .ab-nm{flex:none;font:inherit;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ab-ld{flex:1 1 auto;min-width:16px;border-bottom:1px dotted color-mix(in oklab,var(--ink) 38%,transparent);transform:translateY(-.3em)}
.ab-lv{flex:0 1 auto;max-width:62%;color:var(--mute);text-align:right;text-wrap:pretty}
@media (max-width:1047px){.ab-ledger-w{grid-template-columns:minmax(0,1fr);row-gap:26px}.ab-lv{max-width:56%}}
/* CRAWL: two bands edge to edge; the places one way, the people the other; a band stops under the pointer or the keyboard */
.ab-crawl-w{grid-template-columns:minmax(0,1fr);row-gap:clamp(10px,1.6vw,22px);margin:0 calc(-1 * var(--pad));overflow:hidden}
.about.ab-m.ab-rest.ab-crawl:not(.ab-beside) .ab-body > .ab-cell{max-width:none}
.ab-band{display:flex;overflow:hidden;white-space:nowrap;padding:.08em 0}
.ab-track{display:flex;flex:none;align-items:baseline;gap:.35em;padding-right:.35em;animation:ab-crawl 70s linear infinite;font-family:var(--bfam,var(--sans));font-weight:var(--bw,700);letter-spacing:var(--bls,-.045em);line-height:1;color:var(--ink)}
.ab-band-p .ab-track{font-size:clamp(40px,7vw,120px)}
.ab-band-n .ab-track{font-size:clamp(26px,4.2vw,72px);animation-direction:reverse;animation-duration:95s}
.ab-track .nw{display:inline-flex;align-items:baseline}
.ab-track .ab-nm{font:inherit;color:inherit}
.ab-track .ab-c{color:var(--mute)}
.ab-band:hover .ab-track,.ab-band:focus-within .ab-track{animation-play-state:paused}
@keyframes ab-crawl{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ab-track{animation:none}.ab-band{overflow-x:auto}}
/* MIX: cities and people interleaved in one block, as large as the screen allows; places bold, people a lighter weight (2026-10-20) */
.about.ab-m.ab-mix .ab-cell > .ab-mix-w{display:block;max-width:none;text-wrap:balance;font-size:clamp(28px,min(5vw,calc((100svh - 440px) / 9)),104px);line-height:1;letter-spacing:-.05em}  /* nine lines' worth of the screen's height: at 1920 by 1080 the wall ran to ten lines at 94px and the writing fell off the screen */
.ab-mix-w .ab-n{font-weight:500;letter-spacing:-.04em}
.about.ab-m.ab-rest.ab-mix:not(.ab-beside) .ab-body > .ab-cell{max-width:none}
@media (max-width:760px){.about.ab-m.ab-mix .ab-cell > .ab-mix-w{font-size:clamp(28px,7.4vw,56px)}}
@media (min-width:761px) and (max-width:1047px){.about.ab-m.ab-mix .ab-cell > .ab-mix-w{font-size:clamp(28px,min(5.4vw,calc((100svh - 300px) / 9)),56px)}}  /* a tablet or a wide, short window: sized to the height too (at 1000 by 650 the phone size made the wall taller than the screen) */
/* the comparison switch lists the faces (2026-10-20): seven words, so the heading's sentence keeps clear of a wider block, and on a
   phone the switch drops under the sentence instead of standing in the corner */
.about.ab-m.ab-pick{--swr:600px}
@media (max-width:760px){.about.ab-mock.ab-pick .ab-sw{position:static;flex-wrap:wrap;gap:8px 16px;margin-top:12px}}
/* ── The mixed wall is the live About, with the switch for every visitor (2026-10-22; August: "make the mixed wall the live about
   and allow him to switch between the options"). The switch stands in the heading's top right corner on a computer and under the
   heading's sentence on a phone; the old Places / People switch is retired (People is a word of the new one). ── */
.about.ab-m .ab-sw{display:flex;gap:16px;position:absolute;right:0;top:10px}
.about.ab-m:not(.ab-split) .ab-face{display:none!important}
.about.ab-m.ab-split .ab-face{display:flex;position:absolute;right:0;top:37px;margin:0}  /* Places / People is open: its own switch, right under the row, under its word */
.about.ab-m{--swr:var(--swr-w,500px)}
@media (max-width:1047px){.about.ab-m .ab-sw{position:static;flex-wrap:wrap;gap:8px 16px;margin-top:12px}.about.ab-m{--swr:0px}.about.ab-m.ab-split .ab-face{position:static;margin-top:10px}}
/* ── Places / People is the About (2026-10-26). The row of views is for comparing only (an address that names a version: ab-pick); a
   visitor sees the Places · People switch alone, where it stood before 2026-10-22: in the heading's corner, the heading's sentence
   keeping clear of it, and under the sentence on a phone. ── */
.about.ab-m:not(.ab-pick) .ab-sw{display:none!important}
.about.ab-m:not(.ab-pick){--swr:130px}
@media (min-width:541px) and (max-width:1047px){.about.ab-m.ab-split:not(.ab-pick) .ab-face{position:absolute;margin:0}}
@media (max-width:540px){.about.ab-m.ab-split .ab-face{position:static;margin-top:12px}}
/* ── The studios under a place, three ways (2026-10-26; August: "a better way of showing the individual studios under a place").
   ROW (-rooms): the rooms as small boxed names under the place's line, the language of the places at a smaller size: boxed where
   there are photographs, plain grey where there are none yet, the open room filled. INDEX (-index): one room to a line under a
   hairline, with how many photographs, the open room's name filled. STRIP (-strip): each room's photographs as small prints under
   its name, the rooms without photographs said once in grey. ── */
.ab-rooms{display:flex;flex-basis:100%;margin-top:clamp(10px,1.4svh,14px)}
.ab-rooms-row{flex-wrap:wrap;gap:8px 8px}
.ab-room{padding:4px 8px;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:-.005em;line-height:1.25;color:var(--ink);text-align:left;outline:1px solid color-mix(in oklab,var(--ink) 32%,transparent);outline-offset:0;transition:outline-color .2s,background-color .2s,color .2s}
@media (hover:hover){button.ab-room:hover{outline-color:var(--ink)}}
.ab-room.on{background:var(--ink);color:var(--bg);outline-color:var(--ink)}
.ab-room.off{color:var(--mute);font-weight:500;outline:0}
.ab-room:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.ab-rooms-index{flex-direction:column;max-width:min(560px,100%)}
.ab-rooms-index .ab-room{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;padding:8px 0;outline:0;background:none;border-top:1px solid var(--rule);font-size:15px}
.ab-rooms-index .ab-room:last-child{border-bottom:1px solid var(--rule)}
.ab-rooms-index .ab-room.on{background:none;color:var(--ink)}
.ab-rooms-index .ab-room.on .ab-rn{background:var(--ink);color:var(--bg);padding:1px 6px;margin-left:-6px}
.ab-rooms-index .ab-room.off{padding-left:0}
.ab-rc{flex:none;font-weight:400;font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
@media (hover:hover){.ab-rooms-index button.ab-room:hover .ab-rn{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.ab-rooms-strip{gap:14px 24px;flex-wrap:wrap;padding:2px 2px 6px}
@media (max-width:760px){.ab-rooms-strip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}}  /* a phone: one row that the finger moves; a computer: the rooms wrap, so none is cut at the edge */
.ab-ctl{white-space:nowrap}
.ab-cap > .ab-ctl > :first-child{margin-left:0}
.ab-cap > span:not(.ab-ctl){margin-right:10px}  /* the gap is the words', so when the count and the icon go to the next line they start on the margin */  /* with the rooms shown the caption is often only the count: no indent then */
.ab-grp{flex:none;display:flex;flex-direction:column;gap:7px}
.ab-gl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;line-height:1.2;color:var(--mute);white-space:nowrap}
.ab-grp.on .ab-gl{color:var(--ink)}
.ab-thumbs{display:flex;gap:6px}
.ab-thumb{width:clamp(72px,7vw,104px);aspect-ratio:3/2;padding:0;opacity:.5;transition:opacity .2s}
.ab-thumb img{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:hover){.ab-thumb:hover{opacity:1}}
.ab-thumb.on{opacity:1;outline:1px solid var(--ink);outline-offset:2px}
.ab-thumb:focus-visible{opacity:1;outline:1px solid var(--ink);outline-offset:2px}
.ab-also{flex-basis:100%;margin-top:8px;font-size:12.5px;color:var(--mute)}
.about.ab-blind .ab-sw,.about.ab-blind .draft,.about.ab-blind .ab-opts{display:none!important}  /* #about-blind: renders for a blind comparison */

/* ─── Bugs (2026-10-27), for every version of the site ───────────────────────────────────────────────────────────────
   The player covered "Back to the top" at every size: Contact steps up over it as the caption, the record panel and the
   Credits line already did. */
body.playing .contact{padding-bottom:calc(clamp(56px,7vw,96px) + var(--dock-up))}
/* The menu dropped Work under 420px wide, so most phones had no way to Selected work; the five words fit down to about
   375px with a smaller gap, so Work goes only under that. The words never wrap (the name went to two lines at 360). */
header > a,header nav a{white-space:nowrap}
@media (max-width:419px){header{gap:12px}header nav{gap:10px}}
/* Work: the corner's Play stands under the details it belongs to (a rule of D's, body.wk-d .pk-a, outranked the
   corner's own and sent it to the far edge). The name's box is as wide as the name, so the empty run of a row is not
   "on the name" (js/work.js picks a record when the pointer rests on its name or sleeve). */
body.wk-d .pk-cur .pk-a{grid-column:auto;grid-row:auto;margin:10px 0 0;justify-self:start}
body.wk-h .pk h3{justify-self:start}
/* About: the full piece's label is the site's label, not the piece's serif (.ab-piece p outranked .sc) */
.ab-piece .ab-lbl{margin:0;font-family:var(--sans);font-size:10.5px;line-height:1.4;color:var(--mute)}

/* ─── One language (2026-10-27) ───────────────────────────────────────────────────────────────────────────────────────
   August: "the proper design style to follow is the selected work and the people/places. i like that design the best so
   i want everything to somewhat feel in that world." The pass above (body.studio) is on by default since then; #v1 shows
   the site as it was, to compare; #titles keeps the bold section titles. What that world is (section 60 of
   docs/DESIGN-NOTES.md): a part opens with one line, a small grey label and one plain line; one large thing, bold
   Geist with tight tracking, grey against ivory for what is pointed at or chosen; small blocks at the corners, the middle
   empty; controls are small capitalised words; small text in a few steps (10.5 caps, 12.5 grey, 14, 16); flat black. */

/* Work, the Discography and Credits open with the line and the label alone (August, 2026-10-27: "i dont think we need
   'records he engineered,...' or 'every credit with a cover...' or 'one pile for each year'"); About keeps its line,
   which says who he is */
body.studio .spines .hd p:not(.his){display:none}

/* the opening: the line under his name at the one-line size, in full ink */
body.studio .ttl p{font-size:clamp(15px,1.25vw,17px);opacity:1}

/* Selected work. On a phone, a tablet and a touch screen every name is ivory: grey meant "not the one pointed at", and
   there nothing is pointed at (five of the six read as unavailable). A mouse in a narrow window gets an underline. */
@media (max-width:879px), (max-width:1047px) and (aspect-ratio < 23/20), (hover:none){
  body.studio.wk-h .pk h3{color:var(--ink)}
}
@media (max-width:879px) and (hover:hover), (max-width:1047px) and (aspect-ratio < 23/20) and (hover:hover){
  body.studio.wk-h .pk:hover h3{text-decoration:underline;text-decoration-thickness:.04em;text-underline-offset:.12em}
}
/* on a computer the names follow the window's height too, as About's sentence does, and stop at 72px (they grew to 88px
   on width alone, past their sleeves, which stop at 72px); the sleeve keeps to its name's height */
@media (min-width:1048px) and (hover:hover), (min-width:880px) and (min-aspect-ratio:23/20) and (hover:hover){
  body.studio.wk-h .pks{--nm:clamp(34px,min(4.4vw,calc((100svh - 350px) / 6)),72px)}
  body.studio.wk-h .pk h3{font-size:var(--nm);letter-spacing:-.045em}
  body.studio.wk-h .pk{grid-template-columns:calc(var(--nm) * .98) minmax(0,1fr) auto}
  body.studio.wk-h .pk{cursor:default}body.studio.wk-h .pk h3,body.studio.wk-h .pk .pk-sl{cursor:pointer}  /* a record opens from its name or sleeve, as it is picked (js/work.js) */
  body.playing.wk-d .pk-cur{margin-bottom:calc(var(--dock-up) - 64px)}  /* the player stands at the bottom right: the corner's details step up clear of it */
}
@media (max-width:1199px){body.studio.wk-h #awards,body.studio.wk-h .pk-cur{grid-column:9/13}}  /* a narrower poster: the corner blocks get a fourth column, so no award line wraps */
/* the corner blocks in the site's small steps: 14px, the name at 500, the year and credit 11.5px, the record 12.5px */
body.studio.wk-d .pk-cur{font-size:14px}
body.studio .pk-cur b{font-weight:500}
body.studio .pk-cur .mono{font-size:11.5px}
body.studio:is(.wk-d,.wk-e,.wk-f) .aw-t{font-size:12.5px}
body.studio:is(.wk-d,.wk-e,.wk-f) #awards .hd h3{line-height:1.4}
@media (max-width:879px), (max-width:1047px) and (aspect-ratio < 23/20), (hover:none){
  body.studio.wk-h .pk .pk-t{font-size:14px}
  body.studio.wk-h .pk .pk-c{font-size:11.5px}
}

/* Discography: the head opens the way every part does, one line, the label and one plain line ("Every credit with a
   cover, newest first."). The line is as wide as the head, not the page: the row climbs into the top right, and a line
   to the margin was drawn across its far sleeves (under them it showed through their fade), and the head's box lay over
   them (pointing and clicks there did nothing). The head lets the pointer through to the row, all but Shelf / Crate,
   which keeps to its words. Beside the records the head stands at About's height; stacked, where the timeline follows
   right under it, the label keeps the pass's place and the plain line is left out so nothing below moves. */
body.studio:not(.titles) .shelf .id{border-top:1px solid var(--ink);padding-top:10px;top:clamp(76px,7.2vw,96px);pointer-events:none;min-width:min(280px,40vw)}  /* the line keeps a length of its own now the head is the label and Shelf / Crate */
body.studio:not(.titles) .shelf .id .view{width:max-content;pointer-events:auto}
@media (max-width:1047px){body.studio:not(.titles) .shelf .id{top:clamp(64px,9vw,96px)}}
@media (max-width:640px), (max-width:1047px) and (max-aspect-ratio:9/10){
  body.studio:not(.titles) .shelf .id{top:calc(var(--pad) + 35px);right:var(--pad)}  /* stacked, the row is under the head, not beside it: the line runs to the margin as every part's does */
}
/* the opened record: About's head over its words (the line, the label in capitals, the large title), the small print at
   the grey step */
body.studio .bk{border-top:1px solid var(--ink);padding-top:10px}
body.studio .bk .no{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
body.studio .small{font-size:12.5px}

/* Credits */
.spine-info:empty{border-top-color:transparent}  /* nothing pointed at: the line under the chart says nothing (2026-11-02) and its rule waits */
body.studio .pile .py{font-size:10.5px}
body.studio .agrp h4{font-weight:400}
body.studio .pile.on::after{height:1px}
body.studio .pile:hover .slabs,body.studio .pile:focus-visible .slabs{filter:none;outline:1px solid var(--ink);outline-offset:2px}  /* pointing at a pile outlines it, as a record and a place are outlined; it brightened before */
body.studio .opened .slab{transform:none}  /* the open lists keep one left edge (the piles in the chart keep their jitter; --dx is written on each record's own style, so the shift itself is turned off) */
@media (min-width:761px){body.studio .slab{font-size:max(12.5px,calc(var(--sh) * .56))}}  /* the titles stood at an 11.5px floor at most window sizes */
body.studio .find{font-size:16px;border-bottom-color:var(--rule)}  /* the search field as the contact fields are: 16px (an iPhone zooms on less), a pale line that turns ivory */
body.studio .find:focus{border-bottom-color:var(--ink)}
@media (max-width:760px){body.studio .find{flex:1 1 100%}body.studio .find::placeholder{font-size:14px}}  /* the count ends the search line, as the comment there says; the placeholder at the 14px step, so it is not cut (the field stays 16px: an iPhone zooms on the field's size) */
@media (min-width:761px){body.studio .find{flex:1 1 260px;max-width:380px}}  /* the field gives up width before the count wraps to a line of its own (761 to 830px) */
body.studio #spine-info > span:not(.mono):not(.ro-aw):not(.ro-1),body.studio #spine-info > .ro-1 > span:not(.mono){color:var(--mute)}  /* a record's details in grey, under its name, whatever follows them */
/* the Awards view: the chart with the awarded records lit stands beside the lists on the first screen and stays beside
   them as they scroll (it stood under them, 1.6 screens down, the left half of the first screen empty) */
@media (min-width:761px){body.studio .piles.aw .cside{align-self:start;position:sticky;top:calc(var(--pad) + 40px);margin-top:59px}}
@media (min-width:761px) and (max-height:760px){body.studio .piles.aw .cside{margin-top:0}}  /* (the chart's own column since 2026-11-03: .cside holds the chart and, in #awdots, the details under it) */  /* a short window: the chart's years clear the read-out bar on the first screen */

/* Contact: the two names at the large step (they are the part's large thing once the title is a label), the form against
   the right margin no wider than 600px with the middle empty, the links a row of words, the foot in the menu's capitals
   so the page ends the way it begins (his name and the place in the bottom left corner, Back to the top in the right) */
body.studio:not(.titles) .person h3{font-size:clamp(27px,3vw,46px);letter-spacing:-.045em}
@media (min-width:761px){
  body.studio .who{grid-column:1/7}
  body.studio .say{grid-column:8/13;justify-self:end;width:min(100%,600px)}
}
body.studio .links{border-top:0;padding-top:0}
body.studio .foot{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
body.studio .foot a{margin-left:auto}
body.studio .said{font-size:12.5px}

/* About */
body.studio .about.ab-m .ab-say .ab-lab,body.studio .about.ab-m.ab-rest .ab-say .ab-lab{flex-basis:100%}  /* the label always over its line, as in the heading (it sat beside a plain line or a name, over his sentence) */
body.studio .about.ab-m.ab-rest.ab-on:not(.ab-shot){min-height:0}  /* a place with no photograph does not grow the section: the growth is room for the photograph */
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){body.studio .about.ab-m.ab-rest.ab-on:not(.ab-shot) .ab-body{padding-top:clamp(28px,4svh,48px)}}
body.studio .ab-say .ab-his{font-size:clamp(20px,1.8vw,26px)}  /* his words in two steps, statement and paragraph (the answer was a third size between them) */
body.studio .ab-rooms-row .ab-room{padding:2px .3em;font-size:14px;font-weight:500}  /* -rooms: About's own type, the words on the margin and the boxes hugging them */
body.studio .ab-rooms-row{margin-left:-.3em}
/* the photograph behind starts at the part's line, so the line is its top edge: it filled the top padding too, where
   the menu's black-to-clear ground drew a soft fade across it (the kind of fade that reads as "AI") */
body.studio .about.ab-m.ab-shot:not(.ab-under):not(.ab-beside):not(.ab-who):not(.ab-awf-on) .ab-bg{top:clamp(76px,7.2vw,96px)}
@media (max-width:1047px){body.studio .about.ab-m.ab-shot:not(.ab-under):not(.ab-beside):not(.ab-who):not(.ab-awf-on) .ab-bg{top:clamp(64px,9vw,96px)}}
body.studio .about.ab-m.ab-rest:not(.ab-shot) .ab-cell > .ab-say{min-height:39px!important;align-content:flex-end}  /* the room of a label over one line, kept at rest too: a place without a photograph, or a name, answers without moving the sentence (the hint was one line, the answer two) */

/* ─── One large size, Work hung from the top, Credits in Work's world (2026-10-27, later) ─────────────────────────────
   August: "why does the selected work look smaller than the discography. should the selected work and awards be aligned
   to the top. should ABOUT be the same size as selected work ... same kind of formatting", and of Credits: "better
   spacing with text and type. just super clean design. especially with the All, awards, film... pills". */

/* One large size for the one large thing of Work, About and Contact: the six names, the sentence and the two people are
   set alike, by the window's width and height, and stop at 64px. (They were three sizes: 56, 38 and 38px at 1280.) The
   sentence's widest line is 15 times its size, so at this size it fits its column at every computer width without
   wrapping. */
body.studio{--big:clamp(30px,min(3.7vw,calc((100svh - 360px) / 7)),64px)}
@media (min-width:1048px) and (hover:hover), (min-width:880px) and (min-aspect-ratio:23/20) and (hover:hover){
  body.studio.wk-h .pks{--nm:var(--big)}
  /* the names and the awards hang from one line under the heading, and the record's details stand level with the last
     name's foot: the part is as tall as what it holds, as About is at rest (it was a screen tall, the names at its foot) */
  body.studio.wk-h .work{min-height:0;grid-template-rows:auto auto auto auto}
  body.studio.wk-h .pks{grid-row:2/4;align-self:start;margin-top:clamp(28px,3vw,44px)}
  body.studio.wk-h #awards{grid-row:2;align-self:start}
  body.studio.wk-h .pk-cur{grid-row:3;align-self:end;padding-top:clamp(24px,3vw,40px)}
  body.studio.wk-h .work > .draft{grid-row:4}
}
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){
  body.studio .about.ab-m .ab-sent,body.studio .about.ab-m .ab-people .ab-names{font-size:var(--big)}
  body.studio .about.ab-m.ab-rest:not(.ab-beside) .ab-body > .ab-cell{flex:1 1 0;min-width:0;width:auto;max-width:none}
  body.studio .about.ab-m.ab-rest .ab-short{flex:0 0 auto;width:34ch}
  body.studio:not(.titles) .person h3{font-size:var(--big)}
}

/* Credits. The open year: each title in a box of its record's colour, the box round the whole title (Greg on the call of
   2026-11-02: "it was slightly easier to read when the color boxes were around the whole title … the color helps my eyes
   separate it"). From 2026-10-27 to then each title stood beside a small square of its colour. The type is the pass's. */
body.studio .opened{--rh:max(26px,calc(var(--sh) + 6px))}
body.studio .ostacks{height:auto;gap:clamp(16px,2vw,28px)}
body.studio .ostack{max-width:320px;gap:4px}
body.studio .opened .slab{height:auto;min-height:var(--rh);font-size:14px}
body.studio .opened .slab span{line-height:var(--rh)}
body.studio .opened .slab em{opacity:.72;font-size:11.5px}
/* the Awards lists: the same boxes, the awards on a line under the title inside the box. His own nine show; the projects'
   are folded under one line (js/stacks.js) */
body.studio .acols{column-gap:clamp(16px,2vw,28px)}
body.studio .acols .slab{margin-bottom:6px;padding-bottom:6px}
body.studio .acols .slab em.tag{font-size:12px;margin-top:-4px;opacity:.78}
.amore{display:flex;align-items:baseline;gap:12px;width:100%;padding:12px 0 10px;border-top:1px solid var(--rule);text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);transition:color .2s}
.amore em{margin-left:auto;font-style:normal;color:var(--ink)}
.amore:hover,.amore:focus-visible{color:var(--ink)}
.amore:hover em,.amore:focus-visible em{text-decoration:underline;text-underline-offset:3px}
.amore[aria-expanded="true"]{margin-bottom:9px}
/* the Awards view since 2026-11-03: everything in one place, under the word Awards alone. Both runs on the same columns (three
   from 1100px, two below, one on a phone), the headings kept for a screen reader only, the award words a step smaller (12px
   at every size, now 11px, the size of the years in the piles) */
.opened.aone .agrp h4{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (min-width:1100px){.opened.aone .acols{columns:3}}
body.studio .opened.aone .acols .slab em.tag{font-size:11px}
/* Credits holds still (2026-11-03; August: "this shelf shouldnt move or shift when i click film, awards, tv, etc … do we think
   that the date should be top adjusted … just want less movement and jumping"). The chart and the open list hang from one line
   at the top: the list's heading (the year, Awards, a search) always stands in the same spot and the titles hang under it; the
   chart keeps its width and place in every view, Awards included; the list's column is as tall as the tallest year (fifteen
   titles), so nothing under the part moves either, and the chart stands at its foot. Before, the list stood on the floor too,
   so the heading and the chart rose and fell with the length of the list (by up to 310px), and Awards narrowed the chart
   (764px to 463 at 1400 wide) and lifted it. A filter dims what it leaves out (js/stacks.js). The mockups behind the address keep their own columns. */
@media (min-width:761px){
  body.studio .piles{align-items:start}
  body.studio .piles .cside,body.studio .piles.aw.apop .cside{align-self:end}  /* the piles stand on the part's floor, level with the foot of a full year's list; the room over them is sky (at the top they left an empty block under the floor: August, 2026-11-03, "whats this space at the bottom here") */
  body.studio .opened,body.studio .opened.aw{justify-content:flex-start;min-height:calc(clamp(20px,1.9vw,27px) + 24px + 15 * var(--rh) + 14 * 4px + 30px)}  /* 24px: the heading line stands a pixel or two taller than its type */
  body.studio .opened::after{display:none}  /* the floor under the list: the list no longer stands on it */
  body.studio .piles.aw.apop{grid-template-columns:minmax(0,1fr) min(540px,44%)}
  body.studio .piles.aw.apop .cside{position:static;margin-top:0}
  body.studio .piles.apop .opened.aone .acols{columns:1;max-width:320px}  /* one column, as the year's list is: in two the long titles were cut ("El Camino: A Breaki…") */
}
/* the mark of an award in the two mockups of 2026-11-03: filled a win, a ring a nomination, gold only for his own */
.mk{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink)}
.mk.w{background:var(--ink)}
.mk.g{box-shadow:inset 0 0 0 1.5px var(--gold)}
.mk.g.w{background:var(--gold)}
/* #awnames: his own three on lines of their own at the large step of the pane, his projects' thirteen as a wall of names; a
   picked name is the filled box About's picked place is, the rest go grey, and its records answer under them */
.awn1{display:grid;gap:clamp(24px,3.4svh,40px)}
.awl{margin:0 0 10px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.awown{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.awnm{display:inline-flex;align-items:baseline;gap:10px;margin:0 -6px;padding:1px 6px 2px;color:var(--ink);text-align:left;border-radius:1px;transition:background-color .2s,color .2s}
.awnm b{font-weight:700;letter-spacing:-.03em;transition:color .2s}
.awnm span{font-size:12.5px;color:var(--mute);transition:color .2s}
.awnm.big{display:block;position:relative;width:fit-content;max-width:100%;margin:0;padding-left:22px}  /* the name and its note run as one line of text, so a name that wraps on a phone takes its note along after its last word (as flex boxes the note stood in a column beside the second line) */
.awnm.big b{font-size:clamp(24px,2.6vw,38px);line-height:1.12}
.awnm.big span{margin-left:10px;white-space:nowrap}
.awnm.big .mk{position:absolute;left:6px;top:calc(clamp(24px,2.6vw,38px) * .56 - 5px);width:10px;height:10px}
.awwall{display:flex;flex-wrap:wrap;gap:2px 20px;margin:0 -6px 0 0}
.awwall .awnm b{font-size:clamp(17px,1.65vw,24px);line-height:1.25}
.awwall .awnm span{font-size:11px;font-variant-numeric:tabular-nums}
.awn1:has(.awnm.on) .awnm:not(.on) b{color:var(--mute)}
.awnm.on{background:var(--ink)}
.awnm.on b{color:var(--paper)}
.awnm.on span{color:var(--paper);opacity:.65}
.awnm:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
@media (hover:hover){.awnm:not(.on):hover b{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}}
.awans{display:grid}
.awa{grid-area:1/1;visibility:hidden}
.awa.on{visibility:visible}
.awa-h{margin:0 0 9px;font-size:12.5px;color:var(--mute)}
.awa-l{margin:0;display:flex;flex-wrap:wrap;gap:5px 20px}
.awr{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.4;color:var(--ink);text-align:left}
.awr .mks{display:inline-flex;gap:3px}
.awr .mk{width:7px;height:7px}
@media (hover:hover){.awr:hover{text-decoration:underline;text-underline-offset:3px}}
.awr:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
/* #awdots: a table of plain type on the black, a hairline under each row, the column names on end; his own columns first with
   a line after them, his own rows first with a stronger line after them; a long table scrolls sideways in a narrow window,
   the titles staying put */
@media (min-width:761px) and (max-width:1099px){.piles.aw:has(.adots){grid-template-columns:minmax(0,.38fr) minmax(0,1fr)}}
@media (min-width:1100px){.piles.aw:has(.adots){grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}}
.cside{min-width:0}
.awdet{display:none}
@media (min-width:761px){.piles.aw:has(.adots) .awdet{display:flow-root;margin-top:30px;padding-top:16px;border-top:1px solid var(--rule)}}
.awdet .dt{display:block;width:fit-content;max-width:100%;padding:5px 9px 6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(242,239,232,.1);border-radius:1px;color:var(--t);font-size:17px;font-weight:700;line-height:1.2;letter-spacing:-.02em}  /* the title in its record's colour, as the rows in the table: no cover */
.awdet .dm{display:block;margin-top:7px;font-size:12.5px;line-height:1.35;color:var(--mute)}
.awdet ul{display:grid;gap:4px;margin:12px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.35}
.awdet li{display:flex;gap:9px;align-items:baseline}
.awdet li .mk{width:7px;height:7px;transform:translateY(-1px)}
.awdet li em{font-style:normal;color:var(--mute)}
.awdet li b{font-weight:600}
.awd tr.awrow.cur th button{text-decoration:underline;text-underline-offset:3px}
.awd{overflow-x:auto}
.awd table{border-collapse:collapse}
.awd th,.awd td{padding:0;font-weight:400}
.awd-g th{padding:0 0 10px 8px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);text-align:left;white-space:nowrap}
.awd-c th{vertical-align:bottom;padding:0 0 10px;min-width:21px}
.awd-c th span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11.5px;line-height:1;color:var(--mute);white-space:nowrap}
.awd-c th.h span{color:var(--ink)}
.awd .s{border-left:1px solid var(--rule)}
.awd tbody tr{border-top:1px solid var(--rule)}
.awd tbody tr.his + tr:not(.his){border-top-color:var(--mute)}
.awd tbody th{position:sticky;left:0;z-index:1;background:var(--paper);text-align:left;padding:0 12px 0 0}
.awd tbody th button{display:block;max-width:min(210px,19vw);margin:2px 0;padding:3px 7px;overflow:hidden;background:var(--c);box-shadow:inset 0 0 0 1px rgba(242,239,232,.1);border-radius:1px;font-size:13px;line-height:1.3;color:var(--t);text-align:left;white-space:nowrap;text-overflow:ellipsis}  /* each title in its record's colour, as in the open year ("the color helps my eyes separate it") */
.awd tbody tr.his th button{font-weight:600}
.awd td{padding:0 4px;text-align:center;vertical-align:middle;white-space:nowrap}
.awd td .mk{width:6px;height:6px;margin:0 1px;vertical-align:middle}
@media (hover:hover){.awd tr.awrow:hover th button{text-decoration:underline;text-underline-offset:3px}}
.awd tbody th button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
/* #awswap (a mockup, 2026-11-03): His own · His projects in the heading's corner, as Places · People; both lists in one grid
   cell, the one not chosen invisible, so the place keeps the taller list's height and the lists hang from its top */
.oh .aw-sw{margin:0 0 0 auto;align-self:baseline}
.aw-sw button{white-space:nowrap}
@media (max-width:540px){.opened.aswap-on .oh{flex-wrap:wrap}.oh .aw-sw{flex-basis:100%;margin:12px 0 0}}  /* a phone: under the heading, as About's Places · People is (beside it, "His own" and "His projects" took two lines each) */
.aw-sw button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.aswap{display:grid}
.aswap > .agrp{grid-area:1/1;align-self:start}
.aswap > .agrp.off{visibility:hidden}
/* the projects' records are one row each, the title and its mark: with their award words under them, three columns of
   230px wrapped those words to as many as five lines and the list stood 835px tall, which the held place then kept under
   his nine as well. The words come up in the line under the chart when a record is pointed at, all of them, and the
   opened record lists them in full. Three across on a computer (the chart a little narrower below 1100px, so a column
   keeps 170px), two on a phone: about 360px at 1280 by 800, 570px on a phone */
.aswap .agrp:not(.his) .acols{columns:2}
.opened:not(.aswap-full):not(.aswap-cut) .aswap .agrp:not(.his) .acols .slab{flex-wrap:nowrap;height:var(--sh);padding-bottom:0}
.opened:not(.aswap-full):not(.aswap-cut) .aswap .agrp:not(.his) .slab em.tag{display:none}
/* #awswap-full: the award words under each title as in His own (the list's own rules); #awswap-cut: on one line, cut where too
   long, all of them in the line under the chart when the record is pointed at */
.opened.aswap-cut .aswap .agrp:not(.his) .slab em.tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* #awswap-page: each set of eight in His own's columns (two, three from 1100px, one on a phone); the count after the switch,
   invisible on His own so the switch keeps its place */
.opened.aswap-page .aswap .agrp:not(.his) .acols{columns:2}
@media (min-width:1100px){.opened.aswap-page .aswap .agrp:not(.his) .acols{columns:3}}
@media (max-width:760px){.opened.aswap-page .aswap .agrp:not(.his) .acols{columns:1}}
@media (min-width:761px){.piles.aw.aswap-on:has(.aswap-page){grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}}
@media (min-width:1100px){.piles.aw.aswap-on:has(.aswap-page){grid-template-columns:minmax(0,.55fr) minmax(0,1fr)}}
.aw-step{margin-left:8px;padding:0 0 3px;font-size:inherit;letter-spacing:inherit;color:var(--ink);border-bottom:1px solid var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.aw-step.off{visibility:hidden}
.aw-step:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (hover:hover){.aw-step:hover{border-bottom-color:var(--ink)}}
@media (min-width:761px){.piles.aw.aswap-on{grid-template-columns:minmax(0,.55fr) minmax(0,1fr)}.aswap .agrp:not(.his) .acols{columns:3}}
@media (min-width:1100px){.aswap .acols{columns:3}}  /* his nine three across too: three rows */
.opened.aswap-on{justify-content:flex-start}
/* #awchart (a mockup, 2026-11-03): the projects' records marked in the chart with a plain ring; his own keep the gold */
.pile .slabs i.pa{box-shadow:0 0 0 1px var(--ink);position:relative;z-index:1}
.amark .amore[aria-expanded="true"]{margin-bottom:0}  /* nothing opens under the line, so it keeps its place */
.amk{display:inline-grid;justify-items:end;text-align:right}
.amk i{grid-area:1/1;font-style:normal}
.amk i.off{visibility:hidden}  /* both labels in one place, as wide as the longer: on a phone "Show 38 in the piles" takes two lines and "Hide" one, and the line moved 15px */
.pile .slabs i.pa:hover,.pile .slabs i.win:hover,.pile .slabs i.nom:hover{z-index:2;outline:1px solid var(--ink);outline-offset:1px}

/* The part's name, larger (2026-10-27; August: "you dont think those should be larger?"). At 10.5px capitals in grey it
   was the menu's size and read as a sixth menu word, once the lines under it were gone. Now a clear step between the
   menu (10.5) and the large thing (--big): 18 to 22px, weight 500, sentence case, ivory; not bold. The small capitals
   stay for the labels inside a part (Awards, Places / People, His own). */
body.studio:not(.titles) :is(.work .hd h2,.contact .hd h2,.spines .hd h2,.shelf .id h2),body.studio:not(.titles) .about .hd h2{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;text-transform:none;line-height:1.25;color:var(--ink)}
body.studio:not(.titles) .about.ab-m .ab-face{top:calc(37px + clamp(18px,1.6vw,22px) * 1.25 - 14.7px)}  /* Places / People stays level with the line under the name, which the larger name moved down */
/* About opens with the line and its name alone, as every part does now (August, 2026-10-27: "remove this: Greg Hayes is
   a Grammy- and Emmy-winning scoring mixer and recording engineer."); Places / People stands on the name's baseline, as
   Credits' filters do */
body.studio:not(.titles) .about .hd p{display:none}
body.studio:not(.titles) .about.ab-m .ab-face{top:calc(10px + clamp(18px,1.6vw,22px) * .9 - 10px)}

/* ─── Greg's people (2026-10-27): his Website People on the People face, his Master People one click away ───────── */
.ab-people .ab-allgo{display:inline-block;margin-top:clamp(18px,2.4vw,30px);padding:0 0 2px;font-size:clamp(13px,1.1vw,14.5px);font-weight:500;color:var(--ink);border-bottom:1px solid var(--mute)}  /* as "Read the full piece →" */
@media (hover:hover){.ab-people .ab-allgo:hover{border-bottom-color:var(--ink)}}
.ab-people .ab-allgo:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.ab-all{width:min(1400px,100%);margin:0 auto;padding:clamp(10px,4svh,48px) 0 clamp(40px,8svh,80px)}
.ab-all .ab-lbl{margin:0;font-family:var(--sans);font-size:10.5px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.ab-all h3{margin:10px 0 clamp(28px,5svh,56px);font-size:var(--big,clamp(30px,3.7vw,64px));font-weight:700;letter-spacing:-.045em;line-height:1}
.ab-all section + section{margin-top:clamp(28px,4svh,48px)}
.ab-all h4{margin:0 0 12px;font-size:10.5px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.ab-all ul{list-style:none;columns:4 200px;column-gap:var(--gap)}
.ab-all li{break-inside:avoid;padding:3px 0;font-size:15px;line-height:1.35}
.ab-all li button{padding:0;font:inherit;color:var(--ink);text-align:left}
.ab-all li span{color:var(--mute)}  /* a name whose project is not attached yet (his sheet says so): there, not a link */
@media (hover:hover){.ab-all li button:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}}
.ab-all li button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
/* Credits, Awards (2026-11-03): his own eight on the page, then one line that opens the awarded projects in a panel, as
   "Explore all collaborators →" does in About */
.opened .aw-allgo{justify-self:start;padding:0 0 2px;font-size:clamp(13px,1.1vw,14.5px);font-weight:500;color:var(--ink);border-bottom:1px solid var(--mute)}
@media (hover:hover){.opened .aw-allgo:hover{border-bottom-color:var(--ink)}}
.opened .aw-allgo:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.aw-all{--sh:clamp(22px,2.7svh,26px);--sg:2px}
.aw-all .acols{columns:3 250px;column-gap:clamp(16px,2vw,28px)}
.aw-all .slab{transform:none}
.ab-say .ab-rec{margin-right:12px}
/* The People face with Greg's 40 names (2026-10-27): on a computer the wall fits the screen (its size follows the window's
   height, and stops at the one large size), so the answer over it stays in view whichever name is picked; a name with
   photographs puts its photograph behind the wall, as a place does behind the sentence (the People face had none until
   his third folder). On a phone the wall runs on and the photograph takes the row under it, as a place's does. */
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){
  body.studio .about.ab-m .ab-people .ab-names{font-size:min(var(--big), max(22px, calc((100svh - 300px) / 15)))}
  body.studio .about.ab-m.ab-who.ab-shot:not(.ab-under):not(.ab-beside) .ab-bg{display:block;position:absolute;inset:0;top:clamp(76px,7.2vw,96px);z-index:0;overflow:hidden;background:#000}
}
/* The People face as one paragraph across the page (2026-10-27; August: "what it would look like if all the names were
   together going from one side of the screen to the other, one large paragraph"), to compare with the two groups:
   -para his 40 in his order, composers then artists, -every all 239 of the master list. The paragraph runs margin to
   margin; his writing stands under it at the right. */
.ab-pp{display:none}
.about.ab-m.ab-ppara .ab-people > h3,.about.ab-m.ab-ppara .ab-people > .ab-names:not(.ab-pp){display:none}
.about.ab-m.ab-ppara:not(.ab-pevery) .ab-people > .ab-pp-web,.about.ab-m.ab-pevery .ab-people > .ab-pp-all{display:block}
.about.ab-m.ab-ppara .ab-people > .ab-pp{margin-top:clamp(10px,1.4vw,18px)}
body.studio .about.ab-m.ab-ppara .ab-people > .ab-pp-web{font-size:clamp(26px,min(3.6vw,calc((100svh - 280px) / 12.7)),80px)}  /* sized so the 40 fill the width and stay within one screen (41px at 1280 by 800) */
body.studio .about.ab-m.ab-pevery .ab-people > .ab-pp-all{font-size:clamp(14px,min(1.35vw,calc((100svh - 260px) / 33)),30px);line-height:1.12}  /* all 239 within about one screen (16px at 1280 by 800) */
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){
  body.studio .about.ab-m.ab-rest.ab-who.ab-ppara:not(.ab-beside) .ab-body{flex-wrap:wrap}
  body.studio .about.ab-m.ab-rest.ab-who.ab-ppara:not(.ab-beside) .ab-body > .ab-cell{flex:1 1 100%;max-width:none}
  body.studio .about.ab-m.ab-rest.ab-who.ab-ppara .ab-short{margin:clamp(28px,4svh,48px) 0 0 auto}
}
/* a video in the lightbox (2026-10-27): the figure takes the player's width (it shrank to its caption, and the player's
   100% then had nothing to be a share of), no taller than the screen leaves room for */
.ab-lbf:has(iframe){width:min(100%,1280px,calc((100svh - var(--pad) * 2 - 70px) * 16 / 9))}
.ab-lbf:has(iframe) iframe{width:100%}
/* #auto (2026-10-28): the colour comes up by itself, so the opening is one screen; nothing to scroll through for it */
body.autoc .intro{height:100vh;height:100lvh}  /* as tall as the land (lvh, 2026-11-04), so nothing under it shows at the foot of a phone's screen */
/* (2026-10-28) his story apart from the wall, to compare: #storylink and #storypart (js/about.js) */
body.story-link .about.ab-m .ab-short > :is(.ab-lead,.ab-para){display:none}
body.story-link .about.ab-m .ab-short .ab-more{margin-top:0}
body.story-part .about.ab-m .ab-short{display:none!important}
.story{background:var(--paper);padding:clamp(76px,7.2vw,96px) var(--pad) clamp(40px,6vw,80px)}
@media (max-width:1047px){.story{padding-top:clamp(64px,9vw,96px)}}
.story > .hd{border-top:1px solid var(--ink);padding-top:10px}
.story > .hd h2{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.story .ab-piece{width:100%;max-width:none;padding-top:clamp(28px,4vw,56px)}
.story .ab-piece .ab-lbl{display:none}
@media (max-width:479px){header nav a[href$="#story"]{display:none}}  /* six words do not fit a phone's menu; the part is still the next thing under About */
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){body.story-link .about.ab-m.ab-rest .ab-short{width:auto;max-width:none;flex:0 0 auto}}  /* the one line keeps the bottom right corner, on the margin (the excerpt's 34ch column had held it in) */

/* The line opening (#lines, 2026-11-02; August: "a black screen, to the quick animation of a line drawing of the image, to
   black and white, to color"; then "can we make it a smoother animation"). Black; the room is drawn in lines from Greg
   outward (js/opening.js draws them on a canvas from img/eastwood-lines.json, made by tools/opening_lines.py from the
   photograph itself); the whole drawing alone a moment; the photograph comes up under it in black and white as the lines
   go; his name comes up on the black and white; then the colour. Every step is eased in and out and overlaps the next.
   The lines are placed exactly where the photograph is drawn: the hidden <i> takes the photograph's rules (covering the
   screen, centred, hung by its object-position; one drawing serves the upright file too, which is the frame's middle
   3:4) and the script reads it. The script adds .lines-go when the drawing is in (a div.ln; not .lines, which is the
   body's own class); without it the opening is as it is, a little late. Times from .lines-go: lines 0 to 1.35s, the
   photograph 1.55 to 2.75s, the lines out 1.85 to 2.85s, the name 2.3 to 3.4s, the colour 2.7 to 4.2s (the script's LN
   has the same figures). The colour is an animation of the photograph's filter here, not the script's level, so the
   graphics chip runs it; when it ends (.lines-done) the level, then at full, takes the photograph back. */
body.lines{--ln-ease:cubic-bezier(.45,0,.55,1)}
.ln{position:absolute;inset:0;container-type:size;pointer-events:none;will-change:opacity}
.ln canvas{position:absolute;inset:0;width:100%;height:100%}
.ln i{position:absolute;left:50%;top:min(0px,calc(47lvh - 30.4vw));width:max(100cqw,133.3334cqh);aspect-ratio:4/3;translate:-50% 0;visibility:hidden}
body.lines .land > *{animation:fadeup 1.5s ease 2.6s both}
body.lines .land > .pic{animation-name:ln-pre}  /* the photograph drawn at a fifth of a percent from the start (nothing at all would leave the browser to draw it on the frame it first shows) */
body.lines.lines-go .land > .pic{animation:ln-up 1.2s var(--ln-ease) 1.55s both}
body.lines.lines-go .land > .veil{animation:ln-in 1.2s var(--ln-ease) 1.55s both}  /* names of their own, so they start again at .lines-go (the same name would carry on from the page's start) */
body.lines.lines-go.autoc .land > .pic{will-change:opacity,filter;animation:ln-up 1.2s var(--ln-ease) 1.55s both,ln-colour 1.5s var(--ln-ease) 2.7s both}
body.lines.lines-go .land > .card{animation:ln-in 1.1s var(--ln-ease) 2.3s both}
body.lines.lines-go .land > .ln{animation:ln-out 1s var(--ln-ease) 1.85s both}
body.lines.lines-done .land > .pic{animation:none;will-change:auto}
body.lines .shelf{animation:ln-hold 1ms 3s both}  /* the discography, far down the page, is not drawn while the lines are: its first second on the page cost the drawing a frame in eight (measured 2026-11-02; hidden, none). The script shows it when the lines are in, or at the first scroll; this brings it back at 3s if the script never does */
body.lines.lines-shown .shelf{animation:none}
@keyframes ln-out{to{opacity:0}}
@keyframes ln-in{from{opacity:0}}
@keyframes ln-pre{from{opacity:.002}}
@keyframes ln-up{from{opacity:.002}}
@keyframes ln-hold{from{visibility:hidden}}
@keyframes ln-colour{from{filter:grayscale(1) brightness(.6) contrast(1.1)}to{filter:grayscale(0) brightness(1) contrast(1)}}  /* the photograph's filter (.lvf) at level 0 and at level 1 */

/* The snap opening (#snap, 2026-11-02; August: "start like a frame within a frame, rounded corner photo and then it does a
   satisfying snap animation to cover the full screen and then it goes to color. like three beats"). The opening's own
   frame (.pic, the screen) is the print: js/opening.js scales it down to half the screen's size in the middle of the
   black, rounds its corners, and has the photograph inside it show only its lit middle (the orchestra and the console: the
   whole photograph's dark wall and floor would lose the print's edges in the black); then lets it go, the frame growing
   to the screen as the photograph inside widens to the whole view, both from the screen's centre. Web Animations, sampled sixty times a
   second, so the graphics chip runs the movement; the rounding is the frame's own clip around the photograph's layer,
   so changing it never redraws the photograph. Times from .snap-go: the print pops up 0 to 0.52s, holds, gathers itself
   (1.15s) and snaps out (1.27s, at full size by about 1.55s, settled by about 1.8s); the shade and his name come up on the black
   and white; the colour 2.25 to 3.75s. Without the script the opening comes up late, as #lines does. */
body.snap .pic{overflow:hidden;will-change:transform}
body.snap .pic img{transform-origin:0 0;will-change:transform}
body.snap .land > *{animation:fadeup 1.5s ease 2.6s both}
body.snap .land > .pic{animation-name:ln-pre}
body.snap.snap-go .land > *{animation:none}
body.snap.snap-done .pic,body.snap.snap-done .pic img{will-change:auto}
body.snap .shelf{animation:ln-hold 1ms 3s both}  /* the discography is not painted while the print moves (as under #lines) */
body.snap.snap-shown .shelf{animation:none}

/* ─── The call of 2026-11-02 (Greg, Camille, August; the plan is the last section of docs/PLAN.md) ──────────────────── */

/* Selected work on a computer is set as on the phone: each name carries its record, the year and his credit under it, and
   Play at the right (Greg: "I like the way it comes up on the mobile site … where it just has this information … just
   underneath each one"; "it's not just Warren. It's this specific album"). The block of details at the bottom right goes,
   and the names are a little smaller (Camille: "it would reduce the font size"). Every name is ivory, underlined under
   the pointer, and the whole row opens its record (js/work.js opens from anywhere in a row once the corner block is
   hidden). The poster stays: the six at the bottom left, the awards at the top right. */
@media (min-width:1048px) and (hover:hover), (min-width:880px) and (min-aspect-ratio:23/20) and (hover:hover){
  body.studio.wk-h .pk-cur{display:none}
  body.studio.wk-h .pks{--nm:clamp(26px,min(3.2vw,calc((100svh - 420px) / 8.2)),50px);justify-self:start;width:min(100%,680px)}  /* no wider than a long record's line, so Play stays near its name */
  /* the record and the year with his credit share one line under the name (the phone has them on two), so the six still
     fit one screen with the names only a little smaller; a long title wraps and the year follows it */
  body.studio.wk-h .pk{grid-template-columns:calc(var(--nm) + 22px) fit-content(66%) minmax(0,1fr) auto;align-items:baseline;cursor:pointer}
  body.studio.wk-h .pk + .pk{margin-top:clamp(12px,1.5vw,20px)}
  body.studio.wk-h .pk .pk-sl{grid-row:1/3;align-self:center;cursor:pointer}
  body.studio.wk-h .pk h3{grid-column:2/-1;grid-row:1;color:var(--ink);cursor:pointer}
  body.studio.wk-h .pk:hover h3{text-decoration:underline;text-decoration-thickness:.04em;text-underline-offset:.12em}
  body.studio.wk-h .pk .pk-t{display:block;grid-column:2;grid-row:2;margin:6px 0 0;font-size:14px;line-height:1.35}
  body.studio.wk-h .pk .pk-c{display:block;grid-column:3;grid-row:2;justify-self:start;margin:6px 0 0 -8px;font-size:11.5px;white-space:nowrap}  /* 12px after the title (the row's column gap is 20) */
  body.studio.wk-h .pk .pk-a{display:flex;grid-column:4;grid-row:2;justify-self:end;margin:0 0 0 16px}
}

/* About, Places. At rest his title line and a paragraph stand at the bottom right again (the excerpt), on the Places face;
   once a place or a name is picked they go and "Read his story →" stays (Greg: "as soon as you click something, that in
   the bottom right should go away"). */
.about.ab-m:is(.ab-on,.ab-who) .ab-short > :is(.ab-lead,.ab-para){display:none}
.about.ab-m:is(.ab-on,.ab-who) .ab-short .ab-more{margin-top:0}
/* the line alone keeps the bottom right corner, on the margin under the room's box, where the layout puts the excerpt
   there (2026-11-04, August: "'Read his story' should be on that right side. Right now, it's just kind of in no man's
   land"): the excerpt's 34ch column had held it in, 316px from the margin at 974 by 800. Under the sentence (an upright
   window, a phone) it stays where it was, at the sentence's left edge */
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){body.studio .about.ab-m.ab-rest:is(.ab-on,.ab-who) .ab-short{width:auto;max-width:none;flex:0 0 auto}}
/* the photograph whole, black round it, never cropped to fill (Greg and Camille: the photographs have many shapes and the
   crop lost what was framed; the bottom of the Studio H photograph stays in view) */
.about.ab-m .ab-bg img{object-fit:contain}
.about.ab-m.ab-shot:not(.ab-under):not(.ab-beside):not(.ab-who){cursor:pointer}  /* a click on the photograph steps to the next (js/about.js) */
.about.ab-m.ab-shot:not(.ab-under):not(.ab-beside):not(.ab-who) :is(.ab-short,.ab-corner,.hd){cursor:auto}
/* the corner: the room in one box that drops down to the place's rooms, then the count and the expand icon. At the top
   right on a computer, under the Places / People switch; under the photograph on a phone. */
.ab-corner{display:none}
.about.ab-m.ab-cnr:not(.ab-under):not(.ab-beside):not(.ab-who) > .ab-corner-d{display:flex;position:absolute;right:var(--pad);top:calc(clamp(76px,7.2vw,96px) + 90px);z-index:3;flex-direction:column;align-items:flex-end;gap:10px;max-width:min(42ch,40%)}
.about.ab-m.ab-cnr.ab-under:not(.ab-who) .ab-cell > .ab-corner-m{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.ab-rbox{position:relative;display:block}
/* his sentence stops short of the box, by the width of the place's widest room (js/about.js sets --cnrw) (2026-11-03: at 800
   wide Los Angeles had three lines under the box) */
@media (max-width:879px), (max-width:1047px) and (aspect-ratio < 23/20){.about.ab-m.ab-cnr:not(.ab-under):not(.ab-beside):not(.ab-who) .ab-cell > .ab-say{max-width:min(44em,calc(100% - var(--cnrw,0px) - clamp(24px,3vw,40px)))}}  /* only between the phone and the computer layouts: on a computer the sentence's column ends well short of the corner */
.ab-rsel{display:inline-flex;align-items:center;gap:9px;padding:4px 9px;font-size:14px;font-weight:500;line-height:1.3;color:var(--ink);text-align:left;outline:1px solid color-mix(in oklab,var(--ink) 40%,transparent);outline-offset:0;background:#000}
button.ab-rsel{cursor:pointer}
@media (hover:hover){button.ab-rsel:hover{outline-color:var(--ink)}}
.ab-rsel:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.ab-rsel i{flex:none;width:7px;height:7px;margin-top:-4px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.ab-rsel[aria-expanded="true"] i{transform:rotate(225deg);margin-top:4px}
.ab-rlist{position:absolute;right:0;top:calc(100% + 6px);z-index:5;display:flex;flex-direction:column;align-items:stretch;min-width:100%;width:max-content;max-width:min(42ch,80vw);padding:6px;background:#000;outline:1px solid var(--rule)}
.ab-rlist[hidden]{display:none}
.ab-rlist > *{display:block;padding:5px 8px;font-size:14px;line-height:1.3;text-align:left;white-space:nowrap}
.ab-rlist > button{font-weight:500;color:var(--ink)}
.ab-rlist > button.on{background:var(--ink);color:var(--bg)}
@media (hover:hover){.ab-rlist > button:not(.on):hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.ab-rlist > button:focus-visible{outline:1px solid var(--ink);outline-offset:-1px}
.ab-rlist > span{color:var(--mute)}  /* a room he names with no photograph yet */
.ab-corner .ab-ctl{display:flex;align-items:center;font-size:12.5px;color:var(--mute)}
.ab-corner .ab-step{margin-left:0}
.ab-corner .ab-exp{margin-left:14px}
@media (max-width:760px){.ab-rlist{right:auto;left:0}}  /* on a phone the box stands at the left margin: its list opens to the right */
/* About, People: a name's photographs and its video as small squares under its lines, each opening large (Greg: "they
   don't need to be big, but then they're clickable") */
.ab-pths{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%;margin-top:clamp(10px,1.4svh,14px)}
.ab-pth{position:relative;flex:none;width:clamp(56px,5.2vw,78px);aspect-ratio:1;padding:0;overflow:hidden;background:#111;outline:1px solid color-mix(in oklab,var(--ink) 18%,transparent);outline-offset:0;cursor:pointer;transition:outline-color .2s}
.ab-pth img{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:hover){.ab-pth:hover{outline-color:var(--ink)}}
.ab-pth:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.ab-pth.ab-vid i{position:absolute;left:50%;top:50%;width:0;height:0;margin:-8px 0 0 -5px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--ink);filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}  /* a play mark on the video's square */
.ab-say .ab-pth.ab-vid{border:0;padding:0}
/* the photographs large: a catalogue with arrows at the sides; the caption says the place and the room, and where in the
   whole run this one is */
.ab-lbgo{display:none}
.ab-lb.cat .ab-lbgo{display:flex;position:fixed;top:50%;z-index:2;align-items:center;justify-content:center;width:44px;height:64px;margin-top:-32px;font-size:22px;color:var(--ink);opacity:.72;transition:opacity .2s}
.ab-lb.cat .ab-lbprev{left:max(4px,calc(var(--pad) - 40px))}
.ab-lb.cat .ab-lbnext{right:max(4px,calc(var(--pad) - 40px))}
@media (hover:hover){.ab-lb.cat .ab-lbgo:hover{opacity:1}}
.ab-lbgo:focus-visible{outline:1px solid var(--ink);outline-offset:-4px;opacity:1}
.ab-lb.cat{padding-left:max(var(--pad),48px);padding-right:max(var(--pad),48px)}
.ab-lb.cat .ab-lbf img{cursor:pointer}
.ab-lbf figcaption{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px}
.ab-lbn{font-variant-numeric:tabular-nums}
/* a picked place on a computer: his sentence for it stands at the top, under the part's line, in the room the row of rooms
   left (Greg: "this quote that comes through on some of them can be justified a little higher"); the large sentence stays
   at the foot where it was */
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){
  .about.ab-m.ab-rest.ab-on.ab-shot:not(.ab-beside):not(.ab-who) .ab-body{flex:1 1 auto;margin-top:0;align-items:stretch;padding-top:clamp(28px,4svh,44px)}
  .about.ab-m.ab-rest.ab-on.ab-shot:not(.ab-beside):not(.ab-who) .ab-cell{grid-template-rows:minmax(0,1fr) auto}
  .about.ab-m.ab-rest.ab-on.ab-shot:not(.ab-beside):not(.ab-who) .ab-cell > .ab-say{align-self:start;margin:0 0 clamp(18px,2.6svh,30px)}
  .about.ab-m.ab-rest.ab-on.ab-shot:not(.ab-beside):not(.ab-who) .ab-short{align-self:flex-end}
}
/* a picked name on a computer: its lines and squares in the top right corner, right-aligned, where the Places corner is.
   Both corners start level with the part's first line, under the Places / People switch (they covered it at first) */
/* (2026-11-04) the squares stand beside the lines, not under them: under them they hung up to 90px into the wall and covered
   names (August: "clicked sherri chung and photos cut off the text"). The squares at the left, their tops level with the
   name's label; the label and, under it, the lines (on one line) right-aligned at the right. The band is as tall as a
   square (56 to 66px here), which the room over the wall holds with 14px more (.ab-people below; at 1440 by 900 the face
   had 24px to spare under the screen's foot), so the wall still never moves when a name is picked */
.about.ab-m.ab-who.ab-pcnr > .ab-corner-d{display:flex;position:absolute;right:var(--pad);top:calc(clamp(76px,7.2vw,96px) + 90px);z-index:3;max-width:min(78%,880px)}
.ab-pans{display:grid;grid-template-columns:auto auto;justify-content:end;align-items:start;gap:6px clamp(14px,1.4vw,20px);text-align:right;font-size:clamp(14px,1.15vw,15.5px);line-height:1.45}
.ab-pans .ab-lab{grid-column:2;grid-row:1;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.ab-pans > span:not(.ab-lab):not(.ab-pths){grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 14px}
.ab-pans .ab-go,.ab-pans .ab-vid:not(.ab-pth){padding:0 0 1px;font-size:inherit;color:var(--ink);border-bottom:1px solid var(--mute)}
@media (hover:hover){.ab-pans .ab-go:hover{border-bottom-color:var(--ink)}}
.ab-pans .ab-pths{grid-column:1;grid-row:1 / span 2;flex-wrap:nowrap;justify-content:flex-end;margin-top:0}
.ab-pans .ab-pth{width:clamp(56px,4.4vw,66px)}
@media (min-width:1048px), (min-width:880px) and (min-aspect-ratio:23/20){
  .about.ab-m.ab-who .ab-cell > .ab-people{padding-top:14px}  /* with the room that was there (59px at 1280 by 800, 80 at 1728 by 1117), a square's height and 16px clear */
}
/* a picked place on a phone: the place's name takes the hint's spot over the sentence, the sentence does not move, then the
   photograph, the room's box and the count, and his words under them (Greg on the call: "when you click on Los Angeles,
   I think Los Angeles is moving down. And I think it can stay at the top in the mobile version, then have the picture,
   and then have the little quote below it") */
.about.ab-m.ab-rest.ab-on.ab-under:not(.ab-who) .ab-cell{grid-template-rows:auto auto auto auto auto}
.about.ab-m.ab-rest.ab-on.ab-under:not(.ab-who) .ab-cell > .ab-say{display:contents}
.about.ab-m.ab-rest.ab-on.ab-under:not(.ab-who) .ab-cell > .ab-say > .ab-lab{grid-area:1 / 1;align-self:end;min-height:39px;display:flex;align-items:flex-end;margin:0 0 clamp(12px,2.4svh,18px);line-height:1.4}
.about.ab-m.ab-rest.ab-on.ab-under:not(.ab-who) .ab-cell > .ab-sent{grid-area:2 / 1}
.about.ab-m.ab-rest.ab-on.ab-under:not(.ab-who) .ab-cell > .ab-slot{grid-area:3 / 1}
.about.ab-m.ab-rest.ab-on.ab-under:not(.ab-who) .ab-cell > .ab-corner-m{grid-area:4 / 1;margin-top:12px}
.about.ab-m.ab-rest.ab-on.ab-under:not(.ab-who) .ab-cell > .ab-say > :not(.ab-lab){grid-area:5 / 1;margin-top:clamp(18px,4vw,26px)}
/* the opened record on a phone: the sleeve about half as big (Greg on the call: "On the mobile site, it's a little more
   intrusive. I don't know if it could be half as big"), so its details start in the first screen */
@media (max-width:760px){body.studio .rec{--sz:min(36vw,190px)}}

/* #sg (2026-11-05, a trial; August: "can i just see what it would look like to have this font for the primary texts ITC
   Serif Gothic … just do everything all caps for the primary text"): the large bold type in ITC Serif Gothic, in capitals.
   The font is August's licensed copy in zz-fonts/, which the deploy leaves out (its rsync skips zz-*): this is for his
   own preview only, and the live site needs a web licence before it could carry it. Kept for the visit; #nosg ends it. */
@font-face{font-family:'ITC Serif Gothic';src:url(../zz-fonts/serif-gothic-light.ttf) format('truetype');font-weight:300;font-display:block}
@font-face{font-family:'ITC Serif Gothic';src:url(../zz-fonts/serif-gothic-regular.ttf) format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'ITC Serif Gothic';src:url(../zz-fonts/serif-gothic-bold.ttf) format('truetype');font-weight:700;font-display:block}
body.sg :is(.ttl h1, .pk h3, .aw-x h4, .cap h3, .oh > b, .ab-names, .ab-sent, .ab-tile, .ab-ci, .ab-track, .person h3, .ab-sign, .ab-all h3, #rec h3){font-family:'ITC Serif Gothic',var(--sans)!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:0!important}
body.sg :is(.ab-names, .ab-sent, .ab-track) :is(button, span, b){text-transform:uppercase!important;letter-spacing:0!important}
/* #sgname (2026-11-05; August: "what if we just did it for his name and kept everything else the same"): his name alone in
   Serif Gothic capitals, on the opening and where it signs off his story; every other line as it is. Kept for the visit;
   #nosgname ends it. */
body.sgname :is(.ttl h1, .ab-sign){font-family:'ITC Serif Gothic',var(--sans)!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:0!important}  /* a button does not take its parent's capitals: the places and names are buttons */