/* GW3Central — "The Eye of Janthir" · drowned-Orr reliquary
   ZERO radius · hairline rules · tonal layering · GOLD glow = signature · monospaced numerics · no emojis */

:root {
  /* sunken-Orr water ramp (teal-green, NOT navy) */
  --abyss: #0a1416;            /* deepest water */
  --deep: #0d1b1e;             /* base */
  --deep-2: #122327;           /* surface-low */
  --deep-3: #1a2f33;           /* surface */
  --deep-4: #244046;           /* surface-high */
  /* warm marble bone text */
  --text: #e9e0cc;
  --text-dim: #b3c2bc;
  --text-faint: #6f8480;
  /* GW3 official gold (lifted from guildwars3.com SVG gradient) */
  --brand: #f6cd87;
  --brand-2: #f7ba53;
  --brand-deep: #b8860b;
  --brand-glow: rgba(246, 205, 135, 0.55);
  /* semantic LEDs */
  --instock: #3fd67f;
  --low: #e0a83c;
  --sold: #e0553f;
  --lead-cta: #d97706;
  /* hairline */
  --line: rgba(179, 194, 188, 0.18);
  --line-strong: rgba(233, 224, 204, 0.55);
}

* { border-radius: 0 !important; box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; background: var(--abyss); }

/* ── Official Guild Wars 3 typefaces (self-hosted from guildwars3.com CDN) ──
   OrpheusPro = display serif · IndecisiveSans = body grotesque.
   These are the ACTUAL fonts the official GW3 site ships. */
@font-face {
  font-family: "OrpheusPro";
  src: url("fonts/OrpheusPro-Regular.BSd7tlLc.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OrpheusPro";
  src: url("fonts/OrpheusPro-Italic.4pegxaIl.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "OrpheusPro";
  src: url("fonts/OrpheusPro-Bold.BRRdFf7R.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IndecisiveSans";
  src: url("fonts/IndecisiveSans-Extralight.BzH4V_mX.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IndecisiveSans";
  src: url("fonts/IndecisiveSans-Regular.DF1Mc2hC.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IndecisiveSans";
  src: url("fonts/IndecisiveSans-Medium.DrhceKpu.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

body {
  color: var(--text);
  font-family: "IndecisiveSans", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

::selection { background: var(--brand-deep); color: #fff; }

/* ── STAT BAR ─────────────────────────────────────────────── */
.statbar {
  position: fixed;
  top: 0; left: 0; right: 0; z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 20px;
  background-color: rgba(10, 20, 22, 0.92);
  background-image: var(--nav-skin, none);
  background-size: 480px;
  background-blend-mode: overlay;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: auto;
}
.statbar .mono { color: var(--text); }
.statbar-item { opacity: 0.85; }
.statbar-right { margin-left: auto; opacity: 0.7; }
.pulse {
  width: 8px; height: 8px; background: var(--instock); flex-shrink: 0;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% {opacity:1;} 50% {opacity:0.2;} }
.live { color: var(--instock); font-weight: 700; }

/* ── THREE.JS HERO ───────────────────────────────────────── */
#hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background-color: var(--abyss);
  /* Orrian backdrop reference texture — applied by JS ONLY if the asset exists
     (var stays unset otherwise, so no 404 request). Sits behind the alpha canvas. */
  background-image: var(--hero-art, none);
  background-size: cover;
  background-position: center 40%;
  transition: background-image 1.4s cubic-bezier(0.16,1,0.3,1);
}
/* Crossfade pulse while cycling hero styles — the NEXT image fades in over the
   current one (set via --hero-art-next by data.js), then swaps onto the base. */
#hero.hero-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-art-next, none);
  background-size: cover;
  background-position: center 40%;
  animation: heroFadeIn 1.4s cubic-bezier(0.16,1,0.3,1) both;
  pointer-events: none;
  z-index: 1;
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Emblem watermark — faint, top-right, only when the asset is present */
#hero::after {
  content: "";
  position: absolute;
  top: 46px; right: 28px;
  width: 128px; height: 128px;
  background: var(--emblem, none) center / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
  z-index: 5;
}
#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(10,20,22,0.35) 70%, var(--abyss) 100%),
    linear-gradient(to bottom, rgba(10,20,22,0.15) 0%, transparent 40%, var(--abyss) 96%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 780px;
  margin: 0 auto;
  padding: 16vh 24px 0;
  text-align: left;
}
.hero-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 18px;
  text-shadow: 0 0 18px var(--brand-glow);
}
.hero-title {
  font-family: "OrpheusPro", Georgia, serif;
  font-size: clamp(42px, 7vw, 84px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  text-shadow: 0 2px 40px rgba(10, 20, 22, 0.8);
}
.accent {
  color: var(--brand);
  text-shadow: 0 0 30px var(--brand-glow);
}
.hero-answer {
  max-width: 620px;
  font-size: 17px;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.hero-answer strong { color: var(--text); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--line-strong);
  background-color: rgba(10, 27, 38, 0.6);
  background-image: var(--btn-skin, none);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  color: var(--text);
  font-family: "IndecisiveSans", "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 160ms cubic-bezier(0.16,1,0.3,1),
              border-color 160ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 160ms cubic-bezier(0.16,1,0.3,1),
              transform 120ms ease-out;
}
.btn:hover { background-color: var(--deep-3); border-color: var(--brand); box-shadow: 0 0 0 1px rgba(246,205,135,0.25), 0 0 22px -6px var(--brand-glow); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-cta {
  background: var(--lead-cta);
  border-color: var(--lead-cta);
  color: #fff;
}
.btn-cta:hover { background: #b45309; border-color: #b45309; }
.hero-scroll {
  position: absolute;
  bottom: 34px;
  left: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-transform: uppercase;
  animation: scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint { 0%,100% {opacity:0.35; transform: translateY(0);} 50% {opacity:1; transform: translateY(4px);} }

/* ── TERMINALS ────────────────────────────────────────────── */
.terminal {
  max-width: 1060px;
  margin: 0 auto 36px;
  background: var(--deep-2);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.terminal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.terminal-head h2 {
  font-family: "OrpheusPro", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  border: 1px solid var(--line);
  padding: 4px 8px;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.terminal:hover .tag { border-color: rgba(246,205,135,0.4); box-shadow: 0 0 16px -6px var(--brand-glow); }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.terminal-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}
.foot-note { font-size: 11px; color: var(--text-faint); }

/* ── ORRIAN GLYPH DIVIDER ───────────────────────────────── */
/* Cultural styling: a ruled line with the Eye glyph at centre (SVG, never emoji). */
.glyph-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1060px;
  margin: 0 auto 36px;
  color: var(--brand);
  opacity: 0.85;
}
.glyph-divider::before,
.glyph-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}
.glyph-divider svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px var(--brand-glow));
}
.glyph-divider .gd-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ── LINEAGE ─────────────────────────────────────────────── */
.lineage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lineage-card {
  padding: 22px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: background 150ms ease-out;
}
.lineage-card:last-child { border-right: none; }
.lineage-card:hover { background: var(--deep-3); }
.lineage-card-future {
  background: linear-gradient(180deg, rgba(246,205,135,0.07) 0%, transparent 70%);
}
.lineage-era {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--brand);
}
.lineage-card-future .lineage-era { color: var(--brand-2); }
.lineage-name {
  font-family: "OrpheusPro", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}
.lineage-desc { font-size: 13px; color: var(--text-dim); }
.lineage-stat { font-size: 13px; color: var(--text); margin-top: 6px; }
.lineage-stat .mono { color: var(--brand); font-size: 16px; }
.lineage-note { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── THE SIX GODS ───────────────────────────────────────── */
.gods-strip {
  max-width: 1060px;
  margin: 0 auto 40px;
  padding: 26px 20px 20px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gods-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: 20px;
}
.gods-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.god {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.god-sigil {
  width: 42px;
  height: 42px;
  display: block;
  position: relative;
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1), filter 200ms cubic-bezier(0.16,1,0.3,1);
}
.god:hover .god-sigil { transform: translateY(-3px); filter: drop-shadow(0 0 10px var(--brand-glow)); }
/* Shared sigil base: gold eye-in-circle, each god's unique ray layout */
.god-sigil::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--brand);
  transform: rotate(45deg);
}
.god-sigil::after {
  content: "";
  position: absolute; inset: 13px;
  border: 1px solid var(--brand-2);
  transform: rotate(45deg);
}
.god-dwayna::before { border-color: rgba(246,205,135,0.9); }
.god-dwayna::after { background: radial-gradient(circle, rgba(246,205,135,0.35) 0%, transparent 70%); }
.god-grenth::before { border-color: rgba(180,200,220,0.9); }
.god-grenth::after { background: radial-gradient(circle, rgba(180,200,220,0.3) 0%, transparent 70%); }
.god-melandru::before { border-color: rgba(160,215,150,0.9); }
.god-melandru::after { background: radial-gradient(circle, rgba(160,215,150,0.3) 0%, transparent 70%); }
.god-lyssa::before { border-color: rgba(190,160,230,0.9); }
.god-lyssa::after { background: radial-gradient(circle, rgba(190,160,230,0.3) 0%, transparent 70%); }
.god-balthazar::before { border-color: rgba(230,140,90,0.9); }
.god-balthazar::after { background: radial-gradient(circle, rgba(230,140,90,0.3) 0%, transparent 70%); }
.god-kormir::before { border-color: rgba(240,220,160,0.9); }
.god-kormir::after { background: radial-gradient(circle, rgba(240,220,160,0.3) 0%, transparent 70%); }
.god-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.gods-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-top: 18px;
  opacity: 0.7;
}

/* ── TIMELINE ─────────────────────────────────────────────── */
.timeline { padding: 8px 0; }
.tl-item {
  display: grid;
  grid-template-columns: 112px 26px 1fr;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  transition: background 150ms ease-out;
}
.tl-item:last-child { border-bottom: none; }
.tl-item:hover { background: var(--deep-3); }
.tl-date { font-size: 13px; padding-top: 2px; color: var(--text-faint); }
.tl-date .mono { font-size: 12px; }
.tl-led { display: flex; justify-content: center; padding-top: 6px; }
.led {
  width: 10px; height: 10px;
  background: var(--instock);
  box-shadow: 0 0 8px rgba(15, 157, 84, 0.6);
}
.led-new { background: var(--brand); box-shadow: 0 0 10px var(--brand-glow); }
.led-future { background: var(--low); box-shadow: 0 0 8px rgba(196, 126, 0, 0.5); }
.tl-title { font-weight: 600; font-size: 15px; }
.tl-desc { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.tl-src { font-size: 11px; margin-top: 6px; }
.tl-src a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-deep); text-underline-offset: 2px; }
.tl-src a:hover { color: #fff; }

/* ── RELEASE FACTS ────────────────────────────────────────── */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.fact {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fact:nth-child(4n) { border-right: none; }
.fact-q {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.fact-a { font-size: 17px; font-weight: 700; color: var(--text); }
.fact-s { font-size: 11px; color: var(--text-faint); }
.fact .mono { color: var(--brand); }

/* ── HYPE ─────────────────────────────────────────────────── */
.hype-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.hype-card {
  padding: 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 150ms ease-out;
}
.hype-card:hover { background: var(--deep-3); }
.hype-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  display: block;
  margin-bottom: 8px;
}
.hype-num {
  font-size: 32px;
  font-weight: 700;
  /* Starts grayscale/cold — blooms to cyan glow once counted up (is-live) */
  color: var(--text-dim);
  filter: saturate(0.12);
  text-shadow: none;
  display: block;
  transition: color 620ms cubic-bezier(0.16,1,0.3,1),
              filter 620ms cubic-bezier(0.16,1,0.3,1),
              text-shadow 620ms cubic-bezier(0.16,1,0.3,1);
}
.hype-num.is-live {
  color: var(--brand);
  filter: none;
  text-shadow: 0 0 24px var(--brand-glow);
}
.hype-note { font-size: 11px; color: var(--text-faint); display: block; margin-top: 6px; }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer {
  background: var(--abyss);
  border-top: 1px solid var(--line);
  padding: 40px 20px 24px;
}
.footer-grid {
  max-width: 1060px;
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.footer h3 { color: var(--text); font-size: 14px; margin-bottom: 10px; letter-spacing: 0.02em; }
.footer p { font-size: 12px; color: var(--text-dim); max-width: 380px; }
.sources { list-style: none; }
.sources li { margin-bottom: 6px; }
.sources a { color: var(--brand-deep); font-size: 12px; text-decoration: none; }
.sources a:hover { color: var(--brand); }
.footer-legal {
  max-width: 1060px;
  margin: 0 auto;
  font-size: 10px;
  color: var(--text-faint);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* ── REVEALS ──────────────────────────────────────────────── */
/* Pre-hidden ONLY when JS + motion are active (progressive enhancement:
   no-JS and reduced-motion render everything visible). GSAP tweens these in;
   the CSS .is-in path is the fallback when GSAP is unavailable. */
html.js-motion [data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 600ms cubic-bezier(0.16,1,0.3,1),
              transform 600ms cubic-bezier(0.16,1,0.3,1);
}
/* Hero load choreography pre-hide (GSAP timeline owns these) */
html.js-motion .hero-kicker,
html.js-motion .hero-title,
html.js-motion .hero-answer,
html.js-motion .hero-cta,
html.js-motion .hero-scroll { opacity: 0; }

/* ── WORLD PARTICLE CANVAS ────────────────────────────────── */
/* Fixed behind all content; Three.js additive blending makes gold motes
   glow over/through sections without occluding text (pointer-events: none). */
#world-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 3;
}

/* ── ORRIAN RELIQUARY BORDER FRAME ────────────────────────── */
/* Fixed gold hairline framing the full viewport, Eye-of-Janthir corners.
   z-index: 40 — above world particles (3) and content, below statbar (50). */
.orrian-border {
  position: fixed;
  inset: 10px;
  pointer-events: none;
  z-index: 40;
  border: 1px solid rgba(246, 205, 135, 0.42);
  animation: borderGlow 5s ease-in-out infinite;
}

/* Traveling shimmer along the gold perimeter (conic-gradient rotation) */
html.js-motion .orrian-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 62deg,
    rgba(246, 205, 135, 0.0) 76deg,
    rgba(246, 205, 135, 0.9) 88deg,
    rgba(255, 253, 238, 1)   90deg,
    rgba(246, 205, 135, 0.9) 92deg,
    rgba(246, 205, 135, 0.0) 104deg,
    transparent 118deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: shimmerRotate 9s linear infinite;
}

@keyframes shimmerRotate {
  to { transform: rotate(360deg); }
}

@keyframes borderGlow {
  0%, 100% {
    border-color: rgba(246, 205, 135, 0.35);
    box-shadow:
      0 0 12px 1px rgba(246, 205, 135, 0.06),
      inset 0 0 12px 1px rgba(246, 205, 135, 0.03);
  }
  50% {
    border-color: rgba(246, 205, 135, 0.62);
    box-shadow:
      0 0 26px 3px rgba(246, 205, 135, 0.14),
      inset 0 0 26px 3px rgba(246, 205, 135, 0.07);
  }
}

/* Eye-of-Janthir corner ornaments */
.ob-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--abyss);
  color: var(--brand);
  padding: 2px;
}
.ob-corner svg { width: 14px; height: 14px; }
.ob-tl { top: -9px;  left: -9px; }
.ob-tr { top: -9px;  right: -9px; }
.ob-bl { bottom: -9px; left: -9px; }
.ob-br { bottom: -9px; right: -9px; }

/* ── TERMINAL BACKGROUNDS — slight translucency for depth ──── */
/* Lets the world particle glow read through the section backdrop. */
.terminal {
  background: rgba(18, 35, 39, 0.88);
}

/* ── HERO TITLE WORD-SPLIT ANIMATION ──────────────────────── */
/* .tw = inner span per word; parent has overflow:hidden for masked rise effect */
html.js-motion .tw {
  display: inline-block;
  transform: translateY(110%);
}

/* Gold accent shimmer sweep — applied as class by heroChoreography */
.accent-shimmer {
  background: linear-gradient(
    90deg,
    var(--brand) 0%,
    rgba(255, 252, 235, 1) 35%,
    var(--brand-2) 50%,
    rgba(255, 252, 235, 1) 65%,
    var(--brand) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: accentShimmer 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes accentShimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

/* ── TERMINAL HEADING UNDERLINE — draws itself on enter ────── */
.terminal-head h2 { position: relative; }

.h2-underline {
  display: block;
  height: 1px;
  background: linear-gradient(to right, var(--brand), var(--brand-2), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  margin-top: 5px;
}

/* ── HYPE NUMBER — golden flash on count-up complete ───────── */
.hype-num.is-live {
  color: var(--brand);
  filter: none;
  text-shadow: 0 0 24px var(--brand-glow);
  animation: numberFlash 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes numberFlash {
  0%  { text-shadow: 0 0 0 transparent; }
  35% { text-shadow: 0 0 48px rgba(246, 205, 135, 0.95), 0 0 90px rgba(246, 205, 135, 0.5); }
  100%{ text-shadow: 0 0 24px var(--brand-glow); }
}

/* ── GLYPH DIVIDER — glow-breathe (GSAP handles rotation) ─── */
html.js-motion .glyph-divider svg {
  animation: glyphGlow 3.2s ease-in-out infinite;
}

@keyframes glyphGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(246, 205, 135, 0.28)); }
  50%       { filter: drop-shadow(0 0 16px rgba(246, 205, 135, 0.72)); }
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero-content { padding-top: 14vh; }
  .hero-title { font-size: clamp(36px, 11vw, 56px); }
  .tl-item { grid-template-columns: 82px 20px 1fr; gap: 8px; padding: 14px; }
  .tl-date .mono { font-size: 11px; }
  .fact:nth-child(4n) { border-right: 1px solid var(--line); }
  .fact:nth-child(2n) { border-right: none; }
  .hype-card { border-right: none; }
  .lineage-card { border-right: none; }
  .lineage-card-future { background: none; border-top: 1px solid rgba(246,205,135,0.25); }
  .gods-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  .footer-grid { grid-template-columns: 1fr; }
  .statbar { gap: 12px; padding: 8px 14px; font-size: 10px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .statbar::-webkit-scrollbar { display: none; }
  /* Stacked CTAs occupy the lower hero — absolute scroll hint would collide */
  .hero-scroll { display: none; }
  .hero-content { padding-right: 20px; padding-left: 20px; }
  #hero::after { width: 84px; height: 84px; top: 40px; right: 18px; }
  /* Orrian border: thinner inset, smaller corner ornaments on mobile */
  .orrian-border { inset: 4px; }
  .ob-corner { width: 12px; height: 12px; padding: 1px; }
  .ob-corner svg { width: 10px; height: 10px; }
  .ob-tl { top: -6px;  left: -6px; }
  .ob-tr { top: -6px;  right: -6px; }
  .ob-bl { bottom: -6px; left: -6px; }
  .ob-br { bottom: -6px; right: -6px; }
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pulse, .hero-scroll { animation: none; }
  .hero-scroll { opacity: 0.6; }
  .game-card:hover, .news-card:hover, .species-card:hover { transform: none; }
  /* Everything static and visible; scene.js renders a single frame. */
  [data-reveal],
  .hero-kicker, .hero-title, .hero-answer, .hero-cta, .hero-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
  .hype-num { color: var(--brand); filter: none; text-shadow: 0 0 24px var(--brand-glow); }
  /* Border frame: static, no shimmer or pulse */
  .orrian-border { animation: none; border-color: rgba(246, 205, 135, 0.45); }
  .orrian-border::before { display: none; }
  /* No glyph rotation or glow pulse */
  .glyph-divider svg { animation: none !important; }
  /* Accent: keep gold color, no shimmer animation */
  .accent-shimmer {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--brand);
    background-clip: unset;
    animation: none;
    color: var(--brand);
  }
  /* tw spans: fully visible */
  .tw { transform: none !important; }
  /* New: no Ken Burns or mist drift */
  .hero-bg-art img { animation: none !important; transform: scale(1.1); }
  .hero-mist       { animation: none !important; }
}

/* ── HERO CINEMATIC ────────────────────────────────────────── */
/* Base art layer — official key art behind Three.js ember canvas.
   Fail-safe: #hero background-color (--abyss) shows if the image 404s. */
.hero-bg-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hero-bg-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  will-change: transform;
}
/* Ken Burns: slow GPU zoom alternate — motion-gated */
html.js-motion .hero-bg-art img {
  animation: kenBurns 26s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1.08); }
  to   { transform: scale(1.14); }
}

/* Orr mist layers — blurred radial-gradient divs drifting above the art */
.hero-mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.hero-mist-a {
  background: radial-gradient(ellipse 70% 60% at 18% 65%, rgba(36,64,70,0.28) 0%, transparent 68%);
  filter: blur(60px);
  opacity: 0.25;
}
.hero-mist-b {
  background: radial-gradient(ellipse 55% 50% at 80% 28%, rgba(247,186,83,0.16) 0%, transparent 62%);
  filter: blur(60px);
  opacity: 0.22;
}
html.js-motion .hero-mist-a {
  animation: mistDriftA 20s ease-in-out infinite alternate;
}
html.js-motion .hero-mist-b {
  animation: mistDriftB 24s ease-in-out infinite alternate;
}
@keyframes mistDriftA {
  from { transform: translate(0, 0); }
  to   { transform: translate(-28px, 18px); }
}
@keyframes mistDriftB {
  from { transform: translate(0, 0); }
  to   { transform: translate(36px, -14px); }
}

/* Ensure Three.js scene canvas stacks above mist + art, below gradient overlay */
#scene         { z-index: 3; }
.hero-overlay  { z-index: 4; }

/* Cinematic hero content: centered stack, slightly more vertical breathing room */
.hero-content {
  text-align: center;
  padding-top: 18vh;
}
.hero-cta     { justify-content: center; }
.hero-answer  { margin-left: auto; margin-right: auto; }

/* ── GALLERY ───────────────────────────────────────────────── */
/* Filter tab row */
.gallery-filters {
  display: flex;
  gap: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.gf-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-right: none;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}
.gf-btn:last-child { border-right: 1px solid var(--line); }
.gf-btn:hover      { background: var(--deep-3); color: var(--text); border-color: var(--brand); }
.gf-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.gf-btn.gf-active  {
  background: rgba(246,205,135,0.12);
  color: var(--brand);
  border-color: rgba(246,205,135,0.5);
}

/* Responsive gallery grid: 2 → 3 → 4 columns */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 540px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

.gal-item {
  position: relative;
  overflow: hidden;
  margin: 0;
  cursor: pointer;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 160ms ease-out, transform 160ms ease-out;
  aspect-ratio: 16 / 9;
  background: var(--deep-2);
}
.gal-item:hover,
.gal-item:focus-visible {
  box-shadow: inset 0 0 0 1px var(--brand), 0 0 20px -6px var(--brand-glow);
  transform: translateY(-2px);
  z-index: 1;
  outline: none;
}
.gal-item img,
.gal-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 200ms ease-out;
}
.gal-item-video::after {
  content: "▶";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  color: var(--brand);
  letter-spacing: 0;
  opacity: 0.7;
  pointer-events: none;
}
.gal-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: linear-gradient(to top, rgba(10,20,22,0.88) 0%, transparent 100%);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 160ms ease-out;
}
.gal-item:hover .gal-cap,
.gal-item:focus-visible .gal-cap { opacity: 1; }

/* Lightbox overlay */
#gal-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
}
#gal-lightbox.lb-open { display: flex; }

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 18, 0.94);
  backdrop-filter: blur(6px);
}
.lb-content {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lb-img,
.lb-vid {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 0 60px rgba(0,0,0,0.7);
}
.lb-vid { display: none; background: #000; }
.lb-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.lb-title {
  font-size: 14px;
  color: var(--text);
  font-family: "OrpheusPro", Georgia, serif;
}
.lb-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}
.lb-close, .lb-prev, .lb-next {
  position: fixed;
  z-index: 2;
  background: rgba(10,20,22,0.72);
  border: 1px solid var(--line-strong);
  color: var(--text);
  cursor: pointer;
  transition: background 140ms ease-out, border-color 140ms ease-out;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover {
  background: var(--deep-3);
  border-color: var(--brand);
}
.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.lb-close { top: 18px; right: 18px; width: 38px; height: 38px; font-size: 22px; }
.lb-prev  { left: 14px;  top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.lb-next  { right: 14px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }

/* ── TOOLS / TOOLSMITH ──────────────────────────────────────── */
.tools-widget {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.tools-widget:last-child { border-bottom: none; }

.tw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.tw-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand);
}
.tw-refresh {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.tw-refresh:hover { background: var(--deep-3); border-color: var(--brand); color: var(--text); }
.tw-refresh:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tw-ext {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-deep);
  padding-bottom: 1px;
  transition: color 140ms, border-color 140ms;
}
.tw-ext:hover { color: var(--brand); border-color: var(--brand); }

.tw-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand);
  text-shadow: 0 0 20px var(--brand-glow);
  padding: 18px 20px 6px;
}
.tw-note {
  font-size: 11px;
  color: var(--text-faint);
  padding: 0 20px 16px;
}

/* Gem converter */
.conv-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 18px 20px;
}
.conv-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conv-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.conv-input {
  background: var(--abyss);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  padding: 8px 10px;
  width: 100%;
  transition: border-color 140ms;
}
.conv-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(246,205,135,0.2);
}
.conv-result {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--brand);
  min-height: 1.4em;
}
.conv-sep {
  font-size: 20px;
  color: var(--text-faint);
  align-self: center;
  padding-top: 22px;
  line-height: 1;
}
@media (max-width: 540px) {
  .conv-grid { grid-template-columns: 1fr; }
  .conv-sep  { text-align: center; padding-top: 0; }
}

/* Trading post table */
.tp-table {
  width: 100%;
  border-collapse: collapse;
}
.tp-table th, .tp-table td {
  padding: 10px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.tp-table th {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  background: var(--deep);
}
.tp-table tr:last-child td { border-bottom: none; }
.tp-table tr:hover td { background: var(--deep-3); }
.tp-table td:nth-child(2),
.tp-table td:nth-child(3) { color: var(--brand); }
.tp-loading { color: var(--text-faint) !important; font-style: italic; }

/* Professions strip */
.prof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px;
}
.prof-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.prof-chip:hover { background: var(--deep-3); border-color: var(--brand); color: var(--text); }
.prof-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Tool links grid */
.tl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  padding: 16px 20px;
}
.tl-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--deep);
  text-decoration: none;
  color: inherit;
  transition: background 140ms, border-color 140ms;
}
.tl-card:hover { background: var(--deep-3); border-color: var(--brand); }
.tl-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tl-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--brand);
  letter-spacing: 0.04em;
}
.tl-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Mobile adjustments for gallery + tools */
@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .conv-grid    { grid-template-columns: 1fr; }
  .conv-sep     { text-align: center; padding-top: 0; }
  .tl-grid      { grid-template-columns: 1fr; }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
  .lb-close { top: 10px; right: 10px; }
  .tw-head { padding: 12px 14px; }
  .tw-value { padding: 14px 14px 4px; font-size: 22px; }
  .tw-note  { padding: 0 14px 12px; }
  .tp-table th, .tp-table td { padding: 8px 14px; }
  .prof-strip { padding: 12px 14px; }
  .tl-grid { padding: 12px 14px; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════
   MULTI-PAGE REDESIGN — Nav, Ticker, Video Hero, Cards (Aug 2026)
   ══════════════════════════════════════════════════════════════ */

/* ── LAYOUT TOKENS ────────────────────────────────────────── */
:root {
  --statbar-h: 36px;
  --nav-h: 52px;
  --header-h: 88px;
}

/* ── SITE NAVIGATION ──────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: var(--statbar-h);
  left: 0; right: 0;
  z-index: 45;
  height: var(--nav-h);
  background: rgba(10, 20, 22, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: "OrpheusPro", Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 140ms;
}
.nav-logo:hover { color: var(--brand); }
.nav-logo svg {
  width: 22px; height: 22px;
  color: var(--brand);
  flex-shrink: 0;
}
.nav-logo:hover svg { filter: drop-shadow(0 0 6px var(--brand-glow)); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin-left: auto;
  padding: 0;
}
.nav-links a {
  display: block;
  padding: 8px 14px;
  color: var(--text-dim);
  text-decoration: none;
  font-family: "IndecisiveSans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 140ms;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 5px; left: 14px; right: 14px;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.nav-links a:hover { color: var(--text); text-shadow: 0 0 14px rgba(246,205,135,0.35); }
.nav-links a:hover::after { transform: scaleX(1); box-shadow: 0 0 6px var(--brand-glow); }
.nav-links a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-links .nav-active { color: var(--brand); text-shadow: 0 0 14px var(--brand-glow); }
.nav-links .nav-active::after { transform: scaleX(1); box-shadow: 0 0 6px var(--brand-glow); }

.nav-hamburger {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: border-color 140ms;
}
.nav-hamburger:hover { border-color: var(--brand); color: var(--text); }
.nav-hamburger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-hamburger span {
  display: block;
  width: 16px; height: 1px;
  background: currentColor;
  flex-shrink: 0;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(10, 20, 22, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid var(--line-strong);
    gap: 0;
    z-index: 10;
  }
  .nav-links.nav-open { display: flex; }
  .nav-links a { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav-links a::after { display: none; }
}

/* ── PAGE HERO (inner pages) ──────────────────────────────── */
.page-hero {
  position: relative;
  min-height: 42vh;
  padding-top: var(--header-h);
  background: var(--abyss);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.page-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  opacity: 0.38;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(10,20,22,0.25) 0%, var(--abyss) 100%);
}
.page-hero-content {
  position: relative;
  z-index: 3;
  max-width: 1060px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 20px 36px;
}
.page-hero-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
  display: block;
  margin-bottom: 10px;
}
.page-hero-title {
  font-family: "OrpheusPro", Georgia, serif;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 10px;
}
.page-hero-desc {
  font-size: 15px;
  color: var(--text-dim);
  max-width: 560px;
}

/* Ensure hero content clears the fixed nav stack */
.hero-content {
  padding-top: max(18vh, calc(var(--header-h) + 64px));
}

/* ── HERO VIDEO (disabled — video element removed from hero HTML) ── */
.hero-video { display: none !important; }
#hero .hero-mist    { z-index: 2; }
#hero #scene        { z-index: 3; }
#hero .hero-overlay { z-index: 4; }

/* ── PAGE SECTIONS ────────────────────────────────────────── */
.page-section {
  max-width: 1060px;
  margin: 0 auto 36px;
  padding: 0 0;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: "OrpheusPro", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
}
.section-foot {
  padding: 20px 0 8px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── GAME CARDS (featured on home) ───────────────────────── */
.game-cards-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* GW3 featured card is wider */
  gap: 0;
  border: 1px solid var(--line);
}
.game-card {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--deep-2);
  transition: background 150ms ease-out,
              transform 200ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
  position: relative;
}
.game-card:last-child { border-right: none; }
.game-card:hover {
  background: var(--deep-3);
  transform: translateY(-4px);
  box-shadow: 0 10px 32px -8px rgba(10,20,22,0.7),
              0 0 0 1px rgba(246,205,135,0.22),
              inset 0 0 24px -14px var(--brand-glow);
  z-index: 2;
}
.game-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--deep);
  position: relative;
}
.game-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.16,1,0.3,1);
}
.game-card:hover .game-card-img img { transform: scale(1.04); }
.game-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.game-card-era {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  display: block;
}
.game-card-title {
  font-family: "OrpheusPro", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
}
.game-card-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  flex: 1;
}
.game-card .btn {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12px;
  padding: 7px 14px;
}

/* ── NEWS CARDS ───────────────────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
}
.news-card {
  padding: 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--deep-2);
  transition: background 150ms,
              transform 200ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
  position: relative;
}
.news-card:last-child { border-right: none; }
.news-card:hover {
  background: var(--deep-3);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px -8px rgba(10,20,22,0.6),
              0 0 0 1px rgba(246,205,135,0.18);
  z-index: 1;
}
.news-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.news-title {
  font-family: "OrpheusPro", Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}
.news-desc {
  font-size: 13px;
  color: var(--text-dim);
  flex: 1;
}
.news-link a {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-deep);
  padding-bottom: 1px;
}
.news-link a:hover { color: #fff; }

/* ── SPECIES CARDS ────────────────────────────────────────── */
.species-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.species-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: var(--deep-2);
  overflow: hidden;
  position: relative;
  transition: background 150ms,
              transform 200ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
}
.species-card:hover {
  background: var(--deep-3);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px -8px rgba(10,20,22,0.6),
              0 0 0 1px rgba(246,205,135,0.18);
  z-index: 1;
}
.species-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--deep-3);
}
.species-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.16,1,0.3,1);
}
.species-card:hover .species-img img { transform: scale(1.05); }
.species-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--deep-3), var(--deep-4));
}
.species-placeholder svg { width: 36px; height: 36px; color: var(--brand); opacity: 0.4; }
.species-body {
  padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.species-name {
  font-family: "OrpheusPro", Georgia, serif;
  font-size: 17px; font-weight: 700;
}
.species-desc { font-size: 12px; color: var(--text-dim); }
.species-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand);
  margin-top: 4px;
}

/* ── RESOURCE CARDS ───────────────────────────────────────── */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  padding: 20px 0;
}
.resource-card {
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--deep-2);
  display: flex; flex-direction: column; gap: 5px;
  text-decoration: none; color: inherit;
  transition: background 140ms, border-color 140ms;
}
.resource-card:hover { background: var(--deep-3); border-color: var(--brand); }
.resource-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.resource-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--brand); letter-spacing: 0.04em;
}
.resource-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* ── MINI GALLERY (inner pages) ──────────────────────────── */
.mini-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.mini-gal-item {
  aspect-ratio: 16 / 9; overflow: hidden;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.mini-gal-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.8; transition: transform 400ms cubic-bezier(0.16,1,0.3,1), opacity 200ms;
}
.mini-gal-item:hover img { transform: scale(1.05); opacity: 1; }

/* ── PROFESSIONS GRID ─────────────────────────────────────── */
.prof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.prof-card {
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-dim);
  transition: background 140ms, border-color 140ms, color 140ms;
}
.prof-card:hover { background: var(--deep-3); color: var(--text); }

/* ── TICKER ────────────────────────────────────────────────── */
.ticker-section {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(10,20,22,0.55);
  user-select: none;
}
.ticker-wrap {
  overflow: hidden;
  cursor: default;
  position: relative;
}
.ticker-track {
  display: flex; align-items: center;
  width: max-content;
  padding: 11px 0;
  animation: tickerScroll 60s linear infinite;
  white-space: nowrap;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation-play-state: paused; }
}
.ticker-item {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
  transition: color 140ms;
}
.ticker-item:hover { color: var(--brand); }
.ticker-dot {
  color: rgba(179,194,188,0.3);
  font-size: 10px; pointer-events: none;
}

.ticker-hover-card {
  position: fixed; z-index: 300;
  width: 160px;
  background: rgba(10,20,22,0.96);
  border: 1px solid var(--brand);
  box-shadow: 0 0 24px -6px var(--brand-glow);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: opacity 180ms cubic-bezier(0.16,1,0.3,1),
              transform 220ms cubic-bezier(0.16,1,0.3,1);
}
.ticker-hover-card.thc-visible {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.thc-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.thc-label {
  display: block; padding: 6px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand);
}

/* ── FOOTER (3-column) ────────────────────────────────────── */
.footer-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ── MOBILE RESPONSIVE (multi-page additions) ─────────────── */
@media (max-width: 760px) {
  .game-cards-grid { grid-template-columns: 1fr; }
  .game-card { border-right: 1px solid var(--line); }
  .news-grid { grid-template-columns: 1fr; }
  .news-card { border-right: none; border-bottom: 1px solid var(--line); }
  .news-card:last-child { border-bottom: none; }
  .species-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-gallery { grid-template-columns: 1fr; }
  .mini-gal-item { border-right: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr; }
  .page-hero-title { font-size: clamp(26px, 8vw, 38px); }
  .section-head h2 { font-size: 22px; }
}