/* ==========================================================================
   Aster Peng — version 5
   Near-black ground, neutral light text, two controlled pops of colour
   (leaf green for signals and emphasis, water blue only inside the field), and sections
   that alternate dark and light. Geist for the voice, Geist Mono for the
   metadata. The hero field is a sphere of connected nodes.
   ========================================================================== */

:root {
  /* Dark ground */
  --bg:        #0B0C0E;
  --bg-2:      #121417;
  --fg:        #ECEAE4;
  --fg-2:      #A5A39C;   /* secondary, 7.5:1 on bg */
  --fg-3:      #75746E;   /* metadata, 4.6:1 on bg */
  --rule:      #24272C;
  --rule-2:    #383C43;
  /* Light ground */
  --lbg:       #F2EFE9;
  --lbg-2:     #E9E5DD;
  --lfg:       #131416;
  --lfg-2:     #55544E;
  --lfg-3:     #77766F;
  --lrule:     #D8D3CA;
  --lrule-2:   #131416;
  /* The one pop: leaf green. Water blue appears only inside the field. */
  --accent:    #78C77A;   /* on dark, 9:1 */
  --accent-l:  #1E7A3E;   /* on light, 4.7:1 */
  --water:     #8FC1E8;   /* field only */
  /* Field (canvas reads these) */
  --field-line:   #ECEAE4;
  --field-node:   #ECEAE4;
  --field-live:   #8FC1E8;   /* breathing nodes: water */
  --field-signal: #78C77A;   /* travelling signals: the page accent */

  --sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --t-meta: 0.75rem;
  --t-small: 0.9375rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --t-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --t-h2: clamp(1.75rem, 1.2rem + 2vw, 2.875rem);
  --t-h1: clamp(2.375rem, 1.3rem + 4.2vw, 5rem);
  --t-stat: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);

  --max: 1400px;
  --pad: clamp(20px, 4vw, 64px);
  --gap: clamp(16px, 2vw, 32px);
  --band: clamp(64px, 8vw, 128px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: .18s;
  --slow: .6s;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-padding-top: 80px; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--rule-2); transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--bg); }
strong { font-weight: 600; }
/* The non-breaking space keeps the arrow tied to the last word so it can
   never wrap onto a line of its own. */
.ext::after { content: "\00A0\2197"; font-size: .8em; text-decoration: none; }
.ch-link.ext::after { content: "\00A0\2197"; font-size: .5em; vertical-align: .55em; }
time { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.idx { font-family: var(--mono); font-size: var(--t-meta); font-weight: 500; letter-spacing: .04em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.kicker { display: flex; gap: 12px; align-items: baseline; font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.kicker .idx { color: var(--accent); }
h2 { font-size: var(--t-h2); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; max-width: 26ch; }
h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.lede { font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); max-width: 56ch; text-wrap: pretty; }
.section-head { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; margin-bottom: clamp(32px, 4vw, 56px); position: relative; }
.section-head::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 1px; background: var(--rule-2); transform-origin: left; }
section.dark { background: var(--bg); color: var(--fg); padding-block: var(--band); }
section.light { background: var(--lbg); color: var(--lfg); padding-block: var(--band); }

/* Light-section overrides: same components, inverted tokens. */
.light .idx, .light .kicker { color: var(--lfg-3); }
.light .kicker .idx { color: var(--accent-l); }
.light .lede { color: var(--lfg-2); }
.light .section-head::before { background: var(--lrule-2); }
.light a { color: var(--accent-l); text-decoration-color: color-mix(in srgb, var(--accent-l) 40%, transparent); }
.light a:hover { color: var(--lfg); text-decoration-color: currentColor; }
.light :focus-visible { outline-color: var(--accent-l); }

/* --- Skip link, draft note ------------------------------------------------ */
.skip { position: absolute; left: 16px; top: -60px; padding: 10px 14px; background: var(--fg); color: var(--bg); font-family: var(--mono); font-size: var(--t-meta); z-index: 100; text-decoration: none; }
.skip:focus { top: 16px; }
.draft-note { font-family: var(--mono); color: var(--fg-3); }
html[data-status="live"] .draft-note { display: none; }

/* --- Masthead -------------------------------------------------------------- */
.masthead { position: sticky; top: 0; z-index: 50; background: rgba(11,12,14,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--slow) var(--ease); }
.masthead.is-stuck { border-bottom-color: var(--rule); }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); height: 64px; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.name { display: inline-flex; align-items: baseline; gap: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--fg); text-decoration: none; }
.name:hover { color: var(--fg); }
.name-tag { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.nav ol { display: flex; gap: clamp(16px, 2vw, 32px); }
.nav a { font-size: var(--t-small); font-weight: 500; color: var(--fg-2); text-decoration: none; padding: 6px 0; position: relative; transition: color var(--fast) var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--fast) var(--ease); }
.nav a:hover, .nav a[aria-current="true"] { color: var(--fg); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .name-tag { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: none; border: 1px solid var(--rule-2); font: 500 var(--t-meta) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg); cursor: pointer; }
  .nav { position: absolute; left: 0; right: 0; top: 64px; background: var(--bg); border-bottom: 1px solid var(--rule-2); padding: 8px var(--pad) 20px; }
  .nav[hidden] { display: none; }
  .nav ol { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 1.25rem; color: var(--fg); }
  .nav li:last-child a { border-bottom: 0; }
  .nav a::after { display: none; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font-size: var(--t-small); font-weight: 500; text-decoration: none; border: 1px solid var(--fg); transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--rule-2); }
.btn-ghost:hover { border-color: var(--fg); color: var(--fg); }

/* --- Hero ------------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; background: var(--bg); padding-top: clamp(40px, 6vw, 96px); }
.field { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: end; }
.hero-copy { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); max-width: 720px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.meta-line em { font-style: normal; color: var(--accent); margin-right: 8px; }
.hero h1 { font-size: var(--t-h1); font-weight: 500; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; max-width: 15ch; }
.hero-lead { font-size: var(--t-lead); line-height: 1.55; color: var(--fg-2); max-width: 54ch; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero-path { justify-self: end; align-self: end; display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; min-width: 220px; }
.path-title { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.hero-path ol { display: flex; flex-direction: column; border-left: 1px solid var(--rule-2); }
/* The five are peers, so none is emphasised. (The rail once held a sequence
   that ended in "A decision", and the last item was highlighted as its
   destination; that emphasis is wrong for a list of equals.) */
.hero-path li { display: flex; align-items: baseline; gap: 14px; padding: 6px 0 6px 18px; font-size: var(--t-small); color: var(--fg); position: relative; }
.hero-path li::before { content: ""; position: absolute; left: -1px; top: 50%; width: 10px; height: 1px; background: var(--rule-2); }

.stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 7vw, 112px); padding-block: 28px 40px; border-top: 1px solid var(--rule-2); }
.stats li { display: flex; flex-direction: column; gap: 8px; }
.stat { font-size: var(--t-stat); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat .unit { font-size: .45em; color: var(--accent); margin-left: 4px; letter-spacing: 0; }
.stat-label { font-size: var(--t-small); color: var(--fg-2); max-width: 24ch; text-wrap: pretty; }

/* --- Work: the ledger (light) --------------------------------------------- */
.ledger { border-bottom: 1px solid var(--lrule-2); }
.ledger-row { border-top: 1px solid var(--lrule); transition: background var(--fast) var(--ease); }
.ledger-row:first-child { border-top-color: transparent; }
.ledger-row:hover, .ledger-row:focus-within { background: var(--lbg-2); }
.ledger-row.is-flagged { background: #E2F1E1; }
.ledger-row details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 5fr) minmax(0, 2fr) minmax(0, 4fr) 20px; column-gap: var(--gap); align-items: baseline; width: 100%; max-width: var(--max); margin-inline: auto; padding: 22px var(--pad); }
.ledger-row details > summary::-webkit-details-marker { display: none; }
.ledger-row details > summary:focus-visible { outline: 2px solid var(--accent-l); outline-offset: -2px; }
.l-idx { color: var(--lfg-3); }
.l-title { font-size: var(--t-h3); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.l-org { font-family: var(--mono); font-size: var(--t-meta); color: var(--lfg); line-height: 1.5; }
.l-years { display: block; color: var(--lfg-3); }
.l-result { font-size: var(--t-small); line-height: 1.4; color: var(--accent-l); font-weight: 500; text-wrap: pretty; }
.l-toggle { justify-self: end; align-self: center; position: relative; width: 16px; height: 16px; }
.l-toggle::before, .l-toggle::after { content: ""; position: absolute; background: var(--lfg); left: 0; top: 7px; width: 16px; height: 1.5px; transition: transform var(--fast) var(--ease); }
.l-toggle::after { transform: rotate(90deg); }
details[open] .l-toggle::after { transform: rotate(0deg); }
.ledger-row:hover .l-idx, details[open] .l-idx { color: var(--accent-l); }
.ledger-body { overflow: hidden; transition: height var(--slow) var(--ease), opacity var(--slow) var(--ease); display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 22px; max-width: var(--max); margin-inline: auto; padding: 4px var(--pad) 32px; }
.lb { display: flex; flex-direction: column; gap: 8px; font-size: var(--t-small); line-height: 1.5; color: var(--lfg-2); }
.lb:nth-child(1) { grid-column: 2; } .lb:nth-child(2) { grid-column: 3; } .lb:nth-child(3) { grid-column: 4; }
.lb-result { grid-column: 2 / span 3 !important; padding-top: 16px; border-top: 1px solid var(--accent-l); color: var(--lfg); font-size: var(--t-body); }
.lb-result p:last-child { max-width: 70ch; }
.lb-label { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--lfg-3); }
.lb-result .lb-label { color: var(--accent-l); }
.chronology { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gap); padding-top: clamp(40px, 5vw, 64px); }
.chron { border-top: 1px solid var(--lrule-2); }
.chron li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--gap); padding: 14px 0; border-bottom: 1px solid var(--lrule); font-size: var(--t-small); line-height: 1.45; color: var(--lfg-2); }
.c-when { font-family: var(--mono); font-size: var(--t-meta); color: var(--lfg-3); padding-top: 3px; }
.c-what strong { color: var(--lfg); margin-right: 8px; font-weight: 500; }
.toolkit { grid-column: 2; margin-top: 20px; font-size: var(--t-small); line-height: 1.6; color: var(--lfg-2); max-width: 78ch; text-wrap: pretty; }
.toolkit .kicker { display: inline; margin-right: 12px; }

/* --- Strengths: the core message, directly under the hero (dark) ---------- */
.strengths { background: var(--bg-2); border-top: 1px solid var(--rule-2); }
.strength-list { display: flex; flex-direction: column; counter-reset: strength; }
.strength-list li {
  counter-increment: strength;
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--gap); align-items: start;
  padding: 26px 0 30px; border-top: 1px solid var(--rule-2); position: relative;
}
.strength-list li:first-child { border-top-color: var(--fg-3); }
.strength-list li::before {
  content: counter(strength, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 3;
  font-family: var(--mono); font-size: var(--t-meta); color: var(--accent); padding-top: 7px;
}
.strength-list h3 { grid-column: 2; max-width: 32ch; margin-bottom: 10px; }
.strength-list p:not(.see) { grid-column: 2; color: var(--fg-2); font-size: var(--t-small); line-height: 1.6; max-width: 72ch; text-wrap: pretty; }
.strength-list .see {
  grid-column: 2; margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  font-family: var(--mono); font-size: var(--t-meta);
}
.see-label { color: var(--fg-3); }
.see-label::after { content: " \2192"; }
.strength-list .see a {
  color: var(--fg-2); text-decoration: none;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 2px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.strength-list .see a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ===========================================================================
   DORMANT: styles for the Exploring and Notes sections, removed from
   index.html on 2026-10-22. Kept so those sections can be restored by
   pasting their markup back in. The markup is in git: see the commit
   "Remove the Exploring and Notes sections".
   =========================================================================== */
/* --- Areas being explored (inside the dark Exploring section) ------------- */
.areas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap); border-top: 1px solid var(--fg-3);
}
.areas li { display: flex; flex-direction: column; gap: 5px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.area-name { display: inline-flex; align-items: baseline; gap: 10px; font-size: var(--t-lead); font-weight: 500; letter-spacing: -.02em; color: var(--fg); }
.area-name::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex: none; transform: translateY(-2px); }
.area-note { font-family: var(--mono); font-size: var(--t-meta); line-height: 1.5; color: var(--fg-3); padding-left: 17px; }
.areas-foot { margin: 28px 0 clamp(36px, 4vw, 56px); font-size: var(--t-small); color: var(--fg-2); }

/* --- Chapter (light) ------------------------------------------------------- */
.chapter { border-top: 1px solid var(--lrule-2); }
.chapter-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
.chapter-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.spec { display: flex; flex-direction: column; font-family: var(--mono); font-size: var(--t-meta); line-height: 1.5; margin-top: 6px; }
.spec > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--lrule); }
.spec dt { color: var(--lfg-3); }
.chapter-body { display: flex; flex-direction: column; gap: 20px; font-size: var(--t-lead); line-height: 1.6; color: var(--lfg-2); max-width: 58ch; padding-top: 6px; }
.chapter-body p { text-wrap: pretty; }
.opening-line { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; color: var(--lfg); }
.chapter-body strong { color: var(--lfg); font-weight: 500; }

/* --- Questions (dark) ------------------------------------------------------- */
.q-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.q { display: flex; flex-direction: column; gap: 14px; padding: 24px 0 8px; border-top: 1px solid var(--rule-2); }
.q-meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .04em; }
.q-meta .idx { color: var(--fg-3); }
.q-status { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 8px; }
.q-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.q h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); max-width: 24ch; }
.q p:last-child { color: var(--fg-2); font-size: var(--t-small); max-width: 48ch; text-wrap: pretty; }
.q-inputs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); column-gap: var(--gap); padding-top: clamp(40px, 5vw, 72px); }
.inputs { border-top: 1px solid var(--rule-2); }
.inputs li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-small); color: var(--fg); }

/* --- Notes (light) ---------------------------------------------------------- */
.notes-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); align-items: start; }
.notes-side { display: flex; flex-direction: column; gap: 16px; }
.side-note { font-size: var(--t-small); color: var(--lfg-2); max-width: 30ch; }
.log { border-top: 1px solid var(--lrule-2); }
.log li { display: grid; grid-template-columns: 80px 96px minmax(0, 1fr); gap: var(--gap); padding: 18px 0 22px; border-bottom: 1px solid var(--lrule); font-size: var(--t-small); line-height: 1.5; color: var(--lfg-2); }
.log-date, .log-kind { font-family: var(--mono); font-size: var(--t-meta); color: var(--lfg-3); padding-top: 3px; letter-spacing: .04em; }
.log-kind { color: var(--accent-l); text-transform: uppercase; }
.log-entry strong { display: block; color: var(--lfg); font-size: var(--t-body); margin-bottom: 4px; font-weight: 500; }
.log-entry { max-width: 64ch; text-wrap: pretty; }

/* --- Contact (dark) --------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(24px, 5vw, 96px); align-items: start; }
.contact-side { display: flex; flex-direction: column; gap: 20px; }
.contact-side h2 { max-width: 18ch; }
.contact-lede { color: var(--fg-2); max-width: 46ch; text-wrap: pretty; }
.channels { border-top: 1px solid var(--rule-2); }
.channels li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--gap); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.ch-label { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.ch-link { font-size: clamp(1.125rem, 0.95rem + 1vw, 1.625rem); font-weight: 500; letter-spacing: -.02em; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 100%; transition: background-size var(--slow) var(--ease), color var(--fast) var(--ease); padding-bottom: 3px; }
.ch-link:hover { color: var(--accent); background-size: 100% 1.5px; }

/* --- Colophon --------------------------------------------------------------- */
.colophon { background: var(--bg); border-top: 1px solid var(--rule); padding-block: 24px 40px; }
.colophon-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--mono); font-size: var(--t-meta); color: var(--fg-3); }

/* --- Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .section-head::before { transform: scaleX(0); transition: transform .9s var(--ease) .1s; }
  .js .section-head.is-in::before { transform: scaleX(1); }
  .js .hero-copy > * { animation: rise .8s var(--ease) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .js .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .js .hero-copy > :nth-child(4) { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* --- Tablet (≤ 1024) --------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .hero-path { justify-self: start; }
  .field { width: 100%; opacity: .55; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .ledger-row details > summary { grid-template-columns: 36px minmax(0, 1fr) 20px; row-gap: 10px; }
  .l-idx { grid-column: 1; grid-row: 1; } .l-title { grid-column: 2; grid-row: 1; } .l-toggle { grid-column: 3; grid-row: 1; }
  .l-org { grid-column: 2; grid-row: 2; } .l-result { grid-column: 2; grid-row: 3; }
  .ledger-body { grid-template-columns: 36px minmax(0, 1fr); }
  .lb:nth-child(1), .lb:nth-child(2), .lb:nth-child(3) { grid-column: 2; }
  .lb-result { grid-column: 2 !important; }
  .chronology, .chapter-grid, .notes-grid, .contact-grid, .q-inputs { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .toolkit { grid-column: 1; }
  .chapter-side { position: static; }
  .strength-list li { grid-template-columns: 44px minmax(0, 1fr); }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Phone (≤ 640) ------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --gap: 16px; }
  .hero { padding-top: 28px; }
  .hero h1 { max-width: none; }
  .meta-line { flex-direction: column; gap: 6px; }
  .field { opacity: .4; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .q-list { grid-template-columns: minmax(0, 1fr); }
  .areas { grid-template-columns: minmax(0, 1fr); }
  .strength-list li { grid-template-columns: 36px minmax(0, 1fr); }
  .chron li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .log li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .log-date, .log-kind { padding-top: 0; }
  .channels li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}