/* I searched and found gold: hero, study sections and the bubble rail.
   Desktop rules are the defaults. The compact (phone) layout lives in ONE block:
   @media (max-width: 767px), (max-height: 520px). The hero's motion (frame fade, cue nudge)
   lives in hero-motion.css; hero.js only toggles classes / attributes, so every visual state is styled in CSS. */

:root {
  --slate-50:  #F5F7F8;  /* page background */
  --slate-100: #EEEFF1;
  --slate-200: #DFE3E6;  /* borders, grey tile 1 */
  --slate-300: #CBD1D6;  /* tracks, grey tile 2 */
  --slate-500: #A1A8B3;  /* inactive rail ticks, grey tile 3 */
  --slate-700: #787E8A;  /* inactive rail numbers, grey tile 4 */
  --slate-800: #4C5056;  /* secondary text */
  --slate-900: #303236;  /* primary text, mosaic shade */
  --gold:      #977011;  /* cue dot, rail fill, lit ticks */
  --gold-lo:   #84620C;  /* active rail number */
  --rail-num:  #6E7480;  /* inactive rail numbers (4.69:1 on white, AA at 11px) */
  --tile-gold:   #D8AE48;
  --tile-gold-2: #C9A243;
  --tile-pale:   #EBD28F;
  --tile-pale-2: #F0DCA6;
  --white: #FFFFFF;
  /* Hero tile fills, painted through mosaic.js's marker filter, which lightens them
     (rendered targets: HERO-REF-SPEC 2.1). Derived from the tile-gold / tile-pale tokens above. */
  --tile-grey-1: #BFC7D0;
  --tile-grey-2: #A9B1BD;
  --tile-grey-3: #7A808E;
  --tile-pale-a: #BF9E5E;
  --tile-pale-b: #BB9859;
  --tile-rich-a: #C5984A;
  --tile-rich-b: #C59445;
  --tile-line:   #787E8A;
  --hero-ground: #FFFFFF;
  --hero-lede: #5D6168;   /* hero lede: 6.22:1 on white, a clear step below the headline */
  --hero-top: 36px;       /* strip above the stage that holds the byline chip */
  --hero-feather: 88px;   /* white -> slate-50 at the hero's foot */
  --hero-col-pad: clamp(32px, calc(8vw - 24px), 64px);

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Schibsted Grotesk', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Bubble rail geometry (compact values are overridden below). */
  --rail-w: 196px;       /* bubble width */
  --rail-peek: 34px;     /* what stays on screen when tucked */
  --rail-row: 44px;      /* row height */
  --rail-pad-y: 10px;    /* bubble padding top / bottom */
  --rail-edge: 12px;     /* track inset and row padding-right */
  --rail-tick: 12px;
  --rail-tick-on: 22px;
  /* Track / ticks / toggle / current label are counter-shifted by exactly the tuck
     distance with the same duration and easing as the bubble, so they stay pinned
     to the screen edge while the white bubble grows out from behind them. */
  --rail-tuck: calc(var(--rail-w) - var(--rail-peek));
  --ease-open:  cubic-bezier(.34, 1.4, .64, 1);  /* spring overshoot: bubbling out */
  --ease-close: cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--slate-50);
  color: var(--slate-900);
  font-family: var(--sans);
  overflow-x: clip;
}

a { color: var(--slate-900); }
a:hover { color: var(--slate-800); }

:focus-visible {
  outline: 2px solid var(--slate-900);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sections take programmatic focus after a rail / cue jump; no ring for that. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

/* ---------- Byline chip ---------- */

.topbar { position: absolute; top: 27px; right: 52px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.byline {
  margin: 0; padding: 6px 12px; background: var(--white);
  border: 1px solid var(--slate-200); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(48, 50, 54, .06), 0 8px 24px -12px rgba(48, 50, 54, .16);
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--slate-800);
}
.byline strong { font-weight: 600; color: var(--slate-900); }
/* Disclaimer button beside the byline (owner, 21 Oct 2026): dim and discreet, no fill colour or shadow, a hairline
   border, the byline's height. It opens #disc-pop, a native popover (index.html): the #s7 text on a white card under it. */
.disclaimer-link {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  margin: 0; padding: 6px 10px;
  background: var(--white); border: 1px solid #E8EBEE; border-radius: 8px;
  font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 20px; color: var(--hero-lede);   /* 6.2:1 */
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.disclaimer-link:hover { color: var(--slate-900); border-color: var(--slate-200); }
.disclaimer-link svg { flex: none; width: 13px; height: 13px; }

/* The popup (owner, 21 Oct 2026): a white card dropped from the top-right corner, its right edge on the button's, over a
   lightly dimmed page. disclaimer.js sets --disc-top / --disc-right from the button on opening (the values here are the
   resting desktop ones). Esc, a click outside or the cross closes it (popover="auto"). */
.disc-pop {
  box-sizing: border-box;
  position: fixed;
  inset: var(--disc-top, 75px) var(--disc-right, 52px) auto auto;
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - var(--disc-top, 75px) - 16px);
  max-height: calc(100dvh - var(--disc-top, 75px) - 16px);
  margin: 0;
  padding: 22px 24px 24px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--white);
  color: var(--slate-900);
  box-shadow: 0 1px 2px rgba(48, 50, 54, .06), 0 24px 56px -20px rgba(24, 26, 30, .32);
  text-align: left;
  overflow: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.disc-pop::backdrop { background: rgba(36, 38, 42, .3); }
.disc-pop-x {
  position: absolute; top: 10px; right: 10px; z-index: 1;   /* above the heading's box, which reaches under it */
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--slate-800); cursor: pointer;
}
.disc-pop-x:hover { background: var(--slate-100); color: var(--slate-900); }
.disc-pop-x:focus-visible { outline-offset: 0; }
.disc-pop-x path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.disc-pop-h {
  position: relative; margin: 0; padding: 0 36px 10px 0;
  font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; letter-spacing: -.01em;
  font-optical-sizing: auto; color: #9B2C2C;
}
.disc-pop-lines { position: absolute; left: -2px; bottom: -5px; width: 112px; height: 12px; overflow: visible; }
.disc-pop-lines path { fill: none; stroke: #B42B2B; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.disc-pop-lines .disc-pop-l2 { stroke-width: 1.7; }
.disc-pop-p {
  margin: 18px 0 0;
  font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.55; font-optical-sizing: auto;
  text-wrap: pretty;
}
/* While the card is open the page is locked: no scrolling (the gutter kept, so nothing shifts with classic scrollbars)
   and no clicks or hovers reach it, so a click on the dim only closes the card. Separate rules, never one list: a
   browser without :popover-open would drop the whole list (r11-s8.css has the same note). */
html:has(.disc-pop:popover-open) { overflow: hidden; scrollbar-gutter: stable; }
html:has(.disc-pop.is-open) { overflow: hidden; scrollbar-gutter: stable; }
html:has(.disc-pop:popover-open) body > :not(.disc-pop) { pointer-events: none; }
html:has(.disc-pop.is-open) body > :not(.disc-pop) { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .disclaimer-link { transition: color 160ms ease, border-color 160ms ease; }
  .disc-pop:popover-open { animation: disc-pop-in .2s cubic-bezier(.2, .7, .2, 1); transform-origin: top right; }
  .disc-pop:popover-open::backdrop { animation: disc-pop-fade .2s linear; }
}
@media (prefers-reduced-motion: reduce) { .disclaimer-link { transition: none; } }
@keyframes disc-pop-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes disc-pop-fade { from { opacity: 0; } }
/* Browsers without popovers (Safari < 17): disclaimer.js opens it as the same fixed card, the page dimmed by a shadow. */
@supports not selector(:popover-open) {
  .disc-pop { display: none; }
  .disc-pop.is-open {
    display: block; z-index: 1000;
    box-shadow: 0 0 0 100vmax rgba(36, 38, 42, .3), 0 24px 56px -20px rgba(24, 26, 30, .32);
  }
}

/* ---------- Hero: the econ-scenarios stage in slate and gold (motion: hero-motion.css) ---------- */
/* Grayscale antialiasing for the hero copy and the chip only (thinner stems on macOS, as the reference). */
.hero, .topbar { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.hero {
  position: relative;
  box-sizing: border-box;
  min-height: max(640px, 100vh);
  min-height: max(640px, 100svh);
  padding: var(--hero-top) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--hero-ground) calc(100% - var(--hero-feather)), var(--slate-50) 100%);
}
.hero-frame { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.hero-frame svg.mosaic,
.hero-frame svg.mosaic-light { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.hero-inner {
  position: relative; z-index: 1; box-sizing: border-box;
  width: 100%; max-width: calc(802px + 2 * var(--hero-col-pad)); padding: 0 var(--hero-col-pad);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero-title {
  margin: 0; width: 100%; max-width: 802px;
  font-family: var(--serif); font-weight: 450; font-size: clamp(34px, 6.72vw, 64px);
  line-height: 1.133; letter-spacing: 0; font-optical-sizing: auto;
  text-align: center; color: var(--slate-900);
}
.hero-line { display: block; white-space: nowrap; }
.hero-kicker {
  margin: 12px 0 0; font-family: var(--mono); font-weight: 500; font-size: 13px; line-height: 20px;
  letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--slate-800);
}
.hero-lede {
  margin: 24px 0 0; width: 100%; max-width: 596px;
  font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.55; letter-spacing: 0;
  text-align: left; text-wrap: pretty; color: var(--hero-lede);
}
.scroll-cue, .scroll-cue:hover { color: var(--slate-900); }
.scroll-cue {
  position: relative; margin-top: 24px; box-sizing: border-box; height: 28px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 12px;
  border: 1px solid var(--slate-200); border-radius: 6px; background: var(--slate-50);
  font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 20px; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
}
.scroll-cue::after { content: ""; position: absolute; inset: -8px -4px; }  /* 44px-tall tap target, invisible */
.scroll-cue:hover { opacity: .85; }                                          /* reference: instant .85 */
.scroll-cue:focus-visible { border-radius: 6px; }
.cue-arrow { display: block; flex: none; width: 12px; height: 12px; color: var(--gold); }

/* ---------- Study sections ---------- */

.section {
  min-height: 100vh;
  min-height: 100svh;
  /* Text column on the left; the right padding leaves room for the bubble. */
  padding: 96px clamp(24px, 16vw, 230px) 96px clamp(24px, 8vw, 120px);
  border-top: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.section-num {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--slate-800);
}

.section-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 450;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--slate-900);
}

.section-body,
.section-body p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 19px;
  line-height: 30px;
  color: var(--slate-800);
}

.section-body { max-width: 560px; }

.section-body p { text-wrap: pretty; }

div.section-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Bubble rail ---------- */

/* HIDDEN (no class): parked fully off the right edge while #s1 is active. */
.rail {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 10;
  width: var(--rail-w);
  padding: var(--rail-pad-y) 0 var(--rail-pad-y) 16px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-right: 0;
  border-radius: 22px 0 0 22px;
  box-shadow: 0 10px 30px rgba(48, 50, 54, .12);
  transform: translateY(-50%) translateX(calc(100% + 40px));
  transition: transform .5s var(--ease-close);
  /* Layout only: paint containment would clip the vertical label above the bubble
     and the overshoot tail beyond its right edge. */
  contain: layout;
}

/* Overshoot tail: the spring pulls the bubble a few px left of the screen edge; this
   white strip keeps the bubble glued to the edge so no gap ever shows. */
.rail::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 100%;
  width: 24px;
  background: var(--white);
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  pointer-events: none;
}

/* TUCKED: only the track and ticks peek out. */
.rail.is-out {
  transform: translateY(-50%) translateX(calc(100% - var(--rail-peek)));
}

/* EXPANDED: bubbles out with the spring. */
.rail.is-out.is-open {
  transform: translateY(-50%) translateX(0);
  transition-timing-function: var(--ease-open);
}

/* Keyboard focus inside the rail expands it through hero.js (.is-open), so Escape and the
   toggle can still close it; there is deliberately no :focus-visible override here. */

/* The pinned parts: counter-shifted while hidden / tucked, at rest when expanded. */
.rail-track,
.rail-tick,
.rail-current {
  transform: translateX(calc(-1 * var(--rail-tuck)));
  transition: transform .5s var(--ease-close);
}

.rail.is-out.is-open .rail-track,
.rail.is-out.is-open .rail-tick,
.rail.is-out.is-open .rail-current {
  transform: translateX(0);
  transition-timing-function: var(--ease-open);
}

/* Track spans row 1 centre to row 7 centre. */
.rail-track {
  position: absolute;
  right: var(--rail-edge);
  top: calc(var(--rail-pad-y) + var(--rail-row) / 2);
  bottom: calc(var(--rail-pad-y) + var(--rail-row) / 2);
  width: 1.5px;
  background: var(--slate-300);
  pointer-events: none;
}

.rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  /* hero.js sets --rail-p (0..1, unitless): a transform, so no layout per scroll frame. */
  transform: scaleY(var(--rail-p, 0));
  transform-origin: top;
  transition: transform .15s linear;
}

a.rail-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: var(--rail-row);
  padding-right: var(--rail-edge);
  text-decoration: none;
  border-radius: 8px;
}

a.rail-item:focus-visible {
  outline-offset: -2px;
  border-radius: 8px;
}

.rail-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--slate-800);
  /* Labels only show in the expanded bubble. */
  opacity: 0;
  transition: opacity .2s ease, color .3s ease;
}

.rail.is-out.is-open .rail-label { opacity: 1; transition: opacity .3s ease .08s, color .3s ease; }

.rail-num { color: var(--rail-num); }

a.rail-item:hover .rail-label { color: var(--slate-900); }

a.rail-item.is-active .rail-label {
  color: var(--slate-900);
  font-weight: 600;
}

a.rail-item.is-active .rail-num { color: var(--gold-lo); }

.rail-tick {
  flex: none;
  display: block;
  width: var(--rail-tick);
  height: 1.5px;
  background: var(--slate-500);
  transition: transform .5s var(--ease-close), width .3s ease, background-color .3s ease;
}

.rail.is-out.is-open .rail-tick {
  transition: transform .5s var(--ease-open), width .3s ease, background-color .3s ease;
}

a.rail-item.is-done .rail-tick,
a.rail-item.is-active .rail-tick { background: var(--gold); }

a.rail-item.is-active .rail-tick { width: var(--rail-tick-on); }

/* Tucked, the visible strip of each row is its tick: a tap or click jumps to that chapter. */
a.rail-item { -webkit-tap-highlight-color: transparent; }

/* Tiny "0N Name" beside the line while tucked (compact layout only). */
.rail-current {
  position: absolute;
  right: 11px;
  bottom: calc(100% + 15px);
  display: none;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--slate-900);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease-close), opacity .3s ease;
}

.rail-current-num { color: var(--gold-lo); }

.rail.is-out.is-open .rail-current {
  transition: transform .5s var(--ease-open), opacity .2s ease;
}

.rail.is-out:not(.is-open) .rail-current { opacity: 1; }

/* ---------- Compact (phone, or very short windows) ---------- */

@media (max-width: 767px), (max-height: 520px) {

  :root {
    --rail-w: 176px;
    --rail-peek: 30px;
    --rail-row: 36px;
    --rail-pad-y: 8px;
    --rail-edge: 10px;
    --rail-tick: 7px;
    --rail-tick-on: 14px;
  }

  :root { --hero-col-pad: 24px; }
  .hero-title { font-weight: 485; line-height: 1.115; }
  .byline { padding: 5px 10px; font-size: 12px; line-height: 18px; }
  .topbar { gap: 6px; }
  .disclaimer-link { gap: 4px; padding: 5px 8px; font-size: 11px; line-height: 18px; }
  .disclaimer-link svg { width: 11px; height: 11px; }
  .disclaimer-link::after { content: ""; position: absolute; inset: -7px -3px; }   /* 44px tall touch target */
  .disc-pop { inset: var(--disc-top, 57px) var(--disc-right, 24px) auto auto; width: min(400px, calc(100vw - 48px)); padding: 18px 18px 20px; }
  .disc-pop-x { top: 2px; right: 2px; width: 44px; height: 44px; }
  .disc-pop-h { font-size: 20px; }
  .disc-pop-lines { width: 106px; }
  .disc-pop-p { margin-top: 16px; font-size: 16px; line-height: 1.5; }
  .hero-kicker { margin-top: 10px; font-size: 12px; line-height: 16px; }
  .hero-lede { margin-top: 12px; max-width: none; font-size: 15px; line-height: 24px; }
  .scroll-cue { margin-top: 12px; }

  .section {
    padding: 80px 52px 80px 24px;
    gap: 16px;
  }

  .section-num   { font-size: 12px; }

  /* 36 at 337 and below, 42 from 400 (402 on the 17 Pro). */
  .section-title {
    font-size: clamp(36px, calc(4px + 9.5vw), 42px);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .section-body,
  .section-body p {
    font-size: 16px;
    line-height: 25px;
  }

  div.section-body { gap: 16px; }

  @media (min-width: 390px) {
    .section-body,
    .section-body p {
      font-size: 17px;
      line-height: 27px;
    }
  }

  /* ----- Rail ----- */

  .rail {
    padding: var(--rail-pad-y) 0 var(--rail-pad-y) 14px;
    border-radius: 20px 0 0 20px;
    transition: transform .36s var(--ease-close);
  }

  .rail.is-out.is-open { transition: transform .42s var(--ease-open); }

  .rail-track { transition: transform .36s var(--ease-close); }

  .rail.is-out.is-open .rail-track { transition: transform .42s var(--ease-open); }

  /* Labels end on one edge: inactive ticks are pushed in by the active tick's extra width. */
  a.rail-item { gap: 6px; }

  a.rail-item:not(.is-active) .rail-tick {
    margin-left: calc(var(--rail-tick-on) - var(--rail-tick));
  }

  .rail-tick {
    transition: transform .36s var(--ease-close), width .24s ease-out,
                background-color .24s ease, margin-left .3s ease;
  }

  .rail.is-out.is-open .rail-tick {
    transition: transform .42s var(--ease-open), width .24s ease-out,
                background-color .24s ease, margin-left .3s ease;
  }

  .rail-label { gap: 7px; }

  .rail.is-out.is-open .rail-label { transition: opacity .2s ease .14s, color .3s ease; }

  .rail-current {
    display: block;
    right: 6px;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: .1em;
    /* Solid backing: the label can sit over the hero's right tile column (WCAG 1.4.3). */
    padding: 3px 1px;
    border-radius: 4px;
    background: var(--slate-50);
    transition: transform .36s var(--ease-close), opacity .3s ease;
  }

  .rail.is-out.is-open .rail-current {
    transition: transform .42s var(--ease-open), opacity .2s ease;
  }

  /* Label swap on a chapter change (hero.js restarts .is-swap and drops it on animationend).
     Opacity and the 6px rise only, on the individual translate property: the tuck transform
     is never touched. */
  @keyframes rail-swap {
    from { opacity: 0; translate: 0 6px; }
    to   { opacity: 1; translate: 0 0; }
  }

  .rail.is-out:not(.is-open) .rail-current.is-swap {
    animation: rail-swap 240ms cubic-bezier(.2, 0, 0, 1) backwards;
  }
}

/* ---------- Portrait phones: full-bleed top and bottom bands, text on the white ground ---------- */
@media (max-width: 767px) and (orientation: portrait) {
  :root { --hero-top: 64px; }   /* the stage starts under a 64px strip, as the reference's nav */
  .topbar { top: 17px; right: 24px; }
  .hero { min-height: max(560px, 100vh); min-height: max(560px, 100svh); }
  /* Of the small viewport: a fixed offset from the top, so the rail and its section label hold still
     while Safari's bars collapse or come back (a % top follows the visible viewport's height). */
  .rail { top: 56%; top: 56svh; }
}

/* No progress rail on phones (owner, 16 Oct 2026): the bubble, its ticks and the vertical chapter label go. */
@media (max-width: 767px) {
  .rail { display: none; }
}

/* ---------- Landscape phones and short windows: side bands only, one-line headline ---------- */
@media (max-width: 767px) and (orientation: landscape), (max-height: 520px) and (orientation: landscape) {
  :root { --hero-top: 0px; --hero-feather: 24px; }   /* critic C5: 88px would run under the cue at 667x375 */
  .topbar { top: 10px; right: 16px; }
  .hero { min-height: max(340px, 100vh); min-height: max(340px, 100svh); }
  .hero-inner { max-width: min(560px, calc(100vw - 208px)); }
  .hero-line { display: inline; }
  .hero-title { font-size: 34px; }
  .hero-lede { line-height: 22px; }
}

/* Rail rows: 40px on portrait phones 700px tall and up (bubble 298px), the 36px compact
   default from 460 to 699, 30px only below 460 (landscape). The desktop bubble keeps 44px. */
@media (max-width: 767px) and (min-height: 700px) {
  :root { --rail-row: 40px; }
}

@media (max-height: 459px) {
  :root { --rail-row: 30px; }
}

/* Too short for the label above the line (it would reach the byline). */
@media (max-width: 767px) and (max-height: 619px), (max-height: 520px) {
  .rail-current { display: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* No bubble transition: the rail snaps between hidden, tucked and expanded. */
  .rail,
  .rail * {
    transition: none !important;
  }

  .rail.is-out:not(.is-open) .rail-current.is-swap { animation: none; }
}