/* ============================================================================
   GAMESWA — HOME PAGE
   Session B · 2026-08-11 · owns index.html and /tournaments/
   ----------------------------------------------------------------------------
   Loads LAST on the home page, after style.css and after the four scaffold
   sheets. Two jobs, in this order:

     1. THE BRIDGE. style.css is the original hand-written home stylesheet and
        it is untouched by this session. It carries its own :root palette
        (--warm, --white, --ink, --body, --muted, --rule, --blue, --yellow)
        which is a fixed LIGHT palette with no theme support at all. Every
        component in that file reads those eight variables, so re-pointing
        them at the scaffold's semantic tokens gives the whole existing page
        working dark and light themes without rewriting a single rule.

        var() resolves at use time, so one :root block covers both themes:
        when html.gw-light re-points --gw-surface, --warm follows on its own.

     2. THE NEW WORK. The Loop section, the proof strip, and the handful of
        places where the original page hardcoded a colour that the bridge
        cannot reach (off-palette green and orange, mainly).

   No hex appears in this file. Colours come from tokens.css or nowhere.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1 · THE BRIDGE
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Grounds. --warm was the raised/alternate band, --white the base band.
     That relationship is preserved, it just stops being hardcoded light. */
  --warm:   var(--gw-surface-3);
  --white:  var(--gw-surface);

  /* Type. --ink was the heading colour, --body the paragraph colour,
     --muted the quiet caption colour. All three clear AA in both themes
     (measured by Session A, RECON.md §5). */
  --ink:    var(--gw-text);
  --body:   var(--gw-text-muted);
  --muted:  var(--gw-text-faint);

  --rule:   var(--gw-rule);

  /* Brand. --blue is the working accent; --yellow was only ever used as a
     FILL on this page (pillar accent bars, tab underlines), so it maps to
     the fill token and never to the type token. */
  --blue:   var(--gw-accent);
  --yellow: var(--gw-punct-fill);
}

/* Things style.css hardcoded rather than tokenised. */
::-webkit-scrollbar-track { background: var(--gw-surface); }
.ticker-item  { color: var(--gw-text-faint); }
.text-gray    { color: var(--gw-text-muted); }
.text-aaa     { color: var(--gw-text-muted); }
.step-detail  { color: var(--gw-text-muted); }
.form-footer-text { color: var(--gw-text-faint); }

/* The big ghosted step numeral. --rule as a text colour is a 0.10 alpha in
   light theme, which is invisible rather than quiet. */
.step-num { color: var(--gw-rule-strong); }

/* Cards in the What We Do grid share the section's ground by design (they
   are separated by 1px rules, not by colour). Keep that, but read the token. */
.pillar { background: var(--gw-surface-3); }

/* The divider between those cards is the GRID's own background showing
   through a 1px gap. The mobile breakpoint in style.css widens that gap to
   36px with !important, which turns the hairline into a 36px slab of rule
   colour. It was invisible while --rule was a near-neutral #E0DDD8 on a
   #F2F0EB section. Once --rule became a real alpha token the slab showed up
   in both themes. Same hairline reading, one column. */
@media (max-width: 768px) {
  .pillar-grid { background: transparent; gap: 0 !important; }
  .pillar + .pillar { border-top: 1px solid var(--gw-rule); }
}

/* The image label chip sits on top of a photo, so it needs a ground of its
   own that does not follow the theme. */
.img-label {
  background: var(--gw-surface);
  color: var(--gw-accent-text);
}

/* Section rhythm in the original sheet is a hard 120px. Left alone: the page
   is internally consistent and the new sections match it. */

/* ══════════════════════════════════════════════════════════════════════════
   2 · CHROME RECONCILIATION
   The old fixed nav, mobile sheet, contact form and cursor art are gone from
   index.html. Their rules are still in style.css and are now dead; they are
   listed in the session report for Session E's performance pass to strip.
   Session G adds the Who We Serve tablist to that list: .tabs, .tab,
   .tab-panel, .panel-*, .point-dot* and .anxiety in style.css have no markup
   left on any page.
   Two live adjustments remain.
   ══════════════════════════════════════════════════════════════════════════ */

/* The hero is full bleed and the shared nav floats over it, exactly as the
   old nav did. Nothing to clear.

   But the hero is INK IN BOTH THEMES, and in light theme the shared nav paints
   itself for a light ground: ink links, and a brightness(0) wordmark. Over a
   dark photo both vanish. So while the nav is still transparent, the home page
   lends it the ink-surface treatment. The moment it picks up its own scrim
   (.is-scrolled) it goes back to following the theme like every other page.

   No new colours: --gw-white is a core brand constant, and the rule is mixed
   from it rather than written as a fresh rgba. */
.gw-home .gw-nav:not(.is-scrolled) {
  --gw-text: var(--gw-white);
  --gw-rule-strong: color-mix(in srgb, var(--gw-white) 24%, transparent);
}
.gw-home .gw-nav:not(.is-scrolled) .gw-nav__logo img { filter: none; }
/* The link colour is restated rather than left to the --gw-text override
   above, because base.css carries `.gw a { color: inherit }` at (0,1,1) and
   chrome.css declares `.gw-nav__link { color: var(--gw-text) }` at (0,1,0).
   The inherit rule wins on every page; it is only visible here, where the nav
   sits on a ground that does not match the theme. Root cause is noted in the
   session report for the chrome owner. */
.gw-home .gw-nav:not(.is-scrolled) .gw-nav__link { color: var(--gw-white); }

/* Scroll-to-top and the sticky WhatsApp bar both want the bottom right of a
   phone. The CTA bar wins: it is the one accent action per view. */
@media (max-width: 767px) {
  #scrollToTopBtn { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · BROADCAST BUGS REPLACING OFF-PALETTE GREEN
   The original page signalled "live" in #22c55e, which is not in the brand
   palette. The scaffold has a real LIVE chip and this is precisely its
   licensed use, so the badges now carry gw-chip--live.
   ══════════════════════════════════════════════════════════════════════════ */

.live-badge-wrap { display: block; margin-bottom: var(--gw-s-5); }

/* The bug that sits on the V4 photo.

   Session F, 2026-08-11: this used to paint an 86% ink ground with a blur
   behind the chip, because the old LIVE chip was a red outline on a 10% red
   wash and needed a dark ground to stay legible over a photograph. The chip
   is now a solid lime fill with ink type, which is its own ground and is
   legible over any footage. Left as it was, this rule repainted the fill ink
   while the type stayed ink, and the chip rendered invisible on the photo.

   So this is now position only. If a future bug needs a scrim over footage,
   put it on a wrapper, not on the chip's own background. */
.trial-bug {
  position: absolute;
  bottom: 12px;
  left: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · THREE DOORS
   Session G · replaces the Who We Serve tabs, whose rules used to live here.

   Three equal cards, one per audience, each one a link out. Built at 390px
   as a single column, then two columns, then three. No JavaScript: the tabs
   needed a script to show a panel, and doors do not.

   The card is the whole target on a phone, so the tap area is the card and
   not just the link line inside it. The <a> keeps its own 44px height so a
   keyboard or a screen reader still lands on a real, visible link.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-doors {
  list-style: none;
  margin: var(--gw-s-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gw-s-4);
}

@media (min-width: 700px) {
  .gw-doors { grid-template-columns: repeat(2, 1fr); gap: var(--gw-s-5); }
}
@media (min-width: 1000px) {
  .gw-doors { grid-template-columns: repeat(3, 1fr); }
}

.gw-door {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-rule);
  border-top: 3px solid var(--gw-accent);
  padding: var(--gw-s-6) var(--gw-s-5) var(--gw-s-5);
  transition: border-color var(--gw-dur-fast) var(--gw-ease),
              transform var(--gw-dur-fast) var(--gw-ease);
}

/* The third door is the new one, so it carries the punctuation colour as a
   FILL on its top edge. Lime as a fill, never as type. */
.gw-door:last-child { border-top-color: var(--gw-punct-fill); }

.gw-door:hover { border-color: var(--gw-rule-strong); transform: translateY(-2px); }
.gw-door:hover { border-top-color: var(--gw-accent); }
.gw-door:last-child:hover { border-top-color: var(--gw-punct-fill); }

@media (prefers-reduced-motion: reduce) {
  .gw-door, .gw-door:hover { transform: none; transition: none; }
}

.gw-door__title {
  margin: 0;
  font-family: var(--gw-font-display);
  font-weight: 900;
  font-size: 1.375rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gw-text);
}

.gw-door__body {
  margin: var(--gw-s-4) 0 var(--gw-s-5);
  font-size: var(--gw-t-body);
  line-height: var(--gw-leading-body);
  color: var(--gw-text-muted);
  flex: 1 1 auto;
}

/* .gw-home clears base.css `.gw a { color: inherit }` at (0,1,1). Same root
   cause as the nav link note above. */
.gw-home .gw-door__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gw-s-2);
  min-height: 44px;
  font-family: var(--gw-font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gw-accent-text);
}

/* The card is the tap target. The pseudo-element covers it, so the link is
   still the only focusable, announced thing in the card. */
.gw-door__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.gw-home .gw-door__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.gw-door__arrow { transition: transform var(--gw-dur-fast) var(--gw-ease); }
.gw-door:hover .gw-door__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .gw-door__arrow, .gw-door:hover .gw-door__arrow { transform: none; transition: none; }
}

/* Focus has to be visible on the CARD, not on a 1px-tall inline box behind
   the copy, or a keyboard user cannot tell which door is selected. */
.gw-door:focus-within { outline: 2px solid var(--gw-accent-text); outline-offset: 3px; }
.gw-door__link:focus-visible { outline: none; }

/* ══════════════════════════════════════════════════════════════════════════
   5 · TYPE MARGINS INSIDE THE LEGACY PAGE
   style.css opens with `*, *::before, *::after { margin: 0; padding: 0 }`,
   which strips the browser default margin the scaffold's .gw-body relies on.
   New sections restore it explicitly rather than fighting the reset.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-home .gw-body + .gw-body { margin-top: var(--gw-s-4); }
.gw-home .gw-display + .gw-body { margin-top: var(--gw-s-5); }

/* ══════════════════════════════════════════════════════════════════════════
   6 · THE LOOP
   The section the whole rebuild turns on: scorer mark to clip to WhatsApp.
   Built at 390px first. Desktop is the adaptation.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-loop {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gw-s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .gw-loop { grid-template-columns: 1.15fr 0.85fr; gap: var(--gw-s-9); }
}

.gw-loop__beats {
  display: flex;
  flex-direction: column;
  gap: var(--gw-s-3);
  margin: 0;
}
.gw-loop__beat {
  display: flex;
  align-items: baseline;
  gap: var(--gw-s-4);
}
/* The scorer timestamp is the moat, so the sequence is marked in the data
   voice. These three beats are genuinely ordered, which is the only thing
   that licenses the marker. */
.gw-loop__mark {
  flex-shrink: 0;
  font-family: var(--gw-font-data);
  font-size: var(--gw-t-data);
  letter-spacing: var(--gw-track-data);
  color: var(--gw-accent-text);
  font-variant-numeric: tabular-nums;
  /* Optically align the small mark with the cap height of the display type. */
  transform: translateY(-0.15em);
}

.gw-loop__media { max-width: 320px; width: 100%; justify-self: center; }
@media (min-width: 900px) { .gw-loop__media { justify-self: end; } }

/* The caption claims a real delivery from a real tournament. It is hidden
   until the slot actually holds one. See the script in index.html. */
.gw-loop__cap {
  margin-top: var(--gw-s-3);
  text-align: center;
  text-transform: none;
  letter-spacing: 0.04em;
}
.gw-loop__cap[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   7 · PROOF STRIP
   Three claims, all of them things we can point at. Reads as a broadcast
   lower third, which is honest: it is a scoreline, not a slogan.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-proof {
  border-block: 1px solid var(--gw-rule);
  background: var(--gw-surface);
  padding-block: var(--gw-s-4);
}
.gw-proof__list {
  display: flex;
  flex-direction: column;
  gap: var(--gw-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gw-proof__item {
  display: flex;
  align-items: center;
  gap: var(--gw-s-3);
  margin: 0;
  font-family: var(--gw-font-data);
  font-size: var(--gw-t-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gw-text-muted);
}
.gw-proof__item::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  background: var(--gw-punct-fill);
}
.gw-proof__item b {
  color: var(--gw-text);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) {
  .gw-proof__list { flex-direction: row; align-items: center; gap: var(--gw-s-6); }
  .gw-proof__item { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8 · REPLAY SLOT IN THE LIVE DEPLOYMENT SECTION
   Replaces the mocked-up player that had a stock photo behind it and a
   progress bar that counted a video nobody ever shot.
   ══════════════════════════════════════════════════════════════════════════ */

.trial-replay { margin-top: var(--gw-s-4); }

/* ══════════════════════════════════════════════════════════════════════════
   9 · CLOSING CTA
   The section is ink in both themes, so it takes .gw-invert and every token
   inside it resolves dark. Lime is type here, on ink, at 13.3:1.
   ══════════════════════════════════════════════════════════════════════════ */

.display-lg-yellow { color: var(--gw-punct); }
.cta-badge-text { color: var(--gw-punct); }
/* Same (0,1,1) clearance as .panel-link. */
.gw-home .cta-contact-link { color: var(--gw-text-muted); }
.gw-home .cta-contact-link:hover { color: var(--gw-text); }
.cta-sep { color: var(--gw-rule-strong); }
/* The phone and mail glyphs carried stroke="#1A47E8" inline. They are
   currentColor now, so the accent comes from the token like everything else. */
.contact-icon { color: var(--gw-accent-text); }