/* ================================================================
   EDITORIAL LAYER — v21  (warm academic-press refinement)
   This file used to be the "cosmic" theme that repainted the site
   in cold neon.  It now does the opposite: it restores the real
   typefaces + warm paper palette from styles.css and only supplies
   the few things styles.css lacks — the two-column hero grids and the
   dark "journal figure" plates behind the hero canvases.
   No glass, no glow, no gradient text, no fake HUD telemetry.
   ================================================================ */

:root{
  color-scheme:light;
  --maxw:1200px;

  /* restore the real type system (the old file forced Times New Roman) */
  --serif:"Newsreader",Georgia,"Songti SC","SimSun",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",
         "PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* warm accents used only on the dark figure plates */
  --fig-amber:#e0a45c;
  --fig-steel:#8ba9cf;

  /* figure plates are a warm GRAPHITE, not black, so they sit calmly on
     the paper page instead of clashing (canvas art is light-on-dark, so
     they must stay dark enough for the amber strokes to read). */
  --well:#2a251d;
  --well-line:rgba(224,180,120,.20);

  /* on-dark text — brightened to read on the lighter graphite plates
     (the old values were tuned for a near-black plate). Covers every
     label/caption/log inside the dark frames. */
  --ink-od:#f4eee2;
  --ink-od-soft:#d8ceb4;
  --ink-od-dim:#aca287;
}

/* comfortable reading measure for an editorial page */
body{font-size:16.5px;line-height:1.68;letter-spacing:0}

/* keep body copy legible without shouting */
.card p,.door-desc,.section-head p,.feature-head p,.pub-abs,.hub-glance-note,
.ai-lede,.hub-lede,.lede{font-size:1.06rem}
.cap{font-size:.9rem;line-height:1.65}

/* --- visible keyboard focus (accessibility + interaction polish) --- */
a:focus-visible,.btn:focus-visible,.btn-sm:focus-visible,.chip:focus-visible,
.tb-chip:focus-visible,summary:focus-visible,button:focus-visible,
input:focus-visible,.door:focus-visible,.ai-hchip:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:5px;
}

/* the ambient full-page canvas: keep it a whisper, no grid, no glow */
.cosmic-backdrop{position:fixed;inset:0;width:100%;height:100%;z-index:-2;
  pointer-events:none;opacity:.04}

/* ================================================================
   HERO LAYOUTS  (two columns: prose | figure plate)
   styles.css lays these out single-column; the side-by-side reading
   is nicer on wide screens, so we supply the grid here.
   ================================================================ */
.hub-hero,.ai-hero{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  align-items:center;gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(3rem,6.5vw,5.5rem) clamp(1rem,4vw,2.75rem) clamp(2.5rem,5vw,4rem);
}
.hub-hero-inner,.ai-hero-text{max-width:64ch}

/* the eyebrow gets a short rule, like a running head in print */
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;
  background:var(--accent);vertical-align:middle;margin-right:.7rem}

/* ---- the dark journal-figure plate behind each hero canvas ---- */
.hub-cosmos-panel,.ai-hero-visual{
  position:relative;min-height:460px;overflow:hidden;isolation:isolate;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:radial-gradient(125% 125% at 50% 28%,#38332a,#231f18);
  box-shadow:0 26px 64px -42px rgba(40,30,10,.5),inset 0 1px 0 rgba(255,255,255,.045);
}

/* the smaller journal-figure plates: same warm graphite, mounted look */
.hero-fig-plate,.door-plate{
  background:radial-gradient(125% 120% at 50% 25%,#38332a,#231f18)!important;
  border-color:var(--line-strong);
}
.door-ai .door-plate{background:radial-gradient(125% 120% at 50% 30%,#3a342a,#241f18)!important}
.hub-cosmos-panel canvas,.ai-hero-visual canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}

/* ---- quiet figure captions (replaces the neon HUD telemetry) ---- */
.cosmos-hud,.ai-viz-head,.ai-viz-stages{
  position:absolute;z-index:3;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-od-dim);
}
.cosmos-hud{left:1.1rem;right:1.1rem;display:flex;align-items:center;justify-content:space-between}
.cosmos-hud-top,.ai-viz-head{top:.95rem;left:1.1rem;right:1.1rem;
  display:flex;justify-content:space-between}
.cosmos-hud-bottom,.ai-viz-stages{bottom:.95rem;left:1.1rem;right:1.1rem;top:auto;
  display:flex;align-items:center;justify-content:center;gap:.7rem;color:var(--ink-od-dim)}
.ai-viz-stages{justify-content:space-between}
/* the stage rail tracks the animation, so the plate and its caption
   are one instrument rather than a picture with a label under it */
.ai-viz-stages span{position:relative;padding-bottom:.32rem;transition:color .3s var(--ease)}
.ai-viz-stages span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--fig-amber);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease)}
.ai-viz-stages span.is-on{color:var(--fig-amber)}
.ai-viz-stages span.is-on::after{transform:scaleX(1)}
.cosmos-hud-bottom b{color:var(--fig-amber);font-weight:400}
.ai-viz-readout{display:none}         /* remove fabricated live metrics */

/* a small static marker — no pulsing "LIVE" gimmick */
.live-dot{display:inline-block;width:5px;height:5px;margin-right:.5rem;border-radius:50%;
  background:var(--fig-amber);vertical-align:middle}

/* ================================================================
   A FEW WARM TONE-DOWNS of accents that were left cyan in styles.css
   ================================================================ */
.door-research::after{background:linear-gradient(90deg,transparent,var(--fig-steel),transparent)}
.door-ai::after{background:linear-gradient(90deg,transparent,var(--accent-soft),transparent)}
.dot-cyc{background:var(--fig-amber)}
.eqn-hi{border-color:rgba(168,85,24,.35);box-shadow:inset 0 0 0 1px rgba(168,85,24,.07)}
.fig-bullets .fb-pick{border-color:rgba(168,85,24,.4)}
.fig-bullets .fb-pick span{color:var(--accent)}
.fe-mode.is-on{border-color:var(--accent);color:var(--accent);background:rgba(168,85,24,.08)}
.a2a-tag{color:var(--accent);border-color:rgba(168,85,24,.35)}
/* (the device shadow/rail now lives in styles.css — do not re-flatten it here) */
.eb-fill{background:linear-gradient(90deg,var(--teal),var(--cyan))}
.eb-fill.eb-fill-me{background:linear-gradient(90deg,var(--accent-deep),var(--accent-soft))}

/* the two "8B astronomy LLM you can audit" accents stay solid, not gradient */
.ai-hero h1 .accenty{color:var(--accent);font-style:italic;
  background:none;-webkit-text-fill-color:currentColor}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1040px){
  .hub-hero,.ai-hero{grid-template-columns:1fr}
  .hub-hero-inner,.ai-hero-text{max-width:760px}
  .hub-cosmos-panel,.ai-hero-visual{min-height:420px}
}
@media (max-width:640px){
  .hub-cosmos-panel,.ai-hero-visual{min-height:340px}
  .ai-viz-stages{font-size:.56rem;letter-spacing:.06em}
  .hero-actions{align-items:stretch}
}