/* ============================================================
   FlyISS — design tokens + components
   Art direction: deep-space instrumentation. Near-black navy
   surfaces, electric cyan primary (telemetry), signal orange
   for tiny data labels only. Cabinet Grotesk / Satoshi.
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6vw, 7rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.625rem;
  --radius-xl: 1rem; --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 660px;
  --content-default: 960px;
  --content-wide: 1280px;
  --gutter: clamp(var(--space-5), 5vw, var(--space-16));

  /* Fonts */
  --font-display: 'Cabinet Grotesk', 'Satoshi', 'Inter', sans-serif;
  --font-body: 'Satoshi', 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---------- LIGHT ---------- */
:root, [data-theme='light'] {
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-2: #eef2f7;
  --color-surface-offset: #e9eef4;
  --color-surface-dynamic: #dfe6ee;
  --color-divider: #dde3ea;
  --color-border: #c9d2dd;
  --color-text: #0b1220;
  --color-text-muted: #4d5a6b;
  --color-text-faint: #7b8798;
  --color-text-inverse: #ffffff;
  --color-primary: #06657f;
  --color-primary-hover: #044f64;
  --color-primary-quiet: #d3e8ef;
  --color-signal: #b4470d;
  --shadow-md: 0 4px 16px rgba(11, 18, 32, 0.08);
  --shadow-lg: 0 20px 48px rgba(11, 18, 32, 0.12);
  --hero-veil: linear-gradient(180deg, rgba(4, 7, 12, 0.62) 0%, rgba(4, 7, 12, 0.3) 42%, rgba(4, 7, 12, 0.7) 90%, var(--color-bg) 100%);
  --img-veil: linear-gradient(180deg, rgba(6, 12, 22, 0) 40%, rgba(6, 12, 22, 0.7) 100%);
  --grid-line: rgba(6, 101, 127, 0.08);
  --card-glass: rgba(255, 255, 255, 0.82);
}

/* ---------- DARK (default art direction) ---------- */
[data-theme='dark'] {
  --color-bg: #080b11;
  --color-surface: #0e131b;
  --color-surface-2: #131a24;
  --color-surface-offset: #10161f;
  --color-surface-dynamic: #1a222e;
  --color-divider: #1a2230;
  --color-border: #26303e;
  --color-text: #e7edf5;
  --color-text-muted: #9aa7b8;
  --color-text-faint: #667487;
  --color-text-inverse: #080b11;
  --color-primary: #58d4f4;
  --color-primary-hover: #8ce4ff;
  --color-primary-quiet: #1a3b48;
  --color-signal: #ff8a3d;
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --hero-veil: linear-gradient(180deg, rgba(4, 7, 12, 0.6) 0%, rgba(4, 7, 12, 0.22) 42%, rgba(4, 7, 12, 0.7) 90%, var(--color-bg) 100%);
  --img-veil: linear-gradient(180deg, rgba(8, 11, 17, 0) 40%, rgba(8, 11, 17, 0.85) 100%);
  --grid-line: rgba(88, 212, 244, 0.07);
  --card-glass: rgba(19, 26, 36, 0.72);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #080b11; --color-surface: #0e131b; --color-surface-2: #131a24;
    --color-surface-offset: #10161f; --color-surface-dynamic: #1a222e;
    --color-divider: #1a2230; --color-border: #26303e; --color-text: #e7edf5;
    --color-text-muted: #9aa7b8; --color-text-faint: #667487; --color-text-inverse: #080b11;
    --color-primary: #58d4f4; --color-primary-hover: #8ce4ff; --color-primary-quiet: #1a3b48;
    --color-signal: #ff8a3d;
    --hero-veil: linear-gradient(180deg, rgba(4,7,12,0.6) 0%, rgba(4,7,12,0.22) 42%, rgba(4,7,12,0.7) 90%, var(--color-bg) 100%);
    --img-veil: linear-gradient(180deg, rgba(8,11,17,0) 40%, rgba(8,11,17,0.85) 100%);
    --grid-line: rgba(88, 212, 244, 0.07);
    --card-glass: rgba(19, 26, 36, 0.72);
  }
}

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--default { max-width: var(--content-default); }
.wrap--narrow { max-width: var(--content-narrow); }

.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.section--rule { border-top: 1px solid var(--color-divider); }

/* Eyebrow / technical label */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary);
}
.eyebrow::before {
  content: ''; width: var(--space-6); height: 1px; background: currentColor; opacity: 0.7;
}
.eyebrow--signal { color: var(--color-signal); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.h-hero { font-size: var(--text-hero); line-height: 0.95; letter-spacing: -0.035em; }
.h-page { font-size: var(--text-2xl); line-height: 1.02; letter-spacing: -0.03em; }
.h-section { font-size: var(--text-xl); }
.h-sub { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }

.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); max-width: 46ch; }
.prose p { margin-block-end: var(--space-5); color: var(--color-text-muted); }
.prose p strong { color: var(--color-text); font-weight: 600; }
.prose > p:first-of-type { color: var(--color-text); }
.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }

/* Inline source citations — always visible, always live */
.cite, .prose a, .quote-source a, .myth-answer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--color-primary) 45%, transparent);
}
.cite:hover, .prose a:hover, .quote-source a:hover, .myth-answer a:hover {
  color: var(--color-primary-hover); text-decoration-color: currentColor;
}
.sources {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-5); padding-block-start: var(--space-4);
  border-top: 1px dashed var(--color-border); font-size: var(--text-xs);
}
.sources__label {
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint);
}
.sources a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  color: var(--color-text); text-decoration: none; font-weight: 500;
}
.sources a::after { content: '↗'; font-size: 0.85em; color: var(--color-primary); }
.sources a:hover { border-color: var(--color-primary); background: var(--color-primary-quiet); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-full);
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
}
.btn--primary { background: var(--color-primary); color: var(--color-text-inverse); }
[data-theme='light'] .btn--primary { color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn--ghost { border-color: var(--color-border); color: var(--color-text); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); text-decoration: none;
}
.link-arrow span { transition: transform var(--transition-interactive); }
.link-arrow:hover span { transform: translateX(4px); }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
  border-block-end: 1px solid transparent;
}
.site-header[data-scrolled='true'] {
  background: color-mix(in oklab, var(--color-bg) 93%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-block-end-color: var(--color-divider);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  min-height: var(--space-20);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); }
.brand__mark { color: var(--color-primary); flex: none; }
.brand__type {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1;
}
.brand__type em { font-style: normal; color: var(--color-primary); }
.site-header:not([data-scrolled='true']) .brand,
.site-header:not([data-scrolled='true']) .nav a[aria-current='page'] { color: #f2f6fb; }
.site-header:not([data-scrolled='true']) .nav a { color: rgba(233, 240, 248, 0.78); }
.site-header:not([data-scrolled='true']) .nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.site-header:not([data-scrolled='true']) .brand__tag { color: rgba(233, 240, 248, 0.6); }
.site-header:not([data-scrolled='true']) .icon-btn { color: rgba(233, 240, 248, 0.85); border-color: rgba(255, 255, 255, 0.26); }
.site-header:not([data-scrolled='true']) .icon-btn:hover { color: #fff; border-color: #fff; }
@media (max-width: 860px) {
  .site-header:not([data-scrolled='true']) .nav a { color: var(--color-text-muted); }
  .site-header:not([data-scrolled='true']) .nav a[aria-current='page'] { color: var(--color-primary); }
  .site-header:not([data-scrolled='true']) .nav a:hover { color: var(--color-text); background: var(--color-surface-2); }
}

.brand__tag {
  display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-faint); margin-block-start: 2px;
}

.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav a {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
}
.nav a:hover { color: var(--color-text); background: var(--color-surface-2); }
.nav a[aria-current='page'] { color: var(--color-primary); }

.header__actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-10); height: var(--space-10); border-radius: var(--radius-full);
  border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.icon-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav {
    position: fixed; inset: var(--space-20) var(--gutter) auto;
    flex-direction: column; align-items: stretch; gap: var(--space-1);
    padding: var(--space-4); border-radius: var(--radius-xl); z-index: 120;
    background: var(--color-surface);
    border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  }
  .nav[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: var(--space-3) var(--space-4); font-size: var(--text-base); }
  .nav-toggle { display: inline-flex; }
  .site-header:not([data-scrolled='true']) .brand,
.site-header:not([data-scrolled='true']) .nav a[aria-current='page'] { color: #f2f6fb; }
.site-header:not([data-scrolled='true']) .nav a { color: rgba(233, 240, 248, 0.78); }
.site-header:not([data-scrolled='true']) .nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.site-header:not([data-scrolled='true']) .brand__tag { color: rgba(233, 240, 248, 0.6); }
.site-header:not([data-scrolled='true']) .icon-btn { color: rgba(233, 240, 248, 0.85); border-color: rgba(255, 255, 255, 0.26); }
.site-header:not([data-scrolled='true']) .icon-btn:hover { color: #fff; border-color: #fff; }
@media (max-width: 860px) {
  .site-header:not([data-scrolled='true']) .nav a { color: var(--color-text-muted); }
  .site-header:not([data-scrolled='true']) .nav a[aria-current='page'] { color: var(--color-primary); }
  .site-header:not([data-scrolled='true']) .nav a:hover { color: var(--color-text); background: var(--color-surface-2); }
}

.brand__tag { display: none; }
}

/* ============================================================
   Hero (3D)
   ============================================================ */
.hero {
  position: relative; min-height: min(100svh, 900px);
  /* deep-space backdrop is fixed in both themes — the 3D canvas is transparent
     and the veil fades to the page background at the bottom edge */
  background:
    radial-gradient(ellipse 70% 55% at 72% 62%, #0a1b2a 0%, #04070c 55%, #03050a 100%);
  display: grid; align-items: end; isolation: isolate;
  padding-block: clamp(var(--space-24), 18vh, var(--space-32)) clamp(var(--space-10), 8vw, var(--space-24));
  overflow: hidden;
}
.hero__stage { position: absolute; inset: 0; z-index: -2; }
.hero__stage canvas { width: 100% !important; height: 100% !important; display: block; }
.hero__poster {
  position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%; opacity: 1;
  transition: opacity 900ms ease;
}
.hero[data-3d='ready'] .hero__poster { opacity: 0.18; }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: var(--hero-veil); pointer-events: none; }
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
}
.hero__inner { position: relative; display: grid; gap: var(--space-8); }
.hero h1 { max-width: 18ch; }
.hero h1 .accent {
  /* the hero always sits on a dark orbital image, so this gradient is fixed
     rather than theme-derived to keep contrast in both modes */
  background: linear-gradient(100deg, #6fdcf8 0%, #a8e8ff 45%, #e8f2fb 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme='dark'] .hero__inner, :root:not([data-theme]) .hero__inner { color: #eef4fb; }
[data-theme='dark'] .hero .lede, :root:not([data-theme]) .hero .lede { color: #b9c7d8; }
[data-theme='light'] .hero .lede { color: #cfd9e6; }
[data-theme='light'] .hero h1, [data-theme='light'] .hero .hero__meta { color: #f4f7fb; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__cta .btn--ghost { color: #f2f6fb; border-color: rgba(255, 255, 255, 0.32); }
.hero__cta .btn--ghost:hover { color: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.hero__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4) var(--space-8);
  padding-block-start: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-xs);
}
.hero__meta div { display: grid; gap: var(--space-1); }
.hero__meta dt, .hero__meta .k {
  font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-signal); font-size: 0.6875rem;
}
.hero__meta .v { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1; }

.scroll-hint {
  position: absolute; inset-block-end: var(--space-6); inset-inline-start: 50%;
  translate: -50% 0; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #8fa2b6; display: grid; justify-items: center; gap: var(--space-2);
}
.scroll-hint::after {
  content: ''; width: 1px; height: var(--space-8);
  background: linear-gradient(var(--color-primary), transparent);
  animation: drop 2.4s ease-in-out infinite;
}
@keyframes drop { 0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* Page hero (interior pages) */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(var(--space-24), 16vw, var(--space-32)) clamp(var(--space-12), 7vw, var(--space-20));
  border-block-end: 1px solid var(--color-divider);
}
.page-hero__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}
.page-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 7, 12, 0.88) 0%, rgba(4, 7, 12, 0.55) 45%, rgba(4, 7, 12, 0.2) 100%),
    linear-gradient(180deg, rgba(4, 7, 12, 0.55) 0%, rgba(4, 7, 12, 0.35) 50%, rgba(4, 7, 12, 0.72) 88%, var(--color-bg) 100%);
}
.page-hero__inner { display: grid; gap: var(--space-5); max-width: 46rem; }
.page-hero .lede { color: #c8d5e3; }

.hero .eyebrow, .page-hero .eyebrow { color: #6fdcf8; }
.page-hero__inner, .page-hero h1 { color: #f2f7fc; }
.page-hero .crumbs { color: #cddae7; }

.crumbs { font-size: var(--text-xs); letter-spacing: 0.06em; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.crumbs li::after { content: '/'; margin-inline-start: var(--space-2); color: var(--color-text-faint); }
.crumbs li:last-child::after { content: ''; }
.crumbs a { color: inherit; text-decoration: none; opacity: 0.75; }
.crumbs a:hover { opacity: 1; color: var(--color-primary); }


/* ============================================================
   Mission intro / stat rail
   ============================================================ */
.intro-grid {
  display: grid; gap: clamp(var(--space-8), 5vw, var(--space-16));
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start;
}
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } }
.intro-grid__head { position: sticky; top: var(--space-24); display: grid; gap: var(--space-4); }
@media (max-width: 900px) { .intro-grid__head { position: static; } }

.stat-rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--color-divider);
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden;
}
.stat {
  background: var(--color-surface); padding: var(--space-6);
  display: grid; gap: var(--space-2); align-content: start;
}
.stat__k { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stat__k small { font-size: 0.5em; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0; }
.stat__l { font-size: var(--text-xs); color: var(--color-text-muted); }
.stat__src { font-size: var(--text-xs); }

/* ============================================================
   Feature cards
   ============================================================ */
.feature-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .feature-grid, .feature-grid--home { grid-template-columns: 1fr; } }

.card {
  position: relative; display: grid; grid-template-rows: auto 1fr;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease, box-shadow 320ms ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: var(--shadow-lg); }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); }
.card__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.015em; }
.card__body p { font-size: var(--text-sm); color: var(--color-text-muted); }
.card__foot { margin-block-start: var(--space-2); }

/* ============================================================
   Missions — magazine grid
   ============================================================ */
.missions { display: grid; gap: clamp(var(--space-12), 7vw, var(--space-24)); }
.entry {
  display: grid; gap: clamp(var(--space-6), 4vw, var(--space-12));
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start;
  scroll-margin-top: var(--space-24);
}
.entry--reverse .entry__media { order: 2; }
.entry--wide { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .entry, .entry--reverse { grid-template-columns: 1fr; }
  .entry--reverse .entry__media { order: 0; }
}
.entry__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-surface-2);
}
.entry__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.entry--wide .entry__media img { aspect-ratio: 21 / 9; }
.entry__index {
  position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  background: rgba(8, 11, 17, 0.72); color: #d9e6f2; backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.entry__body { display: grid; gap: var(--space-4); align-content: start; }
.entry__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-text-faint);
}
.entry__meta .tag { color: var(--color-signal); }
.entry h2, .entry h3 { font-size: var(--text-xl); }
.entry__body p { color: var(--color-text-muted); font-size: var(--text-base); }
.entry__tldr {
  padding-inline-start: var(--space-5); border-inline-start: 2px solid var(--color-primary);
  font-size: var(--text-base); color: var(--color-text); font-weight: 500;
}

/* Cost table */
.data-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.data-table { font-size: var(--text-sm); min-width: 26rem; }
.data-table caption {
  text-align: left; padding: var(--space-4) var(--space-5); font-size: var(--text-xs);
  color: var(--color-text-muted); border-bottom: 1px solid var(--color-divider);
}
.data-table th, .data-table td { padding: var(--space-3) var(--space-5); text-align: left; }
.data-table thead th {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-text-faint); background: var(--color-surface-2);
}
.data-table tbody tr + tr th, .data-table tbody tr + tr td { border-top: 1px solid var(--color-divider); }
.data-table tbody th { font-weight: 500; }
.data-table td.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.data-table tbody tr:last-child td.num { color: var(--color-primary); font-weight: 600; }

/* ============================================================
   Pull quote
   ============================================================ */
.pullquote {
  position: relative; isolation: isolate; overflow: hidden;
  border-block: 1px solid var(--color-divider);
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
}
.pullquote__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.pullquote__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 72%, transparent), color-mix(in oklab, var(--color-bg) 88%, transparent));
}
.pullquote blockquote {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl);
  line-height: 1.25; letter-spacing: -0.02em; max-width: 34ch; text-wrap: balance;
}
.pullquote figcaption { margin-block-start: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
.pullquote figcaption strong { display: block; color: var(--color-text); font-size: var(--text-base); }

/* ============================================================
   Voices
   ============================================================ */
.voices { columns: 2; column-gap: var(--space-6); }
@media (max-width: 900px) { .voices { columns: 1; } }
.voice {
  break-inside: avoid; margin-block-end: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: clamp(var(--space-6), 3vw, var(--space-10));
  display: grid; gap: var(--space-5);
  transition: border-color 300ms ease, transform 300ms ease;
}
.voice:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.voice[hidden] { display: none; }
.voice--feature { background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface)); }
.voice__glyph {
  font-family: var(--font-display); font-size: 3rem; line-height: 0.6; height: 1.4rem;
  color: var(--color-primary); opacity: 0.5;
}
.voice blockquote {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em;
  font-size: var(--text-lg); line-height: 1.35; color: var(--color-text); max-width: none;
}
.voice--feature blockquote { font-size: var(--text-xl); }
.voice__who { display: grid; gap: var(--space-1); }
.voice__name { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; }
.quote-source { font-size: var(--text-xs); color: var(--color-text-muted); }

.voices-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-block-end: var(--space-10);
}
.chip {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  border: 1px solid var(--color-border); color: var(--color-text-muted); background: transparent;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip[aria-pressed='true'] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
[data-theme='light'] .chip[aria-pressed='true'] { color: #fff; }

/* ============================================================
   Myth-busting accordion
   ============================================================ */
.myths { display: grid; gap: var(--space-4); }
.myth {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); overflow: hidden;
}
.myth[open] { border-color: var(--color-primary); }
.myth summary {
  display: flex; align-items: flex-start; gap: var(--space-4); cursor: pointer;
  padding: var(--space-5) var(--space-6); list-style: none;
}
.myth summary::-webkit-details-marker { display: none; }
.myth summary:hover { background: var(--color-surface-2); }
.myth__no {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  color: var(--color-signal); padding-block-start: 0.35em; flex: none;
}
.myth__q { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.015em; flex: 1; }
.myth__icon { flex: none; color: var(--color-primary); transition: transform 300ms ease; }
.myth[open] .myth__icon { transform: rotate(45deg); }
.myth-answer { padding: 0 var(--space-6) var(--space-6); display: grid; gap: var(--space-4); }
.myth-answer > p { color: var(--color-text-muted); }
.myth-answer .verdict {
  display: inline-flex; align-items: center; gap: var(--space-2); align-self: start;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-primary); background: var(--color-primary-quiet); justify-self: start;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
}
@media (max-width: 600px) { .myth summary { padding: var(--space-4); } .myth-answer { padding: 0 var(--space-4) var(--space-5); } }

/* ============================================================
   Manifesto long-form
   ============================================================ */
.longform { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(var(--space-8), 5vw, var(--space-16)); }
@media (max-width: 1000px) { .longform { grid-template-columns: 1fr; } }
.toc { position: sticky; top: var(--space-24); align-self: start; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
@media (max-width: 1000px) { .toc { position: static; } }
.toc__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-faint); }
.toc a { display: block; color: var(--color-text-muted); text-decoration: none; padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--color-border); padding-block: var(--space-1); }
.toc a:hover, .toc a[data-active='true'] { color: var(--color-primary); border-inline-start-color: var(--color-primary); }

.longform__body { max-width: 68ch; display: grid; gap: var(--space-8); }
.longform__body h2 { font-size: var(--text-xl); scroll-margin-top: var(--space-24); }
.longform__body h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700; }
.longform__body p { color: var(--color-text-muted); }
.longform__body > section { display: grid; gap: var(--space-5); scroll-margin-top: var(--space-24); }
.callout {
  border: 1px solid var(--color-border); border-inline-start: 3px solid var(--color-signal);
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: var(--space-6); display: grid; gap: var(--space-3);
}
.callout h3 { font-size: var(--text-base); letter-spacing: 0.02em; }
.callout p { font-size: var(--text-sm); }
.inline-quote {
  display: grid; gap: var(--space-4); padding: var(--space-6) 0;
  border-block: 1px solid var(--color-divider);
}
.inline-quote blockquote {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500;
  line-height: 1.35; letter-spacing: -0.015em; color: var(--color-text);
}
.figure { display: grid; gap: var(--space-3); }
.figure img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.figure figcaption { font-size: var(--text-xs); color: var(--color-text-faint); }

/* Compact 3D orbit divider */
.orbit-divider {
  position: relative; height: clamp(220px, 34vw, 380px); overflow: hidden;
  border-block: 1px solid var(--color-divider);
  background: radial-gradient(ellipse 60% 70% at 50% 78%, #0a1b2a 0%, #04070c 60%, #03050a 100%);
}
.orbit-divider::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline: 0; height: 40%;
  background: linear-gradient(180deg, rgba(3, 5, 10, 0) 0%, rgba(3, 5, 10, 0.85) 65%, rgba(3, 5, 10, 0.95) 100%);
  pointer-events: none;
}
.orbit-divider canvas { width: 100% !important; height: 100% !important; }
.orbit-divider__caption {
  position: absolute; inset-block-end: var(--space-4); inset-inline-start: 50%; translate: -50% 0;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: #8fa2b6; text-align: center; width: 100%; z-index: 1;
}

/* ============================================================
   Join / newsletter
   ============================================================ */
.join {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(var(--space-20), 11vw, var(--space-32));
  border-block-start: 1px solid var(--color-divider);
}
.join__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.join__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 78%, transparent), color-mix(in oklab, var(--color-bg) 93%, transparent));
}
[data-theme='light'] .join__veil {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 90%, transparent), color-mix(in oklab, var(--color-bg) 97%, transparent));
}
.join__inner { display: grid; gap: var(--space-6); justify-items: start; max-width: 42rem; }
.signup { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; }
.signup input[type='email'] {
  flex: 1 1 16rem; min-width: 0; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm);
}
.signup input::placeholder { color: var(--color-text-faint); }
.signup input:focus-visible { border-color: var(--color-primary); }
.form-note { font-size: var(--text-xs); color: var(--color-text-faint); }
.form-status { font-size: var(--text-sm); color: var(--color-primary); min-height: 1.5em; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-block-start: 1px solid var(--color-divider); background: var(--color-surface-offset); }
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h2 {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-faint);
  margin-block-end: var(--space-4);
}
.site-footer p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 40ch; }
.site-footer ul { list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.site-footer ul a { color: var(--color-text-muted); text-decoration: none; }
.site-footer ul a:hover { color: var(--color-primary); }
.site-footer__bar {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  align-items: center; padding-block: var(--space-6);
  border-block-start: 1px solid var(--color-divider); font-size: var(--text-xs); color: var(--color-text-faint);
}
.updated { font-family: var(--font-mono); letter-spacing: 0.06em; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal[data-visible='true'] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

.skip-link {
  position: absolute; inset-inline-start: var(--space-4); inset-block-start: -3rem; z-index: 200;
  background: var(--color-primary); color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm);
}
.skip-link:focus { inset-block-start: var(--space-4); }