/* ============================================================
   TNAADO — THE PAGE SYSTEM
   One coherent language, so every page reads as the same firm.

   The rule: READING HAPPENS ON LIGHT. Photographs, film and the
   accent bands are what black is for. Black becomes punctuation
   between light blocks, never the page itself.
   ============================================================ */

:root {
  --sys-ink:   #0a0a0a;
  --sys-bone:  #faf8f3;
  --sys-red:   #c8102e;
  --sys-red-on-light: #a4132c;   /* red-text is calibrated for dark grounds */
  --sys-rule-light: rgba(10,10,10,.14);
  --sys-mute-light: rgba(10,10,10,.62);
}

/* ── 1. LIGHT SECTIONS ─────────────────────────────────────── */
/* THE TOKENS ARE REDEFINED, NOT THE ELEMENTS. This is the whole trick and
   it was learned the hard way: selecting elements to recolour them loses
   every specificity fight it picks. `:where(h2)` is specificity ZERO, so
   `.pr-h2 { color: var(--on-black) }` beats it and the heading stays
   #f5f1e8 — invisible on bone. That is why /pricing rendered with only the
   red half of each headline showing.
   Redefining the six colour tokens on the section means every descendant
   inherits the corrected value through the variable it already consumes.
   No selector has to win, and components nobody remembered are covered. */
.t-light, .t-lite,
.fs-lite, .tp-lite, .pr-light, .faq-light, .sv-lite,
.mflow--light, .sv-cine--light {
  background: var(--sys-bone);
  color: var(--sys-ink);
  --on-black: var(--sys-ink);
  --on-black-mute: var(--sys-mute-light);
  --red-text: var(--sys-red-on-light);
  --hairline: var(--sys-rule-light);
  --rule: var(--sys-rule-light);
}

/* A dark band nested inside a light one puts the originals back, so the
   inversion does not leak into the thing it is meant to separate. */
.t-light .t-dark, .t-lite .t-dark,
.fs-lite .t-dark, .tp-lite .t-dark, .pr-light .t-dark, .faq-light .t-dark,
.mflow--light .t-dark, .sv-cine--light .t-dark,
/* and any band that keeps its own ink ground inside a light one */
.t-light .pr-entry, .pr-light .pr-entry {
  --on-black: #f5f1e8;
  --on-black-mute: rgba(245,241,232,.58);
  --red-text: #e8455a;
}
.t-light :where(h1,h2,h3,h4,h5,p,li,dt,dd,figcaption,blockquote,address,th,td) {
  color: var(--sys-ink);
}
.t-light :where(.eyebrow,[class*="eyebrow"],[class*="__kind"],[class*="__label"]) {
  color: var(--sys-red-on-light);
}
.t-light :where(hr,[class*="rule"],[class*="hairline"]) { border-color: var(--sys-rule-light); }
.t-light :where(.mute,[class*="mute"],[class*="__desc"],[class*="__cap"]) { color: var(--sys-mute-light); }
.t-light a:not([class*="btn"]) { color: var(--sys-ink); text-decoration-color: var(--sys-rule-light); }

/* ── 2. DARK BANDS — separation, not the ground ────────────── */
.t-dark { background: var(--sys-ink); color: var(--on-black); }

/* ── 3. CONTAINED IMAGES — never edge to edge ──────────────── */
.t-fig {
  margin-inline: auto;
  max-width: min(100%, 880px);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.t-fig > img, .t-fig > video {
  display: block;
  width: 100%;
  max-height: clamp(260px, 34vw, 440px);
  object-fit: cover;
  border: 1px solid var(--sys-rule-light);
}
.t-dark .t-fig > img, .t-dark .t-fig > video { border-color: rgba(245,241,232,.16); }

/* ── 4. SHAPES — soft and sharp, alternating ───────────────── */
/* Ethan's own radii, from unwrinkled-react/app/globals.css */
.t-arch   { border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%; }
.t-blob-a { border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%; }
.t-blob-b { border-radius: 40% 60% 56% 44% / 55% 42% 58% 45%; }
/* Sharp counterparts — the crisscross he asked for */
.t-cut-l  { clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%); }
.t-cut-r  { clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); }
.t-cut-v  { clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%); }
.t-chamfer{ clip-path: polygon(4% 0, 100% 0, 100% 96%, 96% 100%, 0 100%, 0 4%); }

/* ── 5. RHYTHM — sections vary, they do not all weigh the same */
.t-sec      { padding-block: clamp(3rem, 6vw, 5.5rem); }
.t-sec--tight { padding-block: clamp(1.8rem, 3vw, 3rem); }
.t-sec--tall  { padding-block: clamp(4.5rem, 9vw, 8rem); }

/* Reading column — long copy never runs the full width */
.t-read { max-width: 68ch; }

/* ── 6. THE GLOW FIELD DOES NOT BELONG ON LIGHT ────────────────────
   .glow-field--embers paints a red radial designed to sit on ink. On a
   bone ground the same gradient reads as a pink smear across the top of
   the section — visible on /case-studies where the light band opens
   directly under the hero. The class is left on the markup because the
   sections that are still dark need it; it is simply not painted where
   the ground is light. */
.t-light.glow-field::before,
.t-lite.glow-field::before,
.fs-lite.glow-field::before, .tp-lite.glow-field::before,
.pr-light.glow-field::before, .faq-light.glow-field::before,
.t-light .glow-field::before,
.t-lite .glow-field::before { display: none; }

/* ── 7. THE EMBER BRIDGE ONLY BRIDGES DARK TO DARK ─────────────────
   .ember is a 200px red radial that softens the join between two ink
   sections. Over a bone section it paints a pink wash — measured on
   /case-studies at rgb(244,223,221) against the bone rgb(250,248,243),
   fading over ~115px, which reads as a printing fault rather than a
   transition. It is suppressed where the band it leads into is light. */
.ember:has(+ .t-light), .ember:has(+ .t-lite),
.ember:has(+ .fs-lite), .ember:has(+ .tp-lite), .ember:has(+ .pr-light),
.ember:has(+ .faq-light), .ember:has(+ .sv-cine--light) { display: none; }

/* EIGHT NAMES FOR ONE IDEA. Nine agents worked this estate in parallel and
   each invented its own light-ground class: fs-lite, t-lite, tp-lite,
   pr-light, t-light, faq-light, sv-lite, mflow--light, sv-cine--light.
   Rather than rename them across nine files under time pressure, they are
   all taught the same token flip here, which is what actually has to be
   true for any of them to be readable. Prefer .t-light in new work. */