/* ============================================================================
   ENDLESS FRONTIER theme — aligns MatrixLab·Multiverse with the BigBang main
   site (endlessfrontier.tech). Loaded LAST on every page; overrides only,
   no edits to the shipped stylesheets.

   BigBang voice: deep-space blue-black, cool white ink, hairline rules,
   single gold accent, Cormorant Garamond display serif, Newsreader prose,
   Inter sans, Space Grotesk wordmark, IBM Plex Mono labels.
   Universe hues (amber / jade) stay — they are content identity.
   ============================================================================ */

:root {
  /* BigBang palette */
  --gold: #d8b26a;
  --gold-2: #f0d9a8;
  --gold-dim: rgba(216, 178, 106, 0.55);

  /* cool the warm bone palette toward BigBang's cool white */
  --bone: #e9ebf1;
  --bone-dim: rgba(233, 235, 241, 0.64);
  --slate: rgba(233, 235, 241, 0.42);
  --line: rgba(233, 235, 241, 0.10);
  --line-strong: rgba(233, 235, 241, 0.26);

  --ink-900: #04060b;
  --ink-850: #080b13;

  /* type: BigBang stacks (Google Fonts, same families as the main site) */
  --display: "Cormorant Garamond", "Times New Roman", "Noto Serif SC", serif;
  --serif2: "Newsreader", Georgia, "Noto Serif SC", serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --grot: "Space Grotesk", var(--sans);

  /* neutral/crossing accent goes gold; science/code keep their hues */
  --accent: var(--gold);
  --accent-soft: rgba(216, 178, 106, 0.12);
  --accent-deep: #a37c36;

  /* hairline squares, not pills */
  --radius: 1px;
}

body[data-universe="science"] {
  --accent: var(--science);
  --accent-soft: var(--science-soft);
  --accent-deep: var(--science-deep);
}
body[data-universe="code"] {
  --accent: var(--code);
  --accent-soft: var(--code-soft);
  --accent-deep: var(--code-deep);
}

/* ---------- backdrop: BigBang deep-space wash ---------- */

body {
  background-color: var(--ink-900);
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0.005em;
}

body::before {
  background:
    radial-gradient(58rem 40rem at 12% -8%, rgba(216, 178, 106, 0.07), transparent 62%),
    radial-gradient(52rem 38rem at 92% 4%, rgba(168, 198, 232, 0.05), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, var(--ink-850) 0%, var(--ink-900) 55%);
}

body[data-universe="science"]::before {
  background:
    radial-gradient(60rem 44rem at 8% -12%, rgba(242, 166, 59, 0.14), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, var(--ink-850) 0%, var(--ink-900) 55%);
}

body[data-universe="code"]::before {
  background:
    radial-gradient(60rem 44rem at 92% -12%, rgba(88, 202, 166, 0.11), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, var(--ink-850) 0%, var(--ink-900) 55%);
}

::selection { background: #e3b341; color: #05070b; }

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

/* ---------- type: serif voice of the main site ---------- */

h1, h2, h3,
.display-xl, .display-l, .display-m, .display-s,
.chart-title, .case-title, .flow-name, .future-title, .stat-value,
.portal-name, .universe-plane h2, .world-name {
  font-family: var(--display);
  font-variation-settings: normal;
  font-weight: 300;
  letter-spacing: 0.01em;
}

.page-heading h1,
.future-heading h1,
.code-star-map h1 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: 0.01em;
}

h1 em, h2 em, .sec-title em { color: var(--gold-2); }

/* prose goes Newsreader, the BigBang editorial feel */
.lede, .page-intro, .future-intro, .intro-hook, .intro-panel-inner p,
.case-summary, .flow-note, .footer-note, .section-intro, .paper-row p,
.row-scenario, .access-explanation p, .world-summary, .episode-panel p {
  font-family: var(--serif2);
  font-weight: 300;
}

/* mono labels: BigBang tracking */
.label, .eyebrow, .section-kicker, .stat-label, .chart-sub, .case-id,
.data-meta, .colophon, .portal-index, .portal-enter, .portal-status,
.plane-index, .plane-detail, .chart-toggle, .chip, .status-chip,
.footer-routes a, .return-link, .return-note, .paper-topic {
  letter-spacing: 0.2em;
}

/* ---------- masthead → BigBang fixed nav ---------- */

.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  background: rgba(4, 6, 11, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.masthead-inner {
  border-bottom-color: var(--line);
}

.wordmark {
  font-family: var(--grot);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.32em;
  color: var(--bone);
}

/* nav links: bare mono caps, gold hover — no pills */
.nav a, .nav button {
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  padding: 0.42rem 0.15rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--slate);
}

.nav a:hover, .nav button:hover {
  color: var(--gold-2);
  border-color: transparent;
  background: none;
}

.nav a[aria-current="page"] {
  color: var(--gold-2);
  border-color: transparent;
  background: none;
}

.nav .nav-science:hover { color: var(--science); border-color: transparent; }
.nav .nav-code:hover { color: var(--code); border-color: transparent; }

/* beats the !important language-link rule in multiverse.css */
.language-link {
  color: var(--slate) !important;
  border-color: transparent !important;
}
.language-link:hover { color: var(--gold-2) !important; }

.nav { gap: 1.4rem; }

/* fixed masthead leaves the flow — give pages their top space back.
   The crossing page is a one-viewport grid whose first row IS the masthead,
   so there it must stay in flow (sticky looks identical: the page never scrolls). */
body { padding-top: 64px; }
.crossing-page { padding-top: 0; }
.crossing-page .masthead { position: sticky; }

/* ---------- buttons & chips: hairline rectangles ---------- */

.chart-toggle, .chip, .status-chip, .future-label,
.intro-expand-button, .intro-panel-close button,
.replay-controls button, .paper-controls button,
.replay-speeds button, .map-toggle, .return-link {
  border-radius: var(--radius);
}

.chart-toggle, .map-toggle {
  font-family: var(--mono);
  text-transform: uppercase;
}

.chart-toggle[aria-pressed="true"] {
  color: var(--gold-2);
  border-color: var(--gold-dim);
  background: var(--accent-soft);
}

/* ---------- crossing (home) ---------- */

.universe-intro h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 0.005em;
  color: var(--bone);
}

.crossing-title span { color: var(--bone-dim); }

.universe-intro p { color: rgba(233, 235, 241, 0.58); }
.universe-intro strong { color: rgba(233, 235, 241, 0.8); }
.universe-intro .intro-hook { color: rgba(233, 235, 241, 0.7); }
.universe-intro .intro-navigation { color: rgba(233, 235, 241, 0.38); }
.intro-navigation span { color: var(--gold-dim); }

.intro-expand-button {
  border-color: var(--line-strong);
  background: rgba(233, 235, 241, 0.02);
  color: var(--bone-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.intro-expand-button:hover, .intro-expand-button:focus-visible {
  border-color: var(--gold-dim);
  background: var(--accent-soft);
  color: var(--gold-2);
}

.intro-panel-inner {
  border-color: var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #0a0e18, #05070c);
}
.intro-panel-inner .eyebrow { color: var(--gold); }
.intro-panel-inner h2 { font-family: var(--display); font-weight: 300; color: var(--bone); }
.intro-panel-inner p { color: var(--bone-dim); }
.intro-panel-inner strong { color: var(--bone); }
.intro-panel-close button {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--bone-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.intro-panel-close button:hover { border-color: var(--gold-dim); color: var(--gold-2); }

.deck-card h2 { font-family: var(--display); font-weight: 400; color: var(--bone); }
.scene-entry { font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; color: var(--slate); }
.agent-scene:hover .scene-entry, .agent-scene:focus-visible .scene-entry { color: var(--gold-2); }
.scene-center-label { fill: var(--bone); }
.scene-label { fill: var(--slate); }

/* ---------- portals / cards ---------- */

.portal, .world-card, .chart-frame, .case, .mechanism-panel {
  border-radius: var(--radius);
}

.portal-enter { color: var(--accent); }

/* stats: BigBang hairline band */
.stats { border-color: var(--line); background: var(--line); }
.stat { background: rgba(4, 6, 11, 0.72); }

/* ---------- observatory / code / collaboration: cool the hard-coded teals ---------- */

.page-intro, .future-intro, .access-explanation p { color: var(--bone-dim); }
.quiet, .scope-note, .coverage-note { color: var(--slate); }

.page-heading h1, .paper-section-title, .episode-panel h2,
.history-episodes > h2, .package-row h3, .paper-row h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.replay, .episode-panel, .paper-filters, .paper-row, .package-row,
.episode-list button {
  border-color: var(--line);
}

.replay-status time, .replay-counters strong { color: var(--bone); }
.episode-panel p, .episode-panel ol { color: var(--bone-dim); }
.replay-speeds > span, .replay-initial, .page-heading .replay-reading { color: var(--slate); }

.replay-controls button, .paper-controls button {
  color: var(--bone-dim);
  background: rgba(233, 235, 241, 0.02);
  border-color: var(--line-strong);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.replay-controls button:hover, .paper-controls button:hover {
  color: var(--gold-2);
  border-color: var(--gold-dim);
}

.replay-speeds button { color: var(--bone-dim); border-color: var(--line); }
.replay-speeds button[aria-pressed="true"] {
  color: var(--gold-2);
  background: var(--accent-soft);
  border-color: var(--gold-dim);
}

.episode-list button { color: var(--bone-dim); }
.episode-list button:hover { color: var(--gold-2); }
.episode-list small { color: var(--slate); }

.paper-controls label, .paper-filters legend, .paper-count { color: var(--slate); }
.paper-controls input[type="search"] { border-bottom-color: var(--line-strong); color: var(--bone); }
.filter-options button { color: var(--bone-dim); }
.filter-options button:hover { color: var(--bone); border-color: var(--line-strong); }
.filter-options button[aria-pressed="true"] {
  color: var(--gold-2);
  background: var(--accent-soft);
  border-color: var(--gold-dim);
}
.filter-options button:focus-visible { outline-color: var(--gold-dim); }

.paper-topic { color: var(--gold-dim); }
.paper-section-title span { color: var(--slate); }
.paper-source, .paper-authors { color: var(--slate) !important; }
.paper-access { color: var(--bone-dim); }
.paper-access:hover { color: var(--gold-2); }
.paper-row h3 a, .code-list td:first-child a {
  color: var(--bone);
  border-bottom-color: var(--line-strong);
}
.paper-row h3 a:hover, .code-list td:first-child a:hover { border-bottom-color: var(--gold); }

/* code universe rows keep jade accents but cool the neutrals */
.row-scenario { color: var(--bone-dim); }
.row-ratio { color: var(--bone); }
.row-detail, .planet-ratio { color: var(--slate); }
.planet-name { color: var(--bone-dim); }
.map-toggle { color: var(--bone-dim); border-color: var(--line-strong); }
.map-toggle:hover, .map-toggle:focus-visible { color: var(--gold-2); border-color: var(--gold-dim); }
.code-qualifications { color: var(--bone-dim); }
.code-package-main .data-meta span { color: var(--bone-dim); }
.code-package-main .data-meta strong { color: var(--bone); }
.code-back-link { color: var(--bone-dim); }
.code-back-link:hover { color: var(--gold-2); }
.code-chart-legend { color: var(--slate); }
.accel-line { color: var(--bone); }
.accel-line strong { color: var(--bone-dim); }
.code-star-map .map-caption { color: var(--slate); }

/* observatory/code pages force IBM Plex Sans via a scoped variable — retarget it */
.observatory-main, .access-explanation, .code-star-map, .future-main {
  --sans: var(--display);
}
/* …but keep running prose and controls readable in Inter */
.observatory-main p, .observatory-main li, .observatory-main button,
.observatory-main input, .observatory-main label, .observatory-main legend,
.access-explanation p, .future-main p, .future-main li,
.code-star-map p, .code-star-map button, .code-star-map a {
  font-family: var(--sans);
}
.observatory-main .paper-row p, .observatory-main .row-scenario,
.access-explanation p, .future-main .world-summary, .future-main .future-intro {
  font-family: var(--serif2);
}

/* future page */
.future-label { color: var(--bone-dim); border-color: var(--line-strong); }
.world-enter { color: var(--gold-dim); }
.world-card:hover, .world-card:focus-visible { border-color: var(--gold-dim); }
.future-back a:hover { color: var(--gold-2); border-bottom-color: var(--gold-dim); }

/* footer */
.footer { background: linear-gradient(180deg, transparent, rgba(3, 5, 10, 0.7)); }
.footer-routes a:hover { color: var(--gold-2); }

/* ---------- zh locale: serif CJK like the main site ---------- */

html[lang="zh"] body {
  font-family: var(--sans);
}

html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] .page-heading h1,
html[lang="zh"] .paper-section-title,
html[lang="zh"] .deck-card h2,
html[lang="zh"] .universe-intro h1,
html[lang="zh"] .intro-panel-inner h2,
html[lang="zh"] .world-name,
html[lang="zh"] .paper-row h3,
html[lang="zh"] .package-row h3 {
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* CJK has no italics — emphasis stays upright, carried by the gold tone */
html[lang="zh"] em { font-style: normal; }

html[lang="zh"] .eyebrow,
html[lang="zh"] .label,
html[lang="zh"] .section-kicker,
html[lang="zh"] .nav a,
html[lang="zh"] .chip,
html[lang="zh"] .chart-toggle,
html[lang="zh"] .footer-routes a,
html[lang="zh"] .return-link,
html[lang="zh"] .scene-entry {
  letter-spacing: 0.12em;
}

html[lang="zh"] .wordmark {
  font-family: var(--grot);
  letter-spacing: 0.28em;
}

/* ---------- responsive ---------- */

@media (max-width: 679px) {
  body { padding-top: 104px; }
  .crossing-page { padding-top: 0; }
  .nav { gap: 0.9rem; flex-wrap: nowrap; overflow-x: auto; }
  .nav a, .nav button { padding: 0.4rem 0.1rem; }
  /* decorative chip would force a third masthead row under the fixed bar */
  .status-chip { display: none; }
}