/* =============================================================
   Edit. — letterpress-cycle variation
   Tokens + variation styles, combined for deploy. No build step.
   ============================================================= */
/* =============================================================
   Edit. — Shared design tokens (driven by Tweaks)
   ============================================================= */
:root {
  --paper:        #f7f5ef;
  --paper-deep:   #eae7dd;
  --paper-cream:  #fdfbf4;
  --ink:          #171c29;
  --ink-soft:     #424956;
  --ink-faded:    #7f8590;
  --ink-red:      #b0222d;
  --ink-red-deep: #871822;
  --rule:         rgba(23, 28, 41, 0.14);
  --rule-strong:  rgba(23, 28, 41, 0.36);

  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body:    "Fraunces", "Times New Roman", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max-width:    1240px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);

  /* Tweakable axes */
  --opsz-display: 144;
  --soft-italic:  100;
  --wonk:         1;
  --motion:       1; /* duration multiplier: <1 faster, >1 slower */
  --marks-opacity: 1;
  --grain:        0.6;

  /* Refined easing — one sleek vocabulary across all variations */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* expo-out: decisive, settles softly */
  --ease-soft:  cubic-bezier(0.33, 0, 0.12, 1);   /* gentle in-out for reveals */
  --ease-ink:   cubic-bezier(0.62, 0, 0.2, 1);    /* a pen drawing a line */
}

/* Refined entrance — used on hero lines & section heads.
   Composited transform+opacity only; no layout thrash. */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* Faint paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.075  0 0 0 0 0.08  0 0 0 0 0.10  0 0 0 0.10 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  opacity: var(--grain);
  mix-blend-mode: multiply;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 60%, rgba(30, 36, 52, 0.05) 100%),
    radial-gradient(ellipse at 50% 100%, transparent 60%, rgba(30, 36, 52, 0.05) 100%);
}

::selection { background: var(--ink-red); color: var(--paper-cream); }
a { color: inherit; text-decoration: none; }

/* Wordmark — shared */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-variation-settings: "opsz" 30, "SOFT" 100, "WONK" var(--wonk);
  letter-spacing: -0.018em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}
.wordmark-italic { font-style: italic; font-weight: 420; }
.wordmark-period {
  color: var(--ink-red);
  font-style: normal; font-weight: 600;
  font-size: 1em; line-height: 1;
  margin-left: 0.015em;
  display: inline-block;
}

/* Reduced motion — universal */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}


/* ===== Variation-specific styles ===== */

    /* ====== V2 — LETTERPRESS CYCLE — animation-forward ====== */

    .masthead {
      position: sticky; top: 0; z-index: 50;
      background: rgba(247, 245, 239, 0.86);
      backdrop-filter: saturate(140%) blur(10px);
    }
    .masthead-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: baseline;
      gap: 2rem;
      padding: 1.05rem var(--gutter) 0.95rem;
      max-width: var(--max-width);
      margin: 0 auto;
    }
    .primary-nav {
      display: flex; gap: 1.9rem;
      font-family: var(--font-mono);
      font-size: 0.7rem; text-transform: uppercase;
      letter-spacing: 0.14em; color: var(--ink-soft);
      font-weight: 500;
    }
    .primary-nav a { display: inline-flex; gap: 0.55em; padding: 0.4em 0; position: relative; }
    .primary-nav a::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0.15em;
      height: 1px; background: var(--ink-red);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.25s ease;
    }
    .primary-nav a:hover { color: var(--ink-red); }
    .primary-nav a:hover::after { transform: scaleX(1); }
    .primary-nav .nav-num { opacity: 0.5; }
    .issue-mark {
      justify-self: end; font-family: var(--font-mono);
      font-size: 0.68rem; text-transform: uppercase;
      letter-spacing: 0.18em; color: var(--ink-faded);
    }
    .masthead-rule { height: 0; border-top: 3px double var(--rule-strong); max-width: var(--max-width); margin: 0 auto; }

    /* ====== HERO ====== */
    .hero {
      position: relative;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(5rem, 10vw, 9rem);
      z-index: 2;
    }

    .eyebrow {
      display: inline-flex; align-items: flex-start; gap: 0.55em;
      font-family: var(--font-mono);
      font-size: 0.78rem; text-transform: uppercase;
      letter-spacing: 0.2em; color: var(--ink-soft);
      line-height: 1.7; font-weight: 500;
      margin-bottom: 1.6rem;
      opacity: 0;
      transition: opacity calc(0.7s * var(--motion)) var(--ease-soft);
      transition-delay: calc(0.1s * var(--motion));
    }
    body.ready .eyebrow { opacity: 1; }
    .eyebrow-pilcrow {
      font-family: var(--font-display);
      font-style: italic; font-size: 1.9em;
      font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" var(--wonk);
      color: var(--ink-red);
      line-height: 1; margin-top: -0.1em;
    }

    .hero-headline {
      font-family: var(--font-display);
      font-weight: 380;
      font-variation-settings: "opsz" var(--opsz-display), "SOFT" 30, "WONK" var(--wonk);
      font-size: clamp(2.5rem, 8.4vw, 7.4rem);
      line-height: 1.04;
      letter-spacing: -0.022em;
      color: var(--ink);
    }
    /* Headline lines rise in, staggered — the sleek entrance */
    .hero-headline .line {
      display: block;
      opacity: 0;
      transform: translateY(0.5em);
      transition: opacity calc(0.9s * var(--motion)) var(--ease-out), transform calc(0.9s * var(--motion)) var(--ease-out);
    }
    .hero-headline .line:nth-child(1) { transition-delay: calc(0.22s * var(--motion)); }
    .hero-headline .line:nth-child(2) { transition-delay: calc(0.34s * var(--motion)); }
    .hero-headline .line:nth-child(3) { transition-delay: calc(0.46s * var(--motion)); }
    .hero-headline .line:nth-child(4) { transition-delay: calc(0.58s * var(--motion)); }
    body.ready .hero-headline .line { opacity: 1; transform: translateY(0); }
    .hero-headline em {
      font-style: italic;
      font-variation-settings: "opsz" var(--opsz-display), "SOFT" var(--soft-italic), "WONK" var(--wonk);
      color: var(--ink);
    }

    /* The cycler — perpetual revision */
    .cycler-wrap {
      display: inline-block;
      position: relative;
      vertical-align: baseline;
    }
    .cycler-track {
      display: inline-block;
      position: relative;
      min-width: 5.5em;
    }
    .cycler-final {
      display: inline-block;
      position: relative;
      color: var(--ink);
      font-style: italic;
      font-variation-settings: "opsz" var(--opsz-display), "SOFT" var(--soft-italic), "WONK" var(--wonk);
    }
    .cycler-final::after {
      content: ""; position: absolute;
      left: 0; right: 0; bottom: 0.06em;
      height: 0.05em;
      background: var(--ink-red);
      transform: scaleX(0); transform-origin: left;
      transition: transform calc(0.7s * var(--motion)) var(--ease-ink);
      transition-delay: calc(0.85s * var(--motion));
      border-radius: 1px;
    }
    body.ready .cycler-final::after { transform: scaleX(1); }

    /* Drafts that scroll up & get struck through, then settle */
    .cycler-stack {
      position: absolute;
      left: calc(100% + 0.7em);
      top: 0.42em;
      display: flex; flex-direction: column;
      gap: 0.04em;
      font-family: var(--font-display);
      font-size: clamp(0.75rem, 1.25vw, 1.1rem);
      line-height: 1.25;
      font-style: italic;
      font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" var(--wonk);
      color: var(--ink-red);
      white-space: nowrap;
      pointer-events: none;
      font-weight: 400;
    }
    .cycler-stack-cue {
      font-family: var(--font-mono);
      font-style: normal;
      font-size: 0.7em;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--ink-faded);
      margin-bottom: 0.4em;
      opacity: 0;
    }
    /* Cue rides along with the drafts: fades in at the start, then fades out
       as the final draft clears (~50s) so the label never dangles alone. */
    body.ready .cycler-stack-cue {
      animation: cueFade calc(50s / var(--motion)) var(--ease-soft) forwards;
    }
    @keyframes cueFade {
      0%   { opacity: 0; }
      2%   { opacity: 0.75; }
      94%  { opacity: 0.75; }
      100% { opacity: 0; }
    }

    .draft {
      position: relative;
      display: inline-block;
      opacity: 0;
      /* Three passes through the drafts, then rests on the clean headline. */
      animation: draftCycle calc(13s / var(--motion)) var(--ease-soft) 3;
    }
    /* 4 drafts staggered — a quiet revision that settles after a few cycles */
    .draft:nth-of-type(1) { animation-delay: calc(0.9s * var(--motion)); }
    .draft:nth-of-type(2) { animation-delay: calc(4.15s * var(--motion)); }
    .draft:nth-of-type(3) { animation-delay: calc(7.4s * var(--motion)); }
    .draft:nth-of-type(4) { animation-delay: calc(10.65s * var(--motion)); }
    @keyframes draftCycle {
      0%   { opacity: 0; transform: translateY(0.35em); }
      8%   { opacity: 0.62; transform: translateY(0); }
      22%  { opacity: 0.62; }
      88%  { opacity: 0.5; }
      100% { opacity: 0; transform: translateY(-0.2em); }
    }
    .draft::after {
      content: ""; position: absolute;
      left: -0.18em; right: -0.18em;
      top: 53%; height: 0.1em;
      background: var(--ink-red);
      transform: scaleX(0);
      transform-origin: left center;
      border-radius: 1px;
      animation: draftStrikeCycle calc(13s / var(--motion)) var(--ease-ink) 3;
    }
    .draft:nth-of-type(1)::after { animation-delay: calc(1.25s * var(--motion)); }
    .draft:nth-of-type(2)::after { animation-delay: calc(4.5s * var(--motion)); }
    .draft:nth-of-type(3)::after { animation-delay: calc(7.75s * var(--motion)); }
    .draft:nth-of-type(4)::after { animation-delay: calc(11.0s * var(--motion)); }
    @keyframes draftStrikeCycle {
      0%, 3%   { transform: scaleX(0); }
      12%, 88% { transform: scaleX(1); }
      100%     { transform: scaleX(1); }
    }

    /* "solutions" — letters settle their italic axis once, on entrance */
    .breathe-letter {
      display: inline-block;
      transition: font-variation-settings calc(1.1s * var(--motion)) var(--ease-out);
      transition-delay: calc(0.2s * var(--motion));
    }
    body:not(.ready) .breathe-letter {
      font-variation-settings: "opsz" var(--opsz-display), "SOFT" 18, "WONK" 0;
    }

    .hero-deck {
      font-family: var(--font-display);
      font-size: clamp(1.05rem, 1.4vw, 1.2rem);
      line-height: 1.55;
      color: var(--ink-soft);
      max-width: 38ch;
      margin-top: 0.7rem;
      font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
      opacity: 0;
      transform: translateY(0.5em);
      transition: opacity calc(0.9s * var(--motion)) var(--ease-out), transform calc(0.9s * var(--motion)) var(--ease-out);
      transition-delay: calc(0.72s * var(--motion));
    }
    body.ready .hero-deck { opacity: 1; transform: translateY(0); }
    .hero-actions {
      display: flex; align-items: center; gap: 1.7rem; flex-wrap: wrap; margin-top: 2rem;
      opacity: 0;
      transform: translateY(0.5em);
      transition: opacity calc(0.9s * var(--motion)) var(--ease-out), transform calc(0.9s * var(--motion)) var(--ease-out);
      transition-delay: calc(0.86s * var(--motion));
    }
    body.ready .hero-actions { opacity: 1; transform: translateY(0); }

    .btn {
      display: inline-flex; align-items: center; gap: 0.85em;
      padding: 1rem 1.4rem;
      font-family: var(--font-mono);
      font-size: 0.78rem; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.18em;
      color: var(--paper-cream); background: var(--ink);
      border: 1px solid var(--ink); cursor: pointer;
      transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
      position: relative;
    }
    .btn:hover {
      background: var(--ink-red); border-color: var(--ink-red);
      transform: translate(-2px, -2px);
      box-shadow: 4px 4px 0 var(--ink);
    }
    .btn-arrow { display: inline-block; transition: transform 0.2s; }
    .btn:hover .btn-arrow { transform: translateX(0.25em); }
    .btn-text {
      display: inline-flex; align-items: baseline; gap: 0.6em;
      font-family: var(--font-mono);
      font-size: 0.76rem; text-transform: uppercase;
      letter-spacing: 0.16em; color: var(--ink-soft);
      border-bottom: 1px solid var(--rule-strong);
      padding-bottom: 0.2em;
      transition: color 0.2s, border-color 0.2s;
    }
    .btn-text:hover { color: var(--ink-red); border-color: var(--ink-red); }

    /* Sections */
    .section {
      position: relative; max-width: var(--max-width);
      margin: 0 auto;
      padding: clamp(4rem, 7vw, 6rem) var(--gutter);
      z-index: 2;
    }
    .section-head {
      display: grid; grid-template-columns: 1fr;
      gap: 0.6rem;
      margin-bottom: clamp(2.25rem, 4vw, 3.4rem);
      padding-bottom: 1.6rem;
      border-bottom: 1px solid var(--rule-strong);
      position: relative;
    }
    .section-head::after {
      content: ""; position: absolute;
      left: 0; right: 0; bottom: -4px;
      height: 1px; background: var(--rule);
    }
    .section-num {
      font-family: var(--font-mono);
      font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.18em; color: var(--ink-red);
      text-transform: uppercase;
    }
    .section-head .section-num,
    .section-head .section-title {
      opacity: 0;
      transform: translateY(0.45em);
      transition: opacity calc(0.8s * var(--motion)) var(--ease-soft), transform calc(0.85s * var(--motion)) var(--ease-out);
    }
    .section-head .section-title { transition-delay: calc(0.1s * var(--motion)); }
    .section-head.in-view .section-num,
    .section-head.in-view .section-title { opacity: 1; transform: translateY(0); }
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 6vw, 4.8rem);
      font-weight: 380;
      font-variation-settings: "opsz" 100, "SOFT" 30, "WONK" var(--wonk);
      line-height: 0.98;
      letter-spacing: -0.022em;
      color: var(--ink);
    }
    .section-title em {
      font-style: italic;
      font-variation-settings: "opsz" 100, "SOFT" var(--soft-italic), "WONK" var(--wonk);
      color: var(--ink-red);
    }

    .section-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(2.4rem, 5vw, 4rem);
    }
    @media (min-width: 920px) {
      .section-body {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        gap: clamp(2.5rem, 5vw, 4.5rem);
      }
      .section-body-block { grid-template-columns: minmax(0, 1fr); }
    }

    /* §01 — strike-list, with cascading wave on view */
    .strike-list {
      list-style: none;
      display: flex; flex-direction: column; gap: 0.5em;
      font-family: var(--font-display);
      font-size: clamp(1.45rem, 3.4vw, 2.5rem);
      line-height: 1.22;
      font-variation-settings: "opsz" 100, "SOFT" 30, "WONK" 0;
      font-weight: 380;
      letter-spacing: -0.01em;
    }
    .strike-list li {
      position: relative;
      padding-left: 1.7em;
      transition: transform calc(0.7s * var(--motion)) var(--ease-out), opacity calc(0.7s * var(--motion)) var(--ease-out);
      transition-delay: var(--reveal-delay, 0s);
      transform: translateX(-0.4em);
      opacity: 0;
    }
    .strike-list li.in-view {
      transform: translateX(0);
      opacity: 1;
    }
    .strike-list li::before {
      content: "—";
      position: absolute;
      left: 0; top: 0;
      color: var(--ink-red);
      opacity: 0;
      transform: translateX(-0.3em);
      transition: opacity 0.5s ease, transform 0.5s ease;
      transition-delay: var(--reveal-delay, 0s);
    }
    .strike-list li.in-view::before {
      opacity: var(--marks-opacity);
      transform: translateX(0);
    }
    .strike-line {
      position: relative; display: inline-block;
      color: var(--ink-soft);
      transition: color 0.6s ease;
      transition-delay: calc(var(--reveal-delay, 0s) + 0.3s);
    }
    .strike-line::after {
      content: ""; position: absolute;
      left: -0.06em; right: -0.06em;
      top: 54%; height: 0.075em;
      background: var(--ink-red);
      transform: scaleX(0); transform-origin: left center;
      border-radius: 1px;
      transition: transform calc(0.85s * var(--motion)) var(--ease-ink);
      transition-delay: calc(var(--reveal-delay, 0s) + 0.25s);
    }
    .in-view .strike-line::after { transform: scaleX(1); }
    .in-view .strike-line { color: var(--ink-faded); }

    /* §02 — add-list, animated underline draws on each enter */
    .add-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
    .add-list li {
      position: relative;
      padding: 1.8rem 0;
      border-bottom: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 2.4rem 1fr;
      grid-template-rows: auto auto;
      column-gap: 0.6rem; row-gap: 0.4rem;
      opacity: 0;
      transform: translateY(0.6em);
      transition: opacity calc(0.7s * var(--motion)) var(--ease-soft), transform calc(0.8s * var(--motion)) var(--ease-out);
      transition-delay: var(--reveal-delay, 0s);
    }
    .add-list li.in-view { opacity: 1; transform: translateY(0); }
    .add-list li:first-child { padding-top: 0; }
    .add-list li:last-child { border-bottom: none; padding-bottom: 0; }
    .add-list .add-mark {
      grid-column: 1; grid-row: 1 / 3;
      font-family: var(--font-mono);
      color: var(--ink-red); font-weight: 500;
      font-size: 1.4rem; line-height: 1; margin-top: 0.45rem;
      opacity: 0;
      transform: translateY(0.3em);
      transition: opacity calc(0.6s * var(--motion)) var(--ease-soft), transform calc(0.6s * var(--motion)) var(--ease-out);
      transition-delay: calc(var(--reveal-delay, 0s) + 0.18s);
    }
    .add-list li.in-view .add-mark { opacity: var(--marks-opacity); transform: translateY(0); }
    .add-list h3 {
      grid-column: 2; grid-row: 1;
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.6vw, 2rem);
      font-weight: 400; font-style: italic;
      font-variation-settings: "opsz" 100, "SOFT" var(--soft-italic), "WONK" var(--wonk);
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .add-list h3 span { position: relative; display: inline-block; }
    .add-list h3 span::after {
      content: ""; position: absolute;
      left: 0; right: 0; bottom: 0.04em;
      height: 1px; background: var(--ink-red);
      transform: scaleX(0); transform-origin: left;
      transition: transform calc(0.7s * var(--motion)) ease;
      transition-delay: calc(var(--reveal-delay, 0s) + 0.4s);
    }
    .add-list li.in-view h3 span::after { transform: scaleX(1); }
    .add-list p {
      grid-column: 2; grid-row: 2;
      font-size: 1.05rem; line-height: 1.55;
      color: var(--ink-soft);
      max-width: 60ch;
      font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0;
    }

    /* Margin notes */
    .margin-note {
      background: var(--paper-cream);
      border-left: 2px solid var(--ink-red);
      padding: 1.4rem 1.5rem;
      align-self: start;
      font-family: var(--font-display);
      font-style: italic;
      font-size: 1.02rem; line-height: 1.55;
      color: var(--ink-soft);
      font-variation-settings: "opsz" 18, "SOFT" 70, "WONK" var(--wonk);
      max-width: 32ch;
      transform: rotate(-0.5deg);
      box-shadow: 0 1px 0 rgba(0,0,0,0.04), 6px 6px 0 -3px rgba(23,28,41,0.06);
    }
    .margin-note-label {
      display: block;
      font-family: var(--font-mono);
      font-style: normal;
      font-size: 0.66rem; text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--ink-red);
      margin-bottom: 0.6rem;
      font-weight: 500;
    }

    /* §03 — stages, with a printing-press progress bar */
    .lead {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.4vw, 1.95rem);
      line-height: 1.4; color: var(--ink);
      max-width: 32ch;
      margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
      font-style: italic;
      font-variation-settings: "opsz" 36, "SOFT" var(--soft-italic), "WONK" var(--wonk);
      letter-spacing: -0.01em;
    }
    .stages {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
      border-top: 1px solid var(--rule-strong);
      border-left: 1px solid var(--rule-strong);
      counter-reset: stage;
    }
    .stages li {
      padding: 2rem 1.6rem 2.2rem;
      border-bottom: 1px solid var(--rule-strong);
      border-right: 1px solid var(--rule-strong);
      position: relative;
      counter-increment: stage;
      overflow: hidden;
    }
    .stages li::before {
      content: ""; position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px; background: var(--ink-red);
      transform: scaleX(0); transform-origin: left;
      transition: transform calc(1.1s * var(--motion)) var(--ease-ink);
    }
    .stages li.in-view::before { transform: scaleX(1); }
    .stages li > * {
      opacity: 0;
      transform: translateY(0.4em);
      transition: opacity calc(0.7s * var(--motion)) var(--ease-soft), transform calc(0.7s * var(--motion)) var(--ease-out);
      transition-delay: calc(var(--reveal-delay, 0s) + 0.15s);
    }
    .stages li.in-view > * { opacity: 1; transform: translateY(0); }
    .stage-num {
      display: block;
      font-family: var(--font-display);
      font-style: italic;
      font-size: 1.15rem;
      color: var(--ink-red);
      margin-bottom: 1.2rem;
      font-variation-settings: "opsz" 24, "SOFT" var(--soft-italic), "WONK" var(--wonk);
    }
    .stages h3 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 400;
      font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" var(--wonk);
      margin-bottom: 0.8rem;
      letter-spacing: -0.018em;
    }
    .stages p { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); max-width: 36ch; }

    /* §04 contact */
    .contact-deck {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      line-height: 1.4; color: var(--ink);
      max-width: 32ch; margin-bottom: 2.6rem;
      font-style: italic;
      font-variation-settings: "opsz" 36, "SOFT" var(--soft-italic), "WONK" var(--wonk);
      letter-spacing: -0.01em;
    }
    .contact-mailto {
      display: inline-flex; align-items: baseline; gap: 0.55em;
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 6.4vw, 4.8rem);
      font-weight: 380;
      font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" var(--wonk);
      letter-spacing: -0.025em;
      color: var(--ink); position: relative;
      padding: 0.2em 0; flex-wrap: wrap;
    }
    .contact-prefix {
      font-family: var(--font-mono);
      font-size: 0.28em; text-transform: uppercase;
      letter-spacing: 0.18em; color: var(--ink-faded);
      align-self: center; font-weight: 500;
    }
    .contact-email {
      text-decoration: underline;
      text-decoration-color: var(--rule-strong);
      text-decoration-thickness: 1.5px;
      text-underline-offset: 0.12em;
      transition: text-decoration-color 0.25s, color 0.25s;
    }
    .contact-mailto:hover .contact-email {
      text-decoration-color: var(--ink-red);
      color: var(--ink-red);
    }
    .contact-arrow {
      font-size: 0.45em; align-self: center;
      color: var(--ink-faded);
      transition: transform 0.25s, color 0.25s;
    }
    .contact-mailto:hover .contact-arrow {
      transform: translate(0.3em, -0.3em); color: var(--ink-red);
    }
    .contact-note {
      font-family: var(--font-display);
      font-size: 1.1rem; line-height: 1.55;
      color: var(--ink-soft); max-width: 42ch;
      margin-top: 2.6rem;
      font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0;
    }

    /* §04 — ledger of selected work */
    .ledger {
      list-style: none;
      display: flex; flex-direction: column;
      border-top: 1px solid var(--rule-strong);
    }
    .ledger li {
      padding: 1.8rem 0;
      border-bottom: 1px solid var(--rule);
      opacity: 0;
      transform: translateY(0.6em);
      transition: opacity calc(0.7s * var(--motion)) var(--ease-soft), transform calc(0.8s * var(--motion)) var(--ease-out);
      transition-delay: var(--reveal-delay, 0s);
    }
    .ledger li.in-view { opacity: 1; transform: translateY(0); }
    .ledger-stat {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 380;
      font-variation-settings: "opsz" 100, "SOFT" 30, "WONK" var(--wonk);
      letter-spacing: -0.022em;
      line-height: 1.02;
      color: var(--ink);
      margin-bottom: 0.5rem;
    }
    .ledger-arrow { color: var(--ink-red); font-style: normal; padding: 0 0.1em; }
    .ledger-unit {
      font-size: 0.42em; color: var(--ink-faded);
      font-family: var(--font-mono); letter-spacing: 0.04em;
    }
    .ledger h3 {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 2.4vw, 1.8rem);
      font-weight: 400; font-style: italic;
      font-variation-settings: "opsz" 72, "SOFT" var(--soft-italic), "WONK" var(--wonk);
      color: var(--ink);
      letter-spacing: -0.01em;
      margin-bottom: 0.5rem;
    }
    .ledger p {
      font-size: 1.02rem; line-height: 1.5;
      color: var(--ink-soft); max-width: 52ch;
      font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0;
    }

    /* §05 — contact form */
    .contact-form {
      display: flex; flex-direction: column;
      gap: 1.6rem;
      max-width: 40rem;
      margin-bottom: 2.4rem;
    }
    .contact-form .field { display: flex; flex-direction: column; gap: 0.5rem; }
    .contact-form label {
      font-family: var(--font-mono);
      font-size: 0.7rem; text-transform: uppercase;
      letter-spacing: 0.18em; color: var(--ink-red);
      font-weight: 500;
    }
    .contact-form input,
    .contact-form textarea {
      font-family: var(--font-display);
      font-size: 1.1rem; line-height: 1.5;
      color: var(--ink);
      background: var(--paper-cream);
      border: 1px solid var(--rule-strong);
      border-radius: 0;
      padding: 0.75rem 0.85rem;
      width: 100%;
      font-variation-settings: "opsz" 18, "SOFT" 30, "WONK" 0;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .contact-form textarea { resize: vertical; min-height: 7rem; }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder { color: var(--ink-faded); font-style: italic; }
    .contact-form input:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: var(--ink-red);
      box-shadow: 0 0 0 2px rgba(176, 34, 45, 0.18);
    }
    .contact-form .btn { align-self: flex-start; border: 1px solid var(--ink); }
    .contact-inline {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-color: var(--rule-strong);
      text-underline-offset: 0.12em;
      transition: color 0.2s, text-decoration-color 0.2s;
    }
    .contact-inline:hover { color: var(--ink-red); text-decoration-color: var(--ink-red); }
    /* Honeypot — off-screen, never shown to people. */
    .contact-form .hp {
      position: absolute; left: -9999px;
      width: 1px; height: 1px; overflow: hidden;
    }
    .form-status {
      font-family: var(--font-mono);
      font-size: 0.78rem; letter-spacing: 0.04em;
      line-height: 1.5; margin-top: 0.4rem; min-height: 1.2em;
    }
    .form-status:empty { margin-top: 0; }
    .form-status.is-pending { color: var(--ink-faded); }
    .form-status.is-error { color: var(--ink-red); }
    .form-status.is-ok {
      font-family: var(--font-display); font-style: italic;
      font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink);
      font-variation-settings: "opsz" 36, "SOFT" var(--soft-italic), "WONK" var(--wonk);
    }

    .footer {
      position: relative; z-index: 2;
      border-top: 3px double var(--rule-strong);
      margin-top: 2rem;
      padding: 2.5rem var(--gutter) 3rem;
      background: var(--paper-deep);
    }
    .footer-row {
      max-width: var(--max-width); margin: 0 auto;
      display: grid; grid-template-columns: 1fr;
      gap: 1.8rem;
      font-family: var(--font-mono);
      font-size: 0.72rem; text-transform: uppercase;
      letter-spacing: 0.16em; color: var(--ink-soft);
      font-weight: 500;
    }
    .footer-col p { margin-top: 0.25rem; }
    .footer-brand .wordmark {
      font-size: 1.25rem; margin-bottom: 0.5rem;
      text-transform: none; letter-spacing: -0.018em;
    }
    .footer-brand p {
      text-transform: none; letter-spacing: 0;
      font-family: var(--font-display);
      font-style: italic; font-size: 0.95rem;
      color: var(--ink-soft);
      font-variation-settings: "opsz" 18, "SOFT" var(--soft-italic), "WONK" var(--wonk);
    }
    .colophon-label { color: var(--ink-red); margin-bottom: 0.45rem; }
    .footer-colophon p:not(.colophon-label),
    .footer-meta p:nth-child(2) {
      font-family: var(--font-display);
      font-size: 0.95rem; text-transform: none;
      letter-spacing: 0; font-style: italic;
      font-variation-settings: "opsz" 18, "SOFT" var(--soft-italic), "WONK" var(--wonk);
      color: var(--ink-soft);
    }
    .footer-meta p:nth-child(1) {
      font-family: var(--font-display);
      text-transform: none; letter-spacing: 0;
      font-size: 1rem; color: var(--ink);
      font-variation-settings: "opsz" 18, "SOFT" 50, "WONK" var(--wonk);
    }
    .footer-colophon em { font-style: normal; font-weight: 500; color: var(--ink); }
    @media (min-width: 760px) {
      .footer-row {
        grid-template-columns: 1.2fr 1fr 1.3fr;
        gap: 2rem; align-items: start;
      }
      .footer-meta { text-align: center; }
      .footer-colophon { text-align: right; }
      .footer-colophon p:not(.colophon-label) { max-width: 38ch; margin-left: auto; }
    }

    @media (max-width: 920px) {
      .cycler-stack {
        position: static;
        display: flex; flex-direction: row; flex-wrap: wrap;
        gap: 0.4em 1em;
        margin-top: 0.4em;
        font-size: 0.85rem;
      }
      .cycler-stack-cue { display: none; }
    }
    @media (max-width: 760px) {
      .primary-nav { display: none; }
      .masthead-row { grid-template-columns: 1fr auto; align-items: center; }
      .stages li { border-right: none; }
    }