/* The player and the listening station . Built on the design system: the site's own tokens from :root, lines not boxes, nothing rounded, no icons but the
   CSS-drawn play triangle and pause bars, and the → glyph on forward calls to action.
   #station and #mini are added to the page by station.js. */

:root { --focus: #8fc1d4; }   /* the system's focus token (sky), which the other stylesheets don't declare */

/* ---------- play and pause: the only drawn marks, in currentColor ---------- */
.glyph-play, .glyph-pause { display: block; box-sizing: border-box; }
.glyph-play { width: 0; height: 0; border-style: solid; border-width: .5em 0 .5em .86em; border-color: transparent transparent transparent currentColor; margin-left: .14em; }
.glyph-pause { width: .78em; height: 1em; border-left: .28em solid currentColor; border-right: .28em solid currentColor; }
/* Play buttons show the triangle, or the bars while the music plays. */
.st-play .glyph-pause, .mini-play .glyph-pause,
#station[data-playing="true"] .st-play .glyph-play, #mini[data-playing="true"] .mini-play .glyph-play { display: none; }
#station[data-playing="true"] .st-play .glyph-pause, #mini[data-playing="true"] .mini-play .glyph-pause { display: block; }

/* ---------- the station ---------- */
#station {
  --ui-fade: 1.6s cubic-bezier(.22, .61, .36, 1);
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bone);
  font: 300 17px/1.7 var(--sans);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1), visibility 0s 1.4s;
}
#station[hidden] { display: none; }
html.in-station #station { opacity: 1; visibility: visible; transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1) .25s, visibility 0s; }
html.in-station { overflow: hidden; }

/* pages.js moves focus here after a page change, for screen readers. Safari would draw its ring round the whole page. */
body > main:focus { outline: none; }

/* The page beneath recedes, as if the house lights went down. */
body > header.nav, body > main, body > footer { transition: opacity 1.2s ease, filter 1.2s ease, transform 1.6s cubic-bezier(.22, .61, .36, 1); }
html.in-station body > main, html.in-station body > footer {
  opacity: 0; filter: blur(6px); transform: scale(.985);
}
/* The nav stays, over the visuals, and fades with the station's controls. */
html.in-station body > header.nav {
  z-index: 210; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: opacity 1.6s cubic-bezier(.22, .61, .36, 1);
}
html.in-station .nav .mark { opacity: 1; }
html.in-station .nav ul a[aria-current="true"] { color: var(--gold); }
html.in-station .nav ul a[aria-current="page"] { color: var(--bone-dim); border-color: transparent; }   /* you're here now, not there */
/* Only the logo stays, a little translucent, once the controls have gone. */
html.in-station body > header.nav ul, html.in-station body > header.nav .menu, html.in-station .nav .mark { transition: opacity 1.6s cubic-bezier(.22, .61, .36, 1); }
html.in-station:has(#station.idle) body > header.nav { pointer-events: none; }
html.in-station:has(#station.idle) body > header.nav ul, html.in-station:has(#station.idle) body > header.nav .menu { opacity: 0; }
html.in-station:has(#station.idle) .nav .mark { opacity: .6; }

/* The visuals. */
/* Each scene draws in a layer of its own; layers crossfade when the scene changes. */
@property --hold { syntax: "<number>"; inherits: true; initial-value: 1; }
#station .st-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s ease, --hold 1.6s cubic-bezier(.22, .61, .36, 1); }
#station .st-scene.on { opacity: 1; }
#station .st-scene > canvas { display: block; width: 100%; height: 100%; }
#station .st-scene > div, #station .st-scene > div > canvas { width: 100% !important; height: 100% !important; display: block; }
/* A Thunk Machine scene draws whatever its code draws, so it's held down near the top and the foot, where the
   station's words sit, on top of the scrim. When the words fade away, so does the hold (--hold 1 → 0). */
#station .st-scene[data-kind="thunk"] {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,calc(1 - .85 * var(--hold))) 0, #000 140px, #000 calc(100% - 360px), rgba(0,0,0,calc(1 - .88 * var(--hold))) calc(100% - 160px));
  mask-image: linear-gradient(180deg, rgba(0,0,0,calc(1 - .85 * var(--hold))) 0, #000 140px, #000 calc(100% - 360px), rgba(0,0,0,calc(1 - .88 * var(--hold))) calc(100% - 160px));
}
#station.idle .st-scene { --hold: 0; }
/* Shade at the top and bottom, where the words sit. */
#station .st-scrim {
  position: absolute; inset: 0; pointer-events: none; transition: opacity var(--ui-fade);
  background:
    linear-gradient(180deg, rgba(11,10,9,.86) 0, rgba(11,10,9,.5) 70px, rgba(11,10,9,0) 150px),
    linear-gradient(0deg, rgba(11,10,9,.94) 0, rgba(11,10,9,.86) 160px, rgba(11,10,9,.4) 270px, rgba(11,10,9,0) 370px);
}

/* The interface: minimal, and gone while you listen. */
#station .st-ui { position: absolute; inset: 0; transition: opacity var(--ui-fade); }
#station.idle .st-ui, #station.idle .st-scrim { opacity: 0; pointer-events: none; }   /* the shade goes with the words */
#station.idle { cursor: none; }
/* While the controls are gone, a small tag in the corner still says what's playing. */
#station .st-tag {
  position: absolute; left: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); max-width: min(560px, 72vw);
  pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8);   /* no box: a soft shadow keeps it legible */
  opacity: 0; transition: opacity var(--ui-fade);
}
#station.idle .st-tag { opacity: 1; }
#station .st-tag img { width: clamp(56px, 7vw, 112px); height: clamp(56px, 7vw, 112px); object-fit: cover; flex: none; }   /* not far off the cover's size with the controls showing */
#station .st-tag.mark-only img { object-fit: contain; background: var(--ink); border: 1px solid var(--rule); padding: 4px; }
#station .st-tag div { min-width: 0; }
#station .st-tag p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: .1em; }
#station .st-tag .t { font-family: var(--serif); font-size: clamp(14px, 1.3vw, 19px); line-height: 1.2; color: var(--bone); }
#station .st-tag .r { font-size: clamp(12px, 1vw, 14px); line-height: 1.4; color: var(--bone-dim); }

#station button, #station a, #mini button, #mini a { font: inherit; color: inherit; }
#station button, #mini button { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
#station :focus-visible, #mini :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
#station:focus { outline: none; }

/* Words for every control, set like the nav and text links. */
#station .st-chip, #station .st-link, #mini .mini-word {
  font-size: 12px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; text-decoration: none;
  color: var(--bone-dim); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .6s, border-color .6s;
}
#station .st-chip:hover, #station .st-link:hover, #mini .mini-word:hover { color: var(--bone); }
#station .st-chip[aria-pressed="true"], #station .st-link[aria-expanded="true"] { color: var(--bone); border-color: var(--gold); }
#station .st-link.buy, #mini .mini-immerse { color: var(--gold); }
#station .st-link.buy:hover, #mini .mini-immerse:hover { color: var(--bone); }
#station .st-link[hidden] { display: none; }


/* The system's eyebrow: 12px Jost, .32em, uppercase in the accent, after a 36px hairline. */
#station .st-eyebrow {
  font: 400 12px var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 14px; display: flex; align-items: center; gap: 16px;
}
#station .st-eyebrow::before { content: ""; flex: none; width: 36px; height: 1px; background: currentColor; opacity: .7; }

/* The first moment, when the music waits for a tap. */
#station .st-begin { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); }
#station .st-begin[hidden] { display: none; }
#station .st-begin button { display: grid; justify-items: center; gap: 26px; }
#station .st-begin .glyph-play { font-size: 40px; color: var(--gold); transition: color .8s; }
#station .st-begin button:hover .glyph-play { color: var(--bone); }
#station .st-begin .t { font-family: var(--serif); font-style: italic; font-weight: 350; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; color: var(--bone); }
#station .st-begin .k { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--bone-dim); }

/* Now playing, at the foot of the screen. */
#station .st-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "now" "transport";
  align-items: end; gap: 26px 40px; padding: 0 var(--gutter) clamp(40px, 7vh, 72px);
}
#station .st-now { grid-area: now; }
#station .st-now { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; min-width: 0; }
#station .st-cover { width: clamp(72px, 8vw, 128px); aspect-ratio: 1; margin: 0; background: var(--ink-3); overflow: hidden; }
#station .st-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
#station .st-cover.mark-only { display: grid; place-items: center; background: var(--ink); border: 1px solid var(--rule); }
#station .st-cover.mark-only img { width: 74%; height: auto; object-fit: contain; opacity: .85; }
#station .st-meta { min-width: 0; }
#station .st-title {
  font-family: var(--serif); font-weight: 350; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.08;
  margin: 0; padding-bottom: .14em; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* room for g and y below the clip */
}
#station .st-release { margin: 4px 0 0; padding-bottom: .15em; line-height: 1.5; font-size: 18px; color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#station .st-release[hidden] { display: none; }
/* The artist, under the album. */
#station .st-artist { margin: 6px 0 0; font-family: var(--serif); font-size: 17px; letter-spacing: .02em; color: var(--bone); }
#station .st-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 10px; }

/* The transport: the scrubber at the left with the time at its ends, the buttons in the middle, the volume at the right. */
#station .st-transport {
  grid-area: transport;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 clamp(28px, 4vw, 56px);
}
#station .st-scrub, #station .st-loud { display: flex; align-items: center; gap: 22px; min-width: 0; }
#station .st-scrub .st-seek { flex: 1; }
#station .st-loud { justify-content: flex-end; }
#station .st-loud .st-volume { flex: 0 1 220px; }
#station .st-buttons { display: flex; align-items: center; gap: 38px; }
/* A speaker: a small block and its cone. */
.glyph-vol { display: flex; align-items: center; height: 1em; font-size: 22px; color: var(--bone-dim); }
.glyph-vol::before { content: ""; width: .28em; height: .4em; background: currentColor; }
.glyph-vol::after { content: ""; width: 0; height: 0; border-style: solid; border-width: .42em .38em .42em 0; border-color: transparent currentColor transparent transparent; margin-left: -.04em; }
#station .st-play {
  width: 84px; height: 84px; display: grid; place-items: center; font-size: 22px; color: var(--bone);
  border: 1px solid var(--bone-dim) !important; border-radius: 50%; transition: border-color .6s;
}
#station .st-play:hover { border-color: var(--gold) !important; }
#station .st-play .glyph-play { margin-left: .18em; }
#station .st-skip { width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; color: var(--bone); transition: color .6s; }
#station .st-skip:hover { color: var(--gold); }
#station .st-buttons::before { content: ""; width: 40px; }   /* balances the loop button, so play stays centred */
#station .st-loop { color: var(--bone-dim); }
#station .st-loop[aria-pressed="true"] { color: var(--gold); }
.glyph-loop { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.glyph-loop text { fill: currentColor; stroke: none; font: 500 8px/1 var(--sans, sans-serif); }
/* Next: a triangle and a bar; previous is the same, turned round. */
.glyph-skip { display: flex; align-items: center; height: 1em; }
.glyph-skip::before { content: ""; width: 0; height: 0; border-style: solid; border-width: .45em 0 .45em .74em; border-color: transparent transparent transparent currentColor; }
.glyph-skip::after { content: ""; width: .14em; height: .9em; background: currentColor; }
#station .st-skip.prev .glyph-skip { transform: scaleX(-1); }
#station .st-time { font-size: 13px; letter-spacing: .08em; color: var(--bone-dim); font-variant-numeric: tabular-nums; min-width: 3.4em; }
#station .st-time.len { text-align: right; }

/* A hairline across the foot of the screen: the piece's progress, and a way to move through it. */
#station .st-range {
  width: 100%; height: 24px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  --p: 0%;
}
#station .st-range::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--gold) var(--p), var(--rule) var(--p)); }
#station .st-range::-moz-range-track { height: 1px; background: linear-gradient(90deg, var(--gold) var(--p), var(--rule) var(--p)); }
#station .st-range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4.5px; border-radius: 50%; background: var(--gold); }
#station .st-range::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--gold); }

/* Liner notes and the pieces: ink sheets with hairline edges, rising from the foot. */
#station .st-sheet {
  position: absolute; bottom: var(--sheet-bottom, 200px); max-height: min(58vh, 560px);
  width: min(560px, calc(100% - 2 * var(--gutter))); overflow: auto; overscroll-behavior: contain;
  padding: 32px 34px 34px; background: var(--ink); border: 1px solid var(--rule);
  opacity: 0; transform: translateY(12px); visibility: hidden;
  transition: opacity .7s ease, transform .9s cubic-bezier(.22, .61, .36, 1), visibility 0s .9s;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
#station .st-sheet.open { opacity: 1; transform: none; visibility: visible; transition: opacity .7s ease, transform .9s cubic-bezier(.22, .61, .36, 1), visibility 0s; }
/* Liner notes: a wide panel across the foot; the player rises above it. */
#station .st-notes {
  left: var(--gutter); right: var(--gutter); bottom: 24px; width: auto; height: min(46vh, 320px); max-height: none; overflow: hidden;
  display: grid; grid-template-columns: minmax(320px, 1fr) auto auto; grid-template-rows: minmax(0, 1fr); grid-template-areas: "text facts visual"; align-items: start; gap: 0;
  padding: 30px 56px 30px 34px; background: rgba(11, 10, 9, .94);
}
#station .st-bar { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
#station.notes-open .st-bar { transform: translateY(calc(-1 * var(--notes-h, 0px) - 12px)); }
#station .st-notes-text { grid-area: text; align-self: stretch; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 36px;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
#station .st-notes-text .st-eyebrow { margin-bottom: 14px; }
#station .st-notes-text p:not(.st-eyebrow) { font-size: 15px; line-height: 1.65; }
#station .st-facts { grid-area: facts; display: flex; margin: 30px 0 0; padding: 0 0 0 4px; }
#station .st-facts > div { padding: 0 22px; border-left: 1px solid var(--rule); max-width: 190px; }
#station .st-facts dt { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 8px; }
#station .st-facts dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--bone); }
#station .st-visual { grid-area: visual; margin: 0; padding-left: 28px; border-left: 1px solid var(--rule); text-align: center; }
#station .st-visual canvas { display: block; width: 180px; height: auto; aspect-ratio: 5 / 3; background: var(--ink); border: 1px solid var(--rule); }
@media (max-width: 1180px) {
  #station .st-notes { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "text visual" "facts visual"; }
  #station .st-facts { margin: 22px 0 0; padding: 0; }
  #station .st-facts > div:first-child { border-left: 0; padding-left: 0; }
}
#station .st-visual figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .06em; color: var(--bone-dim); }
#station .st-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; color: var(--bone-dim); transition: color .6s; }
#station .st-close:hover { color: var(--bone); }
#station .st-close::before, #station .st-close::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg);
}
#station .st-close::after { transform: rotate(-45deg); }
#station .st-pieces { right: var(--gutter); top: 84px; bottom: auto; max-height: calc(100% - 84px - var(--sheet-bottom, 200px)); width: min(420px, calc(100% - 2 * var(--gutter))); padding: 28px 0 14px; transform: translateY(-12px); }   /* hangs from Music */
#station .st-sheet h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; margin: 0 0 18px; color: var(--bone); }
#station .st-sheet p { color: var(--bone-dim); margin: 0 0 1.2em; max-width: none; }
#station .st-pieces .st-eyebrow { padding: 0 30px 6px; }
#station .st-pieces ol { list-style: none; margin: 0; padding: 0; }
#station .st-pieces li + li { border-top: 1px solid var(--rule); }
#station .st-pieces li button {
  width: 100%; display: grid; grid-template-columns: 2.2em 1fr auto; gap: 12px; align-items: baseline;
  padding: 12px 30px; text-align: left; color: var(--bone-dim); transition: color .6s;
}
#station .st-pieces li button:hover, #station .st-pieces li button[aria-current="true"] { color: var(--bone); }
#station .st-pieces li button[aria-current="true"] .n { color: var(--gold); }
#station .st-pieces .n { font-size: 12px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
#station .st-pieces .t { font-family: var(--serif); font-size: 17px; line-height: 1.2; }
#station .st-pieces .t small { display: block; font-family: var(--sans); font-size: 12px; color: var(--bone-dim); margin-top: 3px; }
#station .st-pieces .d { font-size: 12px; font-variant-numeric: tabular-nums; }

#station .st-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- the player: a compact block docked at the bottom left of every page, ink with a hairline edge ---------- */
#mini {
  position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 90;
  width: min(560px, calc(100vw - 24px));
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 0 16px;
  padding: 11px 16px 11px 11px;
  background: rgba(11, 10, 9, .95); border: 1px solid rgba(236, 229, 216, .14); border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);   /* lifted off the page, so what passes behind it stays behind it */
  color: var(--bone); font: 300 17px/1.7 var(--sans);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
#mini .mini-up { display: none; color: var(--gold); }
#mini[data-lowered="true"] .mini-up { display: block; animation: mini-up-breathe 2.8s ease-in-out infinite; }
@keyframes mini-up-breathe { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #mini[data-lowered="true"] .mini-up { animation: none; } }
html.quiet #mini[data-lowered="true"] .mini-up { animation: none; }
#mini[data-lowered="true"] .mini-next { display: none; }
html.in-station #mini {
  opacity: 0; transform: translateY(18px); visibility: hidden; pointer-events: none;
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1), visibility 0s 1.1s;
}
/* The piece's progress, in gold along the top hairline. */
#mini .mini-progress { position: absolute; left: 0; right: 0; top: 0; height: 1px; }
#mini .mini-progress i { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s linear; }
/* The cover and the names together: a link to the album in the discography. */
#mini .mini-about { grid-column: span 2; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 0 16px; min-width: 0; text-decoration: none; }
#mini .mini-about[href]:hover .mini-t { color: var(--gold); }
#mini .mini-art { width: 44px; height: 44px; background: var(--ink-3); overflow: hidden; border-radius: 6px; }
#mini .mini-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mini .mini-art.mark-only { display: grid; place-items: center; background: var(--ink); border: 1px solid var(--rule); }
#mini .mini-art.mark-only img { width: 78%; height: auto; opacity: .85; }
#mini .mini-text { display: grid; min-width: 0; line-height: 1.25; }
#mini .mini-t, #mini .mini-r { padding-bottom: .12em; text-wrap: balance; }   /* a long name turns to a second line, never cut off */
#mini .mini-t { font-family: var(--serif); font-size: 16px; line-height: 1.1; font-weight: 400; color: var(--bone); transition: color .6s; }
#mini .mini-r { font-size: 12px; color: var(--bone-dim); }
#mini .mini-play {
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 12px;
  border: 1px solid var(--bone-faint) !important; border-radius: 8px !important; transition: border-color .6s;
}
#mini .mini-play:hover { border-color: var(--gold) !important; }

/* Room at the foot of every page, so the player never sits over the last of it. */
body { padding-bottom: 96px; }

/* Moving between pages: the page dips for a moment while the next one is put in. */
html.turning body > main, html.turning body > footer { opacity: 0; transition: opacity .25s ease; }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  #mini { left: 10px; right: 10px; bottom: 10px; width: auto; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 0 14px; padding: 10px 14px 10px 10px; }
  #mini .mini-about { grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; }
  #mini .mini-art { width: 40px; height: 40px; }
  #mini .mini-t { font-size: 18px; }
  #mini .mini-next { display: none; }
  #mini .mini-immerse { letter-spacing: .18em; }
  body { padding-bottom: 80px; }
  #station .st-bar { grid-template-columns: 1fr; grid-template-areas: "now" "transport"; gap: 16px; padding-bottom: 40px; }
  #station .st-now { grid-template-columns: 64px 1fr; gap: 0 16px; align-items: center; }
  #station .st-cover { width: 64px; grid-row: 1 / span 4; }
  #station .st-meta { display: contents; }
  #station .st-now .st-eyebrow, #station .st-title, #station .st-release, #station .st-artist { grid-column: 2; }
  #station .st-now .st-eyebrow { margin-bottom: 6px; }
  #station .st-title { font-size: 24px; }
  #station .st-release { font-size: 15px; }
  #station .st-artist { font-size: 18px; }
  #station .st-links { grid-column: 1 / -1; margin-top: 14px; }
  #station .st-transport { grid-template-columns: 1fr; gap: 10px; }
  #station .st-buttons { grid-row: 1; justify-self: center; gap: 18px; }
  #station .st-play { width: 64px; height: 64px; font-size: 18px; }
  #station .st-scrub { gap: 14px; }
  #station .st-loud { display: none; }               /* a phone has its own volume buttons */
  #station .st-sheet { left: var(--gutter); right: var(--gutter); width: auto; max-height: 52vh; padding: 24px 22px 26px; }
  #station .st-pieces { padding: 22px 0 10px; top: 64px; max-height: calc(100% - 64px - var(--sheet-bottom, 200px)); }
  /* On a phone the notes stack and cover the player; the cross closes them. */
  #station .st-notes { bottom: 12px; height: auto; max-height: 72vh; overflow: auto; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "text" "facts" "visual"; padding: 26px 22px; }
  #station .st-notes-text { overflow: visible; }
  #station.notes-open .st-bar { transform: none; opacity: 0; pointer-events: none; }
  #station .st-bar { transition: opacity .6s; }
  #station .st-notes-text { padding-right: 24px; }
  #station .st-facts { flex-wrap: wrap; margin: 22px 0 0; gap: 16px 0; }
  #station .st-facts > div { padding: 0 18px 0 0; border-left: 0; min-width: 40%; }
  #station .st-visual { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 22px; }
  #station .st-visual canvas { width: 100%; }
  #station .st-pieces li button { padding: 11px 22px; }
  #station .st-pieces .st-eyebrow { padding: 0 22px 6px; }
  #station .st-scrim {
    background:
      linear-gradient(180deg, rgba(11,10,9,.86) 0, rgba(11,10,9,.5) 60px, rgba(11,10,9,0) 130px),
      linear-gradient(0deg, rgba(11,10,9,.95) 0, rgba(11,10,9,.88) 270px, rgba(11,10,9,.4) 380px, rgba(11,10,9,0) 480px);
  }
}

/* ---------- stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  #station, html.in-station #station, #station .st-scene, #station .st-sheet { transition-duration: .4s; transition-delay: 0s; }
  #station .st-sheet { transform: none; }
  body > header.nav, body > main, body > footer { transition: opacity .4s ease; }
  html.in-station body > header.nav, html.in-station body > main, html.in-station body > footer { filter: none; transform: none; }
  #mini, html.in-station #mini { transform: none; }
}
html.quiet body > header.nav, html.quiet body > main, html.quiet body > footer { transition: opacity .6s ease; }
html.quiet.in-station body > header.nav, html.quiet.in-station body > main, html.quiet.in-station body > footer { filter: none; transform: none; }

/* Holds the first paint dark until station.js has decided about the sound question, so the page can't pop up first.
   It lets go by itself if the script never arrives. */
html:not(.veil-done)::before { content: ""; position: fixed; inset: 0; z-index: 299; background: rgb(11, 10, 9); animation: veil-lets-go 0s linear 4s forwards; }
@keyframes veil-lets-go { to { visibility: hidden; } }

/* ---------- the sound question: a night sky, up before the page shows, with the words above the horizon ---------- */
#sound {
  position: fixed; inset: 0; z-index: 300; overflow: hidden;
  display: grid; place-items: center; padding: 0 var(--gutter);   /* no padding at the foot: Safari would size the image to what's left */
  background: rgb(11, 10, 9);                           /* nothing moving on the page can show through */
  color: var(--bone);
  transition: opacity 2.8s cubic-bezier(.45, 0, .55, 1);
}
#sound.gone { opacity: 0; pointer-events: none; }
#sound:focus { outline: none; }
#sound .sound-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; opacity: 0; transition: opacity 1.6s ease; animation: sound-drift 70s ease-in-out infinite alternate; transform-origin: 50% 68%; filter: brightness(.56) saturate(1.1); }   /* dimmed all over, so the words read over the moving lights */
#sound .sound-sky.seen { opacity: 1; }
@keyframes sound-drift { to { transform: scale(1.05); } }
#sound canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#sound .sound-panel { position: relative; isolation: isolate; width: min(900px, 100%); margin-bottom: 25vh; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* Every line bright with a tight dark edge, and the button filled in a paler gold that stands clear of the orange in the projections. */
#sound .sound-who { display: block; width: clamp(170px, min(24vw, 36vh), 320px); height: auto; opacity: .8; filter: drop-shadow(0 1px 3px rgba(8, 6, 20, .9)) drop-shadow(0 0 18px rgba(8, 6, 20, .7)); }   /* the wordmark, Steve's own lettering */
#sound .sound-rule { width: 96px; height: 1px; flex: none; background: linear-gradient(90deg, transparent, #ffdfa6 50%, transparent); }
#sound .sound-who + .sound-rule { margin-top: clamp(14px, 2.6vh, 24px); }
#sound .sound-q {
  margin: clamp(18px, 4.4vh, 44px) 0 0; padding: 0 .12em .12em; font: italic 350 clamp(25px, min(3.6vw, 6.3vh), 54px)/1.08 var(--serif);   /* the wordmark leads; this answers it */
  color: #fffaf1; filter: drop-shadow(0 2px 3px rgba(8, 6, 20, .55)) drop-shadow(0 0 22px rgba(8, 6, 20, .6));
}
#sound .sound-q span { padding-right: .12em; background: linear-gradient(100deg, #ffe4b0, #f5c478); -webkit-background-clip: text; background-clip: text; color: transparent; }
#sound .sound-d { margin: clamp(6px, 1.4vh, 14px) 0 0; font: 500 clamp(10px, min(1.25vw, 2vh), 16px)/1.7 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #f7f1e5; text-shadow: 0 1px 3px rgba(8, 6, 20, .9), 0 0 16px rgba(8, 6, 20, .8); }
#sound .sound-a { display: flex; flex-direction: column; align-items: center; margin-top: clamp(18px, 4.4vh, 48px); }
/* The words arrive one after another. */
#sound .sound-head, #sound .sound-q, #sound .sound-d, #sound .sound-a { opacity: 0; transform: translateY(12px); transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.22, .61, .36, 1); }
#sound.on .sound-head, #sound.on .sound-q, #sound.on .sound-d, #sound.on .sound-a { opacity: 1; transform: none; }
#sound.on .sound-head { transition-delay: .2s; }
#sound.on .sound-q { transition-delay: .5s; }
#sound.on .sound-d { transition-delay: .95s; }
#sound.on .sound-a { transition-delay: 1.35s; }
#sound .sound-head { position: relative; display: flex; flex-direction: column; align-items: center; }
/* The concert's dome is bright where the name sits: a faint shade behind it. */
#sound .sound-head::before { content: ""; position: absolute; z-index: -1; inset: -90% -18%; background: radial-gradient(closest-side, rgba(11, 10, 9, .42), rgba(11, 10, 9, .24) 55%, rgba(11, 10, 9, 0)); pointer-events: none; }
#sound button { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; font-family: var(--sans); text-transform: uppercase; }
#sound .yes { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 20px); padding: 6px 12px; font-size: clamp(12px, min(1.2vw, 2vh), 16px); font-weight: 500; letter-spacing: .34em; color: #ffe4b0; text-shadow: 0 1px 3px rgba(8, 6, 20, .95), 0 0 16px rgba(8, 6, 20, .85); transition: color .6s; }
#sound .disc { position: relative; display: grid; place-items: center; width: clamp(62px, 10vh, 92px); aspect-ratio: 1; border: 1.5px solid #ffe9c2; border-radius: 50%; background: linear-gradient(160deg, #ffe7ba, #f3bf72); box-shadow: 0 2px 14px rgba(8, 6, 20, .6), 0 0 34px rgba(255, 216, 150, .5); transition: background .6s, box-shadow .6s; }
#sound .disc svg { width: 26%; height: 26%; margin-left: 5%; fill: rgb(20, 14, 30); transition: fill .6s; }
/* hairlines going out from the button, either side */
#sound .disc::before, #sound .disc::after { content: ""; position: absolute; top: 50%; width: clamp(70px, 14vw, 190px); height: 1px; transition: width .9s cubic-bezier(.22, .61, .36, 1); }
#sound .disc::before { right: calc(100% + 20px); background: linear-gradient(270deg, #ffdfa6, transparent); }
#sound .disc::after { left: calc(100% + 20px); background: linear-gradient(90deg, #ffdfa6, transparent); }
#sound .yes:hover { color: #fff3da; }
#sound .yes:hover .disc { background: rgba(11, 10, 9, .55); box-shadow: 0 0 40px rgba(255, 216, 150, .7); }
#sound .yes:hover .disc svg { fill: #ffe4b0; }
#sound .yes:hover .disc::before, #sound .yes:hover .disc::after { width: clamp(90px, 18vw, 250px); }
#sound .no { margin-top: clamp(12px, 2.8vh, 28px); padding: 6px 12px; font-size: clamp(10px, min(1vw, 1.7vh), 13px); font-weight: 500; letter-spacing: .24em; color: #f1eadd; text-shadow: 0 1px 3px rgba(8, 6, 20, .95), 0 0 14px rgba(8, 6, 20, .85); transition: color .6s; }
#sound .no:hover { color: #fff; }
#sound .no + .sound-rule { margin-top: 6px; opacity: .7; }
#sound button:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
@media (max-width: 560px) {
  #sound .sound-panel { margin-bottom: 28vh; }
  #sound .sound-sky { object-position: 47% 70%; }   /* Steve stays in the picture, in the middle of the narrow crop */
  #sound .sound-q { font-size: clamp(30px, 9vw, 40px); }
  #sound .sound-d { max-width: 22em; letter-spacing: .24em; }
  #sound .disc::before, #sound .disc::after { width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  #sound, #sound .sound-sky, #sound .sound-head, #sound .sound-q, #sound .sound-d, #sound .sound-a { transition: none; transform: none; animation: none; }
}
html.quiet #sound, html.quiet #sound .sound-sky, html.quiet #sound .sound-head, html.quiet #sound .sound-q, html.quiet #sound .sound-d, html.quiet #sound .sound-a { transition: none; transform: none; animation: none; }

/* ---------- the foot of the page: the footer's row, then a bar of its own for the copyright and credits ---------- */
body:has(> footer) { padding-bottom: 0; }   /* the player's room moves into the footer, so the fade reaches the very bottom */
body > footer { padding-bottom: 128px; background: linear-gradient(180deg, transparent, #000 85%); }
@media (max-width: 700px) { body > footer { padding-bottom: 136px; } }
@media (min-width: 861px) {
  body > footer > .wrap:first-child { grid-template-columns: auto 1fr; }
  body > footer > .wrap:first-child nav { justify-content: flex-end; }
}
body > footer .foot-bar { margin-top: 48px; padding: 0; }
body > footer .foot-bar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 40px; }
body > footer .foot-bar small { font-size: 11px; line-height: 1.6; letter-spacing: .08em; color: var(--bone-faint); }
@media (max-width: 860px) { body > footer .foot-bar .wrap { justify-content: center; text-align: center; } }

/* ---------- the nav and the player keep layers of their own for good. Sharing one, they were rebuilt whenever
   something beneath them started or stopped animating, and could miss a frame: a flash. ---------- */
body > header.nav, #mini, #mini .mini-progress i { will-change: transform; }

/* ---------- the nav: tighter before it becomes a menu, and the logo keeps its size ---------- */
body > header.nav .mark { flex: none; }
@media (min-width: 861px) and (max-width: 1180px) {
  body > header.nav ul { gap: 14px; }
  body > header.nav ul a { letter-spacing: .18em; }
  body > header.nav .wrap > a:first-child { flex: none; margin-right: 16px; }
}

/* ---------- Immerse is a mode, not a place: a small ring that breathes while the sound is on ---------- */
body > header.nav ul { align-items: center; }
body > header.nav ul a.nav-immerse { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); }
body > header.nav ul a.nav-immerse::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid var(--gold); transition: background .6s;
}
body:has(#mini[data-playing="true"]) header.nav ul a.nav-immerse::before { background: var(--gold); }
/* The breath is a ring of its own that only scales and fades, so the nav is never repainted for it. */
body > header.nav ul a.nav-immerse { position: relative; }
body:has(#mini[data-playing="true"]) header.nav ul a.nav-immerse::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid var(--gold); pointer-events: none; animation: nav-breathe 4.2s ease-out infinite;
}
@keyframes nav-breathe {
  0% { transform: scale(1); opacity: .6; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}
html.quiet body header.nav ul a.nav-immerse::after { display: none; }
@media (prefers-reduced-motion: reduce) { body header.nav ul a.nav-immerse::after { display: none; } }

/* ---------- Exclusive is set apart at the end, in gold ---------- */
body > header.nav ul a.nav-exclusive {
  display: inline-block; margin-left: clamp(4px, 1vw, 16px); padding: 9px 12px 9px 15px;
  border: 1px solid rgba(201, 164, 106, .6); color: var(--gold);
  transition: color .6s, background .6s, border-color .6s;
}
body > header.nav ul a.nav-exclusive:hover { background: var(--gold); border-color: var(--gold); color: rgb(11, 10, 9); }
@media (max-width: 860px) {
  body > header.nav ul { align-items: flex-start; }
  body > header.nav ul a.nav-exclusive { margin: 6px 0 0; }
}

/* ---------- a browser's autofill keeps the page's colours, not its own pale box ---------- */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--ink) inset !important;
  -webkit-text-fill-color: var(--bone) !important;
  caret-color: var(--bone);
  transition: background-color 99999s;
}

/* ---------- Bandcamp's players: translucent black with a border ----------
   The embeds only offer a grey or a white theme. They ask for white, with each link colour's lightness turned
   over, and are inverted here: true black, light text, the colours back as they should be. The border is
   inverted too, so its light grey shows dark. */
iframe[src*="bandcamp.com/EmbeddedPlayer"] { box-sizing: border-box; border: 1px solid rgb(190, 190, 190); filter: invert(1) hue-rotate(180deg); opacity: .82; }

/* ---------- The phone menu: the words large, in the serif, over the Timeroom's rings; the page goes dim behind ---------- */
@media (max-width: 860px) {
  html::after { content: ""; position: fixed; inset: 0; z-index: 94; background: rgba(5, 4, 3, .78); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
  html:has(body > header.nav.open)::after { opacity: 1; pointer-events: auto; }
  html:not(.in-station) body > header.nav.open { z-index: 95; }
  body:has(> header.nav.open) { overflow: hidden; }
  body > header.nav.open ul {
    gap: 14px; max-height: calc(100dvh - 76px); overflow-y: auto;
    padding: 28px var(--gutter) 44px;
    background:
      radial-gradient(ellipse 85% 60% at 100% 45%, rgba(201, 164, 106, .13), transparent 70%),
      repeating-radial-gradient(circle at 118% 45%, rgba(201, 164, 106, .09) 0 1px, transparent 1px 14px),
      rgb(11, 10, 9);
    border-bottom: 1px solid rgba(201, 164, 106, .35);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .7);
    animation: menu-open .55s cubic-bezier(.22, .61, .36, 1) both;
  }
  body > header.nav.open ul::before { content: "Explore the Soundworlds"; margin-bottom: 6px; font: 400 11px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
  body > header.nav.open ul li { animation: menu-word .7s cubic-bezier(.22, .61, .36, 1) both; }
  body > header.nav.open ul li:nth-child(2) { animation-delay: .05s; }
  body > header.nav.open ul li:nth-child(3) { animation-delay: .1s; }
  body > header.nav.open ul li:nth-child(4) { animation-delay: .15s; }
  body > header.nav.open ul li:nth-child(5) { animation-delay: .2s; }
  body > header.nav.open ul li:nth-child(6) { animation-delay: .25s; }
  body > header.nav.open ul li:nth-child(7) { animation-delay: .3s; }
  body > header.nav.open ul li:nth-child(8) { animation-delay: .35s; }
  body > header.nav.open ul a { padding: 2px 0; border: 0; font: 350 clamp(24px, 7.1vw, 30px)/1.15 var(--serif); letter-spacing: .005em; text-transform: none; color: var(--bone); }
  body > header.nav.open ul a[aria-current] { font-style: italic; color: var(--gold); }
  body > header.nav.open ul a.nav-immerse { font-style: italic; gap: 14px; }
  body > header.nav.open ul a.nav-exclusive { margin: 12px 0 0; padding: 12px 22px; border: 1px solid var(--gold); font: 400 12px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
  /* The button is a plain hamburger, its lines crossing into an X when open. Its word stays in the markup, unseen, as its name for screen readers. */
  body > header.nav .menu {
    position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; font-size: 0; letter-spacing: 0;
    background: linear-gradient(currentColor, currentColor) center / 24px 1.5px no-repeat; transition: background-size .2s ease;
  }
  body > header.nav .menu::before, body > header.nav .menu::after {
    content: ""; position: absolute; left: 10px; top: 21.25px; width: 24px; height: 1.5px; background: currentColor;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  body > header.nav .menu::before { transform: translateY(-7px); }
  body > header.nav .menu::after { transform: translateY(7px); }
  body > header.nav .menu[aria-expanded="true"] { background-size: 0 1.5px; }
  body > header.nav .menu[aria-expanded="true"]::before { transform: rotate(45deg); }
  body > header.nav .menu[aria-expanded="true"]::after { transform: rotate(-45deg); }
  body > header.nav .menu:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  @keyframes menu-open { from { opacity: 0; transform: translateY(-10px); } }
  @keyframes menu-word { from { opacity: 0; transform: translateY(10px); } }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  body > header.nav.open ul, body > header.nav.open ul li { animation: none; }
  body > header.nav .menu, body > header.nav .menu::before, body > header.nav .menu::after { transition: none; }
}

/* The credits link to their people and tools, without underlines. */
#station .st-visual figcaption a, .foot-credits a { color: inherit; text-decoration: none; border: 0; transition: color .3s; }
#station .st-visual figcaption a:hover, #station .st-visual figcaption a:focus-visible, .foot-credits a:hover, .foot-credits a:focus-visible { color: var(--bone); }