/* ==========================================================================
   GTA VI HUB + COMMUNITY
   Loaded after wire.css, which owns the header, footer, brand and buttons.

   The page has no photography, by decision rather than by accident: we have not
   established permission to reproduce Rockstar's files, and we will not paint
   over that gap with generated artwork. So the structure carries the weight —
   a launch board, a verification ledger under every claim, and a lot of black.
   ========================================================================== */

.lime { color: var(--lime); }

/* A class that sets display beats the user-agent rule for [hidden], so a
   .updatebar or a .topic__links marked hidden stayed on screen. Every control
   on these pages that hides itself relies on this line. */
[hidden] { display: none !important; }

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

/* --------------------------------- shell --------------------------------- */
.sect { padding: clamp(3.5rem, 7vw, 6.5rem) 0; background: var(--ink); }
.sect--alt { background: #0C1011; }
.sect__in {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
/* Constrain the measure without moving the column: max-width on the
   container centred this section against every other one on the page. */
.sect__in.narrow > * { max-width: 68ch; }
.sect__head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.sect__h {
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 800;
  color: var(--cream);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
.sect__sub {
  margin: 0;
  max-width: 62ch;
  color: var(--cream-dim);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
}
.prose { color: var(--cream-dim); line-height: 1.68; max-width: 64ch; margin: 0 0 1rem; }
.prose strong { color: var(--cream); }
.prose--fine { font-size: 0.9rem; }

/* ------------------------------ the ledger ------------------------------ *
   The structural device of the whole page: what a claim rests on, and when a
   person last looked. It is information, so it gets a rule rather than an icon. */
.ledger {
  margin: 0.85rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  font-size: 0.8rem;
  line-height: 1.5;
}
.ledger__src { color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.35); }
.ledger__src:hover, .ledger__src:focus-visible { border-bottom-color: var(--lime); }
.ledger__src--none { color: #7E8A63; border-bottom: 1px dashed #4A5340; }
.ledger__at { color: var(--cream-dim); }
.ledger__ext::after { content: " \2197"; font-size: 0.85em; }

/* -------------------------------- chips -------------------------------- */
.chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid;
  white-space: nowrap;
}
.chip--confirmed { color: var(--lime); border-color: rgba(214, 255, 63, 0.45); background: rgba(214, 255, 63, 0.08); }
.chip--unannounced { color: #9FB0B4; border-color: #384245; background: rgba(255, 255, 255, 0.03); }
.chip--unverified { color: var(--sunset); border-color: rgba(255, 113, 61, 0.45); background: rgba(255, 113, 61, 0.08); }
.chip--reporting { color: #9FB0B4; border-color: #384245; background: rgba(255, 255, 255, 0.03); }
.chip--theory { color: var(--sunset); border-color: rgba(255, 113, 61, 0.45); background: rgba(255, 113, 61, 0.08); }
.chip--spoiler { color: #C9B8FF; border-color: rgba(201, 184, 255, 0.4); background: rgba(201, 184, 255, 0.08); }

/* ----------------------------- the opening ----------------------------- */
.open-h {
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(214, 255, 63, 0.10), transparent 60%),
    radial-gradient(90% 70% at 8% 100%, rgba(255, 113, 61, 0.10), transparent 62%),
    var(--ink);
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}
.open-h__in {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Constrain the measure without moving the column: max-width on the container
   centred this hero against every section below it. */
.open-h__in--slim { grid-template-columns: minmax(0, 1fr); }
.open-h__in--slim > .open-h__body > * { max-width: 40ch; }
.open-h__in--slim > .open-h__body > .open-h__lede { max-width: 56ch; }
.open-h--slim { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.open-h__t {
  margin: 0.9rem 0 1.1rem;
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--cream);
}
.open-h__lede {
  margin: 0;
  max-width: 54ch;
  color: var(--cream-dim);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.62;
}
.open-h__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.9rem; }

/* the launch board — the one loud object on a page with no pictures */
.board {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #12181A 0%, #0A0E0F 100%);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
.board__k {
  margin: 0 0 0.5rem; color: var(--cream-dim);
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.board__d { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; color: var(--cream); }
.board__day { font-size: clamp(3.4rem, 7vw, 5rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; color: var(--lime); }
.board__mo { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; }
.board__yr { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700; color: var(--cream-dim); letter-spacing: -0.02em; }
.board__count {
  margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 0.5rem;
}
.board__n { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: var(--cream); letter-spacing: -0.03em; }
.board__u { color: var(--cream-dim); font-size: 0.95rem; }
.board__plat { margin: 1rem 0 0; color: var(--cream); font-size: 0.95rem; font-weight: 600; }
.board__fine { margin: 0.55rem 0 0; color: var(--cream-dim); font-size: 0.8rem; line-height: 1.5; }
.board__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
}

/* ------------------------------ the facts ------------------------------ */
.facts {
  display: grid;
  /* Six facts, three columns: an auto-fit grid made five cells at 1440 and
     left four empty ones showing through as a grey slab. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fact { background: var(--ink); padding: clamp(1.15rem, 2vw, 1.6rem); }
.fact__label { margin: 0 0 0.35rem; color: var(--cream-dim); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.fact__value { margin: 0 0 0.6rem; color: var(--cream); font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.fact__status { margin: 0 0 0.6rem; }
.fact__note { margin: 0; color: var(--cream-dim); font-size: 0.875rem; line-height: 1.55; }
.fact--unverified .fact__value { color: var(--sunset); }
.fact--unannounced .fact__value { color: #9FB0B4; }

/* --------------------------- developments --------------------------- */
.feedstate { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0.9rem 0 0; color: var(--cream-dim); font-size: 0.85rem; }
.updatebar {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  margin: 0 0 1.5rem; padding: 0.8rem 1.1rem;
  border: 1px solid rgba(214, 255, 63, 0.4); border-radius: var(--radius);
  background: rgba(214, 255, 63, 0.07); color: var(--cream); font-weight: 600;
}
.updatebar__btn {
  font: inherit; cursor: pointer; padding: 0.4rem 0.9rem; border-radius: 999px;
  border: 0; background: var(--lime); color: var(--lime-ink); font-weight: 700;
}
.devs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.dev { background: var(--ink); padding: clamp(1.25rem, 2.2vw, 1.85rem); }
.dev__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 0.7rem; }
.dev__date { color: var(--cream-dim); font-size: 0.8rem; }
.dev__t { margin: 0 0 0.5rem; color: var(--cream); font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.dev__d { margin: 0; color: var(--cream-dim); line-height: 1.62; max-width: 72ch; }

.autostate { margin-top: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.autostate__s { cursor: pointer; padding: 0.95rem 1.2rem; color: var(--cream); font-weight: 600; }
.autostate__b { padding: 0 1.2rem 1.2rem; color: var(--cream-dim); line-height: 1.62; }
.autostate__b p { margin: 0 0 0.85rem; max-width: 74ch; }
.autostate__b strong { color: var(--cream); }
.autostate__list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.7rem; }
.autostate__list em { color: var(--lime); font-style: normal; }

/* ------------------------------- player ------------------------------- */
.player { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.player__stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(145deg, #141A1C 0%, #080A0B 70%);
}
.player__facade { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: clamp(1.25rem, 2.6vw, 2.25rem); }
.player__meta { max-width: 46ch; }
.player__t { margin: 0 0 0.35rem; color: var(--cream); font-size: clamp(1.15rem, 2.1vw, 1.7rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.player__m { margin: 0 0 0.6rem; color: var(--lime); font-size: 0.85rem; font-weight: 600; }
.player__b { margin: 0; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.55; }
.player__play {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.7rem;
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 0.7rem 1.25rem; border-radius: 999px; border: 0;
  background: var(--lime); color: var(--lime-ink);
}
.player__play--out { background: transparent; color: var(--lime); border: 1px solid var(--lime); text-decoration: none; }
.player__tri { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.player__fine { margin: 0; color: var(--cream-dim); font-size: 0.78rem; }
.player__frame, .player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player__side { display: flex; flex-direction: column; gap: 1rem; }
.vsw { display: grid; gap: 0.5rem; }
.vsw__btn {
  display: grid; gap: 0.2rem; text-align: left; font: inherit; cursor: pointer;
  padding: 0.85rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--cream);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.vsw__btn:hover { border-color: #3D464A; transform: translateY(-1px); }
.vsw__btn.is-on { border-color: var(--lime); background: rgba(214, 255, 63, 0.08); }
.vsw__t { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.vsw__m { color: var(--cream-dim); font-size: 0.8rem; }

.chapters { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1rem; }
.chapters__h { margin: 0 0 0.5rem; color: var(--cream); font-weight: 700; font-size: 0.95rem; }
.chapters__none { margin: 0 0 0.85rem; color: var(--cream-dim); font-size: 0.85rem; line-height: 1.55; }
.chapters__out { color: var(--lime); font-size: 0.85rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.35); }
.chapters__list { list-style: none; margin: 0 0 0.85rem; padding: 0; display: grid; gap: 0.3rem; }
.chapters__btn {
  width: 100%; display: flex; gap: 0.75rem; align-items: baseline; text-align: left;
  font: inherit; cursor: pointer; padding: 0.5rem 0.6rem; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--cream);
}
.chapters__btn:hover { border-color: var(--line); background: var(--surface-2); }
.chapters__time { color: var(--lime); font-weight: 700; font-size: 0.82rem; min-width: 3.2rem; }

/* ------------------------------- split ------------------------------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 2rem; }
.split__col { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ink); padding: clamp(1.25rem, 2.4vw, 1.9rem); }
.split__h { margin: 0 0 0.5rem; color: var(--cream); font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; }
.split__lede { margin: 0 0 1.35rem; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.6; }
.split__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.split__claim { margin: 0 0 0.4rem; color: var(--cream); font-weight: 700; line-height: 1.35; }
.split__detail { margin: 0; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; }

/* ---------------------------- destinations ---------------------------- */
.dests { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.dest {
  display: grid; gap: 0.55rem; align-content: start;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.dest:hover, .dest:focus-visible { border-color: var(--lime); transform: translateY(-3px); background: var(--surface-2); }
.dest__kicker { color: var(--lime); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dest__t { color: var(--cream); font-size: clamp(1.1rem, 1.7vw, 1.3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.dest__d { color: var(--cream-dim); font-size: 0.92rem; line-height: 1.6; }
.dest__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.dest__meta { color: var(--cream-dim); font-size: 0.82rem; }
.dest__go { color: var(--lime); font-size: 1.1rem; transition: transform 0.2s ease; }
.dest:hover .dest__go { transform: translateX(4px); }

/* ------------------------------- record ------------------------------- */
.record { display: grid; gap: 0.75rem; margin-top: 2rem; }
.rec { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink); }
.rec__s { cursor: pointer; padding: 1rem 1.25rem; color: var(--cream); font-weight: 700; font-size: 1.02rem; }
.rec[open] .rec__s { border-bottom: 1px solid var(--line); }
.rec > :not(summary) { padding: 1.25rem; }

.hist { list-style: none; margin: 0; display: grid; gap: 0.9rem; }
.hist__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.hist__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hist__date { color: var(--lime); font-weight: 700; font-size: 0.88rem; }
.hist__event { color: var(--cream-dim); line-height: 1.55; }
.hist__src { color: var(--cream); font-size: 0.82rem; text-decoration: none; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hist__src:hover { border-bottom-color: var(--lime); }

.corrs, .opens { list-style: none; margin: 0; display: grid; gap: 1.1rem; }
.corr { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; }
.corr__date { color: var(--lime); font-weight: 700; font-size: 0.88rem; }
.corr__t { margin: 0; color: var(--cream-dim); line-height: 1.6; }
.open__q { margin: 0 0 0.25rem; color: var(--cream); font-weight: 700; }
.open__w { margin: 0; color: var(--cream-dim); line-height: 1.6; font-size: 0.92rem; }

.qas { display: grid; gap: 0.6rem; }
.qa { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.qa__q { cursor: pointer; padding: 0.8rem 1rem; color: var(--cream); font-weight: 600; }
.qa__a { margin: 0; padding: 0 1rem 1rem; color: var(--cream-dim); line-height: 1.62; max-width: 72ch; }

/* -------------------------------- pulse -------------------------------- */
.pulse { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.pulse__item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(1.2rem, 2.2vw, 1.7rem); }
.pulse__label { margin: 0 0 0.5rem; color: var(--cream); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.pulse__blurb { margin: 0 0 1rem; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; }
.pulse__go { color: var(--lime); font-weight: 600; font-size: 0.9rem; text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.35); }
.pulse__more { margin: 0; }

/* ------------------------------ community ------------------------------ */
.comms { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.comm { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(1.25rem, 2.3vw, 1.8rem); transition: border-color 0.2s ease, transform 0.2s ease; }
.comm:hover { border-color: #3D464A; transform: translateY(-2px); }
.comm__plat { margin: 0 0 0.4rem; color: var(--lime); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.comm__t { margin: 0 0 0.5rem; color: var(--cream); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.comm__d { margin: 0 0 1.1rem; color: var(--cream-dim); line-height: 1.6; font-size: 0.92rem; }
.comm__go { color: var(--cream); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--lime); }
.comm__chk { margin: 0.9rem 0 0; color: var(--cream-dim); font-size: 0.78rem; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.85rem; }
.filter {
  font: inherit; cursor: pointer; padding: 0.45rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--cream-dim); font-weight: 600;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.filter:hover { color: var(--cream); border-color: #3D464A; }
.filter.is-on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.spoiler-toggle { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--cream-dim); font-size: 0.9rem; cursor: pointer; }
.spoiler-toggle input { accent-color: var(--lime); width: 1rem; height: 1rem; }
.filters__count { margin: 0 0 1.5rem; color: var(--cream-dim); font-size: 0.85rem; }

/* Six full-width stacked cards read as one long list; in a grid the per-topic
   colour actually does its job of telling them apart. */
.topics {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.topic { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ink); padding: clamp(1.2rem, 2.2vw, 1.75rem); }
.topic[hidden] { display: none; }
.topic__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; margin-bottom: 0.55rem; }
.topic__t { margin: 0; color: var(--cream); font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; letter-spacing: -0.02em; }
.topic__d { margin: 0 0 1rem; color: var(--cream-dim); line-height: 1.6; font-size: 0.93rem; max-width: 72ch; }
.topic__reveal {
  font: inherit; cursor: pointer; font-weight: 600; font-size: 0.88rem;
  padding: 0.45rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--cream);
}
.topic__reveal:hover { border-color: var(--lime); }
.topic__links { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.topic__links a { color: var(--lime); text-decoration: none; font-weight: 600; font-size: 0.93rem; border-bottom: 1px solid rgba(214, 255, 63, 0.3); }
.topic__links a:hover { border-bottom-color: var(--lime); }
.why { margin: 0 0 1.25rem; padding-left: 1.15rem; color: var(--cream-dim); line-height: 1.65; display: grid; gap: 0.6rem; max-width: 70ch; }

/* -------------------------------- motion -------------------------------- *
   One orchestrated reveal, and nothing else moves on its own.

   The hidden state is conditional on scripting being available. Without this
   guard, a browser with JavaScript off — or a script that fails to load — would
   leave the developments, the feature columns and the destination cards at
   opacity 0 permanently, which is content loss dressed up as an animation. */
@media (scripting: enabled) {
  [data-reveal] { opacity: 0; transform: translateY(14px); }
}
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  /* Everything, not just the classes declared here: these pages also load
     wire.css, whose header and button transitions survived a narrower reset. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; }
  .dest:hover, .comm:hover, .vsw__btn:hover, .dest:hover .dest__go { transform: none; }
}

/* ------------------------------- focus ------------------------------- */
.hub-focusable:focus-visible,
.filter:focus-visible, .topic__reveal:focus-visible, .vsw__btn:focus-visible,
.player__play:focus-visible, .updatebar__btn:focus-visible, .chapters__btn:focus-visible,
.dest:focus-visible, .rec__s:focus-visible, .qa__q:focus-visible, .autostate__s:focus-visible,
.ledger__src:focus-visible, .comm__go:focus-visible, .topic__links a:focus-visible,
.pulse__go:focus-visible, .chapters__out:focus-visible, .hist__src:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------ narrow ------------------------------ */
@media (max-width: 1000px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .open-h__in { grid-template-columns: minmax(0, 1fr); }
  .player { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .hist__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .hist__src { justify-self: start; }
  .corr { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .feedstate { gap: 0.25rem; flex-direction: column; }
}

/* ==========================================================================
   THE REDESIGNED HUB — cinematic composition, large image cards.

   Added after the original hub rules so the Community page keeps the classes
   it already uses. Everything below is new vocabulary for the hub, the
   pre-order comparison and the shared card treatments.
   ========================================================================== */

.dot { color: var(--lime); }
.ext::after { content: " \2197"; font-size: 0.85em; }
.ic { width: 22px; height: 22px; flex: none; }

/* --------------------------- buttons, restated --------------------------- *
   wire.css owns .btn; these add the feedback states the brief asks for and a
   small variant for in-section calls to action. */
.btn { transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn--lime:hover { box-shadow: 0 10px 30px -12px rgba(214, 255, 63, 0.75); }
.btn--sm { padding: 0.55rem 1.05rem; font-size: 0.92rem; }
.btn__tri {
  width: 0; height: 0; margin-right: 0.15rem;
  border-left: 10px solid currentColor;
  border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent;
}

/* ------------------------------ the hero ------------------------------ */
.chero {
  position: relative;
  isolation: isolate;
  min-height: min(80vh, 660px);
  /* Column, not row: the credit line becomes a flex sibling once it stops being
     absolutely positioned on a phone, and in a row it landed beside the
     headline instead of under the hero. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
}
.chero__media { position: absolute; inset: -8% 0 -8% 0; z-index: 0; }
.chero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 76% 52%;
  will-change: transform;
}
.chero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(8, 10, 11, 0.95) 30%, rgba(8, 10, 11, 0.66) 55%, rgba(8, 10, 11, 0.34) 100%),
    linear-gradient(0deg, var(--ink) 2%, rgba(8, 10, 11, 0.45) 30%, transparent 62%),
    linear-gradient(180deg, rgba(8, 10, 11, 0.7) 0%, transparent 22%);
}
.chero__in {
  position: relative; z-index: 1;
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2.5rem, 4.5vw, 3.5rem);
}
.chero__body { max-width: 34ch; }
.chero__t {
  margin: 0.8rem 0 0.8rem;
  font-size: clamp(2.6rem, 6vw, 4.9rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--cream);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
}
.chero__lede {
  margin: 0; color: var(--cream);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.7);
}
.chero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.6rem; }
.chero__days { margin: 1.2rem 0 0; color: var(--cream-dim); font-size: 0.92rem; max-width: none; white-space: nowrap; }
.chero__days span { color: var(--lime); font-weight: 800; font-size: 1.15rem; }
.chero__credit,
.crew__credit,
.sect__credit {
  margin: 0; color: #868E91; font-size: 0.78rem; line-height: 1.5;
}
.chero__credit {
  position: absolute; z-index: 2; bottom: 0.6rem; right: var(--gutter);
  max-width: 44ch; text-align: right;
}
.sect__credit { margin-top: 1.5rem; }

/* ---------------------------- quick links ---------------------------- */
.qls { background: #0C1011; border-block: 1px solid var(--line); }
.qls__in {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ql {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.1rem 1.25rem; text-decoration: none; color: var(--cream);
  border-left: 1px solid var(--line);
  transition: background 0.18s ease, color 0.18s ease;
}
.ql:first-child { border-left: 0; }
.ql:hover { background: rgba(214, 255, 63, 0.06); }
.ql .ic { color: var(--lime); }
.ql__b { display: grid; gap: 0.1rem; min-width: 0; }
.ql__t { font-weight: 700; font-size: 0.98rem; }
.ql__d { color: var(--cream-dim); font-size: 0.85rem; }
.ql__go { margin-left: auto; color: var(--lime); font-size: 1.15rem; transition: transform 0.18s ease; }
.ql:hover .ql__go { transform: translateX(4px); }

/* --------------------------- section backdrop --------------------------- */
.sect--shot { position: relative; isolation: isolate; overflow: hidden; }
.sect__shot { position: absolute; inset: 0; z-index: 0; }
.sect__shot img { width: 100%; height: 100%; object-fit: cover; }
.sect__shotscrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(8, 10, 11, 0.93) 30%, rgba(8, 10, 11, 0.95) 70%, var(--ink) 100%);
}
.sect--shot .sect__in { position: relative; z-index: 1; }
.sect__head--split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.25rem, 3vw, 3rem); align-items: end;
}
.sect__head--split .sect__sub { margin-bottom: 0.4rem; }

/* ------------------------------ the facts ------------------------------ */
.fact__note { margin-bottom: 0.65rem; }
.facts__cta { margin: 1.75rem 0 0; }

/* A source reference that stays out of the way until asked for. */
.src { display: inline-block; }
.src__s {
  cursor: pointer; list-style: none; color: var(--cream-dim);
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px dotted #3D464A; padding-bottom: 1px;
}
.src__s::-webkit-details-marker { display: none; }
.src__s:hover { color: var(--lime); border-bottom-color: var(--lime); }
.src__b { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--cream-dim); line-height: 1.5; }
.src__b a { color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.35); }

/* ------------------------------- trailers ------------------------------- */
.trows { display: grid; gap: 0.5rem; }
.trow {
  display: flex; align-items: center; gap: 1rem; text-align: left;
  font: inherit; cursor: pointer; padding: 0.9rem 1rem;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: rgba(23, 27, 28, 0.82); color: var(--cream);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.trow:hover { border-color: #3D464A; transform: translateY(-1px); }
.trow.is-on { border-color: var(--lime); background: rgba(214, 255, 63, 0.09); }
.trow__b { display: grid; gap: 0.15rem; min-width: 0; }
.trow__t { font-weight: 700; font-size: 0.97rem; letter-spacing: -0.01em; }
.trow__d { color: var(--cream-dim); font-size: 0.82rem; }
.trow__meta { margin-left: auto; text-align: right; display: grid; gap: 0.15rem; }
.trow__dur {
  font-weight: 700; font-size: 0.8rem; color: var(--cream);
  background: rgba(0, 0, 0, 0.55); border-radius: 4px; padding: 0.15rem 0.4rem;
}
.trow__off { color: var(--sunset); font-size: 0.72rem; }
.deeplink { color: var(--lime); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--lime); align-self: start; }
.player__stage { background: linear-gradient(145deg, #141A1C 0%, #05070700 70%), #06090A; }

/* ---------------------------- the big cards ---------------------------- */
.deeps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.deep {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--surface); text-decoration: none; isolation: isolate;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.deep:hover, .deep:focus-visible { border-color: var(--lime); transform: translateY(-4px); }
.deep__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.deep__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.01);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.deep:hover .deep__media img { transform: scale(1.07); }
.deep__body {
  position: absolute; inset: auto 0 0 0; display: grid; gap: 0.4rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: linear-gradient(0deg, rgba(6, 9, 10, 0.97) 8%, rgba(6, 9, 10, 0.85) 55%, transparent 100%);
}
.deep__kicker { color: var(--lime); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.deep__t { color: var(--cream); font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.deep__d { color: var(--cream-dim); font-size: 0.9rem; line-height: 1.55; }
.deep__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.3rem; }
.deep__meta { color: #8A9295; font-size: 0.78rem; }
.deep__go { color: var(--lime); font-size: 1.15rem; transition: transform 0.22s ease; }
.deep:hover .deep__go { transform: translateX(5px); }

/* ---------------------------- feature columns ---------------------------- */
.fcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 2rem; }
.fcol { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ink); padding: clamp(1.25rem, 2.4vw, 1.9rem); }
.fcol__h { margin: 0 0 1.2rem; color: var(--cream); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 800; letter-spacing: -0.02em; }
.fcol__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.fcol__claim { margin: 0 0 0.35rem; color: var(--cream); font-weight: 700; line-height: 1.35; }
.fcol__detail { margin: 0 0 0.55rem; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; }

/* -------------------------------- news -------------------------------- */
.freshness { margin: 0; color: var(--cream-dim); font-size: 0.86rem; line-height: 1.55; max-width: 52ch; }
.ncards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
}
.ncard--lead { grid-column: span 3; }
.ncard__link {
  display: grid; height: 100%; overflow: hidden; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.ncard--lead .ncard__link { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
.ncard__link:hover, .ncard__link:focus-visible { border-color: var(--lime); transform: translateY(-3px); }
.ncard__media { overflow: hidden; aspect-ratio: 16 / 9; }
.ncard--lead .ncard__media { aspect-ratio: auto; min-height: 260px; }
.ncard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.ncard__link:hover .ncard__media img { transform: scale(1.06); }
.ncard__body { display: grid; align-content: start; gap: 0.5rem; padding: clamp(1.1rem, 2vw, 1.6rem); }
.ncard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.ncard__date { color: var(--cream-dim); font-size: 0.8rem; }
.ncard__t { color: var(--cream); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; font-size: 1.02rem; }
.ncard--lead .ncard__t { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.ncard__d { color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; }
.ncard__src { color: var(--lime); font-size: 0.82rem; font-weight: 700; }
.news__more { margin: 1.5rem 0 0; }

/* ------------------------------ community ------------------------------ */
.crew { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.crew__media { position: absolute; inset: 0; z-index: 0; }
.crew__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.crew__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 10, 11, 0.97) 0%, rgba(8, 10, 11, 0.8) 45%, rgba(8, 10, 11, 0.45) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 45%);
}
.crew__in {
  position: relative; z-index: 1;
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  max-width: min(var(--shell), 100%);
}
.crew__t { margin: 0.8rem 0 0.7rem; color: var(--cream); font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.crew__lede { margin: 0 0 1.5rem; color: var(--cream-dim); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.crew__topics { list-style: none; margin: 0 0 1.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.crew__topics a {
  display: inline-block; padding: 0.45rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(8, 10, 11, 0.7);
  color: var(--cream); text-decoration: none; font-size: 0.88rem; font-weight: 600;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.crew__topics a:hover { border-color: var(--lime); color: var(--lime); }
.crew__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.crew__actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.crew__credit { margin-top: 1.9rem; }

/* ------------------------------- signup ------------------------------- */
.signup { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 0.8rem; max-width: 34rem; }
.signup__in {
  flex: 1 1 16rem; min-width: 0; font: inherit; color: var(--cream);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.75rem 1rem;
}
.signup__in::placeholder { color: #6E7679; }
.signup__in:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-color: var(--lime); }
.signup__opt { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--cream-dim); font-size: 0.88rem; cursor: pointer; max-width: 46ch; }
.signup__opt input { accent-color: var(--lime); width: 1rem; height: 1rem; margin-top: 0.15rem; }
.signup__status { margin: 0.9rem 0 0; font-size: 0.9rem; line-height: 1.55; max-width: 52ch; min-height: 1.4em; }
.signup__status[data-state="idle"] { color: var(--cream-dim); }
.signup__status[data-state="error"] { color: var(--sunset); }
.signup__status[data-state="blocked"] { color: #D9C77A; }

/* ------------------------ the pre-order comparison ------------------------ */
.avail {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 1.5rem 0 0;
  padding: 0.5rem 1rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem;
  border: 1px solid; color: var(--cream);
}
.avail--open { border-color: rgba(214, 255, 63, 0.5); background: rgba(214, 255, 63, 0.08); }
.avail--closed { border-color: rgba(255, 113, 61, 0.5); background: rgba(255, 113, 61, 0.08); }
.avail__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); flex: none; }
.avail--closed .avail__dot { background: var(--sunset); }

.kds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.kd { background: var(--ink); padding: clamp(1.1rem, 2vw, 1.5rem); display: grid; gap: 0.3rem; }
.kd__l { color: var(--cream-dim); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.kd__v { color: var(--cream); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 800; letter-spacing: -0.02em; }
.kd__s { color: var(--lime); font-size: 0.8rem; text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.35); justify-self: start; }

.disclosure {
  margin: 0 0 1.5rem; padding: 1rem 1.2rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; max-width: 78ch;
}
.disclosure strong { color: var(--cream); }

.otab__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.otab { width: 100%; border-collapse: collapse; min-width: 42rem; }
.otab th, .otab td { padding: 0.95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.otab thead th { color: var(--cream-dim); font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; background: #0C1011; }
.otab tbody tr:last-child th, .otab tbody tr:last-child td { border-bottom: 0; }
.otab tbody tr { transition: background 0.16s ease; }
.otab tbody tr:hover { background: rgba(214, 255, 63, 0.04); }
.otab__r { color: var(--cream); font-weight: 700; white-space: nowrap; }
.otab td { color: var(--cream-dim); }
.otab__p strong { color: var(--lime); font-size: 1.12rem; font-weight: 800; }
.otab__noprice { color: var(--sunset); font-size: 0.88rem; }
.otab__go { text-align: right; }
.tag {
  display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 4px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--lime); border: 1px solid rgba(214, 255, 63, 0.4);
}
.otab__fine { margin: 1.1rem 0 0; color: var(--cream-dim); font-size: 0.86rem; line-height: 1.6; max-width: 76ch; }

.eds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.ed { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(1.25rem, 2.4vw, 1.9rem); }
.ed__t { margin: 0 0 0.35rem; color: var(--cream); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.ed__s { margin: 0 0 0.8rem; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.6; }
.ed__p { margin: 0 0 1.1rem; color: var(--cream); font-size: 1.05rem; }
.ed__p strong { color: var(--lime); font-size: 1.35rem; font-weight: 800; }
.ed__list { margin: 0 0 1.1rem; padding-left: 1.1rem; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.6; display: grid; gap: 0.4rem; }
.ed__bonus { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--line); color: var(--cream-dim); font-size: 0.86rem; line-height: 1.6; }
.ed__bonus strong { color: var(--cream); }

.kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.kitcard {
  display: grid; gap: 0.5rem; align-content: start; text-decoration: none;
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.kitcard:hover, .kitcard:focus-visible { border-color: var(--lime); transform: translateY(-3px); }
.kitcard__t { color: var(--cream); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.kitcard__d { color: var(--cream-dim); font-size: 0.92rem; line-height: 1.6; }
.kitcard__go { color: var(--lime); font-size: 1.2rem; }

/* -------------------------------- focus -------------------------------- */
.ql:focus-visible, .trow:focus-visible, .deep:focus-visible, .ncard__link:focus-visible,
.kitcard:focus-visible, .crew__topics a:focus-visible, .otab__go a:focus-visible,
.src__s:focus-visible, .kd__s:focus-visible, .deeplink:focus-visible, .btn:focus-visible,
.ncard__link:focus-visible, .signup__opt:focus-within {
  outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px;
}

/* ------------------------------- narrow ------------------------------- */
@media (max-width: 1000px) {
  .deeps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ncard--lead { grid-column: span 2; }
  .fcols, .eds, .kit { grid-template-columns: minmax(0, 1fr); }
  .sect__head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .kds { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .chero { min-height: auto; }
  .chero__days { white-space: normal; }
  .chero__media img { object-position: 62% 40%; }
  .chero__credit { position: static; text-align: left; max-width: none; width: 100%; padding: 0 var(--gutter) 1rem; }
  .chero__media img { object-position: 58% 42%; }
  .qls__in { grid-template-columns: minmax(0, 1fr); }
  .ql { border-left: 0; border-top: 1px solid var(--line); }
  .ql:first-child { border-top: 0; }
  .deeps { grid-template-columns: minmax(0, 1fr); }
  .ncards { grid-template-columns: minmax(0, 1fr); }
  .ncard--lead { grid-column: span 1; }
  .ncard--lead .ncard__link { grid-template-columns: minmax(0, 1fr); }
  .ncard--lead .ncard__media { aspect-ratio: 16 / 9; min-height: 0; }
}

/* -------------------------- motion, restrained -------------------------- *
   Hover scale and the hero's depth are desktop-pointer only: on a touch screen
   a hover state is a state you cannot leave, and the parallax is wasted work. */
@media (hover: none), (pointer: coarse) {
  .deep__media img, .ncard__media img { transition: none; }
  .deep:hover .deep__media img, .ncard__link:hover .ncard__media img { transform: none; }
  .deep:hover, .ncard__link:hover, .kitcard:hover, .btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .deep__media img, .ncard__media img { transform: none !important; }
}


/* --------------- the player stage, filled rather than empty --------------- *
   We do not rehost YouTube's thumbnail, so the stage has no picture of its own.
   A centred control gives it the centre of gravity the approved reference has,
   and the title block keeps the bottom-left. */
.player__big {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 2px solid rgba(242, 238, 230, 0.75); background: rgba(8, 10, 11, 0.42);
  backdrop-filter: blur(2px);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.player__big:hover { background: var(--lime); border-color: var(--lime); transform: translate(-50%, -50%) scale(1.06); }
.player__big:hover .player__bigtri { border-left-color: var(--lime-ink); }
.player__bigtri {
  width: 0; height: 0; margin-left: 6px;
  border-left: 22px solid var(--cream);
  border-top: 14px solid transparent; border-bottom: 14px solid transparent;
  transition: border-left-color 0.2s ease;
}
.player__big:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }

/* The backdrop was scrimmed until it was indistinguishable from flat black. */
.sect--shot .sect__shotscrim {
  background: linear-gradient(180deg, var(--ink) 0%, rgba(8, 10, 11, 0.9) 26%, rgba(8, 10, 11, 0.88) 68%, var(--ink) 100%);
}
.sect--shot .sect__shot img { filter: saturate(0.85) contrast(1.05); }

/* "opens on YouTube" was wrapping under the duration badge. */
.trow__meta { display: flex; align-items: center; gap: 0.55rem; text-align: right; }
.trow__off { white-space: nowrap; font-size: 0.78rem; }

/* The beach crop landed on a close-up; pull back to the crowd. */
.crew__media img { object-position: 50% 32%; }

@media (max-width: 760px) {
  .player__big { width: 68px; height: 68px; top: 38%; }
  .player__bigtri { border-left-width: 17px; border-top-width: 11px; border-bottom-width: 11px; }
  .trow__meta { flex-direction: column; align-items: flex-end; gap: 0.15rem; }
}
@media (hover: none), (pointer: coarse) {
  .player__big:hover { transform: translate(-50%, -50%); background: rgba(8, 10, 11, 0.42); border-color: rgba(242, 238, 230, 0.75); }
}


/* ------------------ the comparison, on a phone ------------------ *
   A five-column table inside a horizontal scroller technically fits, but it
   pushed the document itself 246px wide and asked a phone reader to scrub
   sideways through prices. Below 760px each offer becomes a block with its own
   labels, which is both narrower and easier to read. */
@media (max-width: 760px) {
  .otab__wrap { overflow-x: visible; border: 0; border-radius: 0; }
  .otab { min-width: 0; display: block; }
  .otab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .otab tbody, .otab tr, .otab th, .otab td { display: block; width: auto; }
  .otab tbody tr {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--ink); padding: 1rem 1.15rem; margin-bottom: 0.85rem;
  }
  .otab th, .otab td { border-bottom: 0; padding: 0.2rem 0; }
  .otab__r { font-size: 1.1rem; margin-bottom: 0.35rem; }
  .otab tbody td:not(.otab__go)::before {
    content: attr(data-label) ": ";
    color: var(--cream-dim); font-size: 0.82rem;
  }
  .otab__p strong { font-size: 1.25rem; }
  .otab__go { text-align: left; margin-top: 0.8rem; }
  .otab__go .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   VISUAL PASS — 18 September 2026

   Measured before this block: the headline broke to five lines, sections put
   100.8px of padding at both ends so ~200px of black sat between every one of
   them, detail copy was 14.4px, and the player showed a black rectangle until
   you pressed play because it had no picture at all.
   ========================================================================== */

/* ------------------------------- spacing ------------------------------- *
   One scale, applied once. Sections no longer double up their padding against
   each other: the page is ~1,100px shorter without losing a single element. */
.sect { padding: clamp(2.5rem, 4.4vw, 4rem) 0; }
.sect__head { margin-bottom: clamp(1.25rem, 2.2vw, 1.9rem); }
.sect__credit { margin-top: 1.1rem; }
.crew__in { padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2rem, 3.5vw, 3rem); }

/* ------------------------------ readability ------------------------------ *
   Body copy to 16px, secondary detail to 13–14px, and the folded source
   control large enough to read rather than a whisper under the claim. */
.sect__sub { font-size: clamp(1rem, 1.05vw, 1.0625rem); line-height: 1.6; }
.fact__note, .ncard__d, .deep__d, .prose, .topic__d, .comm__d,
.ed__s, .kitcard__d, .otab__fine, .disclosure { font-size: 1rem; line-height: 1.6; }
.fcard__s { font-size: 1rem; line-height: 1.55; }
.fdet__claim, .fdet__detail { font-size: 0.9375rem; line-height: 1.65; }
.ncard__date, .dev__date, .comm__chk, .deep__meta, .release__note,
.latest__when, .latest__ver, .latest__fine, .facts__verified { font-size: 0.875rem; }
.chero__credit, .crew__credit, .sect__credit { font-size: 0.8125rem; color: #949B9E; }
.src__s { font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: none; color: #A8B0B3; }
.src__b { font-size: 0.875rem; }
.src__s:hover { color: var(--lime); }

/* --------------------------- the opening banner --------------------------- *
   The headline sat in a 34ch column, which is what forced five lines. It now
   gets the width it needs for two, and the gradient is concentrated behind the
   text instead of washing the whole frame. */
.chero__body { max-width: min(58ch, 62%); }
.chero__t {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 0.98;
  text-wrap: balance;
}
.chero__scrim {
  background:
    linear-gradient(90deg, rgba(8, 10, 11, 0.97) 0%, rgba(8, 10, 11, 0.92) 34%, rgba(8, 10, 11, 0.55) 56%, rgba(8, 10, 11, 0.12) 78%, rgba(8, 10, 11, 0.04) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(8, 10, 11, 0.3) 26%, transparent 55%),
    linear-gradient(180deg, rgba(8, 10, 11, 0.62) 0%, transparent 20%);
}
.chero__media img { object-position: 78% 46%; }

/* GTA VI, named where you cannot miss it. */
.chero__game { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0; }
.chero__gamemark {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 800; letter-spacing: 0.02em;
  color: var(--lime-ink); background: var(--lime);
  padding: 0.2rem 0.6rem; border-radius: 5px;
}
.chero__gameline {
  color: var(--cream); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.btn--lg { padding: 0.85rem 1.6rem; font-size: 1.05rem; }
/* Secondary, and reading as secondary: no fill, a quieter border. */
.btn--quiet {
  background: transparent; color: var(--cream);
  border: 1px solid rgba(242, 238, 230, 0.34);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem; border-radius: var(--radius); font-weight: 700;
}
.btn--quiet:hover { border-color: var(--cream); background: rgba(242, 238, 230, 0.07); }
.chero__days { font-size: 0.9375rem; }

/* ------------------------------ the release ------------------------------ */
.release {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 1rem;
}
.release__main, .release__side { background: var(--ink); padding: clamp(1.35rem, 2.4vw, 2rem); }
.release__main {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(214, 255, 63, 0.12), transparent 62%),
    var(--ink);
}
.release__label {
  margin: 0 0 0.6rem; color: var(--cream-dim);
  font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700;
}
.release__date { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.35rem; }
.release__d {
  font-size: clamp(3.6rem, 7.5vw, 5.4rem); font-weight: 800; line-height: 0.82;
  letter-spacing: -0.055em; color: var(--lime);
}
.release__my { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; color: var(--cream); letter-spacing: -0.025em; }
.release__count {
  display: flex; align-items: baseline; gap: 0.5rem; margin: 0.9rem 0 0.7rem;
  padding-top: 0.9rem; border-top: 1px solid var(--line);
}
.release__n { font-size: clamp(1.7rem, 2.8vw, 2.25rem); font-weight: 800; color: var(--cream); letter-spacing: -0.03em; }
.release__u { color: var(--cream-dim); font-size: 1rem; }
.release__note { margin: 0 0 0.7rem; color: var(--cream-dim); line-height: 1.55; }

.plats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.85rem; }
.plat {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--cream);
  font-weight: 700; font-size: 0.9375rem;
}
.plat__i { width: 24px; height: 24px; color: var(--lime); flex: none; }

.edminis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.edmini { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0.9rem 1rem; }
.edmini__t { margin: 0 0 0.25rem; color: var(--cream); font-weight: 800; font-size: 1rem; }
.edmini__p { margin: 0 0 0.4rem; color: var(--cream); }
.edmini__p strong { color: var(--lime); font-size: 1.2rem; font-weight: 800; }
.edmini__s { margin: 0; color: var(--cream-dim); font-size: 0.875rem; line-height: 1.5; }

.facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.25rem; }
.facts__verified { color: var(--cream-dim); }

/* ----------------------------- the player ----------------------------- *
   The stage was empty before playback because the facade had no picture. It now
   shows the video's own thumbnail, served by YouTube from the host its oEmbed
   response names — nothing is copied onto our server. */
.player__stage { background: #06090A; }
.player__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.player__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(4, 6, 7, 0.94) 0%, rgba(4, 6, 7, 0.45) 34%, rgba(4, 6, 7, 0.12) 62%, rgba(4, 6, 7, 0.3) 100%);
}
.player__facade { justify-content: flex-end; padding: 0; }
.player__meta {
  position: relative; max-width: 52ch;
  padding: clamp(1.1rem, 2.2vw, 1.75rem);
}
.player__t { font-size: clamp(1.2rem, 2.1vw, 1.8rem); }
.player__m { font-size: 0.9375rem; }
.player__fine { color: #B8BFC1; font-size: 0.875rem; margin-top: 0.4rem; }
.player__big {
  width: 104px; height: 104px; top: 46%;
  border-width: 2px; border-color: rgba(242, 238, 230, 0.9);
  background: rgba(4, 6, 7, 0.55);
  text-decoration: none;
}
.player__big--out { display: grid; }
.player__bigtri { border-left-width: 26px; border-top-width: 16px; border-bottom-width: 16px; }

/* -------------------------- the trailer selector -------------------------- */
.trow { align-items: stretch; gap: 0.85rem; padding: 0.6rem; }
.trow__thumb {
  position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9;
  border-radius: 7px; overflow: hidden; background: #06090A;
}
.trow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trow__dur {
  position: absolute; right: 5px; bottom: 5px;
  background: rgba(4, 6, 7, 0.86); color: var(--cream);
  font-size: 0.8125rem; font-weight: 700; border-radius: 4px; padding: 0.1rem 0.35rem;
}
.trow__b { align-self: center; gap: 0.2rem; }
.trow__t { font-size: 1rem; }
.trow__d { font-size: 0.875rem; }
.trow__off { color: var(--sunset); font-size: 0.8125rem; font-weight: 700; margin-top: 0.15rem; }

/* ---------------------------- feature cards ---------------------------- */
.fcards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem;
}
.fcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.fcard:hover { border-color: #3D464A; transform: translateY(-2px); }
.fcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.fcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fcard:hover .fcard__media img { transform: scale(1.05); }
.fcard__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem; flex: 1; }
.fcard__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem; margin: 0; }
.fcard__group { color: var(--cream-dim); font-size: 0.8125rem; }
.fcard__t { margin: 0; color: var(--cream); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.fcard__s { margin: 0; color: var(--cream-dim); }
.fdet { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.fdet__s {
  cursor: pointer; list-style: none; color: var(--lime);
  font-weight: 700; font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 32px;
}
.fdet__s::-webkit-details-marker { display: none; }
.fdet__s::after { content: "+"; font-weight: 800; }
.fdet[open] .fdet__s::after { content: "\2212"; }
.fdet__b { padding-top: 0.6rem; }
.fdet__claim { margin: 0 0 0.5rem; color: var(--cream); font-weight: 700; }
.fdet__detail { margin: 0 0 0.6rem; color: var(--cream-dim); }
.fdet__src { margin: 0; font-size: 0.875rem; }
.fdet__src a { color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.35); }
.chip--observation { color: #9ED9FF; border-color: rgba(158, 217, 255, 0.45); background: rgba(158, 217, 255, 0.08); }
.chip--analysis { color: var(--sunset); border-color: rgba(255, 113, 61, 0.45); background: rgba(255, 113, 61, 0.08); }

/* ------------------------- latest verified update ------------------------- */
.latest {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem); align-items: center;
  margin-bottom: 1.25rem; padding: clamp(1.25rem, 2.4vw, 1.9rem);
  border: 1px solid rgba(214, 255, 63, 0.35); border-radius: var(--radius-lg);
  background: linear-gradient(100deg, rgba(214, 255, 63, 0.07) 0%, rgba(214, 255, 63, 0.02) 46%, transparent 74%), var(--surface);
}
.latest__k { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; margin: 0 0 0.6rem; }
.latest__when, .latest__ver { color: var(--cream-dim); }
.latest__t { margin: 0 0 0.45rem; color: var(--cream); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.latest__s { margin: 0 0 0.75rem; color: var(--cream-dim); font-size: 1rem; line-height: 1.6; max-width: 68ch; }
.latest__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0; align-items: baseline; }
.latest__src { color: var(--lime); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(214, 255, 63, 0.4); font-size: 0.9375rem; }
.latest__act { display: grid; gap: 0.6rem; justify-items: start; }
.latest__ask { margin: 0; color: var(--cream); font-weight: 800; font-size: 1.05rem; line-height: 1.3; }
.latest__fine { margin: 0; color: var(--cream-dim); }

/* -------------------------------- signup -------------------------------- */
.signup__status[data-state="ok"] { color: var(--lime); }
.signup__in { font-size: 1rem; min-height: 48px; }
.signup .btn { min-height: 48px; }
.signup__opt { font-size: 0.9375rem; }

/* ------------------------------ touch targets ------------------------------ */
.trow, .filter, .topic__reveal, .ql, .btn, .updatebar__btn { min-height: 44px; }
.src__s, .rec__s, .qa__q, .autostate__s { min-height: 32px; display: inline-flex; align-items: center; }

/* -------------------------------- narrow -------------------------------- */
@media (max-width: 1240px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .release { grid-template-columns: minmax(0, 1fr); }
  .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .latest { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .chero__body { max-width: none; }
}
@media (max-width: 760px) {
  .fcards { grid-template-columns: minmax(0, 1fr); }
  .edminis { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .trow__thumb { width: 104px; }
  .player__big { width: 76px; height: 76px; }
  .player__bigtri { border-left-width: 19px; border-top-width: 12px; border-bottom-width: 12px; }
  .chero__t { font-size: clamp(2.2rem, 9vw, 3rem); }
}
@media (hover: none), (pointer: coarse) {
  .fcard__media img { transition: none; }
  .fcard:hover .fcard__media img { transform: none; }
  .fcard:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fcard__media img { transform: none !important; }
}

/* ---- corrections from looking at the rendered page ---- */

/* The play control sat at 55% opacity over a bright thumbnail and lost its
   edge. Solid ring, darker well, lime on hover. */
.player__big {
  background: rgba(4, 6, 7, 0.72);
  border-color: var(--cream);
  box-shadow: 0 10px 40px -14px rgba(0, 0, 0, 0.9);
}
.player__big:hover { background: var(--lime); border-color: var(--lime); }

/* The release cell ran out of content before the platforms cell beside it did,
   leaving a void under the source link. Push the note and source to the floor. */
.release__main { display: flex; flex-direction: column; }
.release__side { display: flex; flex-direction: column; }
/* The two columns used to be stretched to equal height by pushing their last
   block to the bottom with margin-top:auto. Once the countdown moved into the
   left column the heights changed, and that rule left 190px of nothing between
   the EDITIONS label and the editions. Labels stay with what they label. */
.release__side .edminis { margin-top: 0.15rem; }
.release__main .release__note:last-of-type { margin-bottom: 0.9rem; }

/* ------------------------- touch target sizing ------------------------- *
   Inline links sat at 17–27px tall, which is a small target on a phone.
   Vertical padding grows the hit area without breaking the inline flow the
   way display:inline-flex would. */
.fdet__src a, .src__b a, .latest__src, .hist__src, .deeplink,
.kd__s, .chapters__out, .pulse__go, .comm__go, .ncard__src, .ledger__src {
  padding-block: 6px;
  display: inline-block;
}
.signup__opt input, .spoiler-toggle input { width: 20px; height: 20px; }
.signup__opt { align-items: center; }

/* ---------------- one edition comparison, not three ---------------- *
   Price and Editions each repeated what the comparison beside them already
   said. Their unique details — the $20 upgrade, the code-in-box version, the
   regional caveat — live here now, with both source links they arrived with. */
.release__label--ed { margin-top: 1.25rem; }
.ednote { margin: 0.85rem 0 0; color: var(--cream-dim); font-size: 0.9375rem; line-height: 1.6; }
.ednote__srcs { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0.6rem 0 0; }

/* Two facts remain, so a four-column grid would strand two empty cells. */
.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------- feature card media ---------------- *
   16:10 cropped the sides of a 16:9 source, which cut Lucia out of the frame on
   the card that names her. Matching the source aspect crops nothing at any width. */
.fcard__media { aspect-ratio: 16 / 9; }

/* ---- the release cell, after the fold ---- *
   Pushing the note to the floor left ~350px of black between the day count and
   it. Centre the column instead, so the empty space sits either side of a balanced
   block rather than as one hole in the middle. */
.release__main { justify-content: center; }
.release__main .release__note { margin-top: 1rem; padding-top: 0; }
.release__count { margin-bottom: 0; }
.ednote__srcs { gap: 0.35rem 1.6rem; }

/* The two surviving facts now live inside the release cell, so they are a
   stacked list rather than a grid of standalone panels. */
.release__main { justify-content: flex-start; }
.release__main .facts {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem;
  background: none; border: 0; border-radius: 0; overflow: visible;
  margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--line);
}
.release__main .fact { background: none; padding: 0; }
.release__main .fact__label { font-size: 0.8125rem; }
.release__main .fact__value { font-size: 1.2rem; margin-bottom: 0.35rem; }
.release__main .fact__note { font-size: 0.9375rem; }
@media (max-width: 760px) { .release__main .facts { gap: 1.25rem; } }

/* The stage sits on a designed panel, not a void, so a third-party thumbnail
   that fails to arrive leaves something composed behind the play control
   rather than a black rectangle. Observed once during the audit: i.ytimg.com
   dropped a single request and the player rendered empty. */
.player__stage {
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(214, 255, 63, 0.10), transparent 58%),
    radial-gradient(90% 120% at 100% 100%, rgba(255, 113, 61, 0.10), transparent 60%),
    linear-gradient(160deg, #141A1C 0%, #06090A 72%);
}
.player__poster { background: transparent; }

/* ======================================================================
   THE RELEASE, AS THE MAIN EVENT

   The hero's job is one question — when — answered three ways in
   descending permanence: the game's name, the date as a fixed fact, and
   the countdown as the moving part. The date is printed by the build, so
   it survives a script that never runs; the countdown ships hidden and
   only appears once countdown.js has something true to put in it.
   ====================================================================== */
.chero__game {
  display: block; margin: 0 0 0.55rem;
  font-size: clamp(0.82rem, 1.25vw, 1rem);
  font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--lime);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.85);
}
.chero__t { margin: 0 0 1.4rem; }

/* Date and countdown share one rule, so they read as one statement rather
   than two stacked facts. */
.chero__release {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 2rem;
  padding-top: 1.15rem;
  border-top: 2px solid rgba(214, 255, 63, 0.5);
  max-width: 40rem;
}
.chero__date { margin: 0; }
.chero__datel {
  display: block; margin-bottom: 0.15rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cream-dim);
}
.chero__dateb {
  display: block;
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  color: var(--cream);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.75);
}
.chero__plats {
  margin: 0.9rem 0 0; color: var(--cream-dim);
  font-size: 0.9375rem; font-weight: 600;
}
.chero__actions { margin-top: 1.7rem; }

/* ------------------------------- countdown ------------------------------- *
   One block, two sizes, every page. It counts whole days because a day is
   all Rockstar has published — see release.json. */
.cd[hidden] { display: none !important; }
.cd { margin: 0; }
.cd__row { display: flex; align-items: baseline; gap: 0.4rem; margin: 0; }
.cd__n {
  font-weight: 800; letter-spacing: -0.045em; line-height: 1;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.cd__u { font-weight: 700; color: var(--cream); }
.cd__label {
  margin: 0.2rem 0 0; color: var(--cream-dim);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.cd__note { margin: 0.45rem 0 0; color: var(--cream-dim); font-size: 0.875rem; line-height: 1.5; max-width: 34ch; }
.cd__note[hidden] { display: none !important; }

.cd--lg .cd__n { font-size: clamp(2.6rem, 5.6vw, 4.2rem); }
.cd--lg .cd__u { font-size: clamp(1rem, 1.6vw, 1.25rem); }
.cd--sm .cd__n { font-size: clamp(1.7rem, 2.8vw, 2.25rem); }
.cd--sm .cd__u { font-size: 1rem; }

/* Release day, and the day after, are not the same event as "62 days to go",
   and they do not get the same treatment. Neither of them claims the game is
   on sale — that is a sentence a person writes after checking a storefront. */
.cd[data-phase="today"] .cd__label,
.cd[data-phase="after"] .cd__label {
  font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.01em;
  text-transform: none; color: var(--lime);
}
.cd[data-phase="after"] .cd__label { color: var(--cream); }

.release__note--time { font-size: 0.875rem; }
.release__main .release__note--time { margin-top: 0; }
.release .cd { margin: 0 0 0.7rem; }

@media (max-width: 720px) {
  .chero__release { gap: 1rem 1.5rem; }
  .chero__dateb { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .cd--lg .cd__n { font-size: clamp(2.3rem, 11vw, 3.2rem); }
}

/* ==========================================================================
   COMMUNITY — purple ground, pink accents, and topic cards that are not six
   copies of one card. Rebuilt 2026-09-19.
   ========================================================================== */
.topper__acts { margin: 1.4rem 0 0; }

/* ----------------------------- featured discussion ----------------------------- */
.feat {
  display: grid; gap: clamp(1rem, 2.4vw, 1.9rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  border: 1px solid rgb(var(--a-rgb) / 0.35); border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, rgb(var(--a-rgb) / 0.1), var(--surface) 55%);
}
.feat__media { position: relative; min-height: 260px; overflow: hidden; }
.feat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The wash is a corner, not a curtain: the picture stays a picture. */
.feat__wash {
  position: absolute; inset: 0;
  background: linear-gradient(60deg, rgba(8,10,11,0.86) 0%, rgba(8,10,11,0.3) 48%, transparent 76%);
}
.feat__chips { position: absolute; left: 0.9rem; top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.feat__b { display: grid; gap: 0.55rem; align-content: start; padding: clamp(1rem, 2.2vw, 1.6rem); }
.feat__d { margin: 0 0 0.4rem; font-size: 1.0625rem; line-height: 1.6; color: var(--cream); }
.feat__lab { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a); }
.feat__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.feat__links a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: rgba(0,0,0,0.25);
  color: var(--cream); text-decoration: none; min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.feat__links a:hover { border-color: var(--a); background: rgb(var(--a-rgb) / 0.09); }
.feat__k { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a); }
.feat__l { font-weight: 600; }
.feat__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0 0; }
.feat__tri, .topic__tri { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.feat__note { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--cream-dim); }
@media (max-width: 860px) { .feat { grid-template-columns: 1fr; } .feat__media { min-height: 200px; aspect-ratio: 16/9; } }

/* -------------------------------- topic cards -------------------------------- */
.topic {
  border: 1px solid rgb(var(--a-rgb) / 0.3);
  background: linear-gradient(170deg, rgb(var(--a-rgb) / 0.11), var(--surface) 48%);
}
.topic__t { color: var(--cream); }
.topic__kind, .chip--discussion { color: var(--a); }
.chip--discussion { border-color: rgb(var(--a-rgb) / 0.5); background: rgb(var(--a-rgb) / 0.12); }
.topic__reveal { border-color: rgb(var(--a-rgb) / 0.5); color: var(--a); }
.topic__watch {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem;
  padding: 0.55rem 0.85rem; border-radius: var(--radius); min-height: 44px;
  border: 1px solid rgb(var(--a-rgb) / 0.45); background: rgb(var(--a-rgb) / 0.09);
  color: var(--a); font-weight: 700; font-size: 0.9375rem; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.topic__watch:hover { background: rgb(var(--a-rgb) / 0.18); border-color: var(--a); }

/* ==========================================================================
   THE RELEASE, AS A VISUAL EVENT
   Sunset orange into pink into purple, with the photograph underneath rather
   than in front. The date and the day count are the largest type on the site.
   ========================================================================== */
.chero--sunset { min-height: min(88vh, 760px); }
/* The gradient is the section; the photograph is texture inside it. Colour
   first, image second, which is the opposite of what the page did before. */
.chero--sunset .chero__scrim {
  background:
    linear-gradient(104deg, rgba(8,10,11,0.96) 0%, rgba(20,12,41,0.88) 30%, rgba(28,10,21,0.58) 55%, rgba(29,15,8,0.2) 82%),
    linear-gradient(200deg, rgba(255,145,87,0.30) 0%, rgba(255,79,163,0.22) 38%, rgba(128,85,245,0.26) 70%, transparent 92%),
    linear-gradient(0deg, var(--ink) 0%, rgba(8,10,11,0.35) 26%, transparent 58%);
}
.chero--sunset .chero__media img { opacity: 0.72; }
.chero--sunset .chero__game { color: var(--orange); letter-spacing: 0.3em; }

/* The whole point of the section: the date, then the number. */
.chero--sunset .chero__release {
  border-top: 0; padding-top: 0; margin-top: 0.4rem;
  display: block; max-width: none;
}
.chero--sunset .chero__date { margin-bottom: 0.9rem; }
.chero--sunset .chero__datel { color: var(--orange); letter-spacing: 0.24em; }
.chero--sunset .chero__dateb {
  font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: 0.98;
  background: linear-gradient(96deg, var(--orange), var(--pink) 52%, var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* If a browser cannot paint text with a gradient it gets cream, not nothing. */
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
@supports not (background-clip: text) {
  .chero--sunset .chero__dateb { color: var(--cream); -webkit-text-fill-color: var(--cream); }
}
.chero--sunset .cd--lg .cd__n {
  font-size: clamp(4rem, 13vw, 10rem); line-height: 0.82; color: var(--cream);
  text-shadow: 0 0 60px rgba(255,79,163,0.42), 0 4px 40px rgba(0,0,0,0.6);
}
.chero--sunset .cd--lg .cd__u {
  font-size: clamp(1.1rem, 2.2vw, 1.8rem); color: var(--orange); font-weight: 800;
  letter-spacing: -0.01em;
}
.chero--sunset .cd__label {
  color: var(--cream); font-size: clamp(0.8rem, 1.2vw, 0.95rem); letter-spacing: 0.3em;
  margin-top: 0.5rem;
}
.chero--sunset .cd[data-phase="today"] .cd__label,
.chero--sunset .cd[data-phase="after"] .cd__label { color: var(--orange); letter-spacing: -0.01em; }
.chero--sunset .chero__plats { margin-top: 1.2rem; color: var(--cream); font-size: 1rem; }
.chero--sunset .chero__body { max-width: min(64ch, 72%); }

@media (max-width: 760px) {
  .chero--sunset .chero__body { max-width: 100%; }
  .chero--sunset .cd--lg .cd__n { font-size: clamp(3.6rem, 22vw, 6rem); }
  .chero--sunset .chero__dateb { font-size: clamp(1.8rem, 9vw, 2.6rem); }
}

/* What the hub actually holds, said once under the countdown. */
.chero__purpose {
  margin: 0.9rem 0 0; max-width: 52ch;
  font-size: 1rem; line-height: 1.6; color: var(--cream);
}