/* Hallmark · shape: one photographic day (redesign of v2, revised 6 Nov 01:40 to the Founder's reference) · genre: editorial · theme: brand · redesign: full · copy: verbatim
 * paper: oklch(93% 0.025 80) · accent: oklch(43% 0.065 215) · display: Cormorant Garamond · body: Plus Jakarta Sans · hero: Poster, a full-screen photograph that rises out of the pine like the sun, words centred on one flat veil · nav: edge-aligned bar over the day's colour spectrum · footer: dusk on the pine, the day's ledger hour by hour over the peak of the Foundation symbol, closed with a double rule · signature: every section rises on its own horizon over the one before; the OWN token mark set down part by part, and a Lease-to-Own contract the reader steps through
 * axes: one gold and green spectrum (champagne, sand, wheat, honey, sage, logo green, pine)/serif/logo green, copper and the token's gold · posture: Poster · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the platform sheet is long; it is the case study's centre and reads in four parts with open space between */
/* Hallmark · waive 83 · photo-led sections on every page · the Founder asked for a site full of photographs, played with and in colour (5 Nov, 20:33) */
/* Hallmark · waive 77 · record sections set as tables, lists and rows · the Token, Governance and Documents pages are the Foundation's register; rows of fact are their content */
/* Hallmark · answered F8 · the Founder asked for several effects on the photographs and a different one on each page; each is scroll-linked, transform and opacity only, and still under reduced motion */
/* Hallmark · dismissed 41 · accent text is the logo green on light grounds and gold or ink on the sheets; buttons are filled pills, never coloured text */
/* Hallmark · dismissed 59 · the Lease-to-Own page (was Case study) carries the product first, then the first case, as the Founder asked (6 Nov 15:06); each section is a part of that story */
/* Hallmark · waive 59 · gaps measured across the arcs · each section rises on its own horizon and overlaps the one before by the arc on purpose; the open ground beside each arc keeps the full section padding */
/* Hallmark · dismissed 42 · the index is the day's ledger, one ruled row per hour with its time and its colour of the spectrum, over the peak of the Foundation symbol; not a column footer */
/* Hallmark · waive 9 · one rising, six keys · every joint is a straight horizon fastened by one piece of the Foundation symbol in its own colour; the pieces come in one order on every page, sweep in from their own side of the symbol or rise, and come together in the footer (Founder, 6 Nov 20:07) */
/* Hallmark · answered F15 · the 12-column grid keeps 32px; the footer's five hours (24px) and the two-column compositions (40px and up) are their own measures */
/* Hallmark · dismissed F20 · the middle photograph of the triptych is set lower on purpose; the three share one row */
/* Hallmark · answered F17 · the sixth step of the road runs four lines at 1440; the words are the content master's */
/* Hallmark · waive 44c · Contact hero: photograph centred under the words · the stacked hero sets the photograph whole under the words; the measure reads it as a side visual, it is not beside the text */
/* Hallmark · waive 79 · Important information and Transcript title bands · both pages are text only, as the content master asks; they open on a centred title band */
/* Hallmark · waive 49b · the daylight line and links inside running answers wrap on phones · the first is the footer's statement set as display type; the others are links in sentences */
@import url("./tokens.css");
@import url("./base.css");

/* ───────────── Fonts (self-hosted, OFL) ───────────── */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/cormorant-garamond-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/plus-jakarta-sans-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/jetbrains-mono-normal-400.woff2") format("woff2"); }

/* ───────────── Ground and tone of each scene ─────────────
   v10: one gold and green spectrum from the logo: champagne, sand, wheat and honey; sage, the logo green, spruce and pine.
   Each section takes one, edge to edge, and rises on its own horizon over the one before; nothing fades into anything. */
[data-ground="paper"], [data-ground="page"] { --g: var(--ground-paper); }
[data-ground="firstlight"] { --g: var(--ground-firstlight); }
[data-ground="wheat"] { --g: var(--ground-wheat); }
[data-ground="golden"] { --g: var(--ground-golden); }
[data-ground="mist"] { --g: var(--ground-mist); }
[data-ground="spruce"] { --g: var(--ground-spruce); }
[data-ground="pine"] { --g: var(--ground-pine); }
[data-ground="green"] { --g: var(--green); }
[data-ground="copper"] { --g: var(--copper); }
[data-tone="light"] {
  --fg: var(--ink); --fg-muted: var(--ink-muted); --accent-text: var(--green); --line: var(--line-on-light); --rule: var(--ink);
  --btn-bg: var(--green); --btn-fg: var(--paper); --btn-hover: var(--green-deep); --link-line: var(--green); --focus: var(--ink); --mark: var(--green);
}
[data-tone="dark"] {
  --fg: var(--light); --fg-muted: var(--light-muted); --accent-text: var(--copper-on-dark); --line: var(--line-on-dark); --rule: var(--light);
  --btn-bg: var(--paper); --btn-fg: var(--green); --btn-hover: var(--light); --link-line: var(--copper); --focus: var(--light); --mark: var(--copper);
}
[data-ground="pine"] { --accent-text: var(--gold); --mark: var(--gold); --link-line: var(--gold); }
[data-ground="golden"] { --accent-text: var(--green-deep); --link-line: var(--green-deep); --mark: var(--green-deep); }
[data-tone="light"] { --rim: var(--copper); } [data-tone="dark"], [data-photo] { --rim: var(--gold); }
/* the logo's copper as a sheet: ink only */
[data-ground="copper"] { --fg: var(--ink); --fg-muted: var(--ink); --accent-text: var(--ink); --line: var(--line-on-light); --rule: var(--ink); --btn-bg: var(--green); --btn-fg: var(--paper); --btn-hover: var(--green-deep); --link-line: var(--green); --focus: var(--ink); --mark: var(--green); }

/* ───────────── Base ───────────── */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-md)); font-synthesis: none; scrollbar-color: var(--copper) var(--ground-paper); -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: var(--gold); color: var(--ink); }
input, textarea { caret-color: var(--green); }
p, li, dd, td { text-wrap: pretty; }
body { background: var(--ground-page); color: var(--ink); font-size: var(--text-md); line-height: 1.65; font-kerning: normal; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--z-modal); background: var(--ground-page); }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
strong { font-weight: 600; }
code { font-family: var(--font-outlier); font-size: 0.9em; }
:focus-visible { outline: 2px solid var(--focus, var(--color-focus)); outline-offset: 3px; border-radius: var(--radius-sm); transition: none; }
.skip { position: absolute; left: var(--gutter); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); background: var(--copper); color: var(--ink); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + var(--space-sm)); }
.skip:focus-visible { outline: 2px solid var(--light); outline-offset: -6px; background: var(--green); color: var(--light); padding-block: var(--space-md); border-radius: var(--radius-0); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); }
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* ───────────── Type ───────────── */
.h1, .h2, .h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; text-wrap: balance; margin: 0; max-width: none; }
.h1 { font-size: var(--text-display); line-height: 0.95; }
.h2 { font-size: var(--text-section); line-height: 1.02; }
.h3 { font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.005em; }
.statement { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-statement); line-height: 1.18; overflow-wrap: break-word; min-width: 0; }
.chapter { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-chapter); line-height: 1.2; color: var(--accent-text); }
.lead { font-size: var(--text-lead); line-height: 1.5; max-width: none; }
.small { font-size: var(--text-sm); line-height: 1.55; }
.label { font-size: var(--text-xs); font-weight: 600; line-height: 1.3; }
.muted { color: var(--fg-muted); }
.prose { max-width: var(--measure); display: grid; gap: 1.1em; }
.prose ul { display: grid; gap: 0.9em; }
.prose li { padding-left: 1.4em; position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.7em; height: var(--rule-hair); background: var(--mark); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ───────────── Actions: the daybreak button ─────────────
   A copper sun rests on a fine horizon inside the logo-green pill; reach for it and the sun rises. The label is set in the
   display serif, so the one action on a screen reads as part of the composition, not a widget. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-xl) 0 var(--space-md); border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-xl); letter-spacing: 0.01em; line-height: 1; text-decoration: none; border: 0; cursor: pointer;
  transition: background-color var(--dur-hover) ease, transform var(--dur-hover) ease;
}
.btn .dawn { position: relative; flex: none; width: 30px; height: 30px; overflow: hidden; }
.btn .dawn::before { content: ""; position: absolute; left: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--copper); transform: translateY(9px); transition: transform var(--dur-long) var(--ease-out); }
.btn .dawn::after { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: currentColor; opacity: 0.7; }
.btn:hover .dawn::before, .btn:focus-visible .dawn::before { transform: translateY(-1px); }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-color: var(--focus); outline-offset: 4px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tlink {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--text-md); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 0.42em;
  transition: text-decoration-thickness var(--dur-hover) ease;
}
.tlink:hover, .tlink:focus-visible { text-decoration-thickness: 2px; }
.tlink:active { opacity: 0.8; }
.prose a, .inline-link { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); align-items: center; min-width: 0; max-width: 100%; }
@media (max-width: 39.99rem) { .btn { white-space: normal; line-height: 1.15; padding-block: var(--space-xs); max-width: 100%; } }
@media (max-width: 39.99rem) { main .btn { font-size: var(--text-lg); gap: var(--space-xs); padding-inline: var(--space-sm) var(--space-lg); } } /* v28: a button stays on one line on a phone */

/* Values that do not exist yet: clearly marked, never invented */
.btn .ph { color: inherit; border-color: currentColor; font-style: normal; }
.ph { font-family: var(--font-body); font-size: 0.9em; font-style: normal; letter-spacing: 0; white-space: nowrap; color: var(--accent-text); border: 1px dashed currentColor; border-radius: var(--radius-sm); padding: 0 var(--space-2xs); }
.needs-note { display: inline-block; white-space: normal; max-width: 100%; line-height: 1.5; }

/* ───────────── Header and the day rail ───────────── */
.site-header {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: var(--z-sticky-nav); height: var(--header-h);
  color: var(--h-fg); background-color: var(--h-bg); transition: background-color var(--dur-short) var(--ease-light), color var(--dur-short) var(--ease-light); /* quick, so it never sits as a third colour between two grounds */
}
.site-header[data-tone="light"] { --h-bg: var(--hg, var(--ground-paper)); --h-fg: var(--ink); --focus: var(--ink); --rail: var(--line-on-light); }
.site-header[data-tone="photo"] { --h-bg: rgb(var(--scrim-rgb) / 0.4); --h-fg: var(--light); --focus: var(--light); --rail: var(--line-on-dark); }
.site-header[data-tone="photo"] .brand, .site-header[data-tone="photo"] .nav-a, .site-header[data-tone="photo"] .menu-btn, .site-header[data-tone="photo"] .phase-word { text-shadow: 0 1px 8px rgb(var(--scrim-rgb) / 0.35); }
.site-header[data-tone="dark"] { --h-bg: var(--hg, var(--green)); --h-fg: var(--light); --focus: var(--light); --rail: var(--line-on-dark); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: var(--space-lg); }
.brand { display: flex; align-items: center; text-decoration: none; min-height: 44px; flex: none; }
.brand img { height: 30px; width: auto; }
@media (min-width: 80rem) { .brand img { height: 36px; } }
.logo-light { display: none; }
.site-header[data-tone="light"] .logo-light { display: block; }
.site-header[data-tone="light"] .logo-dark { display: none; }
.phase-word { display: inline-flex; align-items: baseline; gap: var(--space-xs); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1; padding-left: var(--space-md); border-left: var(--rule-hair) solid color-mix(in oklab, currentColor 35%, transparent); min-width: 6.5em; }
.nav { margin-left: auto; display: none; }
.nav > ul { display: flex; gap: var(--space-lg); align-items: center; }
.nav-a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-nav); font-weight: 500; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; background: none; border: 0; color: inherit; font-family: inherit; line-height: 1.2; cursor: pointer; padding: 0; }
.nav-a::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-xs); height: var(--rule-hair); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-text); }
.nav-a:hover::after, .nav-a:focus-visible::after { transform: scaleX(1); }
.nav-a[aria-current="page"]::after, .nav-a.is-current::after { transform: scaleX(1); height: 2px; background: var(--phase-c, var(--copper)); }
.site-header[data-tone="light"] .nav-a[aria-current="page"]::after { background: color-mix(in oklab, var(--phase-c, var(--copper)) 45%, var(--ink)); } /* v29: the mark stays visible on the light bar */
.nav-a:active { opacity: 0.8; }
.nav-sub { position: relative; }
.nav-panel { position: absolute; top: calc(100% + var(--space-xs)); left: calc(-1 * var(--space-lg)); min-width: 15rem; padding: var(--space-sm) var(--space-lg); z-index: var(--z-dropdown); background: var(--ground-page); color: var(--ink); border-top: 2px solid var(--green); --focus: var(--ink); box-shadow: 0 12px 32px rgb(var(--scrim-rgb) / 0.12); }
.nav-panel a { display: flex; align-items: center; min-height: 44px; text-decoration: none; font-size: var(--text-sm); border-bottom: var(--rule-hair) solid var(--line-on-light); }
.nav-panel li:last-child a { border-bottom: 0; }
.nav-panel a:hover, .nav-panel a[aria-current="page"] { color: var(--green); }
.menu-btn { margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 var(--space-2xs); display: inline-flex; align-items: center; gap: var(--space-sm); background: none; border: 0; color: inherit; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.menu-btn .bars { width: 22px; height: 9px; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; }
.menu-btn .bars::before { top: 0; } .menu-btn .bars::after { bottom: 0; }
@media (min-width: 64rem) { .nav { display: block; } .menu-btn { display: none; } } /* v27: six links fit from 1024 */
@media (max-width: 26rem) { .phase-word { display: none; } }
/* The day rail: the five hours of the day as a spectrum of flat colours, from the copper of dawn to the green of dusk.
   The hours already passed are lit; the sun stands at the hour of the section in the middle of the screen. */
.dayrail { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none; }
.dayrail .line { position: absolute; inset: 0; }
.dayrail .track, .dayrail .lit { position: absolute; inset: 0; display: flex; gap: var(--space-3xs); }
.dayrail .track { opacity: 0.42; }
.dayrail .lit { clip-path: inset(0 var(--unlit, 100%) 0 0); }
.dayrail .seg { display: block; height: 100%; flex-basis: 0; }
.d-dawn { --dc: var(--day-dawn); } .d-morning { --dc: var(--day-morning); } .d-midday { --dc: var(--day-midday); } .d-afternoon { --dc: var(--day-afternoon); } .d-dusk { --dc: var(--day-dusk); }
.dayrail .seg { background: var(--dc); }
.dayrail .sun { position: absolute; top: -5px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--phase-c, var(--copper)); transform: translateX(var(--sun-px, 0px)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--phase-c, var(--copper)) 30%, transparent); }

/* Menu: the site as one day */
.menu { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--ground-page); color: var(--ink); overflow-y: auto; --fg: var(--ink); --fg-muted: var(--ink-muted); --focus: var(--ink); --link-line: var(--green); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.menu[hidden] { display: none; }
.menu-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.menu-top img { height: 30px; width: auto; }
.menu-close { display: inline-flex; margin-left: 0; }
.menu-btn .bars.is-x { height: 14px; width: 18px; }
.menu-btn .bars.is-x::before, .menu-btn .bars.is-x::after { top: 50%; bottom: auto; }
.menu-btn .bars.is-x::before { transform: rotate(45deg); } .menu-btn .bars.is-x::after { transform: rotate(-45deg); }
.menu:not([hidden]) { animation: menu-in var(--dur-short) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .menu:not([hidden]) { animation: none; } }
.menu-day { display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
.menu-phase { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); border-top: var(--rule-hair) solid var(--line-on-light); padding-top: var(--space-md); }
@media (min-width: 48rem) { .menu-phase { grid-template-columns: 10rem minmax(0, 1fr); } }
.menu-phase .chapter { color: var(--green); }
.menu-phase ul { display: grid; gap: var(--space-3xs); }
.menu-phase a { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.15; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.menu-phase a:hover, .menu-phase a[aria-current="page"] { color: var(--green); }
.menu-phase a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.menu-phase .sub a { font-size: var(--text-2xl); padding-left: var(--space-lg); }
.menu-foot { padding-bottom: var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-lg); }

/* ───────────── Sections ───────────── */
.sec { position: relative; color: var(--fg); background-color: var(--g); }
main > section { isolation: isolate; }
.site-footer { margin-top: calc(-1 * var(--arc)); }
.stacking main > section { position: sticky; top: var(--stick, 0px); }
.stacking main > section.sheet { margin-top: calc(var(--hold, 0px) - var(--lap)); }
.shade { position: absolute; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; pointer-events: none; }
/* v8: the green and pine sections run the full width of the page; everything else sits on white */
.pad { padding-block: var(--section-pad); }
.head { display: grid; gap: var(--space-lg); margin-bottom: clamp(var(--space-2xl), 9vh, var(--space-4xl)); }
.photo { position: relative; overflow: clip; background: color-mix(in oklab, var(--g, var(--scrim)) 80%, var(--scrim)); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-pos, 50% 50%); }
/* every framed photograph settles into its frame as it arrives, slowly */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .d-photo img, .pair-big img, .pair-small img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  @keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
} }
@media (max-width: 47.99rem) { .photo img { object-position: var(--mfocus-pos, var(--focus-pos, 50% 50%)); } }
.photo::after { content: ""; position: absolute; inset: 0; background-image: url("img/grain.png"); background-size: 160px; opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; }

/* Hero (v8, the Founder's reference): the photograph fills the screen edge to edge; one flat veil; the headline,
   one sentence and one action set large and centred in its lower half. No gradient anywhere. */
.s-overture { position: relative; isolation: isolate; overflow: hidden; min-height: max(100svh, 560px); display: grid; align-content: end; justify-items: center; color: var(--light); background: var(--ground-pine); --fg: var(--light); --fg-muted: var(--light); --focus: var(--light); --btn-bg: var(--paper); --btn-fg: var(--green); --btn-hover: var(--light); --link-line: var(--copper); --accent-text: var(--copper-on-dark); }
.s-overture .photo { position: absolute; inset: 0; z-index: -3; }
.s-overture .photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--push, 1)); transform-origin: 50% 60%; will-change: transform; }
.veil { position: absolute; inset: 0; z-index: -2; background: rgb(var(--scrim-rgb) / var(--veil, var(--tint-a))); pointer-events: none; }
.ov-words { display: grid; justify-items: center; text-align: center; gap: clamp(var(--space-lg), 3vh, var(--space-xl)); padding-block: calc(var(--header-h) + var(--space-2xl)) calc(var(--arc) + clamp(var(--space-2xl), 10vh, var(--space-4xl))); }
.ov-words .h1, .ov-words .h2 { font-size: var(--text-display); line-height: 0.98; max-width: 10.5em; text-shadow: 0 1px 2px rgb(var(--scrim-rgb) / 0.25); }
.is-first .ov-words .h1 { font-size: var(--text-display-xl); line-height: 0.92; max-width: 9em; }
.ov-words .lead { max-width: 34rem; color: var(--light); font-size: var(--text-lead); text-shadow: 0 1px 2px rgb(var(--scrim-rgb) / 0.3); }
.ov-words .actions { justify-content: center; margin-top: var(--space-xs); }
.ov-logo { width: clamp(150px, 14vw, 220px); }
.ov-cap { position: absolute; right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: calc(var(--arc) + var(--space-lg)); font-family: var(--font-display); font-style: italic; font-size: var(--text-chapter); line-height: 1.2; color: var(--light); }
@media (max-width: 47.99rem) { .ov-cap { display: none; } }
.s-overture .photo::after, .s-horizon .photo::after { opacity: 0.22; }
.opening { padding-top: var(--section-pad-s); padding-bottom: calc(var(--arc) + var(--space-xl)); }
.opening p { font-size: var(--text-lead); max-width: 40rem; }

/* Daybreak (every hero): once its photograph has loaded, it rises out of the pine as a widening arc, the way the sun clears the horizon;
   a flat wash of the token's gold lies over it in soft light and lifts; the words come up a step behind. The words are
   on screen from the first paint. 1.1 s in all; reduced motion shows the finished photograph. */
.daybreak { position: absolute; inset: 0; z-index: -2; background: var(--gold); mix-blend-mode: soft-light; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .is-first .ov-photo, .js .is-hero .ov-photo { clip-path: ellipse(64% 6% at 50% 100%); }
  .js .is-lit .ov-photo { animation: day-rise 1000ms cubic-bezier(0.33, 1, 0.68, 1) both; }
  .js .is-lit .daybreak { animation: day-gold 1000ms var(--ease-light) 150ms both; }
  .js .is-first .ov-words > *, .js .is-hero .ov-words > * { animation: day-words 760ms var(--ease-text) both; }
  .js .ov-words > :nth-child(2) { animation-delay: 90ms; } .js .ov-words > :nth-child(3) { animation-delay: 180ms; } .js .ov-words > :nth-child(4) { animation-delay: 270ms; }
}
@keyframes day-rise { from { clip-path: ellipse(64% 6% at 50% 100%); } to { clip-path: ellipse(130% 150% at 50% 100%); } }
@keyframes day-gold { from { opacity: 0.9; } to { opacity: 0; } }
@keyframes day-words { from { transform: translateY(22px); opacity: 0.55; } to { transform: none; opacity: 1; } }
.ov-words { will-change: transform; }

/* Split (v24): the photograph is half of the section, not a picture laid on it. It runs from the section's edge to the
   middle and from its rim to its foot, cut by the same arc as the ground; the words sit in the other half on the page's
   grid; in a long section it simply runs the whole height. On a phone it opens the section, edge to edge. */
.s-diptych { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--section-pad); }
.s-diptych .d-photo { aspect-ratio: 4 / 5; width: 100%; max-height: 72svh; }
.s-diptych .d-text { display: grid; align-content: center; min-width: 0; padding: var(--space-2xl) var(--frame) 0; }
.s-diptych .d-inner { display: grid; gap: var(--space-lg); max-width: 34rem; }
.d-inner .prose > p, .d-inner .prose li { font-size: var(--text-lead); line-height: 1.6; }
.d-inner .prose.solo > p { font-family: var(--font-display); font-size: var(--text-statement); line-height: 1.2; }
.d-inner .prose.solo { max-width: 30rem; }
@media (min-width: 60rem) {
  .s-diptych { container-type: inline-size; --edge: max(var(--frame), calc((100cqw - var(--container)) / 2 + var(--gutter))); --inner: clamp(var(--space-2xl), 6vw, var(--space-4xl));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; min-height: min(100svh, 60rem); }
  .s-diptych.is-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .s-diptych.is-wide.photo-right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .s-diptych.photo-right .d-photo { order: 2; }
  .s-diptych .d-photo { align-self: stretch; width: 100%; height: auto; max-height: none; aspect-ratio: auto; }
  .s-diptych .d-text { padding: var(--section-pad) var(--edge) var(--section-pad) var(--inner); }
  .s-diptych.photo-right .d-text { padding-inline: var(--edge) var(--inner); }
  .s-diptych.is-wide .d-inner { max-width: 42rem; }
}
.facts { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }
.facts li { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--line); font-size: var(--text-lead); line-height: 1.4; }
.facts strong { font-family: var(--font-display); font-weight: 500; font-size: var(--text-figure); line-height: 1; letter-spacing: -0.015em; font-variant-numeric: lining-nums; display: block; }

/* Reveal once: from the outer edge */
.clip { position: absolute; inset: 0; }
.rv .clip { clip-path: inset(0 0 0 0); transition: clip-path var(--dur-long) var(--ease-out) 60ms; }
.rv .clip img { transition: transform 1200ms var(--ease-out); }
.js .rv.pre .clip { clip-path: inset(0 0 0 100%); }
.js .rv.pre.from-right .clip { clip-path: inset(0 100% 0 0); }
.js .rv.pre .clip img { transform: scale(1.08); }
.js .s-diptych .rv.pre .clip, .js .s-pair .rv.pre .clip { clip-path: inset(0); }
.js .s-diptych .rv.pre .clip img, .js .s-pair .rv.pre .clip img { transform: none; }

/* ───────────── The signature: a stack of photographs that opens left and right ───────────── */
.s-stack { --gap: var(--gap-columns); }
.stack-pin { padding-block: clamp(var(--space-3xl), 14vh, var(--section-gap)); display: grid; gap: var(--space-2xl); align-content: center; }
.stack-head { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .stack-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.stack-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap); counter-reset: none; }
.stack-row.n3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .stack-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .stack-row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }
.stack-item { position: relative; z-index: var(--z); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-content: start; min-width: 0; }
.stack-print img { position: absolute; inset: 0; }
.stack-print { aspect-ratio: 4 / 5; box-shadow: 0 1px 0 rgb(var(--scrim-rgb) / 0.08); }
.stack-row.n6 .stack-print, .stack-row.n5 .stack-print { aspect-ratio: 3 / 4; }
.stack-cap { display: grid; gap: var(--space-xs); }
.stack-num { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 0.9; font-variant-numeric: lining-nums; }
.stack-cap .h3 { font-size: var(--text-title); }
.stack-cap p { font-size: var(--text-md); line-height: 1.5; }
.stack-row.n5 .stack-cap .h3, .stack-row.n6 .stack-cap .h3 { font-size: var(--text-xl); }
@media (max-width: 79.99rem) { .stack-row.n6 .stack-cap .h3 { font-size: var(--text-lg); } .stack-row.n6 .stack-cap p { font-size: var(--text-sm); } }
.stack-cap p.big { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; }
@media (max-width: 47.99rem) { .stack-cap p.big { font-size: var(--text-lg); } }
.stack-head .actions { align-self: end; }
@media (min-width: 64rem) { .stack-head .actions { justify-content: flex-end; } }
.stack-print::before { content: ""; position: absolute; inset: 0; z-index: var(--z-base); background: var(--g); mix-blend-mode: color; opacity: 0; pointer-events: none; }
.s-stack { overflow-x: clip; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) and (min-height: 37.5rem) {
    .s-stack { view-timeline: --stack block; min-height: 250svh; padding-top: var(--arc); } /* the stage begins below the rim */
    .stack-pin { position: sticky; top: var(--header-h); min-height: calc(100svh - var(--header-h)); padding-block: var(--space-xl); gap: var(--space-xl); }
    .s-stack .stack-row .stack-print { aspect-ratio: auto; width: 100%; height: clamp(180px, calc(100svh - var(--header-h) - 400px), 480px); animation: stack-open linear both; animation-timeline: --stack; animation-range: contain 0% contain 46%; }
    .stack-print::before { animation: tint-out linear both; animation-timeline: --stack; animation-range: contain 4% contain 50%; }
    .stack-cap { animation: cap-in linear both; animation-timeline: --stack; animation-range: contain 30% contain 52%; }
    @keyframes stack-open {
      from { transform: translateX(calc(var(--dx) * (100% + var(--gap)))) rotate(var(--r)) scale(0.9); }
      to { transform: none; }
    }
    @keyframes cap-in { from { opacity: 0.12; } to { opacity: 1; } }
    @keyframes tint-out { from { opacity: 0.88; } to { opacity: 0; } }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 59.99rem) {
    .stack-print { animation: stack-in linear both; animation-timeline: view(); animation-range: entry 5% cover 38%; }
    .stack-print::before { animation: tint-out linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
    @keyframes stack-in { from { transform: translateX(calc(var(--mx) * 55%)) rotate(var(--r)); } to { transform: none; } }
    @keyframes tint-out { from { opacity: 0.88; } to { opacity: 0; } }
  }
}

/* Pair (v24): like the split, the large photograph is half of the section; the second is laid on it as a print, in a
   mat of the section's own ground, at the inner foot, so the two read as one place and its detail. */
.s-pair .pair-grid { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--section-pad); }
.pair-media { position: relative; aspect-ratio: 4 / 5; max-height: 76svh; width: 100%; }
.pair-big { position: absolute; inset: 0; }
.pair-small { position: absolute; z-index: 2; width: 40%; aspect-ratio: 4 / 5; right: var(--frame); bottom: calc(-1 * var(--space-2xl)); outline: clamp(6px, 0.8vw, 12px) solid var(--g); }
.s-pair.flip .pair-small { right: auto; left: var(--frame); }
.pair-text { display: grid; gap: var(--space-xl); align-content: center; padding: calc(var(--space-2xl) * 2) var(--frame) 0; }
.pair-text p { font-size: var(--text-lead); line-height: 1.6; max-width: 32rem; }
.pair-text p.first { font-family: var(--font-display); font-size: var(--text-statement); line-height: 1.2; }
@media (min-width: 60rem) {
  .s-pair { container-type: inline-size; --edge: max(var(--frame), calc((100cqw - var(--container)) / 2 + var(--gutter))); --inner: clamp(var(--space-2xl), 6vw, var(--space-4xl)); }
  .s-pair .pair-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; min-height: min(100svh, 60rem); }
  .s-pair.flip .pair-media { order: 2; }
  .pair-media { align-self: stretch; height: auto; max-height: none; aspect-ratio: auto; }
  .pair-small { width: min(36%, 16rem); right: var(--space-2xl); bottom: var(--space-2xl); }
  .s-pair.flip .pair-small { left: var(--space-2xl); }
  .pair-text { padding: var(--section-pad) var(--edge) var(--section-pad) var(--inner); }
  .s-pair.flip .pair-text { padding-inline: var(--edge) var(--inner); }
}

/* Lens (Foundation): the principles read beside one triangle, the outline of the mark, that changes photograph as you read */
.lens-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 60rem) { .lens-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--space-3xl); align-items: start; } }
.lens-list { display: grid; border-top: var(--rule-strong) solid var(--rule); }
.lens-item { position: relative; display: grid; grid-template-columns: var(--space-2xl) minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--line); }
.lens-item::before { content: ""; position: absolute; left: calc(-1 * var(--space-md)); top: var(--space-xl); bottom: var(--space-xl); width: 3px; background: var(--copper); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-long) var(--ease-out); }
.lens-item.is-on::before { transform: scaleY(1); }
.lens-num { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 0.9; color: var(--accent-text); font-variant-numeric: lining-nums; }
.lens-body { display: grid; gap: var(--space-xs); min-width: 0; }
.lens-item .h3 { font-size: var(--text-2xl); }
.lens-item p { font-size: var(--text-lead); line-height: 1.5; color: var(--fg-muted); max-width: 30rem; }
.lens-mini { width: clamp(72px, 22vw, 112px); aspect-ratio: 1000 / 866; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lens-stage { display: none; }
@media (min-width: 60rem) {
  .lens-item { grid-template-columns: var(--space-2xl) minmax(0, 1fr); padding-block: clamp(var(--space-xl), 8vh, var(--space-3xl)); }
  .lens-mini { display: none; }
  .lens-stage { display: block; position: sticky; top: calc(var(--header-h) + var(--space-2xl)); }
}
.lens-tri { position: relative; aspect-ratio: 1000 / 866; clip-path: polygon(50% 2.1%, 98.2% 98.4%, 1.8% 98.4%); background: var(--ground-wheat); }
.lens-ph { position: absolute; inset: 0; transition: opacity var(--dur-crossfade) var(--ease-light), transform 1600ms var(--ease-out); }
.js .lens-ph { opacity: 0; transform: scale(1.06); }
.js .lens-ph.is-on { opacity: 1; transform: none; }
.lens-mark { position: absolute; inset: 0; width: 100%; height: auto; aspect-ratio: 1000 / 866; overflow: visible; pointer-events: none; }
.lens-mark polygon { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.lens-mark .a { stroke: var(--copper); }
.lens-mark .b { stroke: var(--green); }

/* Path (Model): the six steps travel from right to left while the section is held */
.s-path { overflow-x: clip; }
.path-pin { display: grid; gap: var(--space-xl); padding-block: clamp(var(--space-3xl), 14vh, var(--section-gap)); }
.path-pin { padding-top: max(clamp(var(--space-3xl), 14vh, var(--section-gap)), calc(var(--arc) * 1.6 + var(--space-xl))); } /* v27: clear of the key that fastens its joint */
.path-view { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); container-type: inline-size; scrollbar-width: thin; scrollbar-color: var(--green) transparent; }
.path-view:focus-visible { outline-offset: -4px; }
.path-track { display: flex; gap: var(--gap-columns); width: max-content; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); padding-bottom: var(--space-md); }
.path-step { flex: 0 0 clamp(240px, 72cqw, 400px); scroll-snap-align: start; display: grid; gap: var(--space-md); align-content: start; }
.path-ph { aspect-ratio: 4 / 5; }
.path-cap { display: grid; gap: var(--space-xs); max-width: 26rem; }
.path-num { font-family: var(--font-display); font-size: var(--text-figure); line-height: 0.85; color: var(--accent-text); font-variant-numeric: lining-nums; }
.path-cap .h3 { font-size: var(--text-title); }
.path-cap p { font-size: var(--text-md); line-height: 1.5; }
.path-line { position: relative; height: 2px; background: var(--line); }
.path-line i { position: absolute; inset: 0; background: var(--green); transform-origin: left; }

/* Triptych (Collaborate): three framed photographs with air between them, the middle one set lower; they rise into place */
.tri-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
.tri-item { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.tri-panel { position: relative; aspect-ratio: 4 / 5; overflow: clip; }
.tri-ph { position: absolute; inset: 0 -6%; }
.tri-cap { display: grid; gap: var(--space-xs); max-width: 24rem; }
.tri-cap .h3 { font-size: var(--text-title); }
.tri-cap p { font-size: var(--text-md); line-height: 1.6; }
@media (min-width: 48rem) {
  .tri-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(var(--space-lg), 4vw, var(--space-3xl)); align-items: start; }
  .tri-item:nth-child(2) { margin-top: var(--space-4xl); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tri-item { animation: tri-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .tri-ph { animation: tri-pan linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes tri-rise { from { transform: translateY(calc(var(--space-2xl) + var(--i) * var(--space-xl))); } to { transform: none; } }
    @keyframes tri-pan { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) and (min-height: 37.5rem) {
    .s-path { view-timeline: --path block; height: 420svh; padding-top: var(--arc); } /* the stage begins below the rim */
    .path-pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); align-content: center; padding-block: var(--space-xl); gap: var(--space-xl); }
    .path-view { overflow: visible; scroll-snap-type: none; }
    .path-track { animation: path-move linear both; animation-timeline: --path; animation-range: contain 0% contain 100%; gap: clamp(var(--space-xl), 4vw, var(--space-3xl)); }
    .path-step { --ph: clamp(260px, calc(100svh - var(--header-h) - 360px), 500px); flex-basis: max(calc(var(--ph) * 0.8), 280px); }
    .s-path .path-ph { aspect-ratio: 4 / 5; height: var(--ph); width: auto; max-width: 100%; }
    .path-line i { animation: path-fill linear both; animation-timeline: --path; animation-range: contain 0% contain 100%; }
    @keyframes path-move { to { transform: translateX(calc(-100% + 100cqw)); } }
    @keyframes path-fill { from { transform: scaleX(0); } to { transform: none; } }
  }
}

/* Horizon (v25): a panoramic band inside the page, its corners cut at the symbol's 60 degrees; the words below it on the
   section's ground. The second photograph comes up over the first as the band crosses the screen. */
.s-horizon { --c: clamp(22px, 3.2vw, 52px); }
.hz-band { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); padding-block: var(--section-pad); }
.hz-media { position: relative; isolation: isolate; aspect-ratio: 4 / 3; overflow: hidden; background: var(--scrim);
  clip-path: polygon(calc(var(--c) * 0.57735) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c) * 0.57735) 100%, 0 100%, 0 var(--c)); }
.hz-media .photo { position: absolute; inset: 0; }
.hz-media .photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--push, 1)); transform-origin: 50% 60%; }
.s-horizon .photo.second { opacity: var(--x, 0); }
.hz-head .h2 { color: var(--accent-text); }
.hz-words { display: grid; gap: var(--space-xl); justify-items: start; }
.hz-words .statement { font-family: var(--font-display); font-style: italic; font-size: var(--text-statement); line-height: 1.2; max-width: 24em; }
@media (min-width: 60rem) {
  .hz-media { aspect-ratio: 21 / 9; }
  .hz-band { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-columns); }
  .hz-media { grid-column: 1 / -1; }
  .s-horizon.no-head .hz-words { grid-column: 1 / -1; }
}

/* Statement: one passage, its head beside it */
.st-grid { row-gap: var(--space-xl); align-items: start; }
.st-head { grid-column: 1 / -1; }
.s-stillness .statement { grid-column: 1 / -1; max-width: 22em; }
.st-body { grid-column: 1 / -1; }
.s-stillness.is-center .statement { text-align: center; margin-inline: auto; }
@media (min-width: 64rem) {
  .st-head { grid-column: 1 / 4; padding-top: var(--space-sm); }
  .s-stillness .statement { grid-column: 4 / 13; }
  .st-body { grid-column: 4 / 10; }
  .s-stillness.no-head .statement { grid-column: 2 / 12; }
  .s-stillness.is-center .statement { grid-column: 1 / -1; }
}
.st-head .h3 { color: var(--accent-text); }
/* a chapter opens inside a page (the trace, inside OWN): its name is set as a section heading, in the side column
   where the sections round it carry theirs */
@media (min-width: 60rem) { .s-stillness.is-chapter .st-head { padding-top: 0; } }
.lightable { transition: color 1200ms var(--ease-light); }
.js .lightable.pre { color: var(--fg-muted); }
.startline { grid-column: 1 / -1; height: 1px; background: var(--copper); transform: scaleX(1); transition: transform 1200ms var(--ease-light); margin-top: var(--space-xl); }
.js .startline.pre { transform: scaleX(0); }

/* Ledger: rows, tables and figures of the record */
.lg-grid { row-gap: var(--space-xl); }
.lg-side { grid-column: 1 / -1; display: grid; gap: var(--space-lg); align-content: start; }
.lg-main { grid-column: 1 / -1; min-width: 0; display: grid; gap: var(--space-xl); align-content: start; }
@media (min-width: 64rem) {
  .lg-side { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + var(--space-2xl)); align-self: start; } /* the name stays beside a long ledger */
  .lg-main { grid-column: 6 / 13; }
  .lg-full .lg-side { grid-column: 1 / 8; position: static; }
  .lg-full .lg-main { grid-column: 1 / 13; }
}
.tbl-wrap { overflow-x: auto; }
.tbl-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.tbl th { text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--fg-muted); padding: 0 var(--space-lg) var(--space-sm) 0; border-bottom: var(--rule-strong) solid var(--rule); vertical-align: bottom; }
.tbl td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--line); vertical-align: baseline; }
.tbl td:first-child { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.25; font-variant-numeric: lining-nums; }
.tbl .n { text-align: right; font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl th.n { font-family: var(--font-body); }
.tbl.roles td:first-child { width: 38%; font-size: var(--text-2xl); }
.tbl.roles td { padding-block: var(--space-lg); }
@media (max-width: 47.99rem) { .tbl.roles td:first-child { width: auto; } }
.co { display: grid; gap: var(--space-sm); justify-items: start; }
.co img { height: clamp(34px, 3vw, 46px); width: auto; display: block; }
.co-name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; }
.co-group { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: start; margin-top: var(--space-xl); }
.co-group img { height: clamp(26px, 2.2vw, 34px); width: auto; margin-top: var(--space-2xs); }
.prose.wide { max-width: 44rem; }
@media (max-width: 47.99rem) {
  .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; width: 100%; }
  .tbl.stack .tbl-cap { display: block; width: 100%; }
  .tbl.stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--line); }
  .tbl.stack td { border: 0; padding: var(--space-3xs) 0; text-align: left; }
  .tbl.stack td:first-child, .tbl.stack td.wide { grid-column: 1 / -1; }
  .tbl.stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--fg-muted); margin-top: var(--space-xs); }
}
.kv { display: grid; border-top: var(--rule-strong) solid var(--rule); }
.kv > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--line); }
@media (min-width: 40rem) { .kv > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-lg); } }
.kv dt { color: var(--fg-muted); font-size: var(--text-sm); font-weight: 600; padding-top: var(--space-2xs); }
.kv dd { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.3; font-variant-numeric: lining-nums; }
.list-rules { display: grid; border-top: var(--rule-strong) solid var(--rule); }
.list-rules li { padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--line); font-size: var(--text-lead); line-height: 1.5; }
.measures { display: grid; border-top: var(--rule-strong) solid var(--rule); }
.measures > div { display: grid; gap: var(--space-xs); padding: var(--space-xl) 0; border-bottom: var(--rule-hair) solid var(--line); }
@media (min-width: 48rem) { .measures > div { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-xl); } }
.measures dt { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; }
.measures dd { margin: 0; font-size: var(--text-lead); line-height: 1.5; }

/* Allocation: four shares at their true proportion, set big */
.alloc { display: grid; gap: var(--space-md); }
.alloc-bar { display: flex; gap: var(--space-2xs); height: clamp(56px, 8vw, 104px); }
.alloc-bar span { display: block; transform-origin: left; transition: transform 900ms var(--ease-text); }
.js .alloc.pre .alloc-bar span { transform: scaleX(0); }
.alloc-bar .a1 { flex: 500; background: var(--teal); }
.alloc-bar .a2 { flex: 400; background: var(--copper); }
.alloc-bar .a3 { flex: 60; background: var(--ink); }
.alloc-bar .a4 { flex: 40; background: var(--copper-reading); }
[data-tone="dark"] .alloc-bar .a3 { background: var(--light); }
[data-tone="dark"] .alloc-bar .a4 { background: var(--copper-on-dark); }
.alloc-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
@media (min-width: 48rem) { .alloc-key { grid-template-columns: 500fr 400fr 160fr 160fr; } }
.alloc-key div { display: grid; gap: var(--space-3xs); padding-top: var(--space-xs); border-top: 3px solid var(--k); }
/* Each key shares its three rows (label, quantity, share) with its neighbours, so a label that wraps ("Team and founders") cannot push its numbers below the other columns'. */
@supports (grid-template-rows: subgrid) { .alloc-key div { grid-row: span 3; grid-template-rows: subgrid; } }
.alloc-key .k1 { --k: var(--teal); } .alloc-key .k2 { --k: var(--copper); } .alloc-key .k3 { --k: var(--ink); } .alloc-key .k4 { --k: var(--copper-reading); }
[data-tone="dark"] .alloc-key .k3 { --k: var(--light); } [data-tone="dark"] .alloc-key .k4 { --k: var(--copper-on-dark); }
.alloc-key b { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.2; }
.alloc-key span { font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--fg-muted); }
figcaption, .caption { font-size: var(--text-sm); color: var(--fg-muted); max-width: 40rem; }

/* Release figure: five paired releases */
.relfig { display: grid; gap: var(--space-sm); }
.rel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); height: 150px; }
.rel .col { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3xs); height: 100%; }
.rel .i, .rel .t { display: block; transform-origin: bottom; transition: transform 900ms var(--ease-text); }
.rel .i { background: var(--teal); }
.rel .t { background: var(--copper); }
.js .rel.pre .i, .js .rel.pre .t { transform: scaleY(0); }
.rel-x { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--fg-muted); border-top: var(--rule-strong) solid var(--rule); padding-top: var(--space-xs); }

/* Artifact: a framed piece of the record */
.ar-grid { row-gap: var(--space-2xl); align-items: center; }
.ar-text { grid-column: 1 / -1; display: grid; gap: var(--space-lg); min-width: 0; }
.ar-frame { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 64rem) { .ar-text { grid-column: 1 / 6; } .ar-frame { grid-column: 7 / 13; } .s-artifact.frame-left .ar-text { grid-column: 8 / 13; order: 2; } .s-artifact.frame-left .ar-frame { grid-column: 1 / 7; } }
.mat { padding: clamp(var(--space-md), 2.2vw, var(--space-xl)); outline: var(--rule-hair) solid var(--line); outline-offset: -1px; background: color-mix(in oklab, var(--g) 88%, var(--fg)); display: grid; gap: var(--space-md); }
.mat .photo { aspect-ratio: 4 / 5; }
.closing-line { font-family: var(--font-display); font-style: italic; font-size: var(--text-chapter); color: var(--accent-text); }

/* Verify: the chain of evidence */
.chain { display: grid; }
.chain li { position: relative; display: grid; grid-template-columns: var(--space-lg) minmax(0, 1fr); gap: var(--space-md); align-items: start; padding-bottom: var(--space-lg); }
.chain li::before { content: ""; width: 12px; height: 12px; margin-top: var(--space-xs); margin-left: var(--space-2xs); border-radius: 50%; border: 1.5px solid var(--mark); background: var(--g); position: relative; z-index: var(--z-base); }
.chain li:first-child::before { background: var(--mark); }
.chain li::after { content: ""; position: absolute; left: 9px; top: var(--space-lg); bottom: 0; width: 1.5px; background: var(--line); }
.chain li:last-child::after { display: none; }
.chain span { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; }
.steps-6 { display: grid; border-top: var(--rule-strong) solid var(--rule); counter-reset: s; }
.steps-6 li { display: grid; grid-template-columns: var(--space-xl) minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--line); font-size: var(--text-lead); line-height: 1.45; }
.steps-6 li::before { counter-increment: s; content: counter(s); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--accent-text); font-variant-numeric: lining-nums; }

/* Live panel (Token trace) */
.panel { display: grid; border-top: var(--rule-strong) solid var(--rule); }
.panel > div { display: grid; gap: var(--space-xs); padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--line); }
@media (min-width: 48rem) { .panel > div { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-xl); align-items: baseline; } }
.panel dt { color: var(--fg-muted); font-weight: 600; font-size: var(--text-sm); }
.panel dd { margin: 0; font-family: var(--font-display); font-size: var(--text-title); line-height: 1.25; }

/* Pinned: the timeline beside its held photograph (static under 60rem) */
.s-pinned { overflow: clip; } /* the pinned photograph stays inside the section's horizon */
.s-pinned .pn-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.s-pinned .pn-media { aspect-ratio: 16 / 10; }
.s-pinned .pn-media .photo { height: 100%; }
.s-pinned .pn-list { padding-block: clamp(var(--space-3xl), 14vh, var(--section-gap)); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); min-width: 0; }
@media (min-width: 60rem) {
  .s-pinned .pn-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .s-pinned .pn-media { aspect-ratio: auto; position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); }
  .s-pinned .pn-list { padding-inline: clamp(var(--space-xl), 6vw, var(--space-3xl)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
}
.tl-entry { display: grid; gap: var(--space-xs); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--line); }
.tl-entry:last-child { border-bottom: var(--rule-hair) solid var(--line); }
.tl-top { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: baseline; }
.tl-n { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--accent-text); min-width: 1.6em; font-variant-numeric: lining-nums; }
.tl-date { font-family: var(--font-outlier); font-size: var(--text-md); color: var(--fg-muted); }
.tl-status { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; margin-left: auto; }
.tl-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--mark); }
.tl-status.done::before { background: var(--mark); }
.tl-what { max-width: 36rem; }
.tl-ev { font-size: var(--text-sm); color: var(--fg-muted); }

/* The road (Collaborate) */
.road { display: grid; counter-reset: r; position: relative; }
.road li { position: relative; display: grid; grid-template-columns: var(--space-2xl) minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-xl); }
.road li::before { counter-increment: r; content: counter(r); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--accent-text); font-variant-numeric: lining-nums; }
.road li::after { content: ""; position: absolute; left: var(--space-sm); top: var(--space-2xl); bottom: var(--space-xs); width: 1px; background: var(--line); }
.road li:last-child::after { display: none; }
.road h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.2; }
.road p { color: var(--fg-muted); }
@media (min-width: 70rem) {
  .road { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-lg); padding-top: var(--space-xl); border-top: var(--rule-strong) solid var(--rule); }
  .road li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-bottom: 0; }
  .road li::after { display: none; }
}

/* Three hands (Governance) */
.hands { display: grid; gap: var(--space-md); counter-reset: h; }
@media (min-width: 48rem) { .hands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }
.hands li { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-strong) solid var(--rule); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; }
.hands li::before { counter-increment: h; content: counter(h); font-size: var(--text-figure); line-height: 0.9; color: var(--accent-text); font-variant-numeric: lining-nums; }

.hands-fig { display: grid; gap: var(--space-lg); }
.social-wrap { display: grid; gap: var(--space-xl); }

/* Documents index */
.docs { display: grid; border-top: var(--rule-strong) solid var(--rule); }
.doc { display: grid; gap: var(--space-xs); padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--line); text-decoration: none; min-height: 44px; }
@media (min-width: 56rem) { .doc { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) auto; gap: var(--space-xl); align-items: baseline; } }
.doc .h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-hover) ease; }
.doc:hover .h3, .doc:focus-visible .h3 { text-decoration-color: var(--link-line); }
.doc .tag { font-size: var(--text-sm); font-weight: 600; color: var(--accent-text); }

/* Questions */
.qa-grid { row-gap: var(--space-xl); }
.qa-head { grid-column: 1 / -1; display: flex; gap: var(--space-md); align-items: baseline; }
.qa-head .gnum { font-family: var(--font-display); font-size: var(--text-figure); line-height: 0.9; color: var(--accent-text); font-variant-numeric: lining-nums; }
.qa-list { grid-column: 1 / -1; border-top: var(--rule-strong) solid var(--rule); }
@media (min-width: 64rem) { .qa-head { grid-column: 1 / 5; flex-direction: column; gap: var(--space-sm); } .qa-list { grid-column: 5 / 13; } }
.qa-list details { border-bottom: var(--rule-hair) solid var(--line); }
.qa-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; padding: var(--space-sm) 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; }
.qa-list summary::-webkit-details-marker { display: none; }
.qa-list summary::after { content: ""; flex: none; width: 14px; height: 14px; background: var(--mark); clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%); transition: transform var(--dur-short) var(--ease-text); }
.qa-list details[open] summary::after { transform: rotate(45deg); }
.qa-list summary:hover { color: var(--accent-text); }
.qa-list .ans { padding: 0 0 var(--space-lg); max-width: 38rem; font-size: var(--text-lead); line-height: 1.55; color: var(--fg-muted); }
.qa-list .ans a { color: var(--fg); }
/* v27: the eight groups of answers in one section on Contact; each group keeps its number, its name and its anchor */
.qa-groups { display: grid; gap: var(--space-3xl); }
.qa-group { scroll-margin-top: calc(var(--header-h) + var(--space-lg)); }
/* v27: the Documents page's three lists, one under the other, each under its own name */
.docs-group { display: grid; gap: var(--space-md); }
.docs-h { font-size: var(--text-xl); }
/* v27: a small heading over a list, and a table's own name above it */
.d-inner .prose .list-h { margin-top: var(--space-md); font-size: var(--text-xl); }
.tbl-cap { caption-side: top; text-align: left; padding-bottom: var(--space-md); font-size: var(--text-xl); }

/* Contact subjects */
.subjects { display: grid; border-top: var(--rule-strong) solid var(--rule); }
@media (min-width: 56rem) { .subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }
.subject { display: grid; gap: var(--space-xs); padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--space-lg)); }
.subject:target { box-shadow: inset 3px 0 0 var(--copper); padding-left: var(--space-md); }

/* Social band */
.social { display: grid; border-top: var(--rule-strong) solid var(--rule); }
.social a { font-family: var(--font-display); font-size: var(--text-figure); line-height: 1; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--line); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.14em; min-height: 44px; display: flex; align-items: center; transition: text-decoration-color var(--dur-hover) ease, color var(--dur-hover) ease; }
.social a:active { opacity: 0.8; }
.social a:hover, .social a:focus-visible { text-decoration-color: var(--link-line); color: var(--accent-text); }

/* Title band (no photograph) and information sections */
.s-titleband { min-height: max(88svh, 520px); display: grid; align-content: center; padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl); }
.s-titleband .tb { display: grid; gap: var(--space-lg); max-width: 52rem; }
.s-info .in-grid { row-gap: var(--space-md); padding-block: calc(var(--arc) * 1.6 + clamp(var(--space-xl), 7vh, var(--space-2xl))) calc(var(--arc) + clamp(var(--space-xl), 7vh, var(--space-2xl))); }
.s-info .in-num { grid-column: 1 / 2; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums lining-nums; }
.s-info .in-h { grid-column: 2 / -1; font-size: var(--text-section); line-height: 1.05; }
.s-info .in-body { grid-column: 1 / -1; }
@media (min-width: 64rem) { .s-info .in-h { grid-column: 2 / 6; } .s-info .in-body { grid-column: 7 / 13; } }
.s-info .in-body p { font-size: var(--text-lead); line-height: 1.6; max-width: 40rem; }
.transcript { display: grid; gap: 1.4em; max-width: 44rem; }
.transcript p { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.4; }

/* Video (Home): the Foundation message */
.belief-grid { row-gap: var(--space-2xl); align-items: center; }
.belief-text { grid-column: 1 / -1; display: grid; gap: var(--space-xl); }
.belief-video { grid-column: 1 / -1; display: grid; gap: var(--space-md); }
@media (min-width: 64rem) { .belief-text { grid-column: 1 / 7; } .belief-video { grid-column: 7 / 13; } }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--green); color: var(--light); display: grid; overflow: hidden; --focus: var(--light); }
.v-body { position: relative; display: grid; align-content: end; justify-items: start; gap: var(--space-xs); padding: clamp(var(--space-md), 3vw, var(--space-xl)); }
.video .play { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-md) 0 0; background: none; border: 0; color: inherit; font-family: inherit; font-weight: 600; font-size: var(--text-md); cursor: pointer; border-radius: var(--radius-pill); }
.video .play i { width: 52px; height: 52px; border-radius: 50%; background: var(--copper); position: relative; flex: none; transition: background-color var(--dur-hover) ease; }
.video .play i::after { content: ""; position: absolute; left: 21px; top: 17px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--ink); }
.video .play:hover i, .video .play:focus-visible i { background: var(--copper-on-dark); }
.video .play:active i { transform: scale(0.97); }
.video .vt { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; }
.video .vm { font-size: var(--text-sm); color: var(--light-muted); }

/* ───────────── The OWN token mark: the file's own drawing, set down part by part ─────────────
   The circle turns into place a third of a turn, then the w and the n rise, one stroke after another. */
.tk { display: block; width: 100%; height: auto; overflow: visible; }
.tk-o-g { transform-box: fill-box; transform-origin: 50% 50%; }
.tk-w1, .tk-w2, .tk-n1, .tk-n2 { transform-box: fill-box; transform-origin: 50% 100%; }
.d-logo { width: clamp(120px, 11vw, 170px); margin-bottom: var(--space-xs); }
@media (prefers-reduced-motion: no-preference) {
  .js .tk:not(.is-drawn) .tk-o-g, .js .tk:not(.is-drawn) .tk-w1, .js .tk:not(.is-drawn) .tk-w2, .js .tk:not(.is-drawn) .tk-n1, .js .tk:not(.is-drawn) .tk-n2 { opacity: 0; }
  .tk.is-drawn .tk-o-g { animation: tk-turn 720ms var(--ease-out) both; }
  .tk.is-drawn .tk-w1 { animation: tk-rise 480ms var(--ease-out) 240ms both; }
  .tk.is-drawn .tk-w2 { animation: tk-rise 480ms var(--ease-out) 340ms both; }
  .tk.is-drawn .tk-n1 { animation: tk-rise 480ms var(--ease-out) 440ms both; }
  .tk.is-drawn .tk-n2 { animation: tk-rise 480ms var(--ease-out) 540ms both; }
}
@keyframes tk-turn { from { opacity: 0; transform: rotate(-120deg) scale(0.84); } to { opacity: 1; transform: none; } }
@keyframes tk-rise { from { opacity: 0; transform: translateY(22%); } to { opacity: 1; transform: none; } }

/* ───────────── The platform where OWN works (Case study, section 4) ───────────── */
.s-platform { padding-block: var(--section-pad); }
.pf-open { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.pf-logo { width: min(100%, 620px); }
.pf-words { display: grid; gap: var(--space-xl); align-content: end; }
.pf-h { font-size: var(--text-display-s); max-width: 10em; }
.pf-lead { font-family: var(--font-display); font-size: clamp(1.3rem, 0.9vw + 1rem, 1.95rem); line-height: 1.3; max-width: 26em; }
@media (min-width: 64rem) { .pf-open { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--space-3xl); align-items: end; } }
.pf-part { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: clamp(var(--space-3xl), 16vh, var(--space-5xl)); }
.pf-h3 { font-size: var(--text-section); line-height: 1.05; color: var(--fg); max-width: 9em; }
.pf-body { display: grid; gap: var(--space-xl); min-width: 0; }
.pf-body .prose { max-width: 40rem; }
.pf-fam-intro { font-size: var(--text-lead); color: var(--fg-muted); }
@media (min-width: 64rem) { .pf-platform { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-3xl); } }
.fam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
@media (min-width: 40rem) { .fam { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .fam { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fam li { display: grid; gap: var(--space-2xs); padding-top: var(--space-sm); border-top: 3px solid var(--line); min-width: 0; }
.fam b { font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); line-height: 1; }
.fam span { font-size: var(--text-sm); line-height: 1.35; color: var(--fg-muted); }
.fam .is-lto { border-top-color: var(--gold); }
.fam .is-lto b, .fam .is-lto span { color: var(--gold); }

/* Lease-to-Own, step by step: a contract you can step through. Cells fill as installments are paid; beneath them
   the copper is what remains owed, and it steps down; with the last one it is gone and the ring closes.
   Illustrative, and still without script. */
@media (min-width: 80rem) { .pf-lto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); align-items: center; } }
@media (min-width: 48rem) and (max-width: 79.99rem) { .pf-lto-text .prose { max-width: 40rem; } .lto { max-width: 52rem; } }
.pf-lto-text { display: grid; gap: var(--space-xl); align-content: start; }
.lto { display: grid; gap: var(--space-lg); margin: 0; min-width: 0; }
.lto-tag { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--accent-text); }
.lto-board { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: clamp(var(--space-xs), 1.4vw, var(--space-md)); row-gap: var(--space-md); align-items: center; }
.lto-down { grid-column: 1; grid-row: 1; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--gold); color: var(--ground-pine); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.lto-cells { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-2xs); }
.lto-cells li { position: relative; aspect-ratio: 1; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--line); }
.lto-cells li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gold); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.lto-cells li.paid::after { opacity: 1; transform: none; }
.lto-own { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
.lto-own i { position: relative; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gold); }
.lto-own i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: 0; transform: scale(0.4); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.lto.is-owned .lto-own { color: var(--gold); }
.lto.is-owned .lto-own i::after { opacity: 1; transform: none; }
.lto-owed { grid-column: 1; grid-row: 2; align-self: end; font-size: var(--text-sm); line-height: 1.3; color: var(--fg-muted); max-width: 7.5em; }
.lto-steps { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-2xs); height: clamp(120px, 15vw, 210px); align-items: end; }
.lto-steps span { position: relative; height: 100%; transform: scaleY(var(--h)); transform-origin: 50% 100%; border-radius: 2px 2px 0 0; box-shadow: inset 0 0 0 1px var(--line); }
.lto-steps span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--copper); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.lto-steps span:not(.paid)::after { opacity: 1; }
.lto-steps span.now::after { background: var(--copper-on-dark); }
.lto-steps span.paid { box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 47.99rem) {
  .lto-board { grid-template-columns: minmax(0, 1fr) auto; }
  .lto-down { justify-self: start; }
  .lto-own { grid-column: 2; }
  .lto-cells { grid-column: 1 / -1; grid-row: 2; }
  .lto-owed { grid-column: 1 / -1; grid-row: 3; max-width: none; }
  .lto-steps { grid-column: 1 / -1; grid-row: 4; height: 140px; }
}
.lto-ctl { display: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs) var(--space-md); }
.js .lto-ctl { display: grid; }
.lto-ctl label { font-size: var(--text-md); font-weight: 600; }
.lto-ctl output { font-family: var(--font-display); font-size: var(--text-xl); color: var(--accent-text); font-variant-numeric: lining-nums tabular-nums; }
.lto-ctl output { min-width: 8ch; text-align: right; }
.lto-ctl input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.lto-ctl input::-webkit-slider-runnable-track { height: 2px; background: var(--line); }
.lto-ctl input::-moz-range-track { height: 2px; background: var(--line); }
.lto-ctl input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: calc(-1 * var(--space-sm)); border-radius: 50%; background: var(--gold); border: 0; transition: transform var(--dur-hover) ease; }
.lto-ctl input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); border: 0; }
.lto-ctl input:hover::-webkit-slider-thumb { transform: scale(1.12); }
.lto-ctl input:active::-webkit-slider-thumb { transform: scale(0.94); }
.lto-ctl input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.lto figcaption { color: var(--fg-muted); }

/* What OWN does there: the two jobs at their true size */
.pf-uses .pf-diff { font-family: var(--font-display); font-style: italic; font-size: var(--text-section); line-height: 1.05; color: var(--accent-text); }
.uses { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); margin-top: var(--space-xl); }
@media (min-width: 56rem) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(var(--space-2xl), 7vw, var(--space-4xl)); } }
.use { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.use-name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.1; margin: 0; }
.use-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); font-variant-numeric: lining-nums tabular-nums; }
.use-num .num { font-family: var(--font-display); font-weight: 500; font-size: var(--text-figure); line-height: 0.95; letter-spacing: -0.015em; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.use-num .unit { font-variant-numeric: lining-nums tabular-nums; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--accent-text); }
.use-bar { height: 6px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.use-bar i { display: block; height: 100%; background: var(--gold); transform: scaleX(var(--share)); transform-origin: 0 50%; }
.use.u2 .use-bar i { background: var(--copper); }
.use-who { font-weight: 600; font-size: var(--text-md); line-height: 1.45; }
.use-text { font-size: var(--text-lead); line-height: 1.55; max-width: 32rem; }
.pf-close { display: grid; gap: var(--space-lg); margin-top: clamp(var(--space-3xl), 16vh, var(--space-5xl)); padding-top: var(--space-xl); border-top: 3px solid var(--gold); max-width: 52rem; }
.pf-close-line { font-family: var(--font-display); font-size: clamp(1.45rem, 1.2vw + 1rem, 2.44rem); line-height: 1.2; }
.pf-note { font-size: var(--text-sm); color: var(--fg-muted); }
.pf-note a { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 0.22em; }

/* ───────────── Footer: dusk ─────────────
   It rises on the pine like the sections before it. The daylight line beside the OWN mark in its gold; then the day's
   ledger over the peak of the Foundation symbol, closed with a double rule; then the record. */
.site-footer { position: relative; isolation: isolate; overflow: clip; background: var(--ground-pine); color: var(--light); --g: var(--ground-pine); --fg: var(--light); --fg-muted: var(--light-muted); --focus: var(--light); --link-line: var(--gold); --line: var(--line-on-dark); --accent-text: var(--gold); --rim: var(--gold); }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; padding-top: calc(var(--arc) + var(--section-pad-s)); padding-bottom: clamp(var(--space-2xl), 9vh, var(--space-4xl)); }
@media (min-width: 60rem) { .ft-top { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(var(--space-2xl), 7vw, var(--space-4xl)); } }
.ft-mark .tk { width: clamp(96px, 11vw, 168px); height: auto; display: block; }
.daylight { position: relative; display: inline-block; color: var(--light); font-family: var(--font-display); font-weight: 400; font-size: var(--text-display-s); line-height: 0.95; letter-spacing: var(--tracking-display); text-decoration: none; max-width: 11em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.daylight .dl-base { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.12em; transition: text-decoration-color var(--dur-hover) ease; }
.daylight:hover .dl-base, .daylight:focus-visible .dl-base { text-decoration-color: var(--gold); }
.daylight:active { opacity: 0.85; }
/* the light flowing through the line: a gold copy of each letter, lit in turn and let go, every few seconds */
.dl-glow { position: absolute; inset: 0; color: var(--gold); pointer-events: none; text-wrap: balance; }
.dl-glow i { font-style: normal; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .site-footer.is-in .dl-glow i { animation: dl-flow 9s var(--ease-in-out) infinite both; animation-delay: calc(var(--i) * 55ms + 600ms); }
}
@keyframes dl-flow { 0%, 100% { opacity: 0; } 6% { opacity: 0.95; } 17% { opacity: 0; } }
/* the day's ledger: one ruled row per hour, its time, its name and its pages; a short mark in the hour's own colour of
   the spectrum (the header's rail) heads each row */
.ft-book { position: relative; isolation: isolate; overflow: clip; }
.ft-ledger { display: grid; padding-bottom: clamp(var(--space-2xl), 8vh, var(--space-3xl)); }
.ft-row { position: relative; display: grid; grid-template-columns: 6rem 11rem minmax(0, 1fr); align-items: baseline; gap: var(--space-lg); padding-block: var(--space-md); border-top: 1px solid var(--line-on-dark); }
.ft-row::before { content: ""; position: absolute; left: 0; top: -1px; width: 6rem; height: 3px; background: var(--dc); }
.ft-time { color: var(--light-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ft-phase { font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); line-height: 1; color: var(--gold); }
.ft-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-xl); }
.ft-links a { color: var(--light); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ft-links a:hover, .ft-links a:focus-visible { color: var(--gold); text-decoration: underline; text-underline-offset: 0.3em; }
.ft-links a:active { opacity: 0.8; }
.ft-links a[aria-current="page"] { color: var(--gold); font-weight: 600; }
@media (max-width: 47.99rem) { .ft-row { grid-template-columns: 4.5rem minmax(0, 1fr); } .ft-row::before { width: 4.5rem; } .ft-links { grid-column: 1 / -1; gap: 0 var(--space-lg); } }
/* the peak: the Foundation symbol, tone on tone, its apex rising behind the ledger and cut by the rule that closes the day */
/* the close: a double gold rule, the horizon of the day. On its right end the sun of the buttons (the copper disc on its
   line) rises once more as the close comes into view, and rests nearly risen, the rule across its foot as the line
   crosses the button's sun. Without script, and with reduced motion, it is simply there, risen. */
.ft-close { position: relative; height: 5px; }
.ft-close::before { content: ""; position: absolute; inset: 0; z-index: 1; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); opacity: 0.7; }
.ft-sun { --sun: clamp(52px, 5.4vw, 80px); position: absolute; right: 0; bottom: 0; width: var(--sun); height: var(--sun); overflow: hidden; pointer-events: none; }
.ft-sun i { position: absolute; inset: 0; border-radius: 50%; background: var(--copper); transform: translateY(calc(var(--sun) * 0.24 - 5px)); }
@media (prefers-reduced-motion: no-preference) {
  .js .ft-sun i { transform: translateY(calc(var(--sun) * 0.72)); transition: transform var(--dur-sunrise) var(--ease-out); }
  .js .ft-close.is-up .ft-sun i { transform: translateY(calc(var(--sun) * 0.24 - 5px)); }
}
.mast { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: end; padding-block: var(--space-2xl) calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 60rem) { .mast { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.mast img { width: clamp(150px, 15vw, 220px); height: auto; }
.ft-record { display: flex; flex-wrap: wrap; row-gap: var(--space-xs); font-size: var(--text-sm); color: var(--light-muted); }
.ft-record span { padding: 0 var(--space-md); border-left: var(--rule-hair) solid var(--line-on-dark); }
.ft-record span:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 59.99rem) { .ft-record { display: grid; } .ft-record span { padding: 0; border-left: 0; } }
@media (min-width: 60rem) { .ft-record { justify-content: flex-end; } .ft-record span:last-child { padding-right: 0; } }
.mast-right { display: grid; gap: var(--space-md); justify-items: start; }
@media (min-width: 60rem) { .mast-right { justify-items: end; } }
.ft-social { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.ft-social a { color: var(--light); min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.ft-social a:hover, .ft-social a:focus-visible { color: var(--gold); text-decoration-thickness: 2px; }
.ft-social a:active { opacity: 0.8; }

/* Preview only: media the production site serves */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-lg)); transform: translateX(-50%); z-index: var(--z-toast); max-width: min(92vw, 34rem); background: var(--green); color: var(--light); outline: var(--rule-hair) solid var(--copper); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.toast[hidden] { display: none; }

/* Page to page: the day turns */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-phase); animation-timing-function: var(--ease-light); }

/* ───────────── Reduced motion: every effect at its finished, still state ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .s-overture .photo img, .s-horizon .photo img { transform: none !important; }
  .lto-cells li, .lto-steps span { transition: none !important; }
  .rv .clip { clip-path: none !important; }
  .rv .clip img { transform: none !important; }
  .lightable { color: inherit !important; }
  .startline { transform: none !important; }
  .alloc-bar span, .rel .i, .rel .t { transform: none !important; }
  .s-overture .ov-photo { clip-path: none !important; }
  .daybreak { opacity: 0 !important; }
  .dl-glow i { opacity: 0 !important; }
  .ov-words { transform: none !important; opacity: 1 !important; }
  .tk-part, .tk-o-g { opacity: 1 !important; transform: none !important; }
  .s-horizon .photo.second { opacity: 0 !important; }
  .s-horizon .bar { transform: none !important; }
  @view-transition { navigation: none; }
}

/* v14: Lease-to-Own, step by step, as its own section (the Lease-to-Own page): the contract comes first, on a dark ground */
.s-lto .pf-part { margin-top: 0; }
/* v14b: ten items in the menu (LTO and OWN apart); on narrower desktops they sit closer so the bar never spills */
@media (min-width: 64rem) and (max-width: 89.99rem) { .nav > ul { gap: var(--space-md); } .site-header .wrap { gap: var(--space-md); } }

/* v16: the Foundation's own film. The poster is a still of the film (the lake at 0:44); the designed Play pill sits on a
   flat veil over it; once played, the film runs with its native controls and its English captions on. Without script the
   native controls show from the start. */
.video .v-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--scrim); }
.video .v-body { display: none; }
.js .video .v-body { position: absolute; inset: 0; z-index: var(--z-base); display: grid; align-content: end; justify-items: start; background: rgb(var(--scrim-rgb) / 0.32); }
.video.is-playing .v-body { display: none; }

/* v17: Start a request (Collaborate). Costs, timing and conditions are shaped in negotiation; the form asks for what that
   negotiation needs. Ruled groups like the record, boxed fields with a 3:1 edge, errors in words beside each field and in
   a summary at the top; a quiet confirmation replaces the form once it is sent. */
.rq-form { display: grid; gap: var(--space-2xl); }
.rq-group { margin: 0; padding: var(--space-lg) 0 0; border: 0; border-top: var(--rule-strong) solid var(--rule); min-width: 0; }
.rq-legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-lg); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; }
.rq-grid { clear: both; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); }
@media (min-width: 48rem) { .rq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rq-wide { grid-column: 1 / -1; } }
.rq-field { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.rq-label { padding: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.rq-req { color: var(--accent-text); }
.rq-opt { margin-left: var(--space-xs); font-weight: 400; color: var(--fg-muted); }
.rq-hint { font-size: var(--text-sm); line-height: 1.45; color: var(--fg-muted); }
.rq-form input:not([type="radio"]):not([type="checkbox"]), .rq-form select, .rq-form textarea {
  width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); font: inherit; font-size: var(--text-md); line-height: 1.4; color: var(--fg);
  background: color-mix(in oklab, var(--g) 55%, var(--light)); border: var(--rule-strong) solid var(--ink-muted); border-radius: var(--radius-sm);
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
.rq-form textarea { resize: vertical; min-height: 120px; }
.rq-form :is(input, select, textarea):hover { border-color: var(--ink); }
.rq-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--green); background: var(--light); }
.rq-form [aria-invalid="true"] { border-color: var(--color-error); }
.rq-err { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; color: var(--color-error); }
.rq-err:empty { display: none; }
.rq-choices { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xl); }
.rq-choice { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; cursor: pointer; font-size: var(--text-md); line-height: 1.4; }
.rq-choice input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--green); cursor: pointer; }
.rq-consent { display: grid; gap: var(--space-xs); }
.rq-consent .rq-choice { align-items: flex-start; } .rq-consent .rq-choice input { margin-top: var(--space-2xs); }
.rq-consent a, .rq-summary a { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 0.22em; }
.rq-summary { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border: var(--rule-strong) solid var(--color-error); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--g) 70%, var(--light)); }
.rq-summary[hidden] { display: none; }
.rq-summary-h { font-weight: 600; }
.rq-summary ul { display: grid; gap: var(--space-2xs); }
.rq-summary li { min-height: 32px; display: flex; align-items: center; }
.rq-done { display: grid; gap: var(--space-lg); padding-top: var(--space-xl); border-top: 3px solid var(--copper); }
.rq-done[hidden] { display: none; }
.rq-preview { font-size: var(--text-sm); color: var(--fg-muted); }

/* Contact: each subject is a link that opens an email with that subject in its subject line */
.subject .h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--link-line, var(--copper)); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.subject .h3 a:hover, .subject .h3 a:focus-visible { text-decoration-thickness: 2px; }
.nobr { white-space: nowrap; }

/* ───────────── v25 footer: the plinth. The footer rises as a wide plateau (the symbol's 60 degree shoulders) under a
   double gold rim; the day's ledger sits in a frame of two gold hairlines whose corners are cut at the same angle, like an
   engraved register; below the closing rule the ground turns to night, and the sun stands on that horizon. ───────────── */
.site-footer { border-radius: 0; clip-path: polygon(0 var(--arc), 6% var(--arc), calc(6% + calc(var(--arc) * 0.57735)) 0, calc(94% - calc(var(--arc) * 0.57735)) 0, 94% var(--arc), 100% var(--arc), 100% 100%, 0 100%); }
.ft-frame-box { --fc: clamp(18px, 2.4vw, 36px); position: relative; padding: clamp(var(--space-xl), 5vw, var(--space-3xl)) clamp(var(--space-lg), 4vw, var(--space-3xl)); }
.ft-frame { position: absolute; inset: 0; z-index: -1; background: var(--gold); opacity: 0.55; pointer-events: none; clip-path: polygon(evenodd, calc(var(--fc) * 0.57735 + 0.000px) 0px, calc(100% - var(--fc) * 0.57735 + 0.000px) 0px, calc(100% - 0px) calc(var(--fc) + 0.000px), calc(100% - 0px) calc(100% - var(--fc) + 0.000px), calc(100% - var(--fc) * 0.57735 + 0.000px) calc(100% - 0px), calc(var(--fc) * 0.57735 + 0.000px) calc(100% - 0px), 0px calc(100% - var(--fc) + 0.000px), 0px calc(var(--fc) + 0.000px), calc(var(--fc) * 0.57735 + 0.000px) 0px, calc(var(--fc) * 0.57735 + 0.577px) 1px, calc(100% - var(--fc) * 0.57735 + 0.577px) 1px, calc(100% - 1px) calc(var(--fc) + 0.268px), calc(100% - 1px) calc(100% - var(--fc) + 0.268px), calc(100% - var(--fc) * 0.57735 + 0.577px) calc(100% - 1px), calc(var(--fc) * 0.57735 + 0.577px) calc(100% - 1px), 1px calc(100% - var(--fc) + 0.268px), 1px calc(var(--fc) + 0.268px), calc(var(--fc) * 0.57735 + 0.577px) 1px, calc(var(--fc) * 0.57735 + 3.464px) 6px, calc(100% - var(--fc) * 0.57735 + 3.464px) 6px, calc(100% - 6px) calc(var(--fc) + 1.608px), calc(100% - 6px) calc(100% - var(--fc) + 1.608px), calc(100% - var(--fc) * 0.57735 + 3.464px) calc(100% - 6px), calc(var(--fc) * 0.57735 + 3.464px) calc(100% - 6px), 6px calc(100% - var(--fc) + 1.608px), 6px calc(var(--fc) + 1.608px), calc(var(--fc) * 0.57735 + 3.464px) 6px, calc(var(--fc) * 0.57735 + 4.041px) 7px, calc(100% - var(--fc) * 0.57735 + 4.041px) 7px, calc(100% - 7px) calc(var(--fc) + 1.876px), calc(100% - 7px) calc(100% - var(--fc) + 1.876px), calc(100% - var(--fc) * 0.57735 + 4.041px) calc(100% - 7px), calc(var(--fc) * 0.57735 + 4.041px) calc(100% - 7px), 7px calc(100% - var(--fc) + 1.876px), 7px calc(var(--fc) + 1.876px), calc(var(--fc) * 0.57735 + 4.041px) 7px); }
.ft-ledger { padding-bottom: clamp(var(--space-2xl), 8vh, var(--space-3xl)); }
.ft-row { border-top-color: color-mix(in oklab, var(--gold) 24%, transparent); }
.ft-row:first-child { border-top: 0; }
.ft-row::before { top: -2px; height: 4px; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.ft-row:first-child::before { top: -2px; }
.ft-phase { font-size: clamp(1.7rem, 1.2vw + 1.2rem, 2.4rem); }
.ft-night { position: relative; background: var(--ground-night); }
.ft-night .mast { padding-top: clamp(var(--space-2xl), 6vw, var(--space-3xl)); }

main { position: relative; }


/* ───────────── v27 · the roll-over (Founder's decision, 7 Nov 2026; FOUNDRY 5.3). The sections are sheets of one
   stack. Each sheet after the first rises over the one before it, its content fading in over the first part of the rise,
   with rounded top corners and a soft shadow; the section beneath (the first one too) recedes while it is covered: scale
   0.97 and up 4vh, under a 10% shade. One easing family, no bounce, no sweep. Two paths, chosen once by the script, never
   both on one page: .native, where the browser drives the motion by scroll (view() timelines on still markers); .damped,
   where the script's numbers --enter and --cover drive it. Transform and opacity only. Reduced motion: no class, no
   transform; the sections stack normally. */
.stacking { --rise: 8vh; --recede: -4vh; --shrink: 0.03; --lap: 40px; }
@media (max-width: 639px) { .stacking { --rise: 4vh; --recede: -2vh; --shrink: 0; } }
.stacking main > section { transform-origin: 50% 0; }
.stacking main > section.sheet {
  border-radius: 24px 24px 0 0;
  overflow: clip;
  box-shadow: 0 -18px 40px -22px rgb(0 0 0 / 0.35);
}
/* the markers: still, invisible, one per sheet, placed by the script in the flow (native path only) */
.jmark { position: absolute; left: 0; width: 1px; height: 60vh; visibility: hidden; pointer-events: none; }

/* the damped path: the script's numbers (--enter, --cover) become transforms and opacity */
.damped main > section {
  transform: translate3d(0, calc(var(--rise) * (1 - var(--enter, 1)) + var(--recede) * var(--cover, 0)), 0) scale(calc(1 - var(--shrink) * var(--cover, 0)));
}
.damped main > section.sheet > :not(.shade) { opacity: min(1, calc(var(--enter, 1) * 3)); }

/* the native path: the browser drives the same motion by scroll, on the compositor */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .native main > section.sheet { animation: sheet-rise linear both; animation-timeline: var(--jt); animation-range: entry 0% entry 100%; }
    .native main > section.sheet > :not(.shade) { animation: sheet-fade linear both; animation-timeline: var(--jt); animation-range: entry 0% entry 33%; }
    .native main > section.under { animation: sheet-recede linear both; animation-timeline: var(--jn); animation-range: entry 0% entry 100%; }
    .native main > section.sheet.under { animation: sheet-rise linear both, sheet-recede linear both; animation-timeline: var(--jt), var(--jn); animation-range: entry 0% entry 100%, entry 0% entry 100%; }
    .native main > section.under > .shade { animation: shade-in linear both; animation-timeline: var(--jn); animation-range: entry 0% entry 100%; }
    /* the rise moves the individual translate property, the recede the transform: the two compose, neither overrides */
    /* the easing sits on the keyframes: a scroll-driven animation takes its timing function from each step, not from the
       animation. The same two curves as the damped path (script: bezier(0.33, 1, 0.68, 1) and bezier(0.65, 0, 0.35, 1)). */
    @keyframes sheet-rise { from { translate: 0 var(--rise); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } to { translate: 0 0; } }
    @keyframes sheet-fade { from { opacity: 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } to { opacity: 1; } }
    @keyframes sheet-recede { from { transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } to { transform: translate3d(0, var(--recede), 0) scale(calc(1 - var(--shrink))); } }
    @keyframes shade-in { from { opacity: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } to { opacity: 0.1; } }
  }
}