/* =========================================================================
   ciumsda.or.id tokens: the engraved chart. See apps/web/DESIGN.md.
   The field is the Jordan's sky blue, the deep accent is the All Things New indigo (#27306e);
   OKLCH so the hand-tint fills, the Sabbath night and the fields stay perceptually even.
   ========================================================================= */

@font-face {
  font-family: 'Zodiak';
  src: url('/fonts/Zodiak-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('/fonts/Zodiak-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('/fonts/Zodiak-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-var.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* All Things New, the public brand (its guidelines, p. 9): navy for "All Things", cyan for "New" */
  --atn-navy: #27306e;
  --atn-cyan: #16becf;
  /* ground and ink */
  --paper: oklch(0.95 0.025 85);
  --paper-deep: oklch(0.91 0.03 83);
  --ink: oklch(0.19 0.02 262);
  --ink-soft: oklch(0.3 0.02 262);
  --muted: color-mix(in oklch, var(--ink) 62%, var(--paper));
  --line: color-mix(in oklch, var(--ink) 14%, transparent);

  /* fields and tints */
  --cerulean: oklch(0.76 0.09 232);
  --indigo: oklch(0.34 0.107 273);
  --alert: oklch(0.52 0.17 29);
  --cobalt: oklch(0.42 0.17 265);
  --cobalt-night: oklch(0.24 0.09 265);
  --dusk: oklch(0.36 0.1 32);
  --gold: oklch(0.8 0.12 85);
  --silver: oklch(0.82 0.01 250);
  --bronze: oklch(0.62 0.11 55);
  --iron: oklch(0.42 0.015 250);
  --clay: oklch(0.6 0.07 45);

  /* type */
  --f-display: 'Zodiak', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-text: 'Schibsted Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-scripture: 'Literata', Georgia, serif;

  --t-mega: clamp(5rem, 1rem + 19vw, 19rem);
  --t-xxl: clamp(3.25rem, 1rem + 8vw, 9rem);
  --t-xl: clamp(2.5rem, 1.4rem + 4.8vw, 6rem);
  --t-l: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
  --t-m: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --t-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --t-s: 0.875rem;
  --t-xs: 0.75rem;

  /* space: four moods, not one constant */
  --gutter: clamp(16px, 2.2vw, 32px);
  --s-tight: clamp(48px, 6vw, 80px);
  --s-normal: clamp(80px, 10vw, 160px);
  --s-airy: clamp(120px, 16vw, 260px);

  /* shape */
  --r-pill: 999px;

  /* motion: one family */
  --ease-ink: cubic-bezier(0.2, 0.7, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-s: 180ms;
  --dur-m: 420ms;
  --dur-l: 900ms;

  color-scheme: light;
}

/* Moving between the site's pages crossfades instead of cutting (Chrome, Edge, Safari 18.2+;
   elsewhere the page simply loads). Under reduced motion there is no transition at all. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* generated from tools/figures/kit/iso-kit.mjs (ISO_CSS); do not edit */

.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}


/* =========================================================================
   ciumsda.or.id landing: "Ukirkanlah pada loh-loh".
   An engraved chart: plates printed with multiply over flat hand-tint fills,
   wood-type numerals, chart ruling. Tokens come from styles/tokens.css, which
   the build prepends. Static composition first; motion only adds (landing/motion).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  scrollbar-color: color-mix(in oklch, var(--ink) 55%, transparent) var(--paper-deep);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.55;
  font-kerning: normal;
  font-variant-numeric: lining-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--indigo);
  accent-color: var(--indigo);
  overflow-x: clip;
}

::selection { background: var(--ink); color: var(--paper); }
[data-tone='ink'] ::selection { background: var(--gold); color: var(--ink); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 60;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus-visible { top: 12px; }

/* ---------- type roles ---------- */

.section-title,
.hero-title,
.finale-title {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
  font-feature-settings: 'kern', 'liga';
}
.section-title { font-size: clamp(2.5rem, 1.25rem + 3vw, 4.5rem); max-width: 16ch; }

.numeral {
  font-family: var(--f-display);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  /* Wood type pulled through a line screen: the numeral is printed in engraved rules. */
  background: repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 5px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scripture p {
  font-family: var(--f-scripture);
  font-size: var(--t-m);
  line-height: 1.5;
  font-weight: 400;
}
.scripture cite,
.egw-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.plate-caption {
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* ---------- plates and tints ---------- */

/* The <picture> itself blends. A z-index on any wrapper would start a new stacking context and
   leave multiply with nothing to print on, so wrappers stay unstacked and the plate carries it. */
.plate { display: block; position: relative; mix-blend-mode: multiply; }
/* cut with its own alpha (treat.py inked()): prints the same, with no blend to lose */
.plate-alpha { mix-blend-mode: normal; }
.plate img { width: 100%; height: auto; }
.tint { position: absolute; pointer-events: none; }

/* ---------- links and buttons: one family ---------- */

.ink-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 650;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 100% 1.5px no-repeat;
  transition: background-size var(--dur-m) var(--ease-ink);
}
.ink-link:hover { background-size: 0 1.5px; background-position: 100% calc(100% - 9px); }

.btn-paper,
.frame-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  font-weight: 650;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper::before,
.frame-cta::before {
  /* Hover floods the pill like a hand-tint wash, from the left. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateX(-101%);
  transition: transform var(--dur-m) var(--ease-ink);
}
.btn-paper:hover { color: var(--paper); transition: color var(--dur-m) var(--ease-ink); }
.btn-paper:hover::before { transform: none; }

.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store { display: block; border-radius: 9px; }
.store img { height: 48px; width: auto; }
.store-play img { height: 72px; margin: -12px -10px; } /* the badge art carries its own clear space */
.store { transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }
.store:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .store:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px color-mix(in oklch, var(--ink) 75%, transparent); }
}
.btn-paper:active, .frame-cta:active, .lang-opt:active { scale: 0.97; }
.btn-paper, .frame-cta, .lang-opt { transition: scale 140ms cubic-bezier(0.23, 1, 0.32, 1); }

/* ---------- frame (four corners) ---------- */

.frame {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px var(--gutter);
  color: var(--ink);
  transition: color var(--dur-m) var(--ease-ink), translate var(--dur-l) var(--ease-out);
}
.js .frame { position: fixed; }
html[data-frame='paper'] .frame { color: var(--paper); }
html.frame-away .frame { translate: 0 -110%; }
.frame::before {
  /* frosted paper once the hero is behind us, so the corners stay legible over plates */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklch, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  transition: opacity var(--dur-m) var(--ease-ink), background-color var(--dur-m) var(--ease-ink);
}
html.scrolled .frame::before { opacity: 1; }
html[data-frame='paper'] .frame::before { background: color-mix(in oklch, var(--ink) 74%, transparent); box-shadow: 0 1px 0 color-mix(in oklch, var(--paper) 12%, transparent); }
.top-sentinel { position: absolute; top: 70svh; height: 1px; width: 1px; pointer-events: none; }

.frame-mark { justify-self: start; display: block; width: clamp(168px, 13vw, 196px); color: var(--atn-navy); --atn-new: var(--atn-cyan); padding: 10px 0; transition: opacity var(--dur-s) var(--ease-out), color var(--dur-m) var(--ease-ink); }
/* over the desktop hero's sky blue the cyan would vanish: "New" goes white until the frame frosts
   over (a phone's frame is always frosted paper, where the cyan reads) */
@media (min-width: 900px) { html:not(.scrolled) .frame-mark { --atn-new: #fff; } }
/* over the ink sections the frame prints in paper; "New" keeps its cyan, as on the brand's white marks */
html[data-frame='paper'] .frame-mark { color: inherit; --atn-new: var(--atn-cyan); }
.frame-mark:hover { opacity: 0.72; }
.frame-mark svg { display: block; width: 100%; height: auto; }

.frame-nav { justify-self: start; margin-left: clamp(24px, 3vw, 56px); display: flex; gap: clamp(18px, 2vw, 32px); font-size: var(--t-s); font-weight: 600; }
.frame-nav a { text-decoration: none; padding: 10px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1.5px no-repeat; transition: background-size var(--dur-m) var(--ease-ink); }
.frame-nav a:hover, .frame-nav a[aria-current='true'] { background-size: 100% 1.5px; }

.frame-tools { justify-self: end; display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; border: 1.5px solid currentColor; border-radius: var(--r-pill); padding: 2px; }
.lang-opt {
  min-width: 40px;
  min-height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.lang-opt { transition: background-color var(--dur-s) var(--ease-out), scale 140ms var(--ease-out); }
.lang-opt:hover:not([aria-pressed='true']) { background: color-mix(in oklch, currentColor 14%, transparent); }
.lang-opt[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
html[data-frame='paper'] .lang-opt[aria-pressed='true'] { background: var(--paper); color: var(--ink); }
.frame-cta { min-height: 42px; padding: 0 20px; background: currentColor; font-size: var(--t-s); }
.frame-cta span { color: var(--paper); position: relative; }
html[data-frame='paper'] .frame-cta span { color: var(--ink); }
.frame-cta::before { background: var(--indigo); }
.frame-cta:hover::before { transform: none; }

/* ---------- 1. hero ---------- */

.hero {
  position: relative;
  min-height: max(100svh, 720px);
  background: var(--cerulean);
  color: var(--ink);
  overflow: clip;
  isolation: isolate;
}
.hero-plate {
  position: absolute;
  inset: 0 0 0 33%;
  z-index: 0;
  /* The mask makes this its own compositing group, so multiply needs a ground inside it. */
  background: var(--cerulean);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}
.hero-plate .plate, .hero-plate .plate img { height: 100%; }
.hero-plate .plate { z-index: 1; }
.hero-plate .plate img { object-fit: cover; object-position: 58% 50%; }
.tint-heaven {
  /* The opened heaven (Matthew 3:16), laid in gold under the engraving: a glow where the clouds
     part and a light that falls toward the figures and fades. No edge anywhere, so it reads as
     light and never as a shape. */
  left: 31%;
  top: -8%;
  width: 38%;
  height: 62%;
  background:
    radial-gradient(46% 30% at 50% 24%, color-mix(in oklch, var(--gold) 92%, transparent), color-mix(in oklch, var(--gold) 70%, transparent) 45%, transparent),
    linear-gradient(90deg, transparent 22%, color-mix(in oklch, var(--gold) 55%, transparent) 42% 58%, transparent 78%);
  -webkit-mask-image: linear-gradient(#000 25%, transparent 92%);
  mask-image: linear-gradient(#000 25%, transparent 92%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(38vw, 560px);
  margin-left: var(--gutter);
  padding-top: clamp(140px, 24vh, 240px);
}
.hero-title { font-size: clamp(2.75rem, 1.2rem + 3.6vw, 5.5rem); max-width: 11ch; }
.hero-lede { margin-top: 24px; max-width: 40ch; font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.5; }
.hero .stores { margin-top: 32px; }
.hero-study { margin-top: 10px; }

.hero-numeral {
  position: absolute;
  z-index: 1;
  /* Straddles the fade between the field and the river, clear of the store buttons. */
  left: 27vw;
  bottom: -0.16em;
  font-size: clamp(13rem, 25vw, 30rem);
  /* the light on the water */
  color: var(--gold);
  pointer-events: none;
}
.hero-caption { position: absolute; z-index: 2; left: var(--gutter); bottom: 22px; }

/* ---------- 2. the voice ---------- */

.voice {
  position: relative;
  padding: var(--s-normal) var(--gutter) var(--s-airy);
  display: grid;
  justify-items: center;
}
.voice-quote { position: relative; display: grid; place-items: center; width: min(1180px, 100%); }
.voice-dove { grid-area: 1 / 1; width: min(48vw, 640px); position: relative; }
.voice-dove::before {
  /* the light the dove descends in, hand-tinted */
  content: '';
  position: absolute;
  inset: 8% 14%;
  border-radius: 50%;
  background: var(--gold);
  translate: 4px 3px;
}
.voice-dove .plate { opacity: 0.62; }
.voice-words { grid-area: 1 / 1; position: relative; z-index: 1; text-align: center; }
.voice-words p {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1rem + 5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
  text-wrap: balance;
}
.voice-cite { margin-top: 28px; font-size: var(--t-s); font-weight: 600; }
.voice-bridge {
  margin-top: var(--s-normal);
  max-width: 26ch;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-l);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

/* ---------- 3. seventy weeks ---------- */

.weeks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: var(--s-normal) var(--gutter);
  border-top: 1px solid var(--line);
  overflow: clip;
}
.weeks-texture { position: absolute; top: 0; left: 0; width: 44vw; opacity: 0.09; pointer-events: none; }
.weeks-copy { grid-column: 1 / span 5; position: relative; }
.weeks-copy p { margin-top: 20px; max-width: 46ch; }
.milestones { list-style: none; padding: 0; margin-top: 36px; border-top: 1px solid var(--line); }
.milestones li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.milestone-year { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weeks-figure { grid-column: 6 / -1; align-self: center; position: relative; }

/* The instrument (tools/figures/seventy-weeks): the kit's tones, printed in our inks. */
.weeks-figure {
  --anatomy-paper: oklch(0.975 0.014 86); --anatomy-face: oklch(0.975 0.014 86); --anatomy-top: oklch(0.99 0.008 86);
  --anatomy-shade-0: oklch(0.86 0.03 82); --anatomy-shade-1: oklch(0.89 0.028 83); --anatomy-shade-2: oklch(0.915 0.026 84); --anatomy-shade-3: oklch(0.94 0.024 85);
  --anatomy-lit-top: var(--paper); --anatomy-lit-shade: var(--paper-deep);
  --anatomy-hi: var(--ink); --anatomy-mid: color-mix(in oklch, var(--ink) 62%, var(--paper)); --anatomy-lo: color-mix(in oklch, var(--ink) 40%, var(--paper));
  --anatomy-faint: color-mix(in oklch, var(--ink) 20%, var(--paper)); --anatomy-lit: var(--indigo);
  --anatomy-halo: var(--ink); --anatomy-halo-opacity: 0.22; --anatomy-dot: var(--ink); --anatomy-weight: 0.7px;
  align-self: start;
  position: sticky;
  top: 14vh;
}
.weeks-stage {
  /* the instrument's own plate: a lighter card so the bench reads against the section paper */
  cursor: ew-resize;
  touch-action: pan-y;
  background: oklch(0.975 0.014 86);
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px color-mix(in oklch, var(--ink) 45%, transparent);
  padding: clamp(10px, 2vw, 28px) clamp(6px, 1.4vw, 18px);
}
.weeks-stage:focus-visible { outline: 2px solid var(--indigo); outline-offset: 8px; }
.weeks-svg { width: 100%; height: auto; }
.weeks-svg .inlay-seven .iso-fill { fill: var(--paper-deep); }
.weeks-svg .inlay-one .iso-fill { fill: var(--cerulean); }
.weeks-svg [data-part='messiah'] .iso-fill { transition: fill var(--dur-m) var(--ease-ink); }
.weeks-svg [data-part='messiah'].is-lit .iso-fill { fill: var(--gold); }
.weeks-svg [data-part='needle'] .iso-line { stroke-width: 1.4; }
.weeks-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.weeks-year { font-family: var(--f-display); font-weight: 900; font-size: var(--t-xl); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.weeks-count { font-size: var(--t-s); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.milestones li { transition: background-color var(--dur-m) var(--ease-ink); }
.milestones li[data-current] { background: linear-gradient(90deg, color-mix(in oklch, var(--gold) 55%, transparent), transparent 85%); }
.milestones li[data-current] .milestone-year { color: var(--indigo); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.weeks-figure .plate-caption { margin-top: 18px; }

/* ---------- 4. Daniel 2 ---------- */

.statue {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: var(--s-normal) var(--gutter) 0;
  border-top: 1px solid var(--line);
}
.statue-copy { grid-column: 1 / span 4; grid-row: 1; align-self: center; }
.statue-copy p { margin-top: 20px; max-width: 40ch; }

.statue-stage {
  grid-column: 5 / span 4;
  grid-row: 1;
  position: relative;
  width: min(100%, 50vh);
  justify-self: center;
  aspect-ratio: 1024 / 1536;
}
.statue-stage .plate { position: relative; z-index: 2; }
.statue-tint {
  position: absolute;
  inset-inline: 0;
  -webkit-mask: url('/assets/plates/statue-1024-matte.png?v=1a57f02945') 0 0 / 100% 100% no-repeat;
  mask: url('/assets/plates/statue-1024-matte.png?v=1a57f02945') 0 0 / 100% 100% no-repeat;
  translate: 2px 2px;
}
/* each band is the full stage, cut by clip-path to its part, so the matte stays registered */
.statue-tint { top: 0; height: 100%; }
.statue-tint[data-part='gold'] { background: var(--gold); clip-path: inset(0 0 81% 0); }
.statue-tint[data-part='silver'] { background: var(--silver); clip-path: inset(19% 0 65.5% 0); }
.statue-tint[data-part='bronze'] { background: var(--bronze); clip-path: inset(34.5% 0 35.5% 0); }
.statue-tint[data-part='iron'] { background: var(--iron); clip-path: inset(64.5% 0 22.5% 0); }
.statue-tint[data-part='clay'] { background: var(--clay); clip-path: inset(77.5% 0 8.5% 0); }

.metals {
  /* rows in the statue's own proportions, so each name sits beside its part, as on the chart */
  grid-column: 9 / -1;
  grid-row: 1;
  list-style: none;
  padding: 0;
  align-self: stretch;
  display: grid;
  grid-template-rows: 19fr 15.5fr 30fr 13fr 14fr 8.5fr;
}
.metals li { align-self: center; }
.metals li::after {
  content: '';
  position: absolute;
  right: calc(100% + 10px);
  top: 0.62em;
  width: clamp(40px, 6vw, 110px);
  height: 1px;
  background: var(--ink);
  opacity: 0.5;
}
.metals li { display: grid; gap: 4px; padding-left: 22px; position: relative; max-width: 34ch; }
.metals li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.metals li[data-part='gold']::before { background: var(--gold); }
.metals li[data-part='silver']::before { background: var(--silver); }
.metals li[data-part='bronze']::before { background: var(--bronze); }
.metals li[data-part='iron']::before { background: var(--iron); }
.metals li[data-part='clay']::before { background: linear-gradient(90deg, var(--iron) 50%, var(--clay) 50%); }
.metals b { font-family: var(--f-display); font-weight: 700; font-size: var(--t-m); line-height: 1.1; }
.metals span { font-size: var(--t-s); color: var(--muted); }

.statue-stone { grid-column: 1 / span 2; grid-row: 1; width: min(100%, 200px); align-self: start; }
.statue-mountain { grid-column: 1 / -1; margin: var(--s-tight) calc(-1 * var(--gutter)) 0; position: relative; }
.statue-mountain::before {
  /* the light on the summit, hand-tinted */
  content: '';
  position: absolute;
  left: 30%;
  top: -4%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: var(--gold);
  translate: 3px 2px;
}
.statue-mountain .plate { position: relative; }
.statue-strike-row,
.statue-coda {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.statue-strike-row { padding-top: var(--s-normal); }
.statue-stone { grid-column: 2 / span 2; width: min(100%, 200px); justify-self: end; }
.statue-strike { grid-column: 5 / span 6; font-family: var(--f-display); font-style: italic; font-size: var(--t-l); line-height: 1.22; }
.statue-coda { padding: var(--s-tight) 0 var(--s-normal); }
.statue-verse { grid-column: 3 / span 8; text-align: center; }
.statue-verse p { font-size: var(--t-l); line-height: 1.3; text-wrap: balance; }
.statue-coda .ink-link { grid-column: 3 / span 8; justify-self: center; margin-top: 20px; }

/* Live chapter (daniel2/statue.ts): the section is a tall track, the stage stays in view. The
   wrapper is invisible to the static grid above (display: contents). In the live grid every
   layer is placed explicitly: an absolutely positioned grid child keeps its static grid-column
   as its containing block otherwise. */
.statue-pin { display: contents; }
.statue.is-live { display: block; height: 520svh; padding: 0; border-top: 1px solid var(--line); }
.statue.is-live .statue-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr;
  column-gap: var(--gutter);
  padding: 0 var(--gutter);
  align-items: center;
  isolation: isolate;
  background: var(--paper); /* the ground every multiplied layer prints on */
}
.statue.is-live .statue-copy { grid-column: 1 / span 4; grid-row: 1; position: relative; z-index: 3; }
.statue.is-live .statue-stage { grid-column: 5 / span 4; grid-row: 1; height: 78svh; width: auto; position: relative; z-index: 2; }
.statue.is-live .statue-stage > .plate,
.statue.is-live .statue-tint { visibility: hidden; }
.statue-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.statue.is-live .metals { grid-column: 9 / -1; grid-row: 1; height: 78svh; align-self: center; position: relative; z-index: 3; }
.statue.is-live .statue-strike-row { display: contents; }
.statue.is-live .statue-strike { grid-column: 1 / span 4; grid-row: 1; align-self: center; position: relative; z-index: 3; }
.statue.is-live .statue-stone {
  /* rides with the stage, lands on the feet; its own box prints with multiply */
  grid-column: 5 / span 4; grid-row: 1; align-self: end; justify-self: center;
  width: 15svh; margin-bottom: 8svh; position: relative; z-index: 4;
  pointer-events: none; mix-blend-mode: multiply;
}
.statue.is-live .statue-mountain {
  /* unplaced, so its containing block is the whole stage, full bleed */
  grid-area: auto; position: absolute; inset: 0; margin: 0; z-index: 1;
  transform-origin: 50% 90%; pointer-events: none; mix-blend-mode: multiply;
}
.statue.is-live .statue-mountain::before { width: 42svh; height: 42svh; left: calc(50% - 21svh); top: 2svh; }
.statue.is-live .statue-mountain .plate,
.statue.is-live .statue-mountain .plate img { height: 100%; }
.statue.is-live .statue-mountain .plate img { object-fit: cover; object-position: 50% 70%; }
.statue.is-live .statue-coda {
  grid-area: auto; position: absolute; z-index: 5; left: 50%; top: 13svh; translate: -50% 0;
  width: min(760px, 86vw); padding: 28px 32px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px var(--line);
}
.statue.is-live .statue-coda .statue-verse,
.statue.is-live .statue-coda .ink-link { grid-column: auto; margin: 0; }

/* ---------- 5. the Desire of Ages ---------- */

.desire {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding: var(--s-normal) var(--gutter);
  background: var(--paper-deep);
}
.desire-portrait { grid-column: 1 / span 6; }
.desire-portrait .plate-caption { margin-top: 12px; }
.desire-copy { grid-column: 8 / span 5; }
.egw-quote { margin-top: 32px; }
.egw-quote p { font-family: var(--f-display); font-style: italic; font-size: var(--t-l); line-height: 1.22; }
.desire-copy > p { margin-top: 28px; max-width: 44ch; }

/* ---------- 6. the app ---------- */

.app {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-normal) var(--gutter);
  overflow: clip;
}
.app-title { max-width: 18ch; }
.screens {
  list-style: none;
  padding: 0;
  margin-top: var(--s-tight);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}
.screen:nth-child(even) { margin-top: 72px; }
.phone {
  display: block;
  border-radius: clamp(18px, 2.2vw, 34px);
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--paper) 22%, transparent), 0 30px 60px -30px oklch(0 0 0 / 0.7);
}
.phone img { width: 100%; height: auto; }
.screen-note { display: block; margin-top: 14px; font-size: var(--t-s); color: color-mix(in oklch, var(--paper) 78%, transparent); max-width: 22ch; }

.facts {
  margin-top: var(--s-normal);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 1px solid color-mix(in oklch, var(--paper) 18%, transparent);
  padding-top: 28px;
}
.fact .numeral { font-size: var(--t-xxl); color: var(--gold); }
.fact dd { margin-top: 12px; font-size: var(--t-s); max-width: 22ch; color: color-mix(in oklch, var(--paper) 82%, transparent); }

/* ---------- 7. Sabbath ---------- */

.sabbath {
  position: relative;
  min-height: 100svh;
  background: var(--cobalt-night);
  color: var(--paper);
  overflow: clip;
  isolation: isolate;
  display: grid;
  align-content: start;
}
.sabbath-sky {
  position: absolute;
  inset: auto 0 0;
  aspect-ratio: 1536 / 1024;
  min-height: 70%;
  z-index: 0;
  background: var(--cobalt-night);
}
.sabbath-sky::before {
  /* the plate's top edge dissolves into the night above it */
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 22%;
  z-index: 2;
  background: linear-gradient(var(--cobalt-night), transparent);
}
.sabbath-sky::after {
  /* a night scrim under the words, so pale engraving never fights the title */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, var(--cobalt-night) 0 26%, color-mix(in oklch, var(--cobalt-night) 70%, transparent) 42%, transparent 60%);
}
.sabbath-sky .plate { position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; opacity: 0.92; }
.sabbath-sky .plate img { width: 100%; height: 100%; object-fit: cover; filter: invert(1); }
.sabbath-sun {
  /* behind the inverted plate, the drawn sun reads as this gold disc (measured: 0.689, 0.488) */
  position: absolute;
  z-index: 0;
  left: 68.9%;
  top: 48.8%;
  width: 8.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  translate: calc(-50% + 3px) calc(-50% + 2px);
}
.sabbath-copy { position: relative; z-index: 2; padding: clamp(120px, 18vh, 200px) var(--gutter) var(--s-normal); max-width: 760px; }
.sabbath-copy .section-title { max-width: 15ch; }
.sabbath-time { margin-top: 24px; font-size: var(--t-m); font-weight: 600; color: var(--gold); }
.sabbath-locate {
  margin-top: 14px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid color-mix(in oklch, var(--paper) 55%, transparent);
  background: transparent;
  color: var(--paper);
  font-size: var(--t-s);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-s) var(--ease-out), scale 140ms var(--ease-out);
}
/* the button floods paper with ink words, the same answer as the other buttons on the night */
.sabbath-locate { transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out), scale 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sabbath-locate:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
}
.sabbath-locate:active { scale: 0.97; }
.sabbath-locate[disabled] { opacity: 0.6; cursor: progress; }

/* The evening (sabbath.ts drives --t from 0 at dusk to 1 at night). */
.sabbath.is-evening { --ground: color-mix(in oklab, var(--dusk) calc((1 - var(--t, 1)) * 100%), var(--cobalt-night)); background: var(--ground); }
.sabbath.is-evening .sabbath-sky { background: var(--ground); }
.sabbath.is-evening .sabbath-sky::before { background: linear-gradient(var(--ground), transparent); }
.sabbath.is-evening .sabbath-sky::after { background: linear-gradient(100deg, var(--ground) 0 26%, color-mix(in oklch, var(--ground) 70%, transparent) 42%, transparent 60%); }
.sabbath.is-evening .sabbath-sun {
  /* sinks from above the horizon to below it; under the sea's pale lines it reads as its own reflection */
  transform: translateY(calc((var(--t, 0) * 1.4 - 0.55) * 100%)) scale(calc(1.06 - var(--t, 0) * 0.1));
  opacity: calc(1 - max(0, var(--t, 0) - 0.72) * 2.4);
}

.sabbath-points { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 8px; }
.sabbath-points li::before { content: ''; display: inline-block; width: 18px; height: 1.5px; background: currentColor; vertical-align: middle; margin-right: 12px; }

/* ---------- 8. mission 2027 ---------- */

.mission {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: var(--s-normal) var(--gutter);
  background: var(--cerulean);
  color: var(--ink);
  overflow: clip;
  isolation: isolate;
}
.mission-plate { grid-column: 7 / -1; grid-row: 1; position: relative; }
.mission-numeral {
  /* on the sea beneath the angel, as the 27 sits on the Jordan */
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  position: relative;
  z-index: 2;
  font-size: clamp(8rem, 24vw, 26rem);
  color: var(--gold);
  margin-bottom: -0.12em;
}
.mission-copy { grid-column: 1 / span 6; grid-row: 1; position: relative; z-index: 2; align-self: center; }
.mission-copy > p { margin-top: 24px; max-width: 44ch; }
.mission .scripture { margin-top: 32px; max-width: 42ch; }
.mission-actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* ---------- 9. finale ---------- */

.finale {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: var(--s-normal) var(--gutter) 40px;
}
.finale-plate { grid-column: 1 / span 5; position: relative; }
.finale-plate::before {
  content: '';
  position: absolute;
  left: 30%;
  top: 2%;
  width: 40%;
  height: 34%;
  border-radius: 50%;
  background: var(--gold);
  translate: 3px 2px;
}
.finale-plate .plate { position: relative; }
.finale-copy { grid-column: 7 / span 6; align-self: center; }
.finale-title { font-size: var(--t-xxl); font-weight: 900; max-width: 9ch; }
.finale-verse { margin-top: 28px; max-width: 40ch; }
.stores-finale { margin-top: 36px; }
.finale-mark { grid-column: 1 / -1; margin-top: var(--s-normal); color: var(--atn-navy); --atn-new: var(--atn-cyan); }
.finale-mark .wordmark { display: block; width: 100%; height: auto; }
.colophon {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 20px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: var(--t-s);
}
.colophon-lockup { grid-column: 1 / span 3; width: 220px; color: var(--atn-navy); --atn-new: var(--atn-cyan); }
.colophon-lockup svg { display: block; width: 100%; height: auto; }
.colophon-fine { grid-column: 5 / span 5; color: var(--muted); }
.colophon-links { grid-column: 10 / -1; display: flex; flex-direction: column; gap: 6px; }
.colophon-links a { text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; transition: color var(--dur-s) var(--ease-out); }
.colophon-links a:hover { text-decoration: underline; color: var(--indigo); }
.colophon-credit { grid-column: 5 / span 5; color: var(--muted); font-size: var(--t-xs); }

/* =========================================================================
   Phone composition (designed, not shrunk)
   ========================================================================= */

@media (max-width: 899px) {
  html { scroll-padding-top: 72px; }
  .frame { grid-template-columns: auto 1fr; padding: 12px 16px; }
  .frame::before { opacity: 1; }
  .frame-nav { display: none; }
  .frame-mark { width: 140px; --atn-new: var(--atn-cyan); }
  .lang-opt { min-width: 36px; min-height: 34px; }
  .frame-cta { min-height: 38px; padding: 0 16px; }

  .hero { display: flex; flex-direction: column; min-height: auto; }
  .hero-plate { position: relative; inset: auto; height: clamp(220px, 44svh, 420px); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .tint-heaven { left: 30%; width: 34%; }
  .hero-copy { width: auto; margin: 12px 16px 0; padding: 0 0 36px; }
  .hero-title { font-size: clamp(2.25rem, 1.4rem + 4.4vw, 3.25rem); }
  .hero-lede { margin-top: 14px; font-size: 1rem; }
  .hero .stores { margin-top: 20px; gap: 10px; }
  .store img { height: 44px; }
  .store-play img { height: 66px; margin: -11px -9px; }
  /* on the water, at the plate's foot, clear of the headline below it */
  .hero-numeral { left: auto; right: 14px; top: calc(clamp(220px, 44svh, 420px) - 36vw); bottom: auto; font-size: 36vw; }
  .hero-caption { position: static; padding: 0 16px 20px; }

  .voice { padding: var(--s-tight) 16px var(--s-normal); }
  .voice-dove { width: 86vw; }
  .voice-words p { font-size: clamp(2.1rem, 1.2rem + 4.6vw, 3rem); }
  .voice-bridge { font-size: 1.5rem; }

  /* minmax(0, 1fr), not 1fr: a one-word line too wide for the phone (the 2027 numeral) widened the
     whole column, and the paragraphs beside it were cut off at the screen's edge (22 October) */
  .weeks, .statue, .desire, .mission, .finale, .colophon { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
  .weeks > *, .statue > *, .statue-pin > *, .desire > *, .mission > *, .finale > *, .colophon > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .weeks-texture { width: 100vw; opacity: 0.1; }
  .milestones li { grid-template-columns: 5.25rem 1fr; }
  .weeks-figure { margin-top: 40px; }
  .weeks-figure { position: relative; top: 0; }

  .statue-stage { width: min(78vw, 360px); margin-top: 32px; }
  .metals { margin-top: 32px; grid-template-rows: none; gap: 18px; }
  .metals li::after { display: none; }
  .statue-strike-row, .statue-coda { grid-template-columns: 1fr; padding-inline: 0; row-gap: 20px; }
  .statue-strike-row > *, .statue-coda > * { grid-column: 1 / -1 !important; }
  .statue-stone { width: 140px; justify-self: start; }
  .statue-mountain { margin: 32px -16px 0; }
  .statue-verse { text-align: left; }
  .statue-coda .ink-link { justify-self: start; }
  .statue-strike, .statue-verse p { font-size: 1.375rem; }

  .desire-copy { margin-top: 32px; }

  /* the live chapter on a phone: copy above, the statue centred, the current name beneath */
  .statue.is-live .statue-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 72px 16px 16px; align-items: start; }
  .statue.is-live .statue-copy { grid-column: 1 !important; grid-row: 1 !important; }
  .statue.is-live .statue-copy .section-title { font-size: 1.9rem; }
  .statue.is-live .statue-copy p { font-size: 0.9375rem; margin-top: 10px; }
  .statue.is-live .statue-stage { grid-column: 1 !important; grid-row: 2 !important; height: 54svh; justify-self: center; margin: 12px 0 0; }
  .statue.is-live .metals { grid-column: 1 !important; grid-row: 2 !important; align-self: end; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-bottom: 6px; }
  .statue.is-live .metals li { padding-left: 16px; }
  .statue.is-live .metals li::before { width: 10px; height: 10px; }
  .statue.is-live .metals b { font-size: 0.9375rem; }
  .statue.is-live .metals span { display: none; }
  .statue.is-live .statue-strike { grid-column: 1 !important; grid-row: 1 !important; align-self: start; font-size: 1.25rem; }
  .statue.is-live .statue-stone { grid-column: 1 !important; grid-row: 2 !important; width: 12svh; margin-bottom: 4svh; }
  .statue.is-live .statue-coda { top: 96px; padding: 20px; }
  .statue.is-live .statue-coda .statue-verse p { font-size: 1.25rem; }

  .screens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .screens::-webkit-scrollbar { display: none; }
  .screen { flex: 0 0 62vw; scroll-snap-align: start; }
  .screen:nth-child(even) { margin-top: 0; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 32px; }

  .sabbath-sky { min-height: 0; width: 100%; }
  .sabbath-sky::after { background: none; }
  .sabbath-copy { padding: 110px 16px calc(66vw + 40px); }

  .mission { padding-block: var(--s-tight); }
  .mission-plate { margin-top: 32px; }
  /* 37vw is the largest that keeps all four digits on the phone, as the hero's 27 is */
  .mission-numeral { font-size: 37vw; justify-self: start; margin: 0; }

  .finale-copy { margin-top: 32px; }
  .finale-title { font-size: clamp(3rem, 2rem + 6vw, 4.5rem); }
  .colophon-links { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  /* the colophon sits inside the finale, which already holds the 16px gutter; room below so the
     fixed privacy button never covers its last line */
  .colophon { padding-inline: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   Motion. Start states live only under html.motion-ready (set in <head> when motion is
   allowed, withdrawn by a failsafe if the module never reports). The hero intro is CSS so it
   plays from first paint: the plate is printed by a press passing left to right, the opened
   heaven pours down in gold, the 27 rises out of the water.
   ========================================================================= */

@keyframes press { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pour { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

.motion-ready .hero-plate .plate { animation: press 1.3s cubic-bezier(0.65, 0, 0.2, 1) both; }
.motion-ready .tint-heaven { transform-origin: 50% 0; animation: pour 0.8s 0.7s cubic-bezier(0.23, 1, 0.32, 1) both; }
.motion-ready .hero-numeral { animation: rise 0.9s 0.85s cubic-bezier(0.23, 1, 0.32, 1) both; }

/* The Jordan's water (hero-water.ts): the canvas fades in over an identical still. */
.hero-water { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.motion-ready .hero-water { opacity: 0; transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
.motion-ready .hero-plate.gl-on .hero-water { opacity: 1; }
.motion-ready .hero-plate.gl-on .plate { opacity: 0; transition: opacity 0.2s 0.6s linear; }

/* Hand-tints flood after the line work: driven by --ink (0 to 1) from the reveal module. */
.motion-ready .voice-dove::before { scale: calc(0.55 + 0.45 * var(--ink, 1)); opacity: var(--ink, 1); }
.motion-ready .statue-tint { opacity: var(--ink, 1); }
.motion-ready .statue-mountain::before,
.motion-ready .finale-plate::before { scale: 1 var(--ink, 1); transform-origin: 50% 100%; opacity: var(--ink, 1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

.ads-consent, .ads-settings { font-family: var(--f-text); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); font-size: 0.875rem; line-height: 1.5; z-index: 1000; }
.ads-consent { position: fixed; inset: auto 16px 16px auto; width: min(38rem, calc(100% - 32px)); padding: 24px; box-sizing: border-box; max-height: 75svh; overflow: auto; box-shadow: 0 8px 32px #10182526; }
.ads-consent[hidden], .ads-settings[hidden] { display: none; }
.ads-consent h2 { font-family: var(--f-text); font-size: 1.125rem; font-weight: 700; line-height: 1.3; margin: 0 0 8px; letter-spacing: 0; }
.ads-consent p { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.5; }
.ads-consent a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 32px; align-items: center; }
.ads-actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ads-actions button, .ads-settings { min-height: 44px; padding: 10px 18px; font: inherit; font-weight: 600; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; }
.ads-actions button { flex: 1 1 10rem; color: var(--ink); background: var(--paper); }
.ads-actions button:hover { background: var(--paper-deep); }
.ads-actions button:disabled { cursor: not-allowed; text-decoration: line-through; }
.ads-settings { position: fixed; bottom: 12px; right: 12px; padding: 8px 14px; font-size: 0.75rem; }
.ads-consent :focus-visible, .ads-settings:focus-visible { outline: 3px solid var(--indigo); outline-offset: 4px; }
@media (max-width: 420px) { .ads-consent { padding: 18px; } .ads-actions { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .ads-consent, .ads-settings { transition: none; animation: none; } }