/* saxi.me: a chaptered editorial page on the scrollcraft engine (assets/scrollcraft.css + .js, unmodified).
   Brief: website/BRIEF.md. Grounds hard-cut per chapter; the folio in the margin is navigation and the visitor's own record.
   Class names avoid assets/ui.css, which styles the phone screens (.app, .card, .col, .row, .btn, .check, .muted, ...). */

@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --sc-canvas: #100b07; --sc-surface: #1d150e; --sc-ink: #fbf4ea; --sc-ink-soft: #bba894;
  --sc-accent: #ff9933; --sc-accent-ink: #1a0e03;
  --sc-font-display: "Satoshi", "Inter", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --sc-shadow-color: 25 70% 2%;
  --sc-gutter: clamp(1.25rem, 4.4vw, 4rem);

  --g-ink: #100b07; --g-umber: #1a120b; --g-deep: #0a0604;
  --line: color-mix(in oklab, var(--sc-ink) 13%, transparent);
  --line-strong: color-mix(in oklab, var(--sc-ink) 24%, transparent);
  --saffron: #ff9933; --saffron-hi: #ffb35c;
  --r-ctl: 12px; --r-frame: 18px;

  /* the folio column: 0 on phones (the chip takes over), a fixed margin column on wide screens */
  --pagew: 1180px; --folio-w: 0px; --folio-left: 0px;
  --folio-edge: calc(var(--folio-left) + var(--folio-w));
  color-scheme: dark;
}
@media (min-width: 1180px) {
  :root { --folio-w: 212px; --folio-left: max(0px, calc((100vw - var(--folio-w) - var(--pagew)) / 2)); }
}

body { font-size: 1.0625rem; line-height: 1.62; }
:where(a) { text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
:where(a):hover { text-decoration-color: currentColor; }
.sr, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 99; background: var(--saffron); color: var(--sc-accent-ink); padding: 8px 14px; border-radius: var(--r-ctl); font-weight: 600; }
.skip:focus { top: 12px; }
.soft { color: var(--sc-ink-soft); }
.where-narrow { display: none; }
.mark-slot { display: inline-grid; place-items: center; }
.mark-slot svg { width: 100%; height: 100%; overflow: visible; }

.page-col { margin-left: var(--folio-edge); width: auto; max-width: var(--pagew); padding-inline: var(--sc-gutter); }

/* type */
.d-xl, .d-lg, .d-md, .title-h { font-family: var(--sc-font-display); font-weight: 700; margin: 0; text-wrap: balance; color: var(--sc-ink); }
.d-xl { font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.032em; }
.d-lg { font-size: clamp(2rem, 1.25rem + 2.4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.028em; }
.d-md { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.18; letter-spacing: -0.018em; font-weight: 650; }
.lede { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.38rem); line-height: 1.5; letter-spacing: -0.006em; color: var(--sc-ink); max-width: 40ch; text-wrap: pretty; margin: 0; }
p { margin: 0; }

/* chapters: each lands on its own ground, cut hard at a hairline */
.ch { position: relative; background: var(--g, var(--g-ink)); border-top: 1px solid var(--line); }
.act-title { --g: var(--g-ink); background: var(--g); }
.ch-cost { --g: var(--g-umber); }
.ch-debrief { --g: var(--g-deep); }
.ch-rest { --g: var(--g-ink); }
.ch-witness { --g: var(--g-umber); }
.ch-fine { --g: var(--g-ink); }
.colophon { --g: var(--g-umber); background: var(--g); border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ folio -- */
.folio-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--sc-ink); text-decoration: none; font-weight: 600; letter-spacing: 0.3em; font-size: 0.82rem; }
.folio-mark .mark-slot { width: 28px; height: 28px; color: var(--saffron); }
.folio { position: fixed; z-index: 60; top: 0; bottom: 0; left: var(--folio-left); width: var(--folio-w); padding: 30px 18px 26px 26px; display: flex; flex-direction: column; gap: 30px; font-size: 0.82rem; line-height: 1.35; }
.folio-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.folio-list li { position: relative; padding: 6px 0 6px 14px; }
.folio-list li::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--saffron); opacity: 0; transform: scaleY(0.4); transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); }
.folio-list li[aria-current]::before { opacity: 1; transform: none; }
.folio-list a { display: flex; gap: 10px; color: var(--sc-ink-soft); text-decoration: none; }
.folio-list a:hover, .folio-list li[aria-current] a { color: var(--sc-ink); }
.folio-list .fn { width: 0.9em; font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.folio-list .ft { display: inline-flex; align-items: center; gap: 6px; }
.folio-list .ok { width: 13px; height: 13px; color: var(--saffron); display: inline-grid; }
.folio-list .ok svg { width: 100%; height: 100%; stroke-width: 3; }
.folio-list .rec { display: block; padding-left: calc(0.9em + 10px); color: var(--saffron-hi); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.folio-list .rec:empty { display: none; }
.folio-join { color: var(--saffron); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; }
.folio-since { margin-top: auto; color: color-mix(in oklab, var(--sc-ink-soft) 86%, transparent); font-size: 0.72rem; line-height: 1.5; }

.folio-chip, .folio-backdrop { display: none; }
@media (max-width: 1179.98px) {
  .folio-chip { position: fixed; z-index: 61; top: max(12px, env(safe-area-inset-top)); left: 12px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 9px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--g-deep) 92%, transparent); color: var(--sc-ink); font-size: 0.86rem; cursor: pointer; box-shadow: var(--sc-e2); }
  .folio-chip .mark-slot { width: 20px; height: 20px; color: var(--saffron); }
  .folio-chip .chip-n { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
  .folio-chip .chip-n:empty { display: none; }
  .folio-chip .chip-c { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; color: var(--saffron-hi); font-variant-numeric: tabular-nums; }
  .folio-chip .chip-c[hidden] { display: none; }
  .folio-chip .chip-c svg { width: 12px; height: 12px; stroke-width: 3; }
  .folio-chip:active { transform: translateY(1px); }
  .folio { display: none; }
  .folio.is-open { display: flex; top: max(60px, calc(env(safe-area-inset-top) + 48px)); bottom: auto; left: 12px; width: min(300px, calc(100vw - 24px)); max-height: calc(100svh - 80px); overflow: auto; padding: 18px 18px 18px 16px; gap: 20px; border-radius: var(--r-frame); border: 1px solid var(--line-strong); background: var(--g-deep); box-shadow: var(--sc-e3); }
  .folio.is-open .folio-mark { display: none; }
  .folio.is-open .folio-list a { padding-block: 4px; }
  .folio-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 59; background: color-mix(in oklab, var(--g-deep) 55%, transparent); }
  .where-wide { display: none; }
  .where-narrow { display: inline; }
}

/* --------------------------------------------------------- title + film -- */
.act-title { position: relative; overflow: clip; padding-top: clamp(84px, 11vh, 132px); padding-bottom: clamp(72px, 10vh, 120px); }
.plane-far { position: absolute; z-index: 0; top: clamp(-260px, -12vw, -60px); right: -14vw; width: min(72vw, 1060px); aspect-ratio: 1; pointer-events: none; }
.yantra-far { width: 100%; height: 100%; opacity: 0.13; rotate: calc(var(--sc-p, 0.4) * 28deg); translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); }
.yantra-far .mk { --mk-c1: #ff9933; --mk-c3: #ffb35c; --mk-ink: #ffcf99; --mk-deep: #100b07; --mk-halo: transparent; }
.title-col { position: relative; z-index: 2; }
.title-h { font-size: clamp(2.35rem, 1.2rem + 4.6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.038em; max-width: 13em; }
.title-h > span { display: block; }
.title-h .hl { color: var(--saffron); }
.title-sub { margin-top: clamp(18px, 2.4vw, 28px); max-width: 34ch; font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.32rem); line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; }

/* forms */
.join { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 3vw, 32px); max-width: 560px; }
.join input[type="email"] { flex: 1 1 250px; min-width: 0; height: 54px; padding: 0 18px; border-radius: var(--r-ctl); border: 1.5px solid var(--line-strong); background: color-mix(in oklab, var(--sc-surface) 92%, transparent); color: var(--sc-ink); font-size: 1.05rem; transition: border-color 160ms var(--sc-ease-out); }
.join input[type="email"]::placeholder { color: #8d7d6d; }
.join input[type="email"]:focus { outline: none; border-color: var(--saffron); }
.join input[type="email"]:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; }
.cta { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 24px; border: 0; border-radius: var(--r-ctl); background: var(--saffron); color: var(--sc-accent-ink); font-weight: 650; font-size: 1.05rem; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 4px hsl(25 80% 4% / 0.4), 0 12px 28px -10px hsl(30 100% 50% / 0.45); transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
.cta:hover { background: #ffa850; }
.cta:active { transform: translateY(1px); }
.cta[disabled], .line-btn[disabled] { opacity: 0.6; cursor: progress; }
.join-note { flex-basis: 100%; font-size: 0.88rem; color: var(--sc-ink-soft); }
.join-msg { flex-basis: 100%; font-size: 0.95rem; color: var(--saffron-hi); }
.join-msg:empty { display: none; }

.joined { margin-top: 26px; max-width: 580px; padding: 20px 22px; border-radius: var(--r-frame); background: var(--sc-surface); border: 1.5px solid color-mix(in oklab, var(--saffron) 50%, transparent); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sc-e2), var(--sc-edge); }
.joined .place { font-family: var(--sc-font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.joined .place b { color: var(--saffron); font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.joined .share { display: flex; gap: 8px; }
.joined .share input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: var(--r-ctl); border: 1.5px solid var(--line-strong); background: var(--g-deep); color: var(--sc-ink-soft); font-size: 0.95rem; }
.joined .share button { height: 46px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); color: var(--sc-ink); font-weight: 600; cursor: pointer; }
.joined .share button:active { transform: translateY(1px); }

/* the film: chapter one, directly under the headline */
.film { position: relative; z-index: 1; margin-top: clamp(40px, 6vw, 72px); margin-bottom: 0; }
.film-plate { position: relative; }
.film-frame { position: relative; border-radius: var(--r-frame); overflow: hidden; background: #000; box-shadow: var(--sc-e3), 0 0 0 1px var(--line); }
.film-frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.film-play { position: absolute; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 18px 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: color-mix(in oklab, var(--g-deep) 86%, transparent); color: var(--sc-ink); font-weight: 600; cursor: pointer; transition: border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
.film-play .pg { width: 36px; height: 36px; border-radius: 9px; background: var(--saffron); position: relative; }
.film-play .pg::after { content: ""; position: absolute; left: 14px; top: 10px; border-left: 12px solid var(--sc-accent-ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.film-play:hover { border-color: var(--saffron); }
.film-play:active { transform: translateY(1px); }
.film figcaption { margin-top: 14px; font-size: 0.9rem; color: var(--sc-ink-soft); max-width: 70ch; }
.film figcaption b { color: var(--sc-ink); font-weight: 600; }
.near { position: absolute; z-index: 3; pointer-events: none; transition: opacity 240ms var(--sc-ease-out); }
.near-a { top: -26px; right: calc(var(--sc-gutter) - 30px); }
.near-b { top: 52%; left: calc(var(--sc-gutter) - 34px); }
.nc { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: var(--r-ctl); background: #19120c; border: 1px solid #3a2c1f; color: var(--sc-ink); font-size: 0.95rem; font-weight: 550; white-space: nowrap; box-shadow: 0 6px 12px hsl(25 80% 2% / 0.5), 0 24px 48px -12px hsl(25 80% 2% / 0.7), var(--sc-edge); translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 12px); }
.near-a .nc { rotate: 2deg; }
.near-b .nc { rotate: -2.5deg; }
.nc-x { width: 18px; height: 18px; border-radius: 5px; background: var(--saffron); display: grid; place-items: center; color: var(--sc-accent-ink); }
.nc-x svg { width: 12px; height: 12px; stroke-width: 3; }
.nc-k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--saffron-hi); }
.film.is-playing .near { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .yantra-far, .nc { rotate: none; translate: none; } }
@media (max-width: 760px) {
  .near-b { display: none; }
  .near-a { top: -20px; right: calc(var(--sc-gutter) - 8px); }
  .nc { font-size: 0.85rem; padding: 9px 12px 9px 10px; }
  .film-play { height: 46px; gap: 10px; padding-right: 14px; }
  .film-play .pg { width: 30px; height: 30px; }
  .film-play .pg::after { left: 11px; top: 8px; border-left-width: 10px; border-top-width: 7px; border-bottom-width: 7px; }
  .plane-far { width: 128vw; right: -54vw; top: -18vw; }
  .yantra-far { opacity: 0.12; }
}

/* ---------------------------------------------------------------- 2 cost -- */
.ch-cost { padding-top: clamp(96px, 14vh, 170px); padding-bottom: clamp(140px, 30vh, 300px); }
.cost-h { max-width: 15em; }
.cost-body { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cost-body .lede { color: var(--sc-ink-soft); }
.costs { margin: 0; display: flex; flex-direction: column; }
.costs > div { padding: 18px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.costs > div:last-child { border-bottom: 1px solid var(--line); }
.costs dt { font-family: var(--sc-font-display); font-weight: 650; font-size: 1.22rem; letter-spacing: -0.012em; }
.costs dd { margin: 0; color: var(--sc-ink-soft); }
/* the authored silence before the peak: one line, alone */
.quiet { margin-top: clamp(150px, 34vh, 340px); margin-left: auto; max-width: 30ch; text-align: right; font-family: var(--sc-font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.quiet span { display: block; margin-top: 8px; font-family: var(--sc-font-text); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--sc-ink-soft); }
@media (max-width: 760px) { .cost-body { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- 3 debrief -- */
.db-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 4vw, 72px); padding: 24px var(--sc-gutter) 24px calc(var(--folio-edge) + var(--sc-gutter)); max-width: calc(var(--folio-edge) + var(--pagew)); background: radial-gradient(48% 62% at 78% 52%, hsl(30 100% 55% / 0.10), transparent 70%); }
.db-text { display: flex; flex-direction: column; gap: 18px; max-width: 34rem; }
.db-sub { color: var(--sc-ink-soft); font-size: 1.12rem; margin-top: -6px; }
.db-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 8px; font-size: 0.9rem; font-weight: 600; }
.db-steps li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--sc-ink-soft); transition: color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out); }
.db-steps li.on { color: var(--sc-accent-ink); background: var(--saffron); border-color: var(--saffron); }
.db-steps li.was { color: var(--sc-ink); border-color: var(--line-strong); }
.db-voice { margin: 6px 0 0; padding: 16px 18px 18px; border-radius: var(--r-frame); background: color-mix(in oklab, var(--g-umber) 80%, transparent); border: 1px solid var(--line); box-shadow: var(--sc-edge); }
.db-voice figcaption { font-size: 0.82rem; color: var(--sc-ink); font-weight: 600; margin-bottom: 8px; }
.db-voice figcaption .soft { font-weight: 400; }
.db-words { margin: 0; font-size: clamp(1.05rem, 0.98rem + 0.32vw, 1.24rem); line-height: 1.55; }
.db-words .w { opacity: 0.16; transition: opacity 160ms linear; }
.db-words .w.on { opacity: 1; }
.db-words .s { text-decoration: underline 2px transparent; text-underline-offset: 0.3em; transition: text-decoration-color 240ms var(--sc-ease-out); }
.db-words .s.filed { text-decoration-color: var(--saffron); }
.db-note { font-size: 0.98rem; color: var(--sc-ink-soft); max-width: 34ch; }
.db-note-post { color: var(--saffron-hi); font-weight: 600; }
.db-phone { --ps: 0.8; position: relative; }
.db-phone .phone { box-shadow: 0 0 0 1.5px #4a3a2b, inset 0 0 0 1.5px #000, 0 30px 70px hsl(25 80% 2% / 0.7), 0 0 120px hsl(30 100% 50% / 0.10); }
.db-phone button.check { padding: 0; cursor: pointer; position: relative; }
.db-phone button.check:not(.on) { background: transparent; }
.db-phone button.check::after { content: ""; position: absolute; inset: -16px; }
.db-phone .card { cursor: pointer; transition: opacity 160ms var(--sc-ease-out); }
.db-phone .card.off { opacity: 0.55; }
.db-phone button.btn.primary { border: 0; width: auto; font-family: inherit; cursor: pointer; }
.db-phone button.btn.primary:active { transform: translateY(1px); }
.db-phone button:focus-visible { outline: 3px solid var(--saffron-hi); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .db-phone .is-new { animation: db-in 260ms var(--sc-ease-out) both; }
  .db-phone .pulse { animation: db-pulse 1.6s var(--sc-ease-out) 2; }
}
@keyframes db-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes db-pulse { 50% { box-shadow: 0 0 0 8px hsl(30 100% 60% / 0.25), 0 10px 15px -3px rgba(0,0,0,.35); } }
@media (max-width: 860px) {
  .db-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; justify-items: center; gap: 12px; padding: 64px var(--sc-gutter) 14px; }
  .db-text { gap: 10px; max-width: none; width: 100%; }
  .db-h { font-size: 1.7rem; }
  .db-sub, .db-note { display: none; }
  .db-steps { position: absolute; top: max(16px, env(safe-area-inset-top)); right: var(--sc-gutter); margin: 0; font-size: 0.8rem; gap: 4px; }
  .db-steps li { padding: 5px 9px; }
  .db-voice { padding: 10px 12px 12px; }
  .db-voice figcaption { font-size: 0.74rem; margin-bottom: 4px; }
  .db-words { font-size: 0.96rem; line-height: 1.45; }
  .db-phone { align-self: center; }
}

/* ---------------------------------------------------------------- 4 rest -- */
.rest-stage { display: flex; align-items: center; }
.rail-clip { width: 100%; }
/* wide screens: items fade out as they slide under the folio margin, instead of being cut by a hard edge */
@media (min-width: 1180px) {
  .rail-clip { -webkit-mask-image: linear-gradient(to right, transparent calc(var(--folio-edge) - 8px), #000 calc(var(--folio-edge) + 96px)); mask-image: linear-gradient(to right, transparent calc(var(--folio-edge) - 8px), #000 calc(var(--folio-edge) + 96px)); }
}
.rail { align-items: center; gap: clamp(40px, 5vw, 80px); padding: 0 var(--sc-gutter) 0 calc(var(--folio-edge) + var(--sc-gutter)); width: max-content; }
.rail-lead { width: min(25rem, 80vw); display: flex; flex-direction: column; gap: 18px; }
.rail-lead .lede { color: var(--sc-ink-soft); }
.ch-rest { --rs: 0.6; }
.exhibit { display: grid; grid-template-columns: auto 15rem; align-items: center; gap: 28px; }
.mock { display: flex; justify-content: center; isolation: isolate; }
.ex-label { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-strong); padding-top: 14px; }
.ex-label h3, .rail-end h3 { margin: 0; font-family: var(--sc-font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.ex-label p { color: var(--sc-ink-soft); font-size: 0.98rem; line-height: 1.55; }
.ex-label .fact { color: var(--sc-ink); font-weight: 600; }
.rail-end { width: min(19rem, 76vw); display: flex; flex-direction: column; gap: 14px; padding: 22px 0 22px 24px; border-left: 1px solid var(--line-strong); }
.rail-end p { color: var(--sc-ink-soft); }
.rail-end b { color: var(--sc-ink); font-weight: 600; }
@media (max-width: 860px) {
  .exhibit { grid-template-columns: auto; grid-template-rows: auto auto; justify-items: start; gap: 16px; width: min(19rem, 78vw); }
  .rest-stage { padding-top: 40px; }
  .ex-label { width: 100%; gap: 6px; padding-top: 10px; }
  .ex-label h3 { font-size: 1.35rem; }
  .ex-label p { font-size: 0.92rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .exhibit, .rail-end { transition: opacity 120ms linear; }
}
@media (prefers-reduced-motion: reduce) {
  .rest-stage { margin-left: var(--folio-edge); }
  .rail-clip { -webkit-mask-image: none; mask-image: none; }
  .rail { padding-left: var(--sc-gutter); }
}

/* ------------------------------------------------------------- 5 witness -- */
.ch-witness { padding-block: clamp(96px, 13vh, 160px) clamp(80px, 11vh, 140px); }
.witness-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.plate { margin: 0; }
.plate-ground { aspect-ratio: 1; border-radius: var(--r-frame); background: var(--saffron); display: grid; place-items: center; box-shadow: var(--sc-e3); }
.plate-mark { width: 84%; height: 84%; }
.plate .mk { --mk-c1: #1a0e03; --mk-c3: #3d2208; --mk-ink: #2a1605; --mk-deep: #ff9933; --mk-halo: #ff9933; }
.plate .mk .pet path { fill: color-mix(in srgb, #1a0e03 10%, transparent); }
.plate figcaption { margin-top: 14px; font-size: 0.9rem; color: var(--sc-ink-soft); }
.plate figcaption b { color: var(--sc-ink); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .plate-mark svg { animation: turn 220s linear infinite; } }
@keyframes turn { to { rotate: 360deg; } }
.witness-text { display: flex; flex-direction: column; gap: 18px; }
.witness-text > p:not(.lede) { color: var(--sc-ink-soft); max-width: 58ch; }
.witness-text .aside { color: var(--sc-ink); border-left: 2px solid var(--saffron); padding-left: 14px; }
.principles { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.principles li { padding-left: 18px; position: relative; color: var(--sc-ink-soft); }
.principles li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); }
.principles b { color: var(--sc-ink); font-weight: 600; }
.founder { margin-top: clamp(80px, 12vh, 140px); margin-bottom: 0; }
.founder blockquote { margin: 0; max-width: 36ch; font-family: var(--sc-font-display); font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.05rem); line-height: 1.32; font-weight: 600; letter-spacing: -0.016em; text-wrap: pretty; }
.founder figcaption { margin-top: 18px; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .witness-grid { grid-template-columns: minmax(0, 1fr); }
  .plate { max-width: 420px; }
}

/* ----------------------------------------------------------- 6 fine print -- */
.ch-fine { padding-block: clamp(96px, 13vh, 150px) clamp(72px, 10vh, 120px); }
.fine-title { margin-bottom: clamp(24px, 4vw, 48px); }
.spread { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(20px, 4vw, 64px); padding-block: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }
.spread > h3 { max-width: 16em; align-self: start; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; }
.facts dt { font-weight: 650; }
.facts dd { margin: 4px 0 0; color: var(--sc-ink-soft); font-size: 0.98rem; }
.table-wrap { overflow-x: auto; border-radius: var(--r-ctl); }
.table-wrap:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; }
table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
tbody th { font-weight: 600; }
.compare td { color: var(--sc-ink-soft); }
.compare td:last-child, .compare th:last-child { color: var(--saffron-hi); font-weight: 650; }
.prices { margin: 0; }
.prices > div { padding: 16px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 8px 32px; }
.prices > div:last-child { border-bottom: 1px solid var(--line); }
.prices dt { font-family: var(--sc-font-display); font-size: 1.3rem; font-weight: 700; display: flex; flex-direction: column; }
.prices .amt { font-size: 2.4rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.prices .per { font-family: var(--sc-font-text); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; color: var(--sc-ink-soft); }
.prices dd { margin: 0; color: var(--sc-ink-soft); align-self: center; }
.spread .note { margin-top: 16px; color: var(--sc-ink-soft); font-size: 0.95rem; max-width: 62ch; }
.spread .note a { color: var(--saffron); font-weight: 600; }
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 15px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--saffron); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 18px; color: var(--sc-ink-soft); max-width: 64ch; }
@media (max-width: 860px) {
  .spread { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .prices > div { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- colophon -- */
.colophon { padding-block: clamp(96px, 14vh, 170px) 40px; }
.colo-h { max-width: 13em; }
.ledger { margin-top: clamp(28px, 4vw, 44px); max-width: 34rem; }
.ledger-h { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ledger-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ledger-list li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 1.08rem; }
.ledger-list li:last-child { border-bottom: 1px solid var(--line); }
.ledger-list .ok { width: 16px; height: 16px; flex-shrink: 0; align-self: center; border-radius: 4px; background: var(--saffron); color: var(--sc-accent-ink); display: grid; place-items: center; }
.ledger-list .ok svg { width: 11px; height: 11px; stroke-width: 3.2; }
.ledger-list b { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--saffron-hi); }
.join-line { display: block; margin-top: clamp(36px, 5vw, 56px); max-width: 44rem; }
.join-sentence { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.35rem); line-height: 1.75; color: var(--sc-ink); }
.line-field { display: inline-block; vertical-align: baseline; }
.line-field input { width: min(19rem, 72vw); height: 2.1em; padding: 0 2px; border: 0; border-bottom: 2px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--sc-ink); font-size: inherit; }
.line-field input::placeholder { color: #8d7d6d; }
.line-field input:focus { outline: none; border-bottom-color: var(--saffron); }
.line-field input:focus-visible { outline: 2px solid var(--saffron); outline-offset: 4px; border-radius: 4px; }
.line-btn { display: inline; padding: 0; border: 0; background: none; color: var(--saffron); font-weight: 700; font-size: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.24em; cursor: pointer; white-space: nowrap; }
.line-btn::after { content: " \2192"; }
.line-btn:hover { color: var(--saffron-hi); }
.join-line .join-note { margin-top: 10px; }
.join-line .join-msg { margin-top: 8px; }
.colo-foot { margin-top: clamp(80px, 12vh, 140px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 0.9rem; color: var(--sc-ink-soft); }
.colo-foot nav { display: flex; gap: 18px; margin-left: auto; }
.colo-foot nav a { color: var(--sc-ink-soft); }
.colo-foot nav a:hover { color: var(--sc-ink); }
.colo-foot .soft { flex-basis: 100%; font-size: 0.82rem; }

/* touch targets grow on phones */
@media (pointer: coarse) {
  .folio-list a { padding-block: 6px; }
  .faq summary { padding-block: 17px; }
}