/* ==========================================================================
   Iron Events Wrestling — site stylesheet
   Ported from the Claude Design handoff (Iron Events Site.dc.html) plus the
   design-system token files under _ds/.../tokens/.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS  (from _ds/.../tokens/colors.css)
   ========================================================================== */
:root {
  /* --- Base: ink -------------------------------------------------- */
  --ink-1000: #000000;      /* mat black — logo field, hero backdrop */
  --ink-950: #08090A;
  --ink-900: #0D0F11;       /* page */
  --ink-850: #14171A;       /* card */
  --ink-800: #1B1F23;       /* raised card / input */
  --ink-700: #262B31;       /* hairline-heavy, dividers on dark */
  --ink-600: #343A41;

  /* --- Base: steel (the chrome in the mark) ----------------------- */
  --steel-500: #5A636C;
  --steel-400: #7C858E;
  --steel-300: #9BA4AD;
  --steel-200: #C3CAD1;
  --steel-100: #DFE4E8;
  --steel-50: #F1F4F6;

  /* --- Base: iron red --------------------------------------------- */
  --red-700: #7C0C17;
  --red-600: #A0101E;
  --red-500: #CE1226;       /* primary brand red */
  --red-400: #E11B2E;
  --red-300: #F14A57;
  --red-100: #FBD9DC;

  /* --- Base: semantic hues ---------------------------------------- */
  --win-500: #2E9E4F;
  --gold-500: #D9A22B;      /* champion / pin / placement */
  --info-500: #3B82C4;
  --loss-500: #B3202C;

  /* --- Gradients: the chrome system ------------------------------- */
  --chrome-vertical: linear-gradient(180deg,#F4F6F8 0%,#C7CDD3 42%,#6C757D 51%,#9AA3AB 62%,#E6EAED 100%);
  --chrome-plate: linear-gradient(180deg,#2A2F35 0%,#14171A 55%,#0A0C0E 100%);
  --red-plate: linear-gradient(180deg,#E11B2E 0%,#CE1226 48%,#8E0D19 100%);

  /* --- Semantic: surfaces ----------------------------------------- */
  --surface-page: var(--ink-900);
  --surface-card: var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-950);

  /* --- Semantic: text --------------------------------------------- */
  --text-primary: #F4F6F8;
  --text-accent: var(--red-400);
  --text-on-accent: #FFFFFF;

  /* --- Semantic: lines -------------------------------------------- */
  --border-hairline: #22272C;
  --border-strong: var(--ink-600);
  --border-accent: var(--red-500);

  /* --- Typography (from tokens/typography.css) -------------------- */
  --font-display: "Saira Condensed","Arial Narrow",sans-serif;    /* headlines, scoreboard */
  --font-condensed: "Barlow Condensed","Arial Narrow",sans-serif; /* labels, nav, eyebrows */
  --font-body: "Barlow","Helvetica Neue",Arial,sans-serif;
  --font-mono: "Roboto Mono",ui-monospace,SFMono-Regular,monospace;
  --tracking-label: 0.14em;

  /* --- Elevation (from tokens/elevation.css) ---------------------- */
  --shadow-sm: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.5);
  --shadow-md: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 20px rgba(0,0,0,.55);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 22px 48px rgba(0,0,0,.65);
  --shadow-accent: 0 8px 24px rgba(206,18,38,.35);
  --edge-top: inset 0 1px 0 rgba(255,255,255,.07);
  --ring-focus: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--red-400);

  /* --- Radius (from tokens/radius.css) ---------------------------- */
  --radius-sm: 2px;

  /* --- Motion (from tokens/motion.css) ---------------------------- */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-out-hard: cubic-bezier(.16,1,.3,1);
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --press-scale: 0.98;

  /* --- Page-level overrides (from the site's own <style> block).
         These lift text contrast above the raw DS values. ---------- */
  --text-secondary: #DFE4E8;
  --text-muted: #AEB7BF;
  --steel-300: #C9D0D6;
  --steel-200: #E4E9EC;

  /* Measured at runtime by site.js; used by the mobile sticky tab strip. */
  --hdr-h: 100px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --press-scale: 1;
  }
}

/* ==========================================================================
   2. BASE  (from tokens/base.css + the site's <style> block)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* The browser implements the `hidden` attribute with a low-specificity UA rule
   ([hidden]{display:none}), so ANY author rule that sets `display` silently beats
   it. That's what kept the Rules accordions permanently open: their panels carry
   .dashlist, which is display:flex. Make `hidden` authoritative. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Paints the overscroll ("rubber band") area on phones. Without this, body's
     --ink-900 propagates to the canvas and a lighter band appears below the pure
     black footer when you pull past the bottom — which reads as dead space.
     Matching --ink-1000 makes the overscroll invisible against the footer. */
  background: var(--ink-1000);
}

body {
  margin: 0;
  /* --ink-1000, NOT --ink-900, deliberately. iOS Safari paints the rubber-band
     overscroll area from the body's background rather than html's, so an --ink-900
     body showed a lighter band under the pure-black footer when you pulled past the
     bottom. .page (below) carries --ink-900 for the actual content area and wraps
     every page, so this colour is only ever visible in that overscroll region. */
  background: var(--ink-1000);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--red-400);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--red-300); }

img { max-width: 100%; }

button { font: inherit; }

:focus-visible { outline: none; box-shadow: var(--ring-focus); }

::selection { background: var(--red-500); color: #fff; }

/* Typography rule from the project CLAUDE.md: never orphan a word. */
h1, h2, h3 { text-wrap: balance; }
p, li, span { text-wrap: pretty; }

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

/* Scroll-reveal. Elements start offset and fade up as they enter view. */
[data-sec], [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms cubic-bezier(.16,1,.3,1), transform 620ms cubic-bezier(.16,1,.3,1);
}
[data-sec][data-in], [data-reveal][data-in] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-sec], [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   3. DESIGN-SYSTEM COMPONENTS  (ported from _ds/.../_ds_bundle.js)
   ========================================================================== */

/* --- Icon ---------------------------------------------------------------
   The prototype masked Lucide SVGs off a CDN. Here the same Lucide glyphs
   (v1.27.0) are inlined as real <svg>, so there is no runtime dependency. */
.icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Button ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  padding: 0 20px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px) scale(var(--press-scale)); }

.btn--sm { height: 32px; padding: 0 14px; font-size: 13px; gap: 6px; }
.btn--lg { height: 54px; padding: 0 30px; font-size: 19px; letter-spacing: .1em; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--red-plate);
  color: var(--text-on-accent);
  border: 1px solid var(--red-600);
  box-shadow: var(--edge-top);
}
.btn--primary:hover {
  background: linear-gradient(180deg,#F2263A 0%,#DD1428 48%,#9E0F1C 100%);
  box-shadow: var(--shadow-accent), var(--edge-top);
  color: var(--text-on-accent);
}

.btn--secondary {
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: var(--edge-top);
}
.btn--secondary:hover {
  background: var(--ink-700);
  border-color: var(--steel-500);
  color: var(--text-primary);
}

.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--steel-500);
}
.btn--outline:hover {
  background: rgba(223,228,232,.08);
  border-color: var(--steel-300);
  color: var(--text-primary);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.btn--ghost:hover {
  color: var(--text-primary);
  background: rgba(223,228,232,.06);
}

/* --- Badge -------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.badge--sm { height: 18px; padding: 0 6px; font-size: 10px; }
.badge--accent { background: var(--red-500); color: #fff; border: 1px solid var(--red-600); }
.badge--neutral { background: var(--ink-700); color: var(--steel-200); border: 1px solid var(--border-strong); }
.badge__dot { width: 5px; height: 5px; background: currentColor; display: inline-block; }

/* --- Logo lockup -------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo__mark { display: block; object-fit: contain; background: var(--ink-1000); }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.logo__tagline {
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--red-400);
}

/* --- StatBlock ---------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 44px;
  line-height: .9;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.stat__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.stat__sublabel { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* --- Input -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; width: 150px; }
.field__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field__box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.field__box:focus-within {
  border-color: var(--steel-400);
  box-shadow: inset 0 0 0 1px rgba(223,228,232,.14);
}
.field__box input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  /* Must stay >= 16px. iOS Safari force-zooms the whole page when you focus an
     input smaller than this, which yanked the weight finder around on iPhones. */
  font-size: 16px;
}
.field__suffix { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }

/* ==========================================================================
   4. SHARED PRIMITIVES
   ========================================================================== */
.page { min-height: 100vh; background: var(--ink-900); font-family: var(--font-body); }

.wrap { max-width: 1200px; margin: 0 auto; }

.eyebrow {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-400);
}
.eyebrow--muted { color: var(--text-muted); }
.eyebrow--lg { font-size: 14px; }

.mono { font-family: var(--font-mono); }

/* Holds a phrase on one line so it doesn't break awkwardly. Released on phones
   (see the mobile block) — at 16px these strings are wider than the column and
   would push the layout sideways. */
.keep-together { white-space: nowrap; }

/* red 3px cap that sits on top of a plated surface */
.plate-cap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--red-plate);
}

/* Body copy list with red em-dash bullets.
   Hanging indent rather than `display:flex` on the li. Flex turns EVERY element
   child into its own flex item, so an inline <span> inside a bullet became a
   second column instead of flowing with the sentence. The dash is absolutely
   positioned so all inline content stays one continuous text run.
   23px = the 11px dash + the 12px gap the flex version used. */
.dashlist { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; }
.dashlist li {
  position: relative;
  padding-left: 23px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.dashlist li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red-400);
}

.band { padding: 80px 32px; border-bottom: 1px solid var(--border-hairline); }
.band--sunken { background: var(--ink-950); }
.band--black { background: var(--ink-1000); }

.h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(44px, 5.4vw, 74px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.h2--sec { font-size: 38px; }

/* countdown plates */
[data-m="cd"] { display: flex; gap: 10px; }
.cd__cell {
  min-width: 74px;
  padding: 10px 14px;
  background: var(--chrome-plate);
  border: 1px solid var(--ink-600);
}
.cd__num { font-family: var(--font-mono); font-weight: 700; font-size: 26px; line-height: 1; color: var(--text-primary); }
.cd__unit {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}
/* tighter variant used in the tournament hero */
.cd--tight { gap: 8px; }
.cd--tight .cd__cell { min-width: 66px; padding: 8px 12px; box-shadow: var(--edge-top); }
.cd--tight .cd__num { font-size: 24px; }

/* ==========================================================================
   5. SITE HEADER
   ========================================================================== */
[data-m="hdr"] {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
  background: rgba(8,9,10,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-hairline);
}

.hdr__home { display: flex; text-align: left; }

[data-m="burger"] {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  cursor: pointer;
}

[data-m="nav"] { display: flex; align-items: center; gap: 22px; }

[data-m="nav"] > a.nav__link {
  white-space: nowrap;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
[data-m="nav"] > a.nav__link:hover { color: var(--text-primary); }
[data-m="nav"] > a.nav__link[data-active="1"] {
  color: var(--text-primary);
  border-bottom-color: var(--red-500);
}
.nav__contact { margin-left: 6px; display: inline-flex; }

/* ==========================================================================
   6. HOME — hero
   ========================================================================== */
[data-m="hero"] { position: relative; }

.home-hero {
  padding: 96px 32px 80px;
  background:
    linear-gradient(180deg, rgba(8,9,10,0) 62%, rgba(8,9,10,.55) 88%, var(--ink-900) 100%),
    linear-gradient(90deg, rgba(8,9,10,.94) 0%, rgba(8,9,10,.7) 34%, rgba(8,9,10,.28) 58%, rgba(8,9,10,0) 78%),
    url(../assets/hero-mat.jpg) center right / cover no-repeat,
    var(--ink-1000);
  border-bottom: 1px solid var(--border-hairline);
}
.home-hero__inner { max-width: 1200px; margin: 0 auto; position: relative; }

[data-m="heroflex"] { display: flex; align-items: stretch; gap: 52px; flex-wrap: wrap; }

[data-m="badge"] {
  flex: 0 0 260px;
  align-self: stretch;
  position: relative;
  min-height: 220px;
}
[data-m="badge"] img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-m="herotext"] { flex: 1 1 420px; min-width: 0; }
[data-m="herotext"] .eyebrow { display: block; margin-bottom: 20px; }
[data-m="herotext"] p {
  margin: 26px 0 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* "Next up" bar */
.nextup {
  display: grid;
  grid-template-columns: minmax(230px,auto) auto auto;
  justify-content: space-between;
  align-items: center;
  gap: 28px 40px;
  margin-top: 48px;
  padding: 24px 26px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  box-shadow: var(--edge-top);
  position: relative;
}
.nextup__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-400);
  margin-bottom: 8px;
}
.nextup__pip { width: 7px; height: 7px; background: var(--red-500); box-shadow: 0 0 8px var(--red-500); }
.nextup__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1;
  color: var(--text-primary);
}
.nextup__date { font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); margin-top: 8px; }

[data-m="ctas"] { display: flex; gap: 12px; }
.nextup [data-m="ctas"] { margin-left: auto; }

/* ==========================================================================
   7. HOME — tournament cards
   ========================================================================== */
.season-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.season-head span { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }

[data-m="cols1"] { display: grid; }
.cards { grid-template-columns: repeat(3,1fr); gap: 20px; }

.tcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
  position: relative;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.tcard:hover { border-color: var(--steel-500); box-shadow: var(--shadow-lg); }
.tcard--featured {
  border-color: var(--border-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}
.tcard__logo {
  position: relative;
  overflow: hidden;
  height: 190px;
  background: var(--ink-1000);
  border-bottom: 1px solid var(--border-hairline);
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mat photo behind each logo — same shot as the hero, so no extra download.
   Desaturated and dropped way down in brightness using the same treatment the
   venue photo uses, so it reads as texture and never competes with the logo. */
.tcard__logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../assets/hero-mat.jpg) center / cover no-repeat;
  filter: grayscale(1) contrast(1.05) brightness(0.34);
  transform: scale(1.01);   /* hides edge seams when the hover zoom eases back */
  transition: transform 600ms var(--ease-standard), filter 600ms var(--ease-standard);
}

/* Scrim: darkest at the edges, lifts slightly behind the mark itself. */
.tcard__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 72% 68% at 50% 50%,
    rgba(8,9,10,.18) 0%, rgba(8,9,10,.66) 62%, rgba(8,9,10,.88) 100%);
}

/* Each card shows a different slice of the arena so the three don't look tiled. */
.cards .tcard:nth-child(1) .tcard__logo::before { background-position: 8% 46%; }
.cards .tcard:nth-child(2) .tcard__logo::before { background-position: 50% 52%; }
.cards .tcard:nth-child(3) .tcard__logo::before { background-position: 92% 44%; }

.tcard:hover .tcard__logo::before {
  transform: scale(1.07);
  filter: grayscale(1) contrast(1.08) brightness(0.42);
}

.tcard__logo img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Settles in after its card has landed — see the stagger below. Kept brisk:
     the earlier 300–520ms delay plus a 700ms fade meant the third logo wasn't
     fully visible until 1.2s, which read as slow loading rather than as motion. */
  opacity: 0;
  transform: scale(.9) translateY(8px);
  transition: opacity 500ms var(--ease-out-hard), transform 500ms var(--ease-out-hard);
}
.tcard[data-in] .tcard__logo img { opacity: 1; transform: none; }

.cards .tcard:nth-child(1) .tcard__logo img { transition-delay: 120ms; }
.cards .tcard:nth-child(2) .tcard__logo img { transition-delay: 200ms; }
.cards .tcard:nth-child(3) .tcard__logo img { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .tcard__logo img { opacity: 1; transform: none; transition: none; }
  .tcard__logo::before { transition: none; }
  .tcard:hover .tcard__logo::before { transform: scale(1.01); }
}
.tcard__body { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tcard__date { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--red-400); }
.tcard__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 0.95;
  color: var(--text-primary);
}
.tcard__body p { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.tcard__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-300);
  border: 1px solid var(--border-strong);
  padding: 3px 8px;
}
.tcard__cta { margin-top: auto; display: block; width: 100%; }

/* weight-class chips inside a division row get a hover tint */
.chip--weight {
  color: var(--steel-200);
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  padding: 3px 9px;
  font-size: 12px;
}
.chip--weight:hover { border-color: var(--steel-400); color: var(--text-primary); }

/* ==========================================================================
   8. HOME — venue + sponsor
   ========================================================================== */
.venue-photo-frame { max-width: 1200px; margin: 0 auto 44px; border: 1px solid var(--border-hairline); font-size: 0; }
[data-m="photo"] {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center 24%;
  filter: grayscale(1) contrast(1.08) brightness(0.66);
}
.venue-grid { max-width: 1200px; margin: 0 auto; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.venue-addr { font-family: var(--font-mono); font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 24px; }
.venue-head { margin: 0 0 18px; }
.venue-eyebrow { display: block; margin-bottom: 16px; }

.factlist { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-hairline); background: var(--surface-card); }
.factlist li {
  display: flex;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.factlist li:last-child { border-bottom: none; }
.factlist dt, .factlist__key {
  flex: 0 0 116px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

[data-m="sponsor"] { max-width: 1200px; margin: 0 auto; }
/* The margin lives on the wrapper, not the label, so the mobile override
   ([data-m="sponsor"] > div:first-child) replaces it rather than adding to it. */
.sponsor-eyebrow-wrap { margin-bottom: 28px; }
.sponsor-eyebrow { display: block; }
.sponsor-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.sponsor-left { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.sponsor-left img { display: block; height: 104px; width: auto; }
.sponsor-left p { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.sponsor-shot { border: 1px solid var(--border-hairline); background: var(--ink-950); font-size: 0; }
.sponsor-shot img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   9. TOURNAMENT PAGE — hero
   ========================================================================== */
/* Same mat photo AND the same scrim as the home hero — the two gradient stacks
   below are copied verbatim from .home-hero so the photo reads at identical
   strength on both. Only the crop position differs (see below). */
.tourn-hero {
  padding: 80px 32px 56px;
  background:
    linear-gradient(180deg, rgba(8,9,10,0) 62%, rgba(8,9,10,.55) 88%, var(--ink-900) 100%),
    linear-gradient(90deg, rgba(8,9,10,.94) 0%, rgba(8,9,10,.7) 34%, rgba(8,9,10,.28) 58%, rgba(8,9,10,0) 78%),
    url(../assets/hero-mat.jpg) center 40% / cover no-repeat,
    var(--ink-1000);
  border-bottom: 1px solid var(--border-hairline);
}

[data-m="theroflex"] { display: flex; gap: 52px; align-items: flex-start; flex-wrap: wrap; }

[data-m="tleft"] { flex: 0 0 232px; width: 232px; display: flex; flex-direction: column; gap: 10px; }

[data-m="tbadge"] {
  width: 100%;
  min-width: 0;
  height: 210px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-m="tbadge"] img { display: block; max-width: 100%; max-height: 210px; width: auto; height: auto; object-fit: contain; }

[data-m="tactA"] { display: flex; flex-direction: column; gap: 10px; }
[data-m="tactA"] > a { display: block; width: 100%; }

.tourn-hero__right { flex: 1 1 480px; min-width: 0; }

[data-m="tstatus"] { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

[data-m="teyebrow"] {
  display: block;
  margin-bottom: 14px;
  text-wrap: balance;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-400);
}

[data-m="tmeta"] {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--steel-200);
}
[data-m="tmeta"] > span { display: flex; align-items: center; gap: 8px; }

[data-m="theroflex"] [data-m="stack"] { margin-top: 32px; }

.cd-label {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-400);
  margin-bottom: 8px;
}

[data-m="closed"] {
  position: relative;
  padding: 14px 18px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  box-shadow: var(--edge-top);
}
[data-m="closed"] .closed__label {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
[data-m="closed"] .closed__head {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1;
  color: var(--text-primary);
}
[data-m="closed"] .closed__sub { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

[data-m="finerow"] { margin-top: 18px; }
[data-m="tfine"] { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.cash { color: var(--text-primary); font-family: var(--font-mono); font-weight: 700; }

/* ==========================================================================
   10. TOURNAMENT PAGE — section rail
   ========================================================================== */
[data-m="rail"] {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 214px 1fr;
  gap: 48px;
  padding: 0 32px 96px;
}

[data-m="railnav"] {
  position: sticky;
  top: 96px;
  align-self: start;
  padding: 58px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-m="railnav"] button {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0 8px 14px;
  background: transparent;
  border: none;
  border-left: 2px solid var(--border-hairline);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
[data-m="railnav"] button[data-active="1"] { border-left-color: var(--red-500); }
.rail__num { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.rail__label {
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
[data-m="railnav"] button[data-active="1"] .rail__label { color: var(--text-primary); }
[data-m="railnav"] button:hover .rail__label { color: var(--text-primary); }

[data-m="railcard"] { margin-top: 26px; padding: 14px; border: 1px solid var(--border-hairline); background: var(--surface-card); }
[data-m="railcard"] .railcard__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.emaillink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

[data-m="secs"] { display: flex; flex-direction: column; gap: 76px; padding-top: 60px; min-width: 0; }

.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.sec-head--tight { margin-bottom: 10px; }
.sec-head__num { font-family: var(--font-mono); font-size: 12px; color: var(--red-400); }
.sec-lede { margin: 0 0 22px; max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }

/* ==========================================================================
   11. TOURNAMENT PAGE — section content
   ========================================================================== */
/* 01 schedule */
.sched-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.sched-card { border: 1px solid var(--border-hairline); background: var(--surface-card); }
.sched-card--day { border-color: var(--border-strong); background: var(--surface-raised); position: relative; }
.sched-card__head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--chrome-plate);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel-100);
}
.sched-row { display: flex; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--border-hairline); }
.sched-row:last-child { border-bottom: none; }
.sched-card--day .sched-row { padding: 14px 18px; }
.sched-row__time { flex: 0 0 122px; font-family: var(--font-mono); font-size: 14px; color: var(--text-primary); }
.sched-row__time--accent { color: var(--red-400); }
.sched-row__what { font-size: 15px; color: var(--text-secondary); }
.sched-row__what--strong { color: var(--text-primary); font-weight: 600; }

/* 02 divisions — weight finder */
.finder-card {
  padding: 20px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  box-shadow: var(--edge-top);
  margin-bottom: 22px;
}
.finder-card__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
[data-m="finder"] { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }

[data-m="toggle"] {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Matches .field__box so the toggle lines up with the Age and Weight inputs
     it sits beside. Both are border-box, so these are equal outer heights. */
  height: 40px;
  min-width: 210px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  background: var(--ink-1000);
}
[data-m="toggle"] > .toggle__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--red-plate);
  border: 1px solid var(--red-600);
  box-shadow: var(--edge-top);
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
}
[data-m="toggle"][data-on="boys"] > .toggle__thumb { transform: translateX(100%); }
[data-m="toggle"] button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
[data-m="toggle"][data-on="girls"] button:first-of-type,
[data-m="toggle"][data-on="boys"] button:last-of-type { color: var(--text-on-accent); }

@media (prefers-reduced-motion: reduce) {
  [data-m="toggle"] > .toggle__thumb { transition: none; }
}

.finder-result {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  padding: 8px 18px;
  border: 1px solid var(--red-600);
  background: rgba(206,18,38,.1);
}
.finder-result__key {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.finder-result__div {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 20px;
  color: var(--text-primary);
}
.finder-result__val { font-family: var(--font-mono); font-weight: 700; font-size: 20px; color: var(--red-400); }
.finder-result__val--accent { color: var(--red-400); }
.finder-result__val--plain { color: var(--text-primary); }

.divlist { display: flex; flex-direction: column; gap: 10px; }
.divrow { padding: 16px 18px; border: 1px solid var(--border-hairline); background: var(--surface-card); }
[data-m="drow"] { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.divrow__name {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1;
  color: var(--text-primary);
}
.divrow__mt { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.divrow__start { white-space: nowrap; margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--red-400); }
.divrow__chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* 03 entry & fees */
.fees { grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 22px; }
[data-m="fee"] { padding: 20px; border: 1px solid var(--border-hairline); background: var(--surface-card); }
[data-m="fee"].fee--featured { border-color: var(--border-strong); background: var(--surface-raised); position: relative; }

/* 04 weigh-ins */
.callout {
  padding: 16px 18px;
  border: 1px solid var(--red-600);
  background: rgba(206,18,38,.09);
  margin-bottom: 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.callout .icon { color: var(--red-400); margin-top: 2px; }
.callout span { font-size: 15px; line-height: 1.55; color: var(--text-primary); }

/* 05 awards */
.awards { grid-template-columns: 1fr 1fr; gap: 12px; }
.award {
  padding: 18px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.award__icons { display: flex; gap: 7px; align-items: center; flex: 0 0 auto; padding-top: 1px; }
.award__body { min-width: 0; }
.award__title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.award__desc { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.tone-gold { color: var(--gold-500); }
.tone-primary { color: var(--text-primary); }
.tone-red { color: var(--red-400); }

/* 06 admission */
[data-m="stats"] {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding: 20px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
  margin-bottom: 18px;
}

/* 07 rules — accordions */
.acc-group { display: flex; flex-direction: column; gap: 8px; }
.acc { border: 1px solid var(--border-hairline); background: var(--surface-card); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.acc__title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-style: italic;
  font-size: 17px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.acc__sign { font-family: var(--font-mono); font-size: 16px; color: var(--red-400); }
.acc__panel { padding: 0 18px 18px; }

/* 10 faq */
.faq { display: flex; flex-direction: column; gap: 0; }
.faq__item { border-bottom: 1px solid var(--border-hairline); }
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.faq__q { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.faq__a { margin: 0; padding: 0 0 16px; max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }

/* 08 travel */
.travel-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.travel-card { padding: 20px; border: 1px solid var(--border-hairline); background: var(--surface-card); }
.travel-card__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.travel-card__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 1;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.travel-card__addr { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 18px; }
.travel-card p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.travel-photo-frame { border: 1px solid var(--border-hairline); margin-bottom: 16px; font-size: 0; }
.travel-photo-frame [data-m="photo"] { height: 260px; }

/* ==========================================================================
   12. FOOTER + STICKY BAR
   ========================================================================== */
.site-footer { padding: 40px 32px; border-top: 1px solid var(--border-hairline); background: var(--ink-1000); }
.site-footer [data-m="stack"] {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer__left { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.footer__sponsor { display: flex; align-items: center; gap: 14px; }
.footer__sponsor span {
  white-space: nowrap;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer__sponsor img { display: block; height: 44px; width: auto; }

[data-m="barspacer"] { height: 70px; background: var(--ink-1000); }

[data-m="bar"] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 32px;
  background: rgba(8,9,10,.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-strong);
}
[data-m="bar"] > div:first-child { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
[data-m="bar"] > div:last-child { display: flex; align-items: center; gap: 10px; }
[data-m="barname"], [data-m="barlabel"] {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bar__cd { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--text-primary); }
[data-m="barprice"] { font-size: 14px; color: var(--text-secondary); }
.bar__closed {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ==========================================================================
   13. RESPONSIVE  (ported verbatim from the prototype's media blocks)
   ========================================================================== */
@media (max-width: 1360px) and (min-width: 881px) {
  [data-m="tactA"] .btn { padding: 0 16px; }
}

@media (max-width: 1180px) and (min-width: 881px) {
  [data-m="theroflex"] { gap: 32px; }
  [data-m="tleft"] { flex: 0 0 210px; width: 210px; }
  [data-m="tbadge"] { height: 170px; }
}

@media (max-width: 1080px) and (min-width: 881px) {
  .nextup { grid-template-columns: minmax(220px,1fr) auto; row-gap: 22px; }
  .nextup [data-m="ctas"] { grid-column: 1 / -1; justify-content: flex-start; margin-left: 0; }
}

@media (max-width: 880px) {
  /* header: logo row + pancake menu */
  [data-m="hdr"] { height: auto; padding: 9px 18px; flex-wrap: wrap; gap: 0; }
  [data-m="burger"] { display: flex; }
  [data-m="nav"] { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  [data-m="nav"][data-open="closed"] { display: none; }
  [data-m="nav"] > a.nav__link { border-bottom: none; padding-bottom: 0; }
  [data-m="nav"] > a.nav__link[data-active="1"] { color: var(--red-400); }
  [data-m="nav"] > a, [data-m="nav"] > .nav__contact {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 15px;
    letter-spacing: .16em;
    border-top: 1px solid var(--border-hairline);
  }
  .nav__contact { margin-left: 0; }

  /* bands + type */
  .band { padding: 52px 18px; }
  [data-m="hero"] { padding: 24px 18px 36px; }
  [data-m="hero"] p { font-size: 16px; margin-top: 18px; }

  /* Two things differ on a phone.
     1. CROP. hero-mat.jpg is 2.5:1 and its left ~55% is empty black — the wrestlers,
        referee, crowd and ceiling lights all sit in the right third. A tall phone
        hero only fits ~23% of the image width, and `center` lands in the dead zone,
        which is why the photo looked absent. Anchored at 78% to frame the subject.
        (Desktop needs no such shift: the wide hero shows ~94% of the image anyway.)
     2. SCRIM. The desktop scrim is left-weighted to 86% because content hugs one
        side there; across a narrow phone that just buries everything. Vertical-only
        scrim here — the meta strip, countdown plates and buttons all carry their own
        opaque backgrounds, so only the logo and title actually sit on the photo. */
  .tourn-hero {
    background:
      linear-gradient(180deg, rgba(8,9,10,0) 62%, rgba(8,9,10,.55) 88%, var(--ink-900) 100%),
      linear-gradient(90deg, rgba(8,9,10,.94) 0%, rgba(8,9,10,.7) 34%, rgba(8,9,10,.28) 58%, rgba(8,9,10,0) 78%),
      url(../assets/hero-mat.jpg) 78% 50% / cover no-repeat,
      var(--ink-1000);
  }
  .nextup { grid-template-columns: 1fr; margin-top: 22px; padding: 18px; }
  [data-m="heroflex"] { flex-direction: column; align-items: stretch; gap: 12px; }
  [data-m="heroflex"] > div { flex: 0 0 auto; }
  [data-m="herotext"] { text-align: center; }
  [data-m="herotext"] p { margin-left: auto; margin-right: auto; }
  [data-m="badge"] { flex: 0 0 auto; width: 100%; height: 210px; min-height: 0; align-self: center; }

  /* tournament hero: logo pairs with the status column, facts become a spec strip */
  [data-m="theroflex"] {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 10px 16px;
    align-items: start;
  }
  [data-m="theroflex"] > div:last-child { display: contents; }
  [data-m="tleft"] { display: contents; }
  [data-m="tactA"] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  [data-m="tactA"] { order: 7; margin-top: 14px; }
  [data-m="tstatus"] { order: 2; }
  [data-m="teyebrow"] { order: 3; }
  [data-m="theroflex"] .h1 { order: 4; }
  [data-m="tmeta"] { order: 5; }
  [data-m="theroflex"] [data-m="stack"] { order: 6; }
  [data-m="finerow"] { order: 8; }
  [data-m="tactA"] .btn {
    height: 48px;
    padding: 0 10px;
    font-size: 14px;
    letter-spacing: .06em;
  }
  [data-m="theroflex"] > *, [data-m="theroflex"] > div:last-child > * { grid-column: 1 / -1; min-width: 0; }
  [data-m="tbadge"] {
    order: 1;
    margin-bottom: 0;
    min-height: 118px;
    align-self: center;
    grid-row: 1 / 4;
    grid-column: 1 / 2;
    width: 118px;
    height: auto;
  }
  [data-m="tbadge"] img { max-height: 132px; }
  /* These three must out-rank the `> div:last-child > *` catch-all above, which is
     more specific than a bare attribute selector. Hence !important, as in the design. */
  [data-m="tstatus"] { grid-column: 2 / -1 !important; align-self: end; margin-bottom: 0; }
  [data-m="theroflex"] .h1 { grid-column: 2 / -1 !important; font-size: 32px; line-height: 0.95; align-self: start; }
  [data-m="teyebrow"] {
    grid-column: 2 / -1 !important;
    margin-bottom: 0;
    font-size: 11.5px;
    letter-spacing: .16em;
    line-height: 1.45;
  }
  [data-m="tmeta"] {
    display: grid;
    gap: 0;
    margin-top: 18px;
    border: 1px solid var(--border-hairline);
    background: var(--surface-card);
  }
  [data-m="tmeta"] > span {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-hairline);
    font-size: 13px;
    align-items: flex-start;
  }
  [data-m="tmeta"] > span:last-child { border-bottom: none; }
  [data-m="theroflex"] [data-m="stack"] { margin-top: 22px; gap: 14px; grid-template-columns: 1fr; }
  [data-m="finerow"] { grid-template-columns: 1fr; margin-top: 14px; gap: 12px; }
  [data-m="tfine"] { text-align: center; }

  .h1 { font-size: 36px; }
  .h2, .h2--sec { font-size: 26px; }
  [data-m="cols1"] { grid-template-columns: 1fr; gap: 14px; }
  [data-m="stack"] { flex-direction: column; align-items: stretch; gap: 18px; }
  [data-m="stack"] > * { margin-left: 0; }
  /* !important so the taller travel-section photo (.travel-photo-frame [data-m="photo"])
     also drops to 200px, as it does in the design. */
  [data-m="photo"] { height: 200px !important; }

  /* countdown: four even plates, always one row */
  [data-m="cd"] { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; width: 100%; }
  [data-m="cd"] > div { min-width: 0; padding: 9px 4px; text-align: center; }

  /* action pairs stay side by side */
  [data-m="ctas"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-left: 0 !important;
    align-items: stretch;
  }
  [data-m="ctas"] > * { min-width: 0; width: auto; }
  [data-m="ctas"] a, [data-m="ctas"] > button { display: block; width: 100%; }
  [data-m="ctas"] .btn {
    width: 100%;
    height: 48px;
    padding: 0 10px;
    font-size: 14px;
    letter-spacing: .06em;
  }

  [data-m="stats"] { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 16px; }
  [data-m="stats"] .stat__value { font-size: 26px; line-height: 1; }
  [data-m="stats"] .stat__label { font-size: 13px; letter-spacing: .08em; }
  [data-m="stats"] .stat__sublabel { font-size: 12px; }

  /* fee cards read as a row: number left, labels right */
  [data-m="fee"] { padding: 14px 16px; }
  [data-m="fee"] .stat {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 18px;
    row-gap: 3px;
    align-items: center;
  }
  [data-m="fee"] .stat__value { grid-row: 1 / span 2; align-self: center; font-size: 30px; line-height: 1; }
  [data-m="fee"] .stat__label { align-self: end; }
  [data-m="fee"] .stat__sublabel { align-self: start; }

  /* sponsor + footer: centered on the narrow column, no dead right edge */
  [data-m="sponsor"] { text-align: center; }
  [data-m="sponsor"] > div:first-child { margin-bottom: 20px; }
  [data-m="sponsor"] .sponsor-left { align-items: center; gap: 20px; }
  [data-m="sponsor"] a img { height: 112px; }
  [data-m="sponsor"] p { margin-left: auto; margin-right: auto; }
  .site-footer [data-m="stack"] { align-items: center; text-align: center; gap: 22px; }
  .site-footer [data-m="stack"] > div { justify-content: center; }
  [data-m="drow"] { gap: 4px 10px; }
  [data-m="drow"] > span:last-child { margin-left: 0; }

  /* tournament page: rail becomes a sticky tab strip */
  /* 96px of bottom padding is right on a roomy desktop column but leaves a big
     empty gap between the last section and the footer on a phone. */
  [data-m="rail"] { grid-template-columns: 1fr; gap: 0; padding: 0 18px 40px; }
  [data-m="railnav"] {
    position: sticky;
    top: var(--hdr-h, 100px);
    z-index: 25;
    flex-direction: row;
    overflow-x: auto;
    margin: 0 -18px;
    padding: 8px 18px;
    gap: 2px;
    background: rgba(8,9,10,.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-hairline);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-m="railnav"]::-webkit-scrollbar { display: none; }
  [data-m="railnav"] button { flex: 0 0 auto; padding: 10px 12px; min-height: 44px; }
  [data-m="secs"] { gap: 48px; padding-top: 30px; }
  [data-m="railcard"] { display: none; }

  /* weight finder: age + weight paired, tabs and result full width */
  [data-m="finder"] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
  [data-m="finder"] > * { width: auto; min-width: 0; }
  [data-m="finder"] > *:nth-child(n+3) { grid-column: 1 / -1; margin-left: 0; justify-content: space-between; }
  /* On a phone the toggle drops to its own full-width row instead of sitting
     beside the inputs, so there's nothing to line up with — keep it at 50px,
     which stays above the 44px minimum comfortable touch target. */
  /* 52px outer puts the two inner halves at exactly 44px once the 1px border
     and 3px thumb padding are taken off — the minimum comfortable touch target. */
  [data-m="finder"] [data-m="toggle"] { grid-column: 1 / -1; width: 100%; height: 52px; }

  /* sticky register bar */
  [data-m="bar"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 9px 18px calc(9px + env(safe-area-inset-bottom));
  }
  [data-m="bar"] > div:first-child {
    grid-column: 1 / -1;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
  }
  [data-m="barname"], [data-m="barprice"] { display: none; }
  [data-m="bar"] > div:last-child { display: contents; }
  [data-m="bar"] a { display: block; width: 100%; }
  [data-m="bar"] .btn {
    width: 100%;
    height: 46px;
    padding: 0 10px;
    font-size: 14px;
    letter-spacing: .06em;
  }
  [data-m="barspacer"] { height: 116px; }

  /* ======================================================================
     MOBILE LEGIBILITY PASS
     Phone-only type and touch-target bumps, grouped here so the whole set
     can be tuned or lifted in one place. Desktop is untouched.
     ====================================================================== */

  /* Reading text -> 16px (the mobile body convention). */
  .dashlist li,
  .sched-row__what,
  .tcard__body p,
  .sec-lede,
  .factlist li,
  .faq__a,
  .callout span,
  .award__desc,
  .travel-card p,
  .venue-addr,
  .sponsor-left p { font-size: 16px; }

  /* Secondary copy -> 15px. */
  [data-m="tfine"],
  [data-m="closed"] .closed__sub,
  [data-m="barprice"] { font-size: 15px; }

  /* Supporting labels: 12px -> 13px. */
  .stat__label,
  .field__label,
  .field__suffix,
  .divrow__mt,
  .divrow__start,
  .sec-head__num,
  .finder-card__label,
  .travel-card__label,
  .factlist__key,
  .eyebrow,
  .cd-label,
  .tcard__date,
  [data-m="barname"],
  [data-m="barlabel"],
  [data-m="closed"] .closed__label { font-size: 13px; }

  /* Micro labels up one step. */
  .cd__unit { font-size: 11px; }
  .badge--sm { font-size: 11px; height: 20px; padding: 0 7px; }
  .chip { font-size: 12px; }
  .chip--weight { font-size: 13px; }      /* most-scanned data on the site */
  .rail__num { font-size: 12px; }
  .stat__sublabel { font-size: 12px; }
  .nextup__label { font-size: 12px; }
  [data-m="teyebrow"] { font-size: 12.5px; }
  .nextup__date,
  .sched-card__head,
  .emaillink,
  [data-m="tmeta"] > span { font-size: 14px; }

  /* Every tappable control clears 44px. The 48px/46px overrides for the CTA
     pairs and the sticky bar are more specific and still win. */
  .btn { height: 46px; }
  .btn--sm { height: 44px; font-size: 14px; }
  .btn--lg { height: 54px; }
  [data-m="toggle"] { height: 52px; }     /* puts the inner halves at 44px */
  .emaillink { min-height: 44px; }

  /* Let held-together phrases wrap. At 16px they exceed the column width and
     would push the page sideways. */
  .keep-together { white-space: normal; }
}

@media (max-width: 560px) {
  .h1 { font-size: 30px; }
  .h2, .h2--sec { font-size: 23px; }
  [data-m="badge"] { height: 186px; }
  [data-m="cd"] .cd__num { font-size: 22px; }
  [data-m="cd"] .cd__unit { font-size: 11px; letter-spacing: .1em; margin-top: 4px; }
}