/* Shared structure for everything after the hero. Deliberately plain:
   visual design of individual sections happens in css/sections/. */

/* Hidden on screen, still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── DEV PLACEHOLDERS ──────────────────────────────────────────────────── */

.ph {
  width: 100%;
  height: 100%;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px dashed rgba(240, 236, 228, 0.35);
  background: rgba(13, 17, 23, 0.55);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
  padding: 8px;
}

.ph-kind { color: var(--fg); }
.ph-label { text-transform: none; letter-spacing: 0.06em; }

/* Progress bar inside DIAGRAM placeholders — shows the scroll mapping. */
.ph-bar { width: 60%; height: 2px; background: var(--rule); margin-top: 6px; }
.ph-bar i { display: block; height: 100%; width: calc(var(--ill-progress, 0) * 100%); background: var(--fg); }

/* Label strip over a dev test-pattern video. */
.frag > video + .ph {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  height: auto;
  min-height: 0;
  border: none;
  flex-direction: row;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.7);
}

/* ─── MEDIA FRAGMENT ────────────────────────────────────────────────────── */

.frag {
  position: relative;
  margin: 0;
  aspect-ratio: var(--ratio, 16 / 9);
  background: rgba(0, 0, 0, 0.35);
}

.frag img,
.frag video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frag figcaption {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  margin-top: 6px;
}

/* ─── JOURNEY SECTION ───────────────────────────────────────────────────── */

/* Positioning hooks, all optional, set per fragment in css/sections/:
     --x --y --w     left / top / width within the stage
     --ratio         aspect ratio (default 16/9)
     --depth         placeholder drift strength (0 = none, negative = drift down)
     --z             stacking
   Or just write left/top/width/transform directly — nothing depends on
   the variables. */

.journey {
  position: relative;
  height: calc(var(--length, 1) * 100vh);
}

.journey-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.journey-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.journey-bg > .ph { border: none; background: none; align-items: flex-end; justify-content: flex-end; }

.journey-illustration {
  position: absolute;
  left: var(--ill-x, 62%);
  top: var(--ill-y, 62%);
  width: var(--ill-w, 26%);
  aspect-ratio: var(--ill-ratio, 4 / 3);
  z-index: 1;
}

.illustration { width: 100%; height: 100%; }
.illustration svg, .illustration img, .illustration video { width: 100%; height: 100%; }

.journey-media { position: absolute; inset: 0; z-index: 2; }

.journey-media .frag {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, 20%);
  z-index: var(--z, auto);
  /* Placeholder drift: fragments slide with --progress scaled by --depth.
     Uses `translate` so `transform` stays free for art direction. */
  translate: 0 calc((var(--progress, 0.5) - 0.5) * var(--depth, 0) * -30vh);
}

.no-drift .journey-media .frag { translate: none; }

.journey-text {
  position: absolute;
  left: var(--text-x, 5vw);
  top: var(--text-y, 14vh);
  width: var(--text-w, 32ch);
  z-index: 3;
}

.journey-text h2 {
  font-family: var(--section-title-font, var(--display));
  font-weight: 700;
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1;
  margin-bottom: 16px;
}

.journey-text p { color: var(--fg-dim); font-size: 13px; }

.journey-audio-slots {
  position: absolute;
  left: var(--text-x, 5vw);
  bottom: 4vh;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.journey-audio-slots .ph { width: auto; height: auto; min-height: 0; flex-direction: row; padding: 4px 8px; }
.journey-audio-slots .ph.is-set { border-style: solid; }

/* ─── INTRO ─────────────────────────────────────────────────────────────── */
/* What the project is in a line (in the hero tagline's face), then its parts as panels (markup in index.html; three for now, the album out) */
.info-page.intro { max-width: 1180px; display: flex; flex-direction: column; justify-content: center; border-top: 0; padding-top: 96px; padding-bottom: 64px; }
.info-page .intro-line {
  max-width: 900px; margin: 0 auto 48px; text-align: center; text-wrap: balance; opacity: 1;
  font-family: var(--tag-face, var(--display)); font-style: var(--tag-style, normal); font-weight: var(--tag-weight, 500);
  font-size: calc(var(--tag-size, 1) * clamp(20px, 2.1vw, 30px)); line-height: 1.35;
}
.intro-line i { font-style: inherit; }
/* The intro line's letters move as if a wave were pushing them about, and a pointer moving over them sends an unseen
   ripple through them (the user, 2026-11-09: "I want the letters themselves to move around like a wave is pushing them
   around, and maybe if you mouse over it it pushes a little wave (not that you see, just in the physics of how the
   letters move)"). js/wave-text.js splits the line into letters (.wv-ch) inside unbreakable words (.wv-word) and moves
   them; the box stays still. A hidden copy of the line is what screen readers read. */
.wv-word { display: inline-block; white-space: nowrap; }
.wv-ch { display: inline-block; transform-origin: 50% 70%; }
.parts { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 34px); width: 100%; max-width: 1150px; margin: 0 auto; }   /* four again with Music (the user, 2026-11-11), each as big as when there were four before */
.part { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.part-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 48vh; overflow: hidden; border: 1px solid var(--rule); transition: border-color 0.3s ease; }
.part-media :is(img, video) {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) var(--y, 50%);
  filter: brightness(0.85); transition: filter 0.3s ease;
}
.part-media .ph { width: 100%; height: 100%; min-height: 0; }
.part-name { font-family: 'Shippori Mincho B1', var(--display); font-weight: 800; font-size: clamp(17px, 1.45vw, 22px); letter-spacing: 0.02em; margin-top: 16px; }
.part-where { font-size: 15px; line-height: 1.45; color: var(--fg-dim); margin-top: 6px; }
.part:hover .part-media, .part:focus-visible .part-media { border-color: var(--fg); }
.part:hover :is(img, video), .part:focus-visible :is(img, video) { filter: brightness(1.02); }
.part:hover .part-name, .part:focus-visible .part-name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.part:focus-visible { outline: none; }
@media (max-width: 1000px) { .parts { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } .part-media { max-height: none; }
  .parts > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); } }   /* an odd one out, centred */
@media (max-width: 640px) {
  .info-page.intro { padding-top: 80px; }
  .info-page .intro-line { margin-bottom: 36px; }
  .parts { gap: 28px 14px; }
  .part-name { font-size: 16px; margin-top: 12px; }
  .part-where { font-size: 13px; }
}

/* ─── THE JOURNEY (its page in the scroll) ──────────────────────────────── */
/* The flight's first view, its name above, the way in below; out of the way when the flight is in the scroll */
.journey-door { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12vh 20px 9vh; text-align: center; }
html:not(.jr-room) .journey-door { display: none; }
/* the loop of the Headwaters swoop; its edges fade into the page's own map, by --jd-f (1; 0 is no fade) */
@property --jd-f { syntax: '<number>'; inherits: false; initial-value: 1; }
.jd-img {
  position: absolute; left: 50%; top: 56%; z-index: 0; width: min(100vw, 150vh); max-width: none; height: auto; aspect-ratio: 16 / 10; transform: translate(-50%, -50%);
  --jd-v: linear-gradient(to bottom, transparent, #000 calc(18% * var(--jd-f)), #000 calc(100% - 15% * var(--jd-f)), transparent);
  --jd-h: linear-gradient(to right, transparent, #000 calc(8% * var(--jd-f)), #000 calc(100% - 8% * var(--jd-f)), transparent);
  -webkit-mask-image: var(--jd-v), var(--jd-h);
  -webkit-mask-composite: source-in;
  mask-image: var(--jd-v), var(--jd-h);
  mask-composite: intersect;
}
/* Enter: it grows to fill the screen (js/main.js animates its box and --jd-f), over everything, the flight opening under it */
.jd-img.jd-fill { position: fixed; z-index: 60; transform: none; object-fit: cover; }
.jd-head, .jd-enter { position: relative; z-index: 1; text-shadow: 0 0 14px #0a0a0b, 0 0 6px #0a0a0b, 0 0 2px #0a0a0b; }   /* a halo, legible over the moving terrain */
.jd-head h2 { font-family: 'IM Fell English', var(--display); font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.02em; margin-bottom: 12px; }
.jd-head p { font: 17px/1.5 'Alegreya Sans', var(--mono); color: var(--fg-dim); max-width: 520px; margin: 0 auto; }
/* in SCROLL DOWN's face, the tagline's Cormorant italic */
.journey-door .jd-enter { margin-top: 0; border: 0; background: none; color: var(--fg); cursor: pointer; font: italic 500 calc(1.3 * clamp(18px, 1.8vw, 28px)) / 1 'Cormorant Garamond', var(--display); letter-spacing: 0.02em; }
@media (max-width: 640px) { .jd-img { top: 52%; width: 175vw; } .journey-door { padding: 14vh 16px 10vh; } }

/* ─── ARTIST STATEMENT ──────────────────────────────────────────────────── */
/* The artist statement, in Information: a little larger than the rest */
.statement p { max-width: 640px; font-size: 19px; line-height: 1.62; margin-bottom: 24px; }
@media (max-width: 640px) { .statement p { font-size: 17px; line-height: 1.58; margin-bottom: 20px; } }

.gramophone { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ─── SOUNDWALK / INFORMATION ───────────────────────────────────────────── */

.info-page {
  min-height: 100vh;
  max-width: 860px;
  margin: 0 auto;
  padding: 120px 40px;
  border-top: 1px solid var(--rule);
  /* the faces the user picked (2026-10-06): the cartouche's Shippori Mincho for titles, Alegreya Sans for the rest
     (loaded in index.html) */
  font: 17px/1.55 'Alegreya Sans', var(--mono);
}
/* the short pages as tall as what's on them, not a whole screen (the user, 2026-11-11: "too much space after both
   artist bios and partners"); page snapping stops at their tops all the same (js/page-snap.js) */
#artist-bio, #partners, #contact { min-height: 0; padding-bottom: 72px; }   /* Contact too, the site's end (the user) */

.info-page h2 {
  /* IM Fell English italic, spaced tight: the user's pick from ?heads (2026-11-10; was Shippori Mincho 800) */
  font-family: 'IM Fell English', var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.02em;   /* "tight" (the user, 2026-11-10) */
  margin-bottom: 32px;
}

.info-page h3 {
  font-family: 'Alegreya Sans SC', var(--mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--fg-dim);
  margin: 48px 0 20px;
}

.info-page p { max-width: 620px; margin-bottom: 20px; opacity: 0.88; }

/* The text's boxes, like the story's words (css/story.css .st-box): a near-black fill inside a rounded outline whose
   edges are sine waves, flowing slowly round it; one box per block of text, the section titles outside (the user,
   2026-11-09). Drawn by js/wave-box.js (pageBoxes) behind each .wbox. */
.wbox { position: relative; isolation: isolate; padding: 22px 26px 24px; }
.wbox-svg { position: absolute; z-index: -1; pointer-events: none; overflow: visible; }
.wbox-svg path { fill: rgba(10, 13, 20, 0.9); stroke: rgba(144, 181, 239, 0.9); stroke-width: 1.2; }   /* the blue of the tour's sea waves as they show on the page (the user, 2026-11-09) */
.info-page .wbox { max-width: 700px; margin-left: auto; margin-right: auto; }   /* centred on the page (the user, 2026-11-09: "body text boxes are centered throughout unless I instruct otherwise"; not the story's) */
.info-page .wbox + .wbox, .info-page :is(.sw-demo, .wd-photos) + .wbox { margin-top: 36px; }
.info-page .wbox > h3:first-of-type { margin-top: 0; }
.info-page .wbox > :last-child, .wbox .statement > p:last-child { margin-bottom: 0; }
.info-page .wbox p { max-width: none; }
.info-page .wbox p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(144, 181, 239, 0.7); }   /* a link in the text (iNaturalist), underlined in the boxes' blue */
.info-page .wbox p a:hover { text-decoration-color: currentColor; }
.info-page .intro-line.wbox { max-width: 900px; padding: 24px 34px 26px; }
@media (max-width: 640px) { .wbox { padding: 18px 18px 20px; } .info-page .intro-line.wbox { padding: 18px 20px 20px; } }

/* Placeholder copy: a dashed box tagged PLACEHOLDER, like the media slots.
   Remove the class once the real text is in. */
.ph-text {
  position: relative;
  border: 1px dashed rgba(240, 236, 228, 0.35);
  padding: 26px 16px 14px;
  color: var(--fg-dim);
  font-size: 13px;
}

.ph-text::before {
  content: 'Placeholder';
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.7;
}

/* Soundwalk: two or three portrait iPhone screenshots side by side (9:19.5),
   then how the app is designed and its two portions. Markup in index.html. */
.sw-shots {
  display: flex;
  gap: 30px;
  margin-bottom: 8px;
}

.sw-shot {
  flex: 0 1 240px;
  min-width: 0;
  aspect-ratio: 9 / 19.5;
}

.sw-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--rule);
}

/* The demo video, the column's full width at its own shape. */
.sw-demo { margin-top: 40px; aspect-ratio: 1920 / 1158; }

.sw-demo video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  border: 1px solid var(--rule);
}

.sw-places {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}

.sw-place {
  padding: 28px 0 8px;
  border-bottom: 1px solid var(--rule);
}

.sw-place + .sw-place {
  padding-left: 40px;
  border-left: 1px solid var(--rule);
}

.sw-place:first-child { padding-right: 40px; }
.info-page .sw-place h3 { margin: 0 0 16px; }
/* the two places, each in its own box (.wbox): side by side with a gap, no rules between them */
.sw-places:has(.wbox) { gap: 28px; border-top: 0; margin: 36px auto 0; max-width: 700px; }
.sw-places .sw-place.wbox, .sw-places .sw-place.wbox + .sw-place.wbox { padding: 22px 26px 24px; border: 0; margin-top: 0; }

/* Wind Drift: the installation at Wind Drift Studios. Landscape photos (3:2),
   the first across the row, then the description. Markup in index.html. */
.wd-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

.wd-photo { min-width: 0; aspect-ratio: 3 / 2; }
.wd-photo:first-child { grid-column: 1 / -1; }
.wd-photo .ph { width: 100%; height: 100%; }
.wd-photo--lead { aspect-ratio: 1448 / 1086; position: relative; }   /* the render, at its own shape */
/* "Render", over the image's bottom left corner, plain to see (the user: more obvious, over the image, bottom left) */
.wd-photo figcaption {
  position: absolute; bottom: 16px; left: 16px;
  padding: 7px 14px 8px;
  font: 500 17px/1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.14em; text-transform: lowercase;
  color: #f0ece4; background: rgba(13, 17, 23, 0.78); border: 1px solid rgba(240, 236, 228, 0.5);
}

.wd-photo--video { grid-column: 1 / -1; aspect-ratio: 1920 / 1200; position: relative; }   /* the silhouette prototype, full width under the render */
/* the text boxes sit between the pictures now (the user, 2026-11-10), so a picture after a box keeps the same gap */
.info-page .wbox + :is(.wd-photos, .wd-pair) { margin-top: 40px; }
.info-page .wd-pair + .wbox { margin-top: 36px; }
/* a box over the foot of the picture above it (.wd-over; the user, 2026-11-10: "slightly overlap the bottom of the
   render image"): pulled up past the pictures' own bottom margin by --wd-over; the caption over that picture moves up
   clear of it */
.info-page .wbox.wd-over { --wd-over: 28px; position: relative; z-index: 2; }   /* half the first try's 56 (the user, 2026-11-11) */
.info-page .wd-photos + .wbox.wd-over { margin-top: calc(-40px - var(--wd-over)); }
.info-page .wd-pair + .wbox.wd-over { margin-top: calc(-24px - var(--wd-over)); }
.wd-photos:has(+ .wd-over) .wd-photo figcaption { bottom: calc(28px + 16px); }
/* two photographs side by side at one height: each figure grows by its own shape (--ar = width / height) */
.wd-pair { display: flex; gap: 24px; margin-bottom: 24px; }
.wd-pair .wd-photo { flex: calc(var(--ar)) 1 0; aspect-ratio: var(--ar); grid-column: auto; }   /* calc: "854 / 1140" alone isn't a number, the whole flex was dropped, and each photo was 3 px tall till it loaded: the page below jumped ~860 px (a menu jump to Soundwalk landed in Installation, 2026-11-11) */

.wd-photo img, .wd-photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--rule);
}

@media (max-width: 640px) {
  .wd-photos { grid-template-columns: 1fr; gap: 16px; }
  .wd-pair { gap: 10px; margin-bottom: 10px; }
  /* on phones the boxes sit under the pictures, not over them (the user, 2026-11-11: "on phone don't overlap body text
     and images for installation"): 20 px apart */
  .info-page .wd-photos + .wbox.wd-over { margin-top: -20px; }
  .info-page .wd-pair + .wbox.wd-over { margin-top: 20px; }
  .wd-photos:has(+ .wd-over) .wd-photo figcaption { bottom: 12px; }
}

/* Partners: their logos in a row, each in a box of the same size. Markup in index.html. */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  list-style: none;
}

.partner { aspect-ratio: 3 / 2; min-width: 0; }
.partner .ph { width: 100%; height: 100%; }

.partner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

/* ─── DEBUG HUD (?debug) ────────────────────────────────────────────────── */

.debug-hud {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  font: 11px/1.45 var(--mono);
  color: #9f9;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px 10px;
  pointer-events: none;
  white-space: pre;
}

/* ─── MOBILE ────────────────────────────────────────────────────────────── */

/* Collages collapse to a simple two-column flow. Per-section overrides go
   in css/sections/<id>.css under the same media query (e.g. give a
   fragment `grid-column: 1 / -1` to run it full width). */
@media (max-width: 640px) {
  .journey { height: auto; min-height: 100vh; }

  .journey-stage {
    position: relative;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 80px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .journey-text,
  .journey-audio-slots,
  .journey-illustration { position: relative; left: auto; top: auto; bottom: auto; width: auto; }

  .journey-text { order: -1; }

  .journey-media {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .journey-media .frag {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    translate: none;
    align-self: start;
  }

  .info-page { padding: 80px 20px; }

  /* The screenshots scroll sideways, one phone and a bit of the next in view. */
  .sw-shots {
    gap: 16px;
    margin: 0 -20px;
    padding: 0 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    overscroll-behavior-x: contain;
  }

  .sw-shot { flex: 0 0 62vw; max-width: 280px; scroll-snap-align: start; }

  .sw-places { grid-template-columns: 1fr; }
  .sw-place:first-child { padding-right: 0; }
  .sw-place + .sw-place { padding-left: 0; border-left: none; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-media .frag { translate: none; }
}

/* ─── MUSIC (#music, js/music.js; the user, 2026-11-11) ───────────────────────────────────────────────────────────
   The player (the site's soundtrack, shown and steered) and the Aqueduct Timeline (its recording over its score, a
   playhead moving with it; "Play it live" opens the timeline itself over the page). */
.mu-btn { padding: 11px 18px; border: 1px solid rgba(240, 236, 228, 0.6); border-radius: 2px; background: rgba(10, 13, 20, 0.8); color: #f0ece4;
  font: 500 13px/1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.16em; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease; }
.mu-btn:hover, .mu-btn:focus-visible { background: rgba(240, 236, 228, 0.12); border-color: #f0ece4; }
.info-page .mu-player h3, .info-page .mu-timeline h3 { margin: 0 0 18px; }
.mu-now { display: flex; align-items: center; gap: 16px; }
.mu-play { min-width: 86px; }
.mu-title { flex: 1; font-family: 'Shippori Mincho B1', var(--display); font-weight: 800; font-size: 18px; }
.mu-time, .mu-tl-time { font: 500 13px/1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.08em; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.mu-bar { position: relative; height: 22px; margin: 14px 0 10px; cursor: pointer; touch-action: none; }
.mu-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: rgba(240, 236, 228, 0.2); }
.mu-fill { position: absolute; left: 0; top: 10px; height: 2px; background: rgb(144, 181, 239); }
.mu-fill::after { content: ''; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: rgb(144, 181, 239); }
.mu-bar:focus-visible { outline: 1px solid rgba(144, 181, 239, 0.8); outline-offset: 2px; }
.mu-tracks { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.mu-track { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--rule); background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mu-track:hover .mu-tname, .mu-track:focus-visible .mu-tname { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mu-n, .mu-tdur { font: 500 13px/1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.08em; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.mu-tname { flex: 1; }
.mu-track[aria-current="true"] .mu-tname { color: rgb(144, 181, 239); }
.mu-track[aria-current="true"] .mu-n::before { content: '▸ '; }
.info-page .wbox.mu-timeline { max-width: 960px; margin-top: 36px; }
.mu-score { position: relative; margin: 0 0 14px; cursor: pointer; border: 1px solid var(--rule); }
.mu-score img { display: block; width: 100%; height: auto; }
.mu-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgb(144, 181, 239); box-shadow: 0 0 8px rgba(144, 181, 239, 0.7); pointer-events: none; }
.mu-tl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.mu-live { margin-left: auto; }
.mu-live-note { margin-left: auto; font-size: 14px; color: var(--fg-dim); }
.mu-live-room { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #0a0d14; }
.mu-live-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.mu-live-title { font: 500 13px/1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.16em; color: #f0ece4; }
.mu-live-frame { flex: 1; width: 100%; border: 0; color-scheme: dark; background: #0a0d14; }
html.mu-live-on { overflow: hidden; }
@media (max-width: 640px) {
  .mu-now { flex-wrap: wrap; gap: 10px 14px; }
  .mu-title { font-size: 16px; }
  .info-page .wbox.mu-timeline { margin-top: 28px; }
}