/* Iron Realms — companion site theme. Standalone (no build step); mirrors the
   game's HD gold-on-dark identity. Fonts are the same self-hosted faces the
   game ships, loaded from /fonts. */
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel/cinzel-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("/fonts/cinzel/cinzel-decorative-latin.woff2") format("woff2"); font-display: swap; }

:root {
  --gold: #e3c168; --gold-bright: #f4d98a; --gold-dim: #b9922f;
  --ink: #0c1017; --panel: #141b28; --panel-2: #1b2433;
  --text: #d8dee9; --muted: #8b96a8; --line: rgba(227,193,104,0.22);
  --display: "Cinzel", "Iowan Old Style", Palatino, Georgia, serif;
  --fancy: "Cinzel Decorative", "Cinzel", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); font-family: var(--body); line-height: 1.65;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1c2534 0%, rgba(20,25,37,0) 60%),
    linear-gradient(180deg, #0b0f16, #0c1017 60%);
  min-height: 100vh;
}
a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
/* height:auto is load-bearing: our <img> carry width/height attributes, and on
   iOS WebKit (Safari AND Chrome) a width constraint without an explicit
   height:auto makes the literal height attribute win over the intrinsic
   aspect-ratio — the image renders stretched. Never drop the height:auto. */
img { max-width: 100%; height: auto; }

/* Top bar */
.nav {
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(12,16,23,0.92), rgba(12,16,23,0.72));
  border-bottom: 1px solid var(--line);
}
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.brand { font-family: var(--fancy); font-size: 20px; color: var(--gold); letter-spacing: 0.5px; white-space: nowrap; }
.brand span { color: var(--gold-bright); }
.nav-links { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.nav-links a { color: var(--text); font-size: 14px; }
.nav-links a:hover { color: var(--gold-bright); text-decoration: none; }
.nav-cta {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  color: #241a06 !important; padding: 8px 16px; border-radius: 10px;
  border: 1px solid #7a5a22; box-shadow: inset 0 1px 0 rgba(255,248,220,0.6), 0 3px 8px rgba(0,0,0,0.4);
}
.nav-cta:hover { filter: brightness(1.06); text-decoration: none; }

/* Layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 32px 20px 64px; }
.crumbs { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.crumbs a { color: var(--muted); }

/* Text utilities — used by the legal, roadmap and news pages, and never
 * written until now. `--muted` existed as a colour VARIABLE, so `.muted`
 * looked defined at a glance and silently did nothing: every "muted small"
 * caption on those pages rendered at full body weight, which is the opposite
 * of what it was marked up to say. */
.lede { font-size: 18.5px; line-height: 1.62; color: var(--text); margin: 0 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; line-height: 1.6; }
.muted a { color: var(--muted); text-decoration: underline; }

/* Available to a screen reader, absent from the page. For headings a document
 * needs for its outline but a sighted reader does not need repeated back. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hero */
.hero { text-align: center; padding: 64px 20px 40px; max-width: 860px; margin: 0 auto; }
.hero h1 { font-family: var(--fancy); font-size: clamp(34px, 7vw, 62px); color: var(--gold); margin: 0 0 8px; line-height: 1.05; }
.hero .kicker { font-family: var(--display); color: var(--gold-bright); letter-spacing: 3px; text-transform: uppercase; font-size: 13px; }
.hero p.lead { font-size: 18px; color: var(--text); max-width: 640px; margin: 18px auto 28px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  font-family: var(--display); font-weight: 700; font-size: 16px; padding: 13px 26px; border-radius: 12px; cursor: pointer;
  display: inline-block; border: 1px solid var(--line); color: var(--text); background: linear-gradient(180deg, #232a38, #141922);
}
.btn:hover { border-color: var(--gold); text-decoration: none; }
.btn.primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim)); color: #241a06; border-color: #7a5a22;
  box-shadow: inset 0 1px 0 rgba(255,248,220,0.6), 0 4px 12px rgba(0,0,0,0.45);
}
.btn.primary:hover { filter: brightness(1.06); }

/* Section headings */
h2 { font-family: var(--display); color: var(--gold); font-size: 26px; margin: 40px 0 4px; }
h3 { font-family: var(--display); color: var(--gold-bright); font-size: 19px; margin: 28px 0 6px; }
.section-sub { color: var(--muted); margin: 0 0 18px; }

/* Cards grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 22px 0; }
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--gold); transform: translateY(-2px); }
.card h3 { margin: 0 0 6px; }
.card p { color: var(--muted); font-size: 14px; margin: 0; }
.card .ico { font-size: 26px; }
a.card, a.card:hover { text-decoration: none; color: inherit; display: block; }

/* Prose */
.prose { max-width: 760px; }
.prose p, .prose li { font-size: 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose strong { color: var(--gold-bright); }
.callout {
  border-left: 3px solid var(--gold); background: rgba(227,193,104,0.06);
  padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 18px 0; color: var(--text);
}
.callout.warn { border-left-color: #c9873a; background: rgba(201,135,58,0.08); }

/* Table */
table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--gold); font-family: var(--display); }
tbody tr:hover { background: rgba(255,255,255,0.02); }

/* FAQ */
details { border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; background: var(--panel); overflow: hidden; }
details summary { cursor: pointer; padding: 14px 18px; font-family: var(--display); color: var(--gold-bright); font-size: 16px; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸ "; color: var(--gold); }
details[open] summary::before { content: "▾ "; }
details .answer { padding: 0 18px 16px; color: var(--text); }

/* Footer */
.foot { border-top: 1px solid var(--line); margin-top: 48px; }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px; color: var(--muted); font-size: 13px; display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
.foot a { color: var(--muted); }
.foot .cols { display: flex; gap: 40px; flex-wrap: wrap; }
.foot h4 { color: var(--gold); font-family: var(--display); font-size: 14px; margin: 0 0 8px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: 4px 0; }
.disclaimer { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 28px; color: #5a6472; font-size: 12px; }

@media (max-width: 640px) {
  /* The nav used to hide every link but the CTA here, which left phone visitors
     with no way to reach the guides, world, forum or news at all — the footer
     was the only route, and only if you scrolled to the bottom of the page.
     Instead: let the links wrap onto a second line and stop the bar sticking,
     so a taller header costs nothing once you scroll past it. */
  .nav { position: static; }
  .nav-inner { padding: 10px 16px; gap: 10px 14px; flex-wrap: wrap; }
  .brand { font-size: 18px; }
  .nav-links { gap: 10px 14px; flex-wrap: wrap; width: 100%; margin-left: 0; align-items: center; }
  .nav-links a:not(.nav-cta) { font-size: 13.5px; padding: 2px 0; }
  .nav-cta { padding: 7px 13px; font-size: 13px; margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AAA REDESIGN LAYER — cinematic landing components + a polish pass over the
   shared chrome. Everything below overrides/extends the base above; inner
   guide pages inherit the upgraded nav, cards, tables and typography for free.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink-0: #070a10; --ink-1: #0b0f16; --glass: rgba(20,27,40,0.55);
  --maxw-wide: 1200px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
body {
  background:
    radial-gradient(1400px 700px at 50% -12%, #1b2637 0%, rgba(20,25,37,0) 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(120,70,40,0.10), transparent 60%),
    linear-gradient(180deg, var(--ink-1), var(--ink-0) 70%);
  -webkit-font-smoothing: antialiased;
}

/* ── Nav: glass, crest, scroll-aware ─────────────────────────────────────── */
.nav { transition: background .3s var(--ease), border-color .3s; }
.nav-inner { max-width: var(--maxw-wide); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; }
.brand::before {
  content: ""; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 6px;
  background: url("/icon-192.png") center/contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.nav-links a:not(.nav-cta) { position: relative; padding: 4px 2px; transition: color .2s; }
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: right .25s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after { right: 0; }

/* ── Cinematic masthead ──────────────────────────────────────────────────── */
.masthead {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(88vh, 760px); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 80px 20px 96px;
}
.masthead::before {          /* the live gameplay backdrop */
  content: ""; position: absolute; inset: 0; z-index: -3;
  background: url("img/hero-world.jpg") center 30%/cover no-repeat;
  transform: scale(1.08); animation: heroPan 32s ease-in-out infinite alternate;
}
.masthead::after {           /* cinematic scrim for legibility */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(7,10,16,.30), rgba(7,10,16,.86) 78%),
    linear-gradient(180deg, rgba(7,10,16,.55) 0%, rgba(7,10,16,.15) 35%, rgba(7,10,16,.92) 100%);
}
@keyframes heroPan { from { transform: scale(1.08) translate3d(-1.5%,-1%,0); } to { transform: scale(1.14) translate3d(1.5%,1.5%,0); } }
.mast-inner { max-width: 900px; position: relative; z-index: 1; }
.mast-kicker {
  font-family: var(--display); color: var(--gold-bright); letter-spacing: 4px; text-transform: uppercase;
  font-size: 13px; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.mast-kicker::before, .mast-kicker::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.mast-kicker::after { background: linear-gradient(90deg, var(--gold), transparent); }
.masthead h1 {
  font-family: var(--fancy); color: #fff; margin: 0 0 4px; line-height: .98;
  font-size: clamp(44px, 9vw, 104px); letter-spacing: 1px;
  text-shadow: 0 2px 40px rgba(0,0,0,.6), 0 0 60px rgba(227,193,104,.12);
}
.masthead h1 .g { color: var(--gold); }
.mast-sub { font-size: clamp(17px, 2.4vw, 22px); color: #e7ecf3; max-width: 640px; margin: 18px auto 30px; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.mast-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* The realm's population, under the masthead buttons. Reads as a living stat
   rather than a badge: a soft pulsing dot, the figure in gold, the rest quiet. */
.mast-pop {
  margin-top: 18px; color: #cdd6e4; font-size: 14.5px; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 9px;
}
.mast-pop b { color: var(--gold-bright); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 17px; }
.pop-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #59d98a;
  box-shadow: 0 0 0 0 rgba(89,217,138,.65); animation: pop-pulse 2.4s ease-out infinite;
}
@keyframes pop-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(89,217,138,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(89,217,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(89,217,138,0); }
}
/* A pulsing dot is decoration, not information — hold it still for anyone who
   has asked the system for less motion. */
@media (prefers-reduced-motion: reduce) { .pop-dot { animation: none; } }
.mast-note { margin-top: 22px; color: #b9c3d2; font-size: 13.5px; letter-spacing: .3px; }
.mast-note b { color: var(--gold-bright); font-weight: 700; }
/* Drifting embers */
.embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ember { position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #ffd98a, rgba(255,150,60,.5) 60%, transparent 70%);
  box-shadow: 0 0 8px 1px rgba(255,180,90,.5); opacity: 0; animation: ember linear infinite; }
@keyframes ember { 0%{ transform: translateY(0) translateX(0) scale(1); opacity:0; } 12%{opacity:.9;} 100%{ transform: translateY(-78vh) translateX(28px) scale(.4); opacity:0; } }
.ember:nth-child(1){left:6%;animation-duration:11s;animation-delay:0s}
.ember:nth-child(2){left:16%;animation-duration:14s;animation-delay:2s}
.ember:nth-child(3){left:27%;animation-duration:9s;animation-delay:1s}
.ember:nth-child(4){left:38%;animation-duration:13s;animation-delay:4s}
.ember:nth-child(5){left:49%;animation-duration:10s;animation-delay:2.5s}
.ember:nth-child(6){left:59%;animation-duration:15s;animation-delay:.5s}
.ember:nth-child(7){left:70%;animation-duration:12s;animation-delay:3s}
.ember:nth-child(8){left:80%;animation-duration:9.5s;animation-delay:1.8s}
.ember:nth-child(9){left:90%;animation-duration:13.5s;animation-delay:3.6s}
.ember:nth-child(10){left:34%;animation-duration:16s;animation-delay:5s}
.ember:nth-child(11){left:64%;animation-duration:11.5s;animation-delay:6s}
.ember:nth-child(12){left:12%;animation-duration:12.5s;animation-delay:4.4s}

/* ── Full-bleed section bands ────────────────────────────────────────────── */
.band { padding: 72px 20px; }
.band.alt { background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.015)), rgba(10,14,21,.5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .inner { max-width: var(--maxw-wide); margin: 0 auto; }
.band-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.band-head h2 { font-family: var(--fancy); color: var(--gold); font-size: clamp(28px, 4.5vw, 44px); margin: 0 0 10px; }
.band-head p { color: var(--muted); font-size: 17px; margin: 0; }
.eyebrow { font-family: var(--display); color: var(--gold-dim); letter-spacing: 3px; text-transform: uppercase; font-size: 12px; }

/* ornate divider */
.rule { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold-dim); margin: 6px 0 30px; }
.rule::before, .rule::after { content: ""; height: 1px; width: min(160px, 22vw); background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.rule::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }

/* ── Pillars (value props) ───────────────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px){ .pillars { grid-template-columns: 1fr; } }
.pillar { text-align: center; padding: 30px 22px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.pillar .pico { font-size: 34px; display: block; margin-bottom: 12px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.pillar h3 { font-family: var(--fancy); color: var(--gold-bright); margin: 0 0 8px; font-size: 21px; }
.pillar p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ── Stat strip ──────────────────────────────────────────────────────────── */
.statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 720px){ .statstrip { grid-template-columns: repeat(2,1fr); } }
.stat { text-align: center; padding: 16px 10px; }
.stat b { display: block; font-family: var(--fancy); color: var(--gold); font-size: clamp(28px, 4.5vw, 40px); line-height: 1; }
.stat span { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }

/* ── Showcase (image + text split) ───────────────────────────────────────── */
.showcase { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.showcase.flip { grid-template-columns: .9fr 1.1fr; }
.showcase.flip .sc-media { order: 2; }
@media (max-width: 860px){ .showcase, .showcase.flip { grid-template-columns: 1fr; gap: 24px; } .showcase.flip .sc-media { order: 0; } }
.sc-media { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04); }
.sc-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sc-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -60px 80px rgba(7,10,16,.5); pointer-events: none; }
.sc-body h3 { font-family: var(--fancy); color: var(--gold); font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 12px; }
.sc-body p { color: var(--text); font-size: 16px; }
.sc-body .lead2 { color: var(--muted); }
.sc-list { list-style: none; padding: 0; margin: 14px 0 0; }
.sc-list li { padding: 7px 0 7px 28px; position: relative; color: var(--text); }
.sc-list li::before { content: "❖"; position: absolute; left: 0; color: var(--gold); }

/* ── Gameplay gallery ────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px){ .gallery { grid-template-columns: 1fr; } }
.shot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s var(--ease); }
.shot:hover img { transform: scale(1.05); }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font-size: 13.5px; color: #eef2f7;
  background: linear-gradient(180deg, transparent, rgba(7,10,16,.85)); }
.shot figcaption b { color: var(--gold-bright); }

/* ── Card grid polish (also lifts every guide hub card) ──────────────────── */
.grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { position: relative; background: var(--glass); backdrop-filter: blur(6px); border-radius: 16px; overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity .25s; }
.card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.card:hover::before { opacity: 1; }
.card .ico { font-size: 30px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.card h3 { font-family: var(--fancy); }

/* ── Buttons: shimmer + large ────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; letter-spacing: .3px; transition: transform .15s var(--ease), filter .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 0%,60%{ left:-60%; } 80%,100%{ left:130%; } }
.btn.lg { font-size: 18px; padding: 16px 34px; border-radius: 14px; }
.btn.ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); color: #fff; }
.btn.ghost:hover { border-color: var(--gold); background: rgba(227,193,104,.10); }

/* ── Final CTA band ──────────────────────────────────────────────────────── */
.cta-final { position: relative; text-align: center; padding: 96px 20px; overflow: hidden; }
.cta-final::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("img/hero-map.jpg") center/cover; opacity: .5; transform: scale(1.05); }
.cta-final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 100% at 50% 50%, rgba(7,10,16,.6), rgba(7,10,16,.94)); }
.cta-final h2 { font-family: var(--fancy); color: var(--gold); font-size: clamp(30px, 5vw, 52px); margin: 0 0 12px; }
.cta-final p { color: #dbe2ec; max-width: 560px; margin: 0 auto 26px; font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .masthead::before, .ember, .btn.primary::after { animation: none !important; }
}
@media (max-width: 640px) {
  .band { padding: 52px 18px; }
  .masthead { min-height: 78vh; }
}

/* ── Community forum ──────────────────────────────────────────────────────
   Board chrome. Everything here is layout only — the forum client builds its
   DOM with textContent, so no style hook depends on user-supplied markup. */
.f-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.f-title { font-family: var(--fancy); color: var(--gold); font-size: clamp(28px, 4.5vw, 40px); margin: 0 0 6px; }
.f-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  letter-spacing: .5px; text-transform: uppercase; background: rgba(227,193,104,.16); color: var(--gold-bright);
  border: 1px solid var(--line); vertical-align: middle; font-family: var(--body); }
.f-badge.lock { background: rgba(255,255,255,.06); color: var(--muted); }

.f-cats, .f-threads { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.f-cat, .f-thread {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-radius: 14px; text-decoration: none; color: inherit;
  background: var(--glass); border: 1px solid var(--line); transition: border-color .2s, transform .2s var(--ease);
}
.f-cat:hover, .f-thread:hover { border-color: var(--gold); transform: translateY(-2px); }
.f-cat-main, .f-thread-main { min-width: 0; }
.f-cat-main h3, .f-thread-main h3 { font-family: var(--fancy); color: var(--gold-bright); margin: 0 0 4px; font-size: 19px; }
.f-cat-main p, .f-thread-main p { margin: 0; font-size: 14px; }
.f-cat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; text-align: right; }
.f-cat-meta b { font-family: var(--fancy); color: var(--gold); font-size: 20px; line-height: 1; }
@media (max-width: 560px) {
  .f-cat, .f-thread { flex-direction: column; align-items: flex-start; gap: 8px; }
  .f-cat-meta { flex-direction: row; align-items: baseline; gap: 8px; text-align: left; }
}

.f-posts { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.f-post { padding: 16px 18px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); }
.f-post-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.f-author { font-family: var(--fancy); color: var(--gold-bright); font-size: 16px; }
/* overflow-wrap is load-bearing: a post can be one 8,000-character "word". */
.fp-body { overflow-wrap: anywhere; }
.fp-body p { margin: 0 0 10px; }
.fp-body p:last-child { margin-bottom: 0; }

.f-composer { margin: 18px 0; padding: 16px 18px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.f-composer summary { cursor: pointer; font-family: var(--fancy); color: var(--gold-bright); font-size: 17px; }
.f-composer.open > form, .f-composer[open] > form { margin-top: 14px; }
.f-field { display: block; margin-bottom: 12px; }
.f-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .6px; }
.f-composer input[type="text"], .f-composer textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  background: rgba(7,10,16,.6); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 15px; resize: vertical;
}
.f-composer input[type="text"]:focus, .f-composer textarea:focus { outline: none; border-color: var(--gold); }
.f-composer .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.f-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; flex-wrap: wrap; }

/* Leaderboards: the podium should look like a podium. A ranking table where
   first place is styled identically to fourteenth is a list, not a board. */
#lb-claimants tr.lb-top td, #lb-standings tr.lb-top td {
  background: rgba(224, 176, 74, 0.07);
  font-weight: 600;
}
#lb-claimants tr.lb-top:first-child td, #lb-standings tr.lb-top:first-child td {
  background: rgba(224, 176, 74, 0.14);
  color: #ffe9b0;
}
/* Wide tables must scroll inside themselves rather than pushing the page
   sideways — the claimants board gained two columns and phones are narrow. */
#lb-claimants, #lb-standings { overflow-x: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2
   ───────────────────────────────────────────────────────────────────────────
   Appended rather than rewritten on purpose: ~58 pages share this sheet, and
   redefining the TOKENS lifts every one of them without touching their markup.
   New components are added below; nothing above is renamed.

   The brief was "a million-dollar consultancy site". That work does not look
   expensive because it is busy — it looks expensive because it is rigorous:
   one clear hierarchy, real numbers, disciplined whitespace, drawn icons
   instead of emoji, and no decoration that isn't carrying information.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces. The old sheet had three flat colours and no sense of depth.
        A layered ramp is what lets a card read as sitting ON something. */
  --ink-900: #070a10;
  --ink-800: #0b0f17;
  --ink-700: #10161f;
  --surface-1: #141b26;
  --surface-2: #1a2331;
  --surface-3: #212c3d;

  /* ── Gold, with range. One gold cannot do headline, hairline and hover. */
  --gold-100: #fbf0cf;
  --gold-300: #f2dc9c;
  --gold-500: #e3c168;
  --gold-700: #b9922f;
  --gold-900: #6d5518;
  /* An ember accent, used sparingly — a second temperature keeps an all-gold
     page from reading as monochrome. */
  --ember: #d8703f;

  --text-strong: #eef2f8;
  --text: #c9d2df;
  --text-dim: #8b96a8;

  --hair: rgba(227, 193, 104, 0.16);
  --hair-strong: rgba(227, 193, 104, 0.34);

  /* ── Fluid type scale. Ratio ~1.25, clamped so nothing collapses on a phone
        or balloons on a 27" display. */
  --fs-xs: clamp(11px, 0.68rem + 0.1vw, 12.5px);
  --fs-sm: clamp(13px, 0.8rem + 0.1vw, 14.5px);
  --fs-base: clamp(15px, 0.93rem + 0.15vw, 17px);
  --fs-lg: clamp(17px, 1rem + 0.35vw, 20px);
  --fs-xl: clamp(21px, 1.15rem + 0.7vw, 27px);
  --fs-2xl: clamp(26px, 1.35rem + 1.3vw, 38px);
  --fs-3xl: clamp(32px, 1.5rem + 2.4vw, 56px);
  --fs-4xl: clamp(40px, 1.6rem + 4.6vw, 92px);

  /* ── 8pt spacing scale. Ad-hoc margins are why the old page had a hole
        between the hero and the pillars and none between a heading and its
        rule. */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 88px; --s10: 120px; --s11: 160px;

  --e1: 0 1px 2px rgba(0,0,0,0.4);
  --e2: 0 4px 16px rgba(0,0,0,0.45);
  --e3: 0 18px 50px rgba(0,0,0,0.55);
  --glow: 0 0 0 1px var(--hair-strong), 0 10px 40px rgba(227,193,104,0.10);

  --maxw: 1200px;      /* 1080 was cramped on anything modern */
  --measure: 66ch;     /* prose never runs wider than this */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px;
}

body { font-size: var(--fs-base); background: var(--ink-800); color: var(--text); }

/* Focus that is visible on every interactive thing, without a browser default
   outline sitting awkwardly on a rounded gold button. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-cta:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── Section rhythm ─────────────────────────────────────────────────────── */
.band { padding: var(--s10) 0; }
.band .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
.band.alt { background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); border-block: 1px solid var(--hair); }

/* Section headers: LEFT aligned, with the measure enforced. Centred paragraphs
   over a wide column are the fastest way to look like a template. */
.band-head { max-width: var(--measure); margin: 0 0 var(--s8); text-align: left; }
.band-head .rule { margin: var(--s4) 0 var(--s5); width: 64px; height: 2px;
  background: linear-gradient(90deg, var(--gold-500), transparent); }
.band-head p { color: var(--text-dim); font-size: var(--fs-lg); }
.eyebrow {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: var(--fs-xs); color: var(--gold-700); margin: 0 0 var(--s3);
}
h1, h2, h3 { color: var(--text-strong); line-height: 1.08; letter-spacing: -0.01em; }
.band-head h2 { font-family: var(--display); font-size: var(--fs-2xl); margin: 0; }

/* ── Cards with actual material ─────────────────────────────────────────── */
.card-v2 {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--e2);
  transition: transform 0.22s cubic-bezier(0.2,0.7,0.3,1), border-color 0.22s, box-shadow 0.22s;
}
.card-v2:hover { transform: translateY(-3px); border-color: var(--hair-strong); box-shadow: var(--e3); }
.card-v2 h3 { font-family: var(--display); font-size: var(--fs-lg); margin: var(--s4) 0 var(--s2); }
.card-v2 p { color: var(--text-dim); font-size: var(--fs-sm); margin: 0; line-height: 1.7; }

/* Drawn icons, not emoji. A stroked glyph in a tinted well. */
.ico-well {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, rgba(227,193,104,0.16), rgba(227,193,104,0.04));
  border: 1px solid var(--hair);
}
.ico-well svg { width: 22px; height: 22px; stroke: var(--gold-300); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Evidence row — the "show the numbers" device ───────────────────────── */
.evidence { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ev { border-left: 2px solid var(--gold-700); padding-left: var(--s4); }
.ev b {
  display: block; font-family: var(--display); font-size: var(--fs-2xl);
  color: var(--gold-300); line-height: 1; letter-spacing: -0.02em;
}
.ev span { display: block; margin-top: var(--s2); color: var(--text-dim); font-size: var(--fs-sm); }
.ev small { display: block; margin-top: var(--s1); color: var(--text-dim); opacity: 0.75; font-size: var(--fs-xs); }

/* ── Editorial split: asymmetric, not a 50/50 slab ──────────────────────── */
.split { display: grid; gap: var(--s8); align-items: center; grid-template-columns: 1.05fr 0.95fr; }
.split.flip > :first-child { order: 2; }
.split-media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hair); box-shadow: var(--e3); }
.split-media img { display: block; width: 100%; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--s6); }
  .split.flip > :first-child { order: 0; }
}

/* ── Scroll reveal. Opt-in via [data-reveal]; honours reduced motion. ────── */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.7,0.3,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Masthead v2 ─────────────────────────────────────────────────────────────
   The old hero laid a thin scrim over a raw gameplay screenshot and centred
   everything on it. Two problems, both fatal to a premium read:

   1. THE GAME'S OWN UI WAS VISIBLE IN IT — "Seats of Power", the season pill,
      keep tooltips, minimap buttons. A hero showing another interface's chrome
      instantly reads as a screenshot someone pasted in, because it is one. The
      fix is framing, not retouching: scale the backdrop up and shift it so the
      HUD (which lives at the edges) falls outside the frame, then vignette
      hard so whatever survives at the margins is crushed to black.

   2. Dead-centred text over a busy image has no anchor. An editorial column
      pinned left gives the eye somewhere to start and lets the artwork breathe
      on the right.
   ────────────────────────────────────────────────────────────────────────── */
.masthead { min-height: min(92vh, 900px); display: grid; align-items: center; }

.masthead::before {
  /* Crop past the HUD: 128% and pushed up-left so the game's own edge chrome
     sits outside the visible frame entirely. */
  transform: scale(1.28) translate(-3%, -6%);
  transform-origin: 50% 45%;
  filter: saturate(0.86) contrast(1.06) brightness(0.72);
}

.masthead::after {
  /* A real cinematic grade: a directional scrim for the text column, a floor
     gradient into the next section, and a vignette that eats the corners
     (where any surviving HUD lives). */
  background:
    linear-gradient(100deg, rgba(7,10,16,0.95) 0%, rgba(7,10,16,0.80) 34%, rgba(7,10,16,0.30) 62%, rgba(7,10,16,0.55) 100%),
    linear-gradient(180deg, rgba(7,10,16,0.85) 0%, rgba(7,10,16,0) 22%, rgba(7,10,16,0) 58%, var(--ink-800) 100%),
    radial-gradient(130% 92% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.72) 100%);
}

.mast-inner {
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 0 var(--s5); text-align: left;
}
.mast-col { max-width: 620px; }

.mast-kicker { justify-content: flex-start; color: var(--gold-500); }
.mast-kicker::before { display: none; }   /* one flourish, not a pair around centred text */

.masthead h1 {
  font-size: var(--fs-4xl); letter-spacing: -0.02em; line-height: 0.92;
  text-shadow: 0 2px 40px rgba(0,0,0,0.85);
}
.mast-sub {
  margin: var(--s5) 0 var(--s6); max-width: 33rem;
  font-size: var(--fs-lg); line-height: 1.6; color: #dbe3ee;
}
.mast-cta { justify-content: flex-start; gap: var(--s3); }
.mast-pop, .mast-note { justify-content: flex-start; text-align: left; }
.mast-pop { margin-top: var(--s6); }
.mast-note { max-width: 34rem; }

/* A trust row under the fold-line: the three claims that actually decide
   whether someone clicks play, stated as facts rather than adjectives. */
.mast-trust {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid rgba(227,193,104,0.18);
  max-width: 40rem;
}
.mast-trust div { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: #c3ccd9; }
.mast-trust svg { width: 16px; height: 16px; stroke: var(--gold-500); fill: none; stroke-width: 1.6; flex: none; }

@media (max-width: 720px) {
  .masthead { min-height: 88vh; }
  .masthead::before { transform: scale(1.5) translate(-2%, -4%); }
  .masthead::after {
    background:
      linear-gradient(180deg, rgba(7,10,16,0.72) 0%, rgba(7,10,16,0.86) 45%, var(--ink-800) 100%),
      radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
  }
  .mast-trust { gap: var(--s3); }
}

/* ── Card icons now hold drawn glyphs, not emoji ─────────────────────────── */
.card .ico {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--gold-300);
  background: radial-gradient(120% 120% at 30% 20%, rgba(227,193,104,0.15), rgba(227,193,104,0.035));
  border: 1px solid var(--hair);
  /* The redesign moved card icons to inline SVG and zeroed the font size to
   * kill the leftover emoji line-box. Only 15 cards were ever converted — the
   * other 90 across the site still carry an emoji, and this rule was rendering
   * every one of them as an empty box. Zero the font ONLY where there is
   * actually an SVG to show instead. */
  font-size: 22px; line-height: 1;
  transition: border-color 0.2s, transform 0.2s;
}
.card .ico:has(svg) { font-size: 0; }
.card .ico svg { width: 21px; height: 21px; }
.card:hover .ico { border-color: var(--hair-strong); transform: translateY(-1px); }

/* Cards as links need the material and the lift too. */
a.card { display: block; text-decoration: none; }
a.card:hover { text-decoration: none; }

/* ── Nav: condense on scroll so the hero owns the first screen ───────────── */
.nav { transition: padding 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; }
.nav.is-scrolled {
  background: linear-gradient(180deg, rgba(7,10,16,0.97), rgba(7,10,16,0.90));
  box-shadow: var(--e2);
}
.nav.is-scrolled .nav-inner { padding-block: var(--s2); }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px;
  background: var(--gold-500); transition: right 0.25s cubic-bezier(0.2,0.7,0.3,1);
}
.nav-links a:hover::after { right: 0; }
.nav-links a.nav-cta::after { display: none; }

/* ── Prose measure. Long body text at full container width is unreadable and
      is the other half of why the old page felt like a template. ─────────── */
.band p, .card p { max-width: var(--measure); }
.statstrip { max-width: none; }

/* ── The hero now uses a purpose-shot plate ──────────────────────────────────
   img/hero-plate.jpg is captured from the live game with photo-mode on and
   every DOM overlay removed — no HUD, no tooltips, no build ribbon. That is
   why the aggressive 1.28x crop above is no longer needed: there is nothing
   to crop past. A gentle scale is kept only to give the drift room to move
   without exposing an edge. */
.masthead::before {
  background: url("img/hero-plate.jpg") center 38%/cover no-repeat;
  transform: scale(1.06);
  transform-origin: 55% 40%;
  filter: saturate(0.92) contrast(1.05) brightness(0.78);
  animation: heroDrift 46s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.2%, -1.6%); }
}
@media (prefers-reduced-motion: reduce) {
  .masthead::before { animation: none; }
}
@media (max-width: 720px) {
  /* Portrait needs a tighter read on the keeps rather than the empty sward. */
  .masthead::before { background-position: 60% 30%; transform: scale(1.35); animation: none; }
}

/* The masthead is a grid whose single track was AUTO-sized, so
   `justify-content: center` centred the track itself — which is why the
   editorial column kept floating mid-canvas no matter what margin the inner
   wrapper was given. Make the track fill the viewport and the container's own
   max-width + auto margins do the centring, leaving the column pinned to the
   container's left edge where it belongs. */
.masthead { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.mast-inner { margin-inline: auto; }

/* The trust row is a footnote to the whole hero, not to the text column, so it
   may run wider than the 620px measure — which stops the third item dropping
   to a line of its own. */
.mast-trust { max-width: 52rem; column-gap: var(--s6); }

/* ═══════════════════════════════════════════════════════════════════════════
   ANSWER BLOCKS & GUIDE FIGURES
   ───────────────────────────────────────────────────────────────────────────
   Every guide now opens with a short, self-contained Q&A pair-set that mirrors
   its FAQPage schema exactly. Two reasons it is VISIBLE and not schema-only:
   an answer block that disagrees with the page it sits on is a spam signal, and
   a reader who arrived from a search for "how long to max a keep" deserves the
   number above the fold rather than four sections down.
   ═══════════════════════════════════════════════════════════════════════════ */

.quick-answers {
  margin: var(--s6, 24px) 0 var(--s7, 32px);
  padding: var(--s5, 20px) var(--s6, 24px);
  background: linear-gradient(180deg, var(--surface-2, #1a2331), var(--surface-1, #141b26));
  border: 1px solid var(--hair, rgba(227,193,104,.16));
  border-left: 3px solid var(--gold-700, #b9922f);
  border-radius: 12px;
}
.quick-answers > h2 {
  margin: 0 0 var(--s4, 16px);
  font-size: var(--fs-lg, 1.05rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-300, #f2dc9c);
  border: 0;
  padding: 0;
}
.qa { margin: 0; }
.qa dt {
  font-weight: 700;
  color: var(--text-strong, #eef2f8);
  margin-top: var(--s4, 16px);
}
.qa dt:first-of-type { margin-top: 0; }
.qa dd {
  margin: 6px 0 0;
  color: var(--text, #c9d2df);
  max-width: var(--measure, 66ch);
}

/* A figure is content, not decoration: it keeps its aspect box so the page
   never reflows as it loads, and it never runs wider than the column. */
.guide-figure {
  margin: var(--s6, 24px) 0;
  border: 1px solid var(--hair, rgba(227,193,104,.16));
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-800, #0b0f17);
}
.guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.guide-figure figcaption {
  padding: 10px var(--s4, 16px);
  font-size: var(--fs-sm, .86rem);
  color: var(--text-dim, #8b96a8);
  border-top: 1px solid var(--hair, rgba(227,193,104,.16));
}

/* The "Keep reading" block. Each row is a link plus the reason to follow it —
   a bare list of blue links tells a reader nothing about which one answers
   their question, and reads to a crawler exactly like a link farm. */
.related {
  margin: var(--s8, 40px) 0 var(--s4, 16px);
  padding-top: var(--s5, 20px);
  border-top: 1px solid var(--hair, rgba(227,193,104,.16));
}
.related > h2 {
  margin: 0 0 var(--s3, 12px);
  font-size: var(--fs-sm, .86rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim, #8b96a8);
  border: 0;
  padding: 0;
}
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.related li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.related li:last-child { border-bottom: 0; }
.related li a { font-weight: 600; color: var(--gold-300, #f2dc9c); text-decoration: none; }
.related li a:hover { text-decoration: underline; }
.related li span { color: var(--text-dim, #8b96a8); font-size: var(--fs-sm, .86rem); }

/* Wide tables must scroll inside themselves, never push the page.
   The guides now carry real data tables — a 4-column caravan schedule, the
   terrain table, the garrison ladder — and at 390px the widest of them shoved
   the whole document 41px sideways. Making the table its own scroll container
   is the fix that does not require wrapping every table in markup, and it
   keeps the header row aligned with its columns. */
@media (max-width: 720px) {
  .prose table,
  .quick-answers + table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: var(--fs-sm, .86rem);
  }
  .prose table th,
  .prose table td { white-space: nowrap; }

  /* A clipped table with no affordance just looks broken — the reader cannot
     tell there is more to the right. This right-edge shade rides the scroll
     (background-attachment: local) so it fades out exactly when the reader
     reaches the end, and disappears entirely on tables that already fit. */
  .prose table {
    background:
      linear-gradient(to left, var(--ink-800, #0b0f17), rgba(11, 15, 23, 0)) right center / 28px 100% no-repeat local;
  }
}