/* ==========================================================================
   GUARDIANS PORTAL — "MAGITECH TERRA" design system (Concept B+)
   The world is the machine; the artifacts are paper.
   Dea's cameo: one gold node on the conduit. Fonts: Rajdhani + Marcellus.
   ========================================================================== */
:root {
  --void:       #060a10;
  --void-2:     #0a121c;
  --panel:      rgba(10, 18, 28, 0.82);
  --steel:      #aebdc9;
  --steel-dim:  #7fa3b8;
  --teal:       #00d4d4;
  --teal-hi:    #7dfcff;
  --teal-soft:  rgba(0, 212, 212, 0.45);
  --teal-line:  rgba(0, 212, 212, 0.28);
  --teal-glow:  rgba(0, 212, 212, 0.14);
  --gold:       #ffcf88;
  --gold-soft:  rgba(255, 207, 136, 0.5);
  --prism:      linear-gradient(100deg, #ffd7e8, #d5b8ff, #9fd8ff, #b6f0c8, #ffe9b0);
  --parch:      #efe4c9;
  --parch-2:    #e0d2ae;
  --ink:        #2a2118;
  --ink-soft:   #4a3d2c;
  --f-ui:       'Rajdhani', 'Segoe UI', sans-serif;
  --f-arc:      'Marcellus', Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: #cfe3ea;
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 65% 40% at 78% 0%,  rgba(0, 212, 212, 0.09), transparent 60%),
    radial-gradient(ellipse 45% 35% at 5% 85%,  rgba(0, 212, 212, 0.05), transparent 60%),
    radial-gradient(ellipse 30% 22% at 90% 70%, rgba(255, 207, 136, 0.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cg stroke='%2300d4d4' stroke-opacity='.055' fill='none'%3E%3Cpath d='M0 110h180l40 40h140'/%3E%3Cpath d='M620 300H460l-40-40H280'/%3E%3Cpath d='M120 620V480l40-40v-90'/%3E%3Cpath d='M470 0v120l-40 40v110'/%3E%3Ccircle cx='180' cy='110' r='3'/%3E%3Ccircle cx='360' cy='150' r='3'/%3E%3Ccircle cx='460' cy='300' r='3'/%3E%3Ccircle cx='240' cy='260' r='3'/%3E%3Ccircle cx='160' cy='440' r='3'/%3E%3Ccircle cx='430' cy='160' r='3'/%3E%3C/g%3E%3Ccircle cx='360' cy='150' r='2.4' fill='%23ffcf88' opacity='.8'/%3E%3C/svg%3E") repeat,
    linear-gradient(168deg, #081019 0%, #060a10 55%, #070d15 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 92% 82% at 50% 32%, transparent 55%, rgba(3, 6, 10, 0.6));
}
h1, h2, h3 { line-height: 1.12; margin: 0; }
a { color: var(--teal-hi); }
::selection { background: var(--teal); color: var(--void); }
img { max-width: 100%; }

.k-label {
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--teal);
}
.arcane { font-family: var(--f-arc); }
.prism-text {
  background: var(--prism);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Header ---------- */
.g-header {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 16px;
  padding: 10px clamp(16px, 3vw, 40px);
  border-bottom: 1px solid var(--teal-line);
  background: rgba(6, 10, 16, 0.8);
}
.g-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.g-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.g-brand img { height: 42px; transition: transform 0.6s ease; }
.g-brand:hover img { transform: rotate(30deg); }
.g-brand .word {
  font-weight: 700; font-size: 1.15rem; letter-spacing: 0.22em;
  color: #e8f4f8;
}
.g-brand .word b { color: var(--teal); font-weight: 700; }
.g-nav { margin-left: auto; display: flex; gap: clamp(12px, 2vw, 26px); flex-wrap: wrap; justify-content: flex-end; }
.g-nav a {
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--steel-dim);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.g-nav a:hover { color: var(--teal-hi); }
.g-nav a.active { color: var(--teal-hi); border-bottom-color: var(--teal-soft); }
.return-door {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid rgba(255, 207, 136, 0.35);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.return-door:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 207, 136, 0.25); }
@media (max-width: 920px) {
  .g-header { flex-wrap: wrap; }
  .g-nav { width: 100%; justify-content: flex-start; }
}

/* ---------- Sections ---------- */
.band { padding: clamp(34px, 5vw, 60px) clamp(18px, 4vw, 56px); position: relative; }
.band-bar {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 12px clamp(18px, 4vw, 56px);
  border-top: 1px solid rgba(0, 212, 212, 0.16);
  border-bottom: 1px solid rgba(0, 212, 212, 0.16);
  background: rgba(0, 212, 212, 0.04);
}
.band-bar h2 { font-weight: 700; letter-spacing: 0.08em; font-size: 1.25rem; color: #e8f4f8; }
.band-bar .note { margin-left: auto; font-family: var(--f-arc); font-style: italic; font-size: 0.88rem; color: var(--steel-dim); }

/* ---------- Hero ---------- */
.hero {
  position: relative; text-align: center;
  padding: clamp(56px, 8vw, 104px) 22px clamp(44px, 6vw, 64px);
  overflow: hidden;
}
.conduit {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal) 30%, var(--teal-hi) 50%, var(--teal) 70%, transparent);
  opacity: 0.5;
}
.conduit .gold-node {
  position: absolute; top: -3.5px; left: 63%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold-soft);
}
.hero > * { position: relative; }
.hero h1 {
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  letter-spacing: 0.05em;
  color: #f2fbfd;
  text-shadow: 0 0 44px rgba(0, 212, 212, 0.35);
  margin: 16px 0 6px;
}
.hero .pitch {
  max-width: 640px; margin: 10px auto 0;
  font-family: var(--f-arc);
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  color: #a9c6d4; line-height: 1.65;
}
.creed {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 30px;
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.45rem);
  letter-spacing: 0.26em;
  color: var(--teal-hi);
  border: 1px solid var(--teal-soft);
  padding: 13px 32px;
  border-radius: 5px;
  background: rgba(0, 212, 212, 0.06);
  box-shadow: 0 0 30px var(--teal-glow), inset 0 0 24px rgba(0, 212, 212, 0.07);
}
.creed::before { content: "⟨"; color: var(--teal-soft); font-weight: 400; }
.creed::after  { content: "⟩"; color: var(--teal-soft); font-weight: 400; }
.die-row { margin-top: 34px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.die-row img { height: 78px; filter: drop-shadow(0 0 18px rgba(0, 212, 212, 0.65)); }
.die-row .say { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.proof { margin-top: 26px; font-family: var(--f-arc); font-style: italic; color: #8fb3c4; }

/* ---------- Artifact layer ---------- */
.artifact-cta {
  display: inline-block;
  background: linear-gradient(180deg, var(--parch), var(--parch-2));
  color: var(--ink);
  text-decoration: none;
  padding: 16px 30px 14px;
  border-radius: 3px;
  box-shadow: 0 4px 0 #9a8a64, 0 14px 34px rgba(0, 0, 0, 0.5);
  transform: rotate(-0.6deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin: 30px 8px 0;
  position: relative;
}
.artifact-cta::before {
  content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 14px;
  background: rgba(0, 212, 212, 0.45);
  border: 1px solid rgba(0, 160, 160, 0.5);
  border-radius: 2px;
}
.artifact-cta:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 6px 0 #9a8a64, 0 20px 44px rgba(0, 0, 0, 0.55); }
.artifact-cta .big { display: block; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.95rem; }
.artifact-cta .small { display: block; font-family: var(--f-arc); font-style: italic; font-size: 0.85rem; color: var(--ink-soft); }
.btn-ghost {
  display: inline-block;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal-hi);
  border: 1px solid var(--teal-soft);
  border-radius: 4px;
  padding: 15px 30px;
  text-decoration: none;
  margin: 30px 8px 0;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.btn-ghost:hover { border-color: var(--teal); box-shadow: 0 0 22px var(--teal-glow); }

/* ---------- Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.pillar {
  background: var(--panel);
  border: 1px solid var(--teal-line);
  border-top: 2px solid var(--teal);
  border-radius: 7px;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 20px var(--teal-glow); }
.pillar::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 64px; height: 64px;
  background: radial-gradient(circle at top right, rgba(0, 212, 212, 0.16), transparent 70%);
}
.pillar .rune { font-family: var(--f-arc); font-size: 1.5rem; color: var(--teal-hi); text-shadow: 0 0 12px rgba(0, 212, 212, 0.6); }
.pillar h3 { font-weight: 700; letter-spacing: 0.06em; font-size: 1.14rem; margin: 8px 0 6px; color: #e8f4f8; }
.pillar p { margin: 0; font-family: var(--f-arc); font-size: 0.92rem; line-height: 1.55; color: #9db8c6; }
.pillar.fusion { border-top: 2px solid transparent; }
.pillar.fusion::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--prism);
}

/* ---------- Doors ---------- */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.doorcard {
  display: block;
  border: 1px solid var(--teal-line);
  border-radius: 9px;
  padding: 30px 26px;
  background: linear-gradient(180deg, rgba(0, 212, 212, 0.06), rgba(10, 18, 28, 0.6));
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.doorcard:hover { transform: translateY(-4px); border-color: var(--teal-soft); box-shadow: 0 16px 38px rgba(0,0,0,.5), 0 0 24px var(--teal-glow); }
.doorcard h3 { font-weight: 700; letter-spacing: 0.05em; color: #f2fbfd; font-size: 1.3rem; margin: 0 0 8px; }
.doorcard p { margin: 0 0 14px; font-family: var(--f-arc); color: #9db8c6; }
.doorcard .go { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }

/* Tela, drawn & alive, perched on the Player door */
.tela {
  position: absolute; top: -30px; right: 20px;
  width: 84px; height: auto;
  animation: tela-bob 4.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
@keyframes tela-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.tela .eye { animation: tela-blink 6s infinite; transform-origin: center; }
@keyframes tela-blink {
  0%, 91%, 100% { opacity: 1; }
  93%, 95%      { opacity: 0.15; }
}

/* ---------- Tool cards ---------- */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.tool {
  display: block;
  background: var(--panel);
  border: 1px solid var(--teal-line);
  border-radius: 8px;
  padding: 22px 20px;
  text-decoration: none; color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tool:hover { transform: translateY(-4px); border-color: var(--teal-soft); box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 18px var(--teal-glow); }
.tool .num { font-size: 1.5rem; font-weight: 700; color: var(--teal-hi); }
.tool h3 { font-weight: 700; letter-spacing: 0.05em; margin: 4px 0 6px; color: #e8f4f8; font-size: 1.1rem; }
.tool p { margin: 0; font-family: var(--f-arc); font-size: 0.9rem; color: #9db8c6; line-height: 1.5; }

/* ---------- World teaser ---------- */
.beats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.beat { border-left: 2px solid var(--teal-soft); padding: 6px 0 6px 18px; }
.beat .n { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal); }
.beat h3 { font-family: var(--f-arc); font-weight: 400; font-size: 1.2rem; color: #e8f4f8; margin: 4px 0 4px; }
.beat p { margin: 0; font-family: var(--f-arc); font-size: 0.92rem; color: #9db8c6; }
.trio-strip { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.trio-strip img { width: min(360px, 100%); border-radius: 8px; border: 1px solid var(--teal-line); }
.trio-strip .txt { flex: 1; min-width: 260px; font-family: var(--f-arc); color: #a9c6d4; font-size: 1.02rem; line-height: 1.7; }

/* ---------- Footer ---------- */
.g-footer {
  border-top: 1px solid var(--teal-line);
  text-align: center;
  padding: 34px 20px 38px;
  background: rgba(6, 10, 16, 0.75);
}
.g-footer p { margin: 5px 0; font-size: 0.9rem; color: var(--steel-dim); }
.g-footer a { color: var(--steel); text-decoration: none; border-bottom: 1px solid var(--teal-line); }
.g-footer a:hover { color: var(--teal-hi); border-bottom-color: var(--teal); }
.g-footer .rune-line { letter-spacing: 0.5em; color: rgba(174, 189, 201, 0.4); font-size: 0.9rem; }
.g-footer .rune-line .gold { color: var(--gold); text-shadow: 0 0 10px rgba(255, 207, 136, 0.5); }

/* ---------- Motion & a11y ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tela, .tela .eye { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---- V1.1: War-for-Terra hero + pillar emblems + hero-art slot ---- */
.k-label .spark {
  background: var(--prism);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-size: 0.9em;
}
.hero .question {
  margin: 22px auto 0;
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  color: #dceef4;
}
.hero .born {
  margin: 14px 0 0;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--steel-dim);
}
.pillar .emblem { width: 46px; height: 46px; display: block; margin-bottom: 4px; filter: drop-shadow(0 0 10px rgba(0, 212, 212, 0.4)); }
/* When the hero artwork arrives (H1 commission), add class "has-art" to .hero
   and set the file here — the scrim keeps the words readable: */
.hero.has-art {
  background:
    linear-gradient(180deg, rgba(6,10,16,.82) 0%, rgba(6,10,16,.55) 40%, rgba(6,10,16,.88) 100%),
    var(--hero-art, none) center 30% / cover no-repeat;
}

/* ==========================================================================
   V2 — THE RETURN OF MAGIC (theme inversion, per Erez's ruling)
   Magic-first: twilight world, arcane violet structure, prism as light,
   elemental hues per pillar/beat. Tech (teal) demoted to the honored thread
   it is in the books — conduits, tools, and the bots keep it.
   ========================================================================== */
:root {
  --arc:       #b79ae0;
  --arc-hi:    #d5b8ff;
  --arc-soft:  rgba(183, 154, 224, 0.5);
  --arc-line:  rgba(183, 154, 224, 0.3);
  --arc-glow:  rgba(183, 154, 224, 0.16);
}
/* The world: post-apocalyptic twilight, leylines of returned magic,
   fey motes, ONE circuit fragment (the tech thread), ONE gold node (the keeper) */
body::before {
  background:
    radial-gradient(ellipse 70% 45% at 20% 0%,  rgba(183, 154, 224, 0.14), transparent 60%),
    radial-gradient(ellipse 55% 40% at 85% 8%,  rgba(224, 138, 184, 0.10), transparent 60%),
    radial-gradient(ellipse 45% 35% at 75% 95%, rgba(0, 212, 212, 0.07),   transparent 60%),
    radial-gradient(ellipse 30% 22% at 8% 75%,  rgba(182, 240, 200, 0.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 180 Q160 120 320 190 T660 170' stroke='%23b79ae0' stroke-opacity='.10'/%3E%3Cpath d='M-20 420 Q200 480 380 410 T660 450' stroke='%23e08ab8' stroke-opacity='.08'/%3E%3Cpath d='M120 660 Q180 480 130 320 T190 -20' stroke='%23b6f0c8' stroke-opacity='.07'/%3E%3Cpath d='M480 0v110l-36 36v90' stroke='%2300d4d4' stroke-opacity='.10'/%3E%3C/g%3E%3Cg fill='%23d5b8ff'%3E%3Ccircle cx='150' cy='150' r='1.6' opacity='.5'/%3E%3Ccircle cx='420' cy='90' r='1.3' opacity='.4'/%3E%3Ccircle cx='560' cy='320' r='1.7' opacity='.5'/%3E%3Ccircle cx='90' cy='500' r='1.4' opacity='.4'/%3E%3Ccircle cx='300' cy='560' r='1.6' opacity='.45'/%3E%3C/g%3E%3Cg fill='%23e08ab8'%3E%3Ccircle cx='250' cy='300' r='1.4' opacity='.45'/%3E%3Ccircle cx='520' cy='540' r='1.3' opacity='.4'/%3E%3C/g%3E%3Ccircle cx='480' cy='146' r='2.2' fill='%2300d4d4' opacity='.6'/%3E%3Ccircle cx='320' cy='190' r='2.4' fill='%23ffcf88' opacity='.85'/%3E%3C/svg%3E") repeat,
    linear-gradient(170deg, #0d0a1a 0%, #0a0916 45%, #0e0a1c 100%);
}
body { color: #ddd6ea; }
::selection { background: var(--arc); color: #0a0916; }

/* Structure re-tinted arcane */
.g-header { border-bottom-color: var(--arc-line); background: rgba(10, 9, 22, 0.8); }
.g-brand .word { color: #f0eaf8; }
.g-brand .word b { color: var(--arc-hi); }
.g-nav a { color: #9d92b8; }
.g-nav a:hover { color: var(--arc-hi); }
.g-nav a.active { color: var(--arc-hi); border-bottom-color: var(--arc-soft); }
.band-bar { border-color: rgba(183, 154, 224, 0.2); background: rgba(183, 154, 224, 0.05); }
.band-bar h2 { color: #f0eaf8; }
.band-bar .note { color: #9d92b8; }
.k-label { color: var(--arc-hi); }
.hero h1 { color: #f6f1fc; text-shadow: 0 0 46px rgba(183, 154, 224, 0.45); }
.hero .pitch { color: #b8abce; }
.hero .question { color: #e9e0f4; }
.creed {
  color: var(--arc-hi);
  border-color: var(--arc-soft);
  background: rgba(183, 154, 224, 0.07);
  box-shadow: 0 0 30px var(--arc-glow), inset 0 0 24px rgba(183, 154, 224, 0.08);
}
.creed::before, .creed::after { color: var(--arc-soft); }
.btn-ghost { color: var(--arc-hi); border-color: var(--arc-soft); }
.btn-ghost:hover { border-color: var(--arc); box-shadow: 0 0 22px var(--arc-glow); }
.proof { color: #a493c2; }
/* the conduit stays teal — it is the tech thread, now in a magic sky */

/* Pillars & beats: each in its own magic (--hue set inline per element) */
.pillar { --hue: var(--arc); border-color: rgba(183, 154, 224, 0.22); border-top: 2px solid var(--hue); background: rgba(16, 13, 30, 0.82); }
.pillar:hover { box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 22px color-mix(in srgb, var(--hue) 22%, transparent); border-color: color-mix(in srgb, var(--hue) 45%, transparent); }
.pillar::after { background: radial-gradient(circle at top right, color-mix(in srgb, var(--hue) 18%, transparent), transparent 70%); }
.pillar .emblem { color: var(--hue); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--hue) 45%, transparent)); }
.pillar h3 { color: #f0eaf8; }
.pillar p { color: #ab9fc4; }
.doorcard { border-color: rgba(183, 154, 224, 0.28); background: linear-gradient(180deg, rgba(183, 154, 224, 0.07), rgba(16, 13, 30, 0.6)); }
.doorcard:hover { border-color: var(--arc-soft); box-shadow: 0 16px 38px rgba(0,0,0,.5), 0 0 26px var(--arc-glow); }
.doorcard p { color: #ab9fc4; }
.doorcard .go { color: var(--arc-hi); }
/* Tools stay TEAL on purpose — they are the machines. Correct placement. */
.beat { border-left-color: var(--hue, var(--arc-soft)); }
.beat .n { color: var(--hue, var(--arc)); }
.beat p { color: #ab9fc4; }
.trio-strip .txt { color: #b8abce; }
.trio-strip img { border-color: var(--teal-line); }  /* bots stay machine-framed */
.g-footer { border-top-color: var(--arc-line); background: rgba(10, 9, 22, 0.78); }
.g-footer p { color: #9d92b8; }
.g-footer a { color: #c9bede; border-bottom-color: var(--arc-line); }
.g-footer a:hover { color: var(--arc-hi); border-bottom-color: var(--arc); }

/* ---- V2.1: the hero poster (the duo answers the question) ---- */
.war-poster { margin: 0; position: relative; border-top: 1px solid var(--arc-line); border-bottom: 1px solid var(--arc-line); }
.war-poster img { display: block; width: 100%; height: auto; }
.war-poster figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 70px 24px 20px;
  background: linear-gradient(transparent, rgba(10, 9, 22, 0.92));
  text-align: center;
}
.war-poster .line { display: block; font-size: clamp(1.05rem, 2.4vw, 1.4rem); font-style: italic; color: #e9e0f4; }
.war-poster .sub { display: block; margin-top: 8px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #9d92b8; }

/* ---- V2.2: THE STAGE — name over the storm, art at pixel one ---- */
.hero-stage {
  position: relative;
  min-height: clamp(560px, 92vh, 940px);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  border-bottom: 1px solid var(--arc-line);
}
.stage-art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
}
.hero-stage::before {  /* sky scrim for the name */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 9, 22, 0.82) 0%, rgba(10, 9, 22, 0.35) 55%, transparent 100%);
}
.hero-stage::after {   /* ash scrim for the call */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 9, 22, 0.9) 0%, rgba(10, 9, 22, 0.4) 55%, transparent 100%);
}
.stage-top, .stage-bottom {
  position: relative; z-index: 2;
  text-align: center;
  padding: clamp(26px, 4.5vw, 54px) 22px;
}
.stage-name { margin: 14px 0 0; }
.stage-name .g1 {
  display: block;
  font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  letter-spacing: 0.14em;
  color: #f7f3fc;
  text-shadow: 0 3px 26px rgba(0, 0, 0, 0.85), 0 0 70px rgba(183, 154, 224, 0.5);
}
.stage-name .g2 {
  display: block;
  margin-top: 4px;
  font-family: var(--f-arc);
  font-size: clamp(1rem, 2.6vw, 1.55rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  background: var(--prism);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.9));
}
.stage-bottom .question { margin: 0 0 4px; font-size: clamp(1.3rem, 3vw, 1.8rem); color: #f0eaf8; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9); }
/* The war band beneath the stage */
.war-band { text-align: center; }
.war-band .war-h {
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: 0.05em;
  color: #f6f1fc;
  text-shadow: 0 0 40px rgba(183, 154, 224, 0.4);
}
.war-band .pitch { max-width: 640px; margin: 14px auto 0; font-family: var(--f-arc); font-size: clamp(1.02rem, 2.1vw, 1.2rem); color: #b8abce; line-height: 1.65; }
.war-band .allies { margin: 16px auto 6px; font-style: italic; color: #d5c8e8; }
@media (max-width: 640px) {
  .hero-stage { min-height: 88vh; }
  .stage-art { object-position: 50% 28%; }
}

/* ---- V2.3: the war briefing (three columns under the stage) ---- */
.war-band { text-align: left; }
.war-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
  max-width: 1220px;
  margin: 0 auto;
}
.war-col { min-width: 0; }
.war-col:not(.story) { border-left: 1px solid var(--arc-line); padding-left: clamp(18px, 2vw, 28px); }
.wk {
  display: block;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--arc);
  margin-bottom: 14px;
}
.war-band .war-h { font-size: clamp(1.7rem, 3.6vw, 2.5rem); text-align: left; }
.war-band .pitch { margin: 14px 0 0; max-width: none; text-align: left; }
.war-band .stand { margin: 16px 0 0; font-size: 1.15rem; color: #e9e0f4; font-style: italic; }
.war-band .creed { margin-top: 0; font-size: clamp(0.85rem, 1.6vw, 1rem); padding: 10px 20px; letter-spacing: 0.18em; }
.war-band .proof { margin: 16px 0 0; text-align: left; font-size: 0.95rem; }
.war-band .gather { margin: 12px 0 0; font-style: italic; font-size: 1.05rem; color: #d5c8e8; }
.war-band .die-row { margin: 0; justify-content: flex-start; }
.war-band .die-row img { height: 64px; }
.war-band .say2 { margin: 10px 0 0; font-family: var(--f-arc); font-style: italic; font-size: 0.95rem; color: #a493c2; }
.war-band .born {
  margin: 16px 0 0;
  text-transform: none; letter-spacing: 0.02em;
  font-family: var(--f-arc); font-size: 0.95rem; font-weight: 400;
  color: #a493c2;
}
.war-band .born a { color: var(--arc-hi); text-decoration: none; border-bottom: 1px dotted var(--arc-soft); }
.war-band .born em { color: #d5c8e8; }
@media (max-width: 880px) {
  .war-grid { grid-template-columns: 1fr; }
  .war-col:not(.story) { border-left: none; border-top: 1px solid var(--arc-line); padding-left: 0; padding-top: 20px; }
}

/* ---- V2.4: centred proclamation + the two plaques ---- */
.war-band { text-align: center; }
.war-story { max-width: 720px; margin: 0 auto; }
.war-band .war-h { text-align: center; font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
.war-band .pitch { text-align: center; margin: 14px auto 0; max-width: 660px; }
.war-band .stand { text-align: center; font-size: 1.2rem; }
.oe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
  max-width: 980px;
  margin: clamp(28px, 4vw, 44px) auto 0;
}
.plaque {
  border: 1px solid var(--arc-line);
  border-radius: 10px;
  background: rgba(16, 13, 30, 0.6);
  padding: clamp(24px, 3vw, 36px) clamp(18px, 2.5vw, 30px);
  text-align: center;
}
.plaque .wk {
  font-size: 0.92rem;
  letter-spacing: 0.4em; text-indent: 0.4em;
  color: var(--arc-hi);
  margin-bottom: 18px;
}
.plaque .creed { margin: 0; }
.plaque .proof { text-align: center; margin: 16px 0 0; font-size: 0.95rem; }
.plaque .gather { text-align: center; margin: 12px 0 0; }
.plaque .die-row { justify-content: center; margin: 0; }
.plaque .die-row img { height: 68px; }
.plaque .say2 { text-align: center; margin: 10px 0 0; }
.plaque .born { text-align: center; margin: 16px 0 0; }
@media (max-width: 760px) { .oe-grid { grid-template-columns: 1fr; } }

/* ---- V2.5: the perfect pass ---- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--arc); color: #0a0916;
  font-weight: 700; letter-spacing: 0.06em;
  padding: 10px 18px; border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip:focus { left: 0; }
main { display: block; }