/* ═══════════════════════════════════════════════════════════════════════════
   Court of Relics — "Olympus at Night"
   Dark cinematic design system. One file, no framework.

   Technique notes (what each block is for) live beside the rules so the next
   person can see WHY, not just what. Motion is transform/opacity only, every
   animation has a reduced-motion fallback, hovers gate behind (hover:hover).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────────────── */
@font-face { font-family: "Monocraft"; src: url("../fonts/Monocraft-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Monocraft"; src: url("../fonts/Monocraft-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Monocraft"; src: url("../fonts/Monocraft-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* canvas — the near-black Mythos uses is rgb(1,2,6); ours leans a hair warmer
     so the gold reads as candlelight rather than neon */
  --ink-0: #03040a;
  --ink-1: #07091a;
  --ink-2: #0c1024;
  --ink-3: #141a36;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* text */
  --text: #f2f0ea;
  --text-2: rgba(242, 240, 234, 0.72);
  --text-3: rgba(242, 240, 234, 0.48);

  /* gold — the brand's voice. Mythos uses ice-blue; Olympus is gilded */
  --gold-1: #fff0c2;
  --gold-2: #f0d489;
  --gold-3: #d9b04a;
  --gold-4: #b8851e;
  --gold-5: #7a560f;

  /* aurora accents — the two colours that drift behind everything */
  --aurora-a: #6b4cff;   /* violet */
  --aurora-b: #1ec8d6;   /* sea teal */
  --aurora-c: #ff9a3c;   /* ember */

  /* per-house accent is set inline via --house on the element */
  --house: var(--gold-3);

  /* type */
  /* Monocraft (OFL) — the Minecraft typeface, self-hosted in assets/fonts. It is the
     display face AND the mono face: headings, labels and the server address all read
     as the game. Body copy stays Inter so paragraphs are still easy to read. */
  --display: "Monocraft", "Courier New", monospace;
  --serif: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "Monocraft", ui-monospace, Menlo, monospace;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --fast: 180ms;
  --base: 260ms;

  --radius: 18px;
  --radius-lg: 28px;
  --max: 1280px;
  --nav-h: 76px;
}

/* ── reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold-3); color: var(--ink-0); }

/* pixel art (crests, relics, medallions) must never be smoothed */
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── the grain + grid texture Mythos lays over every section ─────────────── */
/* a 1px hairline grid at 1.6% opacity — invisible until you look, but it
   gives the black depth. Plus a faint film grain via an SVG turbulence. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
}
body::after {
  content: "";
  position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); } 30% { transform: translate(3%, -15%); }
  50% { transform: translate(12%, 9%); } 70% { transform: translate(9%, 4%); } 90% { transform: translate(-1%, 7%); }
}

/* ── aurora orbs: the huge blurred colour fields behind sections ─────────── */
/* Mythos: 900px blue-600/10 blur(180px). Ours drift slowly. */
.orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(140px); opacity: 0.55; will-change: transform;
  animation: orb-drift 26s var(--ease-in-out) infinite alternate;
}
.orb-gold   { background: radial-gradient(circle, var(--gold-3), transparent 70%); }
.orb-violet { background: radial-gradient(circle, var(--aurora-a), transparent 70%); }
.orb-teal   { background: radial-gradient(circle, var(--aurora-b), transparent 70%); }
.orb-ember  { background: radial-gradient(circle, var(--aurora-c), transparent 70%); }
.orb-house  { background: radial-gradient(circle, var(--house), transparent 70%); }
@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, -8%, 0) scale(1.12); }
}

/* ── type scale ─────────────────────────────────────────────────────────── */
/* Monocraft is a pixel face: glyphs are wide and already carry their own spacing, so
   headings run smaller than the Cinzel scale did, with zero tracking (negative tracking
   would fuse the pixels) and uppercase, the way the game's own titles are set. */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; }
.display {
  font-size: clamp(2.2rem, 6.2vw, 5.4rem);
  letter-spacing: 0.01em; line-height: 1.05;
}
.display-2 { font-size: clamp(1.6rem, 3.6vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.3rem); }
h3 { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.25; }
h4 { text-transform: none; }
p { margin: 0 0 1em; }
.lede { font-family: var(--sans); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--text-2); }
.muted { color: var(--text-3); }

/* the gilded gradient text — Mythos' white→ice-blue, ours white→gold→deep gold */
.gild {
  background: linear-gradient(180deg, #fff 0%, var(--gold-1) 40%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* text-shadow does not apply to clipped text; a hard pixel step + soft bloom via filter */
  filter: drop-shadow(0.06em 0.06em 0 rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(240, 212, 137, 0.22));
}
.gild-house {
  background: linear-gradient(180deg, #fff 0%, var(--house) 65%, var(--house) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* section eyebrow: "// Not just another server." in Mythos */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-3);
}
.eyebrow::before {
  content: ""; width: 42px; height: 2px;
  background: linear-gradient(90deg, var(--gold-3), transparent);
}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { width: min(var(--max), 100% - 48px); margin-inline: auto; }
section { position: relative; }
.section { padding: clamp(80px, 12vw, 160px) 0; position: relative; overflow-x: clip; }
/* The 800-900px blurred orbs hang off both edges of their section by design. `clip` (not
   `hidden`) keeps them from widening the page on phones without turning the section into
   a scroll container, so sticky children keep working. */
main, footer { overflow-x: clip; }
.section-line { border-top: 1px solid var(--line); }
.center { text-align: center; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ── nav: frosted glass pill, blur(40px) like Mythos ────────────────────── */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(var(--max), 100% - 32px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 14px 10px 18px;
  background: rgba(7, 9, 26, 0.55);
  backdrop-filter: blur(40px) saturate(160%); -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform var(--base) var(--ease-out), background var(--base);
}
.nav.is-hidden { transform: translate(-50%, -140%); }
.nav-brand { display: flex; align-items: center; gap: 12px; }
/* The wordmark is a 1200×432 PNG with baked-in 3D depth; it needs no text beside it. */
.nav-brand .brand-logo { width: auto; height: 34px; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); transition: transform 0.35s var(--ease); }
@media (hover:hover) { .nav-brand:hover .brand-logo { transform: scale(1.04); } }
.foot .nav-brand .brand-logo-lg { height: 52px; }
@media (max-width: 720px) { .nav-brand .brand-logo { height: 28px; } .foot .nav-brand .brand-logo-lg { height: 44px; } }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; color: var(--text-2);
  transition: color var(--fast), background var(--fast);
}
.nav-links a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,0.06); }
@media (hover:hover) { .nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.06); } }
.nav-cta { display: flex; gap: 8px; }
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 999px; }
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .nav.is-open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    padding: 12px; background: rgba(7,9,26,0.92); backdrop-filter: blur(40px);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
  }
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--fast) var(--ease-out), box-shadow var(--base), background var(--base), border-color var(--base);
}
.btn:active { transform: scale(0.97); }
/* primary: white pill like "Play Now" — but gilded */
.btn-primary {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
  color: #2a1d05;
  box-shadow: 0 10px 30px -8px rgba(240,212,137,0.45), inset 0 1px 0 rgba(255,255,255,0.7);
}
@media (hover:hover) { .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(240,212,137,0.6), inset 0 1px 0 rgba(255,255,255,0.8); } }
/* ghost: white/3% fill, white/10% border like "Join Discord" */
.btn-ghost { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color: var(--text); }
@media (hover:hover) { .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); } }
/* the "Store" button: asymmetric radius 24px 8px + a coloured drop shadow */
.btn-store {
  border-radius: 24px 8px; border-color: rgba(255,255,255,0.2); color: var(--text);
  background: linear-gradient(135deg, rgba(107,76,255,0.35), rgba(30,200,214,0.15));
  box-shadow: 0 20px 25px -5px rgba(107,76,255,0.3), 0 8px 10px -6px rgba(107,76,255,0.3);
  font-weight: 800;
}
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }
.btn .ico { width: 18px; height: 18px; }

/* ── the live status pill ("MythosMC is Online") ─────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text-2);
  backdrop-filter: blur(12px);
}
.status .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.status .dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #4ade80;
  animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.status strong { color: var(--text); font-weight: 600; }

/* ── HERO ────────────────────────────────────────────────────────────────── */
/* Mythos: min-h 110vh, a video, then three scrims stacked:
     1. bg-gradient-to-t from-black via-transparent to-black/80
     2. blue-950/20 mix-blend-overlay (tints the whole frame)
     3. radial-gradient(transparent 0%, black 100%) vignette
   We do the same with a painting (and optionally a video). */
.hero {
  position: relative; min-height: 110vh; display: grid; place-items: center;
  overflow: hidden; text-align: center; padding: calc(var(--nav-h) + 40px) 0 80px;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: brightness(0.82) saturate(1.05);
  animation: kenburns 28s var(--ease-in-out) infinite alternate;
}
@keyframes kenburns { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
.hero-scrim { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-scrim.s1 { background: linear-gradient(to top, var(--ink-0) 0%, rgba(3,4,10,0.55) 40%, rgba(3,4,10,0.35) 65%, rgba(3,4,10,0.8) 100%); }
.hero-scrim.s2 { background: rgba(20, 16, 60, 0.35); mix-blend-mode: multiply; }
.hero-scrim.s3 { background: radial-gradient(ellipse 70% 60% at center, rgba(3,4,10,0.55) 0%, var(--ink-0) 120%); opacity: 0.9; }
/* a soft dark backing directly behind the display type so gold reads on any painting */
.hero-inner::before { content: ""; position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at center, rgba(3,4,10,0.7), transparent 70%); }
/* aurora ribbon: a slow animated conic sweep across the top third */
.hero-aurora {
  position: absolute; inset: -20% -10% auto; height: 70%; z-index: -2; pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(107,76,255,0.55), transparent 65%),
    radial-gradient(50% 45% at 75% 25%, rgba(30,200,214,0.4), transparent 65%),
    radial-gradient(45% 40% at 50% 60%, rgba(240,212,137,0.3), transparent 65%);
  filter: blur(60px); mix-blend-mode: screen;
  animation: aurora 18s var(--ease-in-out) infinite alternate;
}
@keyframes aurora { from { transform: translate3d(-3%, 0, 0) rotate(-2deg); } to { transform: translate3d(4%, 3%, 0) rotate(2deg); } }
.hero-inner { position: relative; z-index: 1; width: min(1100px, 100% - 48px); }
.hero .display { margin: 26px 0 22px; text-shadow: none; }
.hero:not(.hero-page) .display { font-size: clamp(2.4rem, 7vw, 6rem); }
/* Home hero: the logo replaces the gilded title. Gold bloom underneath, slow float on top. */
.hero-logo { margin: 10px auto 24px; width: min(820px, 92vw); line-height: 0; }
.hero-logo img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.35)) drop-shadow(0 22px 60px rgba(255,196,64,0.30)) drop-shadow(0 0 90px rgba(255,160,40,0.18));
  animation: logo-float 7s ease-in-out infinite; }
@keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero:not(.hero-page) .lede { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.hero .lede { max-width: 720px; margin-inline: auto; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* address chip: the copy-to-clipboard server IP with mono type */
.addr {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; justify-content: center; max-width: 100%;
  padding: 10px 12px 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.02em;
}
.addr button { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 0.8rem; transition: background var(--fast); }
@media (hover:hover) { .addr button:hover { background: var(--gold-3); color: var(--ink-0); } }

/* the scroll cue at the bottom of the hero */
.scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--text-3);
}
.scroll-cue span { width: 1px; height: 44px; background: linear-gradient(var(--gold-3), transparent); animation: cue 2s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes cue { 0%, 100% { transform: scaleY(0.3); opacity: 0.3; } 50% { transform: scaleY(1); opacity: 1; } }

/* ── cards ───────────────────────────────────────────────────────────────── */
/* glass cards with an inner top highlight, a coloured hover glow, and a
   1px gradient border achieved with a masked pseudo-element */
.card {
  position: relative; padding: 28px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform var(--base) var(--ease-out), border-color var(--base), box-shadow var(--base);
  overflow: hidden;
}
.card::before {
  /* the spotlight: follows the cursor via --mx/--my set in JS */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--house) 22%, transparent), transparent 55%);
  transition: opacity var(--base);
}
@media (hover:hover) {
  .card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9), 0 0 0 1px color-mix(in srgb, var(--house) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.1); }
  .card:hover::before { opacity: 1; }
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: 0.98rem; }
.card .tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--house);
}
.card .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--house); box-shadow: 0 0 8px var(--house); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 50% { opacity: 0.4; } }

/* stat tiles: the big number band */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.stat { padding: 22px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,0.025); }
.stat b { display: block; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; }
.stat span { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--text-3); line-height: 1.4; }

/* ── the PINNED god section (Mythos' 300vh sticky staff section) ─────────── */
/* The outer is tall; the inner sticks for the whole scroll while JS swaps the
   active god as you pass each "slide" worth of height. */
.pin { position: relative; height: calc(var(--slides, 12) * min(60vh, 520px) + 100vh); }
.pin-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; align-items: center; isolation: isolate;
}
.pin-bg { position: absolute; inset: 0; z-index: -2; }
.pin-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.pin-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--ink-0) 0%, rgba(3,4,10,0.7) 45%, rgba(3,4,10,0.35) 100%), linear-gradient(to top, var(--ink-0), transparent 30%); }
.pin-orb { position: absolute; right: -10%; top: 50%; width: 900px; height: 900px; transform: translateY(-50%); z-index: -1; transition: background 600ms; }
.pin-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .pin-row { grid-template-columns: 1fr; } .pin-visual { order: -1; } }
.pin-copy .display-2 { margin: 12px 0 14px; }
.pin-copy .lede { font-size: 1.15rem; }
.pin-tiers { display: grid; gap: 10px; margin-top: 22px; }
.tier { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); font-size: 0.92rem; }
.tier b { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--house); align-self: start; padding-top: 3px; }
.tier em { font-style: normal; color: var(--text); font-weight: 600; }
.tier p { margin: 2px 0 0; color: var(--text-2); }
/* the crest with rings */
.pin-visual { position: relative; display: grid; place-items: center; min-height: 420px; }
.crest-big { position: relative; width: 256px; height: 256px; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--house) 55%, transparent)); transition: transform 600ms var(--ease-out), filter 600ms; }
.ring { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--house) 35%, transparent); animation: spin 40s linear infinite; }
.ring.r1 { width: 360px; height: 360px; border-style: dashed; }
.ring.r2 { width: 460px; height: 460px; animation-direction: reverse; animation-duration: 60s; opacity: 0.6; }
.ring.r3 { width: 560px; height: 560px; border-style: dotted; animation-duration: 90s; opacity: 0.35; }
@keyframes spin { to { transform: rotate(360deg); } }
/* the god rail: 12 crest dots you can click; active one scales */
.pin-rail { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(7,9,26,0.6); border: 1px solid var(--line); backdrop-filter: blur(20px); z-index: 2; }
.pin-rail button { width: 36px; height: 36px; border-radius: 50%; padding: 4px; opacity: 0.45; transition: opacity var(--fast), transform var(--fast) var(--ease-out); }
.pin-rail button img { width: 100%; height: 100%; }
.pin-rail button.is-active { opacity: 1; transform: scale(1.25); }
@media (max-width: 700px) { .pin-rail { gap: 4px; } .pin-rail button { width: 26px; height: 26px; } .crest-big { width: 160px; height: 160px; } .ring.r1 { width: 230px; height: 230px; } .ring.r2 { width: 290px; height: 290px; } .ring.r3 { display: none; } }
/* slide swap animation */
.pin-copy > * { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.pin-stage.is-swapping .pin-copy > * { opacity: 0; transform: translateY(14px); }

/* ── painted scene bands (full-bleed image with copy) ───────────────────── */
.scene {
  position: relative; min-height: 80vh; display: grid; align-items: end; overflow: hidden; isolation: isolate;
  padding: clamp(80px, 12vw, 160px) 0;
}
.scene-media { position: absolute; inset: 0; z-index: -2; }
.scene-media img { width: 100%; height: 110%; object-fit: cover; will-change: transform; }
.scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--ink-0) 0%, rgba(3,4,10,0.55) 40%, rgba(3,4,10,0.2) 70%, var(--ink-0) 100%); }
.scene .wrap { position: relative; }
.scene-copy { max-width: 640px; }
.scene-copy .lede { margin-top: 14px; }

/* ── marquee (server facts ticker) ───────────────────────────────────────── */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 16px 0; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: marquee 60s linear infinite; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.marquee-track span::before { content: "✦"; margin-right: 48px; color: var(--gold-4); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── house grid (houses page) ─────────────────────────────────────────────── */
.house-card { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
.house-card .crest { width: 96px; height: 96px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--house) 45%, transparent)); }
.house-card h3 { font-size: 1.45rem; }
.house-card .domain { font-family: var(--sans); color: var(--text-2); }
.house-card .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--true); vertical-align: middle; margin-right: 6px; }
.house-tiers { margin-top: 14px; display: grid; gap: 8px; }

/* ── the dossiers (houses page) ──────────────────────────────────────────── */
.rules { border: 1px solid color-mix(in srgb, var(--gold-4) 55%, transparent); border-radius: var(--radius-lg); padding: 22px 26px; margin: 26px 0 8px; background: linear-gradient(180deg, rgba(240,212,137,0.06), rgba(240,212,137,0.02)); max-width: 980px; }
.rules h3 { font-size: 0.85rem; color: var(--gold-2); margin-bottom: 12px; }
.rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rules li { color: var(--text-2); font-size: 0.95rem; line-height: 1.55; padding-left: 14px; position: relative; }
.rules li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; background: var(--gold-3); }
.rules li b { color: var(--text); }
.rules code { font-family: var(--mono); font-size: 0.8rem; color: var(--gold-2); }
/* ── rules page ─────────────────────────────────────────────────────────── */
.laws { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.laws li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.03); }
.laws .n { font-family: var(--mono); color: var(--gold-3); font-size: 1.1rem; padding-top: 2px; }
.laws h3 { font-size: 0.95rem; margin-bottom: 6px; }
.laws p { margin: 0; color: var(--text-2); line-height: 1.55; }
.laws a { color: var(--gold-2); text-decoration: underline; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tbl th { text-align: left; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-3); padding: 10px 12px; border-bottom: 1px solid var(--gold-4); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.tbl td:first-child { color: var(--text); font-weight: 600; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 36px; }
.jump-god { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); transition: border-color var(--fast), background var(--fast); }
.jump-god img { width: 28px; height: 28px; }
.jump-god i { font-style: normal; font-size: 0.62rem; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 999px; background: var(--house); color: var(--ink-0); font-weight: 700; }
@media (hover:hover) { .jump-god:hover { border-color: color-mix(in srgb, var(--house) 60%, transparent); background: rgba(255,255,255,0.06); color: var(--text); } }
.dossiers { display: grid; gap: 22px; }
.dossier { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 34px); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)); scroll-margin-top: 90px; }
.dossier::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(600px 240px at 0% 0%, color-mix(in srgb, var(--house) 14%, transparent), transparent 70%); }
.dossier-head { display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: start; }
.dossier-head .crest { width: 112px; height: 112px; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--house) 50%, transparent)); }
.dossier-head h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 6px 0 4px; }
.dossier-head .domain { color: var(--text-2); margin: 0 0 10px; }
.dossier-head .domain code { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); }
.dossier-head .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--true); vertical-align: middle; margin-right: 6px; }
.dossier-head .one { font-size: 1.05rem; color: var(--text); margin: 0; max-width: 70ch; }
.badge { display: inline-block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; vertical-align: middle; }
.badge-ea { background: var(--house); color: var(--ink-0); font-weight: 700; margin-left: 6px; }
.dossier-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sec-h { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--house); margin-bottom: 12px; }
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 80ch; }
.plain li { padding-left: 14px; position: relative; color: var(--text-2); line-height: 1.55; }
.plain li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; background: var(--house); }
.plain li b { color: var(--text); }
.abs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ab { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: rgba(3,4,10,0.35); }
.ab header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ab h4 { font-family: var(--display); text-transform: uppercase; font-size: 0.95rem; color: var(--gold-1); margin: 0; }
.ab p { color: var(--text-2); font-size: 0.95rem; line-height: 1.55; margin: 0 0 8px; }
.ab p b { color: var(--text); font-weight: 600; }
.ab .how { color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.7rem; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text-2); }
.chip b { color: var(--text-3); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; }
.chip-proj { border-color: color-mix(in srgb, var(--house) 60%, transparent); color: var(--house); }
.skilljobs p { color: var(--text-2); max-width: 80ch; margin: 0 0 8px; line-height: 1.55; }
.skilljobs p b { color: var(--text); }
.dossier-ranks { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; margin-bottom: 0; overflow: visible; }
.dossier-ranks summary { padding: 0; margin-bottom: 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.dossier-ranks summary::-webkit-details-marker { display: none; }
.dossier-ranks summary::after { content: "+"; font-family: var(--mono); color: var(--house); margin-left: auto; font-size: 1rem; }
.dossier-ranks[open] summary::after { content: "−"; transform: none; }
.dossier-ranks[open] summary { margin-bottom: 12px; }
.dossier-ranks summary .muted { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: none; }
.ranks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; max-width: 80ch; }
.ranks li { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 0.95rem; color: var(--text-2); line-height: 1.5; }
.ranks li b { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--house); padding-top: 4px; }
@media (max-width: 640px) { .dossier-head { grid-template-columns: 72px 1fr; gap: 14px; } .dossier-head .crest { width: 72px; height: 72px; } .ranks li { grid-template-columns: 1fr; gap: 2px; } .abs { grid-template-columns: 1fr; } }

/* ── skill cards ─────────────────────────────────────────────────────────── */
.skill-card .en { font-family: var(--sans); color: var(--text-2); margin-left: 8px; font-size: 0.95rem; text-transform: none; }
.skill-card .ability { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); font-size: 0.92rem; }
.skill-card .ability b { color: var(--house); }
.skill-card .gesture { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); margin-top: 8px; }

/* ── rank ladder (ranks page) ────────────────────────────────────────────── */
.ladder { display: grid; gap: 10px; }
.rung { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.025); transition: border-color var(--fast), background var(--fast); }
@media (hover:hover) { .rung:hover { border-color: color-mix(in srgb, var(--house) 50%, transparent); background: rgba(255,255,255,0.045); } }
.rung .n { font-family: var(--mono); font-size: 0.8rem; color: var(--text-3); }
.rung .name { font-family: var(--display); font-weight: 700; }
.rung .name small { display: block; font-family: var(--sans); font-weight: 400; font-size: 0.82rem; color: var(--text-3); margin-top: 3px; }
.rung .cost { font-family: var(--mono); font-size: 0.85rem; color: var(--gold-2); }
.rung .bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rung .bar i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--house), transparent); }

/* ── details/accordion (guide, rules) ────────────────────────────────────── */
details { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.025); margin-bottom: 10px; overflow: hidden; }
summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--mono); color: var(--gold-3); transition: transform var(--base) var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
details .body { padding: 0 22px 22px; color: var(--text-2); white-space: pre-line; }

/* command table */
.cmd { display: grid; grid-template-columns: 220px 1fr; gap: 12px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.cmd code { font-family: var(--mono); color: var(--gold-2); font-size: 0.9rem; }
.cmd .al { color: var(--text-3); font-size: 0.8rem; margin-left: 6px; }
@media (max-width: 640px) { .cmd { grid-template-columns: 1fr; gap: 4px; } }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(100px, 16vw, 200px) 0; isolation: isolate; }
.cta-media { position: absolute; inset: 0; z-index: -2; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, transparent 0%, var(--ink-0) 95%), linear-gradient(to bottom, var(--ink-0), transparent 30%, transparent 70%, var(--ink-0)); }

/* ── footer ──────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 0.9rem; color: var(--text-3); }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 800px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot { grid-template-columns: 1fr; gap: 24px; } .addr { font-size: 0.85rem; gap: 8px; padding: 8px 10px 8px 14px; } }
.foot h4 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-3); margin-bottom: 14px; }
.foot a { display: block; padding: 4px 0; color: var(--text-2); }
@media (hover:hover) { .foot a:hover { color: var(--text); } }
.foot-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; }

/* ── page hero (sub-pages: shorter than home) ────────────────────────────── */
.hero.hero-page { min-height: 72vh; max-height: 900px; }
/* Sub-page paintings are the point of the page — let them breathe. The home hero carries
   twelve-rem type over a bright painting and needs the heavier scrim; these do not. */
.hero-page .hero-media img { filter: brightness(0.95) saturate(1.05); }
.hero-page .hero-scrim.s1 { background: linear-gradient(to top, var(--ink-0) 0%, rgba(3,4,10,0.35) 45%, rgba(3,4,10,0.15) 70%, rgba(3,4,10,0.7) 100%); }
.hero-page .hero-scrim.s2 { background: rgba(20, 16, 60, 0.2); }
.hero-page .hero-scrim.s3 { opacity: 0.6; }
.hero-page .hero-inner::before { background: radial-gradient(ellipse 55% 50% at center, rgba(3,4,10,0.6), transparent 70%); }
.hero:not(.hero-page) { max-height: 1200px; }
.hero.hero-page .display { font-size: clamp(2.8rem, 8vw, 6.5rem); }

/* ── scroll reveal (Framer-Motion-style fade/slide) ──────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="scale"] { transform: scale(0.94); }

/* ── toast (copied!) ─────────────────────────────────────────────────────── */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 60; opacity: 0; pointer-events: none; padding: 12px 20px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--gold-4); color: var(--gold-1); font-family: var(--mono); font-size: 0.85rem; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.8); transition: opacity var(--base), transform var(--base) var(--ease-out); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── cursor glow that follows the pointer (subtle, desktop only) ─────────── */
.cursor-glow { position: fixed; z-index: 1; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; left: 0; top: 0; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(240,212,137,0.06), transparent 60%); mix-blend-mode: screen; opacity: 0; transition: opacity 600ms; }
@media (hover:hover) and (pointer:fine) { .cursor-glow { opacity: 1; } }

/* ── reduced motion: everything still works, nothing moves ───────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-media img, .hero-media video { animation: none; transform: none; }
  .hero-logo img { animation: none; }
  .scene-media img { transform: none !important; }
}