/* ============================================================================
   eVamb Cinematic — BASE  (resets · typography scale · grounds · grid)
   Depends on tokens.css (load tokens.css FIRST).

   CONTRAST TABLE (WCAG 2.2 AA · the design spec §Budgets — verified):
     ink #0A0D14  on cream #F0E8D8 ......... 15.95:1  AA  (body + headings)
     cream #F0E8D8 on ink #0A0D14 .......... 15.95:1  AA  (body + headings)
     amber #E8A23C on ink .................. 8.94:1   AA  (accent text on ink)
     azure #4FA3D9 on ink .................. 7.01:1   AA  (accent text on ink)
     copper #C9783C on cream ............... 2.76:1   FAIL → NOT for text.
        ↳ copper TEXT on light ground uses --copper-on-cream (#9E5224 · 4.68:1 AA)
   ========================================================================== */

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text-on-cream);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
svg { fill: currentColor; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

:where(p, li) { text-wrap: pretty; }
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }

/* ---- Accessibility primitives ---------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -64px;
  z-index: var(--z-modal);
  background: var(--ink);
  color: var(--text-on-ink);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  transition: top var(--dur-2) var(--ease-brand);
}
.skip-link:focus { top: var(--sp-3); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* ---- Typography scale ------------------------------------------------- */
/* Display = Fraunces · Body = Inter · Labels = JetBrains Mono             */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.display { font-size: var(--fs-display); line-height: var(--lh-tight); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

.display-italic { font-style: italic; font-weight: 400; }

p { font-size: var(--fs-body); line-height: var(--lh-body); }
.lead {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  /* themed by the NEAREST ground via inherited custom props (see grounds below) */
  color: var(--c-muted, var(--text-on-cream-muted));
}
small, .text-sm { font-size: var(--fs-body-sm); }

/* Mono labels — uppercase, letter-spaced (eyebrows / metadata / HUD)      */
.label, .eyebrow, .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: 1.2;
}
/* eyebrow/label colour follows the nearest ground (copper on light = AA-safe) */
.label, .eyebrow { color: var(--c-eyebrow, var(--copper-on-cream)); }

/* Gold-gradient display word (signature light — 1–2 words per page) */
.gold-word {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* fallback if background-clip:text unsupported */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-word { color: var(--copper); -webkit-text-fill-color: currentColor; }
}

/* ---- Vertical rhythm -------------------------------------------------- */
.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-5); }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 44ch; }

/* ---- Section grounds + ink/cream alternation -------------------------- */
section { position: relative; }

.section {
  padding-block: var(--sp-section);
  padding-inline: var(--container-pad);
}

/* Ground utilities — immersive dark ↔ editorial light (the page rhythm).
   Each ground publishes inherited theme vars so the NEAREST ground always wins,
   even when an ink section is nested inside a paper/cream body (and vice-versa).
   This fixes invisible text from source-order conflicts between ground rules.   */
:root { --c-text: var(--text-on-cream); --c-muted: var(--text-on-cream-muted); --c-eyebrow: var(--copper-on-cream); }

.ground-ink {
  background: var(--ink);
  color: var(--text-on-ink);
  --c-text: var(--text-on-ink);
  --c-muted: var(--text-on-ink-muted);
  --c-eyebrow: var(--copper);
}
.ground-cream {
  background: var(--cream);
  color: var(--text-on-cream);
  --c-text: var(--text-on-cream);
  --c-muted: var(--text-on-cream-muted);
  --c-eyebrow: var(--copper-on-cream);
}
.ground-paper {
  background: var(--paper);
  color: var(--text-on-cream);
  --c-text: var(--text-on-cream);
  --c-muted: var(--text-on-cream-muted);
  --c-eyebrow: var(--copper-on-cream);
}
/* Headings follow the NEAREST ground via the inherited --c-text var (same pattern
   as .lead). The previous .ground-ink/.ground-cream/.ground-paper heading rules
   were equal-specificity, so on a paper-bodied page the cream rule could win for
   an ink-section heading → dark-on-dark. Theming through the inherited var means
   the closest ground always supplies the correct colour. */
h1, h2, h3, h4, h5, h6 { color: var(--c-text); }

/* Copper text helper — auto-safe per ground */
.text-copper { color: var(--c-eyebrow, var(--copper-on-cream)); }

/* ---- Container + 12-col fluid grid ----------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-wide { max-width: 1440px; }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}
/* span helpers */
.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 12; }
.col-6  { grid-column: span 12; }
.col-4  { grid-column: span 12; }
.col-3  { grid-column: span 6;  }

@media (min-width: 680px) {
  .col-8 { grid-column: span 8; }
  .col-6 { grid-column: span 6; }
  .col-4 { grid-column: span 6; }
  .col-3 { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .col-4 { grid-column: span 4; }
}

/* ---- Utility ---------------------------------------------------------- */
.text-center { text-align: center; }
.flow-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.relative { position: relative; }
.hidden[hidden] { display: none !important; } /* guard P-electron grid/flex override */