/* ==========================================================================
   AGENTGOD — Design System
   Creator and Destroyer of Agents
   --------------------------------------------------------------------------
   1.  Tokens            13. Quote
   2.  Reset             14. Terminal
   3.  Atmosphere        15. Diagram
   4.  Layout            16. Grids & cards
   5.  Typography        17. Gallery
   6.  Nav               18. CTA
   7.  Buttons           19. Footer
   8.  Asset slots       20. Scroll reveal
   9.  Hero              21. Page header
   10. Marquee           22. Docs
   11. Section head      23. Editorial
   12. Duality           24. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — warm-neutral blacks, filmic rather than blue-black */
  --void:        #08080A;
  --ink:         #0C0C0E;
  --surface:     #111113;

  /* Text — off-white with a touch of warmth so it reads as film, not screen */
  --text:        #EDEBE7;
  --text-dim:    #9A978F;
  --text-faint:  #5D5B57;

  /* Hairlines */
  --line:        rgba(237, 235, 231, 0.09);
  --line-strong: rgba(237, 235, 231, 0.18);

  /* The duality. Cold light creates; ember destroys. */
  --create:      #A9C6E4;
  --create-dim:  rgba(169, 198, 228, 0.14);
  --destroy:     #C9552B;
  --destroy-dim: rgba(201, 85, 43, 0.14);

  /* Type */
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale */
  --t-h1:    clamp(1.875rem, 3.4vw, 3.125rem);
  --t-h2:    clamp(1.5rem, 2.4vw, 2.125rem);
  --t-h3:    clamp(1.0625rem, 1.25vw, 1.1875rem);
  --t-quote: clamp(1.375rem, 2.5vw, 2.375rem);
  --t-body:  clamp(0.875rem, 0.9vw, 0.9375rem);
  --t-micro: 0.625rem;

  /* Space */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.875rem;
  --s-4:  1.25rem;
  --s-5:  2rem;
  --s-6:  3rem;
  --s-7:  3.25rem;
  --s-8:  4.5rem;
  --s-9:  6rem;
  --s-10: 7.5rem;

  /* Layout */
  --gutter:    clamp(1.25rem, 5vw, 5rem);
  --measure:   1440px;
  --measure-n: 1120px;
  --prose:     62ch;

  /* Motion — slow, cinematic, no bounce */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur:      0.6s;
  --dur-slow: 1.1s;

  --nav-h: 72px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-5));
}

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--create); color: var(--void); }

:focus-visible { outline: 1px solid var(--create); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. ATMOSPHERE — grain + vignette, fixed above the page
   -------------------------------------------------------------------------- */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

.atmosphere__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 800ms steps(4) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

.atmosphere__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 95% at 50% 40%, transparent 52%, rgba(0, 0, 0, 0.3) 100%);
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: var(--measure-n); }

.section {
  position: relative;
  padding-block: var(--s-9);
  border-top: 1px solid var(--line);
}

.section--tight { padding-block: var(--s-8); }
.section--tall  { padding-block: var(--s-10); }
.section--seam  { border-top: 0; }

.prose { max-width: var(--prose); }

.rule { height: 1px; background: var(--line); border: 0; }

.stack-5 { display: flex; flex-direction: column; gap: var(--s-5); }

/* Two equal columns that collapse on small screens */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-7);
  align-items: start;
}

/* Utilities — deliberately few */
.line { display: block; }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.w-34 { max-width: 34ch; }
.w-42 { max-width: 42ch; }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.eyebrow--bare::after { display: none; }
.eyebrow__index { color: var(--create); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display--1 { font-size: var(--t-h1); }

.heading {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.lede {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-dim);
}

.body-dim   { color: var(--text-dim); }
.body-faint { color: var(--text-faint); }
.ink-create  { color: var(--create); }
.ink-destroy { color: var(--destroy); }
.italic { font-style: italic; }

/* --------------------------------------------------------------------------
   6. NAV
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nav.is-stuck {
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.wordmark { display: flex; flex-direction: column; gap: 2px; line-height: 1; }

.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wordmark__sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.nav__link {
  position: relative;
  padding-block: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--create);
  transition: width var(--dur) var(--ease);
}

.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--text); }

.nav__toggle {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  margin-right: -8px;
}

.nav__toggle span {
  position: absolute;
  left: 9px;
  width: 22px; height: 1px;
  background: var(--text);
  transition: transform var(--dur) var(--ease);
}

.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 23px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-width: 15rem;
  width: fit-content;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--create);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}

.btn:hover { color: var(--void); border-color: var(--create); }
.btn:hover::before { transform: translateY(0); }

.btn__arrow { flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  min-width: 0;
  gap: var(--s-3);
  padding-inline: 0;
  border-color: transparent;
  color: var(--text-dim);
}

.btn--ghost::before { display: none; }
.btn--ghost:hover { color: var(--create); border-color: transparent; }

.btn--compact { min-width: 0; gap: var(--s-4); padding: 0.625rem var(--s-4); }

/* --------------------------------------------------------------------------
   8. ASSET SLOTS
   Drop a file at the given src and it replaces the frame automatically.
   -------------------------------------------------------------------------- */

.slot {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

.slot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}

/* Placeholder state — applied by JS when the file is absent */
.slot.is-empty {
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(237, 235, 231, 0.022) 11px 12px),
    var(--surface);
}

.slot.is-empty > img { display: none; }

.slot.is-empty::after {
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  text-align: center;
  white-space: pre-line;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 2.1;
}

/* Corner ticks — reads as a camera frame */
.slot::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left  top    / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left  top    / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right top    / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right top    / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left  bottom / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left  bottom / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right bottom / 1px 14px no-repeat;
}

.slot--bare::before { display: none; }

/* Aspect variants */
.slot--21x9 { aspect-ratio: 21 / 9; }
.slot--16x9 { aspect-ratio: 16 / 9; }
.slot--4x3  { aspect-ratio: 4 / 3; }
.slot--1x1  { aspect-ratio: 1 / 1; }
.slot--3x4  { aspect-ratio: 3 / 4; }
.slot--2x3  { aspect-ratio: 2 / 3; }
.slot--3x1  { aspect-ratio: 3 / 1; }

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + var(--s-6));
  overflow: hidden;
}

.hero__stage { position: absolute; inset: 0; z-index: 0; }

.hero__stage .slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  background: var(--void);
  aspect-ratio: auto;
}

.hero__stage .slot > img {
  filter: saturate(0.78) contrast(1.05) brightness(0.94);
  transform: scale(1.04);
  animation: driftIn 3.2s var(--ease) both;
  /* The key art is portrait; the hero is a wide viewport. Bias the crop
     upward so the wordmark and eye land in the empty space above the
     headline instead of being cut in half. On tall/narrow screens the whole
     image fits vertically and this is a no-op. */
  object-position: center 32%;
}

/* Past ~2:1 the vertical crop is severe enough that the figure's head starts
   to clip — ease the bias back toward centre. */
@media (min-aspect-ratio: 2 / 1) {
  .hero__stage .slot > img { object-position: center 42%; }
}

@keyframes driftIn {
  from { transform: scale(1.1); opacity: 0; }
  to   { transform: scale(1.04); opacity: 1; }
}

/* Mask the art into the page so it reads as atmosphere, not a photo */
.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, var(--void) 0%, rgba(8, 8, 10, 0.7) 26%, rgba(8, 8, 10, 0.1) 62%, rgba(8, 8, 10, 0.34) 100%),
    radial-gradient(70% 55% at 50% 30%, rgba(169, 198, 228, 0.07), transparent 70%);
}

/* --- Video hero ----------------------------------------------------------
   The edit is the subject; the copy supports it. Three things follow from
   that: the iframe is cover-sized rather than letterboxed, the full-frame
   scrim is lightened so the footage actually reads, and legibility is bought
   back with a local pool behind the text instead of by dimming everything.
   ------------------------------------------------------------------------ */

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  /* Leaving .is-playing — the long dissolve down to the still underneath.
     Keep in step with FADE_OUT in js/main.js → initHeroVideo. */
  transition: opacity 1800ms var(--ease);
}

/* Entering — quick, because the edit is what should greet you */
.hero__video.is-playing {
  opacity: 1;
  transition: opacity 700ms var(--ease);
}

.hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;

  /* A 16:9 box scaled to cover. Exactly one of these two pairs can win at
     any given viewport ratio — wide viewports resolve from vw, tall ones
     from svh — so the box stays 16:9 and the player never letterboxes. */
  width: 100vw;
  height: 56.25vw;
  min-width: 177.7778svh;
  min-height: 100svh;

  /* Atmosphere, not a video to interact with: never surface player controls
     on hover, and never swallow a click meant for the page. */
  pointer-events: none;
}

/* Let more of the footage through than a still would need */
.hero--video .hero__stage::after {
  background:
    linear-gradient(to top, var(--void) 0%, rgba(8, 8, 10, 0.72) 15%, rgba(8, 8, 10, 0.04) 46%, rgba(8, 8, 10, 0.18) 100%),
    radial-gradient(75% 60% at 50% 35%, rgba(169, 198, 228, 0.05), transparent 70%);
}

/* Local scrim: keeps the copy legible without flattening the whole frame */
.hero--video .hero__body { position: relative; }

.hero--video .hero__body::before {
  content: "";
  position: absolute;
  inset: -30% -30% -80% -60%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 92% at 22% 78%, rgba(8, 8, 10, 0.88), rgba(8, 8, 10, 0.4) 55%, transparent 75%);
}

/* Type steps back — present, no longer the loudest thing on screen */
.hero--video .hero__title {
  font-size: clamp(1.875rem, 3.6vw, 3.5rem);
  line-height: 0.98;
  max-width: 24ch;
}

.hero--video .hero__lede {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  max-width: 40ch;
  color: var(--text-dim);
}

.hero--video .hero__actions { margin-top: var(--s-5); }

.hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--s-7);
}

.hero__title { margin-top: var(--s-5); max-width: 20ch; }
.hero__lede  { margin-top: var(--s-5); max-width: 46ch; }

.hero__actions {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
}

/* Meta strip along the bottom edge */
.hero__meta { position: relative; z-index: 1; border-top: 1px solid var(--line); }

.hero__meta-inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.metric {
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  border-left: 1px solid var(--line);
}

.metric:first-child { border-left: 0; padding-left: 0; }

.metric__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
}

.metric__key {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   10. MARQUEE — one signature strip, kept quiet
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--s-3);
  background: var(--ink);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-right: var(--s-6);
  flex: none;
}

.marquee__item {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.marquee__star { color: var(--create); opacity: 0.5; }

@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   11. SECTION HEAD — shared two-column intro
   -------------------------------------------------------------------------- */

.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5) var(--s-7);
  align-items: start;
}

.head__eyebrow { grid-column: 1 / -1; margin-bottom: var(--s-4); }
.head__title { grid-column: 1; }
.head__aside { grid-column: 2; padding-top: var(--s-2); }

.head--stack { grid-template-columns: 1fr; max-width: 60ch; }
.head--stack .head__title,
.head--stack .head__aside { grid-column: 1; }

/* Control band. The prose here is max-width capped, so a 1fr/1fr split left a
   dead channel down the middle with the portrait stranded on the far gutter.
   A fixed, narrower image column inside a narrower shell closes that up, and
   centring balances the portrait against a much taller text column. */
.control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: var(--s-7);
  align-items: center;
}

/* --------------------------------------------------------------------------
   12. DUALITY — create / destroy split
   -------------------------------------------------------------------------- */

.duality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  margin-top: var(--s-7);
}

.pane {
  position: relative;
  padding: var(--s-5) clamp(1.125rem, 2.2vw, 2.25rem) var(--s-6);
  overflow: hidden;
  isolation: isolate;
}

.pane + .pane { border-left: 1px solid var(--line); }

.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.pane:hover::before { opacity: 1; }
.pane--create::before  { background: radial-gradient(90% 70% at 50% 100%, var(--create-dim), transparent 70%); }
.pane--destroy::before { background: radial-gradient(90% 70% at 50% 100%, var(--destroy-dim), transparent 70%); }

.pane__glyph { width: 44px; height: 44px; margin-bottom: var(--s-4); }
.pane--create  .pane__glyph { color: var(--create); }
.pane--destroy .pane__glyph { color: var(--destroy); }

.pane__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.pane--create  .pane__title { color: var(--create); }
.pane--destroy .pane__title { color: var(--destroy); }

.pane__text { margin-top: var(--s-4); color: var(--text-dim); max-width: 34ch; }

.pane__list {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.pane__list li {
  display: flex;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pane__list li::before { content: "—"; color: var(--text-faint); }

/* --------------------------------------------------------------------------
   13. QUOTE
   -------------------------------------------------------------------------- */

.quote {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
}

.quote__stage { position: absolute; inset: 0; z-index: 0; }

.quote__stage .slot { position: absolute; inset: 0; border: 0; aspect-ratio: auto; }
.quote__stage .slot > img { filter: saturate(0.62) contrast(1.08) brightness(0.88); }

.quote__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 8, 10, 0.86) 0%, rgba(8, 8, 10, 0.5) 45%, rgba(8, 8, 10, 0.14) 100%);
}

.quote__body { position: relative; z-index: 1; padding-block: var(--s-10); }

.quote__mark {
  font-family: var(--font-display);
  font-size: var(--t-quote);
  line-height: 1.16;
  font-style: italic;
  letter-spacing: -0.01em;
  max-width: 26ch;
  text-wrap: balance;
}

.quote__coda {
  display: block;
  margin-top: var(--s-4);
  font-style: normal;
  color: var(--create);
}

.quote__cite {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  max-width: 26ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   14. TERMINAL
   -------------------------------------------------------------------------- */

.terminal {
  border: 1px solid var(--line);
  background: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 2;
}

.terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.terminal__bar > span { display: flex; align-items: center; gap: var(--s-2); }

.terminal__dot {
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--create);
  box-shadow: 0 0 8px var(--create);
  animation: pulse 2.4s var(--ease-io) infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.terminal__log {
  padding: var(--s-4);
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.terminal__line { display: flex; gap: var(--s-3); color: var(--text-dim); }
.terminal__line > .caret { flex: none; color: var(--create); }
.terminal__line[data-tone="create"]  { color: var(--create); }
.terminal__line[data-tone="destroy"] { color: var(--destroy); }
.terminal__line[data-tone="destroy"] > .caret { color: var(--destroy); }
.terminal__line[data-tone="dim"] { color: var(--text-faint); }

.terminal__cursor {
  display: inline-block;
  width: 6px; height: 1em;
  background: var(--create);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(2) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   15. ORCHESTRATION DIAGRAM
   -------------------------------------------------------------------------- */

.diagram {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-4);
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(169, 198, 228, 0.045), transparent 70%),
    var(--ink);
}

.node {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 13rem;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  text-align: center;
}

.node__name {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.node__role {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--create);
}

.node--you {
  min-width: 0;
  padding-inline: var(--s-4);
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
}

.node--you .node__role { color: var(--text-faint); }

.wire { width: 1px; height: var(--s-5); background: linear-gradient(to bottom, var(--line-strong), var(--line)); }
.wire--destroy { background: linear-gradient(to bottom, var(--destroy-dim), rgba(201, 85, 43, 0.5)); }

.fanout {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  padding-top: var(--s-5);
}

.fanout::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: var(--line-strong);
}

.worker {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding-top: var(--s-4);
}

.worker::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s-5));
  left: 50%;
  width: 1px;
  height: calc(var(--s-5) + var(--s-4));
  background: var(--line-strong);
}

.worker__box {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-dim);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.worker:hover .worker__box {
  color: var(--create);
  border-color: var(--create);
  box-shadow: 0 0 24px -8px var(--create);
}

.worker__label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.terminated {
  margin-top: var(--s-2);
  display: grid;
  place-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--destroy);
}

.terminated span:last-child { color: var(--text-faint); }

/* --------------------------------------------------------------------------
   16. GRIDS & CARDS
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: var(--s-7);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--void);
  padding: var(--s-5) clamp(1.125rem, 1.9vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: background var(--dur) var(--ease);
}

.card:hover { background: var(--ink); }
.card--wide { grid-column: span 2; }

/* .grid paints its own hairlines through 1px gaps — avoid doubling */
.grid > .slot { border: 0; }

.card__index {
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.card__title { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.005em; }
.card__text  { color: var(--text-dim); font-size: 0.9375rem; }

.assertions {
  margin-top: var(--s-5);
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.assertions li {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.assertions__key {
  flex: none;
  width: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  color: var(--create);
}

/* --------------------------------------------------------------------------
   17. GALLERY
   -------------------------------------------------------------------------- */

.gallery {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}

.gallery > * { min-width: 0; }
.gallery__a { grid-column: span 5; }
.gallery__b { grid-column: span 4; }
.gallery__c { grid-column: span 3; }

/* --------------------------------------------------------------------------
   18. CTA
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  text-align: center;
}

.cta__stage { position: absolute; inset: 0; z-index: 0; }
.cta__stage .slot { position: absolute; inset: 0; border: 0; aspect-ratio: auto; }
.cta__stage .slot > img { filter: saturate(0.85) contrast(1.02) brightness(1); }

.cta__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 60%, rgba(169, 198, 228, 0.08), transparent 70%),
    linear-gradient(to bottom,
      var(--void) 0%,
      rgba(8, 8, 10, 0.26) 13%,
      rgba(8, 8, 10, 0.07) 45%,
      rgba(8, 8, 10, 0.26) 87%,
      var(--void) 100%);
}

/* Local pool behind the centred copy — same tactic as the hero. Buys back
   contrast for the text without dimming the plate again. */
.cta__body::before {
  content: "";
  position: absolute;
  inset: 6% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(46% 64% at 50% 50%, rgba(8, 8, 10, 0.8), rgba(8, 8, 10, 0.34) 56%, transparent 76%);
}

.cta__body {
  position: relative;
  z-index: 1;
  padding-block: var(--s-10);
  /* The closing panel should feel like a held frame, not a strip. Height is
     driven by the viewport so it stays proportionate on any screen. */
  min-height: 78svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s-5);
}

.cta__title { max-width: 22ch; }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); padding-block: var(--s-7) var(--s-5); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.footer__col { display: flex; flex-direction: column; gap: var(--s-4); }

.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer__col a {
  width: fit-content;
  color: var(--text-dim);
  font-size: 0.875rem;
  transition: color var(--dur) var(--ease);
}

.footer__col a:hover { color: var(--create); }

.footer__note { color: var(--text-faint); font-size: 0.8125rem; max-width: 30ch; }

.footer__bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.socials { display: flex; gap: var(--s-4); }

.socials a {
  color: var(--text-faint);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.socials a:hover { color: var(--text); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   20. SCROLL REVEAL
   -------------------------------------------------------------------------- */

/* Scoped to .js so content is never hidden if the script fails to load */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--s-8));
  padding-bottom: var(--s-8);
}

.pagehead::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--line);
}

.pagehead--flush::after { display: none; }

.pagehead__title { margin-top: var(--s-5); max-width: 22ch; }
.pagehead__lede  { margin-top: var(--s-5); max-width: 52ch; }

/* --------------------------------------------------------------------------
   22. DOCS
   -------------------------------------------------------------------------- */

.docs {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--s-7) var(--s-8);
  align-items: start;
  padding-block: var(--s-8);
}

.docs__nav {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-5));
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.docs__group { display: flex; flex-direction: column; gap: var(--s-3); }

.docs__group a {
  font-size: 0.875rem;
  color: var(--text-dim);
  padding-left: var(--s-4);
  border-left: 1px solid var(--line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.docs__group a:hover,
.docs__group a.is-active { color: var(--text); border-left-color: var(--create); }

.docs__main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-8); }

.doc-block { display: flex; flex-direction: column; gap: var(--s-4); scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }
.doc-block p { color: var(--text-dim); max-width: var(--prose); }
.doc-block h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 400; letter-spacing: -0.01em; }
.doc-block h3 { font-size: 1.0625rem; font-weight: 500; margin-top: var(--s-3); }

/* Inline code inside prose */
.doc-block code,
.table code {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  padding: 0.15em 0.4em;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--create);
  white-space: nowrap;
}

.doc-block em { font-style: italic; color: var(--text); }

.code { border: 1px solid var(--line); background: var(--ink); overflow: hidden; }

.code__bar {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.code pre {
  margin: 0;
  padding: var(--s-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--text-dim);
  tab-size: 2;
}

.code .k { color: var(--create); }
.code .s { color: #C8C0A8; }
.code .c { color: var(--text-faint); font-style: italic; }
.code .d { color: var(--destroy); }

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.table th, .table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table th {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
}

.table td { color: var(--text-dim); }
.table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--create);
  white-space: nowrap;
}

.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.table-wrap .table td, .table-wrap .table th { border-bottom-color: var(--line); }
.table-wrap .table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   23. EDITORIAL / PHILOSOPHY
   -------------------------------------------------------------------------- */

.essay {
  display: grid;
  grid-template-columns: 10rem minmax(0, var(--prose));
  gap: var(--s-6) var(--s-7);
  align-items: start;
}

.essay__mark {
  padding-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.essay__body { display: flex; flex-direction: column; gap: var(--s-4); }
.essay__body p { color: var(--text-dim); }
.essay__body strong { color: var(--text); font-weight: 500; }

.pull {
  margin-block: var(--s-3);
  padding-left: var(--s-5);
  border-left: 1px solid var(--create);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.24;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   24. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --s-9: 7rem; --s-10: 8.5rem; }

  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .docs { grid-template-columns: 1fr; }
  .docs__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s-5); }
  .essay { grid-template-columns: 1fr; gap: var(--s-3); }
}

@media (max-width: 860px) {
  :root { --nav-h: 68px; --s-9: 5.5rem; --s-10: 6.5rem; }

  .nav__toggle { display: block; }

  .wordmark__name { font-size: 1.5rem; }
  .wordmark__sub { font-size: 0.5625rem; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4) var(--gutter) var(--s-6);
    background: rgba(8, 8, 10, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }

  .nav__links.is-open { transform: none; opacity: 1; visibility: visible; }

  .nav__link {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--line);
    font-size: 0.75rem;
  }

  .nav__link:last-child { border-bottom: 0; margin-top: var(--s-4); }
  .nav__link.btn { justify-content: space-between; width: 100%; border: 1px solid var(--line-strong); padding: var(--s-4); }

  .head, .split, .duality, .control, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
  .control > .slot { max-width: 17rem; }
  .head__title, .head__aside { grid-column: 1; }
  .pane + .pane { border-left: 0; border-top: 1px solid var(--line); }

  .hero__meta-inner { grid-template-columns: 1fr 1fr; }
  .metric { padding-left: var(--s-4); border-left: 1px solid var(--line); }
  .metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery__a { grid-column: span 2; }
  .gallery__b, .gallery__c { grid-column: span 1; }

  .quote__stage::after {
    background: linear-gradient(to top, rgba(8, 8, 10, 0.88) 10%, rgba(8, 8, 10, 0.46) 60%, rgba(8, 8, 10, 0.28) 100%);
  }

  .node { min-width: 0; width: 100%; max-width: 18rem; }
  .fanout { gap: var(--s-2); }
  .worker__box { width: 42px; height: 42px; }
}

@media (max-width: 520px) {
  .btn { width: 100%; min-width: 0; }
  .hero__actions { gap: var(--s-4); }
  .footer__top { grid-template-columns: 1fr; }
  .metric__value { font-size: 1.25rem; }
}