/* story-v3.css (r10): the story's type beats below the hero, after the owner's picks of 17 Oct 2026.
   A "quiet editorial" beats (desktop D1, D3, D4, D6, D7; phone P1, P4), C phone-05 (phone P3), the
   desktop year strip's once-only slide, and the device switch. The held frames (.fh) are story-figs.css;
   the map (#s3) is story-map.css; the Method's inside (#mx) is method.css.
   One beat = one screen: min-height 100svh, content centred a little high (A: padding-bottom 5svh, 4svh
   on phones). Entrances: story.js / story-reveal.css ([data-reveal] on each block; none in #s3 or .fh). */

:root {
  --beat-indent: 48px;   /* desktop: the beats start 48px in from the story's left edge (168px at 1440) */
  --ink-dim: #686E7A;    /* small secondary text: 4.77:1 on slate-50 (slate-700 is 3.8:1, below AA under 24px) */
}

/* ---------- Text rendering: all three picked mock sets set antialiased smoothing on body; the hero sets
   it for itself (hero.css), so the story does the same here. Layout does not change (iOS ignores it).
   The phone map (#s3 below 768) keeps the pre-r10 rendering, as the phone map must stay identical. */
main, .site-footer { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (max-width: 767px) { #s3 { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } }

/* ---------- Device switch: one breakpoint, the story's (768) ---------- */
@media (max-width: 767px) { .dk { display: none !important; } }
@media (min-width: 768px) { .ph { display: none !important; } }

/* ---------- Sections and screens ---------- */
.step.v3 { --step-pt: 0px; --step-pb: 0px; }

.beat {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 5vh var(--beat-indent);
}
@supports (height: 1svh) {
  .beat { min-height: 100svh; padding-bottom: 5svh; }
}
.beat > * { margin: 0; }

/* ---------- Shared type ---------- */
.bt-say {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.16;
  letter-spacing: -.012em;
  max-width: 15.5em;
  text-wrap: balance;
  font-optical-sizing: auto;
  color: var(--slate-900);
}
.bt-k {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--slate-700);
}
.beat > .bt-k { margin-bottom: 22px; }
.bt-aside {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  max-width: 34em;
  text-wrap: pretty;
  color: var(--slate-800);
}
.bt-num {
  font-family: var(--serif);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.025em;
  line-height: .95;
  white-space: nowrap;
  font-optical-sizing: auto;
  color: var(--slate-900);
}
.bt-lbl {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .005em;
  color: var(--slate-800);
}
.bt-inv {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: .02em;
  color: var(--ink-dim);
}

/* ---------- s2 The data (A desk-01 / phone-01) ---------- */
.dt-datum {
  --dt-big: clamp(64px, calc((100vw - 454px) / 4.39), 200px);   /* 200 at 1440; the row always fits */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 44px;
}
.beat > .dt-datum { margin-top: 28px; }
.dt-big { font-size: var(--dt-big); margin-left: -.05em; }
.dt-beside {
  font-family: var(--serif);
  font-size: clamp(20px, calc(var(--dt-big) * .15), 30px);
  line-height: 1.2;
  color: var(--slate-800);
  margin-bottom: calc(var(--dt-big) * .26);
}
.beat > .dt-datum + .bt-aside { margin-top: 28px; }

/* ---------- s4 The gold store, desktop (A desk-03) ---------- */
.st-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 28px;
  color: var(--slate-800);
}
.beat > .st-name { margin-top: 30px; }
.st-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  font-size: clamp(36px, calc((100vw - 188px) / 15), 80px);   /* fallback: 20px slack for a classic scrollbar */
  font-size: clamp(36px, calc(100cqi / 15), 80px);              /* the beat's content width, scrollbar or not */
}
#s4 > .beat { container-type: inline-size; }
.beat > .st-eq { margin-top: 56px; }
.st-t { display: flex; flex-direction: column; }
.st-n { font-size: 1em; }
.st-op {
  font-family: var(--serif);
  font-size: 1em;
  line-height: .95;
  padding: 0 .28em;
  color: var(--slate-700);   /* the operators carry the sum: never the 2.2:1 slate-500 */
}
.st-l { margin-top: 18px; }
.st-i { margin-top: 6px; }
/* The number alone sets its column's width: where a label is wider than its number (768-~850, the
   credit note's), it runs on under the operator instead of pushing the next operator away. */
.st-l, .st-i { width: 0; white-space: nowrap; }
.st-unit {
  font-family: var(--serif);
  font-size: .425em;
  line-height: 1;
  margin: 1.06em 0 0 .3em;
  color: var(--ink-dim);
}
.st-mark { position: relative; display: inline-block; }
.st-mark::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -6px;
  height: 3px;
  border-radius: 2px;
  background: var(--tile-gold);
}
.beat > .st-eq + .bt-aside { margin-top: 40px; }

/* ---------- s4 The gold store, phone (C phone-05) ---------- */
.sp-h {
  font-family: var(--serif);
  font-weight: 450;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--slate-900);
}
.sp-lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--slate-800);
}
.beat > .sp-lede { margin-top: 16px; }
.beat > .sp-sum { margin-top: 34px; }
.sp-term { display: grid; grid-template-columns: 26px 1fr; margin-bottom: 22px; }
.sp-op { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--slate-700); }
.sp-n {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
  color: var(--slate-900);
}
.sp-n.is-credit {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 7px;
}
.sp-kr { display: inline-block; font-size: 18px; color: var(--ink-dim); margin-left: 4px; }
.sp-meta {
  grid-column: 2;
  margin-top: 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.sp-small {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--ink-dim);
}
.beat > .sp-sum + .sp-small { margin-top: 4px; }

/* ---------- s5 Asked (A desk-04 / phone-04) ---------- */
.ak { margin: 0; }
.ak-q {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  max-width: 21em;
  text-wrap: balance;
  color: var(--slate-900);
}
.ak-q p { margin: 0; }
.ak-by { margin-top: 18px; }
.beat > .ak:last-child > .ak-by { margin-bottom: 14px; }   /* A's centring counts the caption's 1em under it */
.ak-between {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 22px;
  color: var(--ink-dim);
}
.beat > .ak-between { margin: 86px 0 72px; }

/* ---------- s7 The question, desktop (A desk-06, desk-07a/b) ---------- */
.qn-pair {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: end;
  justify-content: start;
  column-gap: 56px;
}
.beat > .qn-pair { margin-top: 64px; }
.qn-cell { display: flex; flex-direction: column; }
.qn-l { order: -1; margin-bottom: 18px; }
.qn-n { font-size: clamp(56px, 10.3vw, 148px); }
.qn-u { font-size: .297em; letter-spacing: 0; margin-left: .15em; color: var(--ink-dim); }
.qn-arrow {
  font-family: var(--serif);
  font-size: clamp(32px, 4.45vw, 64px);
  line-height: 1;
  padding-bottom: 30px;
  color: var(--slate-700);
}
.qn-pair--date .qn-n { font-size: clamp(48px, 7.8vw, 112px); }
.qn-pair--date .qn-u { font-size: .393em; }
.beat > .qn-pair + .bt-aside { margin-top: 44px; }

/* The year strip (A desk-07): 1 Nov 2023 .. 1 Feb 2024 across its width (92 days); positions in % of it,
   type in px, so it narrows without its labels shrinking. */
.yr-strip {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 176px;
  container-type: inline-size;
  font-family: var(--sans);
}
.beat > .yr-strip { margin-top: 40px; }
.beat > .yr-strip + .bt-aside { margin-top: 28px; }
.yr-strip > * { position: absolute; }
.yr-axis { left: 0; right: 0; top: 93.5px; height: 1px; background: var(--slate-300); }
.yr-tick { top: 94px; width: 1px; height: 5px; background: var(--slate-500); left: calc(var(--x) * 1%); }
.yr-mon {
  top: 164px;
  left: calc(var(--x) * 1% + 5px);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: .06em;
  color: var(--ink-dim);
}
.yr-year { top: 6px; height: 156px; width: 1px; left: calc(66.30% - .5px); background: var(--slate-700); }
.yr-y {
  top: 4px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 22px;
  color: var(--ink-dim);
}
.yr-y0 { right: calc(100% - 66.30% + 10px); }
.yr-y1 { left: calc(66.30% + 10px); }
.yr-up { left: calc(47.83% - 1px); top: calc(94px - 52.25px); width: 2px; height: 52.25px; background: var(--slate-800); }
.yr-dn { left: calc(47.83% - 1px); top: 94px; width: 2px; height: 52.25px; background: var(--slate-500); }
.yr-pair-l {
  right: calc(100% - 47.83% + 9px);
  top: 111px;
  font-size: 13px;
  line-height: 18px;
  color: var(--slate-800);
  white-space: nowrap;
}
.yr-trail-v {   /* A: dasharray 2 4, opacity .7 */
  left: calc(32.61% - .5px);
  top: 34px;
  width: 1px;
  height: 60px;
  background: repeating-linear-gradient(180deg, var(--tile-gold) 0 2px, transparent 2px 6px);
  opacity: .7;
}
.yr-trail-h {
  left: calc(32.61% + 6px);
  width: calc(34.78% - 14px);
  top: 33.5px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--tile-gold) 0 2px, transparent 2px 6px);
  transform-origin: 0 0;
}
.yr-new { left: 67.39%; top: 34px; width: 0; height: 60px; }
.yr-stem { position: absolute; left: -1.5px; top: 0; width: 3px; height: 60px; background: var(--tile-gold); }
.yr-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.yr-new-l {
  position: absolute;
  top: -10px;
  font-size: 13px;
  line-height: 18px;
  color: var(--slate-800);
  white-space: nowrap;
}
.yr-new-a { right: 10px; }
.yr-new-b { left: 10px; }

/* Final state by default (no JS, reduced motion, print): the new invoice at 2 Jan, its label to the right,
   the dashed trail from 1 Dec. Until the strip is half on screen (story-figs.js: .is-seen, once; its own
   observer, not the entrance engine's look-ahead, so a rail jump, PageDown or a flick that passes the
   strip while it is still below the fold does not use the slide up) it waits at 1 Dec. A strip already
   on screen when the page opens gets .yr-instant: no slide. */
.yr-new-a { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.has-reveal .yr-strip:not(.is-seen) .yr-new { translate: -34.78cqw 0; }
  html.has-reveal .yr-strip:not(.is-seen) .yr-new-a { opacity: 1; }
  html.has-reveal .yr-strip:not(.is-seen) .yr-new-b { opacity: 0; }
  html.has-reveal .yr-strip:not(.is-seen) .yr-trail-h { transform: scaleX(0); }
  html.has-reveal .yr-strip:not(.is-seen) .yr-trail-v { opacity: 0; }
  html.has-reveal .yr-strip .yr-new { transition: translate 1.1s cubic-bezier(.45, .05, .3, 1) .5s; }
  html.has-reveal .yr-strip .yr-trail-h { transition: transform 1.1s cubic-bezier(.45, .05, .3, 1) .5s; }
  html.has-reveal .yr-strip .yr-trail-v { transition: opacity .3s linear .5s; }
  html.has-reveal .yr-strip .yr-new-a { transition: opacity .2s linear .45s; }
  html.has-reveal .yr-strip .yr-new-b { transition: opacity .3s linear 1.5s; }
  html.has-reveal .yr-strip.yr-instant * { transition: none; }
}

/* ---------- s6 / s7: sections that hold a figure frame (story-figs.css styles .fh) ---------- */
.v3-hold { padding-top: 0; padding-bottom: 0; }

/* ---------- s8 Method: the shell (method.css styles #mx inside it) ---------- */
.v3-method { padding-bottom: 72px; }

/* ---------- 768-1023: one size down where a line would crowd ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .bt-say, .ak-q { font-size: 36px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  :root { --beat-indent: 0px; }
  .beat { padding-bottom: 4vh; }
  @supports (height: 1svh) { .beat { padding-bottom: 4svh; } }

  .bt-say { font-size: 30px; line-height: 1.16; }
  .bt-aside { font-size: 16px; line-height: 1.55; }
  .bt-lbl { font-size: 13px; line-height: 1.4; }

  .dt-datum { flex-direction: column; align-items: flex-start; }
  .beat > .dt-datum { margin-top: 22px; }
  .dt-datum { --dt-big: clamp(60px, 18.5vw, 200px); }
  .dt-big { margin-left: -3px; }
  .dt-beside { font-size: 22px; margin: 28px 0 22px; }
  .beat > .dt-datum + .bt-aside { margin-top: 22px; }

  .v3-method { padding-bottom: 48px; }

  .ak-q { font-size: 27px; line-height: 1.22; }
  .ak-between { font-size: 18px; line-height: 18px; }
  .beat > .ak-between { margin: 57px 0 44px; }
  .beat > .ak:last-child > .ak-by { margin-bottom: 13px; }
}

/* ---------- Progress rail, desktop (r11 polish round 2; the rail itself is hero.css / hero.js) ----------
   Desktop only: the phone has no rail (hero.css hides it under 768) and short windows (<= 520px tall) keep
   the compact values. */
@media (min-width: 768px) and (min-height: 521px) {
  /* The active tick, 22 -> 18px: tucked, it ended on the bubble's left border (x 1478 at 1512); now 3px of
     white sit between them, as on the inactive ticks' side. */
  :root { --rail-tick-on: 18px; }
  /* Tucked, the whole visible strip of a row jumps to its section: the bubble's 16px left padding and 1px
     border (x 1478-1494 at 1512) were dead, only the 17px from x 1495 and the tick itself took the click. */
  .rail.is-out:not(.is-open) a.rail-item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -17px;
    width: 17px;
  }
}
/* The gold fill follows the ticks (r11-rail.js writes --r11-rail-p: tick i when the window's middle enters
   section i, then towards tick i+1 through it). Without that script the page fraction from hero.js. */
@media (min-width: 768px) {
  nav.rail .rail-fill { transform: scaleY(var(--r11-rail-p, var(--rail-p, 0))); }
}