/* ============================================
   Gildenhall — design tokens
   Light/cream + gold system, glassmorphism cards, Playfair Display numerals
   ============================================ */
:root {
  --cream: #efebe2;
  --header-bg: #f8f7f5;
  --panel-line: rgba(0, 0, 0, 0.1);

  --gold: #c79a3f;
  --gold-deep: #a97f2e;
  --gold-text: #7c5c18; /* gold for small text on cream, 5:1 */
  --gold-h1: #d9ad50;
  --gold-light: #e9bd66;
  --gold-warm: #f0c56e;
  --gold-shine: #f3c66b;
  --gold-pale: #fff2cf;
  --gold-bronze: #b9812f;
  --gold-bronze-dark: #8a5f24;
  /* RGB channels of the golds above, for rgba(var(--x-rgb), alpha). build.py keeps them in sync with theme overrides. */
  --gold-rgb: 199, 154, 63;
  --gold-h1-rgb: 217, 173, 80;
  --gold-deep-rgb: 169, 127, 46;
  --gold-light-rgb: 233, 189, 102;
  --gold-grad-top: rgba(255, 214, 137, 0.95);
  --gold-grad-bottom: rgba(255, 165, 64, 0.95);


  --ink: #241d14;
  --ink-dim: #6b6152;
  --ink-soft: #6f6555;

  --font-display: "Cinzel", ui-serif, Georgia, serif;
  --font-numeral: "Playfair Display", ui-serif, Georgia, serif;
  --font-body: "Mulish", ui-sans-serif, system-ui, sans-serif;

  --container: 1180px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  font-weight: 700;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============================================
   Header — no bar of its own: it floats on the hero art, which fades to dark behind it
   ============================================ */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
}
/* the full wordmark sits inside the bar, vertically centred */
.brand-logo {
  display: block;
  height: 66px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.main-nav a { text-shadow: 0 1px 8px rgba(0,0,0,0.85); }
.header-inner { display: flex; align-items: center; gap: 40px; height: 84px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-right: auto;
}
.brand-mark { width: auto; height: 40px; flex-shrink: 0; }
.brand-word,
.hero-left h1 {
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-light) 35%, var(--gold-bronze) 70%, var(--gold-bronze-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)) drop-shadow(0 2px 1px rgba(60,36,10,0.5));
}
.brand-word { font-size: 1.3rem; }
.main-nav { display: flex; gap: 30px; }
.main-nav a, .main-nav .nav-menu-btn { font: 600 0.92rem var(--font-body); color: #cbbfa6; text-shadow: 0 1px 8px rgba(0,0,0,0.85); transition: color 0.15s ease; }
.main-nav a:hover, .main-nav .nav-menu-btn:hover, .main-nav .nav-item.is-open .nav-menu-btn { color: var(--gold-h1); }
.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; }

.header-right { display: flex; align-items: center; gap: 20px; }

/* Account switch — one control: transparent "Sign in" and ivory "Sign up",
   split by a blade-cut diagonal seam. */
.account-switch {
  --edge-line: rgba(var(--gold-h1-rgb),0.55);
  display: inline-flex;
  align-items: stretch;
  height: 42px;
  background-color: rgba(255,255,255,0.02);
}
.account-switch:hover { --edge-line: rgba(var(--gold-light-rgb),0.9); }
.account-switch a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.acct-signin {
  padding: 0 26px 0 18px;
  color: #e6dcc6;
  transition: color 0.15s ease;
}
.acct-signin svg { width: 15px; height: 15px; color: var(--gold-h1); transition: transform 0.2s var(--ease-out); }
.acct-signin:hover { color: #fff; }
@media (hover: hover) and (pointer: fine) { .acct-signin:hover svg { transform: translateY(-1px); } }
.acct-signup {
  position: relative;
  margin-left: -12px;
  padding: 0 22px 0 30px;
  color: #1c1409;
  background: linear-gradient(180deg, #ffffff 0%, #f6efe0 100%);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
  transition: background 0.2s ease;
}
/* thin gold edge along the diagonal seam: same box as the clip cut, so the
   line runs exactly from (12px, 0) to (0, 100%) */
.acct-signup::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 12px;
  background: linear-gradient(to bottom right, transparent calc(50% - 0.8px), var(--gold-h1) calc(50% - 0.8px), var(--gold-h1) calc(50% + 0.8px), transparent calc(50% + 0.8px));
}
/* a soft light sweep on hover */
.acct-signup::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(var(--gold-light-rgb),0.28) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .acct-signup:hover::after { transform: translateX(100%); } }
.acct-signup:hover { background: linear-gradient(180deg, #ffffff 0%, #fff8ea 100%); }
.account-switch a:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .acct-signup::after { display: none; }
}

.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 22px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-dim);
  --edge-line: var(--panel-line);
  background-color: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-ghost-sm:hover { --edge-line: var(--gold); color: var(--ink); }

.btn-gold-sm, .btn-gold-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 26px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #241a08;
  border: none;
  font-family: inherit;
  cursor: pointer;
  background: linear-gradient(115deg, var(--gold-deep) 0%, var(--gold-shine) 45%, var(--gold-deep) 100%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  transition: background-position 0.4s var(--ease-out), transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) { .btn-gold-sm:hover, .btn-gold-lg:hover { background-position: 100% 0%; transform: translateY(-1px); } }
.btn-gold-lg { min-height: 52px; padding: 0 36px; font-size: 0.95rem; gap: 10px; }
.btn-gold-sm svg, .btn-gold-lg svg, .btn-play-now svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-play-now {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 30px;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #241a08;
  background: linear-gradient(115deg, var(--gold-deep) 0%, var(--gold-shine) 45%, var(--gold-deep) 100%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(var(--gold-rgb),0.4);
  transition: background-position 0.4s var(--ease-out), transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-play-now svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .btn-play-now:hover { background-position: 100% 0%; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--gold-rgb),0.55); } }

.btn-ghost-lg {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 30px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #f8f1e0;
  --edge-line: rgba(255,255,255,0.35);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-ghost-lg:hover { --edge-line: var(--gold-h1); background-color: rgba(255,255,255,0.08); }

.hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }

/* ============================================
   Hero
   ============================================ */
.hero { position: relative; overflow: hidden; padding: 156px 0 128px; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { position: absolute; left: 0; top: -14%; width: 100%; height: 118%; object-fit: cover; object-position: 82% center; }
/* darkness behind the nav, above the sun rays, so the links stay readable without a bar */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 260px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,5,0.9) 0, rgba(10,8,5,0.78) 90px, rgba(10,8,5,0.32) 180px, rgba(10,8,5,0) 260px);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    /* top: the art rises out of darkness, so the nav needs no bar */
    linear-gradient(180deg, rgba(10,8,5,0.97) 0, rgba(10,8,5,0.92) 84px, rgba(10,8,5,0.5) 170px, rgba(10,8,5,0.16) 250px, rgba(10,8,5,0) 340px),
    /* bottom: the art washes out into the torn parchment */
    linear-gradient(0deg, rgba(232,214,178,0.95) 0, rgba(206,172,116,0.74) 90px, rgba(160,122,70,0.4) 200px, rgba(120,90,50,0.14) 300px, transparent 390px),
    /* centred copy: a soft dark pool behind it */
    radial-gradient(ellipse 62% 78% at 50% 52%, rgba(30,24,16,0.68) 0%, rgba(30,24,16,0.42) 55%, rgba(30,24,16,0.12) 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero-left { max-width: 860px; margin: 0 auto; }

.hero-left h1 {
  font-size: clamp(3.1rem, 7vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
}
.h1-pre {
  display: block;
  margin-bottom: 6px;
  font-size: 0.42em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-lede { color: #f1ece0; font-size: 1.12rem; max-width: 54ch; line-height: 1.7; margin: 0 auto 40px; text-shadow: 0 1px 14px rgba(0,0,0,0.75); }

/* ============================================
   Countdown — forged frame: gold corner brackets, hairline dividers,
   engraved numerals. Gold and bronze only.
   ============================================ */
.countdown-wrap {
  --corner: rgba(255,222,150,0.95);
  position: relative;
  display: inline-block;
  padding: 20px 30px 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--gold-light-rgb),0.10), transparent 60%),
    linear-gradient(180deg, rgba(18,14,9,0.78), rgba(18,14,9,0.55));
  border: 1px solid rgba(var(--gold-h1-rgb),0.22);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,236,190,0.10), 0 18px 40px rgba(0,0,0,0.38);
}
/* corner brackets, set just outside the frame */
.countdown-wrap::before {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--corner), var(--corner)) top left / 16px 1px,
    linear-gradient(var(--corner), var(--corner)) top left / 1px 16px,
    linear-gradient(var(--corner), var(--corner)) top right / 16px 1px,
    linear-gradient(var(--corner), var(--corner)) top right / 1px 16px,
    linear-gradient(var(--corner), var(--corner)) bottom left / 16px 1px,
    linear-gradient(var(--corner), var(--corner)) bottom left / 1px 16px,
    linear-gradient(var(--corner), var(--corner)) bottom right / 16px 1px,
    linear-gradient(var(--corner), var(--corner)) bottom right / 1px 16px;
  background-repeat: no-repeat;
}
/* gleam along the top edge */
.countdown-wrap::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,230,170,0.85), transparent);
}
.countdown-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e3c68a;
  white-space: nowrap;
}
.countdown-head::before,
.countdown-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-h1-rgb),0.6));
}
.countdown-head::after { background: linear-gradient(90deg, rgba(var(--gold-h1-rgb),0.6), transparent); }

.countdown { display: flex; align-items: center; justify-content: center; gap: 22px; }
.unit { display: flex; flex-direction: column; align-items: center; min-width: 64px; overflow: hidden; }
.num {
  display: inline-block;
  font-family: var(--font-numeral);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  background: linear-gradient(180deg, #fff4d6 0%, var(--gold-warm) 42%, var(--gold-bronze) 78%, var(--gold-bronze-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(240,190,90,0.22));
}
.num.is-flipping { animation: num-roll 0.45s var(--ease-out); }
@keyframes num-roll {
  0% { transform: translateY(-45%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.unit-label {
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b3a081;
}
/* hairline divider, brightest at its centre */
.count-sep {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  margin: 4px 0 20px;
  background: linear-gradient(180deg, transparent, rgba(var(--gold-light-rgb),0.7) 50%, transparent);
}
.countdown-date {
  margin: 14px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--gold-h1-rgb),0.16);
  font-size: 0.8rem;
  text-align: center;
  color: #a89a80;
}
@media (prefers-reduced-motion: reduce) {
  .num.is-flipping { animation: none; }
}

/* eyebrow tag: rankings heading */
.season-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-h1);
  --edge-line: rgba(var(--gold-h1-rgb), 0.6);
  padding: 5px 14px;
  margin-bottom: 16px;
}

/* ============================================
   Social rail — fixed to the viewport, stays through scroll
   ============================================ */
.social-rail {
  position: fixed;
  z-index: 60;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.social-rail::before, .social-rail::after {
  content: "";
  width: 1px;
  height: 30px;
  background: linear-gradient(rgba(var(--gold-rgb),0), var(--gold), rgba(var(--gold-rgb),0));
}
.hero-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  --edge-line: rgba(var(--gold-rgb),0.6);
  background-color: rgba(20, 16, 10, 0.8);
  color: #f1ece0;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}
.hero-social-icon svg { width: 21px; height: 21px; }
@media (hover: hover) and (pointer: fine) {
.hero-social-icon:hover {
  --edge-line: var(--gold-h1);
  color: var(--gold-h1);
  transform: translateX(4px);
  box-shadow: inset 0 0 16px rgba(var(--gold-light-rgb), 0.35);
}
}
@media (prefers-reduced-motion: reduce) {
  .hero-social-icon:hover { transform: none; }
}
@media (max-width: 980px) {
  .social-rail { display: none; }
}
/* short viewports (laptops): anchor the rail to the bottom so the rising
   Discord label has room above it without running into the header */
@media (max-height: 820px) {
  .social-rail { top: auto; bottom: 24px; transform: none; }
}
@media (max-height: 570px) {
  .rail-callout { display: none; }
}

/* Discord call-out — for the first ~10s after landing the Discord tile lights
   up, sends out blade-shaped sonar rings, the icon waves, and a label slides
   out beside it. Five cycles, then it settles; the label returns on hover. */
.rail-discord { position: relative; display: block; width: 50px; height: 50px; }
.rail-discord .hero-social-icon { position: relative; z-index: 1; overflow: hidden; }
.rail-discord:hover .hero-social-icon,
.rail-discord.is-calling .hero-social-icon {
  --edge-line: var(--gold-h1);
  border-color: var(--edge-line);
  color: var(--gold-h1);
  box-shadow: inset 0 0 16px rgba(var(--gold-light-rgb), 0.35);
}
.rail-discord:hover .hero-social-icon { transform: translateX(4px); }

/* sonar ring: a hollow frame in the same cut shape, growing and fading */
.rail-beacon {
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: var(--gold-h1);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
}
.rail-discord.is-calling .rail-beacon { animation: rail-sonar 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) 5; }
@keyframes rail-sonar {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* the icon waves hello once per cycle */
.rail-discord .hero-social-icon svg { transform-origin: 50% 70%; }
.rail-discord.is-calling .hero-social-icon svg { animation: rail-wave 1.8s ease-in-out 5; }
@keyframes rail-wave {
  0%, 55%, 100% { transform: rotate(0); }
  62% { transform: rotate(-14deg); }
  69% { transform: rotate(11deg); }
  76% { transform: rotate(-7deg); }
  83% { transform: rotate(3deg); }
}

/* light sweeping across the tile */
.rail-discord .hero-social-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 230, 170, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.rail-discord.is-calling .hero-social-icon::after { animation: rail-sheen 1.8s ease-in-out 5; }
@keyframes rail-sheen {
  0%, 20% { transform: translateX(-120%); }
  50%, 100% { transform: translateX(120%); }
}

/* the label: vertical, rising out of the rail's gold line above the tile, so it
   stays inside the rail's own column and never covers hero copy */
.rail-callout {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 54px);
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--gold-pale), var(--gold-h1) 60%, var(--gold-bronze));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  /* rotated 180deg, so the element's top edge sits next to the tile:
     clipping from the bottom and releasing makes the text grow upward */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.35s ease;
  pointer-events: none;
}
.rail-discord.is-calling .rail-callout,
.rail-discord:hover .rail-callout,
.rail-discord:focus-visible .rail-callout {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .rail-discord.is-calling .rail-beacon,
  .rail-discord.is-calling .hero-social-icon svg,
  .rail-discord.is-calling .hero-social-icon::after { animation: none; }
  .rail-callout { clip-path: none; opacity: 0; transition: opacity 0.3s ease; }
  .rail-discord.is-calling .rail-callout, .rail-discord:hover .rail-callout, .rail-discord:focus-visible .rail-callout { clip-path: none; opacity: 1; }
  .rail-discord:hover .hero-social-icon { transform: none; }
}

/* ============================================
   Back to top
   ============================================ */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 48px;
  height: 48px;
  border: none;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-deep));
  color: #241a08;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(36,29,20,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s ease, visibility 0.2s; }
  .back-to-top:hover { transform: none; }
}

/* ============================================
   Sunbeams — three pre-rendered ray layers (blur and fade baked into the
   images) drifting at different tempos, plus a breathing sun core.
   Only transform/opacity animate, so it all stays on the GPU compositor.
   ============================================ */
.sunbeams {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.rays {
  position: absolute;
  inset: -6% -25% 0 -25%;
  background: center top / 100% 100% no-repeat;
  transform-origin: 58% 0%;
  will-change: transform, opacity;
}
.rays-a { background-image: url("assets/rays-a.webp"); animation: rays-sway-a 5s ease-in-out infinite alternate; }
.rays-b { background-image: url("assets/rays-b.webp"); animation: rays-sway-b 3.6s ease-in-out infinite alternate; }
.rays-c { background-image: url("assets/rays-c.webp"); animation: rays-flare 2.8s ease-in-out infinite alternate; }
/* hero scrolled out of view: stop animating what nobody can see */
.hero.is-offscreen .rays,
.hero.is-offscreen .sunbeams::after { animation-play-state: paused; }
@keyframes rays-sway-a {
  0% { opacity: 0.7; transform: rotate(-3deg); }
  100% { opacity: 1; transform: rotate(3deg); }
}
@keyframes rays-sway-b {
  0% { opacity: 1; transform: rotate(2.5deg); }
  100% { opacity: 0.55; transform: rotate(-2.5deg); }
}
@keyframes rays-flare {
  0% { opacity: 0.2; transform: rotate(-1.2deg); }
  100% { opacity: 1; transform: rotate(1.8deg); }
}
/* the sun itself, bleeding in from above */
.sunbeams::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 58%;
  top: 0;
  width: 70%;
  height: 55%;
  transform: translate(-50%, -45%);
  background: radial-gradient(ellipse at center, rgba(255, 236, 190, 0.7) 0%, rgba(255, 214, 140, 0.3) 30%, transparent 65%);
  animation: sun-pulse 3.2s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes sun-pulse {
  0% { opacity: 0.7; transform: translate(-50%, -45%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -45%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .rays, .sunbeams::after { animation: none; }
}
@media (max-width: 640px) {
  .sunbeams { opacity: 0.7; }
}

/* ============================================
   Core Features — plain on cream, no card chrome
   ============================================ */
/* ============================================
   Parchment — Features + News sit on one sheet of paper whose torn top and
   bottom edges overlap the dark sections around it.
   ============================================ */
.parchment {
  position: relative;
  z-index: 2;
  /* the stains melt to plain cream where the torn strips (flat cream) take over */
  background:
    linear-gradient(180deg, var(--cream) 32px, rgba(239,235,226,0) 200px, rgba(239,235,226,0) calc(100% - 240px), var(--cream) calc(100% - 32px)),
    url("assets/paper.jpg") center / 100% 100% no-repeat,
    var(--cream);
}
.torn {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 1600px 80px;
}
/* strip art: torn paper edge sits 12–47px from the top of the 80px strip */
.torn-top { top: -48px; background-image: url("assets/torn-top.png"); }
.torn-bottom { bottom: -48px; background-image: url("assets/torn-bottom.png"); background-position: 37% 0; }
.torn-rank { top: -48px; z-index: 2; background-image: url("assets/torn-rank-top.png"); background-position: 22% 0; }
.torn-dark { top: -48px; background-image: url("assets/torn-dark-top.png"); background-position: 61% 0; }

.features {
  position: relative;
  padding: 88px 0 72px;
  /* glow starts below the torn strip so it never meets the strip's flat cream in a line */
  background: radial-gradient(ellipse 760px 380px at 50% 300px, rgba(var(--gold-rgb),0.11), transparent 70%);
}
.features-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 56px;
}
.features-title::before, .features-title::after {
  content: "";
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.features-title::after { background: linear-gradient(90deg, var(--gold), transparent); }
.ledger { max-width: 900px; margin: 0 auto; border-top: 1px solid rgba(var(--gold-deep-rgb), 0.3); }
.ledger-row {
  display: grid;
  grid-template-columns: 96px 92px 1fr;
  align-items: center;
  gap: 30px;
  padding: 28px 8px;
  border-bottom: 1px solid rgba(var(--gold-deep-rgb), 0.3);
  transition: background 0.25s ease;
}
.ledger-num {
  font-family: var(--font-numeral);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
}
.ledger-num::before { content: "0"; }
.ledger-text h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ledger-text p { color: var(--ink-dim); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 52ch; }
@media (hover: hover) and (pointer: fine) {
  .ledger-row:hover { background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.1), transparent 70%); }
  .ledger-row:hover .feature-icon { box-shadow: 0 0 0 6px rgba(var(--gold-rgb),0.2), 0 14px 28px rgba(36,29,20,0.15); }
}
@media (max-width: 640px) {
  .ledger-row { grid-template-columns: 64px 1fr; gap: 6px 18px; padding: 22px 0; }
  .ledger-num { grid-row: 1; grid-column: 1; text-align: left; font-size: 2.2rem; align-self: center; }
  .feature-icon { grid-row: 1; grid-column: 2; width: 64px; height: 64px; margin: 0; }
  .ledger-text { grid-column: 1 / -1; }
}
.feature-icon { box-shadow: 0 0 0 6px rgba(var(--gold-rgb),0.2), 0 14px 28px rgba(36,29,20,0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .feature:hover { transform: none; }
}
.feature-icon {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #fff 0%, var(--cream) 70%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb),0.12), 0 10px 24px rgba(36,29,20,0.1);
  transition: box-shadow 0.25s ease;
  overflow: hidden;
}
.feature-icon img { width: 100%; height: 100%; object-fit: cover; }
.feature-icon-fallback { display: none; width: 44px; height: 44px; }

/* ============================================
   News — dated chronicle cards; the art melts into the card body
   ============================================ */
.news { position: relative; padding: 24px 0 140px; }
.news-nav { display: flex; justify-content: flex-end; gap: 10px; margin: -24px 0 16px; }
.news-arrow {
  display: grid; place-items: center; width: 46px; height: 46px; cursor: pointer;
  color: var(--ink); background: rgba(255, 252, 245, 0.85);
  border: 1px solid rgba(var(--gold-deep-rgb), 0.5); border-radius: 3px;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.news-arrow svg { width: 18px; height: 18px; }
.news-arrow:first-child svg { transform: rotate(180deg); }
.news-arrow:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .news-arrow:not(:disabled):hover { background: var(--gold); color: #241a08; } }
.news-track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  padding: 6px 4px 26px;
  margin: 0 -4px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  overscroll-behavior-x: contain;
}
.news-track:focus-visible { outline-offset: 4px; }
.news-track > .news-card { flex: 0 0 min(470px, 84vw); scroll-snap-align: start; }
.news-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,253,248,0.55), rgba(255,252,245,0.92) 45%);
  border: 1px solid rgba(var(--gold-deep-rgb),0.22);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 34px rgba(70,48,18,0.10);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
.news-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  transition: transform 0.6s var(--ease-out);
}
.news-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 0 24px 24px; margin-top: -26px; }
.news-date {
  --cut: 6px;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2b1d07;
  background: linear-gradient(180deg, #ffe3a1, var(--gold));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.news-card h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.news-card h3 a { color: var(--ink); transition: color 0.15s ease; }
.news-card h3 a:hover { color: var(--gold-text); }
.news-card p { color: var(--ink-dim); font-size: 0.9rem; line-height: 1.6; margin: 0 0 20px; flex: 1; }
.news-more { align-self: flex-start; gap: 8px; min-height: 36px; padding: 0 16px; font-size: 0.74rem; letter-spacing: 0.06em; --edge-line: rgba(36,29,20,0.35); }
.news-more svg, .news-all svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .news-more:hover svg, .news-all:hover svg { transform: translateX(3px); } }
.news-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 40px auto 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.news-all:hover { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .news-card:hover { transform: translateY(-4px); border-color: rgba(var(--gold-deep-rgb),0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 22px 42px rgba(70,48,18,0.16); }
  .news-card:hover .news-media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .news-card:hover, .news-card:hover .news-media img { transform: none; }
}

/* ============================================
   Scroll reveal
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   Ornate frame — bold corner treatment for key panels
   ============================================ */
.ornate { position: relative; }
.ornate::before, .ornate::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold);
  pointer-events: none;
  z-index: 3;
}
.ornate::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.ornate::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* ============================================
   Roadmap: sticky steps. The big medal on the left stays put and changes as each step passes the middle of the screen.
   ============================================ */
.roadmap { position: relative; padding: 110px 0 60px; }
.roadmap-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.roadmap-media img { width: 100%; height: 100%; object-fit: cover; }
.roadmap-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,16,10,0.96) 0, rgba(20,16,10,0.6) 110px, rgba(20,16,10,0) 260px),
    linear-gradient(180deg, rgba(20,16,10,0.55), rgba(20,16,10,0.88) 70%, var(--ink));
}
.roadmap-inner { position: relative; z-index: 1; }
.roadmap h2 { font-size: clamp(2.1rem, 4vw, 3rem); color: #f8f1e0; margin-bottom: 16px; }
.section-lede { color: #d8cbaf; max-width: 58ch; font-size: 1.04rem; margin: 0 0 40px; }

.steps-layout { display: grid; grid-template-columns: 5fr 6fr; gap: 70px; align-items: start; }
.steps-stage { position: sticky; top: 0; height: 100vh; }
.stage-block {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
  pointer-events: none;
}
.stage-block.is-active { opacity: 1; transform: none; }
.stage-block .waypoint-num { margin: 30px 0 0; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.2em; }
.big-medal {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 190px; height: 190px;
  border-radius: 50%;
  color: #3a2608;
  background: radial-gradient(circle at 38% 28%, #fff4d6, var(--gold-warm) 45%, var(--gold-deep) 100%);
  border: 2px solid #ffe3a1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -10px 20px rgba(120,80,20,0.35), 0 0 46px rgba(var(--gold-h1-rgb),0.5);
  overflow: hidden;
}
.big-medal::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(var(--gold-light-rgb),0.6); pointer-events: none; }
.big-medal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.big-medal img + svg { display: none; }
.big-medal svg { width: 74px; height: 74px; }
.steps { display: grid; }
.step { display: flex; align-items: center; min-height: 72vh; padding: 20px 0; }
.step-medal { display: none; }
.waypoint-card {
  background: rgba(20,16,10,0.72);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 28px 30px;
  opacity: 0.35;
  transform: translateX(16px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease-out), border-color 0.5s ease;
}
.step.is-current .waypoint-card { opacity: 1; transform: none; border-color: rgba(var(--gold-h1-rgb), 0.55); }
.waypoint-num { display: block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-h1); margin-bottom: 8px; }
.waypoint-card h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 800; color: #f8f1e0; margin-bottom: 10px; }
.waypoint-card p { color: #cabb9e; font-size: 1rem; margin: 0; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .stage-block, .waypoint-card { transition: none; }
  .stage-block { transform: none; }
  .waypoint-card { opacity: 1; transform: none; }
}
@media (min-width: 901px) { .step .waypoint-num { display: none; } }
@media (max-width: 900px) {
  .steps-layout { grid-template-columns: 1fr; gap: 0; }
  .steps-stage { display: none; }
  .step { display: grid; grid-template-columns: 84px 1fr; column-gap: 20px; align-items: start; min-height: 0; padding: 14px 0; }
  .step-medal { display: flex; width: 84px; height: 84px; }
  .step-medal svg { width: 34px; height: 34px; }
  .step-medal::before { inset: -6px; }
  .waypoint-card { opacity: 1; transform: none; padding: 20px 22px; }
}

/* ============================================
   Rankings — immersive dark panel, medal rows
   ============================================ */
.rankings { position: relative; padding: 110px 0 140px; }
.rankings-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.rankings-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(0.8); }
.rankings-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(18,14,9) 0, rgb(18,14,9) 36px, rgba(18,14,9,0.7) 120px, rgba(18,14,9,0) 300px),
    linear-gradient(0deg, rgb(11,9,7) 0, rgba(11,9,7,0.7) 110px, rgba(11,9,7,0) 260px),
    linear-gradient(160deg, rgba(20,16,10,0.94), rgba(20,16,10,0.86));
}

.rankings-inner { position: relative; z-index: 1; }
.rankings-copy { text-align: center; max-width: 560px; margin: 0 auto 48px; }
.rankings-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); color: #f8f1e0; margin: 14px 0; }
.rankings-copy p { color: #cabb9e; font-size: 1.02rem; margin: 0; }

.rank-board {
  display: grid;
  grid-template-columns: 1fr 1fr 0.92fr;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.rank-col { padding: 30px 30px 26px; min-width: 0; }
.rank-col + .rank-col { border-left: 1px solid rgba(255,255,255,0.08); }
.rank-col-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #f8f1e0;
}
.rank-col-title svg { width: 22px; height: 22px; color: var(--gold-h1); flex-shrink: 0; }
.rank-col-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--gold-h1-rgb),0.25);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f846f;
}
.castle-list, .rank-list { list-style: none; margin: 0; padding: 0; }

.castle-row, .rank-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 7px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s ease;
}
.castle-row { grid-template-columns: 30px 1fr auto; }
.rank-row { grid-template-columns: 30px 38px 1fr auto; }
.castle-row:hover, .rank-row:hover { background: rgba(255,255,255,0.04); }

.castle-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #4a3d2a, #1d1710);
  border: 1px solid rgba(var(--gold-h1-rgb),0.45);
  color: var(--gold-h1);
}
.castle-seal svg { width: 15px; height: 15px; }
.castle-name { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: #f1e9d6; }
.castle-owner { font-size: 0.84rem; font-weight: 800; color: var(--gold-h1); text-align: right; }
.castle-owner.is-free { font-weight: 600; color: #8f846f; }

.rank-medal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--font-numeral);
  font-weight: 700;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.07);
  color: #cabb9e;
  border: 1px solid rgba(255,255,255,0.14);
}
.rank-gold .rank-medal { background: linear-gradient(180deg, #ffe9ae, #c9962f); color: #3a2a0a; border-color: #ffe9ae; box-shadow: 0 0 14px rgba(255, 214, 137, 0.5); }
.rank-silver .rank-medal { background: linear-gradient(180deg, #eef1f4, #a9b1b8); color: #2a2e33; border-color: #eef1f4; box-shadow: 0 0 12px rgba(200, 210, 220, 0.4); }
.rank-bronze .rank-medal { background: linear-gradient(180deg, #e3a468, #9c6432); color: #341f0a; border-color: #e3a468; box-shadow: 0 0 12px rgba(200, 140, 80, 0.4); }
/* race portrait: a small gold-ringed medallion; until the portrait file exists
   the race initial shows through as an engraved monogram */
.rank-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 40% 30%, #4a3d2a, #1d1710);
  box-shadow: 0 0 0 1.5px rgba(var(--gold-h1-rgb),0.65), 0 0 0 3px rgba(20,16,10,0.9), 0 0 0 4px rgba(var(--gold-h1-rgb),0.25);
}
.rank-avatar::before {
  content: attr(data-initial);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-h1);
}
.rank-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rank-gold .rank-avatar { box-shadow: 0 0 0 1.5px #ffe3a1, 0 0 0 3px rgba(20,16,10,0.9), 0 0 0 4px rgba(255,214,137,0.5), 0 0 14px rgba(255,214,137,0.35); }
.rank-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rank-name { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: #f8f1e0; }
.rank-clan { font-size: 0.74rem; color: #a89a80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-score { font-family: var(--font-numeral); font-size: 1rem; font-weight: 700; color: var(--gold-h1); }

/* the tavern: Discord card with a reward hook, art bleeding into the panel */
.tavern-card { display: flex; flex-direction: column; padding: 0; position: relative; }
.tavern-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-h1), transparent);
}
.tavern-media { aspect-ratio: 16 / 9; overflow: hidden; }
.tavern-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}
.tavern-body { display: flex; flex-direction: column; flex: 1; padding: 0 28px 30px; margin-top: -30px; position: relative; }
.tavern-body h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: #f8f1e0; margin: 0 0 4px; }
.tavern-sub { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-h1); margin-bottom: 16px; }
.tavern-body p { color: #d8cbaf; font-size: 0.9rem; line-height: 1.6; margin: 0 0 12px; }
.tavern-body strong { color: #ffe3a1; }
.tavern-perks {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 24px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(var(--gold-h1-rgb),0.18);
}
.tavern-perks li { position: relative; padding-left: 20px; color: #cabb9e; font-size: 0.86rem; line-height: 1.45; }
.tavern-perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--gold-h1);
  transform: rotate(45deg);
}
.tavern-cta { gap: 10px; margin-top: 10px; width: 100%; }
.tavern-cta svg { width: 20px; height: 20px; }

/* ============================================
   Footer
   ============================================ */
.site-footer { position: relative; background: #0b0907; padding: 88px 0 0; color: #a89a80; }

/* call to action band */
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 34px 40px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--gold-light-rgb),0.14), transparent 55%),
    linear-gradient(180deg, #17120c, #120e09);
  border: 1px solid rgba(var(--gold-h1-rgb),0.28);
  border-radius: 4px;
  position: relative;
}
.footer-cta::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,226,160,0.8), transparent);
}
.footer-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-h1); }
.footer-cta h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: #f8f1e0; margin: 6px 0 8px; }
.footer-cta p { margin: 0; color: #b3a589; font-size: 0.95rem; max-width: 52ch; }
.footer-cta-actions { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }

/* link columns */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 1fr 1fr 1.15fr;
  gap: 40px;
  padding: 64px 0 56px;
}
.footer-logo { display: block; width: 210px; height: auto; margin: -8px 0 14px -6px; }
.footer-brand p { margin: 0 0 22px; font-size: 0.9rem; line-height: 1.65; color: #9d917a; max-width: 34ch; }
.footer-socials { display: flex; gap: 12px; }
.hero-social-icon.footer-social-icon { width: 40px; height: 40px; --cut: 9px; }
.footer-social-icon svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .footer-social-icon:hover { transform: translateY(-2px); } }

.footer-col h3 {
  margin: 4px 0 18px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-h1);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.9rem; color: #b9ad95; transition: color 0.15s ease; }
.footer-col a:hover { color: #f8f1e0; }

.footer-status dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-status dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer-status dt { font-size: 0.84rem; color: #8f846f; }
.footer-status dd { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 700; color: #f1e9d6; text-align: right; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 980px) {
  .main-nav { display: none; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .rankings-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .header-inner { height: 64px; gap: 16px; }
  .hero { padding: 108px 0 72px; }
  .hero-actions { margin-bottom: 28px; }
  .countdown-wrap { padding: 16px 16px 14px; display: block; }
  .countdown { gap: 8px; justify-content: space-between; }
  .unit { min-width: 0; }
  .num { font-size: 1.9rem; }
  .unit-label { font-size: 0.56rem; letter-spacing: 0.14em; }
  .brand-logo { height: 50px; }
  .account-switch { height: 38px; }
  .account-switch a { font-size: 0.72rem; letter-spacing: 0.06em; }
  .acct-signin { padding: 0 20px 0 12px; }
  .acct-signup { padding: 0 14px 0 24px; }
  .features-grid { grid-template-columns: 1fr; }
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }

  .path-line { left: 27px; }
  .waypoint { grid-template-columns: 56px 1fr; column-gap: 20px; padding: 20px 0; }
  .waypoint-marker { grid-column: 1; width: 56px; height: 56px; }
  .waypoint-card, .waypoint-right .waypoint-card { grid-column: 2; grid-row: 1; text-align: left; }
}

/* ============================================
   Blade edge — the site's shared shape language. Controls, tags and icon
   tiles get two opposite corners cut at 45deg (top-left, bottom-right).
   Outlined pieces draw their border in --edge-line and repaint the two cut
   diagonals with small gradient squares, so the outline follows the cut.
   Round shapes stay only where they are literal medallions (feature icons,
   rank medals, roadmap markers).
   ============================================ */
@property --edge-line {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(217, 173, 80, 0.5);
}
.btn-gold-lg, .btn-gold-sm, .back-to-top,
.btn-ghost-lg, .btn-ghost-sm, .account-switch, .hero-social-icon, .season-tag, .rank-class {
  --cut: 10px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.btn-gold-sm { --cut: 8px; }
.back-to-top { --cut: 11px; }
.hero-social-icon { --cut: 12px; }
.season-tag, .rank-class { --cut: 6px; }
.btn-ghost-lg, .btn-ghost-sm, .account-switch, .hero-social-icon, .season-tag, .rank-class {
  border: 1px solid var(--edge-line);
  border-radius: 0;
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--edge-line) calc(50% - 0.6px), var(--edge-line) calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--edge-line) calc(50% - 0.6px), var(--edge-line) calc(50% + 0.6px), transparent calc(50% + 0.6px));
  background-size: var(--cut) var(--cut);
  background-position: top left, bottom right;
  background-repeat: no-repeat;
  background-origin: border-box;
}
.btn-ghost-lg { transition: --edge-line 0.2s ease, background-color 0.2s ease; }
.btn-ghost-sm, .account-switch { transition: --edge-line 0.2s ease, background-color 0.2s ease, color 0.15s ease; }
.hero-social-icon { transition: --edge-line 0.2s ease, color 0.15s ease, transform 0.2s var(--ease-out), box-shadow 0.25s ease; }
.btn-ghost-lg:hover, .btn-ghost-sm:hover, .account-switch:hover, .hero-social-icon:hover { border-color: var(--edge-line); }

/* ============================================
   Parchment pass — responsive
   ============================================ */
@media (max-width: 980px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-card:last-child { grid-column: 1 / -1; }
  .rank-board { grid-template-columns: 1fr; }
  .rank-col + .rank-col { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
  .tavern-media { aspect-ratio: 21 / 9; }
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
  .rank-col { padding: 24px 18px 20px; }
  .tavern-body { padding: 0 18px 24px; }
  .torn { height: 56px; background-size: 1120px 56px; }
  .torn-top, .torn-dark { top: -34px; }
  .torn-bottom { bottom: -34px; }
}

/* footer — responsive */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-status { grid-column: span 3; }
}
@media (max-width: 760px) {
  .footer-cta { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-status { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}