/* ============================================================================
   DESIGN TOKENS — INK variant. Same DNA as the dense system, but the warmth
   is stripped out: neutral off-white paper, true black ink.

   MONOCHROME by intent: there is NO accent hue. The only tonal moves are the
   neutral-paper family, near-black ink, and ONE inverted dark band. Emphasis
   is carried by ITALIC + weight + hairline rules, never by color. Sober
   "printed document" feel: paper is continuous, ink is authority, rules do
   the separating. Section changes come from rules + ink density, never from
   rounded cards or drop shadows.
   ============================================================================ */

:root {
  /* Paper environment (continuous off-white, never white cards) */
  --paper:        #f4f3ee;
  --paper-light:  #faf9f5;
  --paper-deep:   #e8e6df;   /* neutral plate background for alternate bands */

  /* Ink + text (this is the whole palette — monochrome) */
  --ink:    #131311;         /* near-black: display type, primary rules, the "mark" */
  --body:   #2e2d2a;         /* body copy */
  --muted:  #63615a;         /* labels, captions, secondary */
  --rule:       #b6b4ac;     /* hairline rules */
  --rule-light: rgba(19, 19, 17, 0.15);

  /* Inverted dark band (one strip only — the interlude and the closing contact) */
  --night:       #151513;
  --night-paper: #ecebe5;

  /* Type families — all three provided via ./fonts.css (do not embed) */
  --display: "Castoro", Georgia, serif;      /* theses, headlines, wordmark: calm, editorial */
  --sans:    "Overpass", sans-serif;          /* explanations, nav, CTAs: plain, disappears */
  --mono:    "IBM Plex Mono", monospace;      /* SYSTEM labels, plate numbers, states, figure notes */

  --ease-out: cubic-bezier(0.2, 0.75, 0.2, 1);

  /* --- OP additions: the narrative engine ---------------------------------
     This variant replaces the scroll-snap slide model with a pinned stage. A
     chapter is a tall scroll runway; inside it one stage stays fixed under the
     masthead while its contents change. Nothing about the palette moves. */

  /* Measured at runtime. The chapter index lives INSIDE the masthead, so the
     masthead is the whole of the chrome the stage has to clear — one sticky
     bar, not two. The fallback is the desktop resting value so the page
     composes correctly before the script runs. */
  --mast-h: 3.25rem;
  --chrome: var(--mast-h);
  --stage-h: calc(100svh - var(--chrome));

  /* One beat costs this much scroll. Below ~0.7 the reader outruns the
     choreography; above ~1.1 it feels like wading. 0.9 is the resting value.

     That range was found with a mouse wheel, where one click moves the page a
     little and 0.9 of a screen is a comfortable few clicks. A thumb is not a
     wheel: one swipe covers most of a screen and throws momentum after it, so
     the same runway costs several swipes per frame — and because a beat holds
     still between its boundaries, most of that effort buys no visible change.
     A phone gets a shorter beat below. */
  --beat: 90svh;
}

@media (max-width: 980px) {
  :root { --beat: 62svh; }
}

/* --- Type ROLES (keep the roles; you choose the dense sizing) ------------- */
/* display serif  → h1/h2, thesis lines, pull quotes. Tight leading (~0.9-1.0),
                    negative letter-spacing (~-0.035em), text-wrap: balance.
                    Emphasis = <em>: ITALIC in the SAME ink (no color). Optionally
                    a hair heavier. That italic is the only "accent" you get. */
/* sans           → body 390 weight, line-height ~1.5; a 520 weight for lead sentences. */
/* mono           → 0.55-0.7rem, uppercase, letter-spacing 0.1-0.17em: eyebrows, folios,
                    figure captions, program codes, micro-labels. Ink or muted only. */

::selection { background: var(--ink); color: var(--paper-light); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Flat neutral paper — no dot grain (it read as repeating speckle). */
body {
  background-color: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 390;
}