/* =============================================================
   THEME G — Atlas Cosmo
   Deep space, observed with scientific precision. Cartography
   stays the dominant subject (contours, planes, ledgers) but
   the entire palette, typography, and ambient treatment shift
   to a celestial-atlas register — closer to a 19th-century
   astronomy plate or a NASA mission datasheet than to a
   warm-paper editorial site.

   Calibration vs. neighbours:
   - vs. Theme A (Editorial / warm paper / Instrument Serif):
     opposite register. Cool indigo-violet, geometric Space
     Grotesk, electric icy-blue accent instead of warm copper.
   - vs. Theme E (Cyberpunk neon): restrained, scientific,
     never glitchy. No scanlines, no chromatic aberration.
   - The constellation overlays / orbital rings of the earlier
     pass have not returned — cartography stays dominant.
   ============================================================= */

html[data-theme="G"] {
  /* --- Palette: deep space + electric icy-blue ----------- */
  --paper:        #040621;    /* near-void, violet-blue undertone */
  --paper-soft:   #0B1138;    /* indigo-tinged surface */
  --paper-deep:   #02030E;    /* outer void (recessed bands) */
  --hairline:     #1A1F50;    /* faint indigo divider */
  --rule:         #2D3B85;    /* visible divider */
  --rule-strong:  #475DA8;

  --ink:          #EBEEFA;    /* cool starlight white (blue-tinted) */
  --ink-soft:     #A6B0D8;
  --ink-mid:      #6E78A8;
  --ink-faint:    #3F476B;

  /* "copper" reused as the primary accent — here, electric
     icy-blue. The variable name is preserved so existing
     selectors auto-inherit. */
  --copper:       #6FAEFF;    /* Sirius / Vega — electric icy blue */
  --copper-soft:  #9CCBFF;
  --copper-deep:  #3D89F4;
  --copper-wash:  rgba(111, 174, 255, 0.10);
  --copper-hair:  rgba(111, 174, 255, 0.32);
  --copper-glow:  rgba(111, 174, 255, 0.06);

  --indigo:       #C780FF;    /* secondary accent — far-violet, used sparingly */
  --indigo-soft:  #DEAFFF;

  /* Custom theme tokens */
  --void:         #040621;
  --sirius:       #6FAEFF;
  --far-violet:   #C780FF;
  --starlight:    #EBEEFA;
  --aurora-top:   rgba(111, 174, 255, 0.10);
  --aurora-bot:   rgba(199, 128, 255, 0.07);

  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius:       2px;
  --section-pad:  clamp(6rem, 13vh, 10rem);

  color-scheme: dark;
}

html[data-theme="G"] body { background: var(--paper); color: var(--ink); }

/* Backdrop: layered starfield (more present than the previous
   pass) + faint aurora ribbons at the corners. Stars sit at
   varying sizes and brightnesses, with the largest ones haloed
   by a soft blue glow. Deliberately motionless — this is the
   sky as observed, not animated. */
html[data-theme="G"] body::before {
  background-color: var(--paper);
  background-image:
    /* Five "named" bright stars with a subtle halo */
    radial-gradient(2px 2px at 14% 14%,    rgba(255,255,255,0.95), rgba(111,174,255,0.4) 35%, transparent 70%),
    radial-gradient(1.8px 1.8px at 78% 8%, rgba(255,255,255,0.90), rgba(111,174,255,0.35) 35%, transparent 70%),
    radial-gradient(1.6px 1.6px at 6% 88%, rgba(255,255,255,0.85), rgba(199,128,255,0.30) 35%, transparent 70%),
    radial-gradient(1.8px 1.8px at 92% 64%, rgba(255,255,255,0.90), rgba(111,174,255,0.35) 35%, transparent 70%),
    radial-gradient(1.6px 1.6px at 36% 72%, rgba(255,255,255,0.80), rgba(111,174,255,0.30) 35%, transparent 70%),
    /* Bright mid stars */
    radial-gradient(1.1px 1.1px at 4% 22%,   rgba(235,238,250,0.75), transparent 70%),
    radial-gradient(1.1px 1.1px at 11% 44%,  rgba(235,238,250,0.65), transparent 70%),
    radial-gradient(1.1px 1.1px at 18% 66%,  rgba(235,238,250,0.70), transparent 70%),
    radial-gradient(1.1px 1.1px at 24% 18%,  rgba(235,238,250,0.55), transparent 70%),
    radial-gradient(1.1px 1.1px at 31% 32%,  rgba(235,238,250,0.75), transparent 70%),
    radial-gradient(1.1px 1.1px at 39% 58%,  rgba(235,238,250,0.65), transparent 70%),
    radial-gradient(1.1px 1.1px at 47% 14%,  rgba(235,238,250,0.75), transparent 70%),
    radial-gradient(1.1px 1.1px at 54% 38%,  rgba(235,238,250,0.65), transparent 70%),
    radial-gradient(1.1px 1.1px at 62% 80%,  rgba(235,238,250,0.65), transparent 70%),
    radial-gradient(1.1px 1.1px at 68% 22%,  rgba(235,238,250,0.75), transparent 70%),
    radial-gradient(1.1px 1.1px at 73% 48%,  rgba(235,238,250,0.55), transparent 70%),
    radial-gradient(1.1px 1.1px at 81% 92%,  rgba(235,238,250,0.65), transparent 70%),
    radial-gradient(1.1px 1.1px at 86% 28%,  rgba(235,238,250,0.75), transparent 70%),
    radial-gradient(1.1px 1.1px at 95% 78%,  rgba(235,238,250,0.65), transparent 70%),
    /* Far dust — many small dots */
    radial-gradient(0.65px 0.65px at 8% 6%,   rgba(235,238,250,0.40), transparent 75%),
    radial-gradient(0.65px 0.65px at 16% 28%, rgba(235,238,250,0.36), transparent 75%),
    radial-gradient(0.65px 0.65px at 22% 52%, rgba(235,238,250,0.40), transparent 75%),
    radial-gradient(0.65px 0.65px at 28% 80%, rgba(235,238,250,0.36), transparent 75%),
    radial-gradient(0.65px 0.65px at 34% 6%,  rgba(235,238,250,0.40), transparent 75%),
    radial-gradient(0.65px 0.65px at 41% 22%, rgba(235,238,250,0.36), transparent 75%),
    radial-gradient(0.65px 0.65px at 48% 50%, rgba(235,238,250,0.40), transparent 75%),
    radial-gradient(0.65px 0.65px at 56% 70%, rgba(235,238,250,0.36), transparent 75%),
    radial-gradient(0.65px 0.65px at 65% 4%,  rgba(235,238,250,0.40), transparent 75%),
    radial-gradient(0.65px 0.65px at 72% 36%, rgba(235,238,250,0.36), transparent 75%),
    radial-gradient(0.65px 0.65px at 78% 60%, rgba(235,238,250,0.40), transparent 75%),
    radial-gradient(0.65px 0.65px at 84% 86%, rgba(235,238,250,0.36), transparent 75%),
    radial-gradient(0.65px 0.65px at 89% 12%, rgba(235,238,250,0.40), transparent 75%),
    radial-gradient(0.65px 0.65px at 96% 44%, rgba(235,238,250,0.36), transparent 75%),
    /* Aurora ribbons — extremely faint, only at the corners.
       Visual reference: magnetosphere / Webb deep field, not
       a Vegas neon sign. */
    radial-gradient(1200px 700px at 88% -8%, var(--aurora-top), transparent 75%),
    radial-gradient(1000px 600px at 12% 110%, var(--aurora-bot), transparent 75%);
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: normal;
  inset: 0;
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

html[data-theme="G"] ::selection { background: rgba(111, 174, 255, 0.32); color: var(--ink); }

/* --- Display / typography ---------------------------------- */
html[data-theme="G"] .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
}
html[data-theme="G"] .display em {
  font-style: normal;
  color: var(--sirius);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: 0 0 24px rgba(111, 174, 255, 0.40);
}
html[data-theme="G"] h2.display {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  letter-spacing: -0.028em;
}

/* Eyebrow → research-paper marker. The leading dash becomes
   a small filled star-dot with a soft halo. */
html[data-theme="G"] .eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sirius);
}
html[data-theme="G"] .eyebrow::before {
  width: 7px;
  height: 7px;
  background: var(--sirius);
  border-radius: 50%;
  opacity: 1;
  box-shadow: 0 0 10px rgba(111, 174, 255, 0.6);
}

html[data-theme="G"] .meta { color: var(--ink-mid); }
html[data-theme="G"] .mono { color: var(--ink-mid); }
html[data-theme="G"] .lead { color: var(--ink-soft); }
html[data-theme="G"] .body { color: var(--ink-soft); }
html[data-theme="G"] .body strong { color: var(--ink); font-weight: 600; }

/* --- Site chrome ------------------------------------------- */
html[data-theme="G"] .nav.is-scrolled {
  background: rgba(4, 6, 33, 0.8);
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  border-bottom-color: var(--hairline);
}
html[data-theme="G"] .nav__progress {
  background: linear-gradient(90deg, var(--sirius), var(--far-violet));
  box-shadow: 0 0 8px rgba(111, 174, 255, 0.6);
}

html[data-theme="G"] .wordmark__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
html[data-theme="G"] .wordmark__glyph { color: var(--sirius); }
html[data-theme="G"] .wordmark__glyph .contour {
  filter: drop-shadow(0 0 3px rgba(111, 174, 255, 0.4));
}
html[data-theme="G"] .wordmark__glyph .wordmark-star {
  fill: var(--starlight);
  filter: drop-shadow(0 0 4px rgba(111, 174, 255, 0.7));
  opacity: 1;
}

html[data-theme="G"] .nav__links { color: var(--ink-soft); font-family: var(--font-display); font-weight: 500; }
html[data-theme="G"] .nav__links a:hover { color: var(--sirius); }
html[data-theme="G"] .nav__links a::after { background: var(--sirius); box-shadow: 0 0 4px var(--sirius); }

/* --- Hero — glowing contours over a deep starfield --------- */
html[data-theme="G"] .hero__bg-grain {
  background:
    radial-gradient(1200px 900px at 90% 10%, rgba(111, 174, 255, 0.10), transparent 65%),
    radial-gradient(1000px 800px at 0% 100%, rgba(199, 128, 255, 0.07), transparent 70%);
}
html[data-theme="G"] .hero__bg-grid {
  background-image:
    linear-gradient(90deg, rgba(199, 211, 255, 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(199, 211, 255, 0.018) 1px, transparent 1px);
  opacity: 0.8;
}
html[data-theme="G"] .hero__bg-contours {
  color: var(--sirius);
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(111, 174, 255, 0.45));
  mask-image: linear-gradient(to left, black 30%, transparent 96%);
  -webkit-mask-image: linear-gradient(to left, black 30%, transparent 96%);
}
html[data-theme="G"] .hero__bg-stars circle {
  fill: var(--starlight);
  --twinkle-base: 0.6;
  --twinkle-peak: 1;
}
/* The largest hero stars get a soft halo */
html[data-theme="G"] .hero__bg-stars circle:nth-child(5),
html[data-theme="G"] .hero__bg-stars circle:nth-child(11) {
  filter: drop-shadow(0 0 4px rgba(111, 174, 255, 0.85));
}
html[data-theme="G"] .hero__bg-pings circle {
  fill: var(--far-violet);
  filter: drop-shadow(0 0 6px rgba(199, 128, 255, 0.7));
}

html[data-theme="G"] .hero__meta { border-bottom-color: var(--hairline); }
html[data-theme="G"] .hero__title { color: var(--ink); }
html[data-theme="G"] .hero__title em {
  color: var(--sirius);
  font-style: normal;
  text-shadow: 0 0 30px rgba(111, 174, 255, 0.50);
}
html[data-theme="G"] .hero__lead { color: var(--ink); }
html[data-theme="G"] .hero__lead strong { color: var(--sirius); font-weight: 600; }
html[data-theme="G"] .hero__support { color: var(--ink-soft); }
html[data-theme="G"] .hero__link {
  color: var(--ink);
  border-bottom-color: var(--copper-hair);
}
html[data-theme="G"] .hero__link:hover { color: var(--sirius); border-bottom-color: var(--sirius); }
html[data-theme="G"] .hero__year { color: var(--sirius); }

/* --- Pull-quotes / opening -------------------------------- */
html[data-theme="G"] .opening__pullquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  color: var(--ink);
  border-top-color: var(--rule);
}
html[data-theme="G"] .opening__pullquote em { color: var(--sirius); font-style: normal; }

/* --- Ledger ------------------------------------------------ */
html[data-theme="G"] .ledger {
  background: var(--paper-soft);
  border-top-color: var(--rule);
  border-bottom-color: var(--hairline);
}
html[data-theme="G"] .ledger__cell { border-right-color: var(--hairline); }
html[data-theme="G"] .ledger__cell:hover { background: var(--copper-glow); }
html[data-theme="G"] .ledger__label {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
html[data-theme="G"] .ledger__label::before { background: var(--sirius); box-shadow: 0 0 4px var(--sirius); }
html[data-theme="G"] .ledger dd { color: var(--ink-soft); }

/* --- Schematic / star chart --------------------------------
   Backdrop: a polar coordinate grid (concentric circles +
   radial spokes). It evokes a celestial-sphere chart without
   relying on orbital-ring metaphors in the layout itself. */
html[data-theme="G"] .schematic {
  background: var(--paper-soft);
  border-color: var(--rule);
  position: relative;
}
html[data-theme="G"] .schematic::before {
  background-image:
    /* Concentric rings */
    radial-gradient(circle at 50% 50%,
      transparent 18%, rgba(111,174,255,0.13) 18.4%, transparent 18.8%,
      transparent 30%, rgba(111,174,255,0.10) 30.4%, transparent 30.8%,
      transparent 45%, rgba(111,174,255,0.08) 45.4%, transparent 45.8%,
      transparent 62%, rgba(111,174,255,0.06) 62.4%, transparent 62.8%,
      transparent 80%, rgba(111,174,255,0.04) 80.4%, transparent 80.8%);
  opacity: 0.85;
}
/* Radial spokes — a separate layer via the schematic's existing
   ::before is already used; add via a complementary gradient. */
html[data-theme="G"] .schematic {
  background-image:
    /* 12 spokes from centre */
    conic-gradient(from -90deg at 50% 50%,
      transparent 0deg, rgba(111,174,255,0.05) 0.25deg, transparent 0.5deg,
      transparent 30deg, rgba(111,174,255,0.05) 30.25deg, transparent 30.5deg,
      transparent 60deg, rgba(111,174,255,0.05) 60.25deg, transparent 60.5deg,
      transparent 90deg, rgba(111,174,255,0.05) 90.25deg, transparent 90.5deg,
      transparent 120deg, rgba(111,174,255,0.05) 120.25deg, transparent 120.5deg,
      transparent 150deg, rgba(111,174,255,0.05) 150.25deg, transparent 150.5deg,
      transparent 180deg, rgba(111,174,255,0.05) 180.25deg, transparent 180.5deg,
      transparent 210deg, rgba(111,174,255,0.05) 210.25deg, transparent 210.5deg,
      transparent 240deg, rgba(111,174,255,0.05) 240.25deg, transparent 240.5deg,
      transparent 270deg, rgba(111,174,255,0.05) 270.25deg, transparent 270.5deg,
      transparent 300deg, rgba(111,174,255,0.05) 300.25deg, transparent 300.5deg,
      transparent 330deg, rgba(111,174,255,0.05) 330.25deg, transparent 330.5deg,
      transparent 360deg);
}
html[data-theme="G"] .schematic__head { border-bottom-color: var(--hairline); }
html[data-theme="G"] .schematic__mark { color: var(--sirius); }
html[data-theme="G"] .schematic__mark .wordmark-star {
  fill: var(--starlight);
  filter: drop-shadow(0 0 4px rgba(111, 174, 255, 0.6));
}
html[data-theme="G"] .schematic__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
html[data-theme="G"] .schematic__sub { color: var(--ink-mid); border-left-color: var(--rule); font-family: var(--font-mono); }
html[data-theme="G"] .schematic__ref { color: var(--sirius); }

html[data-theme="G"] .plane { border-right-color: var(--hairline); }
html[data-theme="G"] .plane__head { border-bottom-color: var(--rule); }
html[data-theme="G"] .plane__head::after {
  background: var(--sirius);
  box-shadow:
    0 0 0 4px var(--paper-soft),
    0 0 16px rgba(111, 174, 255, 0.7);
  width: 9px; height: 9px;
}
html[data-theme="G"] .plane__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
html[data-theme="G"] .plane__sub {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  color: var(--sirius);
}
html[data-theme="G"] .plane__list li { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.85rem; }
html[data-theme="G"] .plane__list li::before { background: var(--sirius); width: 8px; opacity: 0.85; }

/* --- Foundations + stats ---------------------------------- */
html[data-theme="G"] .foundations {
  background: var(--paper-deep);
  border-top-color: var(--hairline);
  border-bottom-color: var(--hairline);
}
html[data-theme="G"] .foundations::before {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(199, 211, 255, 0.025) 38px 39px);
}
html[data-theme="G"] .stats {
  background: var(--paper-soft);
  border-top-color: var(--rule);
  border-bottom-color: var(--rule);
}
html[data-theme="G"] .stats__cell { border-right-color: var(--hairline); }
html[data-theme="G"] .stats__value { color: var(--ink); font-family: var(--font-display); font-weight: 700; }
html[data-theme="G"] .stats__num em {
  color: var(--sirius);
  font-style: normal;
  text-shadow: 0 0 18px rgba(111, 174, 255, 0.4);
}
html[data-theme="G"] .stats__unit { color: var(--ink-soft); }
html[data-theme="G"] .stats dd { color: var(--ink-soft); }
html[data-theme="G"] .foundations__note {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
}
html[data-theme="G"] .foundations__note em { color: var(--sirius); font-style: normal; }

/* --- Surfaces --------------------------------------------- */
html[data-theme="G"] .service-list { border-top-color: var(--rule); }
html[data-theme="G"] .service-row { border-bottom-color: var(--hairline); }
html[data-theme="G"] .service-row::before {
  background: var(--sirius);
  box-shadow: 0 0 8px var(--sirius);
}
html[data-theme="G"] .service-row:hover {
  background: linear-gradient(to right, rgba(111, 174, 255, 0.07), transparent 55%);
}
html[data-theme="G"] .service-row__title h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
}
html[data-theme="G"] .service-row__title .meta { color: var(--sirius); font-family: var(--font-mono); }
html[data-theme="G"] .service-row__body p { color: var(--ink-soft); }
html[data-theme="G"] .service-row__tags span {
  background: var(--paper-soft);
  border-color: var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
html[data-theme="G"] .service-row:hover .service-row__tags span {
  border-color: var(--copper-hair);
  color: var(--ink);
}

/* --- Principles ------------------------------------------- */
html[data-theme="G"] .principles {
  background: var(--paper-deep);
  border-top-color: var(--hairline);
  border-bottom-color: var(--hairline);
}
html[data-theme="G"] .principles__grid {
  background: var(--paper-soft);
  border-top-color: var(--rule);
}
html[data-theme="G"] .principle {
  border-right-color: var(--hairline);
  border-bottom-color: var(--hairline);
}
html[data-theme="G"] .principle::before {
  background: var(--sirius);
  box-shadow: 0 0 10px var(--sirius);
}
html[data-theme="G"] .principle:hover { background: var(--copper-glow); }
html[data-theme="G"] .principle__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
html[data-theme="G"] .principle__body { color: var(--ink-soft); }

/* --- Audiences -------------------------------------------- */
html[data-theme="G"] .audiences__grid {
  border-top-color: var(--rule);
  border-bottom-color: var(--rule);
}
html[data-theme="G"] .audience {
  background: var(--paper-soft);
  border-right-color: var(--hairline);
  border-bottom-color: var(--hairline);
}
html[data-theme="G"] .audience::before {
  background: var(--sirius);
  box-shadow: 0 0 6px var(--sirius);
}
html[data-theme="G"] .audience:hover { background: var(--paper); }
html[data-theme="G"] .audience h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
html[data-theme="G"] .audience p { color: var(--ink-soft); }

/* --- Products --------------------------------------------- */
html[data-theme="G"] .product {
  background: linear-gradient(to right, var(--paper) 0%, var(--paper) 100%);
  border-bottom-color: var(--hairline);
}
html[data-theme="G"] .product::before { background: var(--rule); }
html[data-theme="G"] .product--live::before {
  background: var(--sirius);
  box-shadow: 0 0 14px var(--sirius);
}
html[data-theme="G"] .product--beta::before {
  background: var(--sirius);
  opacity: 0.7;
  box-shadow: 0 0 8px rgba(111, 174, 255, 0.4);
}
html[data-theme="G"] .product--building::before { background: var(--copper-deep); opacity: 0.7; }
html[data-theme="G"] .product--horizon::before { background: var(--rule); opacity: 0.6; }
html[data-theme="G"] .product:hover { background: var(--paper-soft); }
html[data-theme="G"] .product--live:hover {
  background: linear-gradient(to right, var(--copper-wash), var(--paper-soft) 60%);
}

html[data-theme="G"] .product__pill {
  background: var(--paper-soft);
  border-color: var(--rule);
  color: var(--ink-mid);
  font-family: var(--font-mono);
}
html[data-theme="G"] .product__pill--live {
  color: var(--sirius);
  border-color: var(--sirius);
  background: var(--copper-wash);
  box-shadow: 0 0 14px rgba(111, 174, 255, 0.25);
}
html[data-theme="G"] .product__pill--beta {
  color: var(--copper-soft);
  border-color: var(--copper-hair);
  background: var(--copper-glow);
}
html[data-theme="G"] .product__pill-dot {
  background: var(--sirius);
  box-shadow: 0 0 0 3px var(--copper-wash), 0 0 8px var(--sirius);
}
html[data-theme="G"] .product__since { color: var(--ink-mid); }
html[data-theme="G"] .product--live .product__since { color: var(--sirius); }
html[data-theme="G"] .product__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.018em;
}
html[data-theme="G"] .product--building .product__name { color: var(--ink-soft); }
html[data-theme="G"] .product--horizon .product__name { color: var(--ink-mid); }
html[data-theme="G"] .product__desc { color: var(--ink-soft); }
html[data-theme="G"] .product--horizon .product__desc { color: var(--ink-mid); }
html[data-theme="G"] .product__link {
  color: var(--ink);
  border-bottom-color: var(--copper-hair);
}
html[data-theme="G"] .product__link:hover { color: var(--sirius); border-bottom-color: var(--sirius); }

html[data-theme="G"] .product__tags span {
  background: var(--paper-soft);
  border-color: var(--rule);
  color: var(--ink-soft);
}
html[data-theme="G"] .product:hover .product__tags span {
  border-color: var(--copper-hair);
  color: var(--ink);
}
html[data-theme="G"] .products__note {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
}
html[data-theme="G"] .products__note em { color: var(--sirius); font-style: normal; }

/* --- Direction / closing ---------------------------------- */
html[data-theme="G"] .direction { border-top-color: var(--hairline); }
html[data-theme="G"] .direction__body p { color: var(--ink-soft); }
html[data-theme="G"] .direction__signoff { border-top-color: var(--hairline); }
html[data-theme="G"] .direction__contact .meta { color: var(--ink-mid); }
html[data-theme="G"] .direction__contact a {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  border-bottom-color: var(--copper-hair);
}
html[data-theme="G"] .direction__contact a:hover { color: var(--sirius); border-bottom-color: var(--sirius); }
html[data-theme="G"] .direction__author { color: var(--ink-mid); font-family: var(--font-mono); }
html[data-theme="G"] .direction__author strong { color: var(--ink-soft); }

/* --- Footer ------------------------------------------------ */
html[data-theme="G"] .footer { border-top-color: var(--hairline); color: var(--ink-mid); }
html[data-theme="G"] .footer__copy { color: var(--ink-soft); }
html[data-theme="G"] .footer__copy a {
  color: var(--ink);
  border-bottom-color: var(--copper-hair);
}
html[data-theme="G"] .footer__copy a:hover { color: var(--sirius); border-bottom-color: var(--sirius); }
html[data-theme="G"] .footer__mail:hover { color: var(--sirius); }

/* --- Theme picker chrome ---------------------------------- */
html[data-theme="G"] .theme-picker__trigger {
  background: rgba(11, 17, 56, 0.6);
  border-color: var(--hairline);
  color: var(--ink-soft);
  font-family: var(--font-display);
}
html[data-theme="G"] .theme-picker__trigger:hover {
  border-color: var(--rule);
  color: var(--ink);
}
html[data-theme="G"] .theme-picker__trigger[aria-expanded="true"] { border-color: var(--sirius); }
html[data-theme="G"] .theme-picker__dot { background: var(--sirius); box-shadow: 0 0 8px var(--sirius); }
html[data-theme="G"] .theme-picker__label-letter { color: var(--sirius); font-family: var(--font-mono); }
html[data-theme="G"] .theme-picker__menu {
  background: rgba(11, 17, 56, 0.96);
  border-color: var(--hairline);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 14px 44px -12px rgba(0, 0, 0, 0.7),
    0 2px 8px -4px rgba(0, 0, 0, 0.5);
}
html[data-theme="G"] .theme-picker__option-letter { color: var(--sirius); font-family: var(--font-mono); }
html[data-theme="G"] .theme-picker__option-name { color: var(--ink); }
html[data-theme="G"] .theme-picker__option-sub { color: var(--ink-mid); }
html[data-theme="G"] .theme-picker__option:hover,
html[data-theme="G"] .theme-picker__option:focus-visible { background: var(--copper-glow); }
html[data-theme="G"] .theme-picker__option[aria-selected="true"] { background: var(--copper-wash); }

html[data-theme="G"] .mode-toggle {
  background: rgba(11, 17, 56, 0.5);
  border-color: var(--hairline);
  color: var(--ink-soft);
}
html[data-theme="G"] .mode-toggle:hover { color: var(--sirius); border-color: var(--rule); }

/* =============================================================
   THEME G — Light mode
   The 19th-century scientific astronomy plate. Cool blue-tinted
   parchment + deep indigo ink + faint celestial markings. Same
   sci-fi-cartography vocabulary, daylight reading. Distinctly
   colder than Theme A's warm cream.
   ============================================================= */
html[data-theme="G"][data-mode="light"] {
  --paper:        #EDF0FA;     /* cool icy parchment */
  --paper-soft:   #FFFFFF;
  --paper-deep:   #DEE3F0;
  --hairline:     #CDD3E5;
  --rule:         #95A0C5;
  --rule-strong:  #6573A0;

  --ink:          #0B1138;     /* deep indigo, never warm-black */
  --ink-soft:     #2D3B85;
  --ink-mid:      #5C6BA0;
  --ink-faint:    #8A93B8;

  --copper:       #2D5DC4;     /* deep ink-blue (vintage astronomical pen) */
  --copper-soft:  #5985E8;
  --copper-deep:  #1F47A0;
  --copper-wash:  rgba(45, 93, 196, 0.08);
  --copper-hair:  rgba(45, 93, 196, 0.30);
  --copper-glow:  rgba(45, 93, 196, 0.05);

  --indigo:       #7B45D4;     /* secondary far-violet, dimmed for paper */
  --indigo-soft:  #9B6CE8;

  --sirius:       #2D5DC4;
  --far-violet:   #7B45D4;
  --starlight:    #0B1138;
  --aurora-top:   rgba(45, 93, 196, 0.06);
  --aurora-bot:   rgba(123, 69, 212, 0.05);

  color-scheme: light;
}

/* Light mode backdrop: faint ink stars on cool parchment. The
   plate is being read indoors; the sky is still implied. */
html[data-theme="G"][data-mode="light"] body::before {
  background-color: var(--paper);
  background-image:
    radial-gradient(1.5px 1.5px at 14% 14%, rgba(45, 93, 196, 0.7),  transparent 75%),
    radial-gradient(1.5px 1.5px at 78% 8%,  rgba(11, 17, 56, 0.55),  transparent 75%),
    radial-gradient(1.4px 1.4px at 6% 88%,  rgba(11, 17, 56, 0.50),  transparent 75%),
    radial-gradient(1.4px 1.4px at 92% 64%, rgba(45, 93, 196, 0.55), transparent 75%),
    radial-gradient(1.4px 1.4px at 36% 72%, rgba(11, 17, 56, 0.45),  transparent 75%),
    radial-gradient(0.9px 0.9px at 4% 22%,  rgba(11, 17, 56, 0.32), transparent 80%),
    radial-gradient(0.9px 0.9px at 11% 44%, rgba(11, 17, 56, 0.28), transparent 80%),
    radial-gradient(0.9px 0.9px at 18% 66%, rgba(11, 17, 56, 0.30), transparent 80%),
    radial-gradient(0.9px 0.9px at 24% 18%, rgba(11, 17, 56, 0.24), transparent 80%),
    radial-gradient(0.9px 0.9px at 31% 32%, rgba(11, 17, 56, 0.30), transparent 80%),
    radial-gradient(0.9px 0.9px at 39% 58%, rgba(11, 17, 56, 0.26), transparent 80%),
    radial-gradient(0.9px 0.9px at 47% 14%, rgba(11, 17, 56, 0.32), transparent 80%),
    radial-gradient(0.9px 0.9px at 54% 38%, rgba(11, 17, 56, 0.26), transparent 80%),
    radial-gradient(0.9px 0.9px at 62% 80%, rgba(11, 17, 56, 0.24), transparent 80%),
    radial-gradient(0.9px 0.9px at 68% 22%, rgba(11, 17, 56, 0.30), transparent 80%),
    radial-gradient(0.9px 0.9px at 73% 48%, rgba(11, 17, 56, 0.24), transparent 80%),
    radial-gradient(0.9px 0.9px at 81% 92%, rgba(11, 17, 56, 0.26), transparent 80%),
    radial-gradient(0.9px 0.9px at 86% 28%, rgba(11, 17, 56, 0.30), transparent 80%),
    radial-gradient(0.9px 0.9px at 95% 78%, rgba(11, 17, 56, 0.24), transparent 80%),
    radial-gradient(0.6px 0.6px at 8% 6%,   rgba(11, 17, 56, 0.18), transparent 85%),
    radial-gradient(0.6px 0.6px at 22% 52%, rgba(11, 17, 56, 0.18), transparent 85%),
    radial-gradient(0.6px 0.6px at 41% 22%, rgba(11, 17, 56, 0.18), transparent 85%),
    radial-gradient(0.6px 0.6px at 56% 70%, rgba(11, 17, 56, 0.18), transparent 85%),
    radial-gradient(0.6px 0.6px at 72% 36%, rgba(11, 17, 56, 0.18), transparent 85%),
    radial-gradient(0.6px 0.6px at 89% 12%, rgba(11, 17, 56, 0.18), transparent 85%),
    radial-gradient(0.6px 0.6px at 96% 44%, rgba(11, 17, 56, 0.18), transparent 85%),
    /* Subtle aurora wash — daylit version of the same idea */
    radial-gradient(900px 600px at 88% -8%, var(--aurora-top), transparent 75%),
    radial-gradient(800px 500px at 12% 110%, var(--aurora-bot), transparent 75%);
  background-repeat: no-repeat;
  background-size: cover;
}

html[data-theme="G"][data-mode="light"] body { color: var(--ink); }
html[data-theme="G"][data-mode="light"] .display em { text-shadow: none; }
html[data-theme="G"][data-mode="light"] .hero__title em { text-shadow: none; }
html[data-theme="G"][data-mode="light"] .hero__bg-contours {
  filter: none;
  opacity: 0.55;
}
html[data-theme="G"][data-mode="light"] .hero__bg-stars circle { fill: var(--ink); }
html[data-theme="G"][data-mode="light"] .hero__bg-stars circle:nth-child(5),
html[data-theme="G"][data-mode="light"] .hero__bg-stars circle:nth-child(11) {
  filter: none;
}
html[data-theme="G"][data-mode="light"] .wordmark__glyph .contour { filter: none; }
html[data-theme="G"][data-mode="light"] .wordmark__glyph .wordmark-star {
  fill: var(--copper);
  filter: none;
}
html[data-theme="G"][data-mode="light"] .schematic__mark .wordmark-star {
  fill: var(--copper);
  filter: none;
}
html[data-theme="G"][data-mode="light"] .nav.is-scrolled {
  background: rgba(237, 240, 250, 0.85);
  border-bottom-color: var(--hairline);
}
html[data-theme="G"][data-mode="light"] .hero__bg-grid {
  background-image:
    linear-gradient(90deg, rgba(11, 17, 56, 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11, 17, 56, 0.018) 1px, transparent 1px);
}
html[data-theme="G"][data-mode="light"] .schematic { background: var(--paper-soft); }
html[data-theme="G"][data-mode="light"] .schematic::before {
  background-image:
    radial-gradient(circle at 50% 50%,
      transparent 18%, rgba(45,93,196,0.10) 18.4%, transparent 18.8%,
      transparent 30%, rgba(45,93,196,0.08) 30.4%, transparent 30.8%,
      transparent 45%, rgba(45,93,196,0.06) 45.4%, transparent 45.8%,
      transparent 62%, rgba(45,93,196,0.05) 62.4%, transparent 62.8%,
      transparent 80%, rgba(45,93,196,0.04) 80.4%, transparent 80.8%);
}
html[data-theme="G"][data-mode="light"] .schematic {
  background-image:
    conic-gradient(from -90deg at 50% 50%,
      transparent 0deg, rgba(45,93,196,0.04) 0.25deg, transparent 0.5deg,
      transparent 30deg, rgba(45,93,196,0.04) 30.25deg, transparent 30.5deg,
      transparent 60deg, rgba(45,93,196,0.04) 60.25deg, transparent 60.5deg,
      transparent 90deg, rgba(45,93,196,0.04) 90.25deg, transparent 90.5deg,
      transparent 120deg, rgba(45,93,196,0.04) 120.25deg, transparent 120.5deg,
      transparent 150deg, rgba(45,93,196,0.04) 150.25deg, transparent 150.5deg,
      transparent 180deg, rgba(45,93,196,0.04) 180.25deg, transparent 180.5deg,
      transparent 210deg, rgba(45,93,196,0.04) 210.25deg, transparent 210.5deg,
      transparent 240deg, rgba(45,93,196,0.04) 240.25deg, transparent 240.5deg,
      transparent 270deg, rgba(45,93,196,0.04) 270.25deg, transparent 270.5deg,
      transparent 300deg, rgba(45,93,196,0.04) 300.25deg, transparent 300.5deg,
      transparent 330deg, rgba(45,93,196,0.04) 330.25deg, transparent 330.5deg,
      transparent 360deg);
}
html[data-theme="G"][data-mode="light"] .ledger { background: var(--paper-soft); }
html[data-theme="G"][data-mode="light"] .stats { background: var(--paper-soft); }
html[data-theme="G"][data-mode="light"] .principles__grid { background: var(--paper-soft); }
html[data-theme="G"][data-mode="light"] .audience { background: var(--paper-soft); }
html[data-theme="G"][data-mode="light"] .product { background: var(--paper); }
html[data-theme="G"][data-mode="light"] .product:hover { background: var(--paper-soft); }
html[data-theme="G"][data-mode="light"] .product__pill { background: var(--paper-soft); }
html[data-theme="G"][data-mode="light"] .theme-picker__trigger,
html[data-theme="G"][data-mode="light"] .theme-picker__menu,
html[data-theme="G"][data-mode="light"] .mode-toggle {
  background: rgba(255, 255, 255, 0.85);
}
/* Pings in light mode dial down the violet glow — paper, not screen */
html[data-theme="G"][data-mode="light"] .hero__bg-pings circle {
  fill: var(--copper-deep);
  filter: none;
}

/* --- Reduced-motion: kill the twinkle, keep the chart -------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="G"] .hero__bg-stars circle {
    animation: none !important;
    opacity: 0.7 !important;
  }
}