/* ======================================================================
   PROJECT HOOF — base.css
   Layout skeleton for cinematic fantasy-MMO landing.
   All visual identity lives in the variant CSS files.
   ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { min-height: 100svh; overflow-x: hidden; }
img, picture, svg { display: block; max-width: 100%; }
button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em, i { font-style: normal; }   /* variants opt-in to italics */

:root {
  --max:        1280px;
  --max-narrow: 920px;
  --pad-i:      clamp(1rem, 4vw, 3rem);
  --nav-h:      72px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; padding: .5rem 1rem; background: gold; color: #000; z-index: 200; }

/* ---- Navigation ---- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: .85rem var(--pad-i);
  height: var(--nav-h);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; }
.nav-primary { display: flex; gap: clamp(1rem, 2.5vw, 2rem); justify-content: flex-start; }
.nav-right   { display: flex; gap: .75rem; align-items: center; justify-self: end; }

.style-switcher { display: flex; gap: 0; padding: 4px; }
.style-switcher button, .style-switcher a {
  padding: .5rem 1rem; font-size: .75rem; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: background .18s, color .18s;
}

.cta-discord {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.1rem; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  transition: transform .15s, box-shadow .2s;
}

/* ---- Hero (cinematic full-bleed) ----
   Layout: top band (eyebrow), middle empty (banner art shines), bottom band (CTAs + stats). */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(1rem, 2vw, 1.5rem)) var(--pad-i) clamp(2rem, 5vw, 3.5rem);
}
.hero-bg-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  z-index: 0;
}
/* 3D hero scene canvas (replaces the static banner image). */
.hero-bg-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  background: #050a14;        /* shown until WebGL starts rendering */
}
#hero-loader {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at 50% 50%, #1b2a4a 0%, #050a14 70%);
  color: var(--gold-2, #d9b04a);
  font: 600 11px/1.4 'Manrope', system-ui, sans-serif;
  letter-spacing: .3em; text-transform: uppercase;
  transition: opacity .6s ease;
}
#hero-loader.hide { opacity: 0; pointer-events: none; }
#hero-loader .hl-bar {
  width: 240px; height: 2px;
  background: rgba(244,200,75,.18); overflow: hidden;
}
#hero-loader .hl-bar > div {
  height: 100%; width: 0;
  background: var(--gold, #f4c84b);
  transition: width .2s ease;
}
#hero-loader .hl-pct { font-size: 10px; opacity: .6; letter-spacing: .25em; }
.hero-overlay, .hero-vignette, .hero-frame {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.hero-eyebrow-top {
  position: relative; z-index: 2;
  display: inline-flex; align-self: center; align-items: center; gap: .9rem;
  font-size: .8rem; letter-spacing: .25em; text-transform: uppercase;
  padding: .55rem 1.2rem;
  margin-bottom: auto;       /* pushes everything else to the bottom */
}
.eyebrow-rule { display: block; width: 60px; height: 1px; background: currentColor; opacity: .55; }
.hero-content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin-inline: auto; margin-top: auto;
  /* Clearance for the scroll-cue ("Scroll ↓") pinned at bottom: 1.25rem. */
  margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
  display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 3vw, 2rem);
}
.hero-ctas { display: inline-flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.hero-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
}
.hero-stats li { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 1.25rem;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
  font-size: .68rem; letter-spacing: .25em; text-transform: uppercase;
  z-index: 3; opacity: .8;
}
.hero-scroll svg { animation: bounce 1.8s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---- Section common ---- */
.section-padded { padding: clamp(4rem, 9vw, 8rem) var(--pad-i); }
.section-padded > .section-frame,
.section-padded > .section-head,
.section-padded > .card-grid,
.section-padded > .timeline,
.section-padded > .dashboard { max-width: var(--max); margin-inline: auto; }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.centered { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.kicker { display: inline-block; }
.ornament { color: currentColor; opacity: .55; margin-top: .5rem; }

/* ---- Who ---- */
.who-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); max-width: var(--max-narrow); margin-inline: auto; }
@media (max-width: 800px) { .who-body { grid-template-columns: 1fr; } }

/* ---- Toolkit grid ---- */
.card-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
.card { position: relative; display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.5rem, 2vw, 2rem); min-width: 0; }
.card-num { position: absolute; top: 1.25rem; right: 1.5rem; line-height: 1; }
.card-glyph { width: 36px; height: 36px; }
.card-glyph svg { width: 100%; height: 100%; }
.card .badge { align-self: flex-start; margin-top: auto; }

/* ---- Cinematic plates (full-bleed mascot sections) ---- */
.plate {
  position: relative;
  min-height: clamp(420px, 75vh, 680px);
  display: grid; align-items: center;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) var(--pad-i);
}
.plate-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  /* Scroll-driven parallax — Chrome 115+, Edge 115+, Safari TP. Falls back to static. */
  transform: scale(1.12);
  animation: plate-parallax linear;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}
@keyframes plate-parallax {
  from { transform: translateY(-7%) scale(1.12); }
  to   { transform: translateY(7%)  scale(1.12); }
}
/* Hero 3D canvas: no CSS parallax (the scene has its own camera parallax). */

/* =========================================================
   Hoof Contract — interactive parchment beside the manifesto
   ========================================================= */
/* Section becomes a 2-col layout: manifesto column + parchment column.
   Capped at a wider max-width than the rest of the site (1480 vs 1280) so
   the two columns have presence without sprawling on ultra-wide screens. */
.who-with-pact .who-pact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* gap = 3vw, мин 2rem, макс 5rem — растёт с шириной вьюпорта */
  gap: clamp(2rem, 3vw, 5rem);
  align-items: start;
  width: 100%;
  /* Cap в rem чтобы шкала за font-size. На очень широких экранах не
     растягивается до бесконечности, на узких съёживается по vw. */
  max-width: min(95vw, 100rem);
  margin-inline: auto;
}
.who-manifesto { display: flex; flex-direction: column; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.who-manifesto-body { display: flex; flex-direction: column; gap: 1rem; }

.contract {
  position: relative;
  margin: 0;
}

.parchment {
  position: relative;
  width: 100%;
  /* Pre-cropped parchment PNG already includes torn/burned edges, so we just
     paint it as a background and let its native frame show. Padding pulls
     content inward off the charred margin. */
  aspect-ratio: 1028 / 768;          /* matches the source image */
  padding: clamp(3.5rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem) clamp(5rem, 9vw, 7rem);
  color: #2c1d0a;
  background: url('/items/parchment.png?v=44') center/100% 100% no-repeat;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.55)) drop-shadow(0 8px 12px rgba(0,0,0,.35));
  /* Custom quill cursor when hovering over the parchment. */
  cursor: url('/items/quill.svg?v=44') 4 36, text;
}

/* ---- Pick-up wax seal stand ----
   Sits beside the parchment. Click to pick up (cursor follows), then click
   on the parchment to impress a stamp. */
.contract {
  display: flex; flex-direction: column;
  overflow: visible;
}
.parchment { overflow: visible; }
.seal-stand {
  position: relative;
  align-self: flex-end;
  margin-top: 1.25rem;
  margin-right: clamp(.5rem, 2vw, 1.25rem);
  width: 96px;
  display: flex; flex-direction: column; align-items: center;
  gap: .4rem;
  z-index: 5;
}
@media (max-width: 880px) {
  .seal-stand { align-self: center; margin-right: 0; }
}
.seal-button {
  appearance: none; border: 0; background: transparent;
  cursor: grab;
  padding: 6px;
  border-radius: 50%;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
  transition: transform .15s ease, filter .15s ease;
}
.seal-button:hover { transform: translateY(-2px) rotate(-8deg); filter: drop-shadow(0 10px 18px rgba(244,200,75,.5)); }
.seal-button[aria-pressed="true"] { opacity: .25; cursor: grabbing; }
.seal-svg { display: block; }
.seal-hint {
  font: 600 9px/1.3 var(--font-body, system-ui), sans-serif;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(244,200,75,.6);
  text-align: center;
  max-width: 140px;
}
.seal-floating {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(244,200,75,.45));
  transition: filter .15s ease;
  transform-origin: 50% 50%;
  width: 68px; height: 68px;
}
body.seal-held { cursor: none; }
body.seal-held .parchment { cursor: crosshair; }

/* Stamps applied to the parchment after submission. */
.parchment-stamps {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}
.stamp-mark {
  position: absolute;
  width: 70px; height: 70px;
  transform-origin: 50% 50%;
  opacity: .82;
  filter: drop-shadow(0 4px 6px rgba(60,30,5,.4));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}
.stamp-mark svg { width: 100%; height: 100%; }
.stamp-mark-enter {
  /* Entry: snap-down from above with overshoot */
  opacity: 0;
  transform: translate(-50%, -50%) scale(2.4) rotate(0deg) !important;
}
.parchment.parchment-pulse {
  animation: parchment-impact .7s ease-out;
}
@keyframes parchment-impact {
  0%   { transform: translateY(0)   rotate(0); }
  18%  { transform: translateY(4px) rotate(.4deg); }
  40%  { transform: translateY(-2px) rotate(-.2deg); }
  100% { transform: translateY(0)    rotate(0); }
}

/* Fonts deliberately chosen for fantasy/medieval look WITH Cyrillic support:
   - MedievalSharp: medieval blackletter-ish, full Cyrillic
   - Spectral: old-style serif designed for long text, full Cyrillic
   Pirata One / IM Fell / UnifrakturCook etc. have no Cyrillic glyphs.
   Specificity is bumped (.parchment .x) because the site-wide section
   styles otherwise win on color + font-family. */
/* Fonts chosen so Cyrillic is *also* stylised, not just Latin:
   - Yeseva One: heavy Slavic-baroque display serif, full matching Cyrillic
   - Cormorant Garamond italic: elegant old-book italic with real Cyrillic
   - Forum: Trajan-style caps, full matching Cyrillic (used on sig label) */
.parchment .contract-title {
  font-family: 'Yeseva One', 'Forum', Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1; letter-spacing: .01em;
  color: #0c0500;
  text-align: center;
  margin: 0 0 1.5rem;
  text-shadow: 0 1px 0 rgba(255,245,210,.5);
  text-transform: none;
}
.parchment .contract-title em {
  font-style: normal; font-weight: 400;
  color: #1a0d04;
  display: block;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
}

.parchment .contract-body {
  font-family: 'Cormorant Garamond', 'Spectral', Georgia, serif;
  font-size: clamp(1.15rem, 1.55vw, 1.35rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  color: #0c0500;                /* near-black ink on the cream paper */
  max-width: 56ch;
  margin: 0 auto;
}
.parchment .contract-body p {
  margin: 0 0 1rem;
  color: #0c0500;
  font-family: 'Cormorant Garamond', 'Spectral', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.15rem, 1.55vw, 1.35rem);
  line-height: 1.5;
  text-shadow: 0 0 .35px rgba(12,5,0,.6);   /* slight ink-bleed for legibility */
}
.parchment .contract-body strong { font-weight: 700; font-style: italic; color: #0c0500; }
.parchment .contract-body em { font-style: italic; color: #1a0d04; }

.parchment .contract-pact {
  font-family: 'Yeseva One', 'Forum', serif !important;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  letter-spacing: .02em;
  color: #0c0500;
  padding: .85rem 0;
  border-top: 1px solid rgba(40,20,5,.35);
  border-bottom: 1px solid rgba(40,20,5,.35);
  margin: 1.5rem 0 !important;
}

/* Drawing surface stretches across the whole parchment. Content underneath
   stays visible — the canvas is transparent — so users can sign on the line,
   scribble in the margins, or strike through the body text if they want. */
#contract-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  cursor: url('/items/quill.svg?v=42') 4 36, crosshair;
  touch-action: none;
}
/* Wrap content so it has a stacking context below the canvas but the canvas
   doesn't push it down. */
.parchment-content { position: relative; z-index: 1; }

.parchment .contract-signature {
  margin-top: 2rem;
  text-align: left;
  max-width: 320px;
  margin-left: auto;       /* push to the right side, real-contract style */
  font-family: 'Spectral', 'EB Garamond', serif;
}
.parchment .contract-sig-label {
  display: block;
  font-family: 'Forum', 'Yeseva One', serif;
  font-size: 1.1rem; color: #0c0500;
  margin-bottom: .25rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contract-sig-line { position: relative; height: 56px; }
.contract-sig-rule {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: linear-gradient(90deg, rgba(74,40,10,0) 0%, rgba(74,40,10,.55) 10%, rgba(74,40,10,.55) 90%, rgba(74,40,10,0) 100%);
}
.contract-sig-x {
  position: absolute; left: 6px; bottom: 6px;
  font-family: 'Caveat', cursive;
  font-size: 1.3rem; color: rgba(74,40,10,.4);
  line-height: 1;
}

/* Clear button sits outside the canvas stacking trick so it remains
   clickable above the drawing surface. */
.contract-sig-clear {
  position: absolute;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(.85rem, 2vw, 1.25rem);
  z-index: 4;
  font-family: var(--font-body, system-ui), sans-serif;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(74,40,10,.6);
  background: rgba(232,214,168,.7);
  border: 1px solid rgba(74,40,10,.3);
  padding: 4px 10px; border-radius: 3px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: color .15s, border-color .15s, background .15s;
}
.contract-sig-clear:hover {
  color: #3a2208;
  border-color: rgba(74,40,10,.6);
  background: rgba(232,214,168,.95);
}

@media (max-width: 880px) {
  /* Stack manifesto and parchment vertically on narrow screens. */
  .who-with-pact .who-pact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .parchment { padding: 1.75rem 1.25rem 1.75rem; }
  .parchment-seal { right: 10px; top: -14px; width: 44px; height: 44px; }
  .parchment-seal svg { width: 44px; height: 44px; }
  .contract-signature { max-width: 100%; margin-left: 0; }
}

/* Particle Bull section — fills like a plate but the visual is canvas-driven. */
.particle-bull-section {
  position: relative;
  min-height: clamp(420px, 75vh, 680px);
  overflow: hidden;
  /* Transparent — picks up the page gradient instead of forcing its own. */
  background: transparent;
}
.particle-bull-section #particle-bull {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: crosshair;
}
.particle-bull-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(244,200,75,.05) 0%, rgba(244,200,75,0) 65%);
  pointer-events: none; z-index: 1;
}
.plate-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.plate-content { position: relative; z-index: 2; max-width: var(--max); width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }
.plate-content-left  { align-items: flex-start; max-width: 38ch; text-align: left; }
.plate-content-right { align-items: flex-end;   max-width: 42ch; text-align: right; margin-left: auto; }
.plate-title { line-height: 1; }
.plate-quote p em { font-style: italic; }

@media (max-width: 720px) {
  .plate-content-left, .plate-content-right { align-items: flex-start; text-align: left; max-width: 100%; margin: 0; }
}

/* ---- Roadmap timeline ---- */
.timeline { display: grid; gap: 1rem; max-width: var(--max-narrow); margin-inline: auto; }
.timeline li {
  display: grid; grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto;
  gap: 1.5rem; align-items: center;
  padding: 1.25rem 1.5rem; min-width: 0;
}
.timeline-body { min-width: 0; }

/* ---- Stats dashboard ---- */
.dashboard {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.dash-card { padding: 1.3rem 1.4rem; min-width: 0; }
.dash-card.chart { grid-column: span 3; }
.dash-card.list  { grid-column: span 1; }
.dash-card.list ul { display: grid; gap: .35rem; }
.dash-card.list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sparkline { width: 100%; height: 110px; }
.sparkline polyline { fill: none; stroke: currentColor; stroke-width: 2; }
.sparkline polyline:nth-child(2) { opacity: .55; }
.sparkline polyline:nth-child(3) { opacity: .3; }

/* ---- Final CTA ---- */
.cta-final {
  position: relative; overflow: hidden;
  padding: clamp(5rem, 10vw, 8rem) var(--pad-i);
  text-align: center;
}
.cta-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.cta-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cta-inner { position: relative; z-index: 2; max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cta-buttons { display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: .75rem; }

/* ---- Footer ---- */
.site-footer { padding: clamp(3.5rem, 6vw, 5rem) var(--pad-i) 1.5rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--max); margin-inline: auto;
}
.footer-brand { display: flex; flex-direction: column; gap: .5rem; }
.footer-brand .footer-mark { width: 56px; height: 56px; }
.footer-col { display: flex; flex-direction: column; gap: .35rem; }
.footer-bar { max-width: var(--max); margin: 2.25rem auto 0; padding-top: 1.25rem; text-align: center; }

/* ---- Buttons skeleton ---- */
.btn { display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.6rem; line-height: 1; transition: transform .15s, box-shadow .2s, background .18s, color .18s, border-color .18s; cursor: pointer; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn.big { padding: 1.15rem 2rem; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .nav-primary { display: none; }
  .site-nav { grid-template-columns: auto 1fr; }
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-card.chart, .dash-card.list { grid-column: span 2; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: auto 1fr; }
  .timeline li .when { grid-column: 2; }
  .style-switcher { padding: 2px; }
  .style-switcher button, .style-switcher a { padding: .3rem .55rem; font-size: .62rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-discord span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ======================================================================
   QUICK SOUL — asymmetric overrides + personal touches
   Uses variant tokens (--gold, --ink, --bg-0, --line, --royal, --ink-soft)
   so it works across all 5 style variants.
   ====================================================================== */

/* ---- Decorative inline-SVG section divider ---- */
.hoof-divider {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.75rem, 2vw, 1.4rem);
  max-width: var(--max-narrow); margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) var(--pad-i);
  color: var(--gold, #c8a64a);
  opacity: .8;
}
.hoof-divider .rule {
  flex: 1 1 auto; max-width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.hoof-divider svg { flex: 0 0 auto; filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 35%, transparent)); }

/* ---- WHO asymmetric ---- */
.who-asym { position: relative; overflow: hidden; }
.who-asym .who-asym-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  max-width: var(--max);
  margin-inline: auto;
}
.who-asym-headline { display: flex; flex-direction: column; gap: 1rem; }
.who-asym-headline .kicker { letter-spacing: .25em; text-transform: uppercase; font-size: .8rem; opacity: .7; }
.manifesto-title {
  font-family: var(--font-display, "Russo One", sans-serif);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink, #fff);
}
.manifesto-title em {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-2, #ffe278), var(--gold, #f0c041));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
}
.who-pull {
  display: inline-block;
  margin-top: .35rem;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft, #a7b4d8);
  border-left: 3px solid var(--gold, #c8a64a);
  padding-left: .85rem;
}
.who-asym-body {
  max-width: 38ch;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.65;
  display: flex; flex-direction: column; gap: 1rem;
  margin-top: clamp(1rem, 4vw, 3rem);
}
.who-asym-body p { color: var(--ink-soft, #cfd5e8); }
.who-asym-body .lead { color: var(--ink, #fff); font-size: 1.05em; }
.who-asym-body .who-kicker-line {
  font-family: var(--font-display, "Russo One", sans-serif);
  font-size: 1.2em;
  color: var(--gold, #f0c041);
  letter-spacing: .01em;
}
.who-signature {
  font-family: "Caveat", "Permanent Marker", cursive;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1;
  color: var(--gold-2, #ffe278);
  margin-top: .8rem;
  transform: rotate(-3.5deg);
  align-self: flex-start;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.who-aba-peek {
  position: absolute;
  right: -8%;
  top: 8%;
  width: clamp(140px, 18vw, 280px);
  height: auto;
  opacity: .12;
  filter: grayscale(.7) contrast(1.1);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  transform: rotate(6deg);
}
.who-asym-grid > * { position: relative; z-index: 1; }

@media (max-width: 820px) {
  .who-asym .who-asym-grid { grid-template-columns: 1fr; gap: 2rem; }
  .who-asym-body { max-width: 100%; margin-top: 0; }
  .who-aba-peek { right: -22%; top: 0; opacity: .08; }
}

/* ---- TOOLKIT asymmetric mosaic ---- */
.card-grid-asym {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: clamp(1rem, 1.6vw, 1.5rem);
}
.toolkit-watermark {
  position: absolute;
  right: -3%;
  bottom: -8%;
  width: clamp(180px, 28vw, 380px);
  height: auto;
  opacity: .06;
  filter: grayscale(1) contrast(1.4) brightness(1.4);
  pointer-events: none;
  z-index: 0;
  transform: rotate(-12deg);
}
.card-grid-asym > .card { position: relative; z-index: 1; }

.card-grid-asym .card-hero {
  grid-column: span 2;
  grid-row: span 2;
  padding: clamp(1.8rem, 2.8vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1.1rem;
  position: relative;
  background-image:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--gold, #f0c041) 14%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--royal, #3a6cff) 18%, transparent), transparent 55%);
}
.card-grid-asym .card-hero h3 {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important;
  line-height: 1.05;
}
.card-grid-asym .card-hero .card-hero-lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink, #fff);
}
.card-grid-asym .card-hero .card-hero-detail {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft, #a7b4d8);
  border-left: 2px solid color-mix(in srgb, var(--gold, #f0c041) 60%, transparent);
  padding-left: .9rem;
}
.card-ribbon {
  position: absolute; top: 14px; right: -8px;
  font-family: var(--font-sub, var(--font-display, sans-serif));
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  background: linear-gradient(180deg, var(--gold-2, #ffe278), var(--gold, #f0c041) 60%, var(--gold-dk, #a07a18));
  color: #1a1408;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  z-index: 3;
}
.card-grid-asym .card-tall { grid-column: span 2; grid-row: span 1; }
.card-grid-asym .card-wide { grid-column: span 2; grid-row: span 1; }
/* others fall in default span 1×1 */

@media (max-width: 980px) {
  .card-grid-asym { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid-asym .card-hero { grid-column: span 2; grid-row: span 2; }
  .card-grid-asym .card-tall,
  .card-grid-asym .card-wide { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 600px) {
  .card-grid-asym { grid-template-columns: 1fr; }
  .card-grid-asym .card-hero,
  .card-grid-asym .card-tall,
  .card-grid-asym .card-wide { grid-column: span 1; grid-row: auto; }
}

/* ---- STATS editorial story ---- */
.stats-story { position: relative; overflow: hidden; }
.stats-aba-watermark {
  position: absolute;
  left: -8%;
  bottom: -10%;
  width: clamp(260px, 36vw, 520px);
  height: auto;
  opacity: .08;
  filter: grayscale(.6) contrast(1.2);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.stats-story .section-head,
.stats-story-grid { position: relative; z-index: 1; }

.stats-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "huge   context"
    "quote  tier";
  gap: clamp(1.5rem, 3.5vw, 3rem);
  max-width: var(--max);
  margin-inline: auto;
  align-items: start;
}

.stats-hero-number {
  grid-area: huge;
  display: flex; flex-direction: column; gap: .25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.stats-hero-number .huge {
  font-family: var(--font-display, "Russo One", sans-serif);
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--ink, #fff);
  background: linear-gradient(180deg, var(--gold-2, #ffe278), var(--gold, #f0c041) 60%, var(--gold-dk, #a07a18));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 30px color-mix(in srgb, var(--gold, #f0c041) 25%, transparent);
}
.stats-hero-number .huge-suffix { font-size: .55em; }
.stats-hero-number .huge-label {
  font-family: var(--font-sub, var(--font-display, sans-serif));
  font-size: .85rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-soft, #a7b4d8);
  margin-top: .5rem;
}

.stats-context {
  grid-area: context;
  display: flex; flex-direction: column; gap: .8rem;
  padding-top: clamp(2rem, 5vw, 4rem);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--ink-soft, #cfd5e8);
  line-height: 1.4;
}
.stats-context li {
  position: relative;
  padding-left: 1.4rem;
  border-left: 2px solid color-mix(in srgb, var(--gold, #f0c041) 50%, transparent);
}
.stats-context strong {
  color: var(--gold-2, #ffe278);
  font-family: var(--font-display, "Russo One", sans-serif);
  font-weight: 400;
  font-size: 1.25em;
}

.stats-pullquote {
  grid-area: quote;
  border-left: 3px solid var(--gold, #f0c041);
  padding: 1rem 0 1rem 1.5rem;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink, #fff);
}
.stats-pullquote p { font-style: normal; }
.stats-pullquote em {
  font-style: italic;
  color: var(--gold-2, #ffe278);
}
.stats-pullquote cite {
  display: block;
  margin-top: .85rem;
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft, #a7b4d8);
}

.stats-tier-breakdown {
  grid-area: tier;
  padding: 1.2rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--line, var(--gold, #f0c041)) 80%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-0, #0a1326) 70%, transparent);
  font-size: .9rem;
}
.stats-tier-breakdown .label {
  display: block;
  font-family: var(--font-sub, var(--font-display, sans-serif));
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-soft, #a7b4d8);
  margin-bottom: .8rem;
}
.stats-tier-breakdown ul { display: grid; gap: .55rem; margin-bottom: .85rem; }
.stats-tier-breakdown li {
  display: grid;
  grid-template-columns: 28px minmax(80px, auto) 1fr;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body, sans-serif);
  color: var(--ink, #fff);
}
.stats-tier-breakdown li > span:first-child {
  font-family: var(--font-display, "Russo One", sans-serif);
  color: var(--gold, #f0c041);
  font-size: .9rem;
}
.stats-tier-breakdown li em {
  font-family: var(--font-display, "Russo One", sans-serif);
  font-style: normal;
  color: var(--ink, #fff);
  font-size: 1rem;
}
.stats-tier-breakdown li em small { opacity: .7; font-size: .7em; margin-left: .1rem; }
.stats-tier-breakdown .bar {
  display: block; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold, #f0c041), var(--gold-2, #ffe278) var(--w, 50%), transparent var(--w, 50%));
  background-color: color-mix(in srgb, var(--ink-soft, #a7b4d8) 12%, transparent);
}
.stats-tier-breakdown .sparkline.tiny {
  width: 100%; height: 50px;
  margin-top: .4rem;
  color: var(--gold, #f0c041);
}
.stats-tier-breakdown .sparkline.tiny polyline {
  fill: none; stroke: currentColor; stroke-width: 2;
}
.stats-tier-breakdown .tier-foot {
  display: block; margin-top: .2rem;
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-soft, #a7b4d8); opacity: .8;
}

@media (max-width: 820px) {
  .stats-story-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "huge" "context" "quote" "tier";
  }
  .stats-context { padding-top: 0; }
}

/* ---- Footer Aba peek ---- */
.site-footer { position: relative; overflow: hidden; }
.footer-aba-peek {
  position: absolute;
  right: -4%;
  bottom: -25%;
  width: clamp(180px, 22vw, 320px);
  height: auto;
  opacity: .08;
  filter: grayscale(.7) brightness(1.2);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-4deg);
}
.site-footer .footer-grid,
.site-footer .footer-bar { position: relative; z-index: 1; }

   "MORE SOUL" PACKAGE — additional skeletons
   Campaign map (roadmap), Herd pinboard, Campfire dispatch,
   Custom cursor (cinematic + gothic), Page-load splash.
   Variant CSS files add colour/typographic flourishes on top of these.
   ====================================================================== */

/* ---- Roadmap as horizontal campaign map ---- */
.campaign-map {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding: 1rem 0 2rem;
}
.campaign-path {
  position: absolute; inset: 0 0 auto 0;
  width: 100%; height: clamp(120px, 14vw, 180px);
  pointer-events: none;
  z-index: 0;
  opacity: .85;
}
.campaign-strip {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1.4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.node {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: clamp(1rem, 1.4vw, 1.5rem) clamp(.7rem, 1vw, 1.1rem) clamp(1rem, 1.4vw, 1.4rem);
  text-align: center;
  min-width: 0;
  isolation: isolate;
  transition: transform .25s ease;
}
.node:nth-child(odd)  { transform: translateY(0); }
.node:nth-child(even) { transform: translateY(clamp(.5rem, 1.5vw, 1.4rem)); }
.node:hover { transform: translateY(-6px); }
.node:nth-child(even):hover { transform: translateY(calc(clamp(.5rem, 1.5vw, 1.4rem) - 6px)); }

.node-banner {
  display: inline-block;
  padding: .35rem .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.node-flag {
  position: absolute; top: -10px; left: 50%;
  width: 2px; height: clamp(20px, 3vw, 32px);
  background: currentColor; opacity: .5;
  transform: translateX(-50%);
}
.node-flag::after {
  content: ""; position: absolute; top: 0; left: 2px;
  width: 14px; height: 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%);
}
.node-icon {
  width: clamp(48px, 5vw, 64px); height: clamp(48px, 5vw, 64px);
  display: grid; place-items: center;
}
.node-icon svg { width: 100%; height: 100%; }
.node-meta { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.node-meta h3 { line-height: 1.1; }
.node-desc {
  font-size: .85rem; line-height: 1.45;
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease, margin .25s ease;
}
.node:hover .node-desc,
.node:focus-within .node-desc { max-height: 200px; opacity: 1; margin-top: .25rem; }
.node-when {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: .85;
}

@media (max-width: 800px) {
  .campaign-path { display: none; }
  .campaign-strip {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 1rem;
    position: relative;
  }
  .campaign-strip::before {
    content: ""; position: absolute; left: 30px; top: 0; bottom: 0;
    width: 2px; background: currentColor; opacity: .25;
    background-image: linear-gradient(to bottom, currentColor 50%, transparent 50%);
    background-size: 2px 10px; background-repeat: repeat-y;
  }
  .node, .node:nth-child(even), .node:hover, .node:nth-child(even):hover {
    transform: none;
    flex-direction: row; align-items: flex-start; text-align: left;
    padding-left: clamp(3.5rem, 12vw, 4.5rem);
  }
  .node-banner { position: absolute; left: 0; top: .9rem; }
  .node-flag { display: none; }
  .node-icon { flex-shrink: 0; }
  .node-desc { max-height: none; opacity: 1; margin-top: .25rem; }
}

/* ---- "Meet the herd" pinboard ---- */
.pinboard {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.officer {
  position: relative;
  grid-column: span 4;
  display: flex; flex-direction: column; gap: .85rem;
  padding: clamp(1.25rem, 2vw, 1.65rem) clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.25rem, 2vw, 1.65rem);
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s ease, box-shadow .25s ease;
  isolation: isolate;
}
.officer:hover { transform: rotate(0) translateY(-6px); z-index: 5; }
.officer-pin {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff5544, #8a1a14 70%, #4a0807);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.5);
  z-index: 3;
}
/* Asymmetry: vary spans + offsets so the grid looks pinned, not tabular. */
.officer:nth-child(1) { grid-column: span 5; }
.officer:nth-child(2) { grid-column: span 4; transform: rotate(var(--rot)) translateY(1.5rem); }
.officer:nth-child(2):hover { transform: rotate(0) translateY(calc(1.5rem - 6px)); }
.officer:nth-child(3) { grid-column: span 3; }
.officer:nth-child(4) { grid-column: span 4; transform: rotate(var(--rot)) translateY(.75rem); }
.officer:nth-child(4):hover { transform: rotate(0) translateY(calc(.75rem - 6px)); }
.officer:nth-child(5) { grid-column: span 4; }
.officer:nth-child(6) { grid-column: span 4; transform: rotate(var(--rot)) translateY(-1rem); }
.officer:nth-child(6):hover { transform: rotate(0) translateY(calc(-1rem - 6px)); }

.officer-head { display: flex; align-items: center; gap: .85rem; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--avatar, #888), color-mix(in srgb, var(--avatar, #888) 50%, #000));
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-size: 1.4rem; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.who-line { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.who-line h3 { line-height: 1.1; }
.uid {
  font-size: .72rem; letter-spacing: .14em;
  font-family: ui-monospace, "Menlo", monospace;
  opacity: .65;
}
.officer-tags { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.role {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 999px;
}
.power {
  margin-left: auto;
  font-family: var(--font-display, sans-serif);
  font-size: 1.15rem; line-height: 1; opacity: .9;
}
.power small { font-size: .55em; opacity: .75; }
.officer-quote {
  font-style: italic;
  font-size: .92rem; line-height: 1.5;
  opacity: .9;
  border-left: 2px solid currentColor;
  padding-left: .75rem;
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}

@media (max-width: 980px) {
  .officer, .officer:nth-child(n) { grid-column: span 6; transform: rotate(var(--rot)); }
  .officer:hover, .officer:nth-child(n):hover { transform: rotate(0) translateY(-4px); }
}
@media (max-width: 600px) {
  .officer, .officer:nth-child(n) { grid-column: span 12; transform: none; }
  .officer:hover, .officer:nth-child(n):hover { transform: translateY(-4px); }
}

/* ---- Campfire dispatch ---- */
.campfire-inner {
  max-width: var(--max); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.campfire-art {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.campfire-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: contrast(1.06) saturate(1.1);
}
.campfire-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(255, 130, 40, .35), transparent 55%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35));
  pointer-events: none;
  mix-blend-mode: screen;
}
.campfire-text { display: flex; flex-direction: column; gap: 1.1rem; }
.campfire-quote {
  position: relative;
  padding: 1rem 0 1rem 0;
}
.campfire-quote .quote-mark {
  font-family: Georgia, "Cormorant Garamond", serif;
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: .8;
  position: absolute;
  left: -.4rem; top: -1.2rem;
  opacity: .25;
  pointer-events: none;
}
.campfire-quote p {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  position: relative;
  padding-left: clamp(1.2rem, 2.5vw, 2rem);
}
.campfire-quote em { font-style: italic; }
.campfire-cite {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: .8;
  display: block;
}
.campfire-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.campfire-meta li { display: flex; flex-direction: column; gap: .2rem; }
.campfire-meta span {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: .65;
}
.campfire-meta strong {
  font-family: var(--font-display, sans-serif);
  font-size: 1.05rem;
  line-height: 1.1;
}

@media (max-width: 800px) {
  .campfire-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .campfire-art { aspect-ratio: 16 / 10; max-height: 320px; }
}

/* ---- Page-load splash ---- */
.splash {
  position: fixed; inset: 0;
  z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #1a1410 0%, #050405 70%);
  pointer-events: none;
  animation: splash-out 1.2s ease-in forwards;
}
.splash-mark {
  width: clamp(96px, 14vw, 140px); height: auto;
  filter: drop-shadow(0 0 24px rgba(240, 192, 65, .55));
  animation: splash-mark-in 1.2s ease-out forwards;
  transform-origin: center;
}
.splash-label {
  position: absolute;
  bottom: calc(50% - clamp(96px, 14vw, 140px) - 1.5rem);
  font-family: "Russo One", "Cinzel", sans-serif;
  letter-spacing: .35em;
  font-size: .8rem;
  color: #d8b35c;
  opacity: 0;
  animation: splash-label-in 1.2s ease-out forwards;
}
@keyframes splash-mark-in {
  0%   { opacity: 0; transform: scale(.7); filter: drop-shadow(0 0 0 rgba(240, 192, 65, 0)); }
  35%  { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 36px rgba(240, 192, 65, .9)); }
  85%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes splash-label-in {
  0%, 25% { opacity: 0; letter-spacing: .15em; }
  55%     { opacity: .9; letter-spacing: .35em; }
  100%    { opacity: 0; letter-spacing: .55em; }
}
@keyframes splash-out {
  0%, 78% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}

/* ---- Custom cursor (cinematic + gothic only) ----
   Small gold sword/horn icon, with a sharper variant on hover targets. */
body[data-style="cinematic"],
body[data-style="gothic"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23f4d97a'/><stop offset='1' stop-color='%238b6a1f'/></linearGradient></defs><path d='M3 3 L11 5 L23 17 L25 25 L17 23 L5 11 Z' fill='url(%23g)' stroke='%231a120a' stroke-width='1.2' stroke-linejoin='round'/><circle cx='8' cy='8' r='1.4' fill='%231a120a'/></svg>") 4 4, auto;
}
body[data-style="cinematic"] a,
body[data-style="cinematic"] button,
body[data-style="cinematic"] [role="tab"],
body[data-style="cinematic"] .card,
body[data-style="cinematic"] .officer,
body[data-style="cinematic"] .node,
body[data-style="gothic"] a,
body[data-style="gothic"] button,
body[data-style="gothic"] [role="tab"],
body[data-style="gothic"] .card,
body[data-style="gothic"] .officer,
body[data-style="gothic"] .node {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ffe8a0'/><stop offset='1' stop-color='%23a07a18'/></linearGradient></defs><path d='M16 3 C 9 7 6 14 6 18 C 6 24 11 28 16 28 C 21 28 26 24 26 18 C 26 14 23 7 16 3 Z M 16 9 C 19 12 21 15 21 18 C 21 21 19 23 16 23 C 13 23 11 21 11 18 C 11 15 13 12 16 9 Z' fill='url(%23g)' stroke='%231a120a' stroke-width='1.2'/><circle cx='16' cy='17' r='2.4' fill='%231a120a'/></svg>") 16 16, pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* Item rarity palette (CoD/MMO-style) */
:root {
  --rarity-common:    #9aa3b2;
  --rarity-uncommon:  #2dd1a0;
  --rarity-rare:      #3a6cff;
  --rarity-epic:      #b146e8;
  --rarity-legendary: #ff8a3d;
}

/* Ensure ember-canvas (z:1, fixed) sits BEHIND main content */
/* canvas safety */
main { position: relative; z-index: 2; }
header.site-nav { z-index: 100; }   /* nav already fixed; keep on top */
footer.site-footer { position: relative; z-index: 2; }

/* =========================================================
   Auth modal — shown when an unauthenticated user tries to stamp
   ========================================================= */
.auth-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
}
.auth-modal[hidden] { display: none; }
.auth-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 10, 22, 0.78);
  backdrop-filter: blur(6px);
}
.auth-modal-panel {
  position: relative;
  max-width: 460px; width: calc(100% - 2rem);
  padding: 2.5rem 2rem 2rem;
  background: linear-gradient(180deg, #142141 0%, #0a1326 100%);
  border: 1px solid rgba(244,200,75,.4);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--ink, #e8edff);
  text-align: center;
  font-family: 'Manrope', system-ui, sans-serif;
  animation: auth-modal-in .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes auth-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.auth-modal-close {
  position: absolute; top: 8px; right: 14px;
  background: transparent; border: 0;
  font-size: 28px; line-height: 1; color: rgba(244,200,75,.6);
  cursor: pointer; padding: 4px 10px;
  border-radius: 50%; transition: color .15s, background .15s;
}
.auth-modal-close:hover { color: var(--gold, #f0c041); background: rgba(244,200,75,.08); }
.auth-modal-panel h3 {
  margin: 0 0 .85rem;
  font-family: 'Pirata One', 'MedievalSharp', serif;
  font-size: 1.7rem; letter-spacing: .02em;
  color: var(--gold, #f0c041);
}
.auth-modal-panel p {
  margin: 0 0 1.4rem;
  font-size: .95rem; line-height: 1.55;
  color: var(--ink-soft, #a7b4d8);
}
.auth-discord-btn {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .9rem 1.6rem;
  background: linear-gradient(180deg, #5865f2, #4752c4);
  color: #fff; font-weight: 700; text-decoration: none;
  font-family: 'Russo One', system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase; font-size: .9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 0 #353f9c, 0 10px 24px rgba(88,101,242,.45);
  transition: transform .15s, box-shadow .15s;
}
.auth-discord-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #353f9c, 0 14px 30px rgba(88,101,242,.6); }
.auth-discord-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #353f9c, 0 6px 14px rgba(88,101,242,.4); }
.auth-modal-fine {
  margin-top: 1.25rem !important;
  font-size: .7rem !important;
  color: rgba(167,180,216,.55) !important;
  letter-spacing: .04em;
}
body.modal-open { overflow: hidden; }

/* =========================================================
   Wall of Oaths section
   ========================================================= */
.wall-of-oaths {
  position: relative;
  text-align: center;
}
.wall-of-oaths .section-head { margin-bottom: 2.5rem; }
.oaths-sub {
  margin-top: .6rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .95rem; color: var(--ink-soft, #a7b4d8);
}
.oaths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  max-width: min(100rem, 95vw);
  margin: 0 auto;
}
.oath-empty, .oaths-empty {
  font-style: italic;
  opacity: .55;
  margin: 2rem 0;
}
.oath-card {
  background: linear-gradient(180deg, #1f2532, #161a23);
  border: 1px solid color-mix(in srgb, var(--brass, #8a6a2a) 50%, transparent);
  border-radius: 10px;
  padding: .85rem;
  display: flex; flex-direction: column;
  gap: .6rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  transition: transform .2s ease, border-color .2s ease;
}
.oath-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold, #f0c041);
}
.oath-thumb {
  aspect-ratio: 220 / 130;
  background: url('/items/parchment.png') center/cover no-repeat;
  border-radius: 6px;
  overflow: hidden;
  padding: 8px;
  filter: brightness(.92);
}
.oath-thumb svg { width: 100%; height: 100%; display: block; }
.oath-meta {
  display: flex; align-items: center; gap: .55rem;
  font-family: 'Manrope', system-ui, sans-serif;
}
.oath-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(244,200,75,.3);
  flex-shrink: 0;
}
.oath-name {
  font-size: .85rem; font-weight: 700;
  color: var(--ink, #e8edff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.oath-date {
  font-size: .7rem;
  color: var(--ink-soft, #a7b4d8);
  letter-spacing: .05em;
  white-space: nowrap;
}

/* ---- Auth modal: extra UI for username/password ---- */
.auth-sep {
  display: flex; align-items: center; gap: .85rem;
  margin: 1.5rem 0 .85rem;
  color: rgba(167,180,216,.4);
  font-size: .8rem; letter-spacing: .25em; text-transform: uppercase;
}
.auth-sep::before, .auth-sep::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(167,180,216,.18);
}
.auth-tabs {
  display: flex; gap: .35rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(167,180,216,.15);
}
.auth-tab {
  appearance: none; background: transparent; border: 0;
  padding: .65rem 1rem;
  font: 600 .8rem/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(167,180,216,.55);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.auth-tab[aria-selected="true"] {
  color: var(--gold, #f0c041);
  border-bottom-color: var(--gold, #f0c041);
}
.auth-tab:hover { color: var(--ink, #e8edff); }
.auth-form {
  display: flex; flex-direction: column;
  gap: .85rem;
  text-align: left;
}
.auth-field { display: flex; flex-direction: column; gap: .3rem; }
.auth-field > span {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(167,180,216,.7);
}
.auth-field input {
  width: 100%;
  padding: .65rem .85rem;
  background: rgba(10,19,38,.6);
  border: 1px solid rgba(244,200,75,.25);
  border-radius: 6px;
  color: var(--ink, #e8edff);
  font: 400 .95rem 'Manrope', system-ui, sans-serif;
  outline: none;
  transition: border-color .15s, background .15s;
}
.auth-field input:focus {
  border-color: var(--gold, #f0c041);
  background: rgba(10,19,38,.85);
}
.auth-error {
  margin: 0;
  font-size: .8rem !important;
  color: #ff8a7a !important;
  letter-spacing: .02em;
}
.auth-submit {
  appearance: none; border: 0;
  margin-top: .35rem;
  padding: .85rem 1.4rem;
  background: linear-gradient(180deg, var(--gold-2, #ffe278), var(--gold, #f0c041) 50%, var(--gold-dk, #a07a18));
  color: #1a1408;
  font: 700 .85rem/1 'Russo One', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 6px;
  border: 1px solid rgba(255,230,150,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 0 var(--gold-dk, #a07a18), 0 10px 22px rgba(240,192,65,.35);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.auth-submit:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 0 var(--gold-dk, #a07a18), 0 14px 28px rgba(240,192,65,.55); }
.auth-submit:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 var(--gold-dk, #a07a18), 0 6px 14px rgba(240,192,65,.3); }

/* ---- User profile chip in nav ---- */
.user-chip { position: relative; }
.user-chip-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .85rem .4rem .4rem;
  background: linear-gradient(180deg, rgba(244,200,75,.12), rgba(244,200,75,.04));
  color: var(--ink, #e8edff);
  border: 1px solid rgba(244,200,75,.3);
  border-radius: 999px;
  font: 700 .8rem 'Manrope', system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.user-chip-btn:hover { border-color: var(--gold, #f0c041); background: linear-gradient(180deg, rgba(244,200,75,.22), rgba(244,200,75,.08)); }
.user-chip-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(244,200,75,.4);
}
.user-chip-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--brass, #8a6a2a);
  color: #1a1408;
  border-radius: 50%;
  font: 800 12px 'Russo One', sans-serif;
}
.user-chip-name {
  max-width: 14ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 180px;
  background: #0f1a33;
  border: 1px solid rgba(244,200,75,.3);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0,0,0,.6);
  padding: 4px;
  z-index: 200;
  animation: chip-menu-in .15s ease-out;
}
@keyframes chip-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.user-chip-menu-item {
  display: block; width: 100%; text-align: left;
  padding: .55rem .85rem;
  background: transparent; border: 0;
  font: 500 .85rem 'Manrope', sans-serif;
  color: var(--ink, #e8edff);
  border-radius: 5px;
  cursor: pointer;
}
.user-chip-menu-item:hover { background: rgba(244,200,75,.1); color: var(--gold-2, #ffe278); }

/* ---- Oath detail modal ---- */
.oath-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  padding: 2rem 1rem;
}
.oath-modal[hidden] { display: none; }
.oath-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 10, 22, 0.82);
  backdrop-filter: blur(8px);
}
.oath-modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 1.5rem 1.5rem 2rem;
  background: linear-gradient(180deg, #142141 0%, #0a1326 100%);
  border: 1px solid rgba(244,200,75,.35);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.75);
  animation: auth-modal-in .35s cubic-bezier(.2,.8,.2,1) both;
}
.oath-modal-close {
  position: absolute; top: 8px; right: 14px;
  background: transparent; border: 0;
  font-size: 28px; line-height: 1; color: rgba(244,200,75,.6);
  cursor: pointer; padding: 4px 10px;
  border-radius: 50%; transition: color .15s, background .15s;
  z-index: 2;
}
.oath-modal-close:hover { color: var(--gold, #f0c041); background: rgba(244,200,75,.08); }
.oath-modal-header {
  display: flex; align-items: center; gap: .85rem;
  margin: 0 0 1rem;
}
.oath-modal-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(244,200,75,.4);
}
.oath-modal-name {
  margin: 0; font-size: 1.1rem;
  font-family: 'Russo One', sans-serif; letter-spacing: .04em;
  color: var(--gold, #f0c041);
}
.oath-modal-date {
  display: block;
  font-size: .8rem; color: var(--ink-soft, #a7b4d8);
  letter-spacing: .03em;
}
.parchment-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1028 / 768;
  /* Padding MUST match .parchment exactly so the saved strokes/stamps
     (normalised against parchment bounds) line up with the same text. */
  padding: clamp(2.25rem, 3.5vw, 3rem) clamp(1.75rem, 3.5vw, 2.5rem) clamp(2rem, 3.5vw, 2.75rem);
  color: #2c1d0a;
  background: url('/items/parchment.png') center/100% 100% no-repeat;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.55));
  cursor: default;
}
.parchment-preview .parchment-content {
  position: relative; z-index: 1;
}
.oath-modal-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
.oath-modal-stamps {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}

/* Make oath cards behave like buttons */
button.oath-card {
  appearance: none;
  text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
  width: 100%;
}
button.oath-card:focus-visible {
  outline: 2px solid var(--gold, #f0c041);
  outline-offset: 2px;
}

@media (max-width: 880px) {
  .user-chip-name { display: none; }
  .user-chip-btn { padding-right: .5rem; }
}

/* Hide both auth nav slots until /api/auth/me resolves to avoid the flicker
   of "Join Discord" → user-chip on every page load. */
body.auth-unknown .cta-discord,
body.auth-unknown #user-chip { visibility: hidden; }

/* ---- Profile edit modal: avatar picker row ---- */
.profile-avatar-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem;
}
.profile-avatar-preview {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(244,200,75,.4);
}
.profile-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--brass, #8a6a2a);
  color: #1a1408;
  font: 800 28px 'Russo One', sans-serif;
  border: 2px solid rgba(244,200,75,.4);
}
.profile-avatar-pick {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .85rem; font-weight: 700;
  color: var(--gold, #f0c041);
  padding: .55rem 1rem;
  border: 1px solid rgba(244,200,75,.4);
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .15s, border-color .15s;
}
.profile-avatar-pick:hover {
  background: rgba(244,200,75,.1);
  border-color: var(--gold, #f0c041);
}