/* 04 · Money · the chapter's own sheet.
   ===========================================================================
   Rebuilt on 19 September 2026 as B · Passage, chosen from three complete
   reworks (previews/money-rework/, docs/DESIGN.md "Three reworks of the Money
   chapter" and the record that follows it). The chapter is generated by
   tools/build-money-chapter.mjs; this sheet is authored.

   THE SCALE IS THE POINT OF THIS FILE. The sheet it replaces authored
   twenty-five type sizes, sixteen of them off the ramp in theme.css, and set
   body prose at three sizes inside a three-pixel span. This one declares
   eight steps, every one a step on the ramp, and the generator's --check
   fails on any authored font-size that is not one of the thirteen ramp steps.

     cover      the chapter title, once
     statement  the shared chapter section heading
     close      the epilogue's statement, once, at the archive's end marker
     figure     an instrument numeral, tabular, paired with a small unit
     heading    every subheading in the chapter, at one size
     body       every paragraph, at one size
     note       glosses, captions, sources, limits
     label      mono metadata

   Everything else is the archive's own language, unchanged: the per-mode
   ground, the Money field and ink pair, the hairline, Geist Mono for
   metadata, deeply rounded translucent controls, no resting shadow, and the
   floating shell. Four things are worth knowing before editing:

   - The document scrolls continuously. Sections size to their content, and
     the shared section heading leads each reading and instrument.
   - The sections extend behind the rail while their contents keep its inset.
   - Every entrance animation is gated on html.has-js, which an inline head
     script sets. Without script nothing is hidden to begin with, and a rule
     that hides what the script later reveals has to carry that gate.
   - --mhc-chapter-money-ink is a drawing token. In dark theme it resolves to
     the field value, which measures 3.36:1 against the deepest pixel the field
     can put behind it, so words take --mhc-field-notation instead. Marks keep
     the ink. */

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* -- the eight steps, all from --mhc-type-* ----------------------------- */
  --r-cover: clamp(58px, 7.4vw, 100px);    /* 6xl -> 8xl */
  --r-statement: clamp(27px, 3.4vw, 44px); /* 3xl -> 5xl */
  /* The end marker the rest of the archive closes on is authored at
     clamp(50px, 7vw, 92px). Neither endpoint is a step on the ramp, so each
     takes the nearest one and the slope between them is kept as written. */
  --r-close: clamp(58px, 7vw, 100px);      /* 6xl -> 8xl */
  --r-figure: clamp(34px, 4.8vw, 76px);    /* 4xl -> 7xl */
  --r-heading: var(--mhc-type-2xl);        /* 21 */
  --r-body: var(--mhc-type-xl);            /* 17 */
  --r-note: var(--mhc-type-md);            /* 13 */
  --r-label: var(--mhc-type-xs);           /* 11 */

  --r-measure: 66ch;
  --r-gutter: clamp(20px, 4.2vw, 68px);
  --r-gap: clamp(28px, 3.4vw, 60px);
  --r-section: clamp(72px, 8vw, 132px);

  --r-sans: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --r-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --r-money: var(--mhc-chapter-money-field);
  --r-money-ink: var(--mhc-chapter-money-ink);
  --r-money-type: var(--mhc-field-notation, var(--mhc-chapter-money-ink));
  --r-line: var(--mhc-hairline);
  --r-line-soft: var(--mhc-hairline-soft);
  --r-wash: color-mix(in srgb, var(--r-money) 9%, transparent);
  --r-wash-soft: color-mix(in srgb, var(--r-money) 5%, transparent);
  /* Shape on tokens for the same reason type is: DESIGN.md's Shapes section
     is rectilinear, allows 2 to 3px on small marks, and reserves the stadium
     for a control; the Money record adds this chapter's own panel corner. */
  --r-radius: 999px;
  --r-radius-panel: 26px;
  --r-radius-card: 14px;
  --r-radius-mark: 3px;
  --r-ease: cubic-bezier(.16, 1, .3, 1);
  --r-ease-frame: cubic-bezier(.33, 1, .68, 1);
  /* ink-2 (.80) measures 5.03:1 against the deepest dark-theme pixel the
     field can produce; ink-3 (.72) measures 4.42, under the note tier's 4.5. */
  --r-ink-soft: var(--mhc-ink-2);
}

/* The two properties the shell reads from a chapter sheet: the rail's
   progress fill and the section accent take the chapter's color from them. */
body[data-chapter='money'] { --mhc-chapter-color:var(--mhc-chapter-money-field); --mhc-rail-section-accent:var(--mhc-chapter-money-field); }

* { box-sizing: border-box; }
html { background: var(--mhc-ground); scrollbar-color: var(--mhc-ink-4) var(--mhc-ground); scrollbar-width: thin; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip; background: var(--mhc-ground); color: var(--mhc-ink);
  font: 400 var(--r-body)/1.58 var(--r-sans); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 400; }
p { text-wrap: pretty; }
button, a, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; text-align: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--r-money-ink); outline-offset: 3px; border-radius: var(--r-radius-mark); }
::selection { background: var(--r-money); color: var(--mhc-on-chroma); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* -- the type classes ------------------------------------------------------ */
.t-cover { font-size: var(--r-cover); font-weight: 300; line-height: .88; letter-spacing: -.035em; }
/* Leading opens as the size closes: 1.04 at 44px, 1.16 at the 27px floor. */
.t-statement { font-size: var(--r-statement); font-weight: 300; line-height: 1.16; letter-spacing: -.026em; max-width: 19ch; }
@media (min-width: 900px) { .t-statement { line-height: 1.06; } }
.t-figure { font-size: var(--r-figure); font-weight: 300; line-height: .84; letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.t-heading { font-size: var(--r-heading); font-weight: 400; line-height: 1.24; letter-spacing: -.018em; }
.t-body { font-size: var(--r-body); line-height: 1.58; max-width: var(--r-measure); }
.t-note { font-size: var(--r-note); line-height: 1.52; color: var(--r-ink-soft); max-width: 62ch; }
.t-label { font: 500 var(--r-label)/1.3 var(--r-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--r-ink-soft); }
.t-unit { font: 400 var(--r-note)/1 var(--r-mono); letter-spacing: .04em; color: var(--r-money-type); text-transform: none; }
.t-statement em, .t-figure em { font-style: normal; color: var(--r-money-type); }

/* -- the gloss ---------------------------------------------------------------
   A term of art is a word in the prose with the chapter's ink under it. With
   script it opens its reading under the paragraph it sits in; without script
   the reading is simply there. The note is the default and the folding is
   what is added to it. The note is set as the archive sets a note attached to
   a reading: one 2px rule in the chapter ink and an inset, and nothing else. */
.gloss {
  color: inherit; cursor: help;
  background-image: linear-gradient(var(--r-money-ink), var(--r-money-ink));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 1.12em; padding-bottom: .06em;
  transition: background-size .3s var(--r-ease), color .3s var(--r-ease);
}
.has-js .gloss { background-image: repeating-linear-gradient(90deg, var(--r-money-ink) 0 2px, transparent 2px 4px); background-size: 100% 1px; }
.gloss:hover, .gloss[aria-expanded='true'] { color: var(--r-money-type); background-size: 100% 2px; }
.gloss[aria-expanded='true'] { background-image: linear-gradient(var(--r-money-ink), var(--r-money-ink)); }
/* The rule, the inset and the space above sit on the inner span, so the fold
   animates only the grid row and the opacity: with the outer box at 0fr the
   inner span is clipped whole, margin, border and all, and nothing about the
   layout has to be interpolated to make it disappear. */
.gloss-note { display: block; font-size: var(--r-note); line-height: 1.55; color: var(--mhc-ink-2); max-width: 58ch; }
/* Three boxes, because a box cannot be shorter than its own padding: the
   outer note is the grid whose one row folds from 1fr to 0fr, the clip inside
   it carries no margin or padding of its own and can therefore reach zero,
   and the body inside the clip carries the space above, the inset and the
   rule. Only the grid row and the opacity are ever animated. */
.gloss-clip { display: block; }
.gloss-body { display: block; position: relative; padding: 18px 0 4px 14px; }
.gloss-body::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 0; width: 2px; background: var(--r-money-ink); }
.gloss-note b { display: block; font: 500 var(--r-label)/1.3 var(--r-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--r-money-type); margin-bottom: 5px; }
.has-js .gloss-note { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--r-ease), opacity .28s var(--r-ease); }
.has-js .gloss-clip { overflow: hidden; min-height: 0; }
.has-js .gloss-note.is-open { grid-template-rows: 1fr; opacity: 1; }

/* -- disclosure ------------------------------------------------------------ */
.r-fold { border-top: 1px solid var(--r-line-soft); max-width: var(--r-measure); }
.r-fold:last-of-type { border-bottom: 1px solid var(--r-line-soft); }
.r-fold > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 2px; cursor: pointer; list-style: none;
  font: 500 var(--r-label)/1.3 var(--r-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--r-ink-soft);
  transition: color .3s var(--r-ease);
}
.r-fold > summary::-webkit-details-marker { display: none; }
.r-fold > summary:hover, .r-fold[open] > summary { color: var(--r-money-type); }
.r-fold > summary::before { content: ''; width: 9px; height: 9px; flex: none; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); transition: transform .34s var(--r-ease); }
.r-fold[open] > summary::before { transform: rotate(135deg) translate(-1px, 1px); }
.r-fold-body { padding: 2px 0 26px; }
.r-fold-body > * + * { margin-top: 14px; }
@media (prefers-reduced-motion: no-preference) { .r-fold[open] .r-fold-body { animation: r-unfold .42s var(--r-ease) both; } }
@keyframes r-unfold { from { opacity: 0; transform: translateY(-6px); } }

/* -- the ruled grid ----------------------------------------------------------
   Cells stay transparent and draw their own hairlines inset; the container
   clips the one line that would run down its outer edge. Painting cells so a
   gap shows through as a rule would lay an opaque plate on the chapter field. */
.rule-grid { display: grid; gap: 0; margin: -1px 0 0 -1px; clip-path: inset(1px 0 0 1px); }
.rule-grid > * { background: transparent; box-shadow: inset 1px 0 0 var(--r-line-soft), inset 0 1px 0 var(--r-line-soft); }

/* -- the five-stage bar ------------------------------------------------------
   Evidence coverage, never an amount. Solid documented, hatched implied,
   outline proposed, slash blocked or withdrawn, pale not established. */
.stages { display: flex; gap: 2px; align-items: stretch; }
.stages i, .stage-key b, .reading-route i {
  display: block; height: 6px; border-radius: var(--r-radius-mark);
  background: color-mix(in srgb, var(--r-money) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r-money-ink) 20%, transparent);
}
.stages i { flex: 1 1 0; }
.stage-key b { width: 22px; flex: none; }
.reading-route i { width: 18px; align-self: center; }
:is(.stages i, .stage-key li b, .reading-route i)[data-state='documented'], .stage-key li[data-state='documented'] b { background: var(--r-money-ink); box-shadow: none; }
:is(.stages i, .reading-route i)[data-state='inferred'], .stage-key li[data-state='inferred'] b { background: repeating-linear-gradient(45deg, var(--r-money-ink) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r-money-ink) 34%, transparent); }
:is(.stages i, .reading-route i)[data-state='proposed'], .stage-key li[data-state='proposed'] b { background: none; box-shadow: inset 0 0 0 1px var(--r-money-ink); }
:is(.stages i, .reading-route i)[data-state='blocked'], :is(.stages i, .reading-route i)[data-state='withdrawn'],
.stage-key li[data-state='blocked'] b, .stage-key li[data-state='withdrawn'] b {
  background: linear-gradient(115deg, transparent calc(50% - 1px), var(--r-money-ink) calc(50% - 1px), var(--r-money-ink) calc(50% + 1px), transparent calc(50% + 1px));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r-money-ink) 42%, transparent);
}
.evidence-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 10px 20px; border: 1px solid var(--r-line-soft); border-radius: var(--r-radius-panel); background: var(--r-wash-soft); }
.stage-key { display: flex; flex: 1 1 560px; flex-wrap: wrap; gap: 12px 22px; padding-block: 8px; }
.stage-key li { display: flex; align-items: center; gap: 8px; }
.stage-key span { font-size: var(--r-note); line-height: 1.35; color: var(--mhc-ink); }
.evidence-key-definitions { flex: 0 0 auto; min-width: 0; }
.evidence-key-definitions[open] { flex-basis: 100%; }
.evidence-key-definitions > summary { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; cursor: pointer; list-style: none; font-size: var(--r-note); color: var(--r-ink-soft); border-radius: var(--r-radius); }
.evidence-key-definitions > summary::-webkit-details-marker { display: none; }
.evidence-key-definitions > summary::after { content: ''; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.evidence-key-definitions[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.evidence-key-definitions > summary:is(:hover, :focus-visible) { color: var(--r-money-type); }
.stage-definitions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; padding: 16px 0 12px; border-top: 1px solid var(--r-line-soft); }
.stage-definitions dt { margin-bottom: 4px; font-size: var(--r-body); color: var(--mhc-ink); }
.stage-definitions dd { font-size: var(--r-note); color: var(--r-ink-soft); }
@media (max-width: 700px) {
  .evidence-key { gap: 4px 16px; padding: 12px 18px; }
  .stage-key { gap: 14px 20px; }
  .stage-definitions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 380px) { .stage-definitions { grid-template-columns: minmax(0, 1fr); } }

/* -- instruments ------------------------------------------------------------- */
.chart { width: 100%; height: auto; overflow: visible; }
.chart text { font: 400 11px/1 var(--r-mono); letter-spacing: .04em; fill: var(--r-ink-soft); }
.chart .axis-rule { stroke: var(--r-line-soft); stroke-width: 1; }
.chart .axis-rule.is-floor { stroke: var(--r-line); }
.chart .series-field { fill: var(--r-money); opacity: .3; }
.chart .series-line { fill: none; stroke: var(--r-money-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-dot { fill: var(--mhc-ground); stroke: var(--r-money-ink); stroke-width: 1.5; }
.chart .series-dot.is-last { fill: var(--r-money-ink); }
.chart .break-line { stroke: var(--r-money-ink); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.chart .value-label { fill: var(--mhc-ink-2); font-size: 10px; }
.has-js {
  @media (prefers-reduced-motion: no-preference) {
    .chart .series-line { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
    .is-drawn .chart .series-line { animation: r-draw 1.5s var(--r-ease-frame) forwards; }
    .chart .series-field { opacity: 0; }
    .is-drawn .chart .series-field { animation: r-fill .9s .5s var(--r-ease) forwards; }
    .chart .series-dot, .chart .value-label { opacity: 0; }
    .is-drawn .chart .series-dot { animation: r-pop .4s var(--r-ease) forwards; animation-delay: calc(.5s + var(--i, 0) * .045s); }
    .is-drawn .chart .value-label { animation: r-pop .4s var(--r-ease) forwards; animation-delay: calc(.7s + var(--i, 0) * .045s); }
    .growth-bar { transform: scaleX(0); transform-origin: left 50%; }
    .is-drawn .growth-bar { animation: r-grow .8s var(--r-ease-frame) forwards; animation-delay: calc(var(--i, 0) * .07s); }
    .revenue i { transform: scaleY(0); transform-origin: 50% 100%; }
    .is-drawn .revenue i { animation: r-rise .7s var(--r-ease-frame) forwards; animation-delay: calc(var(--i, 0) * .04s); }
    .r-rise { opacity: 0; transform: translateY(14px); }
    .is-shown .r-rise, .r-rise.is-shown { opacity: 1; transform: none; transition: opacity .6s var(--r-ease), transform .6s var(--r-ease); transition-delay: calc(var(--i, 0) * .06s); }
  }
}
@keyframes r-draw { to { stroke-dashoffset: 0; } }
@keyframes r-fill { to { opacity: .3; } }
@keyframes r-pop { to { opacity: 1; } }
@keyframes r-grow { to { transform: scaleX(1); } }
@keyframes r-rise { to { transform: scaleY(1); } }

.growth { display: grid; gap: 3px; }
.growth-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 13px 16px; border-radius: var(--r-radius-card); align-items: center; transition: background .34s var(--r-ease); }
.growth-row:hover { background: var(--r-wash-soft); }
.growth-row[aria-pressed='true'] { background: var(--r-wash); }
.growth-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.growth-head b { font-weight: 400; font-size: var(--r-note); }
.growth-head span { font: 400 var(--r-label)/1 var(--r-mono); color: var(--r-money-type); letter-spacing: .04em; }
.growth-track { position: relative; height: 16px; border-radius: var(--r-radius); background: var(--r-wash-soft); }
.growth-track::before { content: ''; position: absolute; inset: -3px auto -3px 25%; width: 1px; background: var(--r-line); }
/* --from is already measured from the track's left edge with zero at 25%. */
.growth-bar { position: absolute; top: 0; bottom: 0; border-radius: var(--r-radius); left: calc(var(--from, 0) * 1%); width: calc(var(--w, 0) * 1%); background: var(--r-money-ink); }
.growth-bar[data-kind='price'] { background: color-mix(in srgb, var(--r-money-ink) 34%, var(--mhc-ground)); }
.growth-bar[data-kind='negative'] { background: none; box-shadow: inset 0 0 0 1.5px var(--r-money-ink); }
.growth-row[data-kind='decline'] .growth-bar { background: none; box-shadow: inset 0 0 0 1.5px var(--r-money-ink); }

.revenue { display: flex; align-items: flex-end; gap: clamp(3px, .6vw, 9px); height: clamp(150px, 20vw, 232px); }
.revenue button { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; height: 100%; cursor: pointer; border-radius: var(--r-radius-mark); padding-top: 15px; transition: background .3s var(--r-ease); }
.revenue button:hover, .revenue button[aria-pressed='true'] { background: var(--r-wash-soft); }
.revenue i { display: block; border-radius: var(--r-radius-mark) var(--r-radius-mark) 0 0; height: calc(var(--v) / 42.4 * 100%); min-height: 2px; background: color-mix(in srgb, var(--r-money-ink) 42%, var(--mhc-ground)); transition: background .3s var(--r-ease); }
.revenue button[aria-pressed='true'] i, .revenue button:hover i, .revenue button.is-edition i { background: var(--r-money-ink); }
.revenue button.is-edition i { position: relative; overflow: visible; }
.revenue button.is-edition i::before { content: ''; position: absolute; left: 50%; top: 0; translate: -50% -13px; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--r-money-ink); }
.revenue span { font: 400 var(--r-label)/1 var(--r-mono); color: var(--r-ink-soft); text-align: center; }
.readout { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 1.4em; }
.readout b { font-weight: 400; font-size: var(--r-heading); font-variant-numeric: tabular-nums; }
.readout span { font: 500 var(--r-label)/1.3 var(--r-mono); letter-spacing: .1em; color: var(--r-ink-soft); text-transform: uppercase; }
.sales-source { margin-top: 6px; }

.r-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.r-scroll:focus-visible { outline-offset: 2px; }
.r-table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--r-note); }
.r-table caption { text-align: left; padding-bottom: 12px; color: var(--r-ink-soft); font-size: var(--r-note); }
.r-table th, .r-table td { padding: 9px 14px 9px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--r-line-soft); }
.r-table tbody th { width: 1%; white-space: nowrap; }
.r-table th { font: 500 var(--r-label)/1.3 var(--r-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--r-ink-soft); white-space: nowrap; }
.r-table td { color: var(--mhc-ink-2); }
.r-table .num { font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; }
.r-table thead th { border-bottom-color: var(--r-line); }

/* -- the limit: the Summary's own mark for what the evidence cannot settle -- */
.limit { display: block; position: relative; padding-left: 20px; }
.limit::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .12em; border-left: 1px dashed var(--r-money-ink); opacity: .7; }
.limit p { max-width: 62ch; font-size: var(--r-note); line-height: 1.55; color: var(--r-ink-soft); }
.limit b { display: block; font: 500 var(--r-label)/1.3 var(--r-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--r-money-type); margin-bottom: 6px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 var(--r-label)/1.3 var(--r-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--r-money-type); }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; flex: none; }
.findings { display: grid; }
.finding { padding: clamp(22px, 2.4vw, 34px) 0; display: grid; gap: 14px; }
.finding-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.finding-figure b { font-weight: 400; color: var(--r-money-type); }

/* ===========================================================================
   THE CONTINUOUS CHAPTER
   =========================================================================== */

.passage { position: relative; }
body.mhc-archive-enabled .passage, body.mhc-archive-enabled .reading-nav-slot { margin-left:calc(-1 * var(--elastic-content-left)); }

.frame {
  position: relative; display: grid; align-content: start;
  padding: var(--r-section) var(--r-gutter);
  scroll-margin-top: 32px;
}
body.mhc-archive-enabled .frame { padding-left: calc(var(--elastic-content-left) + var(--r-gutter)); }
.frame:last-of-type { border-bottom: 0; }
.frame-inner { width: 100%; max-width: 1360px; margin: 0 auto; display: grid; gap: clamp(44px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); align-items: start; }
.frame--wide { align-content: start; }
.frame-copy { display: grid; gap: 0; align-content: start; }
.frame-copy > :not(.gloss-note) { margin-top: 22px; }
.frame-copy > :first-child { margin-top: 0; }
.frame-copy .eyebrow { margin-bottom: 2px; }
.frame-copy .t-statement { max-width: 17ch; }
:is(.frame-inner, .spending-view) > .mhc-section-head { grid-column: 1 / -1; margin: 0; }
.frame .mhc-section-statement { --mhc-section-field-ink: var(--r-money-type); }
.frame--wide .frame-copy { max-width: var(--r-measure); }
.frame-aside { min-width: 0; }
.frame--figure .frame-aside, .frame--story .frame-aside { align-self: start; }
.frame--figure .frame-aside { width: 100%; max-width: 1100px; }

/* the cover: the woven hero as the chapter ships it, made a frame */
.woven-chapter-hero.frame--cover { height: 100svh; min-height: 620px; padding: 0; border-bottom: 0; display: block; overflow: hidden; }

/* the section dock, before the shared controller promotes it */
.reading-nav-slot { position: relative; z-index: 5; }
.reading-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; padding: 14px var(--r-gutter); }
body.mhc-archive-enabled .reading-nav { padding-left: calc(var(--elastic-content-left) + var(--r-gutter)); }
.reading-nav-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.reading-nav-links a { font: 500 var(--r-label)/1.3 var(--r-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--r-ink-soft); text-decoration: none; }
.reading-nav-links a[aria-current] { color: var(--r-money-type); }
.reading-nav-status { display: none; }

/* Two shell elements are positioned by the chapter sheet, not by the shell:
   the skip link and the drawer scrim. Left in flow, each stands on a line box
   above the whole page and shifts its contents by that height. */
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 1300; padding: 11px 20px; border-radius: var(--r-radius); background: var(--mhc-ground); color: var(--mhc-ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--r-line); }
.skip-link:focus { top: 16px; }
/* The shared shell owns capsule material; chapters supply icon geometry. */
.rail-button, .rail-top { display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.rail-button svg, .rail-top svg { fill: none; stroke: currentColor; }
#menu-toggle { position: relative; isolation: isolate; touch-action: none; }
#menu-toggle .menu-icon { position: absolute; z-index: 1; transition: opacity .2s ease, transform .38s var(--r-ease), filter .26s ease; }
#menu-toggle .menu-icon--menu { opacity: 1; }
#menu-toggle .menu-icon--home { opacity: 0; transform: scale(.82); filter: blur(3px); }
#menu-toggle .menu-hold-fill { position: absolute; inset: 0; background: var(--r-money); transform: scaleY(0); transform-origin: bottom center; }
#menu-toggle:is(.is-home-ready,.is-complete) .menu-icon--menu { opacity: 0; transform: scale(1.12); }
#menu-toggle:is(.is-home-ready,.is-complete) .menu-icon--home { opacity: 1; transform: none; filter: none; }
.rail-index { position: relative; display: grid; place-items: center; }
.rail-progress { position: absolute; pointer-events: none; }
.rail-index-label { position: relative; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--r-mono); text-transform: uppercase; }
.rail-index-label--chapter, .rail-index.is-chapter .rail-index-label--archive { display: none; }
.rail-index.is-chapter .rail-index-label--chapter { display: block; }
.drawer-scrim { position: fixed; z-index: 1040; inset: 0; opacity: 0; visibility: hidden; cursor: pointer; transition: opacity .3s ease, visibility 0s .3s; }
body.drawer-open .drawer-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }


/* The arrival: copy from the left, evidence from the right, revealed once. */
.has-js {
  @media (prefers-reduced-motion: no-preference) {
    :is(.frame-inner, .spending-view) > .mhc-section-head, .frame-copy > :not(.gloss-note), .frame-aside > :not(.gloss-note) { opacity: 0; transition: opacity .62s var(--r-ease-frame), transform .62s var(--r-ease-frame); }
    :is(.frame-inner, .spending-view) > .mhc-section-head, .frame-copy > :not(.gloss-note) { transform: translateX(-26px); }
    .frame-aside > :not(.gloss-note) { transform: translateX(26px); }
    .frame.is-revealed .mhc-section-head, .frame.is-revealed .frame-copy > :not(.gloss-note), .frame.is-revealed .frame-aside > :not(.gloss-note) { opacity: 1; transform: none; }
    .frame.is-revealed .frame-copy > :nth-child(1) { transition-delay: .06s; }
    .frame.is-revealed .frame-copy > :nth-child(2) { transition-delay: .13s; }
    .frame.is-revealed .frame-copy > :nth-child(3) { transition-delay: .2s; }
    .frame.is-revealed .frame-copy > :nth-child(n+4) { transition-delay: .27s; }
    .frame.is-revealed .frame-aside > * { transition-delay: .18s; }
    .stage-thread path { stroke-dasharray: 2200; stroke-dashoffset: 2200; }
    .frame.is-revealed .stage-thread path { animation: p-thread 1.4s .25s var(--r-ease-frame) forwards; }
    .stage-node { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--r-ease), transform .5s var(--r-ease); transition-delay: calc(.4s + var(--i, 0) * .12s); }
    .frame.is-revealed .stage-node { opacity: 1; transform: none; }
  }
}
@keyframes p-thread { to { stroke-dashoffset: 0; } }

.frame-findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; border: 1px solid var(--r-line-soft); border-radius: var(--r-radius-panel); background: var(--r-wash); }
.frame-findings li { position: relative; padding: clamp(18px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.frame-findings li + li::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--r-line-soft); mask-image: linear-gradient(transparent, #000 25% 75%, transparent); }
.frame-findings li .t-note { margin-top: auto; }
.frame-findings b { color: var(--r-money-type); font-weight: 400; }
.frame-fig { display: grid; gap: 14px; }
.frame-fig figcaption { max-width: 54ch; }
.frame-key { margin-top: 32px; }
.spending-policy { margin-top: 14px; }
.spending-policy .mhc-link { margin: 4px 6px 0 0; }

/* One source-defined measure per reading; country series share a zero baseline. */
.spending-view { display: grid; gap: clamp(44px, 5vw, 72px); min-width: 0; }
.spending-view[hidden], .spending-switch[hidden] { display: none; }
.spending-view > .mhc-section-head { margin: 0; }
.spending-switch { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; width: min(100%, 320px); border-bottom: 1px solid var(--r-line); }
.spending-switch button { display: flex; align-items: center; justify-content: center; height: 48px; min-height: 48px; min-width: 0; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--r-ink-soft); font: 400 var(--r-note)/1.3 var(--r-sans); white-space: nowrap; cursor: pointer; }
.spending-switch button[aria-pressed='true'] { color: var(--r-money-type); }
.spending-switch button:hover { color: var(--r-money-type); }
.spending-switch button:focus-visible { outline: 2px solid var(--r-money-type); outline-offset: -5px; }
.spending-views { position: relative; min-width: 0; }
.spending-views.is-switching { overflow: clip; }
.spending-view[hidden][data-spending-exit] { display: grid; position: absolute; inset: 0 0 auto; pointer-events: none; }
.reading-term { color: var(--r-ink-soft); }
.reading-term b { font-weight: 500; color: var(--r-money-type); }
@media print {
  .spending-switch { display: none; }
  .spending-views { overflow: visible !important; }
  .spending-view[hidden] { display: grid; position: static; }
}
.country-series--0 { --country-ink: var(--r-money-type); --country-dash: none; }
.country-series--1 { --country-ink: var(--mhc-ink); --country-dash: 10 5; }
.country-series--2 { --country-ink: var(--mhc-chapter-claims-ink); --country-dash: 3 4; }
.country-series--3 { --country-ink: var(--mhc-chapter-summary-ink); --country-dash: 14 4 3 4; }
.country-series--4 { --country-ink: var(--mhc-chapter-measurement-ink); --country-dash: 8 3; }
.country-series--5 { --country-ink: var(--mhc-chapter-frames-ink); --country-dash: 3 3; }
.country-series--6 { --country-ink: var(--mhc-chapter-sources-ink); --country-dash: 18 4; }
.country-series--7 { --country-ink: var(--mhc-ink); --country-dash: 2 3 8 3; }
.country-series--8 { --country-ink: var(--r-money-type); --country-dash: 5 5; }
.country-table td { white-space:nowrap; font-variant-numeric:tabular-nums; }
.country-table td span { display:block; font-size:var(--r-note); }
.country-comparison > .r-fold { max-width:none; width:100%; }
.share-small-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 24px; margin-top:28px; }
.share-small-heading strong { font-size:var(--r-heading); font-weight:400; font-variant-numeric:tabular-nums; }
.share-mini-chart { display:block; width:100%; overflow:visible; }
.share-mini-chart text { fill:var(--r-ink-soft); font:12px var(--r-mono); }
.share-mini-chart .axis-rule { stroke:var(--r-line-soft); stroke-width:1; }
.share-mini-chart .share-band { fill:var(--country-ink, var(--r-money-type)); fill-opacity:.13; stroke:none; }
.share-mini-chart .share-line { fill:none; stroke:var(--country-ink, var(--r-money-type)); stroke-width:2; }
.share-us-reference { fill:none; stroke:var(--r-money-type); stroke-width:1.5; stroke-dasharray:5 5; }
.share-bridge { max-width:var(--r-measure); margin-top:12px; }

/* The year ledger keeps marks, readings and country order continuous. */
#scope-countries { scroll-margin-top:90px; gap:40px; }
#country-heading { max-width:22ch; }
.ledger-key,.ledger-columns,.ledger-history-key { max-width:none; }
.country-comparison { display:grid; gap:24px; }
.ledger-toolbar { display:flex; align-items:end; justify-content:space-between; gap:24px; padding-bottom:20px; border-bottom:1px solid var(--r-line); }
.ledger-toolbar p { margin:5px 0 0; }
.ledger-controls { display:flex; align-items:end; gap:12px; flex-shrink:0; }
.ledger-controls label { position:relative; display:grid; gap:7px; font-size:var(--r-note); color:var(--r-ink-soft); }
.ledger-controls label > span { padding-left:16px; }
.ledger-controls label::after { content:''; position:absolute; right:18px; bottom:19px; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); pointer-events:none; }
.ledger-controls select { appearance:none; min-height:44px; padding:9px 40px 9px 16px; border:1px solid var(--r-line); border-radius:var(--r-radius); background:var(--r-wash-soft); color:var(--mhc-ink); font:400 var(--r-body)/1.2 var(--r-sans); cursor:pointer; transition:background .18s ease,border-color .18s ease; }
.ledger-controls select option { background:var(--mhc-ground); color:var(--mhc-ink); }
.ledger-controls select:hover { background:var(--r-wash); border-color:var(--r-ink-soft); }
.ledger-controls select:focus-visible { background:var(--r-wash); }
#ledger-year { font-variant-numeric:tabular-nums; }
.ledger-controls select:focus-visible { outline:2px solid var(--r-money-type); outline-offset:4px; }
.ledger-controls select:disabled { cursor:default; opacity:.65; }
.ledger-select-enhanced::after { display:none; }
.ledger-controls select[hidden] { display:none; }
.ledger-select-trigger { box-shadow:none; position:relative; min-height:44px; padding:9px 40px 9px 16px; border:1px solid var(--r-line); border-radius:var(--r-radius); background:color-mix(in srgb, var(--mhc-ground) 24%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--mhc-ink); font:400 var(--r-body)/1.2 var(--r-sans); text-align:left; cursor:pointer; font-variant-numeric:tabular-nums; }
.ledger-select-trigger::after { content:''; position:absolute; right:18px; top:calc(50% - 5px); width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.ledger-select-trigger[aria-expanded='true'] { border-color:var(--r-money-type); }
.ledger-select-trigger[aria-expanded='true']::after { transform:translateY(4px) rotate(225deg); }
.ledger-select-trigger:focus-visible { outline:2px solid var(--r-money-type); outline-offset:4px; }
.ledger-select-trigger:disabled { opacity:.65; cursor:default; }
.ledger-select-popup { position:fixed; inset:auto; z-index:1200; margin:0; padding:8px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--r-line); border-radius:22px; background:color-mix(in srgb, var(--mhc-ground) 74%, transparent); backdrop-filter:blur(22px) saturate(1.15); -webkit-backdrop-filter:blur(22px) saturate(1.15); box-shadow:none; color:var(--mhc-ink); scrollbar-color:var(--r-line) transparent; }
.ledger-select-popup[hidden] { display:none; }
.ledger-select-option { display:block; width:100%; min-height:44px; padding:10px 36px 10px 12px; position:relative; border:0; border-radius:14px; background:transparent; color:inherit; text-align:left; font:400 var(--r-note)/1.35 var(--r-sans); font-variant-numeric:tabular-nums; cursor:pointer; }
.ledger-select-option[aria-selected='true'] { color:var(--r-money-type); background:var(--r-wash); }
.ledger-select-option[aria-selected='true']::after { content:''; position:absolute; right:15px; top:18px; width:8px; height:4px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); }
.ledger-select-option:hover, .ledger-select-option:focus-visible { background:var(--r-wash-soft); }
.ledger-select-option:focus-visible { outline:2px solid var(--r-money-type); outline-offset:-2px; }
@media (prefers-reduced-motion:no-preference) { .ledger-select-popup:popover-open { animation:ledger-select-arrival .16s var(--r-ease); } }
@keyframes ledger-select-arrival { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-transparency:reduce) { .ledger-select-trigger,.ledger-select-popup { background:var(--mhc-ground); backdrop-filter:none; -webkit-backdrop-filter:none; } }
.ledger-key,.ledger-history-key { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }
.ledger-key > span,.ledger-history-key > span { display:inline-flex; align-items:center; gap:8px; }
.ledger-key > span:last-child { margin-left:auto; }
.ledger-key-range,.ledger-key-country,.ledger-key-us { display:inline-block; width:26px; height:2px; background:var(--mhc-chapter-summary-ink); position:relative; flex-shrink:0; }
.ledger-key-range::after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:inherit; top:-2px; left:10px; }
.ledger-key-us { height:0; background:none; border-top:2px dashed var(--r-money-type); }
.year-ledger { --ledger-peer:var(--mhc-chapter-summary-ink); display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.48fr); gap:32px; align-items:start; }
.ledger-register { min-width:0; }
.ledger-columns,.ledger-row { display:grid; grid-template-columns:126px minmax(110px,1fr) 64px 94px; gap:12px; align-items:center; width:100%; }
.ledger-columns { min-height:38px; align-items:end; padding:0 4px 10px; font-size:var(--r-label); }
.ledger-columns > span:nth-last-child(-n+2) { text-align:right; }
.ledger-axis { position:relative; height:19px; margin-inline:6px; font-variant-numeric:tabular-nums; }
.ledger-axis span { position:absolute; left:var(--tick); transform:translateX(-50%); white-space:nowrap; }
.ledger-axis span:first-child { transform:none; }
.ledger-axis span:last-child { transform:translateX(-100%); }
.ledger-rows { border-top:1px solid var(--r-line); }
.ledger-row { --ledger-mark:var(--ledger-peer); position:relative; min-height:58px; padding:0 4px; background:transparent; border:0; border-bottom:1px solid var(--r-line); color:var(--mhc-ink); text-align:left; font:400 var(--r-note)/1.35 var(--r-sans); cursor:pointer; transition:background .18s ease; }
.ledger-row-us { --ledger-mark:var(--r-money-type); }
.ledger-row:hover { background:var(--r-wash-soft); }
.ledger-row[aria-pressed='true'] { background:var(--r-wash); }
.ledger-row:focus-visible { outline:2px solid var(--r-money-type); outline-offset:3px; z-index:1; }
.ledger-row:disabled { cursor:default; opacity:1; }
.ledger-country { padding-left:2px; }
.ledger-country small { display:block; font-size:var(--r-label); color:var(--r-money-type); margin-top:3px; }
.ledger-row-value,.ledger-row-range { text-align:right; font-weight:400; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ledger-row-value { font-size:var(--r-body); }
.ledger-row-range { font-size:var(--r-label); color:var(--r-ink-soft); }
.ledger-range { display:block; width:100%; height:52px; overflow:visible; }
.ledger-grid { stroke:var(--r-line-soft); stroke-width:1; }
.ledger-reference { stroke:var(--r-money-type); stroke-width:1; stroke-dasharray:2 4; transform:translateX(var(--mark-x)); }
.ledger-interval { stroke:var(--ledger-mark); stroke-width:3; transform-origin:0 26px; transform:translateX(var(--mark-x)) scaleX(var(--mark-length)); }
.ledger-estimate { fill:var(--ledger-mark); transform:translateX(var(--mark-x)); }
.ledger-ready :is(.ledger-reference,.ledger-interval,.ledger-estimate) { transition:transform .26s var(--r-ease); }
.ledger-register-note { margin-top:16px; max-width:65ch; }
.ledger-detail-jump { display:none; }
.ledger-return { display:none; font-size:var(--r-note); margin-bottom:20px; }
.ledger-detail.is-us { --ledger-peer:var(--r-money-type); }
.ledger-detail.is-us :is(.ledger-history-us,.ledger-history-us-dot,.ledger-history-key > span:last-child) { display:none; }
.ledger-detail { border-left:1px solid var(--r-line); padding-left:26px; min-width:0; scroll-margin-top:90px; }
.ledger-detail h4 { margin:0 0 12px; font-size:var(--r-heading); line-height:1.24; letter-spacing:-.018em; font-weight:400; }
.ledger-detail-value { display:flex; align-items:baseline; gap:9px; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.ledger-detail-value strong { font-size:var(--mhc-type-5xl); letter-spacing:-.035em; line-height:1; font-weight:400; }
.ledger-detail-reading > p.t-note { margin:0; }
.ledger-gap { margin-top:18px!important; padding-top:15px; border-top:1px solid var(--r-line); }
.ledger-gap b { font-weight:500; font-variant-numeric:tabular-nums; }
.ledger-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:18px 0 20px; }
.ledger-inputs dd { font-size:var(--r-body); color:var(--mhc-ink); margin:5px 0 0; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ledger-history { margin:0; min-width:0; }
.ledger-history-chart { display:block; width:100%; overflow:visible; }
.ledger-history-chart text { fill:var(--r-ink-soft); font:var(--r-label) var(--r-mono); }
.ledger-history-band { fill:var(--ledger-peer); fill-opacity:.12; stroke:none; }
.ledger-history-us,.ledger-history-country { fill:none; stroke-width:2; }
.ledger-history-us { stroke:var(--r-money-type); stroke-dasharray:4 4; }
.ledger-history-country { stroke:var(--ledger-peer); }
.ledger-history-us-dot { fill:var(--r-money-type); }
.ledger-history-country-dot { fill:var(--ledger-peer); stroke:var(--mhc-ground); stroke-width:1; }
.ledger-history-guide { stroke:var(--r-ink-soft); stroke-dasharray:2 4; }
.ledger-history-hit { fill:transparent; touch-action:pan-y; }
.ledger-history-help { margin-top:10px; }
.ledger-history-key { gap:8px 16px; margin-top:10px; }
.ledger-history-key .ledger-key-country { background:var(--ledger-peer); }
.ledger-history-key i { width:18px; }
.ledger-annual { margin-top:22px; }
.ledger-annual summary { display:flex; gap:10px; font:400 var(--r-note)/1.4 var(--r-sans); text-transform:none; letter-spacing:0; }
.ledger-annual .r-fold-body { padding-inline:0; }
.ledger-annual .r-table { min-width:0; width:100%; font-size:var(--r-note); }
.ledger-annual .r-table :is(th,td) { padding:9px 3px; white-space:nowrap; }
.ledger-annual .r-table tr > :not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.ledger-limits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; padding-top:24px; border-top:1px solid var(--r-line); }
.ledger-limits p { margin:0; max-width:66ch; }
.ledger-limits b { display:block; color:var(--mhc-ink); font-weight:500; margin-bottom:7px; }
@media (min-width:701px) and (max-width:1200px) {
  .year-ledger { grid-template-columns:minmax(0,1fr) minmax(245px,.55fr); gap:24px; }
  .ledger-columns,.ledger-row { grid-template-columns:110px minmax(100px,1fr) 52px; gap:8px; }
  .ledger-range-heading { display:none; }
  .ledger-row-range { grid-column:3; margin-top:-17px; align-self:end; padding-bottom:4px; }
  .ledger-row-value { align-self:start; padding-top:12px; }
  .ledger-range { grid-column:2; grid-row:1 / span 2; }
  .ledger-country { grid-column:1; grid-row:1 / span 2; }
  .ledger-row { grid-template-rows:35px 22px; }
  .ledger-detail { padding-left:20px; }
  .ledger-key > span:last-child { margin-left:0; }
}
@media (min-width:701px) and (max-width:950px) {
  .year-ledger { grid-template-columns:minmax(0,1fr); }
  .ledger-toolbar { align-items:start; }
  .ledger-detail { border-left:0; border-top:1px solid var(--r-line); padding:24px 0 0; display:grid; grid-template-columns:1fr 1.1fr; gap:20px 28px; }
  .ledger-annual { grid-column:1 / -1; }
  .ledger-detail-jump { display:inline-block; margin-top:14px; }
}
@media (max-width:950px) { .ledger-return { display:inline-block; } }
@media (prefers-reduced-motion:reduce) {
  .ledger-ready :is(.ledger-reference,.ledger-interval,.ledger-estimate),.ledger-row { transition:none; }
}
@media print {
  .ledger-controls,.ledger-history-help,.ledger-detail-jump { display:none!important; }
  .ledger-row { break-inside:avoid; }
  .year-ledger { display:block; }
  .ledger-detail { margin-top:24px; border:0; padding:0; }
}

/* -- the five-stage framework: five numbered nodes on one thread ------------ */
.stage-flow { --flow-h: clamp(150px, 20vh, 210px); position: relative; }
.stage-thread { position: absolute; left: 0; top: 0; width: 100%; height: var(--flow-h); overflow: visible; pointer-events: none; }
.stage-thread path { fill: none; stroke: var(--r-money-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .85; }
.stage-nodes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(10px, 1.6vw, 26px); }
.stage-node { position: relative; display: grid; grid-template-rows: var(--flow-h) auto auto auto; gap: 6px; text-align: center; justify-items: center; }
.stage-dot { position: absolute; left: 50%; top: calc(var(--flow-h) * .75); translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mhc-ground); box-shadow: inset 0 0 0 1.5px var(--r-money-ink); }
.stage-node[data-lift='high'] .stage-dot { top: calc(var(--flow-h) * .25); }
.stage-dot b { font: 400 var(--r-note)/1 var(--r-mono); letter-spacing: .04em; color: var(--r-money-type); }
.stage-name { grid-row: 2; }
.stage-ask { grid-row: 3; max-width: 22ch; font-size: var(--r-body); line-height: 1.34; }
.stage-eg { grid-row: 4; max-width: 24ch; display: block; }

/* The seven stages share a continuous dated path; the narrative stays visible. */
.process-key { margin-bottom: 24px; }
.community-process { --process-gutter: 96px; display: grid; }
.community-process .story-beat { position: relative; display: grid; grid-template-columns: var(--process-gutter) minmax(180px, .8fr) minmax(0, 1.6fr); gap: 28px; padding: 28px 0; scroll-margin-top: 100px; }
.community-process .story-beat::before { content: ''; position: absolute; left: 80px; top: 0; bottom: 0; width: 1px; background: var(--r-line); }
.community-process .story-beat:first-child::before { top: 36px; }
.community-process .story-beat:last-child::before { bottom: calc(100% - 36px); }
.process-year { position: relative; padding-top: 4px; color: var(--r-money-type); white-space: nowrap; }
.process-year::after { content: ''; position: absolute; left: 77px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--r-money-ink); }
.process-heading { display: grid; align-content: start; gap: 20px; }
.process-heading .t-heading { max-width: 24ch; }
.process-heading .stages { width: 76px; }
.process-copy { display: grid; gap: 0; min-width: 0; max-width: var(--r-measure); }
.process-copy > :not(.gloss-note):not(:first-child) { margin-top: 12px; }
.process-bridge { color: var(--r-money-type); padding-bottom: 12px; border-bottom: 1px solid var(--r-line-soft); }
.beat-links { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 4px; }
.process-limit { margin: 24px 0 0 124px; padding-top: 20px; border-top: 1px solid var(--r-line); max-width: var(--r-measure); }

/* Growth is a second reading within the domestic account. */
.account-growth { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--r-line); scroll-margin-top: 100px; }
.account-growth-copy { display: grid; align-content: start; gap: 0; }
.account-growth-copy > :not(.gloss-note):not(:first-child) { margin-top: 20px; }
.account-growth .r-fold { margin: 0 0 24px; }
.account-growth-chart { min-width: 0; }

/* Supporting readings share two columns on the chapter ground. */
#context .frame-inner { gap: 32px; }
#context .mhc-section-statement { font-size: var(--r-statement); max-width: 18ch; }
.frame-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.context-record { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; padding: 24px 0; border-top: 1px solid var(--r-line); }
.context-heading { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: 16px; }
.context-year { color: var(--r-money-type); }
.context-copy { display: flex; flex-direction: column; gap: 16px; }
.context-copy .gloss-note { margin-top: -16px; }
.context-record .t-body { font-size: var(--r-body); line-height: 1.58; }
.context-references { display: grid; gap: 8px; margin-top: auto; padding-top: 4px; font-size: var(--r-note); }
.context-timeline { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.context-references :is(.context-source, .context-timeline a) { flex-basis: auto; width: auto; max-width: 340px; }
.context-references .context-source { width: fit-content; }
#publication-revenue .mhc-section-head, #context .mhc-section-head { align-items: start; }
#publication-revenue .mhc-section-statement { max-width: 16ch; }
#publication-revenue .frame-aside { max-width: none; }
.revenue-title { margin-bottom: 24px; }
.organisation-reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); padding-top: 32px; margin-top: 36px; border-top: 1px solid var(--r-line); }
.organisation-reading > h3 { max-width: 24ch; }
.organisation-related { display: grid; gap: 10px; margin-top: 22px; }
.organisation-related .spending-related { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; max-width: none; }
.organisation-inquiry { scroll-margin-top: 100px; display: grid; gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--r-line); }
.inquiry-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 24px 48px; }
.inquiry-heading h3 { font-size: var(--mhc-type-3xl); line-height: 1.2; letter-spacing: -.022em; max-width: 30ch; }
.inquiry-heading .t-note { padding-top: 4px; }
.organisation-inquiry .r-table { min-width: 660px; table-layout: fixed; }
.organisation-inquiry .r-table th { white-space: normal; }
.organisation-inquiry .r-table tr > :nth-child(1) { width: 26%; }
.organisation-inquiry .r-table tr > :nth-child(2) { width: 13%; }
.organisation-inquiry .r-table tr > :nth-child(3) { width: 34%; }
.organisation-inquiry .r-table tbody th { font: inherit; letter-spacing: inherit; text-transform: none; color: var(--mhc-ink); }
.organisation-inquiry .r-table tbody th { font-size: var(--mhc-type-lg); line-height: 1.4; }
.organisation-inquiry .r-table tbody td:nth-child(2) { font-family: var(--r-mono); font-size: var(--r-label); letter-spacing: .02em; }
.organisation-inquiry .r-table tbody td:nth-child(3) { font-size: var(--r-body); line-height: 1.45; color: var(--mhc-ink); }
.organisation-inquiry .r-table :is(th, td) { padding-block: 16px; }
@media (max-width: 900px) {
  .community-process { --process-gutter: 76px; }
  .community-process .story-beat { grid-template-columns: var(--process-gutter) minmax(0, 1fr); gap: 16px 20px; }
  .community-process .story-beat::before { left: 66px; }
  .process-year { grid-row: 1 / span 2; }
  .process-year::after { left: 63px; }
  .process-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .process-copy { grid-column: 2; }
  .process-limit { margin-left: 96px; }
  .account-growth { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .frame-context { grid-template-columns: minmax(0, 1fr); }
  .organisation-reading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .inquiry-heading { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .context-references a { min-height: 44px; display: inline-flex; align-items: center; }
  .context-references, .context-timeline { gap: 8px; }
  .community-process { --process-gutter: 12px; }
  .community-process .story-beat { column-gap: 16px; padding-block: 24px; }
  .community-process .story-beat::before { left: 3px; }
  .community-process .story-beat:first-child::before { top: 32px; }
  .community-process .story-beat:last-child::before { bottom: calc(100% - 32px); }
  .process-year { grid-column: 2; grid-row: auto; padding: 0; }
  .process-year::after { left: -28px; top: 4px; }
  .process-heading { grid-column: 2; }
  .process-limit { margin-left: 28px; }
}

/* The atlas keeps a bounded register beside a complete reading. Its height
   follows the evidence, rather than squeezing two scroll areas into a screen. */
.atlas {
  display: grid; gap: clamp(14px, 1.8vh, 22px) clamp(18px, 2.4vw, 40px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto auto;
  grid-template-areas: 'series primer' 'key key' 'register reading';
  align-items: stretch; min-height: 0;
}
.atlas-side, .atlas-main { display: contents; }
.atlas-series { grid-area: series; }
.atlas-primer { grid-area: primer; align-self: end; margin: 0; }
.atlas-primer [data-register-count] { color: var(--r-money-type); }
.atlas-key { grid-area: key; }
.atlas-register { grid-area: register; }
.atlas-readings { grid-area: reading; }
.atlas-series { display: none; flex-wrap: wrap; gap: 6px; }
.has-js .atlas-series { display: flex; }
.atlas-series button { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 14px 0 16px; cursor: pointer; border-radius: var(--r-radius); font-size: var(--r-note); color: var(--r-ink-soft); box-shadow: inset 0 0 0 1px var(--r-line); transition: background .3s var(--r-ease), color .3s var(--r-ease), box-shadow .3s var(--r-ease); }
.atlas-series button small { font: 400 var(--r-label)/1 var(--r-mono); color: var(--r-money-type); }
.atlas-series button:hover { color: var(--mhc-ink); box-shadow: inset 0 0 0 1px var(--r-money-ink); }
.atlas-series button[aria-pressed='true'] { background: var(--r-wash); color: var(--mhc-ink); box-shadow: inset 0 0 0 1px var(--r-money-ink); }
/* The register is a list inside the page rather than a panel over it, so it
   must not contain overscroll: a trackpad reader whose pointer happens to rest
   on it scrolls the list to its end and then, because the browser latches every
   new gesture to the scroller under a still pointer, cannot move the page at
   all until the pointer has been moved off the list. Left to chain, a gesture made
   over an exhausted register goes on to the page as it does anywhere else. */
.atlas-register { min-height: 0; max-height: 640px; align-self: start; overflow-y: auto; border-top: 1px solid var(--r-line); scroll-padding-top: 34px; }
.atlas-register:focus-visible { outline-offset: -2px; }
.atlas-head { display: grid; grid-template-columns: 58px minmax(0, 1fr) 86px; gap: 14px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--r-line); font: 400 var(--r-label)/1.3 var(--r-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--r-money-type); }
/* The labels scroll with the register on the same uninterrupted field. */
.atlas-head-stages { display: flex; gap: 2px; }
.atlas-head-stages i { flex: 1 1 0; text-align: center; font-style: normal; }
.atlas-group-name { padding: 16px 6px 6px; color: var(--r-money-type); }
.atlas-group-name small { font: inherit; color: var(--r-ink-soft); margin-left: 6px; }
.has-js .atlas-group:not(.is-current), .has-js .atlas-group-name { display: none; }
.atlas-rows { display: grid; }
.atlas-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 86px; gap: 6px 14px; align-items: center; padding: 11px 6px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--r-line-soft); transition: background .3s var(--r-ease); }
.atlas-row[aria-current='true'] .atlas-row-title { color: var(--r-money-type); }
.atlas-row time { font: 400 var(--r-note)/1 var(--r-mono); letter-spacing: 0; color: var(--r-money-type); font-variant-numeric: tabular-nums; }
.atlas-row-title { font-size: var(--r-body); line-height: 1.3; }
.atlas-row-kind { grid-column: 2; grid-row: 2; text-transform: none; letter-spacing: .04em; }
.atlas-row-kind:empty { display: none; }
.atlas-row .stages { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
/* Match the archive's list field and title travel. Keep the hit area still;
   only the field and reading labels move, with dates and stage marks anchored.
   Under Lumen the row keeps its field, and the light falls inside it in the
   chapter's ochre. */
.atlas-row {
  --mhc-lumen-hover: keep;
  --mhc-lumen-tint: var(--r-money);
  position: relative;
  isolation: isolate;
  background: transparent;
}
.atlas-row::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 4px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--r-money) 14%, rgba(var(--mhc-on-paper-rgb), .035));
  opacity: 0;
  transform: scaleX(.975);
  transform-origin: center;
  transition: inset .52s var(--r-ease), opacity .24s ease, transform .52s var(--r-ease), box-shadow .24s ease;
}
.atlas-row:is(:hover, :focus-visible, [aria-current='true'])::before {
  inset: 2px 0;
  opacity: 1;
  transform: scaleX(1);
}
.atlas-row:focus-visible { outline-offset: -3px; }
.atlas-row:focus-visible::before {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r-money-type) 72%, var(--mhc-ground));
}
.atlas-row-title, .atlas-row-kind {
  transition: transform .52s var(--r-ease);
}
.atlas-row:is(:hover, :focus-visible) :is(.atlas-row-title, .atlas-row-kind) {
  transform: translateX(7px);
}

.atlas-readings { min-height: 0; padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(22px, 2.4vw, 32px); border-radius: var(--r-radius-panel); background: var(--r-wash-soft); box-shadow: inset 0 0 0 1px var(--r-line-soft); }
.atlas-reading { display: grid; gap: 14px; align-content: start; }
.has-js .atlas-reading:not(.is-current) { display: none; }
.atlas-reading + .atlas-reading { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--r-line); }
.has-js .atlas-reading + .atlas-reading { margin-top: 0; padding-top: 0; border-top: 0; }
.reading-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.reading-meta time { color: var(--r-money-type); text-transform: none; letter-spacing: .04em; }
.reading-thesis { font-size: var(--r-body); }
.reading-route { display: grid; gap: 1px; border-top: 1px solid var(--r-line-soft); border-bottom: 1px solid var(--r-line-soft); padding: 6px 0; }
.reading-route li { display: grid; grid-template-columns: 66px 26px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 6px 0; }
.reading-route .route-stage { color: var(--r-money-type); }
.reading-route .route-value { color: var(--mhc-ink-2); }
.reading-route .route-state { grid-column: 3; text-transform: none; letter-spacing: .04em; }
.reading-copy { color: var(--mhc-ink-2); }
.reading-alternate { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--r-line-soft); }
.reading-alternate .t-label { color: var(--r-money-type); }
.reading-evidence { margin-top: 4px; }

/* -- the drawer: a block after its frame until script makes it a sheet ------ */
.drawer { display: block; padding-bottom: clamp(30px, 4vh, 56px); }
.money-detail-toggle { display: none; }
.has-js .money-detail-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 20px; cursor: pointer; border-radius: var(--r-radius); font: 400 var(--r-label)/1 var(--r-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--r-money-type); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r-money-ink) 40%, transparent); transition: background .3s var(--r-ease), box-shadow .3s var(--r-ease); }
.money-detail-toggle::after { content: '\2193'; font-size: 1.15em; }
.money-detail-toggle:hover { background: var(--r-wash); box-shadow: inset 0 0 0 1px var(--r-money-ink); }
/* Opened, the drawer is a veiled surface over the whole chapter, which is the
   archive's own modal treatment: theme.css names the veil and the blur every
   veiled surface is filtered through, and the site search already reads the
   pair. The sheet on top of it stays the opaque ground, so every word in the
   drawer is read against the ground rather than against the veil. */
.has-js .drawer { position: fixed; inset: 0; z-index: 1200; padding-bottom: 0; display: grid; align-items: end; justify-items: center; background: var(--mhc-surface-veil); -webkit-backdrop-filter: var(--mhc-veil-blur); backdrop-filter: var(--mhc-veil-blur); }
/* AUTHORED CLOSED. .has-js lands synchronously in the head, while the chapter
   controller is deferred and therefore runs only once the body has parsed, so
   a drawer left open in the markup can paint as a full-viewport sheet before
   anything closes it. The generator ships the state, and the state is read
   only under .has-js, which leaves the script-off page the block after its
   frame that it has always been. */
.has-js .drawer[data-drawer-state='closed'] { display: none; }
.drawer-sheet { display: grid; gap: 20px; }
.has-js .drawer-sheet { width: min(880px, 100%); max-height: 82svh; overflow-y: auto; padding: clamp(26px, 3vw, 44px) clamp(22px, 3vw, 44px) clamp(34px, 4vw, 56px); border-radius: var(--r-radius-panel) var(--r-radius-panel) 0 0; background: var(--mhc-ground); box-shadow: inset 0 0 0 1px var(--r-line), 0 -24px 60px rgba(0, 0, 0, .22); align-content: start; }
.drawer-close { display: none; }
.has-js .drawer-close { justify-self: end; cursor: pointer; min-height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: var(--r-radius); font: 400 var(--r-label)/1 var(--r-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--r-ink-soft); box-shadow: inset 0 0 0 1px var(--r-line); transition: color .3s var(--r-ease), box-shadow .3s var(--r-ease); }
.drawer-close:hover { color: var(--r-money-type); box-shadow: inset 0 0 0 1px var(--r-money-ink); }
@media (prefers-reduced-motion: no-preference) {
  .has-js .drawer { animation: p-veil .3s var(--r-ease) both; }
  .has-js .drawer-sheet { animation: p-sheet .46s var(--r-ease) both; }
}
@keyframes p-veil { from { opacity: 0; } }
@keyframes p-sheet { from { transform: translateY(40px); } }

/* -- preferences -----------------------------------------------------------------
   Reduced motion renders every settled state directly; the gates above already
   do that, and this names the contract. Reduced transparency drops the two
   blurs and returns their surfaces to the solid ground. */
@media (prefers-reduced-motion:reduce) {
  .atlas-row, .atlas-row::before,
  .atlas-row-title, .atlas-row-kind { transition: none; }
    .atlas-row:is(:hover, :focus-visible) :is(.atlas-row-title, .atlas-row-kind),
  .atlas-row::before { transform: none; }
  :is(.frame-inner, .spending-view) > .mhc-section-head, .frame-copy > :not(.gloss-note), .frame-aside > :not(.gloss-note), .stage-node, .r-rise { opacity: 1; transform: none; transition: none; }
  .stage-thread path { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@media (prefers-reduced-transparency:reduce) {
  .has-js .drawer { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .has-js .drawer { background: var(--mhc-surface-scrim); }
}

/* -- responsive ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .frame { min-height: auto; padding-top: clamp(56px, 9vh, 80px); padding-bottom: clamp(48px, 8vh, 72px); }
  .frame-inner, .frame--text .frame-inner, .frame--story .frame-inner, .frame--context .frame-inner, .frame--wide .frame-inner { grid-template-columns: minmax(0, 1fr); }
  .frame-beats, .frame-context { max-height: none; }
  .frame-findings { grid-template-columns: minmax(0, 1fr); }
  .frame-findings li + li::before { left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 1px; mask-image: linear-gradient(90deg, transparent, #000 25% 75%, transparent); }
  .has-js { @media (prefers-reduced-motion: no-preference) { .frame-copy > :not(.gloss-note), .frame-aside > :not(.gloss-note) { transform: translateY(18px); } } }
  .stage-flow { --flow-h: 0px; }
  .stage-thread { display: none; }
  .stage-nodes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stage-node { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 4px 16px; text-align: left; justify-items: start; padding: 14px 0; border-top: 1px solid var(--r-line-soft); }
  .stage-dot, .stage-node[data-lift='high'] .stage-dot { position: static; translate: none; grid-row: 1 / span 3; }
  .stage-name { grid-column: 2; grid-row: 1; }
  .stage-ask { grid-column: 2; grid-row: 2; max-width: none; }
  .stage-eg { grid-column: 2; grid-row: 3; max-width: none; }
  .atlas { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'series' 'primer' 'key' 'register' 'reading'; }
  .atlas-register { max-height: 46svh; }
  .atlas-readings { max-height: none; }
  .atlas-row, .atlas-head { grid-template-columns: 52px minmax(0, 1fr) 72px; gap: 4px 10px; }
  .atlas-row-kind { display: none; }
}

html:not(.has-js) .atlas-register { max-height: none; overflow: visible; }

@media print {
  .archive-rail, .chapter-drawer, .drawer-scrim, .chapter-pager, .chapter-methods, .money-detail-toggle, .frame-n { display: none !important; }
  .frame { min-height: auto; break-inside: auto; }
  .atlas-register { max-height: none; overflow: visible; }
  :is(.frame-inner, .spending-view) > .mhc-section-head, .frame-copy > *, .frame-aside > *, .r-rise { opacity: 1 !important; transform: none !important; }
  .drawer[hidden], .has-js .drawer[data-drawer-state='closed'] { display: block !important; }
  .has-js .drawer { position: static; display: block; background: none; }
  .has-js .drawer-sheet { max-height: none; overflow: visible; box-shadow: none; }
  .has-js .atlas-group, .has-js .atlas-group-name, .has-js .atlas-reading { display: block; }
  .has-js .gloss-note { display: block !important; opacity: 1 !important; grid-template-rows: none !important; }
}

/* The cover keeps its woven surface in view only while the stream departs. */
@media (prefers-reduced-motion: no-preference) {
  .woven-chapter-hero.frame--cover.is-money-departing { overflow: visible; }
  /* The held canvas is drawn at the cover's own size, so its extent is cut
     rather than scaled: the controller measures the findings cards and writes
     the distance from the cards' top edge to the bottom of that box, which
     ends the motif exactly where the first section's cards begin instead of
     letting it run on behind them. */
  #fr-cover.is-money-departing > [data-woven-canvas] { position: fixed; inset: 0 auto auto var(--money-motif-left, 0px); width: var(--money-motif-width); height: var(--money-motif-height); clip-path: inset(0 0 var(--money-motif-clip, 0px) 0); z-index: 0; }
  .woven-chapter-hero.frame--cover.is-money-departed > [data-woven-canvas] { visibility: hidden; }
}