/* ==========================================================================
   04 · YILLAR. Ölçek.
   A horizontal journey from the 1960s to the 2020s: seven decade movements,
   each with its own arrangement, resolving into all 400 covers at once.
   The rail's transform is the engine's. Everything else here is driven from
   --sc-p in calc(), so 400 covers cost zero scroll listeners.

   The act is two scrolls long. That makes the horizontal speed high, so
   nothing here may depend on the reader stopping: every piece of motion is a
   function of where a thing is in the frame, and reads at speed.
   ========================================================================== */

@property --lift {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.rail {
  --rail-ground: #0B0908;
  /* measured by js/04-rail.js: railElement.scrollWidth - innerWidth, in px.
     0 until measured, which makes every calc() below a no-op. */
  --rail-over: 0px;
  --rail-rw: 0px;

  /* The frame-relative maths. Everything below works in plain numbers rather
     than lengths, because CSS will multiply a number by a number anywhere but
     will not divide by a length. So js/04-rail.js writes the travel, half the
     viewport and both reciprocals as unitless numbers, and every step here is
     a multiplication. All four are 0 until measured, which parks every effect
     at rest rather than at full strength. */
  --rail-overn: 0;      /* scrollWidth - innerWidth, unitless px */
  --rail-half: 0;       /* innerWidth / 2, unitless px */
  --rail-nearw: 0;      /* half-width of the centre band, unitless px */
  --rail-neark: 0;      /* 1 / --rail-nearw */
  --rail-pzk: 0;        /* 1 / (depth reference distance) */

  --rail-mark: color-mix(in oklab, var(--sc-ink) 46%, transparent);
  --rail-shadow: 0 10px 26px -14px hsl(var(--sc-shadow-color) / 0.95);
  --rail-shadow-hi: 0 26px 52px -20px hsl(var(--sc-shadow-color) / 1),
                    0 3px 8px -4px hsl(var(--sc-shadow-color) / 0.8);
  color: var(--sc-ink);
}

/* The stage is the engine's sticky frame. Nothing here may set position or
   overflow on it: the pin and the reduced-motion scroll region both live on
   those two properties. */
.rail-stage { isolation: isolate; }

.rail-track {
  display: flex;
  align-items: stretch;
  height: 100%;
  width: max-content;
}

/* ------------------------------------------------------------------ lead -- */
.rail-lead {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  display: grid;
  align-content: center;
  padding-left: var(--sc-gutter);
}
.rail-lead__copy {
  position: relative;
  z-index: 800;
  display: grid;
  gap: clamp(0.9rem, 1.6vh, 1.5rem);
  max-width: min(28rem, 30vw);
}
/* The copy resists the pan for a moment: over the first quarter of the act it
   drifts right against the travel, so the rail slides out from under the
   sentence instead of taking it straight off the left edge. min() caps the
   drift at the end of the lead's own life; after that it is a constant. */
.rail-h {
  font-variation-settings: "wght" 830, "wdth" 114;
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-wrap: nowrap;
  transform: translate3d(calc(min(var(--sc-p, 0), 0.26) * 300px), 0, 0);
}
.rail-lede {
  max-width: 30ch;
  color: color-mix(in oklab, var(--sc-ink) 74%, var(--rail-ground));
  transform: translate3d(calc(min(var(--sc-p, 0), 0.26) * 195px), 0, 0);
}
.rail-old { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* -------------------------------------------------------------- movement -- */
.rail-mv {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  /* a floor, so the rail still overflows and the act still travels even if
     the layout pass never runs. Never binds: every real movement is wider. */
  min-width: min(18vw, 220px);
  content-visibility: auto;
}
.rail-lead { min-width: min(40vw, 520px); }
.rail-wall { min-width: min(90vw, 1200px); }
.rail-field { position: absolute; inset: 0; }

.rail-mark {
  position: absolute;
  z-index: 2;
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-variation-settings: "wght" var(--mk-w, 820), "wdth" var(--mk-x, 100);
  font-size: var(--mk-s, min(24vh, 220px));
  line-height: 0.74;
  letter-spacing: -0.04em;
  color: var(--mk-c, var(--rail-mark));
  left: var(--mk-l, auto);
  right: var(--mk-r, auto);
  top: var(--mk-t, auto);
  bottom: var(--mk-b, auto);
  /* The year drifts against its own records as it crosses. --mcx is the
     movement's centre in rail coordinates, written by 04-rail.js; the covers
     drift the other way, so the decade and its sleeves separate in depth as
     they pass and close again once they are gone. Kept inside 16px so the
     marker can never reach the paint edge that content-visibility puts on the
     movement box. */
  --me: calc(var(--mcx, 0) - var(--sc-p, 0) * var(--rail-overn) - var(--rail-half));
  transform: translate3d(calc(clamp(-1, calc(var(--me) * var(--rail-pzk)), 1) * -16px), 0, 0);
}
.rail-mark__s {
  font-size: 0.3em;
  font-variation-settings: "wght" 600, "wdth" 88;
  letter-spacing: 0.01em;
  vertical-align: 0.42em;
  margin-left: 0.04em;
}

/* One aside in the whole act, on the decade that starts it. The record counts
   that used to sit under every marker are gone: at this speed they were seven
   numbers nobody could hold, and the decade name is the only label the ruler
   at the bottom does not already give. */
.rail-aside {
  position: absolute;
  z-index: 800;
  margin: 0;
  pointer-events: none;
  font-family: var(--sc-font-text);
  font-size: clamp(0.72rem, 0.9vw, 0.84rem);
  letter-spacing: 0.005em;
  font-weight: 500;
  color: color-mix(in oklab, var(--sc-ink-soft) 82%, var(--rail-ground));
  left: var(--as-l, auto);
  right: var(--as-r, auto);
  top: var(--as-t, auto);
  bottom: var(--as-b, auto);
}

/* --- the seven treatments. Position and voice of the marker only; the
   arrangement of the covers themselves is computed in 04-rail.js. The type is
   a rung smaller than it was: a movement is now about a third of a frame wide,
   and a year that overran its own decade would be clipped by the paint
   containment on .rail-mv or would collide with the next one. ------------- */
.rail-mv--a {                       /* 1960s — one thin line, mostly air */
  --mk-s: min(17vh, 152px); --mk-x: 66; --mk-w: 760;
  --mk-l: 40px; --mk-b: 15%;
  --as-l: 42px; --as-t: 15%;
}
.rail-mv--b {                       /* 1970s — a rising diagonal */
  --mk-s: min(13vh, 118px); --mk-x: 108; --mk-w: 840;
  --mk-l: 32px; --mk-b: 9%;
}
.rail-mv--c {                       /* 1980s — a crate being flipped */
  --mk-s: min(20vh, 180px); --mk-x: 84; --mk-w: 900;
  --mk-l: 6%; --mk-t: 7%;
  --mk-c: transparent;
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .rail-mv--c .rail-mark { -webkit-text-stroke: 1.6px color-mix(in oklab, var(--sc-ink) 62%, transparent); }
}
@supports not (-webkit-text-stroke: 1px currentColor) {
  .rail-mv--c { --mk-c: var(--rail-mark); }
}
.rail-mv--d {                       /* 1990s — a tight grid with a hole in it */
  --mk-s: min(15vh, 132px); --mk-x: 118; --mk-w: 880;
  --mk-c: color-mix(in oklab, var(--sc-ink) 88%, transparent);
}
.rail-mv--e {                       /* 2000s — five shelves, mixed heights */
  --mk-s: min(13vh, 118px); --mk-x: 74; --mk-w: 800;
  --mk-r: 34px; --mk-t: 6%;
  --mk-c: color-mix(in oklab, var(--sc-ink) 44%, transparent);
}
.rail-mv--f {                       /* 2010s — columns on a wave */
  --mk-s: min(12vh, 108px); --mk-x: 125; --mk-w: 900;
  --mk-l: 8%; --mk-t: 50%;
}
.rail-mv--g {                       /* 2020s — dense block thinning to nothing */
  --mk-s: min(19vh, 172px); --mk-x: 96; --mk-w: 860;
  --mk-l: 26px; --mk-t: 8%;
}

/* ----------------------------------------------------------------- cover -- */
.rail-cv {
  position: absolute;
  z-index: 3;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: clip;
  background: #17120E;
  box-shadow: var(--rail-shadow);

  /* Where this cover is, right now, relative to the middle of the frame.
     --cx is its centre in rail coordinates, written once per layout; the rest
     is the engine's own progress, so a cover knows its position in the frame
     without a single scroll listener. */
  --e: calc(var(--cx, 0) - var(--sc-p, 0) * var(--rail-overn) - var(--rail-half));
  --d: max(var(--e), calc(-1 * var(--e)));
  /* 1 at the centre of the frame, 0 outside the band */
  --near: clamp(0, calc((var(--rail-nearw) - var(--d)) * var(--rail-neark)), 1);
  /* -1 left of the frame, +1 right of it: the sign of the parallax */
  --pz: clamp(-1, calc(var(--e) * var(--rail-pzk)), 1);

  /* settle: 0 -> 1 across a short window of act progress that starts when
     this cover crosses the right edge of the frame. --t0 is written per
     cover by 04-rail.js. Covers already on screen at p=0 get a negative
     --t0 and are therefore settled before the act begins. */
  --s: clamp(0, calc((var(--sc-p, 1) - var(--t0, 0)) * 42), 1);
  opacity: calc(0.55 + 0.45 * var(--s));
  /* Three things at once, all in one transform so a cover is one composited
     step per frame: a depth parallax that makes the big records overtake the
     small ones, a rise as the cover passes the middle of the frame, and the
     settle it already had. --dep and --rin are written per cover. */
  transform:
    translate3d(
      calc(var(--pz) * var(--dep, 0) * 20px),
      calc((1 - var(--s)) * 24px - var(--lift) * 14px - var(--near) * 8px),
      0)
    rotate(calc(var(--rot, 0deg) + (1 - var(--s)) * var(--rin, 0deg)))
    scale(calc(0.955 + 0.045 * var(--s) + var(--lift) * 0.05 + var(--near) * 0.03));
}
.rail-cv > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
button.rail-cv {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
/* one thin edge in the track's own colour, on the raised covers only */
.rail-cv--f::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cv-c, #fff) 46%, transparent);
  pointer-events: none;
}

.rail-cv__m {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 1px;
  padding: 14px 7px 6px;
  opacity: 0;
  transform: translate3d(0, 5px, 0);
  transition: opacity 150ms var(--sc-ease-out), transform 150ms var(--sc-ease-out);
  background: linear-gradient(to top, rgb(6 5 4 / 0.94), rgb(6 5 4 / 0.78) 58%, rgb(6 5 4 / 0));
  pointer-events: none;
  text-align: left;
}
.rail-cv__m > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--sc-font-text);
  line-height: 1.3;
}
.rail-cv__a { font-size: 11px; font-weight: 650; color: var(--sc-ink); letter-spacing: 0.002em; }
.rail-cv__n { font-size: 10px; color: color-mix(in oklab, var(--sc-ink) 72%, var(--rail-ground)); }
.rail-cv__y { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--sc-ink-soft); }

.rail-cv:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; z-index: 950; --lift: 1; }
.rail-cv:focus-visible .rail-cv__m { opacity: 1; transform: none; }
.rail-cv.is-playing { z-index: 940; }
.rail-cv.is-playing::after {
  box-shadow: inset 0 0 0 2px var(--sc-accent);
}
.rail-cv.is-playing .rail-cv__m { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .rail-cv { transition: --lift 170ms var(--sc-ease-out), box-shadow 170ms var(--sc-ease-out); }
  .rail-cv:hover {
    --lift: 1;
    z-index: 900;
    box-shadow: var(--rail-shadow-hi), 0 16px 46px -18px var(--cv-c, transparent);
  }
  .rail-cv:hover .rail-cv__m { opacity: 1; transform: none; }
  button.rail-cv:active { --lift: 0.55; }
}

/* ------------------------------------------------------------ the payoff -- */
.rail-wall {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  /* No transform here on purpose. data-sc-pan is 0 on the rail, so the
     engine travels exactly scrollWidth - innerWidth and this element's right
     edge lands exactly on the right edge of the frame at p = 1. Any extra
     travel multiplier would leave that fraction of the viewport as empty
     ground in the act's payoff frame, and it cannot be filled: correcting
     for it with a transform grows the rail's own scrollWidth, which grows
     the overshoot again. */
}
.rail-wall__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  align-content: center;
  justify-content: start;
  /* Only a left pad. The engine travels exactly scrollWidth - innerWidth, so
     the wall's right edge lands on the right edge of the frame at p = 1: any
     right padding would print as a black band down the last frame of the act,
     which is the one frame that has to be nothing but records. */
  padding-inline: var(--wall-pad, 0px) 0;
  /* The one piece of motion the wall gets. Four hundred tiles cannot each
     carry a calc() against --sc-p and stay smooth, so the whole grid settles
     as one composited layer instead: it rides a few pixels high on the way in
     and comes to rest exactly at p = 1, under a slogan that is already still. */
  transform: translate3d(0, calc((1 - var(--sc-p, 1)) * -22px), 0);
}
.rail-wt {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;
}

.rail-say {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  width: min(740px, 62vw);
  display: grid;
  align-content: center;
  gap: clamp(0.8rem, 1.6vh, 1.4rem);
  padding-inline: clamp(1.4rem, 3vw, 3.4rem);
  /* The plateau is opaque, not 0.97. The slogan sits on the four hundred
     cover wall, and at 0.97 a white sleeve corner still reads through as a
     lift of eight levels, which took the small tracked sub line to 3.36:1 in
     the frame at p 0.76. Only the two soft edges stay translucent, and no
     text sits on them. */
  background: linear-gradient(90deg,
    rgb(11 9 8 / 0) 0%,
    rgb(11 9 8 / 1) 12%,
    rgb(11 9 8 / 1) 88%,
    rgb(11 9 8 / 0) 100%);
  /* counters the wall's remaining speed exactly, so the slogan stops dead in
     the frame while four hundred covers keep moving behind it */
  transform: translate3d(max(0px, calc((var(--sc-p, 0) - var(--hold, 2)) * var(--holdk, 0px))), 0, 0);
}
.rail-say__line {
  font-variation-settings: "wght" 850, "wdth" 118;
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  line-height: 0.93;
  letter-spacing: -0.035em;
  color: var(--sc-ink);
  max-width: 15ch;
}
.rail-say__sub {
  margin: 0;
  font-family: var(--sc-font-text);
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sc-ink);
}
.rail-say__sub .tt-num { color: var(--sc-ink); font-size: 1.3em; margin-right: 0.1em; }

/* ---------------------------------------------------------------- ruler -- */
/* The years never leave. The cue is "0.06 1 0.05 0": a two value window that
   ends at 1 with an explicit rampOut of 0, because the engine's default ramp
   would take the ruler to nothing over the last tenth of the act, which is
   exactly the wall. So the ticks are legible from the first frame of the act
   to the last, the payoff included. */
.rail-ruler {
  position: absolute;
  left: var(--sc-gutter);
  right: max(var(--sc-gutter), 17rem);
  bottom: clamp(16px, 3vh, 34px);
  z-index: 7;
  height: 30px;
  pointer-events: none;
}
/* The dense movements and the wall both run under the ruler, so the years are
   read against album art rather than against the ground. Measured 1.02:1 over
   the 1990s grid at 1440 before this. A strip of ground behind the ruler is
   what the numerals stand on at every width, and now that the ruler survives
   to p = 1 it is what they stand on over the wall as well. */
.rail-ruler::before {
  content: "";
  position: absolute;
  inset: -12px -100vw -20px;
  z-index: -1;
  background: linear-gradient(to top,
    rgb(11 9 8 / 0.97) 0%,
    rgb(11 9 8 / 0.95) 62%,
    rgb(11 9 8 / 0) 100%);
  pointer-events: none;
}
/* The travelled part of the line is drawn in behind the dot, so the rule is
   not a static hairline but a timeline filling up. One node, one gradient. */
.rail-ruler__line {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right,
    color-mix(in oklab, var(--sc-ink) 40%, transparent) 0 calc(var(--sc-p, 0) * 100%),
    color-mix(in oklab, var(--sc-ink) 12%, transparent) calc(var(--sc-p, 0) * 100%) 100%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.rail-ruler__ticks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.rail-ruler__ticks li {
  position: absolute;
  top: 0;
  left: var(--tick, 0%);
  padding-top: 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sc-ink);
  /* --tickn is this tick's own progress, written by 04-rail.js. --tn is 1
     while the dot is on the tick and 0 elsewhere, so the decade the reader is
     actually inside marks itself. The numeral itself never dims: it is full
     ink at every progress, because it is read over album art. */
  --te: calc(var(--sc-p, 0) - var(--tickn, 3));
  --td: max(var(--te), calc(-1 * var(--te)));
  --tn: clamp(0, calc((0.07 - var(--td)) * 14), 1);
  translate: -50% calc(var(--tn) * -1.5px);
}
.rail-ruler__ticks li::before {
  content: "";
  position: absolute;
  left: 50%; top: -3px;
  width: 1px; height: 7px;
  transform-origin: 50% 0;
  transform: scaleY(calc(1 + 1.15 * var(--tn)));
  background: color-mix(in oklab,
    var(--sc-accent) calc(var(--tn) * 100%),
    color-mix(in oklab, var(--sc-ink) 46%, transparent));
}
.rail-ruler__dot {
  position: absolute;
  top: -3px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sc-accent);
  transform: translate3d(calc(var(--sc-p, 0) * var(--rail-rw)), 0, 0);
}

.rail-vig {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(to right, rgb(9 7 6 / 0.9), rgb(9 7 6 / 0) 6%, rgb(9 7 6 / 0) 94%, rgb(9 7 6 / 0.9)),
    radial-gradient(126% 92% at 50% 46%, rgb(9 7 6 / 0) 44%, rgb(9 7 6 / 0.5) 100%);
}

/* --------------------------------------------------------------- tablet -- */
@media (max-width: 860px) {
  .rail-mv--a { --mk-s: min(14vh, 116px); --mk-l: 28px; }
  .rail-mv--b { --mk-s: min(11vh, 92px); }
  .rail-mv--c { --mk-s: min(16vh, 136px); }
  .rail-mv--d { --mk-s: min(12vh, 96px); }
  .rail-mv--e { --mk-s: min(11vh, 88px); }
  .rail-mv--f { --mk-s: min(10vh, 82px); }
  .rail-mv--g { --mk-s: min(15vh, 124px); }
  .rail-h { font-size: clamp(2rem, 5.4vw, 3.1rem); }
  .rail-lead__copy { max-width: min(28rem, 46vw); }
  .rail-say { width: min(560px, 78vw); }
  .rail-ruler { right: max(var(--sc-gutter), 12rem); }
}

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 620px) {
  .rail-mv--a { --mk-s: min(12vh, 88px); --mk-l: 20px; --as-l: 22px; }
  .rail-mv--b { --mk-s: min(10vh, 72px); --mk-l: 18px; }
  .rail-mv--c { --mk-s: min(13vh, 100px); }
  .rail-mv--d { --mk-s: min(10vh, 74px); }
  .rail-mv--e { --mk-s: min(9vh, 68px); --mk-r: 22px; }
  .rail-mv--f { --mk-s: min(8.5vh, 64px); }
  .rail-mv--g { --mk-s: min(12vh, 94px); --mk-l: 18px; }
  .rail-h { font-size: clamp(1.9rem, 8.4vw, 2.6rem); text-wrap: balance; }
  .rail-lead__copy { max-width: min(22rem, 82vw); }
  .rail-lede { font-size: 1rem; max-width: 26ch; }
  .rail-aside { font-size: 0.7rem; }
  /* The ruler's scrim and full-ink numerals are base rules now; the phone
     only narrows the band and shrinks the type. */
  .rail-say { width: min(430px, 86vw); }
  .rail-say__line { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
  .rail-ruler { right: max(var(--sc-gutter), 6.2rem); height: 26px; }
  .rail-ruler::before { inset: -10px -100vw -16px; }
  .rail-ruler__ticks li { font-size: 9px; letter-spacing: 0.06em; }

  /* The slogan lands on the four hundred cover wall, the busiest surface on
     the page, and a phone gives the horizontal wash too little room to reach
     full strength before the first letter. So on a phone the scrim is a
     panel behind the two lines rather than a band across the frame. */
  .rail-say { background: none; padding-inline: 0; }
  .rail-say__in {
    padding: 0.85rem 1rem 0.95rem;
    border-radius: 12px;
    background: rgb(9 8 7 / 0.93);
    box-shadow: 0 0 0 1px rgb(243 234 220 / 0.06);
  }
  .rail-cv__a { font-size: 10px; }
  .rail-cv__n, .rail-cv__y { font-size: 9px; }
}

/* ------------------------------------------------------- reduced motion -- */
/* The engine hands the stage back as a native overflow-x scroll region here,
   so the rail is navigable by drag, wheel and keyboard. Everything driven off
   --sc-p has to go with it: --sc-p is still vertical progress, but the reading
   is now horizontal, so a cover's distance from the middle of the frame is no
   longer something --sc-p knows. 04-rail.js zeroes --rail-overn, --rail-half
   and both reciprocals inline for exactly that reason, which parks the depth
   parallax and the centre lift at rest; these rules cover the rest. */
@media (prefers-reduced-motion: reduce) {
  /* The engine writes height: 200vh inline for a span of 2, which is the
     right number when the rail is being panned by the scroll. Here it is
     not: the transform is off and the stage is a native scroll region, so
     those two screens would be two screens on which nothing changes unless
     the reader thinks to scroll sideways. An inline style can only be beaten
     by !important, and 1.5 leaves half a screen of pin, which is enough for
     the cues to open and close. */
  .rail { height: 150vh !important; }
  .rail { --rail-over: 0px; --rail-rw: 0px; --rail-overn: 0; --rail-half: 0; --rail-neark: 0; --rail-pzk: 0; }
  .rail-cv { --s: 1; }
  .rail-h, .rail-lede, .rail-wall__grid { transform: none; }
  /* Progress is still vertical, but the reading is now horizontal: someone
     scrolling the rail sideways at p = 0 would meet a slogan the cue has not
     opened yet. The engine writes cue opacity and transform inline every
     frame, so only !important can hold these two open. */
  .rail-lead__copy,
  .rail-say__in { opacity: 1 !important; transform: none !important; }
  .rail-stage { scrollbar-color: color-mix(in oklab, var(--sc-ink) 34%, transparent) transparent; }
  /* The ruler measures the pan, and there is no pan here: the dot is driven by
     --sc-p, which under reduce is the reader's vertical position and says
     nothing about where the rail has been dragged to. A year scale that
     disagrees with the records under it is worse than no year scale. */
  .rail-ruler { display: none; }
  .rail-cv__m { transition-duration: 120ms; }
}