/* ============================================================
   DomanskiAI — Design System
   Aesthetic: blueprint / dark / production-spec
   ============================================================ */

/* Metric-matched fallback for Inter — prevents CLS when the
   variable Inter loads in from Google Fonts. Values per the
   well-known Vercel/Next.js Inter fallback overrides. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.40%;
}

:root {
  /* ============================================================
     Domanski.AI brand palette — v3 (warm blueprint identity).
     Electric green is gone; clay is the single accent.
     Tokens keep their v1 names so existing inline styles cascade
     automatically: `style="color: var(--green)"` resolves to clay,
     `--charcoal` resolves to ink, `--offwhite` to canvas, etc.
     ============================================================ */

  /* Brand-pack canonicals */
  --ink-brand:    #151210;    /* primary brand dark — warm cast */
  --canvas-brand: #F5EFE6;    /* primary brand light — warm off-white */
  --sand-brand:   #E6D2BA;    /* warm parchment panel */
  --clay-brand:   #C87555;    /* the single accent */
  --warm-slate:   #8B8277;    /* brand grey */

  /* Dark register — warm-ink family (legacy --charcoal-* mapping) */
  --charcoal:     #151210;
  --charcoal-2:   #1B1714;
  --charcoal-3:   #221C18;
  --line:         #2A241F;
  --line-2:       #3A312A;

  /* Light register — canvas (legacy --offwhite-* mapping) */
  --offwhite:     #F5EFE6;
  --offwhite-2:   #E1D8C6;

  /* Accent (clay) — green-named tokens are LEGACY ALIASES pointing
     at clay so every existing inline `var(--green)` reference
     auto-cascades to the new accent. */
  --green:        #C87555;
  --green-dim:    #9B513A;
  --green-glow:   rgba(200, 117, 85, 0.22);

  /* Slate — warm grey (replaces v1's cool slate) */
  --slate:        #8B8277;
  --slate-2:      #A89E91;
  --slate-3:      #C2B8AB;

  /* Warm-register tokens — sand panels and clay accent.
     Sand is the brand parchment; ink-* are the text scale on sand. */
  --sand:         #E6D2BA;
  --sand-2:       #D9C4A5;
  --sand-3:       #C5AC85;
  --sand-line:    #C5AC85;
  --paper:        #FBF6EB;
  --ink:          #15120F;
  --ink-2:        #3A2F25;
  --ink-3:        #6E5E4D;

  /* Clay tokens (canonical name; --green stays as legacy alias). */
  --clay:         #C87555;
  --clay-dim:     #9B513A;
  --clay-soft:    rgba(200, 117, 85, 0.10);
  --clay-glow:    rgba(200, 117, 85, 0.22);
  --clay-line:    rgba(200, 117, 85, 0.34);

  /* Transition tokens for :has()-driven section bleeds. */
  --bleed-h:      160px;
  --paper-grain:  repeating-linear-gradient(
    132deg,
    rgba(155, 81, 58, 0.024) 0 1px,
    transparent 1px 5px
  );
  --paper-grain-dark: repeating-linear-gradient(
    132deg,
    rgba(230, 210, 186, 0.014) 0 1px,
    transparent 1px 5px
  );

  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --container: 1240px;
  --gutter: 32px;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    /* Shared paper-grain across registers — visible only at the edges
       and through transparent sections; warm sections layer their own
       stronger grain on top. */
    var(--paper-grain-dark),
    var(--charcoal);
  color: var(--offwhite);
  font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ----- WARM BLUEPRINT GRID BACKGROUND -----
   Brand v3: sand strokes on ink instead of green-on-charcoal. The
   pattern mirrors the brand pack's warm-blueprint-pattern.svg — a
   minor 32px grid and a major 160px grid, both in muted sand. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    /* major grid (160px) — slightly stronger */
    linear-gradient(to right, rgba(230, 210, 186, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 210, 186, 0.055) 1px, transparent 1px),
    /* minor grid (32px) — barely there */
    linear-gradient(to right, rgba(230, 210, 186, 0.020) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 210, 186, 0.020) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 92% 80% at 50% 30%, black 30%, transparent 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  /* Clay atmospheric glow — replaces the v1 green radial. */
  background:
    radial-gradient(ellipse 55% 45% at 82% 5%, rgba(200, 117, 85, 0.14), transparent 60%),
    radial-gradient(ellipse 40% 35% at 8% 55%, rgba(230, 210, 186, 0.05), transparent 60%);
  pointer-events: none;
}

main, header, footer { position: relative; z-index: 1; }

/* ----- TYPOGRAPHY ----- */
h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--offwhite);
}
h1 { font-size: clamp(48px, 6.4vw, 96px); letter-spacing: -0.035em; }
h2 { font-size: clamp(36px, 4vw, 60px); letter-spacing: -0.028em; }
h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.015em; }
h4 { font-size: 18px; letter-spacing: -0.005em; }

p { margin: 0; color: var(--slate-3); }
p.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--offwhite-2); }

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

strong { font-weight: 700; color: var(--offwhite); }

::selection { background: var(--green); color: var(--charcoal); }

.green { color: var(--green); }
.slate { color: var(--slate-3); }
.dim { color: var(--slate); }

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
}

/* small caps technical label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--green);
  display: inline-block;
}
.eyebrow.no-bar::before { display: none; }

/* ----- LAYOUT ----- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

section {
  padding: 96px 0;
  position: relative;
}
/* Section dividers in dark territory — a near-invisible warm hairline.
   Crisp and quiet; the eye reads section change without a noisy line. */
section + section { border-top: 1px solid var(--line); }

/* Tick marks on section edges — blueprint registration corners.
   Implemented as background-image (not pseudo-elements) so ::before
   and ::after stay free for the warm-section boundary hairlines. */
section.ticked {
  background-image:
    linear-gradient(rgba(200, 117, 85, 0.62), rgba(200, 117, 85, 0.62)),
    linear-gradient(rgba(200, 117, 85, 0.62), rgba(200, 117, 85, 0.62));
  background-size: 80px 1px, 80px 1px;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
}
/* Combined rule for warm sections that also carry `.ticked` — keeps
   the paper-grain texture under the corner tick marks. */
section.section-sand.ticked {
  background-image:
    linear-gradient(rgba(200, 117, 85, 0.62), rgba(200, 117, 85, 0.62)),
    linear-gradient(rgba(200, 117, 85, 0.62), rgba(200, 117, 85, 0.62)),
    var(--paper-grain);
  background-size: 80px 1px, 80px 1px, auto;
  background-position: 0 0, 100% 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* ----- HEADER ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(21, 18, 16, 0.7);
  border-bottom: 1px solid var(--line);
}
.site-header .inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-wrap: nowrap;
  min-width: 0;
}
/* Typeset full Domanski.AI wordmark — Inter Black 900, brand-pack spec.
   Letter-spacing locked at -0.045em per the canonical Logo Pack. The dot
   and AI sub-spans carry NO margins of their own — Inter's natural metrics
   plus the parent letter-spacing give the correct optical separation.
   (Previous version applied margin-left: -0.08em on .dot and -0.04em on .ai,
   which collapsed the period onto the A. Removed 14 May 2026.) */
.brand-wordmark-type {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.045em;
  font-feature-settings: "ss01", "cv11";
  color: var(--offwhite);
  white-space: nowrap;
  display: inline-block;
  transition: transform .2s ease;
}
.brand-wordmark-type .dom { color: var(--canvas-brand); }
.brand-wordmark-type .dot { color: var(--clay); }
.brand-wordmark-type .ai  { color: var(--sand-brand); }
.brand-lockup:hover .brand-wordmark-type {
  transform: translateY(-1px);
}
/* Legacy lockup parts — kept as no-ops in case any page still references them. */
.brand-lockup .mark {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  flex-shrink: 0;
  border-radius: 9px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.brand-lockup:hover .mark {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px -10px var(--clay-glow);
}
.brand-lockup .mark > svg,
.brand-lockup .mark > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.brand-lockup .name {
  font-family: var(--font-sans);
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--offwhite);
  white-space: nowrap;
}
.brand-lockup .name .dot {
  color: var(--clay);
  margin-left: -0.012em;
}
.brand-lockup .name .ai  {
  color: var(--sand);
  margin-left: -0.062em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-link {
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-3);
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--offwhite); background: var(--charcoal-3); }
.nav-link.active { color: var(--offwhite); }

/* ----- BUTTONS ----- */
.btn {
  --pad-y: 14px;
  --pad-x: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--clay);
  color: var(--canvas-brand);
  border-color: var(--clay);
  box-shadow: 0 0 0 0 var(--clay-glow);
}
.btn-primary:hover {
  background: #D78D70;
  border-color: #D78D70;
  box-shadow: 0 0 0 6px var(--clay-glow);
}
.btn-primary .arrow { transition: transform .15s; }
.btn-primary:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  background: transparent;
  color: var(--offwhite);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--slate); background: var(--charcoal-2); }

.btn-sm { --pad-y: 9px; --pad-x: 14px; font-size: 13px; }

/* ----- PANELS / CARDS ----- */
.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(27, 23, 20, 0.85), rgba(21, 18, 16, 0.85));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.panel.outlined-green { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset, 0 0 40px -10px var(--green-glow); }

/* Corner brackets — used on hero frame */
.bracket-frame {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 48px;
  background: linear-gradient(180deg, rgba(27, 23, 20, 0.7), rgba(21, 18, 16, 0.4));
  border: 1px solid var(--line);
}
.bracket-frame::before,
.bracket-frame::after,
.bracket-frame > .bl,
.bracket-frame > .br {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border: 2px solid var(--green);
  pointer-events: none;
}
.bracket-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius-xl); }
.bracket-frame::after  { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-top-right-radius: var(--radius-xl); }
.bracket-frame > .bl   { bottom: -1px; left: -1px; border-right: 0; border-top: 0; border-bottom-left-radius: var(--radius-xl); }
.bracket-frame > .br   { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius-xl); }

/* ----- PILL TAG ----- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(200, 117, 85, 0.08);
  border: 1px solid rgba(200, 117, 85, 0.4);
  border-radius: 999px;
}
.tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.tag-slate {
  color: var(--slate-3);
  background: var(--charcoal-3);
  border-color: var(--line-2);
}

/* ----- UTILITIES ----- */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-12 { gap: 48px; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; }

/* ----- LINE NUMBERS (blueprint feel) ----- */
.linenum {
  font-family: var(--font-mono);
  font-size: 60px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.02em;
  line-height: 1;
}
.linenum-sm {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0.1em;
}

/* ----- IMAGE PLACEHOLDER ----- */
.placeholder {
  position: relative;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 10px, transparent 10px 20px),
    var(--charcoal-2);
  display: grid;
  place-items: center;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  min-height: 180px;
  text-align: center;
  padding: 24px;
}

/* ----- FOOTER ----- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
  position: relative;
}
.site-footer .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.site-footer .footer-h {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: 16px;
}
.site-footer a:not(.brand-lockup) { color: var(--slate-3); display: block; padding: 4px 0; font-size: 14px; }
.site-footer a:not(.brand-lockup):hover { color: var(--green); }
.site-footer .copy { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--slate); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* ----- DOTS / CONNECTORS ----- */
.connector-down {
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, var(--green) 0%, transparent 100%);
  margin: 0 auto;
  position: relative;
}
.connector-down::after {
  content: "▼";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--green);
  font-size: 10px;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 860px) {
  section { padding: 64px 0; }
  .site-footer .grid { grid-template-columns: 1fr; gap: 32px; }
  .site-header .nav-link:not(.btn) { display: none; }
  .bracket-frame { padding: 28px; }
  .panel { padding: 22px; }
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   WARM TIER — SYSTEM, not paint. v2 14 May 2026.
   ----------------------------------------------------------------
   Rhythm rule:
     DARK  = the machine    — hero, proof, receipts, the spec sheet,
                              numbers, gates, the operator's CV-grade
                              credentials.
     WARM  = the human      — process, methodology, craft, room-talk,
                              client stories, lessons, the workshop.

   Accent story:
     GREEN = action / live / system    — CTAs, live dots, pipeline
                                         chips, audit gates. Lives in
                                         both registers.
     CLAY  = editorial / craft / human — pain-pins, methodology layer
                                         numbers, pull-quotes, the
                                         hand-drawn underline, eyebrow
                                         bars in editorial sections.
                                         Lives in both registers.

   Transitions are :has()-driven. A dark section followed by a sand
   section paints a 120px sand fade-in at its bottom. A sand section
   followed by a dark section fades to transparent at its bottom. The
   blueprint grid is fixed behind everything, so warm sections cover
   it — the grid only peeks through the bleed zones, which is the
   point (paper dissolving into blueprint).

   See WARM-TIER-NOTES.md for the system-level rationale.
   ============================================================ */

/* ----- 1. WARM SECTION BASE ---------------------------------- */

section.section-sand {
  background:
    var(--paper-grain),
    var(--sand);
  color: var(--ink);
  isolation: isolate;

  /* Scope-shift the dark-register tokens to their warm equivalents
     so any reference inside this section — class-based OR inline
     style="color: var(--slate-3)" — resolves to an ink colour that
     hits WCAG AA on sand. This is the cleanest way to defeat the
     hundreds of inline color attributes the four pages already use
     without rewriting every inline style. */
  --slate: var(--ink-3);
  --slate-2: var(--ink-3);
  --slate-3: var(--ink-2);
  --offwhite: var(--ink);
  --offwhite-2: var(--ink-2);
  /* --green is NOT remapped — the action accent stays itself even
     in warm sections (CTAs, live dots, system signals). Where a green
     reference reads as editorial in a warm section, we override it
     with explicit per-element rules above. */
}
/* Kill the v1 universal border-top between sections inside the warm
   register — the clay hairlines drawn below do the boundary work. */
section.section-sand,
section + section.section-sand,
section.section-sand + section { border-top: 0; }

/* CRISP CLAY HAIRLINE — top boundary of warm sections.
   Sits flush at the top edge with a 1px clay rule that fades at the
   page gutters. Reads as a designed cut, not a gradient smear. */
section.section-sand::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--clay) 14%,
    var(--clay) 86%,
    transparent 100%
  );
  opacity: 0.62;
  pointer-events: none;
  z-index: 2;
}
/* Matching bottom hairline so the warm panel reads as a printed sheet
   with top + bottom edges, not a fade-in box. */
section.section-sand::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--clay) 14%,
    var(--clay) 86%,
    transparent 100%
  );
  opacity: 0.62;
  pointer-events: none;
  z-index: 2;
}
/* Hairlines suppressed between adjacent warm sections — a continuous
   warm block flows uninterrupted. */
section.section-sand + section.section-sand::before { display: none; }
section.section-sand:has(+ section.section-sand)::after { display: none; }

/* ----- 2. CORNER REGISTRATION MARKS ------------------------- */
/* The brand pack's L-bracket motif lives at the corners of every
   warm section — small clay marks that read as blueprint
   registration ticks (the mark in the brand sheet, scaled down). */
section.section-sand > .container::before,
section.section-sand > .container::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--clay), var(--clay)) left top / 14px 1.5px no-repeat,
    linear-gradient(var(--clay), var(--clay)) left top / 1.5px 14px no-repeat;
  opacity: 0.78;
}
section.section-sand > .container { position: relative; }
section.section-sand > .container::before { top: -28px; left: 0; }
section.section-sand > .container::after  { bottom: -28px; right: 0; transform: scale(-1, -1); }
/* Between adjacent warm sections, suppress the inner corner marks so
   only the outer edges of the warm block carry brackets. */
section.section-sand + section.section-sand > .container::before { display: none; }
section.section-sand:has(+ section.section-sand) > .container::after { display: none; }

/* Fallback for browsers without :has() — give every warm section
   solid sand and a 1px clay-dimmed border. Loses the gradient bleed
   but stays defensible. */
@supports not selector(:has(*)) {
  section:not(.section-sand) + section.section-sand,
  section.section-sand { border-top: 1px solid var(--clay-line); }
}

/* ----- 3. TYPE + COLOR INVERSIONS INSIDE WARM ---------------- */

section.section-sand h1,
section.section-sand h2,
section.section-sand h3,
section.section-sand h4 { color: var(--ink); }
section.section-sand p,
section.section-sand .lede { color: var(--ink-2); }
section.section-sand strong { color: var(--ink); }
section.section-sand .slate,
section.section-sand .slate-2,
section.section-sand .slate-3 { color: var(--ink-3); }
section.section-sand .dim { color: var(--ink-3); opacity: 0.9; }
section.section-sand a { color: var(--ink); }
section.section-sand a:hover { color: var(--clay); }

/* Eyebrow on warm: clay bar, ink-3 text. */
section.section-sand .eyebrow { color: var(--ink-3); }
section.section-sand .eyebrow::before { background: var(--clay); }

/* The .green text utility, used in headlines as the "green word"
   accent — in warm sections that becomes the clay word. */
section.section-sand .green { color: var(--clay); }

/* Selection color in warm sections */
section.section-sand ::selection { background: var(--clay); color: var(--paper); }

/* ----- 4. TICKED in WARM is automatic ------------------------- */
/* `.ticked` is now drawn via background-image and renders identically
   in dark and warm sections (clay either way). No override needed.
   The `.editorial` modifier from v2 is also no-op now — kept for
   backwards-compatibility in case any HTML still references it. */
.editorial { /* no-op alias */ }

/* ----- 5. TAGS + BUTTONS IN WARM ----------------------------- */
section.section-sand .tag {
  color: var(--clay);
  background: var(--clay-soft);
  border-color: var(--clay-line);
}
/* Live dot stays GREEN even on sand — green is the action/system accent,
   "live · running" is system, not editorial. */
section.section-sand .tag .dot {
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
}

section.section-sand .tag-slate {
  color: var(--ink-3);
  background: var(--sand-2);
  border-color: var(--sand-line);
}

/* Buttons on warm: primary stays green (action). Ghost re-skins. */
section.section-sand .btn-ghost {
  color: var(--ink);
  border-color: var(--ink-3);
  background: transparent;
}
section.section-sand .btn-ghost:hover {
  border-color: var(--ink);
  background: var(--sand-2);
}

/* ----- 6. CARDS / PANELS — UNIVERSAL WARM SHEET -------------- */
/* Most card-like surfaces in dark sections use a charcoal-with-line-2
   pattern. In warm sections they invert to white paper with sand-line.
   Inline styles in the HTML use the same colour vocabulary so the
   selectors below override them with !important where needed. */

section.section-sand .panel {
  background: var(--paper);
  border-color: var(--sand-line);
  color: var(--ink);
}
section.section-sand .panel.outlined-green {
  border-color: var(--clay);
  box-shadow: 0 0 0 1px var(--clay) inset, 0 0 40px -10px var(--clay-glow);
}

section.section-sand .placeholder {
  background:
    repeating-linear-gradient(45deg, rgba(200, 117, 85, 0.04) 0 10px, transparent 10px 20px),
    var(--sand-2);
  border-color: var(--sand-line);
  color: var(--ink-3);
}

/* ----- 7. PAIN-PIN ------------------------------------------- */
/* Editorial italic line pinning each layer to the operator pain. */
.pain-pin {
  display: block;
  font-size: 13px;
  font-style: italic;
  margin-top: 6px;
  margin-bottom: 10px;
  letter-spacing: 0;
  color: var(--clay);
}
section:not(.section-sand) .pain-pin {
  color: var(--clay);
  opacity: 0.85;
}
section.section-sand .pain-pin { color: var(--clay); opacity: 1; }

/* ----- 8. HERO HAND-DRAWN UNDERLINE -------------------------- */
/* The locked hero gesture stays; colour shifts to CLAY — first warm
   note inside dark territory. Foreshadowing in the literal first
   above-the-fold element. */
.hero-h1 .underline.handdrawn::after { display: none; }
.hero-h1 .underline.handdrawn .stroke-svg {
  position: absolute;
  left: -4px; right: -4px; bottom: -22px;
  width: calc(100% + 8px);
  height: 28px;
  pointer-events: none;
  overflow: visible;
}
.hero-h1 .underline.handdrawn .stroke-svg path {
  fill: none;
  stroke: var(--clay);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px var(--clay-glow));
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation: hand-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
}
@keyframes hand-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-h1 .underline.handdrawn .stroke-svg path {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* ----- 9. INDEX §04 METHODOLOGY LAYERS (WARM) ---------------- */
section.section-sand .stack { background: transparent; }
section.section-sand .layer {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .layer:hover {
  border-color: var(--clay);
  box-shadow: 0 14px 32px -20px rgba(40, 24, 14, 0.18);
}
section.section-sand .layer .lnum { color: var(--clay); opacity: 0.65; }
section.section-sand .layer .body h3 { color: var(--ink); }
section.section-sand .layer .body .sub { color: var(--clay); }
section.section-sand .layer .body .desc { color: var(--ink-2); }
section.section-sand .layer .bars span { background: var(--clay); opacity: 0.5; }
section.section-sand .layer-arrow { background: linear-gradient(180deg, var(--clay-dim), transparent); }
section.section-sand .layer-arrow::after { color: var(--clay-dim); }
section.section-sand .stack-footer {
  background: var(--sand-2);
  border-color: var(--sand-line);
  color: var(--ink-2);
}
section.section-sand .stack-footer .green { color: var(--clay); }
section.section-sand .stack-footer .underline { text-decoration-color: var(--clay); }

/* layer-pop reveal accent — clay version on warm */
section.section-sand .layer.is-in {
  animation: layer-pop-warm .6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes layer-pop-warm {
  0%   { box-shadow: 0 0 0 0 rgba(200, 117, 85, 0); }
  40%  { box-shadow: 0 0 0 6px rgba(200, 117, 85, 0.10); }
  100% { box-shadow: 0 0 0 0 rgba(200, 117, 85, 0); }
}

/* ----- 10. INDEX §05 STACK (TOOL CARDS) ---------------------- */
.stack-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}
@media (max-width: 900px) { .stack-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stack-tools { grid-template-columns: 1fr; } }

.tool-card {
  background: var(--paper);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .35s ease;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(40, 24, 14, 0.32);
  border-color: var(--clay);
}
.tool-card .logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  min-height: 28px;
}
.tool-card .logo-row .vendor-mark { height: 22px; width: auto; opacity: 0.92; }
.tool-card .logo-row .role-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  background: var(--clay-soft);
  border: 1px solid var(--clay-line);
  padding: 4px 8px;
  border-radius: 4px;
}
.tool-card .tool-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.tool-card .tool-desc { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.stack-portability {
  margin-top: 32px;
  padding: 22px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--clay);
  background: var(--clay-soft);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
.stack-portability strong { color: var(--clay); }

/* ----- 11. INDEX §02 PROCESS-STEP (now warm) ----------------- */
/* Inline styles in the HTML use rgba(17,20,24,*) gradients; the
   selectors below override via !important so the same card renders
   white in a warm section. */
section.section-sand .process-step {
  background: var(--paper) !important;
  border-color: var(--sand-line) !important;
  color: var(--ink);
}
section.section-sand .process-step.is-pivot {
  border-color: var(--clay) !important;
  background: linear-gradient(180deg, var(--paper), rgba(200, 117, 85, 0.05)) !important;
  box-shadow: 0 12px 30px -22px rgba(200, 117, 85, 0.35);
}
section.section-sand .process-step .num { color: var(--clay) !important; }
section.section-sand .process-step h3 { color: var(--ink) !important; }
section.section-sand .process-step p.slate { color: var(--ink-2) !important; }

/* ----- 12. INDEX §07 OPERATOR (warm portrait frame) ---------- */
section.section-sand .headshot {
  background: var(--sand-2);
  border-color: var(--sand-line);
}
section.section-sand .headshot::before,
section.section-sand .headshot::after {
  border-color: var(--clay);
}
section.section-sand .headshot .scan {
  background:
    linear-gradient(180deg, transparent 30%, rgba(230, 210, 186, 0.6) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 3px, rgba(200, 117, 85, 0.025) 3px 4px);
}
section.section-sand .headshot .tag-meta {
  color: var(--clay);
  background: rgba(251, 250, 246, 0.92);
  border-color: var(--clay-line);
}
section.section-sand .about-body p { color: var(--ink-2); }
section.section-sand .about-body p strong { color: var(--ink); }
section.section-sand .about-body .quote {
  background: rgba(200, 117, 85, 0.06);
  border-left-color: var(--clay);
  color: var(--ink);
}
section.section-sand .about-body .quote em { color: var(--ink-2); }
section.section-sand .about-body .quote .green { color: var(--clay); }

/* ----- 13. CLOSING / PULL-QUOTE BLOCKS ----------------------- */
/* .closing exists in both pages — italic pull-quote with green border.
   In editorial dark sections, switch to clay (foreshadow). In warm,
   stay clay. */
section.section-sand .closing {
  border-left-color: var(--clay);
  background: rgba(200, 117, 85, 0.05);
  color: var(--ink);
}
section.section-sand .closing .green { color: var(--clay); }

/* Inline-styled .closing (with hard-coded green border-left + green-glow
   bg) inside DARK editorial sections — opt-in via .closing.editorial */
.closing.editorial {
  border-left-color: var(--clay) !important;
  background: rgba(200, 117, 85, 0.06) !important;
}
.closing.editorial .green { color: var(--clay) !important; }
.closing.editorial strong { color: var(--clay) !important; }
.closing.editorial a { color: var(--clay) !important; border-bottom-color: var(--clay-line) !important; }

/* ----- 14. METHODOLOGY PAGE — LAYERS DETAIL ----------------- */
section.section-sand .layer-detail {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .layer-detail .top { border-bottom-color: var(--sand-line); }
section.section-sand .layer-detail .top .num { color: var(--clay); }
section.section-sand .layer-detail .top .role { color: var(--ink-3); }
section.section-sand .layer-detail .top h3 { color: var(--ink); }
section.section-sand .layer-detail .top .badge {
  color: var(--clay);
  background: var(--clay-soft);
  border-color: var(--clay-line);
}
section.section-sand .layer-detail .desc { color: var(--ink-2); }
section.section-sand .layer-detail .desc em { color: var(--ink-3) !important; }
section.section-sand .layer-detail strong[style*="green"] { color: var(--clay) !important; }
section.section-sand .layer-detail ul li[style*="border-top"] { border-top-color: var(--sand-line) !important; }
section.section-sand .layer-detail ul li span[style*="green"] { color: var(--clay) !important; }
section.section-sand .layer-detail ul li code { color: var(--ink) !important; background: var(--sand-2); padding: 1px 6px; border-radius: 4px; }

/* ----- 15. METHODOLOGY PAGE — PROSE / THESIS / NOT / ECON --- */
section.section-sand .marker .n { color: var(--clay); }
section.section-sand .marker h2 { color: var(--ink); }
section.section-sand .prose p { color: var(--ink-2); }
section.section-sand .prose p strong,
section.section-sand .prose p em { color: var(--ink); }
section.section-sand .prose p em { border-bottom-color: var(--clay); }
section.section-sand .prose p strong[style*="green"] { color: var(--clay) !important; }

/* Economics block — green = "In-Seat AI" cell; in a warm section
   that becomes a clay cell (the editorial counter-economic side). */
section.section-sand .econ .cell {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .econ .cell .lab { color: var(--ink-3); }
section.section-sand .econ .cell .big { color: var(--ink); }
section.section-sand .econ .cell .note { color: var(--ink-3); }
section.section-sand .econ .cell.green {
  border-color: var(--clay);
  background: rgba(200, 117, 85, 0.06);
}
section.section-sand .econ .cell.green .lab { color: var(--clay); }
section.section-sand .econ .cell.green .big { color: var(--clay) !important; }
section.section-sand .econ .cell.green .big .dim { color: var(--clay-dim) !important; }

/* NOT list — methodology page */
section.section-sand .not-list .item {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .not-list .item span.txt { color: var(--ink-2); }
section.section-sand .not-list .item strong { color: var(--ink); }
/* The red X token survives both registers — it's signalling "no",
   not part of the accent system. */

/* Worked example */
section.section-sand .we-grid .col {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .we-grid h3 { color: var(--clay); }
section.section-sand .we-grid li { border-top-color: var(--sand-line); }
section.section-sand .we-grid li .k { color: var(--ink-3); }
section.section-sand .we-grid li .v { color: var(--ink); }

section.section-sand .replaced .chip {
  background: var(--paper);
  border-color: var(--sand-line);
  color: var(--ink-2);
}
section.section-sand .replaced .chip::after { color: var(--clay); }
section.section-sand .replaced .chip .count { color: var(--ink); }

/* ----- 16. PRICING — TIER BLOCKS ----------------------------- */
section.section-sand .tier-block {
  background: var(--paper) !important;
  border-color: var(--sand-line) !important;
}
section.section-sand .tier-block::before {
  background: linear-gradient(90deg, var(--clay), transparent 60%) !important;
}
section.section-sand .tier-block:hover { border-color: var(--clay) !important; }
section.section-sand .tier-block .tier-num { color: var(--clay); }
section.section-sand .tier-block h2 { color: var(--ink); }
section.section-sand .tier-block .tier-meta { color: var(--ink-3); }
section.section-sand .tier-price-large .amount { color: var(--clay) !important; }
section.section-sand .tier-price-large .qualifier { color: var(--ink-3); }
section.section-sand .tier-body { color: var(--ink-2); }

section.section-sand .inclusions li {
  background: var(--sand-2);
  border-color: var(--sand-line);
  color: var(--ink);
}
section.section-sand .inclusions li::before { color: var(--clay); }

section.section-sand .credit-box {
  background: rgba(200, 117, 85, 0.06);
  border-color: var(--clay-line);
  color: var(--ink);
}
section.section-sand .credit-box strong { color: var(--clay); }

section.section-sand .roi-box {
  background: var(--sand-2);
  border-color: var(--sand-line);
}
section.section-sand .roi-box .roi-label { color: var(--clay); }
section.section-sand .roi-box p { color: var(--ink-2); }

section.section-sand .dual-price .price-variant {
  background: var(--sand-2);
  border-color: var(--sand-line);
}
section.section-sand .price-variant .v-name { color: var(--ink-3); }
section.section-sand .price-variant .v-price { color: var(--clay); }
section.section-sand .price-variant .v-detail { color: var(--ink-2); }

section.section-sand .exclusions { color: var(--ink-3); }

/* Pricing — what's not / floor */
section.section-sand .not-grid .not-item {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .not-grid .not-item .label { color: var(--ink-3); text-decoration-color: var(--ink-3); }
section.section-sand .not-grid .not-item .desc { color: var(--ink-2); }

section.section-sand .floor-block {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .floor-block::before { background: var(--clay); }
section.section-sand .floor-block p { color: var(--ink-2); }

/* Pricing — price-index sidebar lives only in the dark hero — no warm
   variant needed. */

/* ----- 17. CASE STUDY — PATTERN / WORKSHOP / LESSON --------- */
section.section-sand .pattern-pull { color: var(--ink); }
section.section-sand .pattern-pull .green { color: var(--clay); }

section.section-sand .conversion-box {
  background: rgba(200, 117, 85, 0.06);
  border-color: var(--clay-line);
}
section.section-sand .conversion-box .label { color: var(--clay); }
section.section-sand .conversion-box p { color: var(--ink); }
section.section-sand .conversion-box strong { color: var(--clay); }

section.section-sand .hour-block {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .hour-block:hover { border-color: var(--clay); }
section.section-sand .hour-block .hnum { color: var(--clay); }
section.section-sand .hour-block .hbody h3 { color: var(--ink); }
section.section-sand .hour-block .hbody .desc { color: var(--ink-2); }
section.section-sand .hour-arrow { background: linear-gradient(180deg, var(--clay-dim), transparent); }
section.section-sand .hour-arrow::after { color: var(--clay-dim); }

section.section-sand .lesson-body p { color: var(--ink-2); }
section.section-sand .lesson-body p strong { color: var(--ink); }

section.section-sand .hz-closing,
section.section-sand .hz-callout {
  background: rgba(200, 117, 85, 0.06) !important;
  border-color: var(--clay-line) !important;
  border-left-color: var(--clay) !important;
}
section.section-sand .hz-closing p,
section.section-sand .hz-callout p { color: var(--ink); }
section.section-sand .hz-closing .body,
section.section-sand .hz-callout .body { color: var(--ink-2); }

section.section-sand .video-placeholder {
  background: var(--sand-2);
  border-color: var(--sand-line);
}
section.section-sand .video-placeholder .vp-label { color: var(--ink-3); }
section.section-sand .video-placeholder .vp-text { color: var(--ink-2); }

/* Tally cards — appear on both registers; warm variant */
section.section-sand .tally-card {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .tally-card::before {
  background: linear-gradient(90deg, var(--clay), transparent);
}
section.section-sand .tally-card .tcard-num { color: var(--ink-3); }
section.section-sand .tally-card .tcard-role { color: var(--ink); }
section.section-sand .tally-card .tcard-status { color: var(--clay); }
section.section-sand .tally-note { color: var(--ink-3); }

/* Case study — build columns (rare in warm, but cover it) */
section.section-sand .build-col {
  background: var(--paper);
  border-color: var(--sand-line);
}
section.section-sand .build-col .col-label { color: var(--clay); border-bottom-color: var(--sand-line); }
section.section-sand .build-col ul li { color: var(--ink-2); border-top-color: var(--sand-line); }
section.section-sand .build-col ul li::before { color: var(--ink-3); }
section.section-sand .build-footer {
  background: var(--sand-2);
  border-color: var(--sand-line);
  color: var(--ink-3);
}

/* ----- 18. FINAL CTA INSIDE A WARM CONTEXT ------------------- */
/* The final CTA stays DARK on every page (it's the action moment).
   When the section immediately preceding it is warm, the bleed at
   that boundary does the visual handoff — no special-case needed. */

/* ----- 19. EYEBROW VARIANTS FOR DARK SECTIONS ---------------- */
/* Clay-bar eyebrow for editorial sections that LIVE in the dark
   register (closing CTA, editorial pull-quotes, lead-ins). This is
   how clay survives in 90% of the site even outside warm sections. */
.eyebrow.clay::before { background: var(--clay); }
.eyebrow.clay { color: var(--slate-3); }

/* ----- 20. WARM-PAGE STYLE OVERRIDES FOR DEEP-SET ELEMENTS --- */
/* The Mack Brands hero and methodology hero have inline-styled
   "// FOUR LAYERS · BREAK ONE · BREAK THE SYSTEM" descriptors that
   use --green. In their warm subsequent sections, links/highlights
   referencing --green inside inline styles need clay overrides via
   the warm wrapper. Most are handled above; this is a catch-all. */
section.section-sand [style*="--green"],
section.section-sand a[style*="green"] {
  /* covered by per-element rules above; this is a no-op placeholder
     for grep-discoverability. */
}

/* ----- 22. SURFACE-LEVEL WARM/DARK MIXING -------------------- */
/* Section-level rhythm is the cadence. SURFACE-level mixing is how
   the registers actually weave: a sand-paper card sits inside a
   charcoal section ("a workshop sheet pinned to the blueprint"), a
   charcoal-spec card sits inside a warm section ("a system insert
   on the editor's desk"). Both classes work in either register. */

.surface-warm {
  /* Token scope-shift inside this card — text inherits the warm
     vocabulary, including any inline style="color: var(--slate-3)". */
  --slate:    var(--ink-3);
  --slate-2:  var(--ink-3);
  --slate-3:  var(--ink-2);
  --offwhite: var(--ink);
  --offwhite-2: var(--ink-2);
  /* --green is NOT remapped — CTAs / live dots inside this card stay
     green (action accent). Editorial elements get explicit clay below. */
  background:
    var(--paper-grain),
    var(--paper) !important;
  border-color: var(--sand-line) !important;
  color: var(--ink) !important;
}
.surface-warm h1, .surface-warm h2, .surface-warm h3, .surface-warm h4 { color: var(--ink); }
.surface-warm strong { color: var(--ink); }
.surface-warm .green { color: var(--clay); }
.surface-warm .num,
.surface-warm .lnum,
.surface-warm .tier-num,
.surface-warm .tcard-num,
.surface-warm .small-tag,
.surface-warm .lab,
.surface-warm .col-label,
.surface-warm .roi-label,
.surface-warm .v-name,
.surface-warm .vp-label,
.surface-warm .label,
.surface-warm .descriptor { color: var(--clay) !important; }
/* The "big number" inside a warm-paper card (the .big in econ cells,
   the .v-price in pricing variants) — clay reads as the editorial
   accent without going neon-green on paper. */
.surface-warm .big,
.surface-warm .v-price,
.surface-warm .amount { color: var(--clay) !important; }
/* Components whose dark-register identity is a left-accent border
   (.hz-closing, .hz-callout, .closing, .floor-block) keep the left
   accent when promoted to .surface-warm — recoloured clay. */
.hz-closing.surface-warm,
.hz-callout.surface-warm,
.closing.surface-warm,
.floor-block.surface-warm { border-left-color: var(--clay) !important; }

/* Children whose dark-register style hardcodes rgba(11,14,18,*) or
   rgba(17,20,24,*) backgrounds — these don't reach through token
   remapping, so override explicitly when inside a warm-paper card.
   Covers pricing tier-block.surface-warm and any future warm-paper
   composite. */
.surface-warm .inclusions li {
  background: var(--sand-2) !important;
  border-color: var(--sand-line) !important;
  color: var(--ink) !important;
}
.surface-warm .inclusions li::before { color: var(--clay) !important; }
.surface-warm .credit-box {
  background: rgba(200, 117, 85, 0.06) !important;
  border-color: var(--clay-line) !important;
  color: var(--ink) !important;
}
.surface-warm .credit-box strong { color: var(--clay) !important; }
.surface-warm .roi-box {
  background: var(--sand-2) !important;
  border-color: var(--sand-line) !important;
}
.surface-warm .roi-box .roi-label { color: var(--clay) !important; }
.surface-warm .roi-box p { color: var(--ink-2) !important; }
.surface-warm .dual-price .price-variant {
  background: var(--sand-2) !important;
  border-color: var(--sand-line) !important;
}
.surface-warm .price-variant .v-name { color: var(--ink-3) !important; }
.surface-warm .price-variant .v-detail { color: var(--ink-2) !important; }
.surface-warm .exclusions { color: var(--ink-3) !important; }
.surface-warm .tier-meta { color: var(--ink-3) !important; }
.surface-warm .tier-body { color: var(--ink-2) !important; }
.surface-warm .qualifier { color: var(--ink-3) !important; }
.surface-warm .duration { color: var(--ink-3) !important; }
.surface-warm .body,
.surface-warm .desc,
.surface-warm p { color: var(--ink-2); }
.surface-warm .talk { color: var(--clay) !important; }
.surface-warm:hover { border-color: var(--clay) !important; }
.surface-warm a { color: var(--clay); }
.surface-warm a:hover { color: var(--clay-dim); }
/* When a warm-paper card has a green-tinted top accent bar (e.g.
   .tier-block::before), swap to clay. */
.surface-warm.tier-block::before {
  background: linear-gradient(90deg, var(--clay), transparent 60%) !important;
}
.surface-warm.tier-block:hover { border-color: var(--clay) !important; }
.surface-warm.shape-card:hover {
  border-color: var(--clay) !important;
  box-shadow: 0 20px 60px -20px var(--clay-glow) !important;
}
/* Warm-paper card sitting on a DARK section gets a soft clay glow
   beneath — same physics as the green CTA glow, opposite hue. The eye
   reads it as "another temperature of the same paper". */
section:not(.section-sand) .surface-warm {
  box-shadow:
    0 24px 60px -30px rgba(200, 117, 85, 0.30),
    0 0 0 1px var(--sand-line);
}
section:not(.section-sand) .surface-warm:hover {
  box-shadow:
    0 28px 70px -28px rgba(200, 117, 85, 0.42),
    0 0 0 1px var(--clay);
}

/* Spec-card variant — the opposite move. A charcoal-spec card inside
   a warm section. Used sparingly; reads as the system pinned to the
   editor's pinboard. */
.surface-spec {
  --offwhite: #F3EFE7;
  --offwhite-2: #E6E2DA;
  --slate-3: #B8C0CC;
  --slate-2: #9AA3B4;
  --slate: #818B9D;
  background:
    var(--paper-grain-dark),
    linear-gradient(180deg, rgba(27, 23, 20, 0.92), rgba(21, 18, 16, 0.96)) !important;
  border-color: var(--line-2) !important;
  color: var(--offwhite) !important;
}
.surface-spec h1, .surface-spec h2, .surface-spec h3, .surface-spec h4 { color: var(--offwhite); }
.surface-spec strong { color: var(--offwhite); }
.surface-spec p,
.surface-spec .desc,
.surface-spec .body { color: var(--slate-3); }
.surface-spec .num,
.surface-spec .lnum,
.surface-spec .tier-num,
.surface-spec .small-tag { color: var(--green) !important; }
section.section-sand .surface-spec {
  box-shadow:
    0 24px 60px -30px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--line-2);
}

/* ----- 23. CLAY ACCENTS ALREADY-LIVING IN DARK --------------- */
/* Methodology layer markers, layer sub-labels, layer-detail numbers,
   role labels, badges, etc. are EDITORIAL annotations — clay reads
   right across both registers. The dark-register colour was green
   throughout v1, which left clay isolated to warm sections. These
   rules ship clay into dark territory so the accent story holds. */

/* Methodology layer (index §04, when dark) */
section:not(.section-sand) .layer .lnum { color: var(--clay) !important; }
section:not(.section-sand) .layer .body .sub { color: var(--clay) !important; }
section:not(.section-sand) .layer .bars span { background: var(--slate-2); }
section:not(.section-sand) .layer:hover { border-color: var(--clay); }
section:not(.section-sand) .layer:hover .bars span { background: var(--clay); }
section:not(.section-sand) .layer-arrow { background: linear-gradient(180deg, var(--clay-dim), transparent); }
section:not(.section-sand) .layer-arrow::after { color: var(--clay-dim); }

/* Methodology layer-detail (methodology §02) */
section:not(.section-sand) .layer-detail .top .num { color: var(--clay) !important; }
section:not(.section-sand) .layer-detail .top .role { color: var(--clay) !important; opacity: 0.85; }
section:not(.section-sand) .layer-detail .top .badge {
  color: var(--clay) !important;
  background: var(--clay-soft) !important;
  border-color: var(--clay-line) !important;
}
section:not(.section-sand) .layer-detail .desc em { color: var(--slate-2) !important; }

/* Process-step nums (index §02) */
section:not(.section-sand) .process-step .num { color: var(--clay) !important; }
section:not(.section-sand) .process-step.is-pivot {
  border-color: var(--clay) !important;
  box-shadow: 0 0 0 1px var(--clay) inset, 0 18px 40px -22px var(--clay-glow);
}

/* Engagement shape-card nums (index §03) */
section:not(.section-sand) .shape-card .num { color: var(--clay) !important; }
/* hover stays green — action surface */

/* Hour-block nums (mack-brands §03 if dark) — already covered when warm */
section:not(.section-sand) .hour-block .hnum { color: var(--clay) !important; }
section:not(.section-sand) .hour-block:hover { border-color: var(--clay); }

/* Marker / TOC headers on methodology page (dark sections) */
section:not(.section-sand) .marker .n { color: var(--clay) !important; }

/* We-grid h3 labels (// The four layers in practice) */
section:not(.section-sand) .we-grid h3 { color: var(--clay) !important; }

/* Tier-block numbers (pricing dark sections) */
section:not(.section-sand) .tier-block .tier-num { color: var(--clay) !important; }
section:not(.section-sand) .tier-block::before {
  background: linear-gradient(90deg, var(--clay), transparent 60%) !important;
}
section:not(.section-sand) .tier-block:hover { border-color: var(--clay-line) !important; }

/* Build-col labels (mack-brands §04) */
section:not(.section-sand) .build-col .col-label { color: var(--clay) !important; }

/* Tally-card top accent (mack-brands §05) */
section:not(.section-sand) .tally-card::before {
  background: linear-gradient(90deg, var(--clay), transparent);
}
section:not(.section-sand) .tally-card .tcard-num { color: var(--ink-3); /* mute */ }

/* TOC hover (methodology hero) */
section:not(.section-sand) .m-hero .toc a:hover { color: var(--clay) !important; }

/* Hero descriptor — the // FOUR LAYERS · BREAK ONE strip on methodology page */
.m-hero .descriptor { color: var(--clay) !important; }

/* Closing pull-quote in dark sections — clay always when editorial */
section:not(.section-sand) .closing.editorial {
  border-left-color: var(--clay) !important;
  background: rgba(200, 117, 85, 0.06) !important;
  color: var(--offwhite-2) !important;
}

/* The about-body .quote on index §07 (now reverted to dark) */
section:not(.section-sand) .about-body .quote {
  border-left-color: var(--clay) !important;
  background: rgba(200, 117, 85, 0.06) !important;
}
section:not(.section-sand) .about-body .quote em { color: var(--slate-2); }

/* Linenum-sm becomes neutral mono (no green dominance on every label) */
.linenum-sm { color: var(--slate); }

/* Eyebrow bar on dark editorial sections — provide an opt-in clay
   variant. Used sparingly; green eyebrow stays the default. */
.eyebrow.editorial::before { background: var(--clay); }
.eyebrow.editorial { color: var(--slate-3); }

/* ============================================================
   25. HIGH-END FLOURISHES (v3.1 — 14 May 2026)
   Frosted glass, scroll-driven hairline draw-in, mouse-tracked
   hero light, scroll parallax helpers, refined hover surfaces.
   ============================================================ */

/* ----- 25a. FROSTED GLASS SURFACES --------------------------- */
/* The brand voice is "warm blueprint" — frosted-glass cards read as
   spec sheets pulled out of the blueprint, with the grid faintly
   visible through the surface. backdrop-filter is supported on all
   modern browsers; opt-out fallback uses solid bg. */

.spec-sheet,
.price-index,
.case-meta {
  background: rgba(27, 23, 20, 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(245, 239, 230, 0.06) !important;
  box-shadow:
    0 24px 60px -32px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 0 rgba(245, 239, 230, 0.04);
}
@supports not (backdrop-filter: blur(1px)) {
  .spec-sheet, .price-index, .case-meta {
    background: rgba(27, 23, 20, 0.92) !important;
  }
}

/* Live · Operator available pill — small frosted glass treatment so
   the live dot reads as floating on glass. */
.tag {
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
}
section.section-sand .tag {
  background: rgba(255, 251, 240, 0.55);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-color: var(--clay-line);
}

/* Proof case-study card (the .surface-warm Mack link) — already
   warm-paper; lift its hover state with a polished glass shadow. */
.proof-card.case {
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .15s;
}
.proof-card.case:hover { transform: translateY(-3px); }

/* Final CTA panel — give it backdrop-blur so the atmospheric blobs
   diffuse through it. Reads as a glass moment at the close. */
.final {
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

/* Tool cards on warm — already render as paper, but a hover lift +
   subtle clay-tinted ring polishes the cutting-edge feel. */
.tool-card {
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .25s ease;
  will-change: transform;
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 50px -22px rgba(40, 24, 14, 0.42),
    0 0 0 1px var(--clay-line);
}

/* ----- 25b. SECTION HAIRLINE DRAW-IN ------------------------- */
/* Warm-section clay hairlines start as scaled-to-0 along their axis
   and draw in once the section enters the viewport. Reads as the
   plotter laying down the registration rule. */
section.section-sand::before,
section.section-sand::after {
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 1.2s cubic-bezier(0.16, 0.84, 0.32, 1);
}
section.section-sand.is-in-section::before { transform: scaleX(1); }
section.section-sand.is-in-section::after  {
  transform: scaleX(1);
  transition-delay: .15s;
}

/* Corner registration brackets — same draw-in idea but as a fade +
   scale; they "snap into place" after the hairline draws. */
section.section-sand > .container::before,
section.section-sand > .container::after {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .6s ease, transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
section.section-sand.is-in-section > .container::before {
  opacity: 0.78;
  transform: scale(1);
  transition-delay: .35s;
}
section.section-sand.is-in-section > .container::after {
  opacity: 0.78;
  transform: scale(-1, -1);
  transition-delay: .45s;
}
@media (prefers-reduced-motion: reduce) {
  section.section-sand::before,
  section.section-sand::after { transform: scaleX(1); transition: none; }
  section.section-sand > .container::before,
  section.section-sand > .container::after { opacity: 0.78; transform: scale(1); transition: none; }
  section.section-sand > .container::after { transform: scale(-1, -1); }
}

/* ----- 25c. MOUSE-TRACKED HERO LIGHT ------------------------- */
/* A soft clay radial follows the cursor inside .hero. Inserted by JS
   so it only exists where pointer + reduced-motion allow. */
.hero-mouse-light {
  position: absolute;
  pointer-events: none;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(200, 117, 85, 0.16) 0%,
    rgba(200, 117, 85, 0.06) 35%,
    transparent 70%);
  filter: blur(24px);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 0;
  mix-blend-mode: screen;
}
.hero { isolation: isolate; }
.hero.has-mouse-light .hero-mouse-light { opacity: 1; }
.hero > *:not(.hero-mouse-light) { position: relative; z-index: 1; }

/* ----- 25d. SCROLL PARALLAX HELPERS -------------------------- */
/* JS sets --p-y on `[data-parallax]` elements; CSS applies it as a
   transform. Subtle by default (max ±60px) so the page feels
   layered without being seasick. */
[data-parallax] {
  transform: translate3d(0, var(--p-y, 0px), 0);
  will-change: transform;
}
/* When parallax composes with reveal, let the reveal's slide-up start
   pose win until `.is-in` fires. Then the parallax position takes
   over and animates in via the reveal's own transition (which
   already covers `transform`). */
[data-parallax][data-reveal]:not(.is-in) {
  transform: translate3d(0, 16px, 0);
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none; }
}

/* ----- 25e. HEADER GLASS REFINEMENT -------------------------- */
/* Header already has backdrop-filter; deepen the saturate to read as
   premium glass, and add a hairline of clay at the bottom edge once
   scrolled (matches the warm section hairline language). */
.site-header {
  background: rgba(21, 18, 16, 0.55) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.site-header.is-scrolled {
  background: rgba(21, 18, 16, 0.78) !important;
  border-bottom: 1px solid var(--line);
  box-shadow:
    0 1px 0 0 var(--clay-line),
    0 8px 28px -16px rgba(0, 0, 0, 0.6);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(21, 18, 16, 0.94) !important; }
}

/* ----- 25f. SECTION CORNER BRACKETS — small refinement ------- */
/* Add a 1px clay tip at the bracket point so the L reads as a
   plotter mark, not just two crossing lines. */
section.section-sand > .container::before,
section.section-sand > .container::after {
  width: 16px;
  height: 16px;
}

/* ----- 25g. ASIDE / SPEC-SHEET top accent — clay -------------- */
/* The .spec-sheet::before is a top gradient bar; recolour to clay
   (was green / now clay via legacy alias). Tighten opacity. */
.spec-sheet::before,
.price-index::before,
.case-meta::before {
  background: linear-gradient(90deg, transparent, var(--clay) 50%, transparent) !important;
  opacity: 0.7;
}

/* ----- 24. PRINT (sand reads cleaner than charcoal) ---------- */
@media print {
  body { background: var(--sand); color: var(--ink); }
  body::before, body::after, .atmos { display: none !important; }
  section { background: var(--sand) !important; }
}