/* ZGMC landing page — one stylesheet, no framework, no third-party requests.
   Colour is taken from the project's own art: the concept sheet's near-black violet (#04030f),
   the emblem's core violet, and the portal cyan. Type is two self-hosted variable fonts. */

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #04030f;
  --bg-2: #07051a;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.06);
  --line: rgba(178, 160, 255, 0.14);
  --line-2: rgba(178, 160, 255, 0.28);
  --ink: #eeeafb;
  --ink-2: #b8b2d2;
  --ink-3: #837da1;
  --violet: #a878ff;
  --violet-2: #c9a6ff;
  --violet-deep: #6a3fd4;
  --cyan: #6fe6ff;
  --amber: #ffbf6b;
  --copper: #d08a5a;
  --silver: #cdd3e2;
  --gold: #efc463;
  --diamond: #6fe3d8;
  --shell: 1180px;
  --r: 14px;
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #170d38 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, #05040f 100%);
  color: var(--ink);
  font: 400 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--violet-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
code {
  font: 500 0.9em/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--ink);
  background: rgba(168, 120, 255, 0.12);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.36em;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--violet-deep);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
}
.skip:focus { left: 12px; }

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}
.aura {
  position: fixed;
  inset: -10% 0 auto 0;
  height: 760px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 66% 34%, rgba(139, 92, 255, 0.20) 0%, transparent 70%),
    radial-gradient(30% 30% at 30% 18%, rgba(111, 230, 255, 0.07) 0%, transparent 70%);
}

/* ---------- shell ---------------------------------------------------------- */

.shell {
  width: min(100% - 44px, var(--shell));
  margin-inline: auto;
}

/* ---------- header --------------------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(4, 3, 15, 0.86), rgba(4, 3, 15, 0.55));
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.top.is-scrolled { border-bottom-color: var(--line); }
.top__in {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand img { border-radius: 9px; box-shadow: 0 0 0 1px var(--line); }
.brand__lock { display: flex; flex-direction: column; gap: 4px; }
/* The wordmark is the concept's own four letterforms, traced to SVG - crisp at 20 px, where a crop of
   the 125 px raster would already be soft. */
.brand__word { height: 19px; width: auto; }
.brand__name {
  font-family: var(--body);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-3);
}
.nav { display: flex; gap: 26px; }
.nav a {
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.nav a:hover { color: #fff; }
.nav__ext { display: inline-flex; align-items: center; gap: 5px; }
.nav__ext span { font-size: 10.5px; color: var(--ink-3); transition: color 0.2s; }
.nav__ext:hover span { color: var(--cyan); }

/* The Guides menu. A <details> rather than a hover-only dropdown or a JS toggle: the summary is a
   real disclosure button, so it opens with a click, Enter or Space, is announced as such, and still
   works with the script off. It is the same height as the links beside it, so the nav stays one row.
   Below 1000 px the whole nav is hidden, which is also why there is no phone version to design. */
/* `display: flex` is what makes the label sit on the same line as the plain links. As a block, the
   summary's inline-flex box was placed by a 26.4 px line box and landed 2.7 px below "Standings";
   as a flex item it is measured against the same height as every other item, and all seven labels
   share one text top (asserted by the gate). The list is hidden explicitly rather than trusting
   the UA's closed state - Chromium renders the content slot, and an absolutely positioned list is
   not hidden by it. */
.nav__guides { display: flex; position: relative; }
.nav__guides:not([open]) > .nav__list { display: none; }
.nav__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  line-height: inherit;
  transition: color 0.2s;
  list-style: none;
}
/* The marker is a marker, not content: hiding it is presentation, and the wording still says
   "Guides" while the chevron says "there is more behind this". */
.nav__summary::-webkit-details-marker { display: none; }
.nav__summary::marker { content: ""; }
.nav__summary:hover { color: #fff; }
.nav__guides[data-here] > .nav__summary,
.nav__guides[open] > .nav__summary { color: #fff; }
.nav__summary:focus-visible {
  outline: 2px solid var(--violet-2);
  outline-offset: 5px;
  border-radius: 3px;
}
.nav__chev {
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease), margin-top 0.2s var(--ease);
}
.nav__guides[open] .nav__chev { transform: rotate(-135deg); margin-top: 2px; }
.nav__list {
  position: absolute;
  /* The nav is vertically centred in the 68 px header, and its own box is 22.3 px tall, so the
     panel clears the header's bottom border at 100% + 24 rather than hanging over it. Measured,
     not guessed - and asserted by the gate, which fails if the panel overlaps the header or floats
     away from it. */
  top: calc(100% + 24px);
  left: -14px;
  z-index: 5;
  min-width: 186px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(9, 7, 24, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}
.nav__list li + li { margin-top: 2px; }
.nav__list a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
}
.nav__list a:hover { background: rgba(255, 255, 255, 0.05); }
.nav__list a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(168, 120, 255, 0.16), transparent 90%);
  color: #fff;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}
.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  box-shadow: 0 0 0 0 rgba(111, 230, 255, 0);
}
.status[data-state="online"] { color: var(--ink); border-color: rgba(111, 230, 255, 0.34); }
.status[data-state="online"] .status__dot {
  background: var(--cyan);
  animation: pulse 2.6s infinite;
}
.status[data-state="offline"] .status__dot { background: var(--amber); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(111, 230, 255, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(111, 230, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 230, 255, 0); }
}

/* ---------- hero ----------------------------------------------------------- */

/* The hero is built to fit one screen: its height is capped to the viewport minus the sticky header,
   and the type is spaced in vh as well as vw, so a 1366x768 laptop and a 1536x864 one both see the
   whole lockup without scrolling. The floor matters more than the ceiling - clamp() bottoms keep it
   readable on a tall narrow window. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  min-height: min(calc(100svh - 68px), 940px);
  padding: clamp(22px, 3.4vh, 62px) 0 clamp(18px, 2.6vh, 42px);
}
.hero > * { position: relative; z-index: 1; }

/* Nether-portal embers: small violet squares drifting up through the hero. The canvas spans the
   viewport width rather than the shell so the effect reaches the edges; `overflow-x: hidden` on the
   body is what keeps that from becoming a scrollbar (asserted). */
/* A canvas is a replaced element: with `top:0; bottom:0` and no CSS height, the height attribute the
   script sets wins and the canvas keeps whatever the hero measured on the first frame - before the
   display font had swapped and shortened the headline. It then spilled ~180 px over the live band.
   An explicit height ties the box to the hero; the script re-measures when the hero resizes. */
.portal {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.95;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(12px, 1.8vh, 22px);
  font-size: 11.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 12px 2px rgba(168, 120, 255, 0.8);
}
h1 {
  font-family: var(--display);
  font-size: clamp(34px, min(5.5vw, 7.4vh), 76px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(14px, 2vh, 24px);
  background: linear-gradient(178deg, #fff 18%, #cfc2ff 60%, #9d86e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.lede {
  font-size: clamp(15px, 1.55vh, 17.5px);
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0 0 clamp(16px, 2.4vh, 28px);
}
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  font: 500 14px/1 var(--display);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: linear-gradient(180deg, #a375ff, #7c46e0);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(140, 90, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn--primary:hover { color: #fff; background: linear-gradient(180deg, #b388ff, #8652ea); }
.btn--ghost {
  border-color: var(--line-2);
  color: var(--ink);
  background: var(--panel);
}
.btn--ghost:hover { border-color: rgba(201, 166, 255, 0.55); background: var(--panel-2); color: #fff; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 34px;
  margin: clamp(18px, 2.8vh, 34px) 0 0;
  padding: clamp(10px, 1.7vh, 16px) 0 0;
  border-top: 1px solid var(--line);
}
.facts div { display: flex; flex-direction: column-reverse; gap: 2px; }
.facts dt {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.facts dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(17px, 2.3vh, 21px);
  font-weight: 500;
  color: var(--ink);
}

/* The orbit is decorative and deliberately wider than the emblem vertically, but it must never
   widen the page: it is clipped at the mark's own box (checked at four viewports). */
.hero__mark {
  position: relative;
  overflow: clip;
  overflow-clip-margin: 34px;
  padding: clamp(6px, 1.6vh, 34px) 0;
  max-width: 100%;
}
.mark {
  width: auto;
  max-width: 100%;
  max-height: min(38vh, 420px);
  margin-inline: auto;
  height: auto;
  filter: drop-shadow(0 24px 60px rgba(110, 60, 220, 0.35));
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.orbit {
  position: absolute;
  inset: 2% 6% 12%;
  pointer-events: none;
}
.orbit span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(168, 120, 255, 0.16);
  transform: rotate(-14deg) scaleY(0.42);
}
.orbit span + span {
  inset: -6% 2%;
  border-color: rgba(111, 230, 255, 0.1);
  transform: rotate(-14deg) scaleY(0.36);
}
.hero__word {
  width: min(310px, 58%);
  height: auto;
  margin: 2px auto clamp(4px, 1vh, 10px);
  filter: drop-shadow(0 8px 28px rgba(110, 60, 220, 0.35));
}
.mark__note {
  margin: 6px 0 0;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

/* ---------- live band ------------------------------------------------------ */

.band {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008));
}
.band__in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 1.4fr;
  gap: 22px;
  align-items: start;
  padding: 22px 0 18px;
}
.band__cell { min-width: 0; }
.band__k {
  margin: 0 0 6px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.band__v {
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band__v--sm { font-size: 15px; font-weight: 400; color: var(--ink-2); }
.band__s {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band__stamp {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ---------- sections ------------------------------------------------------- */

.section { padding: clamp(64px, 9vw, 116px) 0; }
.section--bleed {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(109, 63, 212, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0));
}
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker span {
  font-family: var(--display);
  color: var(--violet);
  letter-spacing: 0.05em;
}
.kicker::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}
h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.prose {
  max-width: 62ch;
  color: var(--ink-2);
  margin: 0 0 18px;
  font-size: 16.5px;
}
.prose--wide { max-width: 78ch; }
.fineprint {
  max-width: 78ch;
  margin: 26px 0 0;
  font-size: 13px;
  color: var(--ink-3);
  border-left: 2px solid var(--line-2);
  padding-left: 16px;
}

/* ---------- cards ---------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 46px;
}
.card {
  position: relative;
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card__no {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--violet);
}
.card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.card__meta {
  margin-top: 18px !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3) !important;
}

/* ---------- gallery -------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
/* No cropping: these are renders of the world, and a crop can cut exactly the thing the caption
   is describing (the floating gate sign, the crate row's plates). Natural aspect, caption pinned
   to the bottom so two unequal figures still line up. */
.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #08061a;
}
.shot--wide { grid-column: 1 / -1; }
.shot img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s var(--ease);
}
.shot:hover img { transform: scale(1.015); }
.shot figcaption {
  margin-top: auto;
  padding: 16px 20px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
}
.shot figcaption strong { color: var(--ink); font-weight: 500; }

/* ---------- feature ------------------------------------------------------- */

/* One picture with a few sentences beside it, inside a section that is already about the world.
   Not a new section: the deposits are a property of the void, not a fifth chapter of the page. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(22px, 3.4vw, 44px);
  align-items: center;
  margin-top: 40px;
}
.feature .shot { margin: 0; }
.feature__copy h3 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin: 0 0 12px;
}
.feature__copy p { margin: 0 0 14px; color: var(--ink-2); }
.feature__copy p:last-child { margin-bottom: 0; }
.ticks {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 10px rgba(168, 120, 255, 0.75);
}

/* ---------- ladder --------------------------------------------------------- */

.ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tier;
  align-items: end;
}
.rung {
  position: relative;
  padding: 22px 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border-top: 2px solid var(--tier, var(--violet));
}
.rung::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: calc(var(--fill, 10%) * 0.9);
  max-height: 120px;
  transform: translateY(-100%);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, transparent, var(--tier, var(--violet)));
  opacity: 0.16;
  pointer-events: none;
}
.rung[data-tier="copper"] { --tier: var(--copper); --fill: 7%; }
.rung[data-tier="silver"] { --tier: var(--silver); --fill: 21%; }
.rung[data-tier="gold"] { --tier: var(--gold); --fill: 54%; }
.rung[data-tier="diamond"] { --tier: var(--diamond); --fill: 100%; }
.rung__tier {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tier);
}
.rung__key {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ink-2);
}
.rung__worth {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.rung__worth span {
  display: block;
  margin-top: 7px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.rung__has {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---------- join ----------------------------------------------------------- */

.join {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding: clamp(64px, 9vw, 110px) 0;
}
.join__panel {
  padding: 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(109, 63, 212, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.addr + .addr { margin-top: 20px; }
.addr__k {
  margin: 0 0 7px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.addr__v {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font: 500 17px/1.2 var(--display);
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.addr__v:hover { border-color: rgba(111, 230, 255, 0.45); background: rgba(0, 0, 0, 0.38); }
.addr__v span:first-child { overflow-wrap: anywhere; }
.addr__port { color: var(--ink-3); font-weight: 400; }
.addr__hint {
  flex: none;
  font: 500 10.5px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.85;
}
.addr__v.is-copied { border-color: rgba(111, 230, 255, 0.7); }
.addr__v.is-copied .addr__hint { color: var(--cyan); }
.addr__note {
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.join__note {
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
.checks {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-2);
}
.checks li { display: flex; gap: 10px; align-items: baseline; }
.checks span { color: var(--cyan); font-size: 12px; }
.checks li:last-child span { color: var(--amber); }
.panel__foot {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------- faq ------------------------------------------------------------ */

.faq__list {
  margin-top: 34px;
  border-top: 1px solid var(--line);
}
/* Scoped to the FAQ list, not to every <details> on the site: the Guides menu in the header is a
   disclosure too, and the unscoped version gave it 20 px of vertical padding, the FAQ's display
   font and a second chevron drawn over the one the menu already has. */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 34px 20px 0;
  position: relative;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violet-2); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p {
  margin: 0;
  padding: 0 40px 22px 0;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 76ch;
}

/* ---------- footer --------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  padding: 34px 0 44px;
  background: rgba(0, 0, 0, 0.22);
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
}
.foot__brand { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: flex-start; }
.foot__brand img { margin-top: 2px; }
.foot__brand .foot__where {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0 40px;
  font-size: 12px;
  color: var(--ink-3);
}
.foot__where a { color: var(--ink-2); }
.foot__where code { font-size: 11.5px; color: var(--ink-3); }
.foot__brand img { border-radius: 8px; opacity: 0.92; }
.foot__brand p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.foot__brand strong { font-family: var(--display); letter-spacing: 0.12em; }
.foot__brand span { color: var(--ink-3); }
.foot__legal {
  margin: 0;
  max-width: 46ch;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---------- guide ---------------------------------------------------------- */

/* The player guide shares the landing page's header, footer and palette, and adds one thing the
   landing page does not have: a table of contents that stays beside the text. It is a two-column
   grid rather than a fixed sidebar, so the TOC is part of the document order (a keyboard or a
   screen reader reaches it before the article) and a narrow window simply stacks it. */
.guide__head {
  padding: clamp(44px, 6vw, 86px) 0 clamp(24px, 3vw, 36px);
}
.guide__head h1 {
  max-width: 21ch;
  font-size: clamp(32px, min(4.6vw, 6.4vh), 62px);
  line-height: 1.02;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}
.guide__head .lede { max-width: 64ch; margin-bottom: 0; }
.guide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 22px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.guide__meta span + span::before {
  content: "·";
  margin-right: 18px;
  color: var(--line-2);
}
.guide__meta a { color: var(--ink-2); }
.guide__meta a:hover { color: #fff; }

.guide {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: start;
  padding: clamp(32px, 4.5vw, 52px) 0 clamp(60px, 8vw, 96px);
  border-top: 1px solid var(--line);
}

.toc {
  position: sticky;
  top: calc(68px + 22px);
  max-height: calc(100vh - 112px);
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}
.toc__k {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
/* The numbered entries only. `.toc__foot` is a link too, and a rule on `.toc a` would give it a
   twelfth number and the list's padding - it is a footnote, not a section. */
.toc ol a {
  position: relative;
  display: block;
  padding: 7px 10px 7px 31px;
  border-left: 2px solid transparent;
  border-radius: 0 7px 7px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.toc ol a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 9px;
  top: 8px;
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition: color 0.2s;
}
.toc ol a:hover { color: #fff; background: rgba(255, 255, 255, 0.035); }
.toc ol a.is-current {
  border-left-color: var(--violet);
  background: linear-gradient(90deg, rgba(168, 120, 255, 0.15), transparent 85%);
  color: #fff;
}
.toc ol a.is-current::before { color: var(--violet-2); }
.toc__foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}
.toc__foot a { color: var(--ink-2); text-decoration: none; }
.toc__foot a:hover { color: #fff; }

/* A grid item's automatic minimum size is its content's min-content width, and a three-column
   table is wider than a phone.
   `min-width: 0` is what lets the table's own overflow wrapper scroll instead of widening the
   page (the guide phone check failed by 235 px without it). */
.guide > * { min-width: 0; }
.guide__body { max-width: 74ch; min-width: 0; }
.guide__body > section {
  padding: 0 0 clamp(34px, 4.6vw, 52px);
  margin: 0 0 clamp(34px, 4.6vw, 52px);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(68px + 20px);
}
.guide__body > section:last-child { border-bottom: 0; margin-bottom: 0; }
.guide__body h2 {
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.15;
  margin: 0 0 14px;
  scroll-margin-top: calc(68px + 20px);
}
.guide__body h3 {
  margin: 26px 0 8px;
  font-size: 16.5px;
}
.guide__body .kicker { margin-bottom: 12px; }
.guide__body p { margin: 0 0 15px; color: var(--ink-2); }
.guide__body p:last-child { margin-bottom: 0; }
.guide__body ul, .guide__body ol { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); }
.guide__body li + li { margin-top: 6px; }
.guide__body strong { color: var(--ink); font-weight: 600; }
.guide__body a { color: var(--violet-2); }
.guide__body .cta { margin-top: 22px; }
/* A figure is an illustration inside the article, not a full-bleed plate: at the article's full
   width a square render pushes the next heading two screens down. */
.guide__body .shot { max-width: 560px; margin: 24px 0 26px; }

/* Numbered instructions: the counter is the step, so the list reads as a sequence even with the
   styling off (the <ol> is still an ordered list). */
.steps {
  list-style: none;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  counter-reset: step;
  display: grid;
  gap: 18px;
}
.steps li {
  position: relative;
  padding-left: 46px;
  margin: 0 !important;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(168, 120, 255, 0.09);
  font: 500 13px/1 var(--display);
  color: var(--violet-2);
}
.steps h3 { margin: 1px 0 4px; font-size: 16px; }
.steps p { margin: 0; }

.table-wrap {
  margin: 20px 0 22px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.018);
}
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap caption {
  caption-side: top;
  text-align: left;
  padding: 14px 16px 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.table-wrap th, .table-wrap td {
  text-align: left;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table-wrap th {
  font: 500 10.5px/1.4 var(--body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
/* The wrapper scrolls on a narrow screen, and a scroll container has to be reachable without a
   pointer: the tables carry tabindex="0" and a region label for that reason. */
.table-wrap:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.table-wrap td { color: var(--ink-2); }
.table-wrap td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.table-wrap tr:last-child td { border-bottom: 0; }

.note {
  margin: 22px 0;
  padding: 15px 18px;
  border-left: 2px solid var(--violet);
  border-radius: 0 var(--r) var(--r) 0;
  background: linear-gradient(90deg, rgba(168, 120, 255, 0.09), rgba(168, 120, 255, 0.02));
}
.note p { margin: 0; }
.note p + p { margin-top: 10px; }
.note__k {
  margin: 0 0 6px !important;
  font: 500 10.5px/1.4 var(--body);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--violet-2);
}
.note--warn { border-left-color: var(--amber); background: linear-gradient(90deg, rgba(255, 191, 107, 0.09), rgba(255, 191, 107, 0.02)); }
.note--warn .note__k { color: var(--amber); }

/* The two addresses, reusable on a page that has no join panel. */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 20px 0 8px; }
.quick .addr + .addr { margin-top: 0; }
.quick .addr__v { font-size: 15px; padding: 12px 14px; }

.guide__end {
  margin-top: clamp(34px, 4vw, 50px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
}
.guide__end p { margin: 0; font-size: 13px; color: var(--ink-3); }

/* ---------- standings ------------------------------------------------------ */

/* The standings page is the one page whose content is generated from the server's scoreboard.
   It keeps the landing page's document shape and adds a small summary band over a table, because
   the ranking is the point and a screenshot should carry the headline numbers as well as the
   list. The table itself is the guide's table treatment: it scrolls sideways on a laptop and
   becomes a stack of labelled rows on a phone. */
.stats__head {
  padding: clamp(44px, 6vw, 86px) 0 clamp(26px, 3.6vw, 40px);
}
.stats__head h1 {
  max-width: 17ch;
  font-size: clamp(34px, min(5vw, 6.8vh), 66px);
  line-height: 1.02;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}
.stats__head .lede { max-width: 68ch; margin-bottom: 0; }
.stats__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 22px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.stats__meta span + span::before {
  content: "·";
  margin-right: 18px;
  color: var(--line-2);
}
.stats {
  padding: 0 0 clamp(60px, 8vw, 96px);
}
.stats__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 clamp(34px, 4.6vw, 52px);
}
.stat {
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(168, 120, 255, 0.09), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}
.stat__k {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat__v {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat__s { margin: 0; font-size: 12px; color: var(--ink-3); }
.stats__board {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(109, 63, 212, 0.12), transparent 64%),
    rgba(255, 255, 255, 0.015);
}
.stats__board-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 16px;
}
.stats__board-head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); }
.stats__board-head p {
  margin: 0;
  max-width: 48ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
/* The saved snapshot is the baseline; a configured API can replace it. The line stays visible when
   the live read fails, because "the table is still the snapshot" is the useful fact at that moment. */
.stats__live {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.stats__live[data-state="live"] { color: var(--cyan); }
.stats__live[data-state="fallback"] { color: var(--amber); }
/* ---------- tabs ---------------------------------------------------------- */

/* Two views of one board: the ladder, and the rest of what the game counted. The tab list is real
   links, so with the script off both panels stay on the page and either link jumps to its panel.
   The script adds data-tabs-ready and takes over: one panel at a time, arrow keys between tabs. */
.tabs__list {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font: 500 12px/1 var(--body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--ink-2); }
.tabs__tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tabs__tab[aria-selected="true"] {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(168, 120, 255, 0.24), rgba(168, 120, 255, 0.12));
  box-shadow: inset 0 0 0 1px rgba(168, 120, 255, 0.35);
}
/* With the script off the panels are stacked, so each one after the first needs a reason to be a
   separate block: a rule and some air. */
.tabs:not([data-tabs-ready]) .tabs__panel + .tabs__panel {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.tabs[data-tabs-ready] .tabs__panel[hidden] { display: none; }
.tabs__panel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
/* The cards were the first thing inside the board; inside a panel they keep their own margin. */
.tabs__panel > .stats__cards { margin-top: 2px; }
.tabs__panel > .stats__cards:first-child { margin-top: 0; }

/* A head, 36px on a laptop, drawn from an 8x8 crop so it has to stay crisp. The name keeps its
   own line and the pad sits under it, which is what the mobile layout relies on too. */
.standings__who { display: inline-flex; align-items: center; gap: 10px; }
.standings__head {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px var(--line-2);
  image-rendering: pixelated;
}
.standings__ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deaths__total { display: block; color: var(--ink); font-weight: 500; }
.deaths__parts {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  white-space: nowrap;
}
.standings--activity td { white-space: nowrap; }
.standings--activity td[data-label="Player"] { white-space: normal; }

.standings { margin: 0; background: rgba(0, 0, 0, 0.18); }
.standings table { font-size: 14.5px; }
.standings th, .standings td { vertical-align: middle; }
.standings tbody tr:hover { background: rgba(168, 120, 255, 0.045); }
.standings__rank {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font: 500 13px/1 var(--display);
  color: var(--ink-2);
}
.standings__rank--1 { color: var(--gold); border-color: rgba(239, 196, 99, 0.55); }
.standings__rank--2 { color: var(--silver); border-color: rgba(205, 211, 226, 0.45); }
.standings__rank--3 { color: var(--copper); border-color: rgba(208, 138, 90, 0.5); }
.standings__name {
  display: block;
  color: var(--ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}
/* The name and its Discord chip share the top line; the pad stays underneath, where the mobile
   layout already expects it. */
.standings__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* A role colour is anywhere from #000000 to #ffffff, so the chip shows it three ways and trusts
   none of them alone: a solid dot (visible even when it is nearly black, because of its ring), a
   tinted fill for the shape, and the label in --ink so the words are legible whatever arrives.
   The fallback (a role with no colour - Discord's 0) is the page's own muted ink. */
.standings__badge {
  --badge: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 16ch;
  padding: 2px 8px 2px 6px;
  border: 1px solid color-mix(in srgb, var(--badge) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--badge) 18%, transparent);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
}
.standings__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--badge);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38);
}
/* Read by a screen reader as "Discord role: Admin"; a bare role name does not say what it is. */
.standings__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.standings__pad {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* The key total is the ranking number, so it stays large enough to scan down the column. The four
   tier chips beside it are the evidence; zero tiers are dim, not hidden, so a row's shape is
   readable even when it is all copper. */
.keys__total {
  display: inline-block;
  min-width: 1.4em;
  margin-right: 12px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  vertical-align: middle;
}
.keys__parts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  vertical-align: middle;
}
.tier {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--tier) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tier) 8%, transparent);
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.015em;
  color: var(--tier);
  white-space: nowrap;
}
.tier--copper { --tier: var(--copper); }
.tier--silver { --tier: var(--silver); }
.tier--gold { --tier: var(--gold); }
.tier--diamond { --tier: var(--diamond); }
.tier.is-zero {
  color: var(--ink-3);
  border-color: var(--line);
  background: transparent;
}
.standings__empty td {
  padding: 28px 18px;
  color: var(--ink-3);
  text-align: center;
  white-space: normal !important;
}
.stats__how {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 5vw, 64px);
  margin-top: clamp(36px, 5vw, 58px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}
.stats__how h2 { margin-bottom: 14px; }
.stats__how .prose { margin-bottom: 0; }
.stats__notes { display: grid; gap: 12px; align-content: start; }
.stats__notes .note { margin: 0; }

/* ---------- responsive ----------------------------------------------------- */

@media (max-width: 1080px) {
  /* Seven nav items plus the status pill stop fitting before the old 1000 px breakpoint did. The
     check measures the gaps, not this guess. */
  .nav { gap: 18px; }
  /* The summary is not an <a>: leaving it at 13.5 px here made it a pixel taller than its
     neighbours between 1000 and 1080 px, which is exactly the band the header check measures. */
  .nav a, .nav__summary { font-size: 13px; }
}

@media (max-width: 1000px) {
  .nav { display: none; }
  .feature { grid-template-columns: 1fr; gap: 26px; }
  .guide { grid-template-columns: 1fr; gap: 30px; }
  .toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 18px 20px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  }
  .toc ol { columns: 2; column-gap: 18px; }
  .toc li { break-inside: avoid; }
  .toc ol a { padding-top: 6px; padding-bottom: 6px; }
  .hero { grid-template-columns: 1fr; gap: 34px; }
  .hero__mark { max-width: 520px; justify-self: center; width: 100%; }
  .band__in { grid-template-columns: repeat(2, minmax(0, 1fr)) 1.3fr; }
  .band__cell--wide { grid-column: 1 / -1; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card:last-child { grid-column: 1 / -1; }
  .ladder { grid-template-columns: 1fr 1fr; }
  .join { grid-template-columns: 1fr; }
  .stats__how { grid-template-columns: 1fr; gap: 26px; }
  .stats__cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 32px, var(--shell)); }
  .top__in { height: 60px; gap: 12px; }
  .brand__name { font-size: 11.5px; }
  .status { font-size: 11px; padding: 6px 9px; gap: 7px; }
  .brand__word { height: 16px; }
  .brand__name { font-size: 7.5px; letter-spacing: 0.2em; }
  .facts { gap: 10px 22px; }
  .facts dd { font-size: 18px; }
  .band__in {
    grid-template-columns: 1fr 1fr;
    padding: 18px 0 16px;
    gap: 18px;
  }
  .band__cell--wide { display: none; }
  .cards { grid-template-columns: 1fr; }
  .card:last-child { grid-column: auto; }
  .gallery { grid-template-columns: 1fr; }
  .stats__board { padding: 18px 14px 6px; }
  .stats__board-head { margin-bottom: 10px; }
  .stats__cards { gap: 10px; }
  .stat { padding: 16px 15px 14px; }
  .standings td:first-child { padding-bottom: 4px; }
  .standings td:first-child::before { display: none; }
  .standings .keys__total { font-size: 20px; }
  .standings__head { width: 30px; height: 30px; flex-basis: 30px; border-radius: 7px; }
  /* A phone row is a card already; the chip keeps its dot and colour but gives up characters. */
  .standings__line { gap: 6px; }
  .standings__badge { max-width: 12ch; font-size: 10px; }
  .tabs__list { margin-bottom: 14px; padding: 3px; }
  .tabs__tab { padding: 7px 14px; }
  /* On a phone the death breakdown is a sentence, not a chip, so it may wrap. */
  .deaths__parts { white-space: normal; }
  .standings--activity td { white-space: normal; }
  .ladder { grid-template-columns: 1fr; gap: 10px; }
  .rung::after { display: none; }
  .rung__worth { font-size: 28px; }
  .faq details p { padding-right: 8px; }
  .toc ol { columns: 1; }
  .quick { grid-template-columns: 1fr; }
  .steps li { padding-left: 40px; }
  /* A three-column table on a phone either crushes its columns or makes the reader swipe
     sideways mid-sentence. Each cell carries its column name in data-label, so the header row
     can go and the meaning survives; the first cell is the card's title. */
  .table-wrap { border: 0; background: none; overflow: visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  /* With the table turned into a block, a caption left as table-caption shrink-wraps to the
     widest column and sets one word per line. It is a block in this layout. */
  .table-wrap caption { display: block; width: 100%; padding: 0 0 12px; }
  .table-wrap tr {
    margin: 0 0 12px;
    padding: 10px 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.02);
  }
  .table-wrap td { border: 0; padding: 4px 16px; white-space: normal; }
  /* This rule is more specific than `.table-wrap td`, so the desktop first-column nowrap has to
     be undone here or the longest symptom runs 28 px past the card. */
  .table-wrap td:first-child { padding-bottom: 2px; font-size: 15.5px; white-space: normal; }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    font: 500 10px/1.4 var(--body);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
    .guide__body > section { scroll-margin-top: calc(60px + 16px); }
  .guide__body h2 { scroll-margin-top: calc(60px + 16px); }
}

/* Narrow enough that the wordmark alone carries the name: a wrapped tagline reads as a mistake. */
@media (max-width: 560px) {
  .brand__name { display: none; }
  .stats__cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mark { animation: none; }
  .status[data-state="online"] .status__dot { animation: none; }
  .shot img, .btn, .card { transition: none; }
  .toc ol a { transition: none; }
}