/* OpenEXA · Home: page rules after site.css, scoped to index.html (tokens only; budget 12,000 B gzip). */

/* the overture's first paint: with JS the static globe waits unseen for the engines (4 s safety net) */
@media (scripting: enabled) {
  html:not(.story-ready):not(.no-webgl) body[data-page="home"] .story-static-mark { opacity: 0; animation: home-mark-net 1ms 4s forwards; }
  html.story-failed:not(.story-ready):not(.no-webgl) body[data-page="home"] .story-static-mark { animation-delay: 0s; } /* a failed download: at once */
}
@keyframes home-mark-net { to { opacity: .5; } }

/* S0: the CEO's two lines, the buttons, then Lifecycle 01 with its hedge in one group (.hero-stats hooks kept) */
body[data-page="home"] .beat-0 .hero-lc01 { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: start; max-width: min(52%, 600px); margin-top: 26px; padding-top: 16px; }
/* the record line, drawn as the curtain lifts */
body[data-page="home"] .beat-0 .hero-lc01::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(245, 242, 236, .18); transform-origin: 0 50%; }
html.is-loaded body[data-page="home"] .beat-0 .hero-lc01::before { animation: home-rule 1.1s var(--ease-draw) .35s both; }
@keyframes home-rule { from { transform: scaleX(0); } }
body[data-page="home"] .hero-lc01 .lc-line { display: contents; }
body[data-page="home"] .hero-lc01 .lc-n { grid-row: 1 / span 2; margin-top: -.12em; display: inline-flex; align-items: flex-start; font: 400 clamp(1.6rem, 2vw, 1.95rem)/1 var(--serif); letter-spacing: -0.02em; white-space: nowrap; color: var(--paper); }
body[data-page="home"] .hero-lc01 .lc-n .live { margin: .1em 0 0 7px; vertical-align: 0; }
body[data-page="home"] .hero-lc01 .lc-t { grid-column: 2; display: block; margin: 0; font: 400 .98rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(245, 242, 236, .86); text-wrap: pretty; }
body[data-page="home"] .hero-lc01 .lc-t span { display: inline; margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
body[data-page="home"] .hero-lc01 .lc-t .lc-k { font-weight: 600; color: var(--paper); }
/* the hedge: Inter at a reading size, under its fact */
body[data-page="home"] .hero-lc01 .lc-hedge span { display: inline; margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
body[data-page="home"] .hero-lc01 .lc-hedge { grid-column: 2; margin-top: 6px; font: 400 .8125rem/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(245, 242, 236, .72); }

/* the scene index: five rules, no text (their names are the buttons' labels) */
body[data-page="home"] .story-num { display: none; }
body[data-page="home"] .story-idx button { min-width: 46px; padding-right: 12px; }
body[data-page="home"] .story-idx button::before, body[data-page="home"] .story-idx button i { right: 12px; }

/* a phone held sideways: the five rules, as upright */
@media (max-width: 759.98px) and (min-aspect-ratio: 23/20) {
  body[data-page="home"] .story-idx ol { gap: 0; }
  body[data-page="home"] .story-idx button { min-width: 34px; padding-right: 10px; }
  body[data-page="home"] .story-idx button::before, body[data-page="home"] .story-idx button i { right: 10px; }
}

/* the plates' captions: a hedge only */
body[data-page="home"] .story-lab.cap { display: flex; flex-wrap: wrap; column-gap: 1.5em; font: 400 .78rem/1.45 var(--sans); letter-spacing: 0; text-transform: none; text-wrap: balance; color: rgba(245, 242, 236, .78); }
body[data-page="home"] .story-lab.cap .fc-h { text-align: left; color: rgba(245, 242, 236, .6); }

/* the stage's focus ring is the site's */
body[data-page="home"] .story-stage:focus-visible { outline: 2px solid var(--signal-bright); outline-offset: -2px; }

/* SC 2.5.8: callouts under 24 px apart are not pointer targets */
@media (max-width: 599.98px) { body[data-page="home"] .story-lab.layer { pointer-events: none; } }
@media (max-width: 359.98px) { body[data-page="home"] .story-lab.day { pointer-events: none; } }

/* phones, JS on (compact overture): the definition and Lifecycle 01 stay */
@media (scripting: enabled) and (max-width: 599.98px) {
  html:not(.no-webgl) body[data-page="home"] .beat-0 .hero-lc01 { display: grid; max-width: 100%; margin-top: 16px; padding-top: 12px; }
  html:not(.no-webgl) body[data-page="home"] .beat-0 .display-1 { font-size: clamp(2.1rem, 9.4vw, 3.4rem); }
  html:not(.no-webgl) body[data-page="home"] .beat-0 .hero-lc01 { column-gap: 12px; }
  html:not(.no-webgl) body[data-page="home"] .hero-lc01 .lc-t { font-size: .86rem; line-height: 1.45; } /* the buttons' size */
  html:not(.no-webgl) body[data-page="home"] .hero-lc01 .lc-hedge { margin-top: 4px; font-size: .75rem; }
}
@media (max-width: 639.98px), (max-aspect-ratio: 23/20) {
  body[data-page="home"] .beat-0 .hero-lc01 { max-width: 100%; }
}
/* the narrowest phones: the hedge on two fixed lines */
@media (max-width: 379.98px) {
  body[data-page="home"] .story .lc-hedge span.nowrap { display: block; }
  body[data-page="home"] .story .lc-hedge span.lc-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
html.story-compact body[data-page="home"] .beat-0 .hero-lc01 { display: grid; }
/* compact screens: the CEO's sub-line stays the second voice */
@media (min-width: 600px) { html.story-compact body[data-page="home"] .beat-0 .hero-sub { font-size: 1rem; } }
@media (scripting: enabled) and (max-width: 599.98px) and (min-height: 800px) {
  html:not(.no-webgl) body[data-page="home"] .beat-0 .hero-sub { font-size: .94rem; }
}
/* a short screen (story.js): lines give way visually, never leave the reading order */
body[data-page="home"] .beat-0.is-tight .hero-sub, body[data-page="home"] .story .beat.is-tight .body-lg,
html.story-short body[data-page="home"] .story .beat-4 .body-lg { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* a short portrait phone: the definition gives way, the record line tightens */
@media (scripting: enabled) and (max-width: 599.98px) and (max-height: 739.98px) {
  html:not(.no-webgl) body[data-page="home"] .beat-0 .hero-lc01 { margin-top: 12px; padding-top: 10px; column-gap: 10px; }
  html:not(.no-webgl) body[data-page="home"] .hero-lc01 .lc-t { font-size: .8125rem; line-height: 1.4; }
  html:not(.no-webgl) body[data-page="home"] .hero-lc01 .lc-hedge { margin-top: 3px; }
}
/* short landscape: as v2, the CEO's lines and the buttons only */
@media (max-height: 600px) and (min-aspect-ratio: 23/20) {
  html body[data-page="home"] .story .story-ui .beat-0 .hero-lc01 { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  html body[data-page="home"] .story .story-ui .beat-0 .display-1 { font-size: clamp(1.9rem, 10vh, 3.4rem); }
}
/* a phone under 640 px held sideways: the scenes' heads at the short scale */
@media (max-width: 639.98px) and (max-height: 600px) and (min-aspect-ratio: 23/20) {
  html body[data-page="home"] .story .story-ui .beat h2 { font-size: clamp(1.3rem, 7vh, 1.7rem); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { body[data-page="home"] .hero-lc01 .live, html.is-loaded body[data-page="home"] .beat-0 .hero-lc01::before { animation: none; } }

/* ---------- the chapters ---------- */
/* (no ghost numerals: site.css no longer draws .section[data-n]::before, system cut 1 Nov) */

/* §04: the hedge in the headline's group */
body[data-page="home"] .proof-hedge { max-width: 46ch; font-size: .9rem; line-height: 1.55; color: var(--fg-2); }
body[data-page="home"] .proof-hedge a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: text-decoration-color var(--dur-feedback) var(--ease-out); }
@media (hover: hover) { body[data-page="home"] .proof-hedge a:hover { text-decoration-color: var(--accent); } }

/* display heads break between phrases only */
body[data-page="home"] h2 .ph { white-space: nowrap; }

/* portrait tablets: the CEO's headline at v2's size on two lines */
@media (min-width: 600px) and (max-aspect-ratio: 23/20) {
  html.story-compact body[data-page="home"] .beat-0 .display-1 { font-size: clamp(2.3rem, 9.6vw, 4.2rem); }
}
/* from 900 px tall: the scenes at v2's portrait scale */
@media (min-width: 600px) and (min-height: 900px) and (max-aspect-ratio: 23/20) {
  html.story-compact body[data-page="home"] .story .beat h2 { font-size: clamp(1.85rem, 7.2vw, 3rem); }
  html.story-compact body[data-page="home"] .story .beat .body-lg { margin-top: 12px; font-size: clamp(.94rem, 2.3vw, 1.02rem); line-height: 1.55; }
  html.story-compact body[data-page="home"] .story .beat-0 .hero-sub { margin-top: 12px; font-size: clamp(1rem, 2.6vw, 1.15rem); }
}

/* the coda on portrait screens: display size, on the floor it names */
@media (max-width: 639.98px), (max-aspect-ratio: 23/20) {
  body[data-page="home"] .story-coda-t { font-size: clamp(2.3rem, 10.6vw, 3.6rem); line-height: 1; max-width: 12ch; }
}

/* (lab) wide screens: the coda stands on the line of ten records */
@media (min-width: 640px) and (min-aspect-ratio: 23/20) and (min-height: 600.02px) {
  html.story-ready:not(.no-webgl):not(.story-tiny) body[data-page="home"] .story-coda { display: block; right: auto; width: min(46vw, 640px); }
  body[data-page="home"] .story-coda-t { font-size: clamp(3rem, 6.2vw, 6.4rem); line-height: .96; letter-spacing: -0.025em; }
}

/* ---------- phones: shorter, nothing dropped but repeats ---------- */
@media (max-width: 600px) {
  /* the chain folds to records 01-04 (home.js) */
  body[data-page="home"] #governance .chain.is-folded .chain-list > li:nth-child(n + 5) { display: none; }
  body[data-page="home"] #governance .chain-more { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); min-height: 44px; margin: 0 12px 8px; padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: 2px; font: 500 var(--mono-tick)/1 var(--mono); letter-spacing: var(--track-eyebrow, .14em); text-transform: uppercase; color: var(--fg); }
  body[data-page="home"] #governance .chain-more::before { content: "+"; content: "+" / ""; font-size: .9rem; color: var(--accent); }
  body[data-page="home"] #governance .chain-more[aria-expanded="true"]::before { content: "\2212"; content: "\2212" / ""; }
  body[data-page="home"] #governance .chain-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* §02: the explorer's rows at a phone's pitch */
  body[data-page="home"] #stack .arch-layer { min-height: 50px; padding-block: 5px; }
  /* the chain: who and event, the detail under them */
  body[data-page="home"] #governance .chain-list > li { grid-template-columns: 2.2em auto minmax(0, 1fr) auto; grid-template-areas: "i who ev flag" "i what what what"; column-gap: 10px; padding-bottom: 28px; }
}

@media (min-width: 601px) { body[data-page="home"] #governance .chain-more { display: none; } }

/* ========== The reading layer (lab: home editorial) ========== */

/* captions: the chart's key is the caption's second line */
body[data-page="home"] .figure-cap .fc-key { color: var(--fg-2); text-wrap: balance; }

/* chapters close instead of trail */
body[data-page="home"] main > .story + .section { padding-top: clamp(28px, 3.4vw, 48px); }
/* wide screens: the paper the overture leaves (its record line settles at 66 % of the frame) is this chapter's top margin */
@media (min-width: 640px) and (min-aspect-ratio: 23/20) and (min-height: 600.02px) {
  html.story-ready:not(.no-webgl):not(.story-tiny) body[data-page="home"] main > .story + .section { padding-top: 0; }
}

/* §01 the six classes: the ring, then the status in words (no codes, no mono capitals) */
body[data-page="home"] #lifecycles .card .n--ring > span:last-child { font: 400 .875rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--khaki-ink); }
body[data-page="home"] #lifecycles .card .n--ring > .st-next { color: var(--fg-2); }
body[data-page="home"] #lifecycles .card .n--ring > .badge { padding: 0; border: 0; color: var(--signal-ink); }

/* §06 the chain on phones: a smaller record size; 16 px while editing */
@media (max-width: 600px) {
  body[data-page="home"] #governance .chain-list { font-size: .78rem; }
  body[data-page="home"] #governance .chain-list [contenteditable] { font-size: inherit; }
  body[data-page="home"] #governance .chain-list > li { row-gap: 1px; }
}
@media (max-width: 600px) and (pointer: coarse) { body[data-page="home"] #governance .chain-list [contenteditable]:focus { font-size: 16px; } }
@media (pointer: coarse) { body[data-page="home"] #governance .chain-list :is(.ev, .what) { box-sizing: border-box; min-height: 24px; padding-block: 2px; } } /* 24 px targets (SC 2.5.8) */

/* ---------- the first screen: three voices, three sizes ---------- */
body[data-page="home"] .beat-0 .hero-lc01 { column-gap: 14px; }
body[data-page="home"] .hero-lc01 .lc-n, html:not(.no-webgl) body[data-page="home"] .hero-lc01 .lc-n { grid-row: 1; display: block; width: 6px; height: 6px; margin: 9px 0 0; font-size: 0; line-height: 0; }
body[data-page="home"] .hero-lc01 .lc-n .live { display: block; margin: 0; vertical-align: 0; }
@media (scripting: enabled) and (max-width: 599.98px) {
  html:not(.no-webgl) body[data-page="home"] .beat-0 .hero-lc01 { column-gap: 11px; }
  html:not(.no-webgl) body[data-page="home"] .hero-lc01 .lc-n { margin-top: 7px; }
}

/* the chart's key is a sentence */
body[data-page="home"] .figure-cap .fc-key { font: 400 .8rem/1.5 var(--sans); letter-spacing: 0; color: var(--fg-2); }

/* ========== v2x cut: one head, at most one line, then the instrument ========== */
/* four sizes a screen: the display head, the line (Inter 1.1rem), the hedge (Inter .875rem), the instruments' mono */
body[data-page="home"] main > .section { --ch-gap: clamp(36px, 4.4vw, 68px); }
body[data-page="home"] .ch-title { max-width: 15ch; text-wrap: balance; }
body[data-page="home"] .ch-title + :not(.ch-line), body[data-page="home"] .ch-title + .ch-line + * { margin-top: var(--ch-gap); }
body[data-page="home"] .ch-head { margin-bottom: var(--ch-gap); }
body[data-page="home"] .ch-line { margin-top: 18px; max-width: 34ch; font-size: 1.1rem; line-height: 1.5; color: var(--fg-2); text-wrap: balance; }
body[data-page="home"] .ch-note { margin-top: 16px; font-size: .875rem; line-height: 1.45; color: var(--fg-3); }
body[data-page="home"] .ch-link { margin-top: clamp(32px, 3.4vw, 52px); }
body[data-page="home"] .is-dark .ch-note { color: rgba(245, 242, 236, .6); }
/* captions here carry no figure number: no hanging indent */
body[data-page="home"] main .figure-cap { padding-left: 0; }

/* the first screen: the CEO's head and line, two buttons, one fact with its hedge */
body[data-page="home"] .beat-0 .hero-sub + .hero-cta { margin-top: clamp(26px, 3.2vh, 36px); }
body[data-page="home"] .beat-0 .hero-lc01 { margin-top: clamp(28px, 4vh, 44px); }
body[data-page="home"] .hero-lc01 .lc-t, body[data-page="home"] .hero-lc01 .lc-hedge { white-space: normal; }

/* §01 the six classes: a register of six cells, the live one first */
body[data-page="home"] #lifecycles .lc-reg { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; border-top: 1px solid var(--line-strong); }
body[data-page="home"] #lifecycles .lc-reg > .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; row-gap: clamp(30px, 3.6vw, 56px); align-items: start; padding: 18px clamp(18px, 2.2vw, 32px) 26px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
body[data-page="home"] #lifecycles .lc-reg > .card:nth-child(3n + 1) { padding-left: 0; }
body[data-page="home"] #lifecycles .lc-reg > .card:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
body[data-page="home"] #lifecycles .lc-reg .card .n { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; gap: 12px; margin: 0; color: var(--fg-2); }
body[data-page="home"] #lifecycles .lc-reg .lc-code { flex: none; }
body[data-page="home"] #lifecycles .lc-reg .card .h4 { grid-column: 1 / -1; grid-row: 2; align-self: end; margin: 0; max-width: 13ch; font-size: clamp(1.5rem, 2.05vw, 2.05rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--fg-2); text-wrap: balance; }
body[data-page="home"] #lifecycles .lc-reg .card:first-child .h4 { color: var(--fg); }
body[data-page="home"] #lifecycles .lc-reg .card:first-child { box-shadow: inset 0 2px 0 var(--accent); }
@media (max-width: 760px) {
  body[data-page="home"] #lifecycles .lc-reg { grid-template-columns: minmax(0, 1fr); }
  /* a phone: ring | name, the status under the name */
  body[data-page="home"] #lifecycles .lc-reg > .card, body[data-page="home"] #lifecycles .lc-reg > .card:nth-child(n) { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; padding: 14px 0 15px; border-left: 0; align-items: center; }
  body[data-page="home"] #lifecycles .lc-reg .card .n { display: contents; }
  body[data-page="home"] #lifecycles .lc-reg .lc-code { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  body[data-page="home"] #lifecycles .lc-reg .lc-ring { width: 22px; height: 22px; }
  body[data-page="home"] #lifecycles .lc-reg .card .h4 { grid-column: 2; grid-row: 1; align-self: end; max-width: none; font-size: 1.1rem; line-height: 1.25; } /* the line's size: three sizes on this screen */
  body[data-page="home"] #lifecycles .lc-reg .card .n--ring > span:last-child { grid-column: 2; grid-row: 2; justify-self: start; }
}


/* §04: the head, its hedge and two figures beside the chart */
body[data-page="home"] #proof .proof-copy .ch-title { max-width: 11ch; }
body[data-page="home"] #proof .proof-hedge { margin-top: 22px; max-width: 34ch; font-size: .875rem; line-height: 1.5; color: rgba(245, 242, 236, .66); }
body[data-page="home"] #proof .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(36px, 4.4vw, 64px); background: none; border: 0; }
body[data-page="home"] #proof .stats > div { padding: 18px 0 0; background: none; border-top: 1px solid var(--line-strong); }
body[data-page="home"] #proof .stats .v { font-size: clamp(2.4rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
body[data-page="home"] #proof .stats .k { margin-top: 10px; font: 400 .875rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(245, 242, 236, .66); }
body[data-page="home"] #proof .proof-fig .figure-cap { padding-left: 0; }
body[data-page="home"] #proof .figure-cap .fc-key { font-size: .875rem; color: rgba(245, 242, 236, .6); }
@media (min-width: 961px) { body[data-page="home"] #proof .proof-layout { align-items: end; } }

/* §05: the head, then the stack of costs */
body[data-page="home"] #economics .ch-title { max-width: 12ch; }
body[data-page="home"] #economics .cost .figure-cap { margin-top: 18px; }

/* §06: the chain beside its head */
body[data-page="home"] #governance .chain-row .ch-head { margin: 0; }
body[data-page="home"] #governance .chain-row .ch-title { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
@media (min-width: 961px) { body[data-page="home"] #governance .chain-row .ch-head { position: sticky; top: calc(var(--nav-h) + 32px); } }

/* §07: three titles, nothing else */
body[data-page="home"] #research .card-grid--3 { border-left: 0; }
body[data-page="home"] #research .research-card:last-child { border-right: 0; }
body[data-page="home"] #research .research-card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: clamp(150px, 13vw, 210px); padding: 22px clamp(18px, 2.2vw, 32px) 20px; background: none; }
body[data-page="home"] #research .research-card:first-child { padding-left: 0; }
body[data-page="home"] #research .research-card h3 { margin: 0; max-width: 20ch; font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.15; text-wrap: balance; }
body[data-page="home"] #research .research-card h3 .t-head { display: block; }
@media (max-width: 760px) {
  body[data-page="home"] #research .card-grid--3 { grid-template-columns: minmax(0, 1fr); }
  body[data-page="home"] #research .research-card, body[data-page="home"] #research .research-card:first-child { min-height: 0; gap: 12px; padding: 18px 0; border-right: 0; }
  body[data-page="home"] #research .research-card h3 { font-size: 1.2rem; }
}

/* the close */
body[data-page="home"] .cta-band .row { margin-top: clamp(28px, 3vw, 40px); }

/* one small register: hedges, notes, captions and the chapters' links share Inter .875rem */
body[data-page="home"] .ch-link { font-size: .875rem; }
body[data-page="home"] main .figure-cap, body[data-page="home"] main .figure-cap .fc-h { font-size: .875rem; }
/* the first screen's fact at the buttons' size (14 / 13.8 px); the kicker at the sub-line's: four sizes on the first screen
   (display, sub-line, buttons and fact, hedge). The kicker follows every size the overture's modes give the sub-line. */
body[data-page="home"] .hero-lc01 .lc-t { font-size: var(--fs-small); }
body[data-page="home"] .beat-0 .hero-kicker { font-size: var(--fs-body); }
@media (max-width: 639.98px), (max-aspect-ratio: 23/20) { body[data-page="home"] .beat-0 .hero-kicker { font-size: clamp(.98rem, 2.6vw, 1.15rem); } }
html.story-compact body[data-page="home"] .beat-0 .hero-kicker { font-size: .86rem; }
@media (min-width: 600px) { html.story-compact body[data-page="home"] .beat-0 .hero-kicker { font-size: 1rem; } }
@media (scripting: enabled) and (max-width: 599.98px) { html:not(.no-webgl) body[data-page="home"] .beat-0 .hero-kicker { font-size: .86rem; } }
@media (scripting: enabled) and (max-width: 599.98px) and (min-height: 800px) { html:not(.no-webgl) body[data-page="home"] .beat-0 .hero-kicker { font-size: .94rem; } }
@media (min-width: 600px) and (min-height: 900px) and (max-aspect-ratio: 23/20) { html.story-compact body[data-page="home"] .story .beat-0 .hero-kicker { font-size: clamp(1rem, 2.6vw, 1.15rem); } }
/* §05: the rows' names and their indices at one serif size */
body[data-page="home"] #economics .cost-lab b, body[data-page="home"] #economics .cost-val { font-size: clamp(1.5rem, 1.9vw, 1.9rem); }
/* §07: the reading time is a note, not a data label */
body[data-page="home"] #research .research-card .link-arrow { font: 400 .875rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; }

/* above 1920 px site.css grows the root (1 rem = 16 px at 1920, 32 at 3840): every px cap that shapes Home's
   composition gets its rem twin, so 3840 is the 1920 page at twice the size (award a1) */
@media (min-width: 1921px) {
  body[data-page="home"] .beat-text { max-width: min(44%, 35rem); }
  body[data-page="home"] .beat-0 .beat-text { max-width: min(50%, 41.25rem); }
  body[data-page="home"] .beat-0 .hero-lc01 { max-width: min(52%, 37.5rem); }
  html.story-ready:not(.no-webgl):not(.story-tiny) body[data-page="home"] .story-coda { width: min(46vw, 40rem); }
  body[data-page="home"] .beat-0 .hero-lc01 { column-gap: .875rem; margin-top: 2.75rem; padding-top: 1rem; }
  body[data-page="home"] .hero-lc01 .lc-n, html:not(.no-webgl) body[data-page="home"] .hero-lc01 .lc-n { width: .375rem; height: .375rem; margin-top: .5625rem; }
  body[data-page="home"] .hero-lc01 .lc-hedge { margin-top: .375rem; }
  body[data-page="home"] .beat-0 .hero-sub + .hero-cta { margin-top: 2.25rem; }
  body[data-page="home"] main > .section { --ch-gap: 4.25rem; }
  body[data-page="home"] .ch-line { margin-top: 1.125rem; }
  body[data-page="home"] .ch-note { margin-top: 1rem; }
  body[data-page="home"] .ch-link { margin-top: 3.25rem; }
  body[data-page="home"] main > .story + .section { padding-top: 3rem; }
  body[data-page="home"] #lifecycles .lc-reg > .card { row-gap: 3.5rem; padding: 1.125rem 2rem 1.625rem; }
  body[data-page="home"] #lifecycles .lc-reg > .card:nth-child(3n + 1) { padding-left: 0; }
  body[data-page="home"] #lifecycles .lc-reg .card .n { gap: .75rem; }
  body[data-page="home"] #lifecycles .lc-reg .lc-ring { width: 1.75rem; height: 1.75rem; }
  body[data-page="home"] #proof .proof-hedge { margin-top: 1.375rem; }
  body[data-page="home"] #proof .stats { gap: 0 3rem; margin-top: 4rem; }
  body[data-page="home"] #proof .stats > div { padding-top: 1.125rem; }
  body[data-page="home"] #proof .stats .k { margin-top: .625rem; }
  body[data-page="home"] #economics .cost .figure-cap { margin-top: 1.125rem; }
  body[data-page="home"] #economics .cost-rows { gap: 1.625rem; }
  body[data-page="home"] #economics .cost-row { grid-template-columns: 12.5rem minmax(0, 1fr) 4rem; column-gap: 1.25rem; padding-top: 2.125rem; } /* proofchart.css caps them in px: "Traditional" ran into its bar at 3840 */
  body[data-page="home"] #governance .chain-row .ch-head { top: calc(var(--nav-h) + 2rem); }
  body[data-page="home"] #research .research-card { gap: 1.75rem; min-height: 13.125rem; padding: 1.375rem 2rem 1.25rem; }
  body[data-page="home"] #research .research-card:first-child { padding-left: 0; }
  body[data-page="home"] .cta-band .row { margin-top: 2.5rem; }
}
/* wide screens: the opening scene's copy centred between the nav and the scene index, on the globe's centre line (not at
   the bottom under an empty dark field); the safety net (story.js never ran) still lays it out as a static block */
@media (scripting: enabled) and (min-width: 1600px) and (min-height: 820px) and (min-aspect-ratio: 23/20) {
  html:not(.no-webgl):not(.story-tiny) body[data-page="home"] .story .beat-0 { top: var(--nav-h); bottom: var(--story-bar-h); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  html:not(.story-ready):not(.no-webgl) body[data-page="home"] .story .beat-0 { animation: home-static-beat0 1ms var(--story-net) forwards; }
}
@keyframes home-static-beat0 { to { position: relative; left: auto; right: auto; top: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; padding-top: clamp(56px, 9vh, 96px); padding-bottom: clamp(56px, 9vh, 96px); } }
/* without JavaScript the chart is its list of sessions: its key has nothing to key */
@media (scripting: none) { body[data-page="home"] #proof .proof-fig .figure-cap { display: none; } }

/* ========== award a1 ========== */
/* the first screen's fact links to its evidence (the hedge stays under it, unchanged) */
body[data-page="home"] .hero-lc01 .lc-proof { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(245, 242, 236, .38); transition: text-decoration-color var(--dur-feedback) var(--ease-out); }
@media (hover: hover) { body[data-page="home"] .hero-lc01 .lc-proof:hover { text-decoration-color: var(--signal-bright); } }
body[data-page="home"] .hero-lc01 .lc-proof:focus-visible { outline: 2px solid var(--signal-bright); outline-offset: 3px; border-radius: 1px; }
/* the coda carries its hedge in its own frame, at the small step (the paper's caption takes it over as the paper rises) */
body[data-page="home"] .story-coda-s { max-width: 100%; margin-top: clamp(12px, 1.4vw, 20px); font: 400 var(--fs-small)/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(245, 242, 236, .72); text-wrap: balance; }
@media (min-width: 1921px) { body[data-page="home"] .story-coda-s { margin-top: 1.25rem; } }
/* §04: the head says what the chart adds */
body[data-page="home"] #proof .proof-copy .ch-title { max-width: 12ch; }
/* phones: the CEO's headline one step up, still two lines (44 px at 390); the CEO's sub-line and the scenes' lines at 16 px */
@media (scripting: enabled) and (max-width: 599.98px) {
  html:not(.no-webgl) body[data-page="home"] .beat-0 .display-1 { font-size: clamp(2.1rem, 11.25vw, 3.4rem); }
}
@media (scripting: enabled) and (max-width: 599.98px) and (min-height: 740px) {
  html:not(.no-webgl) body[data-page="home"] .beat-0 .hero-sub, html:not(.no-webgl) body[data-page="home"] .beat-0 .hero-kicker,
  html:not(.no-webgl) body[data-page="home"] .story .beat .body-lg { font-size: 1rem; line-height: 1.5; }
}
/* phones: no text under 12 px. The instruments' label tokens step up to 12 px on Home; the few literal sizes follow */
@media (max-width: 599.98px) {
  body[data-page="home"] main { --fs-label: .75rem; --mono-tick: .75rem; --mono-xs: .75rem; --mono-s: .75rem; }
  body[data-page="home"] #lc01 .swarm-controls .halt { font-size: .75rem; }
  body[data-page="home"] #proof .pf-y small, body[data-page="home"] #proof .y-floor small { font-size: .75rem; }
}
/* narrow phones: the scene index's five rules a little shorter, so "Pause motion" keeps one line beside them */
@media (max-width: 379.98px) {
  body[data-page="home"] .story-idx button { min-width: 36px; padding-right: 10px; }
  body[data-page="home"] .story-idx button::before, body[data-page="home"] .story-idx button i { right: 10px; }
  body[data-page="home"] .story-motion { white-space: nowrap; }
}
/* the cost index says "Technology" and "Management" in full, as Proof's Fig. 3.1 (proof a1; integrate a1): Management's
   label one tier up; in the phone container Technology ends at its block's right edge and Management takes a third tier
   (the rules are proof.css's "§03 (a1)", scoped to §05) */
body[data-page="home"] #economics .cost-bar > i:last-of-type > span { padding-bottom: 2.4545em; } /* 27 px at the 11 px label */
body[data-page="home"] #economics .cost-row:first-child { padding-top: 3.25rem; }
@container cost (max-width: 860px) {
  body[data-page="home"] #economics .cost-row:first-child { padding-top: 0; }
  body[data-page="home"] #economics .cost-row:first-child .cost-bar { margin-top: 3.25rem; }
}
@container cost (max-width: 560px) {
  body[data-page="home"] #economics .cost-bar > i:nth-of-type(3) > span { left: auto; right: 0; padding: 0 7px 9px 0; border-left: 0; border-right: 1px solid var(--line-strong); }
  body[data-page="home"] #economics .cost-bar > i:last-of-type > span { padding-bottom: 4.0909em; } /* two tiers up */
  body[data-page="home"] #economics .cost-row:first-child .cost-bar { margin-top: 4.375rem; }
}
/* the chapters after the overture are laid out only near the viewport: the first frame styles the
   overture, not 2,000 elements below it. Each one's stand-in is its measured content height (padding comes on top) for the
   width band, so the page, the scrollbar and the nav ruler are as long at load as when drawn; "auto" keeps its real size once drawn. The footer is
   always drawn: a link to #disclosures inside its fold lands only if it is laid out. */
body[data-page="home"] main > .story ~ section { content-visibility: auto; contain-intrinsic-size: auto var(--cis, 46rem); }
body[data-page="home"] #lifecycles { --cis: 40rem; } body[data-page="home"] #stack { --cis: 79rem; } body[data-page="home"] #lc01 { --cis: 67.5rem; }
body[data-page="home"] #proof { --cis: 50.5rem; } body[data-page="home"] #economics { --cis: 43rem; } body[data-page="home"] #governance { --cis: 55rem; }
body[data-page="home"] #research { --cis: 36rem; } body[data-page="home"] .cta-band { --cis: 8.5rem; }
@media (min-width: 600px) {
  body[data-page="home"] #lifecycles { --cis: 37rem; } body[data-page="home"] #stack { --cis: 90rem; } body[data-page="home"] #lc01 { --cis: 55rem; }
  body[data-page="home"] #proof { --cis: 53rem; } body[data-page="home"] #economics { --cis: 38.5rem; } body[data-page="home"] #governance { --cis: 54.5rem; }
  body[data-page="home"] #research { --cis: 33.5rem; } body[data-page="home"] .cta-band { --cis: 7rem; }
}
@media (min-width: 961px) {
  body[data-page="home"] #lifecycles { --cis: 45.5rem; } body[data-page="home"] #stack { --cis: max(1010px, 38.75rem); } body[data-page="home"] #lc01 { --cis: 67.5rem; }
  body[data-page="home"] #proof { --cis: 34.75rem; } body[data-page="home"] #economics { --cis: 38.625rem; } body[data-page="home"] #governance { --cis: max(695px, 30rem); }
  body[data-page="home"] #research { --cis: 31.25rem; } body[data-page="home"] .cta-band { --cis: 10rem; }
}
/* above 1920 the stack explorer grows with the page (arch.css rem twins, integrate a1): its stand-in follows (1,016 px at 1920,
   2,026 at 3840 measured) */
@media (min-width: 1921px) { body[data-page="home"] #stack { --cis: 63.5rem; } }
@media print { body[data-page="home"] main > .story ~ section { content-visibility: visible; } }
/* §03: the link sits one chapter step under the lab (swarm.css adds 40 px below it) */
body[data-page="home"] #lc01 .swarm-live { margin-bottom: 0; }
/* owner, 2 Nov: Home keeps v2's four figures (overture.css styles them); above 1920 px their px caps get rem twins */
@media (min-width: 1921px) {
  body[data-page="home"] .beat-0 .hero-stats { max-width: min(52%, 40rem); gap: 1.25rem; margin-top: 2.125rem; padding-top: 1.25rem; }
  body[data-page="home"] .beat-0 .hero-stats span { margin-top: .5625rem; }
}