/* AMSP LISTENING LIBRARY — shared stylesheet · v0.6.8
   v0.5.0 established the type + color system; v0.6.0 added the Room 001
   cat hero; v0.6.1 added the Library hero flower; v0.6.4 added compact
   artist introductions; v0.6.5 adds the career/practice timeline;
   v0.6.6 simplifies its selected markers to album and release titles;
   v0.6.7 condenses Room 001 narrative bands 01, 02, and Keep open;
   v0.6.8 gives Derek's response its own transitional color field. */

/* ---------------------------------------------------------------
   FONTS — self-hosted WOFF2, subset from the official google/fonts
   sources. Licences: assets/fonts/OFL-*.txt
   Libre Baskerville and Montserrat ship as variable fonts (wght).
   font-display:swap, so text is always readable while loading.
   --------------------------------------------------------------- */
@font-face{
  font-family:"Libre Baskerville";
  src:url("fonts/libre-baskerville-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Libre Baskerville";
  src:url("fonts/libre-baskerville-italic-var.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("fonts/montserrat-var.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  /* core — v0.5.0 */
  --ink:#0A0A0A;
  --warm-white:#F7F5F0;
  --signal:#F0E20F;
  --paper:#EBE7DC;
  --paper-2:#DCD7CA;
  --muted:#65665F;
  --line:rgba(10,10,10,.22);

  /* room + utility accents — carried forward unchanged */
  --rain:#B8D9E5;
  --lake-deep:#0F2B28;
  --lake:#14524D;
  --lake-blue:#1D4F6B;
  --lake-mist:#D3E5E1;
  --orange:#FF7047;

  /* Derek response — a static transition from reply to unfinished future */
  --response-blue:#C8DCE8;
  --response-bridge:#E6E5D4;
  --response-yellow:#F4EDA0;

  /* derived, for contrast only.
     --muted (#65665F) clears AA on warm white (5.33:1) and paper (4.70:1) but
     NOT on the tinted fields: signal 4.31:1, mist 4.44:1, rain 3.89:1.
     --muted-deep clears AA on all three (5.65 / 5.83 / 5.11). */
  --muted-deep:#4C5651;
  --lake-label:#9FC4BD;

  --display:"Libre Baskerville",Georgia,serif;
  --body:"Montserrat",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --gut:18px;
  --max:1180px;
}
@media(min-width:700px){:root{--gut:36px}}

*{box-sizing:border-box}
html{scrollbar-gutter:stable}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--warm-white);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(to right,rgba(10,10,10,.038) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,.038) 1px,transparent 1px);background-size:24px 24px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit}

/* Focus: the orange ring alone is only 2.0–2.5:1 against signal, paper, warm
   white, rain, and mist. The ink ring underneath it carries the 3:1 boundary on
   light fields; the orange carries it on ink and lake deep. */
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;box-shadow:0 0 0 5px var(--ink)}

.skip{position:fixed;left:12px;top:12px;z-index:100;background:var(--signal);color:var(--ink);padding:9px 12px;font-family:var(--mono);font-size:12px;transform:translateY(-160%)}
.skip:focus{transform:none}
.wrap{width:min(100%,var(--max));margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------------------------------------------------------------
   TYPE ROLES
   display = Libre Baskerville · body = Montserrat · mono = IBM Plex Mono
   Uppercase is now reserved for labels, navigation, and status text.
   --------------------------------------------------------------- */
.mono,.eyebrow,.tag,.forecast,.platform,.room-nav,.mobile-nav,.credits{font-family:var(--mono);text-transform:uppercase;letter-spacing:.11em}
.eyebrow{font-size:11px;color:var(--muted);margin:0 0 12px;line-height:1.45}
.tag{display:inline-flex;align-items:center;gap:7px;border:1px solid currentColor;padding:5px 8px;font-size:10px;line-height:1.1}
.tag::before{content:"";width:6px;height:6px;background:currentColor;border-radius:50%}

h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:none;letter-spacing:-.015em}
h1{font-size:clamp(48px,14vw,150px);line-height:1.1;margin:0}
h2{font-size:clamp(30px,5vw,56px);line-height:1.14;margin:0 0 22px}
h3{font-size:clamp(22px,2.6vw,32px);line-height:1.18;margin:0 0 16px}

/* editorial italics and album titles are Libre Baskerville, except inside
   uppercase mono labels where the serif would fight the label. */
em,i,cite{font-family:var(--display);font-style:italic}
.mono em,.eyebrow em,.tag em,.forecast em,.platform em,.room-nav em,.mobile-nav em,.credits em,.thesis em,.room-card__status em,.coordinate__copy p em{font-family:inherit}

.lede{font-family:var(--body);font-weight:500;font-size:clamp(19px,2.4vw,27px);line-height:1.42;max-width:33em}
.small{font-size:14px;line-height:1.5;color:var(--muted)}
.measure{max-width:730px}

.band{padding:58px 0;border-top:1px solid var(--line)}
.band--compact{padding:42px 0}
.band--compact h2{margin-bottom:16px}
.band--compact .measure>p{margin-bottom:12px}
.band--compact .measure>:last-child{margin-bottom:0}
@media(min-width:900px){.band{padding:90px 0}.band--compact{padding:56px 0}}
.band--dark{background:var(--ink);color:var(--paper)}
.band--signal{background:var(--signal)}
.band--rain{background:var(--rain)}
.band--paper-2{background:var(--paper-2)}
.band--mist{background:var(--lake-mist)}
/* --muted does not clear AA on any of the three tinted fields; --muted-deep does. */
.band--mist .eyebrow,.band--mist .small,.band--mist figcaption,
.band--rain .eyebrow,.band--rain .small,.band--rain figcaption,
.band--paper-2 .eyebrow,.band--paper-2 .small,.band--paper-2 figcaption,
.band--signal .eyebrow,.band--signal .small,.band--signal figcaption,
.archive-hero .eyebrow,.archive-hero .small{color:var(--muted-deep)}
.band--dark .eyebrow,.band--dark .small,.band--dark figcaption{color:#a7a99e}
.band--lake{background:var(--lake-deep);color:var(--lake-mist)}
.band--lake h2{color:var(--warm-white)}
.band--lake .direct-listen{color:var(--signal)}

/* archival paper field, used for the room index */
.band--paper{position:relative;background:var(--paper)}
.band--paper::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(10,10,10,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,.075) 1px,transparent 1px);background-size:24px 24px}
.band--paper>*{position:relative}

/* Room 000 — lake palette, same structure as every other room */
/* .hero is declared later in this file at equal specificity, so the lake room
   needs .hero.hero--lake to win the cascade on background/min-height/padding. */
.hero.hero--lake{background:var(--lake-deep);color:var(--lake-mist);min-height:auto;padding:56px 0 58px}
.hero--lake h1{color:var(--warm-white)}
.hero--lake .tag{color:var(--signal)}
.hero--lake .thesis{border-top-color:var(--signal);color:var(--signal)}
.hero--lake .forecast{background:var(--lake);border-color:var(--lake-blue);color:var(--lake-mist)}
.hero--lake .forecast div{border-color:var(--lake-blue)}
.hero--lake .forecast strong{color:var(--warm-white)}

/* Edition 000 artwork: shown whole, never cropped */
.artwork{margin:0}
/* Poster is 1080x1350 (4:5). width+auto height means the box already matches the
   artwork, so object-fit:contain never has to letterbox or crop it. max-width keeps
   it from overwhelming wide screens. */
.artwork img{width:100%;height:auto;max-width:540px;object-fit:contain;object-position:center;background:var(--warm-white);border:1px solid var(--ink)}
.artwork figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted);max-width:46em}

/* plain track list for rooms without per-track platform links */
.tracks--plain .track{grid-template-columns:42px minmax(0,1fr)}

/* global room navigation */
.room-nav{background:var(--ink);color:var(--paper);font-size:10px;border-bottom:1px solid rgba(255,255,255,.25)}
.room-nav__in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:50px}
.room-nav__brand{text-decoration:none;color:var(--signal);font-weight:600}
.room-nav__links{display:flex;gap:16px;align-items:center}
.room-nav__links a{text-decoration:none}
.room-nav__links .pending{color:#8d8e86}
@media(max-width:699px){.room-nav__links{display:none}}

.mobile-nav{display:grid;grid-template-columns:1fr 1.15fr 1fr;position:fixed;z-index:80;left:10px;right:10px;bottom:10px;background:var(--ink);color:var(--paper);border:1px solid var(--paper);font-size:10px;box-shadow:0 8px 30px rgba(0,0,0,.24)}
.mobile-nav a,.mobile-nav span{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;border-right:1px solid rgba(255,255,255,.25);text-decoration:none}
.mobile-nav>*:last-child{border-right:0}
.mobile-nav .library{background:var(--signal);color:var(--ink)}
.mobile-nav .pending{color:#85877f}
@media(min-width:700px){.mobile-nav{display:none}}

/* hero */
.hero{position:relative;isolation:isolate;min-height:calc(100svh - 50px);display:grid;align-items:end;padding:40px 0 58px;background:var(--paper);overflow:hidden}
/* Room 001: the dashed field runs behind the whole composition, cat included.
   v0.6.0 extends it to the full hero height so it stays a continuous field
   under the taller title-and-cat layout. .hero>.wrap sits at z-index 1, so the
   title, the umbrella notation and the cat all render on top of it: the dashes
   never cut across the opaque fur, and stay visible through the transparent
   parts of the PNG. */
.hero__grid{position:absolute;z-index:0;inset:0;width:100%;height:100%;color:var(--lake-blue);opacity:.32;pointer-events:none}
.hero__grid path{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:11 17;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hero>.wrap{position:relative;z-index:1}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr)}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:28px}
.hero__title{position:relative}
/* v0.6.0: the umbrella was a 340px display glyph competing for the hero. It is
   now a small notation mark sitting above the title. The concept, the page
   title, and the whole "01 · The umbrella" section below are unchanged. */
.hero__umbrella{display:block;position:static;font-family:var(--body);font-size:clamp(30px,4.4vw,50px);line-height:1;color:var(--lake-blue);margin:0 0 4px}
.hero h1,.hero__sub{position:relative;z-index:1}
.hero__sub{display:grid;gap:20px;margin-top:30px;max-width:760px}
.hero__sub p{margin:0}

/* v0.6.0 — Room 001 hero subject. Photographic, no card, no badge, no shadow.
   The slight clockwise tilt reads as suspension; box-sizing means the inline
   padding reserves the slack the rotated bounding box needs, so the tail and
   paws never reach the gutter and the page never scrolls sideways. */
.hero__cat{justify-self:end;width:clamp(190px,54vw,320px);max-width:100%;padding:0 clamp(10px,3vw,22px);margin:22px 0 6px}
.hero__cat img{display:block;width:100%;height:auto;transform:rotate(8deg);transform-origin:58% 42%}
@media(min-width:700px) and (max-width:899px){
  .hero__cat{width:clamp(260px,42vw,380px);margin:26px 0 8px}
}
@media(min-width:900px){
  .hero__in{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr);
    grid-template-areas:"meta cat" "title cat" "sub cat" "forecast cat";
    column-gap:clamp(26px,4vw,60px);
    align-items:start;
  }
  .hero__meta{grid-area:meta}
  .hero__title{grid-area:title}
  .hero__sub{grid-area:sub}
  .hero .forecast{grid-area:forecast}
  .hero__cat{grid-area:cat;align-self:center;justify-self:end;width:100%;max-width:500px;margin:0;padding:0 clamp(12px,1.6vw,26px)}
  .hero h1{font-size:clamp(48px,8.6vw,128px)}
}
@media(prefers-reduced-motion:reduce){.hero__cat img{transform:none}}
.thesis{font-family:var(--mono);font-size:clamp(13px,2vw,18px);letter-spacing:.09em;text-transform:uppercase;line-height:1.5;border-top:2px solid var(--ink);padding-top:12px}

.forecast{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--ink);font-size:10px;margin-top:34px;background:var(--warm-white)}
.forecast div{padding:12px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.forecast div:nth-child(2n){border-right:0}
.forecast div:nth-last-child(-n+2){border-bottom:0}
.forecast strong{display:block;font-size:13px;letter-spacing:.03em;line-height:1.4;margin-top:5px}
@media(min-width:760px){.forecast{grid-template-columns:repeat(4,1fr)}.forecast div{border-bottom:0}.forecast div:nth-child(2n){border-right:1px solid var(--ink)}.forecast div:last-child{border-right:0}}

/* editorial grids */
.split{display:grid;gap:30px}
@media(min-width:860px){.split{grid-template-columns:minmax(190px,.65fr) minmax(0,1.6fr);gap:80px}.split__side{position:sticky;top:76px;align-self:start}}
.quote{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(24px,3.6vw,42px);line-height:1.24;margin:38px 0;padding:28px 0;border-top:2px solid;border-bottom:2px solid}
.notation{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.4vw,52px);line-height:1.16;margin:34px 0 0}
.notation span{background:var(--signal);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:.02em .09em}
.band--compact .split{gap:20px}
.band--compact .quote{margin:22px 0;padding:18px 0}
.band--compact .notation{margin-top:22px}
@media(min-width:860px){.band--compact .split{gap:56px}}

/* player — no player ships in this build; the shell styles are kept so a
   verified public playlist can be restored without a CSS change. */
.player-shell{border:1px solid var(--paper);padding:18px;background:#161614;margin:28px 0;color:var(--paper)}
.player-placeholder{min-height:280px;display:grid;place-items:center;text-align:center;padding:26px;background:repeating-linear-gradient(135deg,#111110 0 16px,#161614 16px 32px)}
.player-placeholder p{max-width:550px;margin:0 auto 18px}
.load-player{appearance:none;border:0;background:var(--signal);color:var(--ink);padding:14px 18px;font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.03em;cursor:pointer}
.direct-listen{display:inline-flex;max-width:100%;margin-top:12px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--signal)}
.primary-action{margin:22px 0 10px}
/* the primary button carries long sentence-case labels, so it uses Montserrat
   rather than uppercase mono. */
.direct-listen--primary{margin-top:0;background:var(--signal);color:var(--ink);border:1px solid var(--signal);padding:13px 18px;min-height:48px;align-items:center;text-decoration:none;font-family:var(--body);font-weight:600;font-size:15px;line-height:1.35;text-transform:none;letter-spacing:.01em}
.direct-listen--primary:hover{background:transparent;color:var(--signal)}
.band--signal .direct-listen--primary:hover,.band--mist .direct-listen--primary:hover{color:var(--ink)}

/* coordinates */
.coordinates{display:grid;align-items:start;gap:14px;margin-top:30px}
@media(min-width:720px){.coordinates{grid-template-columns:repeat(3,1fr)}}
.coordinate{position:relative;border:1px solid var(--ink);background:var(--warm-white);min-width:0}
.coordinate img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(100%);border-bottom:1px solid var(--ink);background:var(--paper-2)}
.coordinate__copy{padding:16px}
.coordinate__copy h3{font-size:21px;letter-spacing:-.01em;margin:0 0 5px}
.coordinate__copy>p{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase}
.coordinate__n{position:absolute;top:0;left:0;background:var(--signal);color:var(--ink);padding:5px 8px;font-family:var(--mono);font-size:11px;z-index:2}
.coordinate-intro{margin-top:14px;border-top:1px solid var(--ink)}
.coordinate-intro summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;list-style:none;cursor:pointer;font-family:var(--mono);font-size:10px;line-height:1.35;letter-spacing:.1em;text-transform:uppercase}
.coordinate-intro summary::-webkit-details-marker{display:none}
.coordinate-intro summary::after{content:"+";flex:0 0 auto;font-family:var(--mono);font-size:18px;line-height:1}
.coordinate-intro[open] summary::after{content:"−"}
.coordinate-intro__body{padding:2px 0 5px}
.coordinate-intro__body p{margin:0 0 15px;font-family:var(--body);font-size:14px;line-height:1.55;letter-spacing:0;text-transform:none}
.coordinate-intro__links{display:flex;flex-wrap:wrap;gap:7px}

/* career/practice timeline — selective chronology for comparison, not lineage */
.practice-map{margin-top:36px;padding-top:30px;border-top:1px solid var(--ink)}
.practice-map__head{display:grid;gap:16px;margin-bottom:24px}
.practice-map__head h3{margin:0}
.practice-map__method{max-width:720px;margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.practice-map__method strong{color:var(--ink)}
.practice-map__scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;background:var(--warm-white)}
.practice-map__table{width:100%;min-width:1080px;border-collapse:collapse;table-layout:fixed;border:1px solid var(--ink)}
.practice-map__table caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.practice-map__table th,.practice-map__table td{vertical-align:top;border-right:1px solid var(--line);border-bottom:1px solid var(--ink)}
.practice-map__table tr>*:last-child{border-right:0}
.practice-map__table tbody tr:last-child>*{border-bottom:0}
.practice-map__table thead th{height:48px;padding:8px 9px;background:var(--ink);color:var(--warm-white);font-family:var(--mono);font-size:9px;font-weight:400;line-height:1.25;letter-spacing:.08em;text-align:left;text-transform:uppercase}
.practice-map__table thead th strong,.practice-map__table thead th span{display:block;font:inherit}
.practice-map__table thead th span{margin-top:3px;color:#a7a99e}
.practice-map__table thead th:first-child{width:160px;color:var(--signal)}
.practice-map__table tbody th{padding:13px 11px;background:var(--paper);text-align:left}
.practice-map__table tbody th strong{display:block;font-family:var(--display);font-size:15px;line-height:1.3}
.practice-map__table tbody th span{display:block;margin-top:5px;font-family:var(--mono);font-size:8px;font-weight:400;line-height:1.45;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.practice-map__table tbody th em{display:block;margin-top:12px;padding-top:9px;border-top:1px solid var(--line);font-family:var(--mono);font-size:8px;font-weight:400;font-style:normal;line-height:1.45;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.practice-map__table td{padding:0;background:rgba(247,245,240,.7)}
.practice-map__event{min-height:126px;padding:12px 10px;border-left:5px solid transparent}
.practice-map__event+.practice-map__event{border-top:1px solid var(--line)}
.practice-map__event time{display:block;margin-bottom:7px;font-family:var(--mono);font-size:8px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.practice-map__event strong{display:block;font-family:var(--display);font-size:12px;line-height:1.38}
.practice-map__event span{display:block;margin-top:7px;font-size:10px;line-height:1.5;color:var(--muted)}
.practice-map__event--selected{border-left-color:var(--signal);background:rgba(240,226,15,.12)}
.practice-map__event--selected time{color:var(--ink)}
.practice-map__event--now{border-left-color:var(--lake-blue);background:rgba(184,217,229,.35)}
.practice-map__event--now time{color:var(--lake-blue)}
.practice-map__event--loss{border-left-color:var(--ink);background:var(--paper)}
.practice-map__reading{margin:12px 0 0;font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
@media(min-width:820px){
  .practice-map__head{grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);align-items:end}
  .practice-map__method{justify-self:end}
}
@media(max-width:699px){
  .practice-map{margin-top:30px;padding-top:24px}
  .practice-map__scroll{overflow:visible;background:transparent}
  .practice-map__table,.practice-map__table tbody,.practice-map__table tr{display:block;width:100%;min-width:0}
  .practice-map__table{border:0}
  .practice-map__table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .practice-map__table tbody{display:grid;gap:14px}
  .practice-map__table tr{border:1px solid var(--ink);background:var(--warm-white)}
  .practice-map__table tbody th{display:block;width:auto;border:0;border-bottom:1px solid var(--ink);padding:12px}
  .practice-map__table tbody th strong{font-size:17px}
  .practice-map__table tbody th span{font-size:9px}
  .practice-map__table tbody th em{font-size:9px}
  .practice-map__table td{display:none;height:auto;border:0;border-bottom:1px solid var(--ink)}
  .practice-map__table td:not(:empty){display:block}
  .practice-map__table td:not(:empty)::before{content:attr(data-period);display:block;padding:9px 11px;background:var(--ink);color:var(--signal);font-family:var(--mono);font-size:9px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase}
  .practice-map__table tbody tr:last-child td{border-bottom:1px solid var(--ink)}
  .practice-map__table td:last-child{border-bottom:0}
  .practice-map__event{min-height:0;padding:12px}
  .practice-map__event strong{font-size:14px}
  .practice-map__event span{font-size:12px}
}

/* track shelves */
.artist{padding:62px 0;border-top:1px solid var(--line)}
.artist--response{background-color:var(--response-bridge);background-image:linear-gradient(180deg,var(--response-blue) 0%,var(--response-bridge) 58%,var(--response-yellow) 100%)}
.artist--response .eyebrow,.artist--response .track__n{color:var(--muted-deep)}
.artist__head{display:grid;gap:18px;margin-bottom:28px}
@media(min-width:820px){.artist__head{grid-template-columns:1fr 1fr;align-items:end}.artist__head p{margin:0}}
.tracks{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.track{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:17px 0;border-bottom:1px solid var(--ink)}
@media(min-width:720px){.track{grid-template-columns:42px minmax(180px,1fr) 1.5fr;align-items:center}}
.track__n{font-family:var(--mono);font-size:10px;color:var(--muted)}
.track h4{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.32;margin:0;letter-spacing:-.005em}
.track__copy p{margin:5px 0 0;font-size:14px;line-height:1.45}
.platforms{display:flex;flex-wrap:wrap;gap:7px;grid-column:2}
@media(min-width:720px){.platforms{grid-column:auto;justify-content:flex-end}}
.platform{display:inline-flex;border:1px solid var(--ink);padding:5px 8px;font-size:10px;text-decoration:none;background:transparent}
.platform:hover{background:var(--ink);color:var(--warm-white)}
.is-external{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}

.callout{border:2px solid var(--ink);padding:24px;margin-top:30px;background:var(--orange);font-family:var(--display);font-weight:700;font-size:clamp(21px,3vw,34px);line-height:1.2}
#keep-open .callout{padding:18px;margin-top:18px;font-size:clamp(19px,2.4vw,28px)}
#keep-open .review-panel{margin-top:20px}
.closing-links{display:grid;border-top:1px solid rgba(247,245,240,.35)}
.closing-links a,.closing-links .pending{padding:17px 0;border-bottom:1px solid rgba(247,245,240,.35);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;display:block}
.closing-links a{color:var(--signal)}
.closing-links .pending{color:#a7a99e;cursor:default}
.credits{font-size:10px;line-height:1.7;color:#a7a99e;padding:30px 0 86px}

/* archive */
.archive-hero{position:relative;isolation:isolate;overflow:hidden;padding:74px 0 58px;min-height:70svh;display:grid;align-content:end;background:var(--signal)}
.archive-hero__copy{position:relative;z-index:2}
.archive-hero .eyebrow{padding-top:26px;border-top:1px dotted rgba(10,10,10,.5)}
.archive-hero__flower{position:absolute;z-index:1;right:clamp(-58px,-2.8vw,-18px);bottom:clamp(-92px,-5vw,-42px);width:clamp(300px,36vw,520px);pointer-events:none;user-select:none}
.archive-hero__flower img{width:100%;height:auto}
.archive-hero .lede,.archive-hero .small{position:relative;z-index:2}
@media(max-width:699px){
  .archive-hero{min-height:auto;padding-bottom:270px}
  .archive-hero__flower{right:-34px;bottom:-58px;width:250px}
}
.archive-grid{display:grid;gap:14px;margin-top:34px}
@media(min-width:760px){.archive-grid{grid-template-columns:repeat(2,1fr)}}
.room-card{display:grid;min-height:310px;padding:22px;border:1px solid var(--ink);background:var(--warm-white);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.room-card:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--ink)}
/* Room 001 carries a dashed field, the same notation idea as its hero grid. */
.room-card--current{background:var(--rain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%231D4F6B' stroke-width='1' stroke-dasharray='8 13' stroke-linecap='round' opacity='0.34'%3E%3Cpath d='M-40 20 L240 300'/%3E%3Cpath d='M40 -20 L300 240'/%3E%3Cpath d='M-40 120 L200 360'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top left}
.room-card--current .eyebrow,.room-card--current .small{color:var(--muted-deep)}
.room-card--lake{background:var(--lake-deep);color:var(--lake-mist)}
.room-card--lake h2,.room-card--lake .room-card__number{color:var(--warm-white)}
.room-card--lake .eyebrow{color:var(--lake-label)}
.room-card--pending{background:transparent;border-style:dashed;border-color:var(--muted);color:var(--muted)}
/* Room 000: present in the archive while its public Netlify page is restored. Must not read as clickable. */
.room-card--disabled{background:var(--warm-white);border-style:dashed;color:var(--muted);cursor:default}
.room-card--disabled:hover{transform:none;box-shadow:none}
.room-card--disabled h2,.room-card--disabled .room-card__number{color:var(--muted)}
.room-card__status{margin:10px 0 0;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);border-top:1px solid currentColor;padding-top:9px}
.room-card__number{font-family:var(--body);font-weight:800;font-size:80px;line-height:.85;letter-spacing:-.045em}
.room-card__bottom{align-self:end}
.room-card h2{font-size:clamp(25px,3.2vw,31px);line-height:1.14;margin:0 0 8px}
.room-card p{margin:0}

/* review-only layer */
[hidden]{display:none!important}
.reviewbar{position:sticky;top:0;z-index:90;background:var(--orange);color:var(--ink);border-bottom:2px solid var(--ink);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:10px var(--gut)}
.review-panel{background:var(--warm-white);border:2px solid var(--ink);padding:22px;margin-top:28px}
.review-panel ol{padding-left:22px;margin-bottom:0}
.review-panel li{padding:8px 0;border-bottom:1px solid var(--line)}
.review-panel li:last-child{border-bottom:0}
.review-panel code{overflow-wrap:anywhere;word-break:break-word}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.room-card{transition:none}}
/* Touch targets: applied through tablet widths, not just phones. Ordinary inline
   prose links are deliberately left alone (WCAG 2.5.8 exempts inline text links). */
@media(max-width:1024px){
  .platform{min-height:44px;align-items:center;padding:5px 11px}
  .closing-links a,.closing-links .pending{padding:15px 0;min-height:44px}
  .direct-listen{min-height:44px;align-items:center}
  .load-player{min-height:48px}
  .room-nav__brand,.room-nav__links a,.room-nav__links .pending{display:flex;align-items:center;min-height:44px}
  .mobile-nav a,.mobile-nav span{min-height:48px}
}
@media(max-width:699px){body{padding-bottom:70px}.band{padding-top:48px;padding-bottom:48px}.band--compact{padding-top:36px;padding-bottom:36px}.hero{min-height:auto;padding-top:56px}.hero__grid{height:100%;opacity:.26}.hero__grid path{stroke-dasharray:8 15}.coordinate img{aspect-ratio:4/3}.quote{margin:25px 0}.band--compact .quote{margin:20px 0}.artist{padding:50px 0}.archive-hero{padding-top:58px}}

/* =============================================================================
   04.64f — Listening Room hero, two-column with Derek in the stack
   =============================================================================
   The hero used to be "everything on the left, cat on the right", with Derek
   arriving as his own band near the foot of the page. The SVG study moved him
   up into the room itself, and the mobile order follows from that: metadata,
   title, what the project is, one falling cat, Derek, then the conditions and
   the forecast.

   The mechanism is a single .hero__side stack holding the cat and Derek. In one
   column it falls into the required reading order on its own; at 900px it
   becomes the right-hand column. No order properties, no duplicated markup, and
   nothing that needs JavaScript to sit in the right place.
   ========================================================================== */

.hero__side { display: grid; gap: clamp(26px, 4vw, 40px); min-width: 0; }
.hero__sub--lede { margin-top: 30px; }
.hero__sub--conditions { margin-top: clamp(26px, 4vw, 38px); }

@media (min-width: 900px) {
  .hero__in {
    grid-template-areas:
      "meta     side"
      "title    side"
      "lede     side"
      "conds    side"
      "forecast side";
  }
  .hero__sub--lede { grid-area: lede; }
  .hero__sub--conditions { grid-area: conds; }
  .hero__side { grid-area: side; align-self: start; justify-self: stretch; }
  /* inside the stack the cat is no longer a grid child of .hero__in */
  .hero__side .hero__cat {
    grid-area: auto; align-self: auto; justify-self: end;
    width: 100%; max-width: 440px; margin: 0; padding: 0 clamp(12px, 1.6vw, 26px);
  }
}

/* -----------------------------------------------------------------------------
   Derek's introduction

   Not a biography card. No avatar circle, no rounded box, no shadow: a rule, a
   name, a sentence, and a control that opens. The portrait is the collage Derek
   approved and it sits inside the introduction rather than above a credit line,
   which was the whole point of moving it.
   -------------------------------------------------------------------------- */

.derek-intro {
  position: relative;
  border-top: 2px solid var(--lake-blue);
  padding-top: clamp(14px, 2vw, 20px);
}

.derek-intro__portrait { margin: 0 0 clamp(14px, 2vw, 20px); }
.derek-intro__portrait img { display: block; width: 100%; height: auto; }

.derek-intro__name {
  margin: 0;
  font: 600 11px/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lake-blue);
}

.derek-intro__role {
  margin: 5px 0 0;
  font: 400 10px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .68;
}

.derek-intro__headline {
  margin: clamp(12px, 1.8vw, 18px) 0 0;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.14;
  letter-spacing: -.018em;
}

.derek-intro__standfirst {
  margin: 10px 0 0;
  font-family: var(--body);
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.58;
  max-width: 34ch;
}

/* --- the drawer ----------------------------------------------------------- */
/* <details> does the work. With JavaScript off it still opens, still keyboard
   operates, and still announces its state — which is the reason it is a
   <details> and not a scripted panel. */

.derek-intro__drawer { margin-top: clamp(16px, 2.2vw, 22px); }

.derek-intro__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 12px 15px;
  border: 1px solid var(--ink);
  background: var(--warm-white);
  font: 600 11px/1.2 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: background .14s ease, color .14s ease;
}

.derek-intro__summary::-webkit-details-marker { display: none; }
.derek-intro__summary::marker { content: ""; }

/* The cue is a cabinet state, not an arrow: closed reads as an insert slot,
   open reads as a pressed button. */
.derek-intro__summary::after {
  content: "▸";
  margin-left: auto;
  font-size: 13px;
  line-height: 1;
  transition: transform .16s ease;
}

.derek-intro__drawer[open] > .derek-intro__summary { background: var(--ink); color: var(--warm-white); }
.derek-intro__drawer[open] > .derek-intro__summary::after { transform: rotate(90deg); }

.derek-intro__summary:hover { background: var(--ink); color: var(--warm-white); }
.derek-intro__summary:focus-visible { outline: 3px solid var(--lake-blue); outline-offset: 2px; }

.derek-intro__panel {
  padding: clamp(16px, 2.2vw, 22px) 0 0;
  border-left: 2px solid var(--lake-blue);
  padding-left: clamp(14px, 2vw, 20px);
  margin-top: clamp(14px, 2vw, 18px);
}

.derek-intro__panel p {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.64;
}

.derek-intro__doors {
  list-style: none;
  margin: clamp(16px, 2.2vw, 22px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.derek-intro__door {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font: 600 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .14s ease, color .14s ease;
}

.derek-intro__door:hover,
.derek-intro__door:focus-visible { background: var(--ink); color: var(--warm-white); }

.derek-intro__foot {
  margin: clamp(16px, 2.2vw, 20px) 0 0;
  font: 400 10px/1.6 var(--mono);
  letter-spacing: .06em;
  opacity: .66;
}

/* Chassis surface keeps the same structure, inverted like every other band. */
html[data-surface="chassis"] .derek-intro__summary { background: transparent; color: inherit; border-color: currentColor; }
html[data-surface="chassis"] .derek-intro__door { color: inherit; border-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .derek-intro__summary,
  .derek-intro__summary::after,
  .derek-intro__door { transition: none; }
}

/* --- narrow viewports ------------------------------------------------------ */

@media (max-width: 899px) {
  /* One falling cat in the reader's field at a time. The decorative cat in the
     dark listening scene is aria-hidden ornament, so removing it on a phone
     costs nothing and stops it competing with the hero subject. */
  .falling-cat-scene .falling-cat { display: none; }

  .hero__side .hero__cat { justify-self: center; width: clamp(190px, 54vw, 320px); }
  .derek-intro__portrait { width: min(100%, 460px); margin-inline: auto; }
  .derek-intro__standfirst,
  .derek-intro__panel p { max-width: none; }
}

@media (max-width: 430px) {
  .derek-intro__summary { letter-spacing: .1em; padding: 12px 13px; }
  .derek-intro__doors { display: grid; gap: 8px; }
  .derek-intro__door { text-align: center; }
}