@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — edit here to retheme the entire site.
   Every color, ease, font, and layout value flows from this
   block; nothing is hardcoded elsewhere.

   CONTRAST QUICK-TUNE:
   ┌─────────────────────────────────────────────────────────┐
   │  --text          #F0E6D2   Primary body & headlines     │
   │  --text-sub      #C4B998   Secondary labels, nav links  │
   │  --text-muted    #a09278   Captions, metadata, dimmed   │
   │  --gold-dim      #4a3a1e   Hairlines, scrollbar track   │
   │                                                         │
   │  To make the site brighter, raise --text-muted toward   │
   │  --text-sub (#C4B998). To darken captions, lower it     │
   │  toward --gold (#937341). Never go below #7a7060 —      │
   │  that value fails readability on the dark background.   │
   └─────────────────────────────────────────────────────────┘
   ═══════════════════════════════════════════════════════════ */
:root {

  /* ── Backgrounds ──────────────────────────────────────── */
  --bg:           #0A0A0C;          /* page background           */
  --bg2:          #111115;          /* card backgrounds          */
  --bg3:          #17171d;          /* card hover state          */
  --bg-glass:     rgba(4,4,6,0.97); /* nav drawer / overlays     */
  --bg-scrim:     rgba(4,4,6,0.72); /* page / search backdrop    */
  --surface:      rgba(17,17,21,0.9);

  /* ── Gold scale ───────────────────────────────────────── */
  --gold:         #ab8551;  /* mid gold — eyebrows, dim labels  */
  --gold-light:   #C4B998;  /* primary gold — buttons, lines    */
  --gold-bright:  #F0E6D2;  /* brightest — headlines, key vals  */
  --gold-dim:     #4a3a1e;  /* muted dividers, scrollbar track  */

  /* ── Text ─────────────────────────────────────────────── */
  --text:         #F0E6D2;
  --text-muted:   #b6a886;   /* raised for legibility — edit this one value to tune all caption contrast */
  --text-sub:     #C4B998;

  /* ── Borders ──────────────────────────────────────────── */
  --border:       rgba(147,115,65,0.2);
  --border-hover: rgba(196,185,152,0.6);
  --border-faint: rgba(147,115,65,0.12);

  /* ── Nation accents ───────────────────────────────────── */
  --nation-britannia: #7ab8e8;              /* cold blue         */
  --nation-frysia:    #e8806a;              /* warm rust         */
  --nation-aurelia:   #C4B998;              /* gold              */
  --nation-arcadia:   #C4B998;              /* gold              */
  --nation-drakmoor:  oklch(52% 0.07 148);  /* muted moss        */
  --nation-veldarun:  oklch(57% 0.09 168);  /* muted teal (legacy alias) */
  --nation-icegaard:  oklch(60% 0.07 240);  /* cold ice blue     */
  --nation-almania:   oklch(58% 0.06 250);  /* rational steel    */
  --nation-atlantia:  oklch(54% 0.08 210);  /* deep sea teal     */
  --nation-solmara:   oklch(60% 0.09 70);   /* warm festival sun */
  --nation-taria:     oklch(55% 0.06 312);  /* bone ash violet   */
  --nation-wintever:  oklch(62% 0.06 200);  /* pale frost cyan   */
  --nation-twelfth:   oklch(50% 0.09 300);  /* abyssal violet    */

  /* ── Semantic accents (reuse nation tones) ────────────── */
  --accent-blue:   var(--nation-britannia); /* story / production / factions / mentor */
  --accent-rust:   var(--nation-frysia);    /* events / conflict / enemy              */
  --accent-purple: oklch(62% 0.09 295);     /* powers / artefacts                     */
  --accent-moss:   var(--nation-drakmoor);  /* locations                              */
  --status-dev:    #b8845a;                 /* "In Development" status dot            */

  /* ── Gradients ────────────────────────────────────────── */
  --grad-gold: linear-gradient(135deg, #F0E6D2 0%, #C4B998 40%, #937341 100%);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.2,0,0.2,1); /* standard decelerate  */
  --ease-fill: cubic-bezier(0.7,0,0.3,1); /* CTA fill slide        */
  --dur-fast:  0.2s;
  --dur-med:   0.45s;
  --dur-slow:  0.8s;

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Cinzel', serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width: 1440px;
  --page-pad:  56px;
  --nav-h:     56px;
  --mb-rail:   60px;   /* width of the solid left-edge wordmark rail (shown ≥900px) */

  /* ── Glows ────────────────────────────────────────────── */
  --glow-gold: 0 0 80px rgba(196,185,152,0.18);
  --glow-soft: 0 0 60px rgba(196,185,152,0.12);
}

/* ─────────────────────────────────────────────────────
   RESET
───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────
   PAGE SHELL — reserve the left wordmark rail
   The fixed, opaque rail (components/millennium-border) sits on the left edge
   at ≥901px. Shift the page body + the fixed nav over by its width (--mb-rail,
   published by that component) so all content sits BESIDE the rail, never
   beneath it. Layouts that render the rail tag <body class="has-rail">.
   Mobile (≤900px) hides the rail, so no offset is applied there.
───────────────────────────────────────────────────── */
@media (min-width: 901px) {
  body.has-rail { padding-left: var(--mb-rail); }
  body.has-rail .site-nav { left: var(--mb-rail); }
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #050506; }
::-webkit-scrollbar-thumb { background: var(--gold-dim); }

/* ─────────────────────────────────────────────────────
   ORNAMENTAL DIVIDER
───────────────────────────────────────────────────── */
.ornament-divider {
  display: block;
  width: 360px;
  max-width: 90%;
  height: auto;
  margin: 0 auto;
  opacity: 0.75;
  content: url('/assets/divider.png');
}
/* Usage: <img class="ornament-divider" src="assets/divider.png" alt=""> */

/* ─────────────────────────────────────────────────────
   NAV
───────────────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px;
  height: 66px;
  background: linear-gradient(to bottom, var(--bg-glass) 0%, transparent 100%);
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease, height 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-nav.scrolled {
  height: 58px;
  background: rgba(4,4,6,0.96);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom-color: var(--border);
}
/* When a mega panel is open, give the bar a solid backdrop for legibility. */
.site-nav.mega-open {
  background: rgba(4,4,6,0.97);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom-color: transparent;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo svg { width: 30px; height: 30px; }
.nav-logo-img { width: 30px; height: 30px; display: block; }
.nav-links { display: flex; gap: 42px; list-style: none; align-items: center; }
.nav-links > li { position: relative; }
.nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-light); text-decoration: none;
  transition: color 0.2s;
  position: relative; padding-bottom: 3px; display: inline-block;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--gold-light);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2,0,0.2,1);
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a:hover::after { transform: scaleX(1); background: var(--gold-light); }
.nav-links a.active { color: var(--gold-bright); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-links li.is-open > a { color: var(--gold-bright); }
.nav-links li.is-open > a::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 22px; }
.nav-search {
  background: none; border: none; cursor: pointer;
  color: var(--text-sub); transition: color 0.2s; padding: 4px;
}
.nav-search:hover { color: var(--gold-bright); }

/* ─────────────────────────────────────────────────────
   MEGA-MENU (full-width hover panels under the nav)
───────────────────────────────────────────────────── */
.nav-mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(6,6,9,0.985) 0%, rgba(6,6,9,0.96) 100%);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 32px 64px -28px rgba(0,0,0,0.85);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
}
.site-nav.mega-open .nav-mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* Hairline accent at the top edge of the open panel. */
.nav-mega::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,185,152,0.4), transparent);
}
.nav-mega-panel { display: none; }
.nav-mega-panel.active { display: block; }
.nav-mega-inner {
  display: grid; grid-template-columns: 252px 1fr; gap: 48px;
  max-width: 1320px; margin: 0 auto;
  padding: 40px 56px 46px;
  max-height: min(72vh, 560px); overflow-y: auto;
}
.nav-mega-aside { border-right: 1px solid var(--border); padding-right: 40px; }
.nav-mega-eyebrow {
  font-family: 'Cinzel', serif; font-size: 17px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-bright); display: block; margin-bottom: 14px;
}
.nav-mega-intro {
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.7;
  color: var(--text-sub); margin-bottom: 22px; max-width: 30ch;
}
.nav-mega-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-light); text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
.nav-mega-cta svg { transition: transform 0.2s; }
.nav-mega-cta:hover { color: var(--gold-bright); gap: 12px; }
.nav-mega-cta:hover svg { transform: translateX(2px); }

/* Shared monogram fallback when a card has no art (accent-tinted Cinzel initial). */
.nm-mono {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 30px;
  color: color-mix(in oklab, var(--na, var(--card-accent, var(--gold-light))) 70%, var(--gold-bright));
  opacity: 0.55;
}

/* ── Characters: the Souls roster (accordion portraits, like the home .v2-lens) ── */
.nm-roster { display: flex; gap: 8px; height: 304px; }
.nm-soul {
  --na: var(--gold-light);
  position: relative; flex: 1 1 0%; min-width: 0; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border); text-decoration: none;
  transition: flex-grow 0.7s var(--ease-out), min-width 0.7s var(--ease-out), border-color 0.3s;
}
.nm-soul:hover, .nm-soul:focus-visible {
  flex-grow: 4; min-width: min(264px, 32vw); outline: none;
  border-color: color-mix(in oklab, var(--na) 55%, transparent);
}
.nm-soul-img {
  position: absolute; inset: 0; background-size: cover; background-position: top center;
  display: flex; align-items: center; justify-content: center;
  filter: brightness(0.6) contrast(1.05) saturate(0.78) grayscale(0.3);
  transition: filter 0.8s ease, transform 0.9s var(--ease-out);
}
.nm-soul:hover .nm-soul-img, .nm-soul:focus-visible .nm-soul-img {
  filter: brightness(0.95) contrast(1.08) saturate(1) grayscale(0); transform: scale(1.04);
}
.nm-soul::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4,4,6,0.94) 0%, rgba(4,4,6,0.3) 42%, transparent 66%);
}
.nm-soul-v {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  writing-mode: vertical-rl; z-index: 2; white-space: nowrap;
  font-family: 'Cinzel', serif; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-light);
  opacity: 0.85; transition: opacity 0.4s ease;
}
.nm-soul:hover .nm-soul-v, .nm-soul:focus-visible .nm-soul-v { opacity: 0; }
.nm-soul-meta {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease 0.18s, transform 0.6s var(--ease-out) 0.18s;
}
.nm-soul:hover .nm-soul-meta, .nm-soul:focus-visible .nm-soul-meta { opacity: 1; transform: none; }
.nm-soul-nation {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px; white-space: nowrap;
  font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--na, var(--gold-light));
}
.nm-soul-nation::after {
  content: ''; flex: 1; height: 1px; opacity: 0.5;
  background: linear-gradient(to right, var(--na, var(--gold-dim)), transparent);
}
.nm-soul-name {
  display: block; font-family: 'Cinzel', serif; font-size: 17px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright);
  line-height: 1.05; text-wrap: balance;
}
.nm-soul-title {
  display: block; margin-top: 6px; font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-style: italic; color: var(--text-sub);
}
.nm-soul-open {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 11px;
  font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold-light);
}
.nm-soul-open svg { transition: transform 0.2s; }
.nm-soul:hover .nm-soul-open svg, .nm-soul:focus-visible .nm-soul-open svg { transform: translateX(3px); }

/* ── Stories / World / Lore: cinematic poster tiles ── */
.nm-grid { display: grid; gap: 16px; align-content: start; }
.nm-grid--stories { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.nm-grid--world   { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
.nm-grid--lore    { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.nm-card {
  --card-accent: var(--gold-light);
  position: relative; display: block; overflow: hidden; text-decoration: none;
  background: var(--bg2); border: 1px solid var(--border);
  transition: border-color 0.3s, transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.nm-grid--stories .nm-card { aspect-ratio: 16 / 9; }
.nm-grid--world   .nm-card { aspect-ratio: 3 / 4; }
.nm-grid--lore    .nm-card { aspect-ratio: 5 / 3; }
.nm-card:hover {
  border-color: color-mix(in oklab, var(--card-accent) 60%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 26px 46px -26px rgba(0,0,0,0.9);
}
.nm-card-art {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center top;
  background-color: color-mix(in oklab, var(--card-accent) 16%, var(--bg2));
  filter: brightness(0.72) contrast(1.04) saturate(0.9);
  transition: transform 0.9s var(--ease-out), filter 0.6s ease;
}
.nm-card:hover .nm-card-art { transform: scale(1.06); filter: brightness(0.92) contrast(1.1) saturate(1); }
.nm-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(4,4,6,0.95) 0%, rgba(4,4,6,0.58) 28%, rgba(4,4,6,0.12) 56%, transparent 78%);
}
/* corner brackets — draw in on hover (DESIGN_SYSTEM §6.3) */
.nm-card-corners { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nm-card-corners > span {
  position: absolute; width: 12px; height: 12px;
  border: 1px solid color-mix(in oklab, var(--card-accent) 70%, var(--gold-light));
  opacity: 0; transition: opacity 0.4s ease;
}
.nm-card:hover .nm-card-corners > span { opacity: 0.7; }
.nm-card-corners > span:nth-child(1) { top: 11px; left: 11px; border-right: none; border-bottom: none; }
.nm-card-corners > span:nth-child(2) { top: 11px; right: 11px; border-left: none; border-bottom: none; }
.nm-card-corners > span:nth-child(3) { bottom: 11px; left: 11px; border-right: none; border-top: none; }
.nm-card-corners > span:nth-child(4) { bottom: 11px; right: 11px; border-left: none; border-top: none; }

.nm-card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 15px 17px 16px; }
.nm-card-eyebrow {
  display: block; margin-bottom: 9px;
  font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--card-accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm-card-eyebrow::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 18px; height: 1px; margin-right: 9px; background: var(--card-accent);
  transition: width 0.4s var(--ease-out);
}
.nm-card:hover .nm-card-eyebrow::before { width: 30px; }
.nm-card-name {
  display: block; font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(16px, 1.5vw, 22px); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gold-bright); line-height: 1.04; text-wrap: balance;
  text-shadow: 0 3px 22px rgba(0,0,0,0.7);
}
.nm-card-name em { font-style: italic; font-weight: 400; color: var(--gold-light); }
.nm-card-sub {
  margin-top: 8px; font-family: 'Inter', sans-serif; font-style: italic;
  font-size: 11.5px; line-height: 1.5; color: var(--gold-light); opacity: 0.82;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nm-card-open {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-bright);
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s;
}
.nm-card:hover .nm-card-open { opacity: 1; transform: none; }
.nm-card-open svg { transition: transform 0.25s; }
.nm-card:hover .nm-card-open svg { transform: translateX(4px); }

@media (max-width: 1100px) {
  .nav-mega-inner { grid-template-columns: 1fr; gap: 24px; padding: 30px 40px 36px; }
  .nav-mega-aside { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 22px; }
  .nav-mega-intro { max-width: none; }
  .nm-roster { height: 268px; }
  .nm-grid--stories { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .nm-grid--world   { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .nm-soul, .nm-soul-img, .nm-soul-meta, .nm-soul-v,
  .nm-card, .nm-card-art, .nm-card-open, .nm-card-eyebrow::before { transition: none; }
  .nm-card:hover .nm-card-art, .nm-soul:hover .nm-soul-img { transform: none; }
  .nm-card-open { opacity: 1; transform: none; }
}

/* ── Hamburger (mobile) ── */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 4px; width: 32px; height: 32px;
}
.nav-hamburger span {
  display: block; width: 20px; height: 1px;
  background: var(--gold-light);
  transition: transform 0.28s var(--ease-out),
              opacity 0.2s, width 0.28s;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Drawer ── */
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 500;
  width: 280px; max-width: 88vw;
  background: var(--bg-glass);
  border-left: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(120%);
  display: flex; flex-direction: column;
  padding: 80px 40px 48px;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease-out);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-links {
  display: flex; flex-direction: column; gap: 0; list-style: none;
  flex: 1;
}
.nav-drawer-links li { border-bottom: 1px solid var(--border); }
.nav-drawer-links a {
  display: block; padding: 18px 0;
  font-family: 'Cinzel', serif; font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-sub); text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}
.nav-drawer-links a:hover,
.nav-drawer-links a.active { color: var(--gold-bright); padding-left: 8px; }
.nav-drawer-close {
  position: absolute; top: 20px; right: 20px;
  background: none; border: none; cursor: pointer;
  color: var(--text-sub); padding: 8px;
  transition: color 0.2s;
}
.nav-drawer-close:hover { color: var(--gold-bright); }
.nav-drawer-footer {
  font-family: 'Cinzel', serif; font-size: 8px;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--text-muted); padding-top: 24px;
}

/* ── Backdrop ── */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 499;
  background: var(--bg-scrim);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── Mobile breakpoint ── */
@media (max-width: 860px) {
  .site-nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-mega { display: none; }
  .nav-hamburger { display: flex; }
}

/* ─────────────────────────────────────────────────────
   PAGE TITLE
───────────────────────────────────────────────────── */
.page-title-block {
  text-align: center;
  padding: 110px 24px 40px;
}
.page-title-block .logo-mark {
  display: block; width: 28px; margin: 0 auto 18px; opacity: 0.7;
}
.page-title-block h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 0 60px rgba(196,185,152,0.2);
  line-height: 1;
}
.page-title-block .sub {
  margin-top: 14px; font-size: 12px;
  color: var(--text-sub); letter-spacing: 0.06em; line-height: 1.8;
}

/* ─────────────────────────────────────────────────────
   SECTION LABEL
───────────────────────────────────────────────────── */
.section-label {
  font-family: 'Cinzel', serif;
  font-size: 9px; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────── */
.btn-gold {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bg); background: var(--gold-light);
  border: none; padding: 12px 30px;
  cursor: pointer; text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.btn-gold:hover { background: var(--gold-bright); transform: translateY(-1px); }

.btn-outline {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(196,185,152,0.35);
  background: transparent; padding: 12px 30px;
  cursor: pointer; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--gold-light); color: var(--gold-bright); }

/* ─────────────────────────────────────────────────────
   BADGE
───────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-family: 'Cinzel', serif; font-size: 8px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 9px; border: 1px solid var(--border); color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid rgba(147,115,65,0.15);
  padding: 48px 52px 40px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center;
  margin-top: 80px;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(196,185,152,0.3), transparent);
}
.footer-logo-mark {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.footer-logo-mark svg {
  opacity: 0.55;
  filter: drop-shadow(0 0 8px rgba(147,115,65,0.3));
  transition: opacity 0.3s;
}
.footer-logo-mark:hover svg { opacity: 0.85; }
.footer-brand { font-family: 'Cinzel', serif; font-size: 10px; color: var(--text-muted); }
.footer-brand strong {
  display: block; font-size: 12px; letter-spacing: 0.25em;
  color: var(--gold-light); margin-bottom: 5px;
}
.footer-links { display: flex; gap: 28px; list-style: none; justify-content: center; }
.footer-links a {
  font-family: 'Cinzel', serif; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-sub); text-decoration: none; transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold-bright); }
.footer-right { text-align: right; font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; }

@media (max-width: 700px) {
  .site-footer { grid-template-columns: 1fr; text-align: center; padding: 36px 24px; }
  .footer-logo-mark { align-items: center; }
  .footer-right { text-align: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; gap: 16px; }
  .site-nav { padding: 0 20px; }
  .nav-links { gap: 18px; }
}

/* ─────────────────────────────────────────────────────
   SHARED ENTRANCE ANIMATIONS
───────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.055); }
}

/* ─────────────────────────────────────────────────────
   WORDMARK (main logo image)
   invert() makes the dark metallic text light; sepia
   tints it toward the site's gold palette.
───────────────────────────────────────────────────── */
.hero-wordmark {
  display: block;
  width: clamp(320px, 62vw, 720px);
  margin: 0 auto 22px;
  filter: invert(1) sepia(0.35) saturate(0.85) brightness(0.92);
  opacity: 0.95;
  pointer-events: none;
}
.footer-wordmark {
  display: block;
  width: 200px;
  filter: invert(1) sepia(0.3) saturate(0.7) brightness(0.75);
  opacity: 0.75;
  transition: opacity 0.3s, filter 0.3s;
  margin-bottom: 6px;
}
.footer-logo-mark:hover .footer-wordmark {
  opacity: 1;
  filter: invert(1) sepia(0.4) saturate(0.9) brightness(0.88);
}

/* ─────────────────────────────────────────────────────
   CARD MICRO-INTERACTIONS
───────────────────────────────────────────────────── */
/* Shimmer sweep on char-tile & story-tile */
.char-tile .img-wrap,
.story-tile { isolation: isolate; }

.story-tile .img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(196,185,152,0.06) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: none;
  z-index: 4; pointer-events: none;
}
.story-tile:hover .img::after {
  transform: translateX(120%);
  transition: transform 0.9s cubic-bezier(0.2,0,0.2,1);
}

/* Nation tile lift */
.nation-tile {
  transition: background 0.3s, transform 0.3s cubic-bezier(0.2,0,0.2,1),
              box-shadow 0.3s;
}
.nation-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Chronicle event accent reveal */
.cs-event-bar {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2,0,0.2,1);
}
.cs-event:hover .cs-event-bar { transform: scaleX(1); }

/* Scroll-reveal atom */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.65s var(--ease-out),
              transform 0.65s var(--ease-out);
}
.reveal.vis { opacity: 1; transform: none; }

/* Reveal group — stagger direct .reveal-item children when parent enters view */
.reveal-group > .reveal-item {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.65s var(--ease-out),
              transform 0.65s var(--ease-out);
}
.reveal-group.vis > .reveal-item:nth-child(1) { transition-delay: 0s; }
.reveal-group.vis > .reveal-item:nth-child(2) { transition-delay: 0.07s; }
.reveal-group.vis > .reveal-item:nth-child(3) { transition-delay: 0.14s; }
.reveal-group.vis > .reveal-item:nth-child(4) { transition-delay: 0.21s; }
.reveal-group.vis > .reveal-item:nth-child(5) { transition-delay: 0.28s; }
.reveal-group.vis > .reveal-item:nth-child(n+6) { transition-delay: 0.32s; }
.reveal-group.vis > .reveal-item { opacity: 1; transform: none; }