/* ============================================================================
   BASE — tokens, reset, typographic foundation.
   ----------------------------------------------------------------------------
   Direction: POSTER. White stock, near-black ink, one electric accent.

   Three rules govern everything:

     1. SIZE IS THE HIERARCHY. Not colour, not boxes, not shadows. The display
        type is enormous and the body type is calm; the jump between them is
        the entire system. Resist adding a third voice in between.

     2. THE ACCENT IS A MARKER PEN. #FF3B00 is used to strike through a phrase,
        to number a section, and to mark the exception path in a figure. It is
        never a background wash, never a gradient, never decoration.

     3. RULES ARE STRUCTURAL. 3px black rules divide the page into registers;
        1px grey rules divide items within one. There are no other borders and
        no shadows anywhere.
   ========================================================================= */

:root {
  --paper:   #ffffff;
  --ink:     #0a0a0a;
  --ink-2:   #555555;   /* 7.4:1 — secondary prose, captions */
  --ink-3:   #767676;   /* 4.6:1 — small apparatus only */
  --rule:    #dcdcdc;   /* hairline within a register */
  --rule-2:  #0a0a0a;   /* structural 3px rule */
  --wash:    #f4f4f4;   /* inset fills, code */

  --accent:      #ff3b00;
  --accent-ink:  #ffffff;   /* text on top of the accent */
  --accent-dark: #d63000;   /* hover, and accent text on white (5.0:1) */

  /* Grotesk only. System stacks: no network request, no FOUT, no layout
     shift — and SF Pro / Segoe / Roboto all carry a real 800 weight, which
     this design depends on completely. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", Consolas,
          "Liberation Mono", monospace;

  /* NOTE: calc operators need whitespace. `1.5rem+8vw` is invalid CSS and the
     whole declaration is dropped silently. Always write `1.5rem + 8vw`. */
  --t-mega: clamp(3.2rem, 1.2rem + 8.4vw, 9rem);      /* the name */
  --t-h2:   clamp(2.1rem, 1.1rem + 4.4vw, 5rem);      /* section titles */
  --t-h3:   clamp(1.25rem, 1rem + 1.1vw, 1.85rem);    /* sub-headings */
  --t-lead: clamp(1.1rem, 0.98rem + 0.7vw, 1.55rem);  /* claims, decks */
  --t-num:  clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);    /* the statistics */
  --t-body: 17px;
  --t-micro: 12px;

  --wrap:  1280px;
  --measure: 62ch;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Inverted register — one black band breaks the white, and every token flips
   in one place so components below need no special cases. */
.invert {
  --paper:  #0a0a0a;
  --ink:    #ffffff;
  --ink-2:  #b0b0b0;
  --ink-3:  #8c8c8c;
  --rule:   #333333;
  --rule-2: #ffffff;
  --wash:   #1a1a1a;
  --accent-dark: #ff5a29;   /* the on-white accent is too dark on black */
  background: var(--paper);
  color: var(--ink);
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Display type is set tight and heavy; body type is not. That gap is the
   hierarchy, so these two rules should stay far apart. */
h1, h2 {
  font-weight: 800;
  line-height: 0.88;
  text-transform: uppercase;
}
/* The name sets one word per line, so it can take the tightest tracking. */
h1 { letter-spacing: -0.045em; }
/* Multi-word uppercase needs looser tracking and a word-space nudge, or
   "WHAT I OWN" closes up into "WHATIOWN". */
h2 { letter-spacing: -0.03em; word-spacing: 0.1em; }
h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

strong, b { font-weight: 700; }
em { font-style: italic; }

/* The marker pen. Used on the phrase that carries the claim — no more than
   once per screen, or it stops meaning anything.

   It strokes on. A background-image sized 0% → 100% wipes left to right like a
   real marker, and the text flips to white a beat later, once the ink is under
   it. Using background-size rather than a pseudo-element keeps it working
   across line breaks with box-decoration-break. */
.mark {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  color: var(--accent-ink);
  padding: 0 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.js .mark {
  background-size: 0% 100%;
  color: var(--ink);
  /* The colour flip waits until the stroke has almost finished. Flip it early
     and the text ahead of the ink is white on white — it disappears mid-sweep.
     Ink-on-accent for the last fraction is fine; white-on-white is not. */
  transition: background-size 0.75s var(--ease-soft), color 0.12s linear 0.62s;
}
.js [data-r].is-in .mark { background-size: 100% 100%; color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .js .mark { background-size: 100% 100%; color: var(--accent-ink); }
}

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--wash);
  padding: 0.1em 0.36em;
}

.tnum { font-variant-numeric: tabular-nums lining-nums; }

/* ── shared mono micro-label ────────────────────────────────────────────── */
.label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* ── focus & selection ──────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
::selection { background: var(--accent); color: var(--accent-ink); }

.skip {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  padding: 0.9rem 1.4rem;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 var(--t-micro)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-100%);
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: none; }

/* ── reduced motion ─────────────────────────────────────────────────────
   Everything animated here is enhancement. Removing it must leave the page
   whole, not empty. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}