/* ───────────────────────────────────────────────────────────────────────────
   Slowly — landing styles
   Aesthetic: notebook editorial. Slow Lane tokens, Dusk palette by default.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Tokens (Slow Lane / Dusk) ─────────────────────────────────────────── */
:root {
  /* Surfaces — Dusk */
  --bg:           #111110;
  --bg-deep:      #0C0C0B;
  --surface:      #1A1918;
  --surface-alt:  #232120;
  --paper:        #FAF5EB;   /* the light-mode bg, used for the letter pull-quote */

  /* Text */
  --text:         #F5EDE0;
  --text-muted:   rgba(245,237,224,0.66);
  --text-faint:   rgba(245,237,224,0.42);
  --text-hair:    rgba(245,237,224,0.18);
  --ink:          #1C1611;   /* used on cream surfaces */

  /* Accent palette — unchanged across modes */
  --sage:         #54BA7C;
  --sage-deep:    #3A9B5C;
  --clay:         #DB7255;
  --honey:        #F0A831;
  --sky:          #48ADCA;
  --plum:         #8B72C8;
  /* ember is destructive-only — intentionally not exposed */

  /* Tints */
  --sage-08:      rgba( 84,186,124,0.08);
  --sage-14:      rgba( 84,186,124,0.14);
  --sage-20:      rgba( 84,186,124,0.20);
  --sage-30:      rgba( 84,186,124,0.30);
  --honey-14:     rgba(240,168, 49,0.14);
  --sky-14:       rgba( 72,173,202,0.14);
  --clay-14:      rgba(219,114, 85,0.14);
  --plum-14:      rgba(139,114,200,0.14);

  /* Hairlines */
  --hair:         rgba(245,237,224,0.10);
  --hair-strong:  rgba(245,237,224,0.18);
  --hair-faint:   rgba(245,237,224,0.06);

  /* Editorial wordmark gold */
  --gold:         #E8C575;
  --gold-soft:    #D4B26A;
  --lime:         #C8E85A;

  /* Spacing (4px grid; matches SPACE in tokens.ts) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 80px;
  --s-11: 120px;
  --s-12: 160px;

  /* Radii */
  --r-chip:   8px;
  --r-ctl:   12px;
  --r-card:  20px;
  --r-hero:  28px;
  --r-pill:  999px;

  /* Motion */
  --fast: 140ms;
  --base: 220ms;
  --slow: 360ms;
  --ambient-1: 2400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --measure: 60ch;
  --measure-narrow: 44ch;
  --max-w: 1280px;
  --gutter-x: clamp(20px, 5vw, 80px);

  /* Type */
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --display: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shadows */
  --shadow-card: 0 6px 24px rgba(0,0,0,0.35);
  --shadow-soft: 0 2px 12px rgba(0,0,0,0.30);
  --shadow-glow: 0 4px 22px rgba(84,186,124,0.35);
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  /* Subtle warm paper noise — quiet, never busy */
  background-image:
    radial-gradient(1200px 800px at 80% -10%, rgba(232,197,117,0.04), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba( 84,186,124,0.03), transparent 60%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
hr { border: 0; height: 1px; background: var(--hair); margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--fast) var(--ease-out), opacity var(--fast) var(--ease-out);
}
a:hover { color: var(--sage); }

::selection { background: var(--sage-30); color: var(--text); }

/* Focus — visible but quiet */
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: var(--r-chip);
}

/* Numerals — used wherever we touch numbers */
.num {
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  letter-spacing: -0.01em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--sage); color: var(--bg);
  padding: 10px 16px; border-radius: var(--r-chip);
  font-weight: 600; z-index: 100;
}
.skip-link:focus { top: 16px; }

/* ─── Layout primitives ─────────────────────────────────────────────────── */
.section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--gutter-x);
  position: relative;
}

.prose {
  max-width: var(--measure);
  font-family: var(--serif);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.62;
  color: var(--text);
}
.prose p + p { margin-top: 1.25em; }
.prose--narrow { max-width: var(--measure-narrow); }
.prose__quiet { color: var(--text-muted); font-size: 0.92em; }
.prose__lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-7) 0;
  color: var(--text);
}

/* Drop cap — only on the lede */
.dropcap {
  font-family: var(--display);
  font-style: italic;
  font-size: 2.6em;
  line-height: 0.8;
  float: left;
  padding: 0.12em 0.12em 0 0;
  color: var(--gold);
}

.h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-6) 0;
  color: var(--text);
}

.h2 em, .prose em, .hero__sub em, .letter__body em {
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

/* Eyebrow — section number + label */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--s-8) 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.marg, .marg-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.marg-num { color: var(--gold-soft); }

/* Horizontal hairlines between sections */
.rule {
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--hair);
}
.rule--first { background: var(--hair-strong); }
.rule--bold { background: var(--hair-strong); height: 1px; }
.rule--colo { background: var(--hair-faint); }

/* ─── Header ────────────────────────────────────────────────────────────── */
.page-header {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-7) var(--gutter-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.brand {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.brand__wordmark { display: inline-flex; align-items: baseline; }
.brand__period { color: var(--gold); margin-left: 0.5px; }
.brand__wordmark--sm { font-size: 24px; }

.page-nav {
  display: flex; gap: var(--s-7); align-items: center;
  font-size: 14px; font-weight: 500;
  color: var(--text-muted);
}
.page-nav a { padding: var(--s-2) 0; position: relative; }
.page-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--sage); transform: scaleX(0); transform-origin: left;
  transition: transform var(--base) var(--ease-out);
}
.page-nav a:hover::after { transform: scaleX(1); }
.page-nav .nav-cta {
  color: var(--text);
  padding: var(--s-3) var(--s-5);
  background: var(--sage-14);
  border: 1px solid var(--sage-20);
  border-radius: var(--r-pill);
}
.page-nav .nav-cta::after { display: none; }
.page-nav .nav-cta:hover { background: var(--sage-20); color: var(--text); }

@media (max-width: 640px) {
  .page-header { padding-top: var(--s-5); padding-bottom: var(--s-5); }
  .page-nav { gap: var(--s-5); font-size: 13px; }
  .page-nav a:not(.nav-cta) { display: none; }
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--gutter-x) clamp(80px, 10vw, 140px);
  position: relative;
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--s-8);
  opacity: 0;
  animation: fadeUp var(--slow) var(--ease-out) 0.05s forwards;
}

.hero__line {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(64px, 14vw, 184px);
  line-height: 0.92;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--text);
  /* Optical: pull serif left for hanging quotes */
  text-indent: -0.04em;
}
.hero__don, .hero__shrink { display: block; }
.hero__don   { opacity: 0; animation: heroIn 700ms var(--ease-out) 0.2s forwards; }
.hero__shrink { opacity: 0; animation: heroIn 700ms var(--ease-out) 0.42s forwards;
                padding-left: clamp(0px, 6vw, 80px);
                color: var(--text);
              }
.hero__shrink::after {
  content: '.';
  color: var(--gold);
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__sub {
  font-family: var(--serif);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 56ch;
  margin: clamp(36px, 5vw, 64px) 0 0 0;
  opacity: 0;
  animation: fadeUp var(--slow) var(--ease-out) 0.66s forwards;
}

.hero__cta {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-8);
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp var(--slow) var(--ease-out) 0.86s forwards;
}

.hero__foot {
  margin-top: var(--s-8);
  font-size: 13px;
  color: var(--text-faint);
  display: flex; align-items: center; gap: var(--s-3);
  opacity: 0;
  animation: fadeUp var(--slow) var(--ease-out) 1.06s forwards;
}

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--sage);
  flex: none;
  box-shadow: 0 0 0 4px var(--sage-08);
}
.dot--sage    { background: var(--sage); box-shadow: 0 0 0 4px var(--sage-08); }
.dot--honey   { background: var(--honey); box-shadow: 0 0 0 4px var(--honey-14); }
.dot--sky     { background: var(--sky); box-shadow: 0 0 0 4px var(--sky-14); }
.dot--clay    { background: var(--clay); box-shadow: 0 0 0 4px var(--clay-14); }
.dot--plum    { background: var(--plum); box-shadow: 0 0 0 4px var(--plum-14); }
.dot--blank   { background: transparent; border: 1px solid var(--hair-strong); box-shadow: none; }
.dot--festival{ background: transparent; color: var(--gold); width: auto; height: auto; box-shadow: none; font-size: 13px; line-height: 1; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: var(--s-4) var(--s-7);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--fast) var(--ease-out),
              background var(--base) var(--ease-out),
              border-color var(--base) var(--ease-out),
              box-shadow var(--base) var(--ease-out);
}
.btn--primary {
  background: var(--sage);
  color: #0E1A12;
  box-shadow: 0 4px 22px rgba(84,186,124,0.28);
}
.btn--primary:hover {
  background: var(--sage-deep);
  color: var(--text);
  box-shadow: 0 6px 30px rgba(84,186,124,0.42);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--hair-strong);
}
.btn--ghost:hover {
  border-color: var(--text-muted);
  background: var(--surface);
  color: var(--text);
}

/* ─── §02 Problem ───────────────────────────────────────────────────────── */
#problem .prose__lede::after { content: ''; }

/* ─── §03 Reframe ───────────────────────────────────────────────────────── */
.reframe { max-width: 980px; }

.reframe__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-bottom: var(--s-8);
}
@media (max-width: 760px) {
  .reframe__grid { grid-template-columns: 1fr; gap: var(--s-8); }
}

.reframe__stat {
  display: grid;
  grid-template-areas:
    "n eq pct"
    "n cap cap";
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  column-gap: var(--s-5);
  row-gap: var(--s-2);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair-strong);
}
.reframe__num {
  grid-area: n;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(56px, 8.5vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text);
}
.reframe__num .num { font-size: 1em; }
.reframe__unit {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--s-2);
}
.reframe__eq { grid-area: eq; color: var(--text-faint); font-size: 28px; }
.reframe__pct {
  grid-area: pct;
  font-family: var(--mono);
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.03em;
  color: var(--sage);
}
.reframe__caption {
  grid-area: cap;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--text-muted);
}

.reframe__body {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: var(--text);
  margin: 0;
}
.reframe__body em {
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
}

.reframe__signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text-muted);
  border-left: 2px solid var(--sage);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  max-width: 60ch;
  margin: 0;
}

/* ─── Exhibit shared ───────────────────────────────────────────────────── */
.section--exhibit, .section--engine, .section--comeback { }

.exhibit-row, .engine-row, .anchor-row, .comeback-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.comeback-row { grid-template-columns: 1.15fr 1fr; }
.engine-row   { grid-template-columns: 1fr 1.05fr; }

@media (max-width: 880px) {
  .exhibit-row, .engine-row, .anchor-row, .comeback-row {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
}

.exhibit { margin: 0; position: relative; }
.exhibit__cap {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-5);
}
.exhibit__cap .marg { color: var(--gold-soft); }

/* ─── §04 Three Versions exhibit ───────────────────────────────────────── */
.card-frame {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-hero);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}
.card-frame__header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--hair);
}
.card-frame__title {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.card-frame__meta { font-size: 13px; color: var(--text-muted); }

.versions {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.version {
  padding: var(--s-5);
  border-radius: var(--r-card);
  border: 1px solid var(--hair);
  background: var(--bg-deep);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name time"
    "desc desc";
  align-items: baseline;
  row-gap: var(--s-2);
  transition: border-color var(--base) var(--ease-out), background var(--base) var(--ease-out);
}
.version:hover { border-color: var(--hair-strong); }

.version--rec {
  background: var(--sage-08);
  border-color: var(--sage-30);
  box-shadow: 0 0 0 1px var(--sage-14), 0 8px 28px rgba(84,186,124,0.10);
}
.version__name {
  grid-area: name;
  font-weight: 600; font-size: 17px;
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.version__badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--sage-20);
  color: var(--sage);
  font-weight: 500;
}
.version__time {
  grid-area: time;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
}
.version__unit {
  font-size: 12px;
  color: var(--text-faint);
  margin-left: 3px;
  letter-spacing: 0.04em;
}
.version__desc {
  grid-area: desc;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.45;
}
.version__desc em { color: var(--gold); }

/* ─── §05 Engine trace exhibit ──────────────────────────────────────────── */
.trace {
  background: var(--bg-deep);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: var(--s-6);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.trace__prompt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--hair-faint);
}
.trace__lines {
  display: flex; flex-direction: column; gap: var(--s-2);
  flex: 1;
}
.trace__line {
  opacity: 0;
  transform: translateY(4px);
  color: var(--text-muted);
}
.trace__line.is-on {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}
.trace__line--ok { color: var(--sage); }
.trace__line--ok::before {
  content: '› ';
  color: var(--sage);
}
.trace__caret {
  position: absolute;
  bottom: var(--s-6);
  right: var(--s-6);
  color: var(--sage);
  font-size: 12px;
  line-height: 1;
  animation: blink 1.2s steps(2, end) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ─── §06 Anchor list + Care Calendar ───────────────────────────────────── */
.anchor-list {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0 0;
  display: grid;
  gap: var(--s-4);
}
.anchor-list li {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--text);
  display: flex; align-items: center; gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px dashed var(--hair);
}
.anchor-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.anchor-list em { color: var(--text-muted); font-style: italic; font-family: var(--serif); }

.cal {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-hero);
  padding: var(--s-6);
}
.cal__head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 var(--s-1) var(--s-4);
}
.cal__head span { text-align: center; }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-2);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--hair);
}
.cal__cell {
  aspect-ratio: 1;
  border-radius: var(--r-ctl);
  background: var(--bg-deep);
  position: relative;
  transition: transform var(--base) var(--ease-out);
}
.cal__cell:hover { transform: translateY(-1px); }
.cal__cell::after {
  content: '';
  position: absolute; inset: 18%;
  border-radius: var(--r-ctl);
}
.cal__cell--blank::after { background: transparent; border: 1px dashed var(--hair-strong); }
.cal__cell--kept::after  { background: radial-gradient(circle at 50% 40%, var(--sage) 30%, var(--sage-deep) 100%); box-shadow: 0 0 0 2px var(--sage-08); }
.cal__cell--small::after { background: var(--honey); box-shadow: 0 0 0 2px var(--honey-14); }
.cal__cell--rescue::after{ background: var(--sky); box-shadow: 0 0 0 2px var(--sky-14); }
.cal__cell--festival     { background: var(--surface-alt); }
.cal__cell--festival::after { background: transparent; border: 0; }
.cal__cell--festival {
  color: var(--gold);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.cal__cell--today {
  background: var(--bg-deep);
  border: 1px solid var(--sage);
}
.cal__cell--today::after {
  background: transparent;
  border: 2px dashed var(--sage);
  animation: breathe var(--ambient-1) ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  padding-top: var(--s-5);
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal__legend .dot { width: 8px; height: 8px; box-shadow: none; }

.cal__note {
  margin: var(--s-5) 0 0 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--gold);
  text-align: right;
}

/* ─── §07 Comeback exhibit ──────────────────────────────────────────────── */
.notif {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-card);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-card);
  position: relative;
  max-width: 480px;
}
.notif::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  background: radial-gradient(120% 60% at 50% 0%, rgba(232,197,117,0.10), transparent 60%);
  pointer-events: none;
}
.notif__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-3);
}
.notif__app {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.notif__icon {
  width: 16px; height: 16px;
  background: radial-gradient(circle, var(--sage) 30%, var(--sage-deep) 100%);
  border-radius: 5px;
  display: inline-block;
}
.notif__time { color: var(--text-faint); font-weight: 500; }
.notif__body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
}
.notif__body em { font-family: var(--display); color: var(--gold); }

/* ─── §08 Letter (cream pull-quote) ─────────────────────────────────────── */
.letter { max-width: 880px; }
.letter__intro {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 var(--s-8) 0;
}
.letter__body {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-hero);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 64px);
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.62;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.4);
}
.letter__body::before {
  content: '“';
  position: absolute;
  top: 8px; left: 28px;
  font-family: var(--display);
  font-style: italic;
  font-size: 120px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.6;
}
.letter__body p { margin: 0 0 1em 0; }
.letter__body p:last-child { margin-bottom: 0; }
.letter__body p:first-of-type {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.4em;
  line-height: 1.15;
  margin-bottom: 1.2em;
  color: var(--ink);
}
.letter__body em {
  font-family: var(--display);
  font-style: italic;
  color: #6E5418;
}
.letter__sign {
  border-top: 1px solid rgba(28,22,17,0.15);
  padding-top: var(--s-5);
  margin-top: var(--s-7) !important;
  text-align: right;
  color: rgba(28,22,17,0.7);
}

/* ─── §09 Removed (strike list) ─────────────────────────────────────────── */
.removed { max-width: 1080px; }
.removed__head { margin-bottom: var(--s-8); max-width: 22ch; }

.strikelist {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3) var(--s-9);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: var(--s-7) 0;
}
@media (max-width: 640px) { .strikelist { grid-template-columns: 1fr; } }

.strikelist li {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.15;
  color: var(--text-muted);
}
.strikelist li s {
  text-decoration: none;
  position: relative;
}
.strikelist li s::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%;
  top: 55%;
  height: 2px;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0) rotate(-1.5deg);
  transition: transform 480ms var(--ease-out);
}
.strikelist li.is-on s::after { transform: scaleX(1) rotate(-1.5deg); }

.removed__signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--text);
  max-width: 64ch;
  margin: var(--s-8) 0 0;
  border-left: 2px solid var(--sage);
  padding-left: var(--s-5);
}

/* ─── §10 Principles ────────────────────────────────────────────────────── */
.principles { max-width: 1000px; }
.principles__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-9);
  counter-reset: prin;
}
@media (max-width: 720px) { .principles__list { grid-template-columns: 1fr; } }

.principles__list li {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hair-faint);
  color: var(--text);
}
.principles__n {
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
  font-weight: 500;
}

/* ─── §11 From the founder ─────────────────────────────────────────────── */
.founder { max-width: 1080px; }
.founder-row {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 820px) {
  .founder-row { grid-template-columns: 1fr; gap: var(--s-7); }
}

.founder__portrait {
  margin: 0;
  position: relative;
  transform: rotate(-1.2deg);
  transition: transform var(--slow) var(--ease-out);
  background: var(--paper);
  padding: 12px;
  border-radius: 6px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 2px 0 rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.founder__portrait:hover { transform: rotate(0deg); }

.founder__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.92) contrast(1.02);
}

.founder__cap {
  margin: 0;
  padding: 18px 0 16px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}

.founder__note {
  font-family: var(--serif);
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.62;
  color: var(--text);
  max-width: 56ch;
}
.founder__note p { margin: 0 0 1.05em 0; }
.founder__note p:last-child { margin-bottom: 0; }

.founder__opener {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 var(--s-7) 0 !important;
}

.founder__note em {
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
}

.founder__sign {
  margin-top: var(--s-7) !important;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair-faint);
}
.founder__hand {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 2.2vw, 30px);
  color: var(--gold);
  letter-spacing: -0.01em;
}
.founder__where {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-left: var(--s-2);
}

/* ─── §12 Waitlist ──────────────────────────────────────────────────────── */
.waitlist {
  text-align: center;
  max-width: 760px;
}
.waitlist__head {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-6) 0;
  color: var(--text);
}
.waitlist__head em { color: var(--gold); }

.waitlist__body {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto var(--s-8);
}
.waitlist__body strong { color: var(--text); font-weight: 600; font-family: var(--sans); }
.waitlist__body .num { color: var(--sage); }

.waitlist__form {
  display: flex;
  gap: var(--s-3);
  max-width: 520px;
  margin: 0 auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  transition: border-color var(--base) var(--ease-out), background var(--base) var(--ease-out);
}
.waitlist__form:focus-within {
  border-color: var(--sage);
  background: var(--surface-alt);
}
.waitlist__input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: var(--s-3) var(--s-5);
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.waitlist__input::placeholder { color: var(--text-faint); }
.waitlist__submit { padding: var(--s-3) var(--s-6); white-space: nowrap; }

@media (max-width: 560px) {
  .waitlist__form { flex-direction: column; padding: var(--s-4); border-radius: var(--r-card); }
  .waitlist__submit { width: 100%; }
}

.waitlist__fine {
  margin: var(--s-5) auto 0;
  font-size: 13px;
  color: var(--text-faint);
}

/* ─── Colophon ──────────────────────────────────────────────────────────── */
.colophon {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-10) var(--gutter-x) var(--s-9);
}
.colophon__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(32px, 5vw, 64px);
  padding-top: var(--s-9);
}
@media (max-width: 760px) {
  .colophon__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .colophon__grid { grid-template-columns: 1fr; }
}

.colophon__brand {
  display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start;
}
.colophon__mark {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: #0A0A0A;
  padding: 4px;
}
.colophon__name { margin: var(--s-2) 0 0 0; }
.colophon__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.colophon__set { margin: 0; }
.colophon__set dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-4);
}
.colophon__set dd {
  margin: 0 0 var(--s-2);
  font-size: 14px;
  color: var(--text-muted);
}
.colophon__set dd a:hover { color: var(--sage); }

.colophon__fine {
  margin: var(--s-9) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair-faint);
  color: var(--text-faint);
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-3);
}
.colophon__copy {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.colophon__motto {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--gold-soft);
}

/* ─── Reveal on scroll (added by JS) ────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.is-on { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero__don, .hero__shrink, .hero__sub, .hero__cta, .hero__foot, .hero__meta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }
  .strikelist li s::after { transform: scaleX(1) rotate(-1.5deg); }
  .cal__cell--today::after { animation: none; }
  .trace__caret { animation: none; }
}

/* ─── Tablet / mobile adjustments ───────────────────────────────────────── */
@media (max-width: 640px) {
  .hero__line { letter-spacing: -0.018em; }
  .hero__shrink { padding-left: 0; }
  .reframe__stat { grid-template-areas: "n n n" "eq pct pct" "cap cap cap"; column-gap: var(--s-4); }
  .reframe__num { font-size: 80px; }
  .reframe__pct { font-size: 44px; }
  .letter__body::before { font-size: 80px; top: 4px; left: 16px; }
}