/* ============================================================
   HOME (index.html) — Crest Forge composition on the shared system
   hero portal + night ground / server rack under the hero / pinned
   night-valley 'Why' scene / circuit-board features / ledger beside a
   crest window / relic vault in the crystal cave / FAQ / closing band
   ============================================================ */

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

.hero {
  --stage-w: min(42vw, 640px);
  --stage-r: max(32px, 4vw);
  position: relative;
  isolation: isolate;
  /* sideways only: on scroll-out the stage drifts down (motion.js heroDepth) and the ledge's faded foot spills over
     the rack's top padding instead of being cut along a hard line at the hero's edge */
  overflow-x: clip;
  overflow-y: visible;
  min-height: max(760px, 100svh);
  padding: calc(var(--nav-h) + clamp(28px, 8vh, 96px)) 0 clamp(104px, 15vh, 160px);
}
.hero-copy { position: relative; z-index: 4; --copy-max: 100%; }
/* desktop: the copy column always ends 32px short of the crest frame (100% = the column's width; the stage
   is pinned to the hero's right edge), so no line of copy ever runs into the bevel or the rex */
@media (min-width: 961px) {
  .hero-copy { --copy-max: calc(100% + var(--gut) - var(--stage-r) - var(--stage-w) - 32px); }
}
.hero-title {
  max-width: min(11.5em, var(--copy-max));
  margin: 0 0 var(--s-6);
  font-size: clamp(2.75rem, 5.3vw - 0.26rem, 4.5rem);
  line-height: 0.94;
  font-stretch: 86%;
}
.hero-tagline { max-width: min(31ch, var(--copy-max)); margin-bottom: var(--s-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; max-width: var(--copy-max); }
.hero-bus { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-7); max-width: min(640px, var(--copy-max)); }

/* live strip: a facet plate of live cells; the row is reserved so the headline never jumps when /api/status answers */
.bug {
  --cut: var(--cut-s);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.bug::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hull);
  box-shadow: inset 0 0 0 1px rgba(70, 210, 245, 0.32);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.bug[hidden] { display: inline-flex !important; visibility: hidden; min-width: 240px; min-height: 54px; }
.bug-live { display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; color: var(--chrome); font-size: var(--fs-fine); font-weight: 600; }
.bug .stat-chip { flex-direction: row; align-items: baseline; gap: 8px; padding: 12px 16px; box-shadow: inset 1px 0 var(--rule); }
.bug .stat-chip .num { font-size: 1.5rem; }
.bug .stat-chip .lbl { font-size: var(--fs-small); color: var(--silver); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--steel); }
@media (min-width: 961px) and (max-width: 1439.98px) { .hero-meta { flex-direction: column; } }
.hero-meta:empty { display: none; }
.hero-meta li { display: inline-flex; align-items: center; gap: 9px; }
.mark { flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--ase); }
.mark-asa { background: var(--asa); }

/* raid wire: live stories only (main.js), a still list on the trace — nothing scrolls by itself */
.wire { margin-top: var(--s-5); max-width: min(640px, var(--copy-max)); }
.wire-track { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wire-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--fs-small); color: var(--silver); }
.wire-item .chip { flex: none; }

/* stage: the crest portal on the right; the rex steps out of it onto the rock ledge in front */
.hero-stage { position: absolute; z-index: 2; top: calc(var(--nav-h) + 20px); bottom: 76px; right: var(--stage-r); width: var(--stage-w); }
.hero-portal { position: absolute; inset: 0; }
.hero-ledge { position: absolute; z-index: 3; left: -30%; right: -16%; bottom: -10%; pointer-events: none; }
@media (min-width: 961px) and (max-width: 1279.98px) { .hero-ledge { left: -16%; } }
.hero-ledge > img { display: block; width: 100%; height: auto; max-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%, #000 92%, transparent 100%); mask-composite: intersect; }
.hero-rex { z-index: 4; left: -7%; bottom: 3%; width: 66%; }
.hero-trace { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-trace path { fill: none; stroke-linejoin: miter; }

@media (max-width: 960.98px) {
  .hero { display: flex; flex-direction: column; padding-bottom: var(--s-7); min-height: 0; }
  .hero-copy { order: 1; }
  .hero-stage {
    order: 2;
    position: relative;
    inset: auto;
    width: min(calc(100% - 2 * var(--gut)), 520px);
    aspect-ratio: 0.82;
    margin: var(--s-7) auto 0;
  }
  .hero-ledge { left: -30%; right: -30%; bottom: -14%; }
  .hero-rex { left: -4%; width: 66%; bottom: 2%; }
  .hero-trace { display: none; }
}
/* phones: the crest and the rex belong in the first screen. Headline, tagline and buttons lead, the portal
   follows straight after, and the live strip, platform marks and raid wire move below the art */
@media (max-width: 719.98px) {
  .hero { padding-top: calc(var(--nav-h) + 20px); }
  .hero-copy { display: contents; }
  .hero-copy > * { position: relative; z-index: 4; margin-inline: var(--gut); }
  .hero-title { order: 1; margin-bottom: var(--s-5); font-size: clamp(2.375rem, 11.2vw, 3.5rem); }
  .hero-tagline { order: 2; margin-bottom: var(--s-5); }
  .hero-actions { order: 3; }
  .hero-stage { order: 4; margin-top: var(--s-6); }
  .hero-bus { order: 5; margin-top: var(--s-6); }
  .wire { order: 6; }
  .hero-actions .btn { flex: 1 1 auto; padding: 0 18px; }
  .bug .stat-chip { padding: 10px 12px; }
}

/* ---------- servers: a rack branching off the spine ---------- */

.servers { padding-top: var(--s-9); }
.servers-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7) var(--s-7); align-items: start; }
@media (min-width: 1180px) {
  .servers-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .join { position: sticky; top: calc(var(--nav-h) + 24px); }
}
#server-grid { min-width: 0; min-height: 560px; }
.join { padding: 26px 24px 8px; max-width: 720px; }
.join .h3 { margin-bottom: 18px; }

.server-group { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 var(--s-4); }
.server-group ~ .server-group { margin-top: var(--s-8); }
.server-group-title { display: inline-flex; align-items: center; gap: 12px; font: 700 1.625rem/1.2 var(--font-display); font-stretch: 92%; color: var(--chrome); }
.server-group-title::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--ase); }
.conf-ascended .server-group-title::before { background: var(--asa); }
.server-group-sub { color: var(--steel); font-size: var(--fs-ui); }
.server-rows, .resting-rows { display: grid; gap: 10px; }

.server-card {
  --cut: var(--cut-m);
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 28px;
  padding: 12px 18px 12px 12px;
}
.server-card::before { transition: background 0.3s var(--ease); }
.server-card:hover::before { background: var(--plate-2); }
.server-card > .pad { --pad: 12px; left: calc(var(--lane) * -0.5 - var(--pad) / 2); top: calc(50% - var(--pad) / 2); }
.map-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, transparent 49.6%, rgba(126, 152, 172, 0.18) 50%, transparent 50.4%), var(--hull-2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.map-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.server-card:hover .map-art img { transform: scale(1.06); }
.map-art-blank { position: absolute; inset: 0; }
.row-main { min-width: 0; }
.map-name { font: 700 1.375rem/1.15 var(--font-display); font-stretch: 92%; color: var(--chrome); }
.row-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0 0; font-size: var(--fs-small); color: var(--steel); }
.session { margin: 6px 0 0; font-size: var(--fs-small); color: var(--steel); }
.session b { color: var(--silver); font-weight: 600; overflow-wrap: anywhere; }
.pop { display: grid; gap: 4px; margin-top: 8px; max-width: 220px; }
.players { margin: 0; font-size: var(--fs-small); color: var(--silver); }
.players .max { color: var(--steel); }
.row-addr { margin: 0; font-size: var(--fs-ui); color: var(--silver); }
.row-addr .lbl { display: block; font-size: 0.8125rem; color: var(--steel); }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
/* Ascended: violet marker; Direct connect is a label, not a button */
.server-card[data-type="asa"] .badge-online { --chip-edge: rgba(155, 133, 255, 0.45); }
.server-card[data-type="asa"] .badge-online::after { background: var(--violet); }

/* off-air: compact rows (inside the disclosure, or listed openly when a whole conference is resting) */
.server-card.offline { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 16px; padding: 8px 8px 8px 18px; }
.server-card.offline::before { background: rgba(10, 18, 48, 0.72); clip-path: none; box-shadow: inset 0 1px rgba(203, 215, 220, 0.08); }
.server-card.offline .map-name { font: 600 1.0625rem/1.3 var(--font-text); color: var(--silver); }
.server-card.offline .row-sub { grid-column: 1 / -1; margin: -4px 0 4px; font-size: var(--fs-fine); color: var(--steel); }
.resting { margin-top: var(--s-3); }
.resting > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  list-style: none;
  color: var(--silver);
  font-weight: 500;
}
.resting > summary::-webkit-details-marker { display: none; }
.resting > summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  transform: rotate(-45deg);
  transition: transform var(--dur-ui) var(--ease);
}
.resting[open] > summary::before { transform: rotate(45deg); }
.resting > summary:hover { color: var(--chrome); }
.resting-rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; margin-top: var(--s-2); }
.resting-open { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.server-card.skeleton { min-height: 123px; padding: 0; }
.server-card.skeleton::before { display: none; }
.rack-skeleton .server-group-title { color: var(--steel); }

/* a conference with nothing on air: every map is a full rack row, its window dimmed (the art stays readable) */
.resting-open { margin-top: 0; }
.server-card.offline.with-art { grid-template-columns: 176px minmax(0, 1fr) auto auto; gap: 12px 28px; padding: 12px 18px 12px 12px; }
.server-card.offline.with-art::before { background: var(--plate); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); box-shadow: none; }
.server-card.offline.with-art:hover::before { background: var(--plate-2); }
.server-card.offline.with-art .map-name { font: 700 1.375rem/1.15 var(--font-display); font-stretch: 92%; color: var(--silver); }
.server-card.with-art .map-art img { filter: saturate(0.6) brightness(0.62); transition: transform 0.7s var(--ease), filter 0.7s var(--ease); }
.server-card.with-art:hover .map-art img { filter: none; }

/* status unreachable: the way in, inside the rack */
.server-card.rack-fallback { grid-template-columns: minmax(0, 1fr) auto; padding: 18px 20px; }
.rack-fallback .session { max-width: 62ch; color: var(--silver); }
#server-grid > .notice { margin-bottom: var(--s-6); }

@media (max-width: 719.98px) {
  #server-grid { min-height: 420px; }
  .server-card, .server-card.offline.with-art { grid-template-columns: 104px minmax(0, 1fr); gap: 12px 16px; }
  .server-card .row-addr, .server-card .actions { grid-column: 1 / -1; }
  .server-card .actions { justify-content: flex-start; }
  .map-name, .server-card.offline.with-art .map-name { font-size: 1.1875rem; }
  .server-card.offline { grid-template-columns: minmax(0, 1fr) auto; }
  .server-card.offline .actions { grid-column: 1 / -1; justify-content: flex-start; }
  .server-card.rack-fallback { grid-template-columns: minmax(0, 1fr); }
}

/* alpha hunt (only while live) */
.alpha-current { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: var(--s-5); }
.alpha-current h3 { flex-basis: 100%; }
.alpha-current p { margin: 0; color: var(--silver); }
td.slayer { color: var(--chrome); }

/* ---------- why players stay: the night valley (pinned on wide screens with motion) ---------- */

.why { padding: 0; }
.why-scene { position: relative; z-index: 5; isolation: isolate; overflow: clip; }
.why-env { z-index: 0; }
.why-env .env-layer > img { object-position: 50% 62%; }
.why-near > img { object-position: 50% 100%; }
/* the night deepens behind the fact lines, so the river's highlights never sit under chrome type */
.why-scrim {
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(3, 6, 26, 0) 16%, rgba(3, 6, 26, 0) 82%, var(--void) 100%),
    linear-gradient(90deg, rgba(3, 6, 26, 0.86) 0%, rgba(3, 6, 26, 0.66) 38%, rgba(3, 6, 26, 0.2) 62%, rgba(3, 6, 26, 0) 78%);
}
@media (max-width: 899.98px) {
  .why-scrim { background: linear-gradient(180deg, var(--void) 0%, rgba(3, 6, 26, 0.55) 12%, rgba(3, 6, 26, 0.62) 88%, var(--void) 100%); }
}
.why-body { position: relative; z-index: 2; padding-block: var(--s-10); }
.why-head { margin-bottom: var(--s-8); }
.why-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-7) var(--s-7); max-width: 940px; margin: 0; }
.why-item { display: block; }
.why-phrase { font: 800 clamp(2.125rem, 1.4rem + 2.2vw, 3.25rem)/0.98 var(--font-display); font-stretch: 84%; color: var(--chrome); }
.why-text { margin: 12px 0 0; max-width: 34ch; font-size: var(--fs-body); color: var(--silver); }
/* the rail: the page trace continuing through the scene, at the lane */
.why-rail { position: absolute; top: 0; bottom: 0; left: calc(var(--gut) + var(--lane) * 0.5 - 0.8px); width: 1.6px; background: rgba(70, 210, 245, 0.45); }
.why-rail-fill { display: none; }
@media (max-width: 719.98px) { .why-rail { display: none; } }

/* pinned: one fact at a time, huge, through line masks; the rail fills with a via per fact */
.why.is-pinned .why-scene { height: 100vh; height: 100svh; padding: 0; }
.why.is-pinned .why-body { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); padding-top: calc(var(--nav-h) + 6vh); padding-bottom: 12vh; }
.why.is-pinned .why-head { margin-bottom: 0; }
.why.is-pinned .why-list { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0; max-width: none; }
.why.is-pinned .why-item { grid-area: 1 / 1; }
.why.is-pinned .why-phrase { max-width: 11ch; font-size: clamp(3.5rem, 1.6rem + 5.4vw, 7.5rem); line-height: 0.92; font-stretch: 80%; }
.why.is-pinned .why-text { margin-top: 22px; font-size: var(--fs-lede); }
.why.is-pinned .why-rail { background: var(--facet); }
.why.is-pinned .why-rail-fill { display: block; position: absolute; inset: 0; background: var(--trace); transform: scaleY(0); transform-origin: 50% 0; }
.why-rail .pad { --pad: 12px; left: calc(0.8px - var(--pad) / 2); }

/* ---------- what runs on the cluster: two rails, each feature taps one ---------- */

.features.sec { isolation: isolate; overflow: clip; padding-block: calc(var(--chapter-pad) * 0.7); }
.features-env { z-index: -1; }
/* the standing stones behind the right rail: they rise out of the night and fade back into it at every edge */
.features-stones { left: 34%; top: -6%; bottom: -6%; }
.features-stones > img {
  object-position: 62% 60%;
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 26%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 26%, #000 70%, transparent 100%);
  mask-composite: intersect;
}
.features-scrim { background: linear-gradient(90deg, var(--void) 0%, rgba(3, 6, 26, 0.6) 46%, rgba(3, 6, 26, 0.35) 100%); }
@media (max-width: 959.98px) {
  .features-stones { left: 0; }
  .features-scrim { background: rgba(3, 6, 26, 0.62); }
}
.features .sec-note a { color: var(--chrome); }
.circuit { position: relative; display: grid; gap: 0 var(--s-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 960px) { .circuit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the bus that leaves the spine lane and feeds both rails */
.circuit::before {
  content: "";
  position: absolute;
  top: -28px;
  left: calc(var(--lane) * -0.5);
  width: calc(var(--lane) * 0.5 + 6.5px);
  height: 1px;
  background: var(--facet);
}
/* wide: the bus runs the full width of the board, over both rails, and ends in a pad at the right edge */
@media (min-width: 960px) {
  .circuit::before { width: calc(var(--lane) * 0.5 + 100%); }
  .circuit::after {
    content: "";
    position: absolute;
    right: -6px; top: -34px;
    width: 12px; height: 12px;
    background: var(--facet);
    clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
    transition: background var(--dur-ui) var(--ease) 1s;
  }
  .circuit.lit::after, html:not(.motion) .circuit::after { background: var(--trace); }
}
.circuit-item { position: relative; padding: 0 0 var(--s-6) 40px; }
.circuit-item::before, .circuit-item::after { content: ""; position: absolute; left: 6px; top: -28px; bottom: 0; width: 1px; background: var(--facet); }
.circuit-item::after { background: var(--trace); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.6s var(--ease); transition-delay: var(--d, 0s); }
.circuit-item:nth-last-child(-n+2)::before, .circuit-item:nth-last-child(-n+2)::after { bottom: auto; height: calc(28px + 14px); }
@media (max-width: 959.98px) {
  .circuit-item:nth-last-child(2)::before, .circuit-item:nth-last-child(2)::after { bottom: 0; height: auto; }
}
.circuit-item > .pad { --pad: 13px; left: 0; top: 8px; }
.circuit-item > .pad::after { transition-delay: calc(var(--d, 0s) + 0.25s); }
.circuit-item h3 { font: 600 1.1875rem/1.3 var(--font-text); color: var(--chrome); margin-bottom: 6px; }
.circuit-item p { margin: 0; max-width: 54ch; font-size: 1.0625rem; color: var(--silver); }
.circuit.lit .circuit-item::after, html:not(.motion) .circuit-item::after { transform: scaleY(1); }
.circuit.lit .circuit-item > .pad::after { opacity: 1; }

/* ---------- top tribes: the ledger + a crest window with the fossil ---------- */

.tribes { overflow: clip; }
.tribes-grid { display: grid; gap: var(--s-6) var(--s-8); align-items: start; }
.tribes-grid > .sec-head { margin-bottom: var(--s-4); }
@media (min-width: 1100px) {
  .tribes-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .tribes-grid > .sec-head { grid-column: 1 / -1; }
}
.tribes-board { position: relative; z-index: 2; min-width: 0; max-width: 720px; }
.ledger, .ledger thead, .ledger tbody { display: block; }
.ledger { border-spacing: 0; }
.ledger tr { position: relative; isolation: isolate; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 0 18px; }
.ledger thead tr { padding: 0 22px 6px 18px; }
.ledger thead th { padding: 0; }
.ledger tbody { display: grid; gap: 8px; }
.ledger tbody tr { --cut: var(--cut-m); min-height: 68px; padding: 14px 22px 14px 18px; }
.ledger tbody tr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--plate);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.ledger tbody td, .ledger tbody th { padding: 0; background: none; clip-path: none; }
.ledger tbody tr:hover::before { background: var(--plate-2); }
.ledger td.rank { position: relative; width: auto; font-size: 1.625rem; }
.ledger td.rank > .pad { --pad: 12px; left: calc(-18px + var(--lane) * -0.5 - var(--pad) / 2); top: calc(50% - var(--pad) / 2); }
/* the stub ends at the plate's edge, never at the numeral (a line touching '4' reads as '-4') */
.ledger td.rank > .stub { left: calc(-18px + var(--lane) * -0.5); width: calc(var(--lane) * 0.5); }
.ledger td:nth-child(2) { min-width: 0; }
.ledger .tribe { display: block; font: 700 1.375rem/1.2 var(--font-display); font-stretch: 92%; color: var(--chrome); overflow-wrap: break-word; }
.ledger .members { display: block; font-size: var(--fs-fine); color: var(--steel); }
.ledger td.score { font-size: 1.3125rem; white-space: nowrap; }
.ledger td.score .lbl { font-size: var(--fs-fine); font-weight: 400; color: var(--steel); }
.ledger tr.rank-1 { min-height: 96px; }
.ledger tr.rank-1 td.rank { font-size: 2.75rem; }
.ledger tr.rank-1 .tribe { font-size: 2.125rem; font-weight: 800; background-image: var(--chrome-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ledger tr.rank-1 td.score { font-size: 1.75rem; }
/* phones: the name gets the row's width and the score drops onto its own line under it (the 'points' word
   names the column, so the header row is kept for screen readers only) */
@media (max-width: 559.98px) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ledger tbody tr { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px 12px 14px; }
  .ledger td.rank { grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
  .ledger td.score { grid-column: 2; text-align: left; font-size: 1.125rem; }
  .ledger tr.rank-1 td.rank { font-size: 2.125rem; }
  .ledger tr.rank-1 .tribe { font-size: 1.375rem; }
  .ledger tr.rank-1 td.score { font-size: 1.375rem; }
}
.ledger tr.skeleton { min-height: 68px; }
.ledger tr.skeleton::before { background: rgba(16, 28, 62, 0.55); }
.ledger tr.skeleton td { height: auto; background: none; }
.stage-more { margin: var(--s-5) 0 0; }
.tribes-state > div:first-child { padding: 22px 24px; }
.tribes-state { position: relative; isolation: isolate; display: grid; gap: var(--s-5); }
.tribes-state > div:first-child::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(100% - 132px); z-index: -1; background: linear-gradient(90deg, var(--violet) 0 2px, transparent 2px), var(--plate); }
.tribes-state p { margin: 0; color: var(--silver); }
.tribes-state p:first-child { font: 700 1.375rem/1.2 var(--font-display); font-stretch: 92%; color: var(--chrome); margin-bottom: 6px; }
.podium-ghost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; height: 108px; }
.podium-ghost span {
  display: grid;
  place-items: start center;
  padding-top: 10px;
  font: 800 1.5rem/1 var(--font-display);
  color: var(--facet);
  box-shadow: inset 0 0 0 1px var(--rule);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
}
.podium-ghost span:nth-child(1) { height: 72%; }
.podium-ghost span:nth-child(2) { height: 100%; color: rgba(70, 210, 245, 0.5); }
.podium-ghost span:nth-child(3) { height: 56%; }

.tribes-portal { position: relative; width: min(100%, 520px); aspect-ratio: 0.92; justify-self: end; margin-top: var(--s-4); }
.tribes-portal .portal-plate > img { object-position: 64% 50%; }
.tribes-shade { opacity: 0.35; }
/* the skull breaks the left flank but stays 32px+ clear of the ledger */
.tribes-fossil { z-index: 3; left: -4%; bottom: 14%; width: 110%; }
@media (max-width: 1099.98px) {
  .tribes-portal { justify-self: center; width: min(78%, 460px); margin-top: var(--s-6); }
  .tribes-fossil { left: -10%; width: 112%; }
}

/* ---------- exclusive: relics on plinths in the crystal cave ---------- */

.vault-sec { isolation: isolate; overflow: clip; }
.vault-env { z-index: -1; }
.vault-plate > img { object-position: 62% 60%; opacity: 0.55; }
.vault-scrim { background: linear-gradient(180deg, var(--void) 0%, rgba(3, 6, 26, 0.35) 28%, rgba(3, 6, 26, 0.55) 70%, var(--void) 100%), linear-gradient(90deg, rgba(3, 6, 26, 0.75), rgba(3, 6, 26, 0) 60%); }
.vault-sec .sec-note p { color: var(--silver); }
/* every row of the vault shares one plinth line: each tier spans a relic track and a plinth track of the vault's
   own grid (subgrid), so the relic track is as tall as the tallest relic in that row and every plinth starts on
   the same line whatever the art's shape (rows repeat 'relic, plinth' when the vault wraps) */
.vault { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto auto; gap: 0 14px; margin: 0; padding: 0; list-style: none; }
.tier { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; }
/* each relic stands on its plinth's chrome cap: its art floats in a transparent square, so the box sinks by the
   empty share under the object (--sink, style.css [data-relic]) at the art's width (--w); a contact shadow
   grounds it */
.relic { --w: 80%; position: relative; z-index: 1; display: flex; justify-content: center; align-self: end; margin-bottom: calc(var(--sink, 0.15) * var(--w) * -1 - 1px); }
.tier-top .relic { --w: 92%; }
.relic img { width: var(--w); height: auto; transition: transform 0.55s var(--ease-press); }
.relic::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: calc(var(--sink, 0.15) * 100% - 6px); /* the box is exactly the art's square */
  width: calc(var(--w) * 0.62);
  height: 12px;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(1, 3, 12, 0.9), rgba(1, 3, 12, 0));
}
/* the frozen pane (fx/frost.js, motion only) stands on the plinth's cap: it stops where the art's empty share under
   the object begins, so the cap and its via never sit behind the ice */
.relic > .frost-pane { clip-path: inset(0 0 calc(var(--sink, 0.15) * 100% + 1px) 0); }
.tier:hover .relic img { transform: translateY(-8px); }
.plinth { --cut: 14px; position: relative; isolation: isolate; flex: 1; padding: 30px 18px 20px; }
.plinth::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--plate);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}
/* the plinth's lit cap: a chrome edge where the relic stands */
.plinth::after {
  content: "";
  position: absolute;
  top: 0; left: var(--cut); right: var(--cut);
  height: 2px;
  background: linear-gradient(90deg, rgba(245, 248, 248, 0.2), rgba(245, 248, 248, 0.85) 50%, rgba(245, 248, 248, 0.2));
}
.plinth > .pad { --pad: 12px; left: calc(50% - var(--pad) / 2); top: 10px; }
.tier-top .plinth::before { background: linear-gradient(180deg, rgba(166, 238, 255, 0.35) 0 1px, transparent 1px), var(--plate-2); }
.tier-n { margin: 0 0 4px; font-size: var(--fs-fine); color: var(--steel); }
.tier-n .flag { color: var(--trace); font-weight: 600; }
.tier-name { margin-bottom: 14px; font: 800 1.75rem/1.1 var(--font-display); font-stretch: 88%; color: var(--chrome); }
.perks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: 1.45; color: var(--silver); }
.perks b { color: var(--chrome); font-weight: 700; }
.vault-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); margin-top: var(--s-6); }
.booster-row { position: relative; isolation: isolate; display: flex; align-items: center; gap: 18px; max-width: 820px; padding: 12px 20px 12px 12px; }
.booster-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 18, 48, 0.78); box-shadow: inset 0 1px rgba(203, 215, 220, 0.1); }
.booster-relic { width: 64px; height: 64px; flex: none; }
.booster-row p { margin: 0; font-size: var(--fs-ui); color: var(--silver); }
.booster-row strong { color: var(--chrome); }
.vault-note { max-width: 80ch; margin: var(--s-5) 0 0; }
/* laptops: still one ladder of five, set smaller (it never wraps 3 + 2) */
@media (min-width: 900px) and (max-width: 1179.98px) {
  .vault { gap: 10px; }
  .plinth { padding: 28px 12px 16px; }
  .tier-name { font-size: 1.375rem; margin-bottom: 10px; }
  .perks { font-size: var(--fs-fine); }
}
/* tablets and phones: two by two, the top rank across the full row; every relic still stands centred on its own
   plinth's cap (the top rank's a little larger) */
@media (max-width: 899.98px) {
  .vault { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .relic { --w: min(72%, 180px); }
  .tier-name { font-size: 1.375rem; }
  .plinth { padding: 28px 14px 16px; margin-bottom: 14px; }
  .tier-top { grid-column: 1 / -1; }
  .tier-top .relic { --w: min(46%, 230px); }
}

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

.faq-head { margin-bottom: 0; }
@media (min-width: 960px) { .faq .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
@media (min-width: 960px) { .faq-head { position: sticky; top: calc(var(--nav-h) + var(--s-6)); } }
.faq-more { margin: var(--s-5) 0 0; color: var(--steel); }
.faq-more a { color: var(--chrome); }


/* ---------- motion-only overscan: layers that drift by depth get room so no edge ever shows ---------- */

html.motion .portal-win > .env-layer { top: -8%; bottom: -8%; }
html.motion .why-env > .env-layer { top: -10%; bottom: -10%; }
html.motion .vault-env > .env-layer { top: -8%; bottom: -8%; }

/* ---------- faq: the crest stands over the answers on a bank of mist (wide screens; the column is sticky) ---------- */

.faq.sec { padding-bottom: var(--s-7); }
.faq + .cta-band.sec { padding-top: var(--s-8); }
.faq-head { grid-template-columns: minmax(0, 1fr); }
.faq-crest { display: none; }
@media (min-width: 960px) {
  .faq-crest { position: relative; display: grid; place-items: center; width: min(100%, 380px); aspect-ratio: 1.15; margin-top: var(--s-6); }
  .faq-env { inset: auto -30% -4% -30%; height: 58%; z-index: 0; }
  .faq-env .env-layer > img { object-position: 50% 100%; opacity: 0.55; -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
  .faq-crest > .crest { position: relative; z-index: 1; width: 78%; }
  .faq-crest > .crest > img { width: 100%; height: auto; }
  /* the violet under-glow of the crest's lowest bevels, as a thin line on the mist */
  .faq-crest::after { content: ""; position: absolute; z-index: 1; left: 22%; right: 22%; bottom: 7%; height: 1px; background: linear-gradient(90deg, transparent, var(--violet-deep) 30%, var(--violet) 50%, var(--violet-deep) 70%, transparent); opacity: 0.8; }
}