/* Extrian brand tokens */
:root {
  --ex-cream: #f0eee9;
  --ex-cream-2: #e8e4dc;
  --ex-cream-3: #ddd7cb;
  --ex-ink: #1a1612;
  --ex-ink-2: #2a241e;
  --ex-mute: #6b5f52;
  --ex-mute-2: #8c8074;
  --ex-rule: rgba(26, 22, 18, 0.12);
  --ex-rule-strong: rgba(26, 22, 18, 0.28);

  /* Single signal accent — "live" coral */
  --ex-signal: oklch(0.68 0.22 30);
  --ex-signal-glow: oklch(0.68 0.22 30 / 0.35);
  --ex-signal-soft: oklch(0.68 0.22 30 / 0.12);

  --ex-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --ex-sans: 'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
  --ex-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --ex-nav-h: 60px;

  /* Tweaks-driven defaults — overridden at runtime by home-tweaks.jsx */
  --ex-h1-family: var(--ex-serif);
  --ex-h1-weight: 300;
  --ex-h1-tracking: -0.025em;
  --ex-italic-style: italic;
  --ex-h1-scale: 1;
  --ex-h2-scale: 1;
  --ex-section-pad: 110px;
  --ex-content-max: 1320px;
  --ex-base: 16px;
}

/* Tweaks: apply scale factors + voice family overrides to all hero/section heads */
h1 {
  font-family: var(--ex-h1-family) !important;
  font-weight: var(--ex-h1-weight) !important;
  letter-spacing: var(--ex-h1-tracking) !important;
  font-size: calc(clamp(40px, 4.4vw, 70px) * var(--ex-h1-scale)) !important;
}
h2 {
  font-family: var(--ex-h1-family) !important;
  font-weight: var(--ex-h1-weight) !important;
  letter-spacing: var(--ex-h1-tracking) !important;
  font-size: calc(clamp(40px, 4.5vw, 60px) * var(--ex-h2-scale)) !important;
}
h1 em, h2 em, p em {
  font-style: var(--ex-italic-style) !important;
}

/* Density: scale section vertical padding (selector targets the inner pad block) */
[data-density="tight"] [id="annotation"],
[data-density="tight"] [id="domains"] section {
  padding-top: 64px !important;
  padding-bottom: 28px !important;
}
[data-density="cinematic"] [id="annotation"],
[data-density="cinematic"] [id="domains"] section {
  padding-top: 160px !important;
  padding-bottom: 48px !important;
}

/* Chrome: when accent is killed, dim the italic emphasis to ink */
[data-signal="chrome"] em {
  color: var(--ex-ink) !important;
  opacity: 0.7;
}

/* When the hero constellation is fully lit, the HERO section transforms only.
   Page-wide effects intentionally avoided — this is a hero-only moment. */
html[data-constellation-lit="1"] .hero-frame {
  background: radial-gradient(80% 100% at 50% 50%, oklch(0.96 0.025 35), var(--ex-cream));
  box-shadow: inset 0 0 0 1px oklch(0.68 0.22 30 / 0.35),
              inset 0 0 80px oklch(0.68 0.22 30 / 0.1);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
html[data-constellation-lit="0"] .hero-frame {
  transition: background 1s ease, box-shadow 1s ease;
}
/* Corner crosshair brackets fade in at the four corners of the hero canvas */
html[data-constellation-lit="1"] .hero-frame::before,
html[data-constellation-lit="1"] .hero-frame::after {
  content: '';
  position: absolute; width: 24px; height: 24px;
  border: 1.5px solid var(--ex-signal);
  pointer-events: none;
  animation: ex-bracket 0.9s ease-out;
}
html[data-constellation-lit="1"] .hero-frame::before {
  top: 12px; left: 12px;
  border-right: none; border-bottom: none;
}
html[data-constellation-lit="1"] .hero-frame::after {
  bottom: 12px; right: 12px;
  border-left: none; border-top: none;
}
@keyframes ex-bracket {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ex-cream);
  color: var(--ex-ink);
  font-family: var(--ex-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Shared hero artboard chrome */
.hero-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--ex-cream);
  overflow: hidden;
}

.hero-meta {
  position: absolute;
  font-family: var(--ex-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ex-mute);
}

.press-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--ex-ink);
  color: var(--ex-cream);
  font-family: var(--ex-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  border: none;
  position: relative;
  transition: transform 0.1s;
}
.press-pill:active { transform: scale(0.98); }
.press-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ex-mute-2);
  transition: background 0.2s, box-shadow 0.2s;
}
.press-pill[data-pressed="true"] .dot {
  background: var(--ex-signal);
  box-shadow: 0 0 0 3px var(--ex-signal-soft), 0 0 16px var(--ex-signal-glow);
}

.kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(240,238,233,0.12);
  border: 1px solid rgba(240,238,233,0.18);
  font-family: var(--ex-mono);
  font-size: 10px;
}

/* =========================================================================
   MOBILE — single breakpoint at 760px. iPhone (375–430px) is the target.
   Strategy: collapse pinned scroll-scrub sections to single-viewport static
   blocks (animations show their final state), stack 2-column grids, hide
   the scroll rail, swap nav for a hamburger.
   ========================================================================= */

/* a tag we add to the html element from JS once we detect mobile, so we
   can scope JS-side layout flips. CSS already does the heavy lifting. */

@media (max-width: 760px) {
  :root {
    --ex-section-pad: 64px;
    --ex-nav-h: 56px;
  }

  /* ---- Nav ---- */
  /* Desktop nav links + CTA hidden; logo + hamburger remain. */
  .ex-nav-links { display: none !important; }
  .ex-nav-cta { display: none !important; }
  .ex-nav-hamburger { display: inline-flex !important; }
  header[data-ex-nav] > div {
    padding: 12px 20px !important;
  }

  /* Open mobile menu overlay */
  .ex-mobile-menu {
    position: fixed;
    inset: var(--ex-nav-h) 0 0 0;
    z-index: 49;
    background: var(--ex-cream);
    padding: 32px 28px;
    display: flex; flex-direction: column;
    gap: 22px;
    overflow-y: auto;
  }
  .ex-mobile-menu a {
    font-family: var(--ex-serif);
    font-weight: 300;
    font-size: 36px;
    color: var(--ex-ink);
    text-decoration: none;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--ex-rule);
    padding-bottom: 14px;
  }
  .ex-mobile-menu a em { color: var(--ex-signal); font-style: italic; }
  .ex-mobile-menu .ex-mm-cta {
    margin-top: 12px;
    background: var(--ex-ink);
    color: var(--ex-cream);
    padding: 18px 22px;
    border-radius: 6px;
    font-family: var(--ex-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    text-align: center;
  }

  /* ---- Hide the scroll rail on mobile ---- */
  .ex-scroll-rail { display: none !important; }

  /* ---- PinnedScrub: collapse to single viewport, no scrub ---- */
  /* The outer <section> normally is (scrubLength+1)*100vh. Override to auto
     so it just sits at its natural content height. The inner sticky div
     becomes static so the animation freezes at its initial render state. */
  section[data-ex-pin] {
    height: auto !important;
    min-height: 0 !important;
  }
  section[data-ex-pin] > div[data-ex-pin-inner] {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* ---- Hero ---- */
  .ex-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px 20px 16px !important;
  }
  .ex-hero-headline {
    font-size: 44px !important;
    line-height: 1 !important;
  }
  .ex-hero-sub {
    font-size: 16px !important;
  }
  .ex-hero-visual {
    height: 360px !important;
    min-height: 360px !important;
  }
  .ex-hero-readout {
    padding: 12px 20px !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    font-size: 9px !important;
  }
  .ex-hero-readout > span:nth-child(n+4) { display: none; }

  /* ---- Stats strip ---- */
  .ex-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .ex-stats-grid > :first-child { grid-column: 1 / -1; max-width: none !important; }
  .ex-stats-grid .ex-stat-num { font-size: 44px !important; }

  /* ---- Annotation ---- */
  .ex-annot-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ex-annot-grid > :first-child { height: 420px !important; }
  .ex-annot-header {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  .ex-annot-header > p { max-width: 100% !important; text-align: left !important; }

  /* ---- Domains ---- */
  .ex-section-padded {
    padding: 64px 20px 40px !important;
  }
  .ex-h2 {
    font-size: 38px !important;
  }

  /* ---- Capability ---- */
  .ex-capability {
    padding: 64px 20px 40px !important;
  }
  .ex-capability-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ex-capability-trait { font-size: 10px !important; width: 110px !important; }

  /* ---- Process ---- */
  .ex-process-steps {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ex-process-connector { display: none !important; }

  /* ---- Atlas grid: 8 cols → 4 cols on mobile ---- */
  .ex-atlas-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ---- CTA / Footer ---- */
  .ex-cta {
    padding: 64px 20px !important;
  }
  .ex-cta h2 { font-size: 40px !important; }
  .ex-cta-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ex-footer {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 20px !important;
  }

  /* ---- Tweaks panel: scale down on mobile ---- */
  .tweaks-panel { transform: scale(0.85); transform-origin: bottom right; }
}