/* ==========================================================================
   ITZA CHESS - marketing site stylesheet
   --------------------------------------------------------------------------
   ONE stylesheet for every page. Nothing is inlined in the HTML.

   HOW THIS FILE IS ORGANISED (search for the banners):
     01  DESIGN TOKENS          all colours / spacing / type live here
     02  RESET + BASE
     03  TYPOGRAPHY
     04  LAYOUT HELPERS         container, section, grids
     05  HEADER + NAVIGATION
     06  BUTTONS, PILLS, CHIPS
     07  HERO
     08  THE LIVING BOARD       the animated demo board (signature element)
     09  STAT STRIP
     10  CARDS + FEATURE GRID
     11  BOARD THEMES + PIECE SETS
     12  OPPONENT ROSTER
     13  BADGES
     14  NUMBERED STEPS
     15  COMPARISON TABLE
     16  NEWS
     17  FAQ ACCORDION
     18  CALL TO ACTION BAND
     19  FOOTER
     20  UTILITIES, MOTION, RESPONSIVE, ACCESSIBILITY

   DESIGN NOTES FOR WHOEVER MAINTAINS THIS
     - Light theme only, by request. There is no dark mode.
     - ALL body copy is black (--ink-body). Nothing is grey. Where a piece of
       text needs to feel secondary we change SIZE / WEIGHT / LETTER-SPACING or
       switch it to royal blue or gold-brown - never to grey.
     - No web fonts are loaded. The site is hosted on the ITZA chain, so it must
       not reach out to Google Fonts or any other CDN. Everything is a system
       font stack, which also means zero render-blocking requests.
     - The checkerboard motif (2x2 glyph on eyebrows, faint board texture in the
       hero) is the structural device that ties sections together.
   ========================================================================== */


/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root {

  /* --- Surfaces -------------------------------------------------------- */
  --paper:        #ffffff;   /* cards, header                              */
  --ivory:        #faf8f3;   /* page background                            */
  --ivory-deep:   #f4f0e5;   /* alternating band + footer                  */
  --tint-royal:   #eef2fd;   /* very soft blue wash for callouts           */
  --tint-gold:    #fdf6e4;   /* very soft gold wash for callouts           */

  /* --- Ink (type). Deliberately black, never grey. --------------------- */
  --ink:          #0a0a0b;   /* headings                                   */
  --ink-body:     #14151a;   /* paragraphs                                 */

  /* --- Royal blue, lifted straight off the badge artwork --------------- */
  --royal:        #12369f;
  --royal-bright: #2e5be0;
  --royal-deep:   #0a1c57;

  /* --- Gold, sampled from the ITZA pyramid + badge frames -------------- */
  --gold-lt:      #f6de95;
  --gold:         #d9a62e;
  --gold-dk:      #96661a;
  --gold-metal:   linear-gradient(160deg, #f8e8ad 0%, #e5bb4e 34%, #c9902a 62%, #f2d885 100%);

  /* --- Board (the app's default "Classic Green" theme) ----------------- */
  --sq-light:     #edeed2;
  --sq-dark:      #6e8f4e;
  --frame:        linear-gradient(155deg, #a67c3e, #6d4a1f 45%, #8f6531);

  /* --- Lines + shadows. Warm hairlines, blue-tinted shadows. ----------- */
  --rule:         #e6dfcd;
  --rule-strong:  #d8cdb2;
  --shadow-sm:    0 1px 2px rgba(10, 28, 87, .06);
  --shadow-md:    0 2px 4px rgba(10, 28, 87, .05), 0 14px 30px -20px rgba(10, 28, 87, .40);
  --shadow-lg:    0 4px 10px rgba(10, 28, 87, .06), 0 34px 60px -34px rgba(10, 28, 87, .48);

  /* --- Type stacks. No downloads: these resolve locally on every OS. ---- */
  --font-display: 'Iowan Old Style', 'Hoefler Text', 'Palatino Linotype',
                  Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-body:    'Avenir Next', Avenir, 'Segoe UI', system-ui, -apple-system,
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono',
                  Menlo, Consolas, 'Liberation Mono', monospace;

  /* --- Rhythm ---------------------------------------------------------- */
  --wrap:         1180px;   /* max content width                          */
  --gutter:       24px;
  --radius:       14px;
  --radius-lg:    22px;
  --section-y:    clamp(64px, 8vw, 116px);
}


/* ==========================================================================
   02  RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; border: 0; }
a   { color: var(--royal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--royal-bright); }

/* Keyboard focus must always be obvious. Applies site-wide. */
:focus-visible {
  outline: 3px solid var(--royal-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screen-reader-only text (used on icon-only controls). */
.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;
}

/* Skip link - first tab stop on every page. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--royal-deep); color: #fff;
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; color: #fff; }


/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  line-height: 1.1;
}
h1 { font-size: clamp(2.5rem, 5.6vw, 4.15rem); line-height: 1.03; letter-spacing: -.025em; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem);  letter-spacing: -.01em; }
h4 { font-size: 1.06rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Lead paragraph under a headline. */
.lead {
  font-size: clamp(1.06rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  max-width: 62ch;
}

/* Eyebrow - the small label above a section title.
   The ::before is a 2x2 chessboard glyph, our structural motif. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--royal);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background:
    linear-gradient(45deg, transparent 49.5%, var(--gold) 50%) no-repeat,
    conic-gradient(var(--royal) 0 25%, transparent 0 50%, var(--royal) 0 75%, transparent 0);
  background-size: 100% 100%, 100% 100%;
  border-radius: 2px;
  opacity: .9;
}
.eyebrow.is-gold { color: var(--gold-dk); }

/* Headline highlight: a gold brush stroke sitting behind one word. */
.mark {
  position: relative;
  background: linear-gradient(var(--gold-lt), var(--gold-lt)) no-repeat;
  background-size: 100% .30em;
  background-position: 0 84%;
  padding: 0 .04em;
}

/* Monospace inline data (ratings, block numbers, notation). */
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.01em; }

.section-head { max-width: 66ch; margin-bottom: clamp(34px, 4vw, 54px); }
.section-head.is-centred { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.is-centred .eyebrow { justify-content: center; }


/* ==========================================================================
   04  LAYOUT HELPERS
   ========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 860px; }

.section { padding: var(--section-y) 0; position: relative; }
.section--tint  { background: var(--ivory-deep); }
.section--paper { background: var(--paper); }

/* Hairline gold divider used between bands. */
.section--ruled { border-top: 1px solid var(--rule); }

/* Dark band. Used once, for the speed pitch - the one claim on the site that
   benefits from standing apart from everything around it. Text inside is
   white, per the site's rule that copy is never grey. */
.section--ink {
  background: linear-gradient(160deg, #12203a 0%, #0d1729 60%, #101d33 100%);
  color: #fff;
}
.section--ink h2, .section--ink h3, .section--ink p, .section--ink .lead { color: #fff; }
.section--ink .eyebrow.is-gold { color: var(--gold); }
.section--ink .btn-royal {
  background: var(--gold); color: #14213d; border-color: var(--gold);
}
.section--ink .btn-royal:hover { background: #e6c65c; border-color: #e6c65c; }

/* Generic responsive grids. Collapse rules live in section 20. */
.grid      { display: grid; gap: 22px; }
.grid-2    { grid-template-columns: repeat(2, 1fr); }
.grid-3    { grid-template-columns: repeat(3, 1fr); }
.grid-4    { grid-template-columns: repeat(4, 1fr); }
.grid-tight{ gap: 16px; }

/* Two-column split: text beside a visual. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
}
.split > * { min-width: 0; }   /* let columns shrink instead of overflowing */
.split--wide-right { grid-template-columns: 0.86fr 1.14fr; }
.split--wide-left  { grid-template-columns: 1.14fr 0.86fr; }


/* ==========================================================================
   05  HEADER + NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .25s ease, background .25s ease;
}
/* .is-stuck is added by js/main.js once the page scrolls. */
.site-header.is-stuck { box-shadow: 0 6px 24px -14px rgba(10, 28, 87, .45); }

.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  height: 68px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { width: 30px; height: auto; }
.brand-word {
  font-family: var(--font-display);
  font-size: 1.24rem; font-weight: 600; color: var(--ink);
  letter-spacing: .01em; line-height: 1;
}
.brand-word b { font-weight: 600; color: var(--gold-dk); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  padding: 9px 13px; border-radius: 8px;
  color: var(--ink-body); text-decoration: none;
  font-size: .95rem; font-weight: 500;
  transition: background .18s ease;
}
.nav a:hover { background: var(--tint-royal); color: var(--ink); }
/* Growing gold underline; also marks the current page via aria-current. */
.nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { margin-left: 10px; }

/* Hamburger - only visible on small screens (see section 20). */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 38px;
  border: 1px solid var(--rule-strong); border-radius: 9px;
  background: var(--paper); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; display: block;
  width: 17px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }


/* ==========================================================================
   06  BUTTONS, PILLS, CHIPS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 11px;
  font-family: var(--font-body); font-size: .97rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  max-width: 100%; text-align: center;
  overflow-wrap: anywhere;          /* a long label wraps instead of overflowing */
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Primary: the metallic gold from the badge frames. */
.btn-gold {
  background: var(--gold-metal);
  color: #33240a;
  border-color: rgba(150, 102, 26, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65),
              0 10px 22px -12px rgba(150, 102, 26, .85);
}
.btn-gold:hover {
  color: #33240a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
              0 14px 28px -12px rgba(150, 102, 26, .95);
  transform: translateY(-1px);
}

/* Secondary: royal blue solid. */
.btn-royal {
  background: var(--royal); color: #fff; border-color: var(--royal-deep);
  box-shadow: 0 10px 22px -14px rgba(18, 54, 159, .9);
}
.btn-royal:hover { background: var(--royal-bright); color: #fff; transform: translateY(-1px); }

/* Tertiary: outline on paper. */
.btn-ghost {
  background: var(--paper); color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--gold); background: var(--tint-gold); color: var(--ink); }

.btn-sm { padding: 9px 16px; font-size: .88rem; border-radius: 9px; }
.btn-lg { padding: 16px 30px; font-size: 1.03rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Small status pill. Colour carries meaning: gold = live, blue = info. */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
}
.pill--live   { border-color: rgba(217, 166, 46, .55); background: var(--tint-gold); color: var(--gold-dk); }
.pill--soon   { border-color: rgba(18, 54, 159, .28);  background: var(--tint-royal); color: var(--royal); }
.pill--dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* Data chip - ratings, counts, versions. */
.chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 7px;
  background: var(--tint-royal); border: 1px solid rgba(18, 54, 159, .16);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--royal);
}
.chip--gold { background: var(--tint-gold); border-color: rgba(217, 166, 46, .35); color: var(--gold-dk); }


/* ==========================================================================
   07  HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
}
/* Ambient light: royal glow top-right, gold glow bottom-left. */
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto auto;
  width: 780px; height: 780px; pointer-events: none;
  background: radial-gradient(circle, rgba(46, 91, 224, .16), transparent 62%);
}
/* Faint chessboard texture - the motif, at 3% so it reads as paper grain. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 92%, rgba(217, 166, 46, .20), transparent 55%),
    repeating-conic-gradient(rgba(10, 28, 87, .035) 0% 25%, transparent 0% 50%);
  background-size: auto, 68px 68px;
}
.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.hero h1 { margin-bottom: .38em; }
.hero .lead { margin-bottom: 30px; }

/* Small reassurance line under the hero buttons. */
.hero-note {
  margin-top: 20px;
  font-size: .88rem;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { width: 15px; height: 15px; color: var(--gold-dk); flex: none; }


/* ==========================================================================
   08  THE LIVING BOARD  (signature element)
   --------------------------------------------------------------------------
   A scripted replay of a famous game. There is NO chess engine here: the move
   list is hard-coded coordinates in js/main.js and the board just moves pieces
   between squares. Purely decorative.
   ========================================================================== */
.board-stage { display: grid; gap: 16px; justify-items: center; }

/* Walnut frame around the playing surface. */
.board-frame {
  width: 100%; max-width: 470px;
  padding: 14px;
  border-radius: 16px;
  background: var(--frame);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.board {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 5px; overflow: hidden;
  /* The light squares are this background; the dark ones are drawn by the
     .board-grid SVG injected by js/main.js. A CSS gradient was tried twice and
     both failed: the 45deg linear idiom draws diagonal stripes, and a conic
     tile antialiases its angular edges so Chrome and Edge render visibly
     uneven squares. Crisp-edged rects do not have either problem. */
  background-color: var(--sq-light);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

/* Highlight squares for the move just played. */
.board-hl {
  position: absolute; width: 12.5%; height: 12.5%;
  background: rgba(246, 222, 149, .62);
  box-shadow: inset 0 0 0 2px rgba(217, 166, 46, .8);
  transition: left .38s ease, top .38s ease;
  pointer-events: none;
}

/* One node per piece, positioned by percentage and transitioned.
   The piece itself is an inline SVG (js/pieces.js) rather than a Unicode
   character, so it renders identically on every device instead of depending
   on whichever font the browser happens to substitute. */
.piece {
  position: absolute;
  width: 12.5%; height: 12.5%;
  display: flex; align-items: center; justify-content: center;
  transition: left .42s cubic-bezier(.34, .8, .3, 1),
              top  .42s cubic-bezier(.34, .8, .3, 1),
              opacity .2s ease;
  will-change: left, top;
  user-select: none; pointer-events: none;
}
.piece.is-gone { opacity: 0; }

/* The drawn checkerboard. One SVG of 32 rects with antialiasing switched off,
   injected by js/main.js. It replaced a conic-gradient, which rendered with
   soft, uneven square edges in Chrome and Edge because its boundaries are
   angular. Sits under the pieces and never takes a click. */
.board-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.board .board-grid rect        { fill: var(--sq-dark); }
.swatch-board .board-grid rect { fill: var(--s-dark); }

/* The shape itself. One set of paths serves both colours; only the fill and
   the outline change. The drop shadow lifts the piece off the square. */
.pc { width: 86%; height: 86%; display: block;
      stroke-linejoin: round; stroke-linecap: round; }
.pc.is-white { fill: #fdfdfb; stroke: #22262b; stroke-width: 1.35;
               filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .42)); }
.pc.is-black { fill: #24272e; stroke: #05070b; stroke-width: 1.1;
               filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .34)); }

/* Board caption + the little "block stamp" that ties a move to a transaction. */
.board-meta {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  align-items: center; justify-content: center;
  width: 100%; max-width: 470px;
}
.board-stamp {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px; border-radius: 9px;
  background: var(--paper); border: 1px solid var(--rule-strong);
  font-family: var(--font-mono); font-size: .76rem; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.board-stamp b { color: var(--royal); font-weight: 600; }
.board-stamp .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 166, 46, .22);
}
.board-caption { font-size: .82rem; text-align: center; max-width: 470px; }

/* Move ticker beside/below the board. */
.ticker {
  width: 100%; max-width: 470px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow-sm);
  font-family: var(--font-mono); font-size: .82rem;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  min-height: 62px; align-content: flex-start;
}
.ticker i { font-style: normal; opacity: .55; }
.ticker b { font-weight: 600; }
.ticker .now {
  background: var(--tint-gold); border-radius: 5px;
  padding: 0 5px; box-shadow: inset 0 0 0 1px rgba(217, 166, 46, .5);
}


/* ==========================================================================
   09  STAT STRIP
   ========================================================================== */
.stat-strip {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.stat-strip .wrap {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.stat {
  padding: 26px 16px; text-align: center;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; }
.stat b {
  display: block;
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600; color: var(--ink); line-height: 1;
  margin-bottom: 7px;
}
.stat span {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--royal);
}


/* ==========================================================================
   10  CARDS + FEATURE GRID
   ========================================================================== */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card h3 { margin-bottom: .45em; }
.card p  { font-size: .95rem; }
.card--hover:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 166, 46, .5);
  box-shadow: var(--shadow-md);
}
.card--flush { padding: 0; overflow: hidden; }
.card--tint  { background: var(--tint-royal); border-color: rgba(18, 54, 159, .14); }
.card--gold  { background: var(--tint-gold);  border-color: rgba(217, 166, 46, .32); }

/* Icon tile at the top of a feature card. */
.icon-tile {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--tint-royal); border: 1px solid rgba(18, 54, 159, .16);
  color: var(--royal);
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile--gold {
  background: var(--tint-gold); border-color: rgba(217, 166, 46, .34); color: var(--gold-dk);
}

/* Tick list used inside cards and feature sections. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; font-size: .95rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 15px; height: 9px;
  border-left: 2.4px solid var(--gold-dk); border-bottom: 2.4px solid var(--gold-dk);
  transform: rotate(-45deg); border-radius: 1px;
}
.ticks--royal li::before { border-color: var(--royal); }

/* Definition rows - label on the left, value on the right. */
.deflist { display: grid; gap: 0; margin: 0; }
.deflist > div {
  display: flex; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;                       /* wrap rather than force width open */
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.deflist dt, .deflist dd { min-width: 0; }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { font-weight: 600; margin: 0; }
.deflist dd { overflow-wrap: anywhere; margin: 0; font-family: var(--font-mono); font-size: .86rem; text-align: right; }

/* A pull-quote / callout block. */
.callout {
  border-left: 3px solid var(--gold);
  background: var(--tint-gold);
  padding: 20px 24px; border-radius: 0 12px 12px 0;
}
.callout--royal { border-left-color: var(--royal); background: var(--tint-royal); }
.callout--gold {
  border-left-color: var(--gold);
  background: rgba(212, 175, 55, .10);
  border-top: 1px solid rgba(212, 175, 55, .45);
  border-right: 1px solid rgba(212, 175, 55, .45);
  border-bottom: 1px solid rgba(212, 175, 55, .45);
}
.callout--gold h3 { color: var(--royal-deep); }
.callout p { font-size: .97rem; }


/* ==========================================================================
   11  BOARD THEMES + PIECE SETS
   ========================================================================== */
.swatch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.swatch { text-align: center; }
.swatch-board {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rule-strong); box-shadow: var(--shadow-sm);
  /* Same crisp-edged SVG grid as the main board; see the note there. */
  position: relative;
  background-color: var(--s-light);
  transition: transform .2s ease;
}
.swatch:hover .swatch-board { transform: translateY(-3px); }
.swatch-name {
  margin-top: 10px; font-size: .84rem; font-weight: 600;
}
.swatch-note { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em;
               text-transform: uppercase; color: var(--royal); }

/* The five shipped board themes. Values mirror the app's palettes. */
.theme-green    { --s-light: #edeed2; --s-dark: #6e8f4e; }
.theme-walnut   { --s-light: #efd9b4; --s-dark: #9d6b3f; }
.theme-brown    { --s-light: #f0d9b5; --s-dark: #b58863; }
.theme-slate    { --s-light: #dee3e6; --s-dark: #7a8b99; }
.theme-contrast { --s-light: #ffffff; --s-dark: #0a0a0a; }

/* Piece-set preview tiles. */
.pieceset {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.pieceset .card { text-align: center; padding: 18px 12px; }

/* Preview row. Drawn pieces on a slip of board, so the tile shows what the
   set actually looks like in play rather than a line of font characters. */
.pieceset-row {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  padding: 6px 4px; margin-bottom: 12px;
  border-radius: 8px; background: var(--sq-light);
  border: 1px solid var(--rule-strong);
}
.pieceset-row .pc { width: 30px; height: 30px; }
.pieceset-row.is-letters {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 700;
  letter-spacing: .16em; color: var(--ink);
  padding: 13px 4px; gap: 0;
}


/* ==========================================================================
   11b  APP SCREENSHOTS
   --------------------------------------------------------------------------
   Real captures of the running app. Framed rather than dropped flat on the
   page, so a screenshot never reads as part of this site's own interface.
   ========================================================================== */
.shot {
  margin: 0; border-radius: 14px; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-md);
}
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption {
  padding: 11px 16px 13px;
  border-top: 1px solid var(--rule);
  background: var(--ivory);
  font-size: .81rem; line-height: 1.45;
}
.shot figcaption b { color: var(--royal); }

/* A screenshot used as the wide half of a split section. */
.shot--lead { margin-top: 6px; }

/* Two screenshots side by side. */
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 780px) { .shot-pair { grid-template-columns: 1fr; } }


/* ==========================================================================
   11c  SPEED COMPARISON
   ========================================================================== */

/* The settlement-figure stack beside the home page speed pitch. */
.stat-stack { display: grid; gap: 12px; align-content: start; }
.stat-big {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 18px; border-radius: 11px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}
.stat-big b {
  font-family: var(--font-mono); font-size: 1.42rem; font-weight: 700;
  color: var(--gold); letter-spacing: -.01em; min-width: 104px;
}
.stat-big span { font-size: .88rem; color: #fff; opacity: .9; }
/* The first row is ours, so it gets the emphasis. */
.stat-big:first-child { background: rgba(212, 175, 55, .16); border-color: var(--gold); }
.stat-big:first-child b { font-size: 1.78rem; }

/* The settlement table. Our row is marked so the eye lands on it. */
.table-wrap {
  /* max-width is what makes overflow-x actually scroll: without it the wrapper
     just grows to the table's width and takes the page with it. */
  overflow-x: auto; max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
/* Base styling. Modelled on table.compare so the two tables on the site match,
   with column widths set explicitly: the notes column takes the slack and the
   first two stay tight to their content. */
.ratings-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ratings-table th, .ratings-table td {
  padding: 14px 18px; text-align: left; vertical-align: top;
}
.ratings-table thead th {
  background: var(--royal-deep); color: #fff;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.ratings-table tbody tr + tr { border-top: 1px solid var(--rule); }
.ratings-table tbody tr:nth-child(even) { background: var(--ivory); }
.ratings-table td { font-size: .93rem; }
.ratings-table td:first-child  { font-weight: 600; white-space: nowrap; }
/* the figure column: monospace so the numbers line up, and it never wraps */
.ratings-table td:nth-child(2) {
  font-family: var(--font-mono); font-size: .88rem; white-space: nowrap;
}
/* the notes column absorbs the remaining width */
.ratings-table th:last-child, .ratings-table td:last-child { width: 99%; }

.ratings-table tr.is-us { background: rgba(212, 175, 55, .14); }
.ratings-table tr.is-us td { border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.ratings-table caption {
  caption-side: top; text-align: left;
  padding: 16px 18px 14px;
  font-size: .84rem; line-height: 1.5; color: var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}


/* --- Teaching-colour legend (learn page) ------------------------------
   Mirrors the scale the app dots each legal destination square with, from a
   blunder in red through to a great move in green. */
.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.legend-dot {
  width: 13px; height: 13px; border-radius: 50%;
  display: inline-block; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) inset;
}
.dot-blunder { background: #c0392b; }
.dot-weak    { background: #e07a3f; }
.dot-ok      { background: #e3b23c; }
.dot-good    { background: #8bb04a; }
.dot-great   { background: #4a8f3c; }


/* ==========================================================================
   12  OPPONENT ROSTER
   ========================================================================== */
.roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.roster--wide { grid-template-columns: repeat(4, 1fr); }

.fighter {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .24s ease, box-shadow .24s ease;
}
.fighter:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.fighter-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-deep); }
.fighter-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fighter:hover .fighter-photo img { transform: scale(1.045); }
/* Scrim so the name stays legible over any photo. */
.fighter-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 10, 26, .88) 0%, rgba(6, 10, 26, .35) 30%, transparent 58%);
}

.fighter-level {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em;
  padding: 4px 9px; border-radius: 6px;
  background: var(--gold-metal); color: #33240a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.fighter-rating {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(255, 255, 255, .92); color: var(--royal-deep);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.fighter-name {
  position: absolute; left: 14px; right: 14px; bottom: 11px; z-index: 2;
  color: #fff; font-family: var(--font-display);
  font-size: 1.06rem; font-weight: 600; line-height: 1.15;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.fighter-name em {
  display: block; font-style: normal;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-lt); margin-top: 4px;
}
.fighter-body { padding: 15px 16px 18px; }
.fighter-body p { font-size: .89rem; margin: 0; }

/* Level / style / rating, stated as three separate facts. The engine level and
   the opponent's rating are different things and the app treats them that way:
   two opponents can sit on the same level with different ratings. */
.fighter-meta {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--royal);
  margin-bottom: 9px !important; padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}
.fighter-meta i { color: var(--gold-dk); font-style: normal; padding: 0 3px; }


/* ==========================================================================
   13  BADGES
   ========================================================================== */
/* The badge PNGs sit on a white plate. `multiply` removes that plate against
   any light surface while keeping the artwork's own drop shadow. */
.badge-shelf {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px;
  align-items: end;
}
.badge {
  text-align: center;
  transition: transform .22s ease;
}
.badge:hover { transform: translateY(-6px) scale(1.04); }
.badge img { width: 100%; mix-blend-mode: multiply; }
.badge span {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .06em; color: var(--ink);
}
.badge-card { text-align: center; }
.badge-card img { width: 100%; max-width: 190px; margin: 0 auto 12px; mix-blend-mode: multiply; }
.badge-card h4 { margin-bottom: .25em; }
.badge-card p  { font-size: .87rem; }

/* The "not yet won" note under the shelf. The blank shield sits beside the
   copy rather than in the grid, so the nine real badges stay in clean rows. */
.locked-note {
  display: grid; grid-template-columns: 118px 1fr;
  gap: 22px; align-items: center;
  max-width: 640px; margin: 34px auto 0;
  padding: 18px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.locked-note img { width: 100%; mix-blend-mode: multiply; }
.locked-note p   { margin: 0; font-size: .93rem; }

@media (max-width: 560px) {
  .locked-note { grid-template-columns: 84px 1fr; gap: 16px; padding: 16px 18px; }
}


/* ==========================================================================
   14  NUMBERED STEPS   (only used where order genuinely matters)
   ========================================================================== */
.steps { display: grid; gap: 20px; counter-reset: step; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }

.step {
  position: relative; padding-top: 18px;
  border-top: 2px solid var(--rule-strong);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 10px;
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
  line-height: 1; color: transparent;
  -webkit-text-stroke: 1.4px var(--gold-dk);
}
.step h3 { font-size: 1.1rem; margin-bottom: .4em; }
.step p  { font-size: .93rem; }


/* ==========================================================================
   15  COMPARISON TABLE
   ========================================================================== */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
table.compare { width: 100%; border-collapse: collapse; min-width: 620px; }
table.compare th, table.compare td { padding: 15px 18px; text-align: left; }
table.compare thead th {
  background: var(--royal-deep); color: #fff;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
table.compare thead th:first-child { border-radius: 0; }
table.compare tbody tr { border-top: 1px solid var(--rule); }
table.compare tbody tr:nth-child(even) { background: var(--ivory); }
table.compare td:first-child { font-weight: 600; }
table.compare td { font-size: .93rem; }
.yes, .no { font-family: var(--font-mono); font-weight: 700; }
.yes { color: var(--gold-dk); }
.no  { color: var(--royal); }


/* ==========================================================================
   16  NEWS
   --------------------------------------------------------------------------
   Both the 3-item preview on the home page and the full archive on news.html
   are rendered by js/news.js from ONE array, so they can never drift apart.
   ========================================================================== */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.post-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 24px;
  text-decoration: none; color: var(--ink-body);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.post-card:hover {
  transform: translateY(-3px); color: var(--ink-body);
  border-color: rgba(217, 166, 46, .5); box-shadow: var(--shadow-md);
}
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.post-date {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; color: var(--ink);
}
.post-tag {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--tint-royal); color: var(--royal);
  border: 1px solid rgba(18, 54, 159, .16);
}
.post-tag[data-tag="Release"]  { background: var(--tint-gold); color: var(--gold-dk); border-color: rgba(217,166,46,.4); }
.post-tag[data-tag="Fix"]      { background: #fdf1ec; color: #9a4220; border-color: rgba(154,66,32,.24); }
.post-tag[data-tag="On-chain"] { background: #eaf4ec; color: #1d6134; border-color: rgba(29,97,52,.22); }
.post-card h3 { font-size: 1.16rem; margin: 0; }
.post-card p  { font-size: .92rem; margin: 0; }
.post-more {
  margin-top: auto; padding-top: 4px;
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--royal);
}

/* Full archive: a dated rail down the left. */
.timeline { position: relative; display: grid; gap: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 118px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(var(--gold), rgba(217, 166, 46, .12));
}
.entry { display: grid; grid-template-columns: 118px 1fr; gap: 34px; position: relative; }
.entry-date {
  /* 22px of right padding, not 4: the dot is centred on the 118px rule and is
     12px across, so it starts at 113px. At 4px the day number collided with
     it. This keeps the number clear of the dot at every size. */
  text-align: right; padding-right: 22px;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--ink);
  padding-top: 3px;
}
.entry-date b { display: block; font-size: 1.5rem; font-family: var(--font-display); line-height: 1; }
.entry::before {
  content: ""; position: absolute; left: 113px; top: 12px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--ivory), 0 0 0 5px rgba(217, 166, 46, .35);
}
.entry-body {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.entry-body h3 { margin-bottom: .35em; }
.entry-body p { font-size: .95rem; }
.entry-body .ticks { margin-top: 14px; }

/* Category filter buttons on news.html */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filter {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease;
}
.filter:hover { border-color: var(--gold); background: var(--tint-gold); }
.filter[aria-pressed="true"] {
  background: var(--royal-deep); border-color: var(--royal-deep); color: #fff;
}


/* ==========================================================================
   17  FAQ ACCORDION
   ========================================================================== */
.faq { display: grid; gap: 12px; }
.qa {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 12px; overflow: hidden;
}
.qa-q {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border: 0; background: none;
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; color: var(--ink);
}
.qa-q::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.3rem;
  color: var(--gold-dk); flex: none; transition: transform .22s ease;
}
.qa-q[aria-expanded="true"]::after { transform: rotate(45deg); }
.qa-a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.qa-a p { font-size: .95rem; }
.qa.is-open .qa-a { padding: 0 22px 20px; max-height: 640px; }


/* ==========================================================================
   18  CALL TO ACTION BAND
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, #fdf7e7 0%, #f7e9c4 55%, #fbf3dd 100%);
  border-top: 1px solid rgba(217, 166, 46, .45);
  border-bottom: 1px solid rgba(217, 166, 46, .45);
  padding: clamp(52px, 6vw, 84px) 0;
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(150, 102, 26, .05) 0% 25%, transparent 0% 50%);
  background-size: 56px 56px;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta-band .lead { margin: 0 auto 28px; }
.cta-band .btn-row { justify-content: center; }
.cta-logo { width: 62px; margin: 0 auto 20px; }


/* ==========================================================================
   19  FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ivory-deep);
  border-top: 1px solid var(--rule-strong);
  padding: clamp(48px, 5vw, 72px) 0 30px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px;
  padding-bottom: 34px; border-bottom: 1px solid var(--rule-strong);
}
.footer-brand img { width: 46px; margin-bottom: 14px; }
.footer-brand p { font-size: .9rem; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--royal);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--ink-body); text-decoration: none; font-size: .93rem; }
.footer-col a:hover { color: var(--royal); text-decoration: underline; }

.socials { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.socials a {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--rule-strong); color: var(--ink);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.socials a:hover { transform: translateY(-2px); border-color: var(--gold); background: var(--tint-gold); }
.socials svg { width: 18px; height: 18px; }

.footer-base {
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  align-items: center; justify-content: space-between;
  font-size: .85rem;
}
.footer-base nav { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-base a { color: var(--ink-body); text-decoration: none; }
.footer-base a:hover { text-decoration: underline; }


/* ==========================================================================
   20  UTILITIES, MOTION, RESPONSIVE, ACCESSIBILITY
   ========================================================================== */
.u-centre     { text-align: center; }

/* Small-type steps. Used for the one-line footnotes under a card's heading --
   e.g. "Never affects any rating." on the game-mode cards. Kept here rather
   than as style="" on the tag so that every page stays free of inline CSS. */
.u-fs-xs      { font-size: .85rem; }
.u-fs-sm      { font-size: .88rem; }
.u-fs-md      { font-size: .94rem; }

/* Centres a fixed-width block (an icon tile) inside a centred card. */
.u-row-centre { display: flex; justify-content: center; }

.u-mt-0       { margin-top: 0; }
.u-mt-24      { margin-top: 24px; }
.u-mt-40      { margin-top: 40px; }
.u-mb-40      { margin-bottom: 40px; }
/* Small print under a section. Secondary by SIZE, not by fading to grey. */
.u-small      { font-size: .84rem; line-height: 1.6; }
.u-mb-0       { margin-bottom: 0; }
.u-max-60     { max-width: 60ch; }
.u-centre-x   { margin-left: auto; margin-right: auto; }

/* Page header used on every inner page. */
.page-head {
  padding: clamp(44px, 5vw, 72px) 0 clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(circle at 88% 0%, rgba(46, 91, 224, .12), transparent 55%),
    var(--ivory);
}
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: 4px; }

/* Scroll reveal. js/main.js adds .is-in when the element enters the viewport. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* --- Breakpoints ------------------------------------------------------- */
@media (max-width: 1040px) {
  .roster       { grid-template-columns: repeat(3, 1fr); }
  .roster--wide { grid-template-columns: repeat(3, 1fr); }
  .stat-strip .wrap { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* Nav collapses into a dropdown panel toggled by .nav-toggle */
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 12px var(--gutter) 20px;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 8px; font-size: 1rem; }
  .nav a::after { display: none; }
  .nav-cta { margin: 8px 0 0; justify-content: center; }

  .hero-grid   { grid-template-columns: 1fr; }
  .split,
  .split--wide-right,
  .split--wide-left { grid-template-columns: 1fr; }
  /* stack definition pairs so neither can force the row wider than the screen */
  .deflist > div { flex-direction: column; gap: 4px; }
  .deflist dd    { text-align: left; }
  .grid-4      { grid-template-columns: repeat(2, 1fr); }
  .grid-3      { grid-template-columns: repeat(2, 1fr); }
  .steps--4    { grid-template-columns: repeat(2, 1fr); }
  .news-grid   { grid-template-columns: 1fr; }
  .swatch-grid { grid-template-columns: repeat(3, 1fr); }
  .badge-shelf { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .pieceset    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  body        { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .roster, .roster--wide    { grid-template-columns: repeat(2, 1fr); }
  .steps--4   { grid-template-columns: 1fr; }
  .swatch-grid{ grid-template-columns: repeat(2, 1fr); }
  .stat-strip .wrap { grid-template-columns: repeat(2, 1fr); }
  .stat       { padding: 20px 10px; border-bottom: 1px solid var(--rule); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(3n) { border-right: 1px solid var(--rule); }
  .stat:nth-child(2n) { border-right: 0; }
  .footer-grid{ grid-template-columns: 1fr; }
  .card       { padding: 22px; }

  /* News timeline stacks: date above the card. */
  .timeline::before { display: none; }
  .entry      { grid-template-columns: 1fr; gap: 10px; }
  .entry::before { display: none; }
  .entry-date { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .entry-date b { font-size: 1.2rem; }
}

/* --- Respect the OS "reduce motion" setting ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- Print ------------------------------------------------------------- */
@media print {
  .site-header, .cta-band, .board-stage, .socials { display: none; }
  body { background: #fff; }
  .card, .entry-body { box-shadow: none; border-color: #ccc; }
}