/* ==========================================================================
   Raven Network design system
   One stylesheet, ordered: fonts, tokens, reset, primitives, components, pages.
   ========================================================================== */

/* Self-hosted so the type lands on the first paint: one origin, no stylesheet
   in front of the font files. All four faces are SIL Open Font License. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/hanken-grotesk.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mr Dafoe';
  src: url('../assets/fonts/mr-dafoe.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --raven: #FFD949;            /* primary accent, sampled from the wordmark */
  --raven-bright: #FFE694;     /* accent text on dark */
  --raven-glow: #FFC93D;       /* glows and particles */
  --raven-deep: #8A5A0C;       /* accent on light surfaces */
  --ember: #f5a94f;            /* warm counterpoint, used sparingly */

  --night: #14110B;
  --night-soft: #1E1913;
  --night-raised: #262119;
  --scene-top: #241E14;
  --scene-mid: #1C1710;
  --scene-deep: #16120C;

  --text: #FFF8E7;
  --text-soft: #D9D2C2;
  --line: rgba(255, 226, 148, 0.17);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  --radius: 16px;
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3);

  /* Minecraft-style hard-edged buttons */
  --mc-ink: #2A1C05;
  --mc-bevel: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 2px 0 0 rgba(255, 255, 255, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.3), inset -2px 0 0 rgba(0, 0, 0, 0.14);
  --mc-bevel-soft: inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 2px 0 0 rgba(255, 255, 255, 0.05), inset 0 -3px 0 rgba(0, 0, 0, 0.32), inset -2px 0 0 rgba(0, 0, 0, 0.16);

  /* Raven feather. Masked, so it always inherits currentColor. */
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8c-3.9 3.4-6 7.9-5.7 12.6l4.9-3.6v10.4h1.6V10.8l4.9 3.6C18 9.7 15.9 5.2 12 1.8Z'/%3E%3C/svg%3E");

  --container: 1240px;
  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh; display: flex; flex-direction: column;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--scene-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--raven); color: #fff; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--raven-bright);
  outline-offset: 3px;
  border-radius: 999px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--night-raised); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 16px; text-decoration: none; font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

.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;
}

/* ---------- Scrollbar ----------
   The thumb wears the same skin as the buttons. Chrome ignores
   ::-webkit-scrollbar once scrollbar-color is set, so the standard properties
   sit behind a query only engines without the pseudo-element answer. */
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: var(--scene-deep); border-left: 1px solid var(--line); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FFE066, #E0A800);
  background-clip: padding-box;
  border: 3px solid transparent; border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(21, 10, 34, 0.3);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FFEA9A, #EEBB1F); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: var(--scene-deep); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #E0A800 var(--scene-deep); }
}

/* ---------- Background scene ---------- */
.bg-scene {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, var(--scene-top) 0%, var(--scene-mid) 50%, var(--scene-deep) 100%);
}
canvas.sparks {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  width: 100%; height: 100%;
}

/* ---------- Utilities ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.section { padding-block: clamp(72px, 10vw, 128px); }

.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--raven-bright);
  margin-bottom: 18px;
}
.kicker::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}

.display {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.015em;
  color: var(--text); text-wrap: balance;
}
h1.display { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; }
h2.display { font-size: clamp(28px, 3.6vw, 44px); }
h3.display { font-size: clamp(20px, 2.2vw, 26px); }
.accent-word { color: var(--raven); }

.lead { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--text-soft); max-width: 62ch; }
.center-cta { text-align: center; }

.cmd-inline { font-family: var(--font-mono); font-size: 0.92em; color: var(--raven-bright); }

/* ---------- Command chip ---------- */
.cmd-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  color: var(--raven-bright);
  background: rgba(24, 20, 12, 0.72);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 16px; box-shadow: var(--bevel);
  white-space: nowrap;
}
.cmd-chip .cmd-prefix { color: var(--text-soft); user-select: none; }
/* Reads as an instruction rather than a control: white sentence, the command
   itself in the accent, and no hover or press movement. */
.cmd-chip.chip-static { color: #fff; }
.cmd-chip.chip-static .cmd-accent { color: var(--raven-bright); }
/* Not a button: it neither copies nor reacts to the pointer. */
.cmd-chip.chip-static { cursor: default; }
button.cmd-chip { transition: border-color 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-soft); }
button.cmd-chip:hover { border-color: var(--raven); transform: translateY(-2px); }
button.cmd-chip:active { transform: scale(0.98); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 26px; border-radius: 999px;
  border: 2px solid var(--mc-ink);
  font-weight: 800; font-size: 14px; letter-spacing: 0.05em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: var(--mc-bevel), 0 3px 0 var(--mc-ink);
  transition: filter 0.2s ease, transform 0.2s var(--ease-soft),
              box-shadow 0.2s var(--ease-soft), color 0.25s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--mc-bevel), 0 4px 0 var(--mc-ink); }
.btn:active { transform: translateY(2px); box-shadow: var(--mc-bevel), 0 1px 0 var(--mc-ink); }
/* icons placed directly in a button, not wrapped in .btn-ico */
.btn > svg { width: 16px; height: 16px; flex: none; }
.btn-lg > svg { width: 17px; height: 17px; }

.btn .btn-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform 0.3s var(--ease-soft); }
.btn:hover .btn-ico { transform: translateX(3px); }
.btn .btn-ico svg { width: 15px; height: 15px; }

.btn .count-chip { margin-left: 2px; }
.btn-ghost .count-chip { background: rgba(255, 217, 73, 0.16); color: var(--raven-bright); }
.btn-lg { padding: 15px 38px; font-size: 15.5px; letter-spacing: 0.07em; }
.btn-lg .btn-ico svg { width: 17px; height: 17px; }

.btn-raven { background: linear-gradient(180deg, #FFE066, #E0A800); color: #3A2A05; }
.btn-ghost {
  background: linear-gradient(180deg, #4A3A18, #332711);
  color: var(--text);
  box-shadow: var(--mc-bevel-soft), 0 3px 0 var(--mc-ink);
}
.btn-ghost:hover { color: #fff; box-shadow: var(--mc-bevel-soft), 0 4px 0 var(--mc-ink); }
.btn-ghost:active { box-shadow: var(--mc-bevel-soft), 0 1px 0 var(--mc-ink); }
@media (max-width: 620px) { .btn { white-space: normal; text-align: center; } }

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
}
/* The dark bar is always on, at the top of the page as well as down it. It
   lives on this layer rather than on the nav itself so it can hang past the
   bar and dissolve, instead of ending on a straight edge. The text and pills
   above it stay at full strength. */
.site-nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + 30px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 21, 12, 0.94) 0%, rgba(26, 21, 12, 0.9) 58%, rgba(26, 21, 12, 0.62) 82%, rgba(26, 21, 12, 0) 100%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
}

.nav-inner {
  /* Same width and inset as the footer and the page container, so the bar, the
     content and the footer line up on one left and right edge. */
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 26px);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; flex: none;
  font-weight: 700; font-size: 14.5px;
  color: rgba(236, 230, 244, 0.85);
  transition: color 0.25s ease;
}
.nav-brand:hover { color: #fff; }
.nav-brand[aria-current="page"] { color: var(--raven-bright); }
.nav-brand img { width: 40px; height: 40px; }

.nav-links { display: flex; align-items: center; gap: clamp(2px, 0.8vw, 10px); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 700; font-size: 14.5px;
  color: rgba(236, 230, 244, 0.68);
  padding: 9px 12px; border-radius: 999px;
  transition: color 0.25s ease;
}
.nav-links a .nav-ico { width: 16px; height: 16px; flex: none; }
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: var(--raven-bright); }

.nav-pills { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
/* Nav pills are a matched pair: same height, radius and icon size, with a
   thin edge and a soft inner highlight instead of the heavy outline and hard
   drop shadow the in-page buttons wear. At bar scale that reads as clutter. */
/* Server IP button: a dark face lit from inside, with a glow ring behind it
   and a label that shimmers letter by letter. Highlight hue is Raven gold. */
.btn-glow {
  --glow-hue: 45deg;
  --glow-pad: 2px;
  --glow-radius: 12px;
  --glow-transition: 0.4s;
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 14px 0 15px;
  background-color: #1B1509; color: var(--raven-bright);
  border: solid 1px var(--line);
  border-radius: var(--glow-radius);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  white-space: nowrap; cursor: pointer; user-select: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 226, 148, 0.22), inset 0 2px 2px rgba(255, 226, 148, 0.16),
    inset 0 4px 4px rgba(255, 226, 148, 0.1), inset 0 8px 8px rgba(255, 217, 73, 0.06),
    inset 0 16px 16px rgba(255, 217, 73, 0.05),
    0 -1px 1px rgba(0, 0, 0, 0.02), 0 -2px 2px rgba(0, 0, 0, 0.03),
    0 -4px 4px rgba(0, 0, 0, 0.05), 0 -8px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--glow-transition), border var(--glow-transition), background-color var(--glow-transition);
}
.btn-glow::before {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  inset: calc(0px - var(--glow-pad));
  border-radius: calc(var(--glow-radius) + var(--glow-pad));
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.67));
  box-shadow:
    0 -8px 8px -6px transparent inset, 0 -16px 16px -8px transparent inset,
    1px 1px 1px rgba(255, 226, 148, 0.14), 2px 2px 2px rgba(255, 226, 148, 0.07),
    -1px -1px 1px rgba(0, 0, 0, 0.13), -2px -2px 2px rgba(0, 0, 0, 0.07);
  transition: box-shadow var(--glow-transition), filter var(--glow-transition);
}
.btn-glow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background-image: linear-gradient(0deg, var(--raven-bright), hsl(var(--glow-hue) 100% 70%), hsla(var(--glow-hue) 100% 70% / 0.5), 8%, transparent);
  transition: opacity var(--glow-transition), filter var(--glow-transition);
}
.btn-glow-label { display: inline-flex; }
.btn-letter {
  position: relative; display: inline-block;
  color: rgba(255, 226, 148, 0.42);
  animation: letter-anim 2s ease-in-out infinite;
  transition: color var(--glow-transition), text-shadow var(--glow-transition);
}
@keyframes letter-anim {
  50% { text-shadow: 0 0 4px rgba(255, 217, 73, 0.6); color: var(--raven-bright); }
}
.btn-glow .count-chip { background: rgba(255, 255, 255, 0.1); color: var(--raven-bright); }

/* Hover lights the button white; the press below stays gold. */
/* Hover changes the label only: no rim light, no gradient underneath. */
.btn-glow:hover .btn-letter { animation: none; color: #FFC94F; text-shadow: 0 0 4px rgba(255, 186, 40, 0.38); }
.btn-glow:active {
  border: solid 1px hsla(var(--glow-hue) 100% 80% / 0.7);
  background-color: hsla(var(--glow-hue) 50% 20% / 0.5);
}
.btn-glow:active::before {
  box-shadow:
    0 -8px 12px -6px rgba(255, 226, 148, 0.75) inset,
    0 -16px 16px -8px hsla(var(--glow-hue) 100% 70% / 0.85) inset,
    1px 1px 1px rgba(255, 226, 148, 0.28), 2px 2px 2px rgba(255, 226, 148, 0.14),
    -1px -1px 1px rgba(0, 0, 0, 0.13), -2px -2px 2px rgba(0, 0, 0, 0.07);
}
.btn-glow:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); }
.btn-glow:active .btn-letter { animation: none; text-shadow: 0 0 3px hsla(var(--glow-hue) 100% 75% / 0.9); color: #FFF6D8; }
.btn-glow:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-letter { animation: none; color: var(--raven-bright); }
}
/* Discord button in Discord's own blurple, so it is recognisable at a glance.
   Squarer corners and sentence case set it apart from the yellow IP pill; the
   height matches so the two still sit on one line. */
.btn-discord {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 13px;
  background: #5865F2; color: #E4E4E7;
  border: 0; border-radius: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s ease-in, transform 0.2s var(--ease-soft);
}
.btn-discord:hover { background: #3B4AED; }
.btn-discord:active { transform: translateY(1px); }
.btn-discord svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.btn-discord .count-chip { background: rgba(255, 255, 255, 0.18); color: #fff; }

.count-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 2px 8px;
  background: rgba(27, 7, 51, 0.28); color: inherit;
  font-variant-numeric: tabular-nums;
}
.pill-discord .count-chip { background: rgba(255, 226, 148, 0.14); color: var(--raven-bright); }
/* The dot says the number is live rather than a total. It takes the pill's own
   colour, so it never fights the yellow or the brown. */
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #3FD07A; box-shadow: 0 0 4px rgba(63, 208, 122, 0.7); opacity: 0.9;
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; opacity: 0.9; } }

.nav-toggle {
  display: none; background: none; border: 0; padding: 10px;
  width: 46px; height: 46px; position: relative; z-index: 110;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--text);
  margin: 5px auto; border-radius: 2px;
  transition: transform 0.4s var(--ease-soft), opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav-pills { display: none; }
  .nav-links {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 100;
    flex-direction: column; justify-content: center; gap: 4px;
    background: rgba(24, 20, 12, 0.97);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .nav-links a {
    font-family: var(--font-display); font-size: 28px; letter-spacing: 0;
    color: var(--text); padding: 12px;
    transform: translateY(18px); opacity: 0;
    transition: transform 0.55s var(--ease-out), opacity 0.4s ease, color 0.25s ease;
  }
  .nav-links a .nav-ico { width: 20px; height: 20px; }
  .nav-links.open { opacity: 1; pointer-events: auto; }
  .nav-links.open a { transform: translateY(0); opacity: 1; }
  .nav-links.open a:nth-child(1) { transition-delay: 0.06s; }
  .nav-links.open a:nth-child(2) { transition-delay: 0.1s; }
  .nav-links.open a:nth-child(3) { transition-delay: 0.14s; }
  .nav-links.open a:nth-child(4) { transition-delay: 0.18s; }
  .nav-links.open a:nth-child(5) { transition-delay: 0.22s; }
  .nav-links.open a:nth-child(6) { transition-delay: 0.26s; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 24px) 0 72px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(133% 108% at 50% 42%, transparent 50%, rgba(20, 16, 6, 0.56) 100%),
    linear-gradient(180deg, rgba(24, 19, 8, 0.22) 0%, rgba(24, 19, 8, 0) 26%, rgba(24, 19, 8, 0) 62%, var(--scene-top) 98%);
}

.hero-stage {
  position: relative; z-index: 2;
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(18px, 3vw, 44px);
}
.hero-logo { justify-self: center; text-align: center; }
.hero-logo img {
  width: min(520px, 68vw); height: auto; margin-inline: auto;
  filter: drop-shadow(0 3px 6px rgba(20, 12, 2, 0.72)) drop-shadow(0 26px 56px rgba(60, 40, 4, 0.5));
  animation: logo-breathe 7s ease-in-out infinite;
}
@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
.hero-tag {
  margin: 20px 0 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 3.1vw, 38px); line-height: 1.05;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(10, 4, 20, 0.75);
}
.hero-sub {
  margin: 12px auto 0; max-width: 46ch;
  font-size: clamp(14.5px, 1.4vw, 16.5px); color: var(--text-soft);
  text-shadow: 0 1px 10px rgba(10, 4, 20, 0.8);
}

.hero-side {
  display: grid; gap: 16px; align-content: start;
  min-width: 248px; padding: 20px 22px;
  background: rgba(38, 32, 20, 0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--bevel);
  text-align: left;
}
.hs-row { display: grid; gap: 4px; padding: 0; background: none; border: 0; text-align: left; color: inherit; }
.hs-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft);
}
.hs-value {
  font-family: var(--font-mono); font-weight: 700; font-size: 15.5px;
  color: var(--raven-bright); line-height: 1.3;
  display: inline-flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.hs-value.num { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.05; }
.hs-value svg { width: 13px; height: 13px; color: var(--text-soft); flex: none; }
.hs-copy { cursor: pointer; font: inherit; transition: filter 0.2s ease; }
.hs-copy:hover { filter: brightness(1.18); }
.hs-copy:hover .hs-value svg { color: var(--raven-bright); }
.box-left { justify-self: end; }
.box-right { justify-self: start; }

.hero-cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--text-soft);
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 0.25s ease;
}
.hero-cue:hover { color: var(--raven-bright); }
.hero-cue svg { width: 16px; height: 16px; animation: cue-bob 2.2s ease-in-out infinite; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (max-width: 980px) {
  .hero-stage { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .hero-logo { order: -1; margin-bottom: 18px; }
  .box-left, .box-right { justify-self: center; width: min(100%, 340px); min-width: 0; }
}

/* ---------- Single-screen landing ----------
   Everything the landing page has to say fits one viewport: no scroll on a
   normal desktop. The stage is a flex column that distributes the space it is
   given, so the layout breathes on tall screens and compresses on short ones
   rather than overflowing. */
body.single-screen { overflow: hidden; }
@media (max-height: 640px), (max-width: 900px) {
  body.single-screen { overflow: auto; }   /* too short to fit honestly: allow scroll */
}

.stage-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.stage-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.stage-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 108% at 50% 42%, transparent 46%, rgba(14, 11, 4, 0.6) 100%),
    linear-gradient(180deg, rgba(18, 15, 6, 0.42) 0%, rgba(18, 15, 6, 0.12) 34%, rgba(18, 15, 6, 0.55) 82%, var(--scene-deep) 100%);
}
.stage-bg canvas.sparks { position: absolute; inset: 0; }

.stage {
  position: relative; z-index: 1;
  flex: 1 0 auto; min-height: 0;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(8px, 2vh, 26px)) clamp(20px, 4vw, 48px) clamp(10px, 2vh, 20px);
  display: flex; flex-direction: column;
  gap: clamp(16px, 3vh, 40px);
}

.stage-hero {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  min-height: 0;
}
/* the R sits beside the wordmark as one lockup, so the icon and the name both
   land without costing a second line of height on a one-screen page */
.stage-lockup {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 1.8vw, 24px);
}
.stage-mark {
  width: clamp(64px, 8.5vw, 108px); height: auto;
  filter: drop-shadow(0 4px 10px rgba(20, 12, 2, 0.6));
  animation: logo-breathe 7s ease-in-out infinite;
}
@media (max-width: 520px) {
  .stage-lockup { gap: 10px; }
  .stage-mark { width: 52px; }
}
.stage-logo {
  width: min(520px, 78vw); height: auto;
  filter: drop-shadow(0 3px 6px rgba(20, 12, 2, 0.72)) drop-shadow(0 22px 48px rgba(60, 40, 4, 0.5));
  animation: logo-breathe 7s ease-in-out infinite;
}
.stage-hero .hero-tag { margin: clamp(10px, 2vh, 20px) 0 0; }
.stage-hero .hero-sub { margin: 10px auto 0; }
/* Same IP button as the header, one source, sitting above the cards. */
.hero-ip { display: flex; justify-content: center; margin-top: clamp(14px, 2.4vh, 24px); }
.hero-ip .btn-glow { height: 44px; padding: 0 18px; }
/* Landing page variant: address on top, live count centred beneath it. */
/* Landing page variant: address and live count on one line. */
.btn-glow-stack { gap: 10px; padding: 0 22px; font-size: clamp(14.5px, 1.4vw, 16.5px); }
.btn-glow-sub {
  display: inline-flex; align-items: center; gap: 6px;
  /* Same face and size as the hero line above it, not the mono used elsewhere. */
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(14.5px, 1.4vw, 16.5px);
  color: var(--raven-bright); font-variant-numeric: tabular-nums;
}

/* Round action buttons under the address: a circle that stretches into a pill
   on hover, trading its mark for its label. Store wears the site yellow,
   Discord its own blurple. */
.hero-social {
  display: flex; justify-content: center; gap: 14px;
  margin-top: clamp(14px, 2.4vh, 22px);
}
.soc-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  text-decoration: none; cursor: pointer;
  transition: width 0.4s, border-radius 0.4s, filter 0.3s ease;
}
.soc-btn:hover { width: 170px; border-radius: 30px; filter: brightness(1.05); }
.soc-ico {
  width: 22px; height: 22px; flex: none;
  transition: opacity 0.3s;
}
.soc-btn:hover .soc-ico { opacity: 0; }
.soc-text {
  position: absolute; width: 170px; text-align: center; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  opacity: 0; transition: opacity 0.4s;
}
.soc-btn:hover .soc-text { opacity: 1; }
.soc-store { background: var(--raven); color: #201703; }
.soc-store .soc-ico { color: #201703; }
.soc-discord { background: #5865F2; color: #fff; }
.soc-discord .soc-ico { color: #fff; fill: currentColor; }
@media (max-width: 720px) {
  .hero-ip .btn-glow { max-width: 100%; }
}

/* Short screens: the landing page must still fit without scrolling, so the
   button and the cards give back the pixels the button costs. */
@media (max-height: 720px) {
  .hero-ip { margin-top: 10px; }
  .hero-ip .btn-glow { height: 36px; font-size: 14px; }
  .hero-social { margin-top: 10px; }
  .soc-btn { width: 42px; height: 42px; }
  .soc-btn:hover { width: 160px; }
}

@media (max-width: 900px) {
  .stage { gap: 22px; padding-bottom: 24px; }
}
@media (max-width: 460px) {
}

/* Short windows and small phones: claw back the last few dozen pixels so the
   page still lands on one screen instead of scrolling by a sliver. */
@media (max-height: 780px) {
  .stage { gap: clamp(12px, 2vh, 22px); padding-top: calc(var(--nav-h) + 8px); }
  .stage-logo { width: min(420px, 68vw); }
  .stage-hero .hero-tag { font-size: clamp(20px, 2.6vw, 30px); }
  .stage-hero .hero-sub { font-size: 14px; }
}
/* Narrow phones: the IP button carries a full domain, so a row of three
   cannot fit 360px without spilling sideways. Stack them full width and claw
   the height back from the logo and copy. */
@media (max-width: 520px) {
  .btn-lg { padding: 12px 20px; font-size: 13.5px; }
  .btn-lg > svg { width: 15px; height: 15px; }
  .stage-logo { width: min(260px, 72vw); }
  .stage-hero .hero-tag { font-size: 20px; margin-top: 8px; }
  .stage-hero .hero-sub { font-size: 12.5px; margin-top: 5px; max-width: 32ch; }
}

@media (max-width: 480px) {
  .stage { gap: 14px; padding-top: calc(var(--nav-h) + 6px); padding-bottom: 14px; }
  .stage-logo { width: min(300px, 76vw); }
  .stage-hero .hero-tag { font-size: 22px; margin-top: 10px; }
  .stage-hero .hero-sub { font-size: 13px; margin-top: 6px; max-width: 34ch; }
}

/* ---------- Short landing hero ----------
   The landing page is one screen plus the store. The hero deliberately stops
   short of the full viewport so the store section is already peeking, rather
   than hiding behind a scroll nobody makes. */
.hero-short {
  min-height: min(88dvh, 900px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 24px;
}
@media (max-width: 980px) {
  .hero-short { min-height: 0; padding-block: calc(var(--nav-h) + 40px) 56px; }
}

.section-store { padding-block: clamp(56px, 7vw, 92px); }

/* compact footer nav for the trimmed site */
.footer-mini { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-mini a { text-decoration: none; font-weight: 700; color: var(--text-soft); }
.footer-mini a:hover { color: var(--raven-bright); }

/* ---------- Features ---------- */
.features-head { text-align: center; max-width: 660px; margin-inline: auto; }
.features-head .kicker { justify-content: center; }
.features-head .lead { margin-inline: auto; }

.feature-row {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 80px); align-items: center;
  margin-top: clamp(64px, 8vw, 110px);
}
.feature-row.rev .feature-media { order: 2; }
.feature-media {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--bevel);
  background: rgba(24, 16, 34, 0.6);
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-media.slider { display: block; position: relative; overflow: hidden; }
.slider .slides { display: flex; height: 100%; transition: transform 0.6s var(--ease-out); }
.slider .slides img { width: 100%; height: 100%; object-fit: cover; flex: none; }
.slide-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(180deg, #4A3A18, #332711);
  border: 2px solid var(--mc-ink); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--mc-bevel-soft), 0 3px 0 var(--mc-ink);
  transition: filter 0.2s ease, color 0.25s ease;
}
.slide-btn:hover { filter: brightness(1.25); color: var(--raven-bright); }
.slide-btn:active { transform: translateY(calc(-50% + 2px)); box-shadow: var(--mc-bevel-soft), 0 1px 0 var(--mc-ink); }
.slide-btn.prev { left: 12px; }
.slide-btn.next { right: 12px; }
.slide-btn svg { width: 17px; height: 17px; }
.slide-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 2; }
.slide-dots span { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); transition: background-color 0.25s ease; }
.slide-dots span.on { background: var(--raven); }

.feature-body h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 20px;
}
.dot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.dot-list li {
  position: relative; padding-left: 24px;
  font-size: 15.5px; color: var(--text-soft); line-height: 1.55;
}
.dot-list li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 14px; height: 14px; background: var(--raven);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.dot-list li strong { color: var(--text); }

@media (max-width: 900px) {
  .feature-row, .feature-row.rev { grid-template-columns: 1fr; gap: 22px; margin-top: 64px; }
  .feature-row.rev .feature-media { order: 0; }
}

/* ---------- Split / about ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.about-split { margin-top: clamp(40px, 5vw, 64px); }
.about-p { font-size: 16.5px; color: var(--text-soft); max-width: 56ch; }
.about-split .btn { margin-top: 14px; }
.split-visual { justify-self: center; width: 100%; max-width: 480px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-visual { max-width: 420px; order: -1; }
}

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(40px, 5vw, 60px);
}
.stat {
  background: var(--night-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--bevel);
  padding: 22px 20px; text-align: center;
}
.stat-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 3vw, 34px); color: var(--raven-bright);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-label {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft);
}
@media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Store preview ---------- */
.features-head + .preview-grid { margin-top: clamp(40px, 5vw, 64px); }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 30px); margin-bottom: clamp(36px, 5vw, 56px); }
@media (max-width: 900px) { .preview-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.product-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--night-raised);
  border: 1px solid var(--line); box-shadow: var(--bevel);
  display: flex; flex-direction: column; text-decoration: none;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--bevel), 0 26px 48px -22px rgba(0, 0, 0, 0.72); }
.product-img {
  aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(75% 75% at 50% 42%, rgba(255, 217, 73, 0.16), rgba(29, 21, 41, 0) 70%);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.product-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.8s var(--ease-out); }
.product-card:hover .product-img img { transform: scale(1.06); }
.product-body { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-body h3 { font-family: var(--font-body); font-weight: 800; font-size: 15.5px; line-height: 1.35; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.price { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; color: var(--raven-bright); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.product-meta .btn-ico { color: var(--raven-bright); display: inline-flex; transition: transform 0.3s var(--ease-soft); }
.product-card:hover .product-meta .btn-ico { transform: translateX(3px); }

.badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 8px;
  background: var(--raven); color: #fff; box-shadow: var(--bevel);
}
.badge.badge-line { background: rgba(14, 10, 22, 0.82); color: var(--raven-bright); border: 1px solid var(--line); }

.rank-ladder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 36px; }
.rank-step {
  font-weight: 800; font-size: clamp(13px, 1.4vw, 15.5px);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text);
  background: linear-gradient(180deg, #4A3A18, #332711);
  border: 2px solid var(--mc-ink); border-radius: 999px;
  box-shadow: var(--mc-bevel-soft), 0 3px 0 var(--mc-ink);
  padding: 9px 16px;
}
.rank-step.top { background: linear-gradient(180deg, #FFE066, #E0A800); color: #3A2A05; box-shadow: var(--mc-bevel), 0 3px 0 var(--mc-ink); }
.rank-arrow { color: var(--raven); opacity: 0.7; }
.rank-arrow svg { width: 16px; height: 16px; display: block; }

/* ---------- UnstableSMP creators ----------
   The series Unstable FFA takes its cue from. Credit, not a claim of
   affiliation: the disclaimer sits directly under the row. */
.creators { margin-top: clamp(64px, 8vw, 96px); }
.creators .features-head { max-width: 720px; }
.creators .features-head h3 { margin-bottom: 14px; }
.creator-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(30px, 4vw, 44px);
}
@media (max-width: 900px) { .creator-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .creator-row { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }

.creator-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 9px;
  background: var(--night-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--bevel);
  padding: 24px 18px 22px;
  transition: transform 0.5s var(--ease-out), border-color 0.4s ease;
}
.creator-card:hover { transform: translateY(-5px); border-color: rgba(255, 226, 148, 0.42); }
.creator-head {
  width: 72px; height: 72px; border-radius: 12px;
  image-rendering: pixelated;
  border: 2px solid var(--mc-ink);
  box-shadow: var(--mc-bevel-soft), 0 3px 0 var(--mc-ink);
}
.creator-role {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px;
}
.creator-role.lead-role { background: var(--raven); color: #fff; border-color: transparent; }
.creator-card h4 { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.creator-card p { margin: 0; font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.creators-note {
  margin: clamp(26px, 3vw, 34px) auto 0; max-width: 62ch;
  text-align: center; font-size: 13px; color: var(--text-soft); opacity: 0.85;
}

/* ---------- Rank cards ----------
   Four real store ranks. Each carries its own --tier colour so the ladder
   reads as an ascending spectrum rather than four identical violet boxes. */
.rank-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .rank-grid { grid-template-columns: repeat(2, 1fr); max-width: 620px; margin-inline: auto; } }
@media (max-width: 560px)  { .rank-grid { grid-template-columns: 1fr; max-width: 360px; } }

.rank-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
  padding: 26px 22px 22px;
  border-radius: var(--radius);
  background: var(--night-raised);
  border: 1px solid var(--line);
  box-shadow: var(--bevel);
  text-decoration: none;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.4s ease;
}
.rank-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--tier, var(--raven));
}
.rank-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--tier, #FFD949) 22%, transparent), transparent 70%);
  opacity: 0.75; transition: opacity 0.4s ease;
}
.rank-card > * { position: relative; z-index: 1; }
.rank-card:hover {
  transform: translateY(-6px);
  border-color: var(--tier, var(--raven));
  box-shadow: var(--bevel), 0 26px 48px -22px rgba(0, 0, 0, 0.6);
}
.rank-card:hover::after { opacity: 1; }

.rank-tier {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft);
}
.rank-card h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 2.5vw, 29px);
  color: var(--tier, var(--raven-bright));
  line-height: 1.05;
}
.rank-note { font-size: 13.5px; color: var(--text-soft); margin: 0 0 4px; flex: 1; }
.rank-price {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.rank-price .was { font-size: 13px; color: var(--text-soft); text-decoration: line-through; opacity: 0.7; }
.rank-price .now { font-size: 21px; font-weight: 700; color: var(--text); }
.rank-term {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px;
}
.rank-card.top .rank-term {
  color: #3A2A05; border-color: transparent;
  background: var(--tier, var(--raven));
}
.store-note {
  text-align: center; font-size: 14px; color: var(--text-soft);
  max-width: 60ch; margin: 0 auto clamp(30px, 4vw, 44px);
}
.center-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Toast ---------- */
/* Notices sit under the nav bar, at the top of the page, so they land where
   the reader is already looking instead of at the far bottom edge. */
.toast {
  position: fixed; left: 50%; top: calc(var(--nav-h) + 12px); z-index: 140;
  transform: translate(-50%, -20px);
  background: var(--night-raised); color: var(--text);
  border: 1px solid rgba(255, 217, 73, 0.45); border-radius: 12px;
  box-shadow: var(--bevel), 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  font-size: 14.5px; font-weight: 600; padding: 13px 22px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
  max-width: min(92vw, 480px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Footer ----------
   One footer for the whole site. The markup is rendered by js/main.js into
   [data-site-foot], so every page gets the same block in the same place: last
   child of the body column, container width, pushed to the bottom when the
   page is short. */
.site-foot {
  flex: none; position: relative; z-index: 1;
  width: 100%; max-width: var(--container);
  margin-top: auto; margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 48px) clamp(10px, 2vh, 20px);
}
.site-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: clamp(10px, 1.6vh, 16px);
  font-size: 12.5px; color: var(--text-soft);
}
@media (max-width: 900px) { .site-foot-row { justify-content: center; text-align: center; } }
@media (max-width: 542px) { .site-foot-row { font-size: 11px; padding-top: 10px; } }

/* ---------- Store ----------
   The username row sits in the header under the lead. The header's bottom
   padding gives back exactly the height the row costs, so the category tabs
   start at the same point as the rules and vote pages. */
.ign-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 12px;
  margin-top: 18px;
}
/* Label and note take a full line each, so the field and button sit centred
   between them rather than being pushed off-centre by the note. */
.ign-bar .ign-label, .ign-bar .ign-note { flex-basis: 100%; text-align: center; }
.page-head.head-store { padding-bottom: calc(12% - 119px); }
.ign-label {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--raven-bright);
}
.ign-input {
  width: min(220px, 55vw); height: 42px; padding: 0 14px;
  background: rgba(12, 9, 4, 0.72); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font-body); font-size: 15px;
}
.ign-input::placeholder { color: rgba(236, 230, 244, 0.35); }
.ign-input:focus { outline: none; border-color: var(--raven); }
.ign-save { height: 42px; font-size: 12.5px; padding: 0 20px; }
.ign-note { margin: 0; font-size: 13px; color: var(--text-soft); }
/* Phone: label on its own line, field and button sharing the next one. */
@media (max-width: 560px) {
  .ign-bar { gap: 8px 10px; }
  .page-head.head-store { padding-bottom: clamp(20px, 4vw, 44px); }
  .ign-label { width: 100%; }
  .ign-input { flex: 1; width: auto; min-width: 0; }
  .ign-note { flex-basis: 100%; }
}

.store-state { margin-bottom: 18px; font-size: 14px; color: var(--text-soft); }
.store-state.is-stale { color: var(--raven-bright); }
.store-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.pkg-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--night-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--bevel); padding: 18px;
}
.pkg-shot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: rgba(255, 217, 73, 0.06);
}
.pkg-shot img { width: 100%; height: 100%; object-fit: contain; }
.pkg-shot-blank {
  font-family: var(--font-display); font-size: 40px; font-weight: 800;
  color: var(--raven-bright);
}
.pkg-flag {
  position: absolute; top: 12px; right: 12px;
  background: var(--raven); color: #201703;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.pkg-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; line-height: 1.2; color: #fff;
}
.pkg-lines {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 5px;
  /* Five lines of room. Anything past that is hidden and announced by the
     More details link, which store.js shows only when text is actually cut. */
  max-height: 9.2em; overflow: hidden;
}
.pkg-lines.is-clamped {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.pkg-lines li {
  position: relative; padding-left: 15px;
  font-size: 13.5px; line-height: 1.35; color: var(--text-soft);
}
.pkg-lines li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--raven);
}
.pkg-more {
  align-self: flex-start; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--raven-bright);
  transition: color 0.2s ease;
}
.pkg-more:hover { color: #fff; text-decoration: underline; }
.pkg-price { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pkg-now { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: #fff; }
.pkg-was { font-size: 14px; color: var(--text-soft); text-decoration: line-through; }
.pkg-period { font-size: 12.5px; color: var(--raven-bright); }
.pkg-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.pkg-buy { width: 100%; justify-content: center; font-size: 13px; padding: 11px 16px; }

/* Details dialog: the full Tebex description, rebuilt from an allow list. */
/* While a dialog is open the page cannot scroll, and the space its scrollbar
   occupied is padded back so the layout underneath does not shift. The fixed
   header needs the same treatment, since it measures itself against the
   viewport rather than the page. */
html.page-locked { overflow: hidden; }
html.page-locked body { padding-right: var(--scrollbar-width, 0px); }
html.page-locked .site-nav { padding-right: var(--scrollbar-width, 0px); }
.pkg-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pkg-modal-back { position: absolute; inset: 0; background: rgba(8, 5, 2, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pkg-modal-panel {
  position: relative; z-index: 1;
  width: min(620px, 100%); max-height: min(82vh, 760px);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--night-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--bevel), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
  padding: clamp(20px, 3vw, 30px);
}
.pkg-modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pkg-modal-x:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.pkg-modal-x svg { width: 18px; height: 18px; }
.pkg-modal-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(19px, 2.2vw, 24px); color: #fff; padding-right: 44px;
}
.pkg-modal-body { overflow-y: auto; font-size: 14.5px; line-height: 1.55; color: var(--text-soft); }
.pkg-modal-body p { margin: 0 0 10px; }
.pkg-modal-body strong, .pkg-modal-body b { color: var(--text); }
.pkg-modal-body h1, .pkg-modal-body h2, .pkg-modal-body h3, .pkg-modal-body h4 {
  font-family: var(--font-display); font-size: 16px; color: var(--raven-bright); margin: 16px 0 8px;
}
.pkg-modal-body ul, .pkg-modal-body ol { margin: 0 0 12px; padding-left: 20px; }
.pkg-modal-body li { margin-bottom: 5px; }
.pkg-modal-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.pkg-modal-body a { color: var(--raven-bright); }
.pkg-modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px;
}
.pkg-modal-foot .pkg-price { margin: 0; }
@media (max-width: 520px) {
  .store-grid { grid-template-columns: 1fr; }
  .ign-input { width: 100%; }
}

/* ---------- Reveal on scroll ---------- */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ---------- Sticky category pills ---------- */
/* Section jump links: a quiet row of text under the bar, with the current
   section underlined rather than filled in. */
.cat-nav {
  /* Sits over the band while the page is at rest, so the art can fade out
     without a bar cutting across it. The solid background only arrives once the
     bar sticks, where it also has to cover the header's own fading bottom edge:
     hence the negative top and the padding that gives it back. */
  position: sticky; top: calc(var(--nav-h) - 20px); z-index: 60;
  padding-top: 20px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.cat-nav.stuck {
  background: rgba(22, 17, 10, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.cat-nav a, .cat-tab { text-shadow: 0 1px 3px rgba(16, 6, 24, 0.55); }
.cat-nav.stuck a, .cat-nav.stuck .cat-tab { text-shadow: none; }
.cat-nav-track {
  display: flex; gap: clamp(14px, 2.4vw, 30px); overflow-x: auto;
  /* Same width and inset as the panels below, and spread across it, so the
     first and last link sit flush with the left and right card edges. */
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  max-width: var(--container); margin-inline: auto;
  scrollbar-width: none;
}
/* Too narrow for one line: run the row from the left and let it scroll, rather
   than spreading or centring it, which would strand the first link off-edge. */
@media (max-width: 760px) { .cat-nav-track { justify-content: flex-start; } }
.cat-nav-track::-webkit-scrollbar { display: none; }
.cat-nav a, .cat-tab {
  flex: none; text-decoration: none;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 13px 2px 11px;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600;
  color: var(--text); cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
/* Desktop has the room for it; phone and tablet stay at the smaller size. */
@media (min-width: 900px) {
  .cat-nav a, .cat-tab { font-size: 18px; padding-top: 15px; padding-bottom: 13px; }
}
.cat-nav a:hover, .cat-tab:hover { color: var(--raven-bright); }
.cat-nav a.active, .cat-tab.active { color: var(--text); border-bottom-color: var(--raven); }

/* ---------- Page band + header ---------- */
.page-band {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(380px, 52vh, 520px);
  overflow: hidden; z-index: 0; pointer-events: none;
  /* The whole band -- photo, sparks and overlay -- dissolves into the page
     background instead of stopping on a seam at its own bottom edge. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.72) 64%, rgba(0, 0, 0, 0.28) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.72) 64%, rgba(0, 0, 0, 0.28) 84%, transparent 100%);
}
.page-band img { width: 100%; height: 100%; object-fit: cover; }
/* Feature band, shared by the vote, rules and 404 pages: starts below the nav
   and is framed from nearer the top of the art, so the subject sits clear of
   the bar. Its top edge fades in as well as out, so beginning lower does not
   create a seam. */
.page-band.band-feature {
  top: calc(var(--nav-h) - clamp(36px, 7vh, 76px));
  height: clamp(480px, 70vh, 720px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 46%, rgba(0, 0, 0, 0.72) 66%, rgba(0, 0, 0, 0.28) 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 46%, rgba(0, 0, 0, 0.72) 66%, rgba(0, 0, 0, 0.28) 85%, transparent 100%);
}
.page-band.band-feature img { object-position: center 20%; }
/* Pages whose header is followed by the section links: the band is fitted to
   the header's bottom edge by main.js so the art finishes fading exactly where
   the links begin. This fixed height is the no-JS fallback. */
@media (max-width: 900px) {
  .page-band.band-fit { height: clamp(360px, 50vh, 500px); }
}
.page-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(140% 120% at 50% 30%, transparent 50%, rgba(22, 17, 8, 0.48) 100%),
    linear-gradient(180deg, rgba(22, 17, 8, 0.56) 0%, rgba(22, 17, 8, 0.32) 34%, rgba(26, 20, 10, 0.44) 68%, rgba(22, 18, 12, 0.24) 88%, rgba(22, 18, 12, 0) 100%);
}
.page-head {
  position: relative; z-index: 1; text-align: center;
  padding: calc(var(--nav-h) + clamp(44px, 8vh, 92px)) 0 clamp(26px, 4vw, 44px);
  padding-bottom: 12%;
}
/* Copy on a feature band starts lower, so it sits under the subject of the art
   rather than across it. The 10% is of the container width. */
.page-head.head-feature { padding-top: calc(var(--nav-h) + clamp(44px, 8vh, 92px) + 10%); }
.page-head .kicker { text-shadow: 0 1px 3px rgba(16, 6, 24, 0.7); }
.page-head .lead { margin: 18px auto 0; text-shadow: 0 1px 3px rgba(16, 6, 24, 0.7), 0 2px 14px rgba(16, 6, 24, 0.5); }
.page-head .cmd-chip { margin-top: 20px; }
.page-head .head-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.page-main { position: relative; z-index: 1; padding-bottom: clamp(56px, 7vw, 92px); }
.page-main .container > * + * { margin-top: 24px; }

/* ---------- Content panel ---------- */
.content-panel {
  background: var(--night-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--bevel);
  padding: clamp(22px, 3vw, 34px);
}
.content-panel > h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 12px;
}
.panel-note { font-size: 14px; color: var(--text-soft); }

/* ---------- Rules ---------- */
.rule-group { scroll-margin-top: calc(var(--nav-h) + 62px); }
/* Same gap above the first panel as between panels. */
.cat-nav ~ .page-main { padding-top: 34px; }
.rule-group + .rule-group { margin-top: 34px; }
.rule-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rule-group-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.3vw, 26px); }
.rule-group-head::before {
  content: ""; width: 16px; height: 16px; flex: none; background: var(--raven);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.rule {
  background: var(--night-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--bevel);
  padding: clamp(18px, 2.6vw, 28px);
}
.rule + .rule { margin-top: 14px; }
.rule h3 {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(17px, 1.9vw, 21px); margin-bottom: 14px;
}
.rule-num {
  flex: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  color: var(--raven-bright); background: rgba(255, 217, 73, 0.12);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 9px; font-variant-numeric: tabular-nums;
}
.rule .dot-list { gap: 10px; }
.rule .dot-list li { font-size: 14.5px; }

.table-scroll { overflow-x: auto; margin-top: 18px; }
.limits-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.limits-table th, .limits-table td { padding: 11px 14px; text-align: center; border: 1px solid rgba(255, 226, 148, 0.12); }
.limits-table th {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--raven-bright); background: rgba(255, 217, 73, 0.08);
}
.limits-table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.limits-table td:first-child, .limits-table th:first-child { text-align: left; }
.limits-table td:first-child { font-family: var(--font-body); font-weight: 700; }

/* ---------- Accordion ---------- */
.acc {
  background: rgba(38, 32, 20, 0.55);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--bevel); overflow: hidden;
}
.acc + .acc { margin-top: 10px; }
.acc summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; font-weight: 800; font-size: 15px; color: var(--text);
  transition: color 0.22s ease, background-color 0.22s ease;
}
.acc summary:hover { color: var(--raven-bright); background: rgba(255, 255, 255, 0.03); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; flex: none;
  font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--raven-bright);
}
.acc[open] summary::after { content: "-"; }
.acc-body { padding: 2px 18px 16px; font-size: 14.5px; color: var(--text-soft); }
.acc-body p:last-child { margin-bottom: 0; }

/* ---------- Vote ---------- */
.vote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 16px; margin-top: 22px; }
.vote-card {
  background: var(--night-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--bevel); padding: 22px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.vote-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.vc-host { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-soft); word-break: break-all; }
.vote-card .btn { margin-top: 12px; font-size: 12.5px; padding: 10px 16px; width: 100%; }
/* The card no longer reacts, so its button carries the whole hover: a taller
   lift, a warmer face and a glow the size of the pill. */
.vote-card .btn:hover {
  filter: brightness(1.14);
  transform: translateY(-3px);
  box-shadow: var(--mc-bevel), 0 6px 0 var(--mc-ink), 0 12px 26px -10px rgba(255, 200, 60, 0.45);
}
.vote-card .btn:active { transform: translateY(1px); box-shadow: var(--mc-bevel), 0 2px 0 var(--mc-ink); }

/* ---------- 404 ---------- */
.err-code {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 11vw, 116px); line-height: 1;
  color: var(--raven); text-shadow: 0 2px 6px rgba(16, 6, 24, 0.7), 0 18px 50px rgba(255, 180, 40, 0.28);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}