/* ============================================================
   THE AUGMENTED LEAN FIELD GUIDE — Operations Calling edition
   ------------------------------------------------------------
   Standalone. Does NOT load the main site's styles.css — this is
   a clean-room design derived from the cover artwork rather than
   an extension of the existing site.

   Derivation:
   · The cover sets its type in the pale sky, clear of the
     landscape. The hero does the same: type on paper, the art as a
     full-width band beneath, so it never fights text for legibility.
   · The cover is entirely sans-serif. Roboto carries the whole
     system — Medium (500) caps for the hero title as on the cover,
     Black (900) for section display, Regular/Medium for text —
     with Roboto Mono for labels. Only the weights Roboto
     actually ships are used (300/400/500/700/900); 600 and 800
     are not real Roboto weights and would be synthesized.
   · The illustration has no outlines. Nothing here uses a 1px
     border: separation comes from soft washes, elevation, and
     space.
   · Cards are "slabs" — the floating stepping stones, with a
     lit top face and a darker leading edge, staggered the way
     the stones climb.
   · Sections descend through the landscape's own colour story:
     meadow → mist → valley → slate cliff.

   Harmony principles retained: surface-layer thinking, semantic
   spacing intent, no raw hex outside the token block.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Mono:wght@400;500&display=swap');

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

/* ── Tier 1 · palette sampled from the artwork ─────────────── */
/* Re-sampled September 2026 from the final cover art (the
   "FG book cover no text" master). The final art is cooler than
   the draft it replaced: sage-teal fields instead of yellow-green,
   a pale lime glow instead of gold, a bluer navy cliff. */
:root {
  /* Paper — the cover's near-white sky, never pure white */
  --p-paper:      #FCFDFB;
  --p-paper-warm: #F6F9EE;

  /* Meadow — the cultivated left-hand fields and cypresses */
  --p-meadow-050: #F1F7F1;
  --p-meadow-100: #E1EFCF;
  --p-meadow-200: #C6DFAA;
  --p-meadow-400: #8CBA8D;
  --p-meadow-600: #4E8A73;
  --p-meadow-800: #235057;

  /* Mist — the valley air and the river */
  --p-mist-050: #F4F9FC;
  --p-mist-100: #E7F3FA;
  --p-mist-200: #D0E6F4;
  --p-mist-400: #87B2D2;
  --p-mist-600: #4A7597;
  --p-mist-800: #274E6E;

  /* Slate — the industrial cliff face */
  --p-slate-600: #36506B;
  --p-slate-700: #2E465E;
  --p-slate-800: #243A4F;
  --p-slate-900: #1C2A3B;

  /* Horizon — the pale lime light at the vanishing point */
  --p-horizon-100: #F8FAE6;
  --p-horizon-300: #E4EEC0;
  --p-horizon-500: #BCD68F;
  --p-horizon-ink: #4F6420;

  /* Stone — the slab faces */
  --p-stone-top:  #F1F7E4;
  --p-stone-edge: #214A62;
}

/* ── Tier 2 · semantic ─────────────────────────────────────── */
:root {
  --c-canvas:      var(--p-paper);
  --c-canvas-warm: var(--p-paper-warm);
  --c-ink:         var(--p-slate-900);
  --c-ink-soft:    #475A6C;
  --c-ink-faint:   #74879A;
  --c-accent:      var(--p-mist-800);
  --c-accent-warm: var(--p-meadow-800);
  --c-on-dark:     #EDF3F7;
  --c-on-dark-soft:#A9BCCB;

  /* Spacing — intent-named */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.375rem;
  --s-4: 2.125rem;
  --s-5: 3.25rem;
  --s-6: 5rem;
  --s-section: clamp(3rem, 6vw, 5.5rem);

  --gutter: clamp(1.4rem, 5.5vw, 5rem);
  --wide: 1280px;
  --measure: 62ch;

  --lift-1: 0 2px 8px rgba(28,42,59,.05), 0 12px 32px rgba(28,42,59,.06);
  --lift-2: 0 4px 14px rgba(28,42,59,.07), 0 28px 64px rgba(28,42,59,.10);
}

/* ── Base ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--p-meadow-200); color: var(--p-meadow-800); }

:focus-visible { outline: 2.5px solid var(--c-accent); outline-offset: 4px; border-radius: 2px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 54rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-accent); color: #fff;
  padding: var(--s-2) var(--s-3); font-weight: 500; font-size: .9rem;
}
.skip:focus { left: 0; }

/* ── Type scale ────────────────────────────────────────────── */
.display {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.9rem, 9.2vw, 7.6rem);
  line-height: .93;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h2 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.95rem, 4.6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.h3 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.32rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
}

.lede {
  font-size: clamp(1.14rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  font-weight: 300;
  color: var(--c-ink-soft);
  max-width: 44ch;
  text-wrap: pretty;
}

.body { color: var(--c-ink-soft); max-width: var(--measure); text-wrap: pretty; }
.body + .body { margin-top: var(--s-3); }
.body strong { color: var(--c-ink); font-weight: 500; }

.tag {
  font-family: 'Roboto Mono', monospace;
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--c-accent-warm);
  display: block;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Roboto', sans-serif;
  font-size: .95rem; font-weight: 500;
  padding: 1.02rem 1.85rem;
  border: 0; border-radius: 2px; cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background-color .2s, color .2s;
}
.btn svg { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.btn:hover svg { transform: translateX(3px); }

.btn-solid { background: var(--p-slate-900); color: var(--c-on-dark); box-shadow: var(--lift-1); }
.btn-solid:hover { background: var(--p-mist-800); box-shadow: var(--lift-2); transform: translateY(-2px); }

.btn-quiet { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px rgba(39,78,110,.28); }
.btn-quiet:hover { background: rgba(39,78,110,.06); box-shadow: inset 0 0 0 1.5px rgba(39,78,110,.5); }

.btn-onDark { background: rgba(255,255,255,.1); color: var(--c-on-dark); box-shadow: inset 0 0 0 1.5px rgba(237,243,247,.25); }
.btn-onDark:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }

.btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* ── Nav — borderless, floats on paper ─────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,253,251,.82);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  transition: box-shadow .25s;
}
.nav[data-stuck="true"] { box-shadow: 0 1px 0 rgba(39,78,110,.1), 0 6px 24px rgba(28,42,59,.05); }

.nav-in {
  max-width: var(--wide); margin-inline: auto;
  padding: var(--s-2) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}

.brand {
  font-family: 'Roboto', sans-serif;
  font-weight: 900; font-size: .96rem;
  letter-spacing: -.01em; text-transform: uppercase;
  display: flex; align-items: center;
}
/* margin, not flex gap — a gap would also separate the wordmark's
   two halves, which are sibling nodes */
.brand svg { width: 19px; height: 19px; flex: none; margin-right: .52rem; }
.brand i { font-style: normal; color: var(--c-accent-warm); }

.nav ul { display: flex; gap: clamp(.9rem, 2.4vw, 2.1rem); list-style: none; flex-wrap: wrap; }
.nav ul a {
  font-size: .9rem; font-weight: 500; color: var(--c-ink-soft);
  padding-block: .3rem; position: relative;
}
.nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--c-accent-warm); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.nav ul a:hover { color: var(--c-ink); }
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav ul a[aria-current="page"] { color: var(--c-ink); }

/* ── Hero — type on paper, artwork as a full-width band beneath ── */
.hero { background: var(--c-canvas); position: relative; overflow: hidden; }

/* Title set as on the cover: Roboto Medium caps, square tracking,
   two lines exactly as the cover breaks them */
.hero-type .display {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
  font-size: clamp(1.5rem, 8vw, 6.4rem);
}
.hero-type .display span { white-space: nowrap; }

/* The final art is portrait (2:3), so the band is taller than the
   old landscape band and positioned on the valley: towers, stacks
   and the climbing stones all stay in frame. */
.hero-band {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  overflow: hidden;
}
.hero-band img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 57%;
}
/* feather the top edge so the art rises out of the paper */
.hero-band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 30%;
  background: linear-gradient(to bottom, var(--c-canvas) 0%, rgba(252,253,251,.55) 45%, transparent 100%);
  z-index: 1; pointer-events: none;
}

/* the cover's light beam, as a faint wedge behind the title */
.hero::before {
  content: "";
  position: absolute; top: -12%; left: 50%; translate: -50% 0;
  width: min(70rem, 120vw); aspect-ratio: 1 / 1.05;
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 0deg 166deg,
    rgba(228,238,192,.30) 172deg,
    rgba(188,214,143,.16) 180deg,
    rgba(228,238,192,.30) 188deg,
    transparent 194deg 360deg);
  filter: blur(6px);
  pointer-events: none;
}

.hero-type { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.75rem, 3.5vw, 2.75rem); }

.hero-type .tag { margin-bottom: var(--s-3); }

.hero-type .display { margin-bottom: var(--s-3); }
.hero-type .display span { display: block; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  margin-top: var(--s-4);
  font-family: 'Roboto Mono', monospace;
  font-size: .73rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* ── Sections — washes, never flat blocks ──────────────────── */
.sec { padding-block: var(--s-section); position: relative; }
.sec-tight { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }

.wash-meadow {
  background:
    radial-gradient(120% 90% at 8% 0%, var(--p-meadow-050) 0%, transparent 62%),
    radial-gradient(90% 70% at 96% 100%, var(--p-mist-050) 0%, transparent 60%),
    var(--c-canvas);
}
.wash-mist {
  background:
    radial-gradient(110% 80% at 88% 4%, var(--p-mist-100) 0%, transparent 64%),
    radial-gradient(90% 70% at 0% 96%, var(--p-meadow-050) 0%, transparent 58%),
    var(--p-mist-050);
}
.wash-warm {
  background:
    radial-gradient(100% 80% at 50% 0%, var(--p-horizon-100) 0%, transparent 68%),
    var(--c-canvas-warm);
}

.sec-dark {
  background:
    radial-gradient(90% 70% at 82% 0%, var(--p-slate-700) 0%, transparent 62%),
    linear-gradient(to bottom, var(--p-slate-800), var(--p-slate-900));
  color: var(--c-on-dark);
}
.sec-dark .body, .sec-dark p { color: var(--c-on-dark-soft); }
.sec-dark .tag { color: var(--p-horizon-300); }
.sec-dark .body strong { color: #fff; }

/* ── Offset editorial split ────────────────────────────────── */
.split { display: grid; gap: clamp(2.2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .split-lead { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .split-art  { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; }
  .split-offset > :last-child { padding-top: clamp(1.25rem, 3vw, 3rem); }
}

.head { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.head .tag { margin-bottom: var(--s-2); }
.head .h2 { margin-bottom: var(--s-3); }

/* ── Slabs — the stepping stones ───────────────────────────── */
.slabs { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
@media (min-width: 54rem) { .slabs-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .slabs-2 { grid-template-columns: repeat(2, 1fr); } }

.slab {
  position: relative;
  background: linear-gradient(168deg, #FFFFFF 0%, var(--p-stone-top) 118%);
  border-radius: 3px;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  box-shadow: var(--lift-1);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s;
}
/* the lit leading edge of the stone */
.slab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--p-stone-edge), var(--p-meadow-600) 78%, var(--p-horizon-500));
  opacity: .85;
}
.slab:hover { transform: translateY(-5px); box-shadow: var(--lift-2); }

.slab .tag { margin-bottom: var(--s-1); color: var(--c-accent); }
.slab .h3 { margin-bottom: .55rem; }
.slab p { font-size: .955rem; color: var(--c-ink-soft); }

/* climb the stones, as in the artwork */
@media (min-width: 54rem) {
  .slabs-climb > :nth-child(2) { transform: translateY(1.7rem); }
  .slabs-climb > :nth-child(3) { transform: translateY(3.4rem); }
  .slabs-climb > :nth-child(2):hover { transform: translateY(calc(1.7rem - 5px)); }
  .slabs-climb > :nth-child(3):hover { transform: translateY(calc(3.4rem - 5px)); }
}

/* ── Pillars — numbered, borderless ────────────────────────── */
.pillars { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); counter-reset: p; }
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); } }

.pillar { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.pillar::before {
  counter-increment: p; content: counter(p, decimal-leading-zero);
  font-family: 'Roboto', sans-serif; font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: .9;
  background: linear-gradient(140deg, var(--p-meadow-600), var(--p-mist-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pillar .h3 { margin-bottom: .4rem; }
.pillar p { font-size: .955rem; color: var(--c-ink-soft); }

/* ── The two conditions — deliberately NOT a sixth pillar ──── */
.conditions {
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  padding-top: clamp(1.4rem, 2.5vw, 2rem);
  position: relative;
}
.conditions::before {
  content: ""; position: absolute; top: 0; left: 0; width: clamp(5rem, 22%, 11rem); height: 3px;
  background: linear-gradient(90deg, var(--p-meadow-600), var(--p-mist-600));
}
.conditions .tag { margin-bottom: var(--s-3); color: var(--c-accent); }
.conditions-grid { display: grid; gap: clamp(1.2rem, 3vw, 2.6rem); }
@media (min-width: 52rem) { .conditions-grid { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); } }
.conditions-grid p { font-size: .955rem; color: var(--c-ink-soft); }
.conditions-grid strong { color: var(--c-ink); font-weight: 700; }

/* ── Statement ─────────────────────────────────────────────── */
.statement {
  font-family: 'Roboto', sans-serif; font-weight: 900;
  font-size: clamp(1.7rem, 4.6vw, 3.4rem); line-height: 1.04;
  letter-spacing: -.028em; max-width: 21ch; text-wrap: balance;
}
.statement em {
  font-style: normal;
  background: linear-gradient(140deg, var(--p-meadow-600), var(--p-mist-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Check list (dark section) ─────────────────────────────── */
.checks { list-style: none; display: grid; gap: .1rem; }
.checks li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  padding-block: var(--s-3);
  box-shadow: inset 0 -1px 0 rgba(237,243,247,.12);
  color: var(--c-on-dark-soft);
}
.checks li:last-child { box-shadow: none; }
.checks span {
  font-family: 'Roboto Mono', monospace; font-size: .76rem;
  color: var(--p-horizon-300); padding-top: .22rem;
}

/* ── Cover ─────────────────────────────────────────────────── */
.cover {
  width: 100%; max-width: 330px; height: auto;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(28,42,59,.10), 0 30px 70px rgba(28,42,59,.20);
  rotate: -1.4deg;
  transition: rotate .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.cover:hover { rotate: 0deg; box-shadow: 0 4px 14px rgba(28,42,59,.12), 0 40px 90px rgba(28,42,59,.24); }

/* ── Quote ─────────────────────────────────────────────────── */
.quote { max-width: 40rem; }
.quote p {
  font-family: 'Roboto', sans-serif; font-weight: 500;
  font-size: clamp(1.18rem, 2.3vw, 1.65rem); line-height: 1.26;
  letter-spacing: -.018em; color: var(--c-ink);
}
.quote footer {
  margin-top: var(--s-3);
  font-family: 'Roboto Mono', monospace; font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-faint);
}

/* ── Footer ────────────────────────────────────────────────── */
.foot { background: var(--p-slate-900); color: var(--c-on-dark-soft); padding-block: var(--s-5) var(--s-4); }
.foot a { color: var(--c-on-dark-soft); transition: color .18s; }
.foot a:hover { color: #fff; }
.foot-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(12rem,1fr)); }
.foot h4 {
  font-family: 'Roboto Mono', monospace; font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--p-horizon-300);
  margin-bottom: var(--s-2);
}
.foot ul { list-style: none; display: grid; gap: .5rem; font-size: .92rem; }
.foot-base {
  margin-top: var(--s-5); padding-top: var(--s-3);
  box-shadow: inset 0 1px 0 rgba(237,243,247,.14);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  justify-content: space-between;
  font-size: .8rem; color: var(--c-ink-faint);
}

/* ── Reveal on scroll ──────────────────────────────────────────
   Content is visible by default. The hidden state applies ONLY
   once the inline head script has set .js on <html>, so if the
   script fails, is blocked, or the browser is old, every section
   still renders. Never gate content on JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  }
  .js [data-reveal].in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .slabs-climb > :nth-child(2), .slabs-climb > :nth-child(3) { transform: none; }
  .cover { rotate: 0deg; }
}

/* ── Narrow ────────────────────────────────────────────────── */
@media (max-width: 46rem) {
  .btns .btn { width: 100%; justify-content: center; }
  .hero-band { aspect-ratio: 4 / 5; max-height: 72vh; }
  .hero-meta { gap: var(--s-1); flex-direction: column; }
  .nav-in { padding-block: .65rem; }
}

/* ============================================================
   COMPONENTS FOR THE REST OF THE EVENT SITE
   ============================================================ */

/* ── Sub-page header ───────────────────────────────────────── */
.page-head { padding-block: clamp(2rem, 4.5vw, 3.5rem) 0; }
.page-head .tag { margin-bottom: var(--s-2); }
.page-head h1 {
  font-family: 'Roboto', sans-serif; font-weight: 900;
  font-size: clamp(2.2rem, 5.6vw, 4.2rem); line-height: 1.02;
  letter-spacing: -0.03em; text-wrap: balance;
  margin-bottom: var(--s-3);
}

/* ── Gate form ─────────────────────────────────────────────── */
.gate {
  background: linear-gradient(168deg, #FFFFFF 0%, var(--p-stone-top) 150%);
  border-radius: 4px;
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  box-shadow: var(--lift-2);
  position: relative;
}
.gate::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--p-stone-edge), var(--p-meadow-600) 78%, var(--p-horizon-500));
  opacity: .85;
}
.gate .h3 { margin-bottom: var(--s-1); }
.gate > p { font-size: .93rem; color: var(--c-ink-soft); margin-bottom: var(--s-4); }

.field { display: flex; flex-direction: column; gap: .38rem; margin-bottom: var(--s-3); }
.field label {
  font-family: 'Roboto Mono', monospace;
  font-size: .68rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--c-ink-faint);
}
.field label .opt { text-transform: none; letter-spacing: 0; }
.field input {
  font-family: 'Roboto', sans-serif; font-size: 1rem;
  color: var(--c-ink); background: #fff;
  border: 0; box-shadow: inset 0 0 0 1.5px rgba(39,78,110,.22);
  border-radius: 3px; padding: .85rem .95rem; width: 100%;
  transition: box-shadow .18s;
}
.field input::placeholder { color: #A9B4BE; }
.field input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-accent), 0 0 0 4px rgba(39,78,110,.12);
}
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #C0392B; }

.consent {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .88rem; color: var(--c-ink-soft); margin-bottom: var(--s-3);
}
.consent input { margin-top: .22rem; flex: none; width: 1rem; height: 1rem; accent-color: var(--c-accent); }

.fineprint { font-size: .78rem; color: var(--c-ink-faint); margin-top: var(--s-3); }

.formnote {
  margin-top: var(--s-3); font-size: .88rem;
  border-radius: 3px; padding: .75rem 1rem;
}
.formnote[hidden] { display: none; }
.formnote[data-state="error"] { background: #FDF0EE; color: #9E2B1E; box-shadow: inset 0 0 0 1px #F0C8C2; }
.formnote[data-state="ok"]    { background: var(--p-meadow-050); color: var(--p-meadow-800); box-shadow: inset 0 0 0 1px var(--p-meadow-200); }

/* ── Promise list ──────────────────────────────────────────── */
.promise { list-style: none; display: grid; gap: var(--s-2); margin-top: var(--s-3); max-width: var(--measure); }
.promise li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; font-size: .945rem; color: var(--c-ink-soft); }
.promise li::before {
  content: ""; width: 7px; height: 7px; margin-top: .55rem; border-radius: 1px;
  background: linear-gradient(140deg, var(--p-meadow-600), var(--p-mist-600));
}

/* ── Chapter outline ───────────────────────────────────────── */
.part { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }
.part:first-of-type { margin-top: var(--s-4); }

.part-head {
  display: flex; align-items: baseline; gap: var(--s-2);
  flex-wrap: wrap; padding-bottom: var(--s-2); position: relative;
  margin-bottom: var(--s-2);
}
.part-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--p-meadow-600), var(--p-mist-600) 40%, rgba(74,117,151,.12));
}

.chapters { list-style: none; }
.chapter {
  display: grid; grid-template-columns: 2.9rem 1fr; gap: var(--s-2);
  padding-block: var(--s-3);
  box-shadow: inset 0 -1px 0 rgba(39,78,110,.11);
  align-items: start;
}
.chapter:last-child { box-shadow: none; }
.chapter-n {
  font-family: 'Roboto Mono', monospace; font-size: .8rem;
  color: var(--c-ink-faint); padding-top: .2rem;
}
.chapter .h3 { margin-bottom: .3rem; }
.chapter p { font-size: .93rem; color: var(--c-ink-soft); max-width: var(--measure); }
.chapter a { color: var(--c-accent); font-weight: 500; box-shadow: inset 0 -1px 0 rgba(39,78,110,.35); }
.chapter a:hover { box-shadow: inset 0 -2px 0 var(--c-accent); }

/* ── Link list ─────────────────────────────────────────────── */
.links { list-style: none; display: grid; gap: var(--s-2); max-width: 54rem; }
.links a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-3);
  background: linear-gradient(168deg, #FFFFFF 0%, var(--p-stone-top) 190%);
  border-radius: 3px; box-shadow: var(--lift-1);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.links a:hover { transform: translateX(4px); box-shadow: var(--lift-2); }
.links b { display: block; font-weight: 700; font-size: 1rem; margin-bottom: .1rem; }
.links em { font-style: normal; font-size: .9rem; color: var(--c-ink-soft); }
.links .to {
  flex: none; font-family: 'Roboto Mono', monospace; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--c-ink-faint);
}

/* ── Soon badge ────────────────────────────────────────────── */
.soon {
  display: inline-block; font-family: 'Roboto Mono', monospace;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 2px;
  background: var(--p-horizon-100); color: var(--p-horizon-ink);
  box-shadow: inset 0 0 0 1px var(--p-horizon-300);
  margin-bottom: var(--s-1);
}

.exchange {
  display: grid; gap: var(--s-3) clamp(1.5rem, 4vw, 3.5rem); margin-top: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  padding-top: var(--s-4); box-shadow: 0 -1px 0 var(--p-mist-200);
}
@media (min-width: 54rem) { .exchange { grid-template-columns: 1fr 2fr; } }
.exchange .h3 { margin-top: var(--s-1); }
.exchange .body + .body, .exchange .exchange-list + .body { margin-top: var(--s-3); }
.exchange-list { margin: var(--s-3) 0 0 1.2rem; color: var(--c-ink-soft); }
.exchange-list li { margin-bottom: .6rem; line-height: 1.6; }
.exchange-list li::marker { color: var(--p-meadow-600); }
.exchange-list strong { color: var(--c-ink); }

/* ── Rules list (agent rules, etc.) ────────────────────────── */
.callout {
  position: relative; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background: linear-gradient(100deg, var(--p-meadow-050), transparent 70%);
  border-radius: 3px; max-width: 62rem;
}
.callout::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--p-meadow-600), var(--p-mist-600));
  border-radius: 3px 0 0 3px;
}
.callout p { color: var(--c-ink-soft); max-width: none; }
.callout strong { color: var(--c-ink); font-weight: 700; }

/* ── Chapter reading view ──────────────────────────────────── */
.read { max-width: 43rem; margin-inline: auto; }

.read-head { padding-block: clamp(2rem, 4.5vw, 3.25rem) var(--s-3); position: relative; }
.read-head::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: clamp(5rem, 24%, 10rem); height: 3px;
  background: linear-gradient(90deg, var(--p-meadow-600), var(--p-mist-600));
}
.read-head h1 {
  font-family: 'Roboto', sans-serif; font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.04;
  letter-spacing: -0.03em; margin-block: var(--s-3) var(--s-3);
  text-wrap: balance;
}
.read-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  font-family: 'Roboto Mono', monospace; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-faint);
}

.prose { font-size: 1.075rem; line-height: 1.72; color: #38454F; padding-top: var(--s-5); }
.prose > p { margin-bottom: 1.3rem; }
.prose h2 {
  font-family: 'Roboto', sans-serif; font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.1;
  letter-spacing: -0.026em; color: var(--c-ink);
  margin-block: var(--s-6) var(--s-3); padding-top: var(--s-3);
  position: relative;
}
.prose h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3.5rem; height: 3px;
  background: linear-gradient(90deg, var(--p-meadow-600), var(--p-mist-600));
}
.prose h3 {
  font-family: 'Roboto', sans-serif; font-weight: 700;
  font-size: clamp(1.12rem, 2.2vw, 1.35rem); line-height: 1.24;
  color: var(--c-ink); margin-block: var(--s-4) var(--s-2);
}
.prose h4 {
  font-family: 'Roboto Mono', monospace; font-weight: 500;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent-warm); margin-block: var(--s-4) var(--s-2);
}
.prose strong { color: var(--c-ink); font-weight: 700; }
.prose ol, .prose ul { margin: 0 0 1.3rem 1.3rem; }
.prose li { margin-bottom: .55rem; }

.read-lede {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.5;
  font-weight: 300; color: var(--c-ink-soft); margin-bottom: var(--s-5);
}

.qblock {
  background: linear-gradient(168deg, #FFFFFF 0%, var(--p-stone-top) 210%);
  border-radius: 4px; padding: clamp(1.3rem, 2.6vw, 2rem);
  box-shadow: var(--lift-1); margin-bottom: var(--s-3); position: relative;
}
.qblock::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--p-stone-edge), var(--p-meadow-600) 78%, var(--p-horizon-500));
  opacity: .8;
}
.qblock h3 { margin-top: 0; margin-bottom: var(--s-2); }
.qblock dl { margin: 0; }
.qblock dt {
  font-family: 'Roboto Mono', monospace; font-size: .67rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  margin-top: var(--s-2); margin-bottom: .2rem;
}
.qblock dt.lean { color: var(--p-meadow-800); }
.qblock dt.not  { color: #9E2B1E; }
.qblock dt.fix  { color: var(--c-accent); }
.qblock dd { margin: 0; font-size: .97rem; color: var(--c-ink-soft); }


/* Chapter cover + contents (mirrors page 1 of the PDF edition) */
.ch-cover {
  background: linear-gradient(180deg, var(--p-horizon-100) 0%, var(--p-paper) 55%, var(--p-mist-050) 100%);
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
}
.ch-cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg, var(--p-slate-800), var(--p-meadow-600) 70%, var(--p-horizon-500));
}
.ch-cover .wrap { max-width: 62rem; }
.ch-cover-bar {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  font-family: 'Roboto Mono', monospace; font-size: .7rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--c-ink-faint); padding-bottom: var(--s-2);
  box-shadow: 0 1px 0 var(--p-mist-200);
}
.ch-cover-bar span:last-child { color: var(--c-accent-warm); }
.ch-cover-grid {
  display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  padding-block: clamp(1.75rem, 4vw, 3rem);
}
.ch-cover-art {
  width: 100%; max-width: clamp(13rem, 60vw, 24rem); height: auto; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--p-mist-200), var(--lift-2);
}
.ch-cover-text h1 {
  font-family: 'Roboto', sans-serif; font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.04; letter-spacing: -0.03em;
  color: var(--c-ink); margin-block: var(--s-2) var(--s-3); text-wrap: balance;
}
.ch-cover-rule {
  display: block; width: min(14rem, 60%); height: 5px; border-radius: 1px;
  background: linear-gradient(90deg, var(--p-meadow-600), var(--p-mist-600));
}
.ch-cover-author {
  font-family: 'Roboto Mono', monospace; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-ink-soft); margin-block: var(--s-3) var(--s-3);
}
.ch-cover-sub { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.45; font-weight: 300; color: var(--c-ink-soft); max-width: 30rem; }
.ch-toc ol { list-style: none; margin: var(--s-1) 0 0; padding: 0; }
.ch-toc li { box-shadow: 0 1px 0 var(--p-mist-200); }
.ch-toc a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding-block: .8rem; text-decoration: none;
  font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.1rem); color: var(--c-ink);
}
.ch-toc li.sub a { padding-left: clamp(1rem, 3vw, 2.75rem); font-weight: 400; font-size: 1rem; color: var(--c-ink-soft); }
.ch-toc a b { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: .95rem; color: var(--p-meadow-600); }
.ch-toc a:hover span { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.read h2[id], .read h3[id], .read#chapter { scroll-margin-top: 5.5rem; }

.prose ul li::marker { color: var(--p-meadow-600); }
.box-pattern ol li::marker { color: var(--p-mist-800); font-weight: 700; }
.qr-block {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(.9rem, 2vw, 1.4rem) clamp(1rem, 3vw, 2.4rem);
  margin-block: calc(-1 * var(--s-4) + var(--s-2)) var(--s-4);
  background: linear-gradient(100deg, var(--p-horizon-100), var(--p-paper));
  box-shadow: inset 0 0 0 1px var(--p-horizon-300), inset 0 -6px 0 var(--p-stone-edge);
}
.qr-block img { width: clamp(5rem, 14vw, 7.5rem); height: auto; background: #fff; padding: .6rem; }
.qr-block strong { display: block; font-size: 1.1rem; color: var(--c-ink); margin-block: .35rem; }
.qr-kicker, .qr-status { display: block; font-family: 'Roboto Mono', monospace; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.qr-kicker { color: var(--p-mist-800); }
.qr-status { color: var(--c-ink-faint); }
.read-end .body a { color: var(--c-accent); text-underline-offset: 2px; }
.read-copy { font-family: 'Roboto Mono', monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-faint); margin-top: var(--s-3); }

/* Figures */
.fig { margin-block: var(--s-4); }
.fig img {
  display: block; width: 100%; height: auto; background: #fff;
  padding: clamp(.4rem, 1.2vw, .9rem); border-radius: 3px;
  box-shadow: 0 1px 0 var(--p-mist-200);
}
.fig figcaption { font-size: .92rem; color: var(--c-ink-soft); padding-top: var(--s-2); line-height: 1.5; }
.fig figcaption small { display: block; font-size: .82rem; color: var(--c-ink-faint); margin-top: .3rem; }

/* Sidebars and pattern boxes */
.box {
  position: relative; margin-block: var(--s-4);
  padding: clamp(1.3rem, 3vw, 2.1rem) clamp(1.2rem, 3vw, 2.1rem) clamp(1.3rem, 3vw, 2.1rem) clamp(1.5rem, 3.4vw, 2.4rem);
  background: linear-gradient(100deg, var(--p-mist-050), var(--p-paper) 80%);
  border-radius: 4px; box-shadow: inset 0 0 0 1px var(--p-mist-200);
}
.box::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--p-meadow-600), var(--p-mist-600));
  border-radius: 4px 0 0 4px;
}
.box-pattern { background: linear-gradient(100deg, var(--p-meadow-050), var(--p-paper) 80%); box-shadow: inset 0 0 0 1px var(--p-meadow-200); }
.box-look { background: var(--p-meadow-100); box-shadow: none; border-radius: 0; }
.box-look::before { width: 6px; background: var(--p-meadow-600); border-radius: 0; }
.box-look .box-source { color: var(--p-horizon-ink); }
.box-chart { margin-block: var(--s-2) var(--s-3); }
.box-chart img { display: block; width: 100%; height: auto; }
.box-pattern { background: linear-gradient(170deg, var(--p-paper) 0%, var(--p-horizon-100) 100%); box-shadow: inset 0 0 0 1px var(--p-horizon-300); border-radius: 0; }
.box-pattern::before { display: none; }
.box-pattern .box-label, .box-pattern h4 { color: var(--p-mist-800); }

.signals { width: 100%; border-collapse: collapse; margin-block: var(--s-1) var(--s-3); font-size: .93rem; line-height: 1.45; }
.signals thead th {
  font-family: 'Roboto Mono', monospace; font-weight: 500; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; text-align: left; padding: .8rem .9rem;
}
.signals thead th:nth-child(1) { background: var(--p-slate-900); }
.signals thead th:nth-child(2) { background: var(--p-meadow-800); }
.signals thead th:nth-child(3) { background: var(--p-slate-600); }
.signals tbody th, .signals td { text-align: left; vertical-align: top; padding: .9rem; box-shadow: 0 1px 0 var(--p-mist-200); }
.signals tbody th { font-weight: 400; color: var(--c-ink); }
.signals td { color: var(--c-ink-soft); }
.signals tbody tr:nth-child(odd) { background: rgba(241,247,241,.7); }
@media (max-width: 40rem) {
  .signals thead { display: none; }
  .signals, .signals tbody, .signals tr, .signals th, .signals td { display: block; width: 100%; }
  .signals tbody tr { margin-bottom: var(--s-2); box-shadow: inset 3px 0 0 var(--p-meadow-600); }
  .signals tbody th, .signals td { box-shadow: none; padding: .45rem .9rem; }
  .signals td::before {
    content: attr(data-label); display: block; margin-bottom: .15rem;
    font-family: 'Roboto Mono', monospace; font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  }
  .signals td:nth-of-type(1)::before { color: var(--p-meadow-800); }
  .signals td:nth-of-type(2)::before { color: var(--p-slate-600); }
}
.box-label {
  display: block; font-family: 'Roboto Mono', monospace; font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-warm);
}
.box > h3 { margin-top: var(--s-1); }
.box h4 { margin-block: var(--s-3) var(--s-1); }
.box p, .box li { font-size: 1rem; }
.box p { margin-bottom: 1rem; }
.box .qblock { margin-bottom: var(--s-2); }
.box-source { font-size: .88rem !important; color: var(--c-ink-faint); }
.box a, .prose a { color: var(--c-accent); text-underline-offset: 2px; }

.read-end {
  margin-top: var(--s-6); padding-top: var(--s-4); position: relative;
}
.read-end::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--p-meadow-600), var(--p-mist-600) 40%, rgba(74,117,151,.1));
}

/* ── Print (chapter) ───────────────────────────────────────── */
@media print {
  .nav, .foot, .btns, .gate, .skip, .read-end, .ch-cover { display: none !important; }
  .fig, .signals tr { page-break-inside: avoid; }
  body { background: #fff; color: #000; }
  .prose { font-size: 11pt; line-height: 1.5; color: #000; padding-top: 0; }
  .prose h2, .prose h3, .prose h4 { page-break-after: avoid; }
  .qblock { page-break-inside: avoid; box-shadow: none; border: 1px solid #bbb; background: #fff; }
  .qblock::after { display: none; }
  .box { box-shadow: none; border: 1px solid #bbb; background: #fff; page-break-inside: avoid; }
  .box::before { display: none; }
  .sec { padding-block: 1rem; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}