/* stillmids.com: the flow (dist/flow.js) and the room it opens. Phone first; 760px is the tablet step, 1100px the desktop step. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');
body[data-flow] { --ground:#0a0a0a;--ink:#f4f4f1;--dust:#8a8a86;--rule:#ffffff1f;--gut:clamp(18px,4vw,64px);--header-height:76px;--mono:'Geist Mono',ui-monospace,Menlo,monospace;background:var(--ground);color:var(--ink);padding-bottom:0; }
[data-flow] header { justify-content:space-between;padding:0 var(--gut);background:var(--ground); }
[data-flow] .wordmark { font:400 26px/1 'Anton',sans-serif;letter-spacing:.01em;text-transform:uppercase;padding:0; }
[data-flow] .header-right { position:static;gap:24px; }
[data-flow] .text-nav { gap:1.4em;font-size:14px; }
[data-flow] #library { padding:0 var(--gut) 96px;min-height:50svh; }
/* <header> inside main is a section heading, not the masthead. */
#library header { height:auto;display:block;background:none;justify-content:normal;align-items:normal; }
#library .note-head { display:grid; }
body[data-flow]:has(#player:not([hidden])) #library { padding-bottom:140px; }
@media(max-width:759px) { body[data-flow] { --header-height:64px; } [data-flow] .wordmark { font-size:22px; } [data-flow] .text-nav { gap:1em;font-size:13px; } }

/* The sheet: a record over the page. Bottom sheet on phones, centred panel from 760px. */
.sheet { position:fixed;inset:0;z-index:40;display:grid;align-items:end;justify-items:stretch; }
.sheet-scrim { position:absolute;inset:0;background:#000a;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); }
.sheet-panel { position:relative;isolation:isolate;max-height:92svh;overflow:auto;overscroll-behavior:contain;padding:22px 20px calc(24px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:var(--album-bg,#1a1a1a);color:var(--panel-ink,#fff);--panel-ink:var(--panel-ink,#fff);box-shadow:0 -20px 80px #000a;animation:sheet-up .38s cubic-bezier(.22,1,.36,1); }
.sheet-panel::before { content:'';position:absolute;inset:-30px;z-index:-1;background:var(--album-art) center/cover;filter:blur(40px) saturate(1.2) brightness(.55);opacity:.8; }
.sheet-panel::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--album-bg) 70%,transparent),color-mix(in srgb,var(--album-bg) 92%,#000) 60%); }
@keyframes sheet-up { from { transform:translateY(40px);opacity:0; } }
.sheet-close { position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#0003;color:inherit;font-size:24px;line-height:1; }
.sheet-close:hover { background:#0006; }
.sheet-head { display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start;margin-bottom:14px;padding-right:36px; }
.sheet-art { width:96px;height:96px;object-fit:cover;display:block; }
.sheet-title { margin:0;font:400 clamp(26px,5vw,40px)/1 'Anton',sans-serif;text-transform:uppercase;overflow-wrap:anywhere; }
.sheet-meta { margin:6px 0 0;font:400 12px/1.6 var(--mono);color:color-mix(in srgb,var(--panel-ink) 70%,transparent); }
.sheet-blurb { margin:10px 0 0;font-size:13px;line-height:1.6;white-space:pre-line;max-width:48em;color:color-mix(in srgb,var(--panel-ink) 85%,transparent);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; }
.sheet-actions { display:flex;flex-wrap:wrap;gap:16px;margin-top:12px; }
.sheet-action { border:0;border-bottom:1px solid color-mix(in srgb,var(--panel-ink) 45%,transparent);background:none;padding:0 0 1px;font:400 14px/1.4 'DM Sans',sans-serif;color:inherit;cursor:pointer; }
.sheet-action:hover { border-color:currentColor; }
.sheet-tracks .track-button { padding:11px 6px;min-height:44px; }
.sheet-tracks .track-row[aria-current] .track-button { color:#fff;background:color-mix(in srgb,var(--panel-ink) 10%,transparent); }
html.sheet-open { overflow:hidden; }
@media(min-width:760px) {
 .sheet { align-items:center;justify-items:center;padding:24px; }
 .sheet-panel { width:min(760px,100%);max-height:86vh;border-radius:8px;padding:28px 28px 26px;animation-name:sheet-in; }
 @keyframes sheet-in { from { transform:translateY(16px) scale(.985);opacity:0; } }
 .sheet-head { grid-template-columns:180px minmax(0,1fr);gap:24px;margin-bottom:18px; }
 .sheet-art { width:180px;height:180px; }
 .sheet-close { top:14px;right:14px; }
}

.slide-kicker { margin:0;font:400 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ffffffa0; }
.slide-meta { margin:8px 0 0;font:400 12px/1.6 var(--mono);color:#ffffffb0; }

/* ===== Round two (2026-11-08): the whole catalog at once by default; one record at a time as the second layer. ===== */
/* The room: a record filling the screen, laid out like a deck slide, with previous/next and an "all" way back. */
.sheet.room { align-items:stretch;justify-items:stretch;padding:0; }
.sheet.room .sheet-scrim { display:none; }
.sheet.room .sheet-panel { width:auto;height:100%;max-height:none;border-radius:0;background:#000;color:#fff;--panel-ink:#fff;box-shadow:none;animation:room-in .4s cubic-bezier(.22,1,.36,1);padding:64px var(--gut) 130px;overflow:auto; }
@keyframes room-in { from { opacity:0;transform:scale(1.02); } }
.sheet.room .sheet-panel::before { inset:0;filter:blur(50px) saturate(1.3) brightness(.45);transform:scale(1.15);opacity:1; }
.sheet.room .sheet-panel::after { background:linear-gradient(180deg,#0000,#000a 80%); }
.sheet.room .sheet-head { grid-template-columns:none;justify-items:center;gap:18px;margin:0;padding:0; }
.sheet.room .sheet-art { width:min(56vw,240px);height:auto;aspect-ratio:1;box-shadow:0 30px 70px -20px #000; }
.sheet.room .sheet-text { width:100%;min-width:0; }
.sheet-kicker { margin:0;font:400 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ffffffa0; }
.sheet.room .sheet-title { margin-top:4px;font-size:clamp(34px,9vw,80px);line-height:.95; }
.sheet.room .sheet-meta { color:#ffffffb0; }
.sheet.room .sheet-blurb { -webkit-line-clamp:3;color:#fffd; }
.sheet.room .sheet-action { border-color:#ffffff60;color:#fff; }
.sheet.room .sheet-tracks { margin-top:12px; } .sheet.room .sheet-tracks .track-row { border-color:#ffffff22; } .sheet.room .sheet-tracks .track-row[aria-current] .track-button { background:#ffffff14; }
.sheet.room .sheet-close,.mode-all { position:fixed;z-index:3;top:16px;left:var(--gut);right:auto;width:auto;height:auto;border:0;border-bottom:1px solid #ffffff80;border-radius:0;background:none;padding:0 0 1px;color:#fff;font:400 14px/1.4 'DM Sans',sans-serif;cursor:pointer; }
.sheet.room .sheet-close:hover,.mode-all:hover { border-color:#fff;background:none; }
/* Previous / next sit top right, level with "← all", so the bottom of the screen belongs to the player. */
.room-nav { position:fixed;z-index:3;top:6px;right:calc(var(--gut) - 10px);display:flex;align-items:center;gap:2px; }
.room-btn { width:40px;height:40px;border:0;background:none;color:#ffffffb0;font:400 18px/1 'DM Sans',sans-serif;cursor:pointer; } .room-btn:hover,.room-btn:focus-visible { color:#fff; }
.room-count { min-width:58px;text-align:center;font:400 12px/1 var(--mono);color:#fff; }
@media(min-width:760px) {
 .sheet.room .sheet-panel { display:grid;align-items:center;padding:40px var(--gut) 60px;overflow:hidden; }
 .sheet.room .sheet-head { grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:48px;max-height:100%;min-height:0; }
 .sheet.room .sheet-art { width:min(34vw,460px);justify-self:end; }
 .sheet.room .sheet-text { display:flex;flex-direction:column;min-height:0;max-height:calc(100svh - 100px); }
 .sheet.room .sheet-tracks { flex:1;min-height:0;overflow:auto;scrollbar-width:thin;-webkit-mask-image:linear-gradient(180deg,#000 90%,#0000);mask-image:linear-gradient(180deg,#000 90%,#0000);padding-bottom:20px; }
 .sheet.room .sheet-title { font-size:clamp(40px,5.2vw,84px); }
}

/* 16 · The flow ------------------------------------------------------------- */
.flow { isolation:isolate;position:relative;padding-top:6px; }
.flow::before { content:'';position:fixed;inset:0;z-index:-1;background:var(--art) center/cover;filter:blur(60px) brightness(.35) saturate(1.3);opacity:.7; }
.flow-stage { --cover:min(58vw,38svh);--side:calc(var(--cover) * .6);--gap:calc(var(--cover) * .2);--depth:200px;position:relative;height:calc(var(--cover) * 1.5);perspective:1200px;perspective-origin:50% 38%;touch-action:pan-y;overflow:hidden;margin:0 calc(-1 * var(--gut));cursor:grab;user-select:none;-webkit-user-select:none; }
.flow-item { position:absolute;left:50%;top:9%;width:var(--cover);height:var(--cover);margin-left:calc(var(--cover) / -2);transform-style:preserve-3d;transform:translateX(calc(var(--s) * (var(--side) + (var(--k) - 1) * var(--gap)))) translateZ(calc(-1 * var(--depth))) rotateY(calc(var(--s) * -58deg));transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s;z-index:calc(100 - var(--k)); }
.flow-item.is-front { transform:translateX(0) translateZ(0) rotateY(0); }
.flow-item.is-far { opacity:0;pointer-events:none; }
.flow-cover { width:100%;height:100%;object-fit:cover;display:block;box-shadow:0 20px 50px -10px #000;pointer-events:none; }
.flow-ref { position:absolute;top:100%;left:0;width:100%;height:100%;object-fit:cover;transform:scaleY(-1);opacity:.35;-webkit-mask-image:linear-gradient(0deg,#000 0%,#0000 55%);mask-image:linear-gradient(0deg,#000 0%,#0000 55%);pointer-events:none; }
.flow-cap { text-align:center;margin-top:4px; }
.flow-title { margin:4px 0 0;font:400 clamp(26px,7vw,56px)/.95 'Anton',sans-serif;text-transform:uppercase; }
.flow-all { display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:4px;margin-top:22px; }
.flow-thumb { border:0;padding:0;background:none;aspect-ratio:1;opacity:.55;transition:opacity .2s;cursor:pointer; }
.flow-thumb:hover,.flow-thumb[aria-selected="true"] { opacity:1; } .flow-thumb[aria-selected="true"] { outline:2px solid #fff;outline-offset:1px; }
.flow-thumb-img { width:100%;height:100%;object-fit:cover;display:block; }
@media(min-width:760px) { .flow-stage { --cover:min(30vw,36svh);--depth:260px;height:calc(var(--cover) * 1.5); } .flow-all { grid-template-columns:repeat(19,minmax(0,1fr));gap:5px;max-width:1312px;margin:22px auto 0; } }
@media (prefers-reduced-motion:reduce) { .flow-item,.sheet-panel,.sheet.room .sheet-panel { transition:none;animation:none; } }
body[data-flow] #library:not(:has(.flow)) > * { visibility:hidden; } /* the prerendered list and record markup are for crawlers and no-JS; the flow replaces them */

/* Under the record in front: play (pause while it plays), shuffle, tracks. */
.flow-actions { display:flex;justify-content:center;gap:22px;margin-top:12px; }
.flow-actions .sheet-action { color:var(--ink);border-color:#ffffff60;text-decoration:none; }
/* The record that is playing: a white line along the foot of its thumbnail. */
.flow-thumb { position:relative; }
.flow-thumb.is-playing::after { content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff; }
.flow-thumb.is-playing { opacity:1; }

/* ===== The player (2026-11-08): a band flush along the bottom edge; its title opens now playing, the whole screen. ===== */
#player.pl-flow { --band:72px;z-index:45;left:0;right:0;bottom:0;transform:none;width:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"np ctl";align-items:center;column-gap:12px;
 padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));border:0;border-top:1px solid #ffffff1f;border-radius:0;background:#0a0a0a;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:#fff; }
[data-site="stillmids"] #player.pl-flow,html.sheet-open #player.pl-flow { bottom:0; }
#player.pl-flow .pill-main { display:contents; }
#player.pl-flow .now-playing { grid-area:np;gap:12px;border-radius:0;padding:0;cursor:pointer; }
#player.pl-flow .now-playing:hover,#player.pl-flow .now-playing:focus-visible { background:none; }
#player.pl-flow .now-playing:hover strong { text-decoration:underline;text-underline-offset:3px; }
#player.pl-flow .now-playing img { width:48px;height:48px;border-radius:0;box-shadow:none; }
/* Track names are DM Sans, as in every tracklist; record names are Anton caps, as everywhere else. */
#player.pl-flow .now-playing strong { font:500 15px/1.25 'DM Sans',sans-serif; }
#player.pl-flow .now-playing span { font:400 12px/1.2 'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#ffffff90;margin-top:4px; }
#player.pl-flow .transport { grid-area:ctl;gap:2px; }
#player.pl-flow .transport .icon-button { width:40px;height:40px;padding:11px;border:0;background:none;color:#fff;border-radius:0; }
#player.pl-flow #toggle-play { width:44px;height:44px;padding:11px;background:#fff;color:#000;border-radius:50%; }
#player.pl-flow #shuffle { color:#ffffffb0; }
#player.pl-flow #close-player { display:none; }
#player.pl-flow .pl-top,#player.pl-flow .pl-big,#player.pl-flow .pl-queue,#player.pl-flow .pl-rec { display:none; }
/* Phones: progress is a line along the top edge (still draggable); play and next only. */
#player.pl-flow .pill-timeline { position:absolute;left:0;right:0;top:-7px;height:14px;padding:0; }
#player.pl-flow .pill-timeline > span { display:none; }
#player.pl-flow #seek.waveform { height:14px;border-radius:0; }
#player.pl-flow #seek .waveform-bars { display:none; }
#player.pl-flow #seek::before { content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:linear-gradient(90deg,#fff var(--progress,0%),#ffffff26 var(--progress,0%)); }
#player.pl-flow #previous,#player.pl-flow .transport #shuffle { display:none; }
#player.pl-flow #player-status { grid-column:1/-1;margin:6px 0 0;font:400 11px/1.4 var(--mono); }
body[data-flow]:has(#player:not([hidden])) .site-footer { padding-bottom:calc(var(--band,72px) + 34px + env(safe-area-inset-bottom)); }
body[data-flow]:has(#player:not([hidden])) .sheet.room .sheet-panel { padding-bottom:110px; }
@media(min-width:760px) {
 /* Wider: cover and title left, transport over the waveform in the middle, shuffle right. */
 #player.pl-flow { grid-template-columns:minmax(0,1fr) minmax(260px,340px) 40px;grid-template-areas:"np ctl ." "np time .";column-gap:24px;row-gap:2px;padding-top:12px;padding-bottom:12px; }
 #player.pl-flow .transport { justify-self:center; }
 #player.pl-flow #previous,#player.pl-flow .transport #shuffle { display:grid; }
 #player.pl-flow .transport #shuffle { position:absolute;left:auto;right:var(--gut);top:50%;transform:translateY(-50%);width:40px;height:40px;padding:11px;border:0; }
 #player.pl-flow .pill-timeline { position:static;grid-area:time;height:auto;display:flex;gap:12px; }
 #player.pl-flow .pill-timeline > span { display:block;font:400 11px/1 var(--mono);color:#ffffff90;min-width:3.2em; }
 #player.pl-flow .pill-timeline > span:last-child { text-align:right; }
 #player.pl-flow #seek.waveform { height:22px; }
 #player.pl-flow #seek .waveform-bars { display:flex; }
 #player.pl-flow #seek::before { display:none; }
 body[data-flow]:has(#player:not([hidden])) .sheet.room .sheet-panel { padding-bottom:130px; }
 body[data-flow]:has(#player:not([hidden])) .sheet.room .sheet-text { max-height:calc(100svh - 230px); }
}

/* Now playing: the same player filling the screen, laid out like the room. */
html.player-full { overflow:hidden; }
html.player-full #player.pl-flow { inset:0;z-index:50;isolation:isolate;overflow:auto;overscroll-behavior:contain;border:0;background:#000;
 grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "big" "rec" "np" "time" "ctl" "queue";align-content:start;align-items:start;row-gap:18px;padding:64px var(--gut) calc(32px + env(safe-area-inset-bottom));animation:room-in .4s cubic-bezier(.22,1,.36,1); }
html.player-full #player.pl-flow::before { content:'';position:fixed;inset:0;z-index:-1;background:var(--pl-art) center/cover;filter:blur(50px) saturate(1.3) brightness(.45);transform:scale(1.15); }
html.player-full #player.pl-flow::after { content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#0000,#000a 80%); }
html.player-full #player.pl-flow .pl-top { display:flex;justify-content:space-between;align-items:center;gap:16px;position:fixed;z-index:2;top:0;left:0;right:0;padding:14px var(--gut) 10px; }
.pl-back { border:0;border-bottom:1px solid #ffffff80;background:none;padding:0 0 1px;color:#fff;font:400 14px/1.4 'DM Sans',sans-serif;cursor:pointer;text-decoration:none; }
.pl-back:hover { border-color:#fff;color:#fff; }
html.player-full #player.pl-flow .pl-rec { display:block;grid-area:rec;justify-self:center;text-align:center;margin-bottom:-10px;font:400 clamp(18px,4.6vw,26px)/1 'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:#ffffffc0;text-decoration:none;border-bottom:1px solid #ffffff40;padding-bottom:3px; }
html.player-full #player.pl-flow .pl-rec:hover,html.player-full #player.pl-flow .pl-rec:focus-visible { color:#fff;border-color:#fff; }
html.player-full #player.pl-flow .pl-big { display:block;grid-area:big;justify-self:center;width:min(78vw,360px); }
.pl-big-art { display:block;width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 30px 70px -20px #000; }
html.player-full #player.pl-flow .now-playing { pointer-events:none;justify-content:center;text-align:center; }
html.player-full #player.pl-flow .now-playing img { display:none; }
html.player-full #player.pl-flow .now-playing strong { font:500 clamp(26px,7vw,44px)/1.12 'DM Sans',sans-serif;letter-spacing:-.01em;white-space:normal;overflow-wrap:anywhere; }
html.player-full #player.pl-flow .now-playing span { display:none; }
html.player-full #player.pl-flow .pill-timeline { position:static;grid-area:time;height:auto;display:flex;gap:12px; }
html.player-full #player.pl-flow .pill-timeline > span { display:block;font:400 12px/1 var(--mono);color:#ffffffb0;min-width:3.2em; }
html.player-full #player.pl-flow .pill-timeline > span:last-child { text-align:right; }
html.player-full #player.pl-flow #seek.waveform { height:44px; }
html.player-full #player.pl-flow #seek .waveform-bars { display:flex; }
html.player-full #player.pl-flow #seek::before { display:none; }
html.player-full #player.pl-flow .transport { grid-area:ctl;justify-self:center;gap:18px; }
html.player-full #player.pl-flow .transport .icon-button { width:52px;height:52px;padding:14px; }
html.player-full #player.pl-flow #previous,html.player-full #player.pl-flow .transport #shuffle { display:grid; }
html.player-full #player.pl-flow .transport #shuffle { position:static;transform:none; }
html.player-full #player.pl-flow #toggle-play { width:68px;height:68px;padding:20px; }
html.player-full #player.pl-flow .pl-queue { display:block;grid-area:queue;margin-top:8px; }
html.player-full #player.pl-flow .pl-queue[hidden] { display:none; }
.pl-queue-head { margin:0 0 6px;font:400 12px/1.6 var(--mono);color:#ffffffa0;font-weight:400; }
.pl-queue-list { list-style:none;margin:0;padding:0; }
.pl-q-row { border-top:1px solid #ffffff22; }
.pl-q-btn { width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:11px 0;border:0;background:none;color:#fff;text-align:left;cursor:pointer; }
.pl-q-btn:hover .pl-q-title { text-decoration:underline;text-underline-offset:3px; }
.pl-q-title { font:400 15px/1.35 'DM Sans',sans-serif;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.pl-q-meta { display:flex;align-items:baseline;gap:12px;min-width:0;max-width:20em;color:#ffffff90; }
.pl-q-rec { font:400 12px/1.2 'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; }
.pl-q-time { font:400 11px/1.4 var(--mono);flex:none; }
@media(min-width:760px) {
 html.player-full #player.pl-flow { height:100%;overflow:hidden;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto auto auto minmax(0,1fr);
  grid-template-areas:"big rec" "big np" "big time" "big ctl" "big queue";column-gap:56px;row-gap:22px;padding:72px var(--gut) 40px;align-content:stretch; }
 html.player-full #player.pl-flow .pl-big { width:min(36vw,480px);justify-self:end;align-self:center; }
 html.player-full #player.pl-flow .now-playing { justify-content:flex-start;text-align:left;align-self:end; }
 html.player-full #player.pl-flow .now-playing strong { font-size:clamp(32px,3.6vw,56px); }
 html.player-full #player.pl-flow .pl-rec { justify-self:start;text-align:left;align-self:end;font-size:clamp(20px,2vw,30px); }
 html.player-full #player.pl-flow .transport { justify-self:start; }
 html.player-full #player.pl-flow .pl-queue { min-height:0;overflow:auto;scrollbar-width:thin;-webkit-mask-image:linear-gradient(180deg,#000 88%,#0000);mask-image:linear-gradient(180deg,#000 88%,#0000);padding-bottom:24px; }
}
@media(min-width:1100px) { #player.pl-flow { grid-template-columns:minmax(0,1fr) minmax(320px,560px) minmax(0,1fr);column-gap:32px; } }
@media (prefers-reduced-motion:reduce) { html.player-full #player.pl-flow { animation:none; } }

/* Under the record in front, while it plays: the track (DM Sans), after a mono label. */
.flow-now { margin:10px 0 0;display:flex;justify-content:center;align-items:baseline;gap:10px;min-width:0; }
.flow-now-label { font:400 11px/1.4 var(--mono);color:#ffffff90; }
.flow-now-track { font:500 15px/1.3 'DM Sans',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; }