/**
 * Deck design tokens -- pragma-mc-new
 * =====================================
 * Ported from the newmorning.pragma-cloud.com 10-slide deck
 * (source: /home/ben/pragma-mc-new-workdir/newmorning.html, its <style> blocks).
 * Palette, hairline rule, masthead/foot chrome, display type scale, the
 * .ln/.ln-in line-mask reveal primitive, and the .num slide-index label.
 *
 * NOT wired into index.html by this file -- purely a token/utility layer for
 * the Build agent to consume when assembling the real sections. Class names
 * are deliberately renamed off the deck's slide-scoped originals (.masthead,
 * .foot, .slide .num, .slide--dark) to generic, section-agnostic equivalents
 * (.mast, .foot-bar, .num, .deck-dark) since this bundle has no .slide shell.
 *
 * Bare custom-property names below (--bg, --ink, --line, --red, ...) are
 * unused anywhere else in this bundle (style.css / monaco-tokens.css /
 * onboarding.css all use --mc-* / --mc-ob-* prefixes) -- verified clear of
 * collisions before choosing these names, and kept identical to the deck's
 * own token names for 1:1 portability against newmorning.html as a reference.
 *
 * Fonts: 'Clash Display' (headline/display, self-hosted, see fonts.css) +
 * 'Hanken Grotesk' (body/masthead/foot, already self-hosted in this bundle).
 * Fraunces is banned fleet-wide -- never introduced here.
 */

:root {
	/* ── deck palette ─────────────────────────────── */
	--bg: #f6f3ec;
	--bg-deep: #efe9dc;
	--ink: #0d3946;
	--ink-soft: #3c5a64;
	--ink-mute: #8f9691;
	--dark: #0c1216;
	--red: #ce1126;
	--red-text: #a90e20;
	--petrol: #1b6b7c;
	--line: #ddd5c2;
	--line-strong: #c9bfa6;

	/* ── hairline rule ────────────────────────────── */
	--hair: 1px solid var(--line);
	--hair-strong: 1px solid var(--line-strong);

	/* ── type families ────────────────────────────── */
	--font-display: "Clash Display", "Hanken Grotesk", sans-serif;
	--font-body: "Hanken Grotesk", system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   GRID TOKENS -- wave 4, GOAL D (perfect grid, perfect spacing)
   ═══════════════════════════════════════════════════════════════════════
   The shared layout layer: ONE side-margin token consumed by BOTH #bar and
   every page's .stage-inner/.hero-inner (style.css), exactly THREE content
   widths, one 8/16/24/40/64 spacing scale, one 12-col helper grid. Targets
   CODE-MAP.md §5/§7's "eight-plus independently-authored max-width values
   across a handful of screens" -- every page-level container in style.css
   now draws from --w-narrow/--w-mid/--w-wide instead of a bespoke rem
   value (see style.css DECK SHELL layer for the call sites).

   Deliberately NOT folded into this system: the fluid, dvh-anchored
   clamp()s that size TEXT-WRAP measures (.hero-headline, .method-lines,
   .offer-craft-line) or short-viewport compaction -- those solve line-wrap
   quality / no-scroll fit at the 5 mandated viewports, a different job
   than a shared container measure, and each is already QA-tuned per
   viewport (see their own inline comments). Rewriting them onto a static
   3-value scale would regress rounds of prior fixes for no grid benefit.
   Same reasoning for .bar-audit-email-input's 24rem (a form control's
   width, not a content column). ── */
:root {
	--grid-margin: clamp(24px, 4vw, 64px);
	--w-narrow: 46rem;
	--w-mid: 62rem;
	--w-wide: 78rem;
	/* WAVE 7 (2026-07-21): the hero measure stays bespoke by owner design
	   (58rem sits between --w-narrow/--w-mid on purpose, for the longer
	   French hero copy) -- token-backed instead of a bare hardcoded value
	   so it shows up alongside the other 3 container widths (style.css
	   .hero-headline repoints its max-width to this). */
	--w-hero: 58rem;
	/* GRID PASS (2026-07-26): the ONE body-copy measure shared by every
	   text block that wraps inside a split page's left column (studio lede,
	   founder bio, offer tagline, audit confirm sentence). Before this pass
	   those four each carried their own ch-based or rem-based cap (44ch /
	   38ch / --w-narrow), so the studio intro copy wrapped at 430.5px while
	   the founder bio right under it wrapped at 306.2px -- two different
	   measures stacked in the same column. */
	--w-copy: 34rem;
	--s1: 8px;
	--s2: 16px;
	--s3: 24px;
	--s4: 40px;
	--s5: 64px;
	/* WAVE 7 (2026-07-21): shared one-line page-title size, ADDED here
	   deliberately idempotent -- if a concurrent pass already declared this
	   same custom property with this same value, this redeclaration is a
	   harmless no-op (last value wins, identical either way). Sized so
	   "Qui sommes-nous" (the longest current title) fits on ONE line at both
	   mandated QA viewports instead of inheriting `.display`'s deck-scale
	   clamp(2.4rem,6.3vw,5.5rem), which wraps it to two lines and collides
	   with the figure band above (see style.css .stage-open .display). */
	--title-fs: clamp(1.5rem, 2.8vw + 1.8dvh, 2.8rem);
}

/* GRID PASS (2026-07-26): the `.grid-12` helper that used to sit here was
   DELETED -- zero references in index.html, style.css, sections.css or any
   .js in this bundle (both of the sub-layouts its comment named,
   `.duo-founders` and `.method-steps`, were themselves removed in WAVE B/6).
   The real shared layout layer is `.split-page`/`.split-figure` (style.css,
   desktop split block). */

/* ── display type scale ───────────────────────────
   .display = the deck's h1/.display headline face. .lede = the standfirst
   paragraph beneath it. .microlabel = small letterspaced eyebrow/kicker. */
.display {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.4rem, 6.3vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.display em {
	font-style: normal;
	font-weight: 500;
	color: var(--red-text);
	letter-spacing: 0;
}
.display .q {
	font-style: normal;
	font-weight: 500;
	color: var(--petrol);
}
.lede {
	font-family: var(--font-body);
	font-size: clamp(0.92rem, 1.5vw, 1.12rem);
	line-height: 1.65;
	color: var(--ink-soft);
	max-width: 44ch;
}
.microlabel {
	font-family: var(--font-body);
	font-size: clamp(0.56rem, 0.8vw, 0.66rem);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--red-text);
}

/* ── line-mask reveal primitive ───────────────────
   Wrap each headline line in .ln (clips overflow, the reveal mask) and its
   text in .ln-in (the element GSAP animates -- translateY/clip-path in from
   below). CSS alone only sets up the mask; the transform/opacity keyframing
   is JS-driven (deck source: assets/site-morph.js), left to the Build agent.
   QA fix (wave4 round1, finding "cedilla dropped from conçu at 780x437/
   1024x600"): bumped from 0.12em to 0.3em as a general hardening for real
   descenders (g/j/p/q/y) and diacritics -- 0.12em was tight enough to risk
   clipping at some clamp()-driven sizes. NOT the fix for the cedilla bug
   itself, though: extensively verified live (bu, 780x437) that overflow was
   NOT the cause there -- toggling `.ln` to overflow:visible plus this same
   padding bump left the ç exactly as broken, and the WOFF2 (fonts/
   clash-display-600.woff2) was independently checked with fontTools: its
   "ccedilla" glyph has valid outline ink well below the baseline (yMin
   -229/1000em) and the correct advance width, so the glyph data itself is
   fine. The actual fault is a font-size-dependent rasterization dropout in
   this exact webfont/weight at small sizes (reproducible even on a fully
   static, non-animated deep-link boot -- not a GSAP/compositing artifact).
   Real fix: the width-scoped .offer-head-title floor bump below this block
   keeps the computed size out of the danger zone in the 700-1100px range
   the finding names. */
.ln {
	display: block;
	overflow: hidden;
	padding-bottom: 0.3em;
	margin-bottom: -0.3em;
}
.ln-in {
	display: inline-block;
	will-change: transform;
}