/* ─────────────────────────────────────────────────────────────
   DoIT design system — v3
   Merges A (Matchday Zine) + B (Pitch Side) as light/dark modes
   of one unified system.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&family=Oswald:wght@600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── COLOR TOKENS ───────────────────────────────────────────── */
:root {
  /* Brand constants — 26/27 kit palette.
     Sampled from the kit artwork; nudge these three if the supplier file
     shows different values. Everything else on the site derives from them. */
  --gold:        #B89436; /* antique gold — kit body, the club's mark */
  --red:         #941D2A; /* kit red — centre stripe and lion band.
                             Read off swatch 3 of the supplier's fabric palette
                             card (WA, DoIt Lions UNIFORM group, Bilal 27 Aug),
                             white-balanced against the sheet behind it. Swatch 3
                             is the recorded choice: Gareth, Bilal, Alex and Dee
                             all voted 3 that afternoon. This is dyed material,
                             not a render, so it is the best source we have. */
  --navy:        #1D233B; /* kit navy — used in both themes */

  /* --yellow is the pre-26/27 name for the accent, kept so existing
     rules and .pill--yellow keep working. Prefer --gold in new code. */
  --yellow:      var(--gold);
  --yellow-ink:  var(--navy); /* text colour to use on gold — 6.1:1 */

  /* Status colours */
  --green-pitch: #1f7a3a;
  --win:  #1F8A5B;
  --loss: #B23A48;
  --draw: #5A5F8A;

  /* Easings */
  --ease:    cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Type scale */
  --t-mono:    'JetBrains Mono', ui-monospace, monospace;
  --t-body:    'DM Sans', system-ui, sans-serif;
  --t-display: 'Anton', 'Bebas Neue', sans-serif;
  --t-meta:    'Bebas Neue', 'Anton', sans-serif;
  /* Wordmark only. Bebas Neue and Anton are the display faces, but Bebas
     has no lowercase glyphs, so "DoIT Lions" rendered as "DOIT LIONS" and
     the camel case in the club's own name was lost. Oswald is the same
     condensed gothic lane at a near-identical width and colour, and has a
     real lowercase. Scoped to the wordmark deliberately: --t-meta still
     drives team names, section heads and stat labels, and those are all
     set in caps anyway, so they gain nothing and would only drift. */
  --t-wordmark: 'Oswald', 'Bebas Neue', 'Anton', sans-serif;
  --t-italic:  'Instrument Serif', Georgia, serif;

  /* Layout */
  --gutter: 18px;
  --radius: 14px;
  --radius-sm: 8px;
  --nav-h: 64px;
}

/* ── LIGHT MODE (Matchday Zine) ─────────────────────────────── */
:root, [data-theme="light"] {
  --canvas:    #F7F4EE;
  --canvas-2:  #EFEAE0;
  --canvas-3:  #E4DED0;
  --paper:     #FFFFFF;
  --paper-2:   #FDFBF6;

  --ink:       #1D233B;
  --ink-2:     #454B66;
  --ink-3:     rgba(29,35,59,0.55);
  --ink-4:     rgba(29,35,59,0.35);

  --rule:      rgba(29,35,59,0.14);
  --rule-2:    rgba(29,35,59,0.08);

  --shadow-card: 0 1px 0 rgba(29,35,59,0.04), 0 2px 4px rgba(29,35,59,0.04);
  --shadow-hero: 0 12px 30px rgba(29,35,59,0.18), 0 2px 6px rgba(29,35,59,0.08);

  --hero-overlay: linear-gradient(180deg, rgba(29,35,59,0) 30%, rgba(29,35,59,0.85) 100%);
  --halftone:    radial-gradient(rgba(29,35,59,0.12) 1.2px, transparent 1.4px);
  --grain-mix:   multiply;
}

/* ── DARK MODE (Pitch Side) ─────────────────────────────────── */
[data-theme="dark"] {
  --canvas:    #141931;
  --canvas-2:  #1D233B;
  --canvas-3:  #2A3252;
  --paper:     rgba(29,35,59,0.55);
  --paper-2:   rgba(29,35,59,0.35);

  --ink:       #F7F4EE;
  --ink-2:     #CDCBC2;
  --ink-3:     rgba(247,244,238,0.55);
  --ink-4:     rgba(247,244,238,0.35);

  --rule:      rgba(247,244,238,0.15);
  --rule-2:    rgba(247,244,238,0.08);

  --shadow-card: 0 1px 0 rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-hero: 0 0 40px rgba(0,0,0,0.5), inset 0 0 60px rgba(0,0,0,0.3);

  --hero-overlay: linear-gradient(180deg, rgba(20,25,49,0) 30%, rgba(20,25,49,0.95) 100%);
  --halftone:    radial-gradient(rgba(247,244,238,0.10) 1.2px, transparent 1.4px);
  --grain-mix:   overlay;
}

/* Auto from system preference, ONLY if user hasn't manually set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(:has(body[data-theme])) {
    --canvas:    #141931;
    --canvas-2:  #1D233B;
    --canvas-3:  #2A3252;
    --paper:     rgba(29,35,59,0.55);
    --paper-2:   rgba(29,35,59,0.35);
    --ink:       #F7F4EE;
    --ink-2:     #CDCBC2;
    --ink-3:     rgba(247,244,238,0.55);
    --ink-4:     rgba(247,244,238,0.35);
    --rule:      rgba(247,244,238,0.15);
    --rule-2:    rgba(247,244,238,0.08);
    --shadow-card: 0 1px 0 rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
    --shadow-hero: 0 0 40px rgba(0,0,0,0.5), inset 0 0 60px rgba(0,0,0,0.3);
    --hero-overlay: linear-gradient(180deg, rgba(20,25,49,0) 30%, rgba(20,25,49,0.95) 100%);
    --halftone:    radial-gradient(rgba(247,244,238,0.10) 1.2px, transparent 1.4px);
    --grain-mix:   overlay;
  }
}

/* ── BASE ───────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

html, body.doit-body {
  background: var(--canvas);
}

body {
  font-family: var(--t-body);
  color: var(--ink);
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mobile-width shell — centred on larger viewports with a subtle frame */
.shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--canvas);
  position: relative;
}

@media (min-width: 540px) {
  body.doit-body {
    background: var(--canvas-2);
  }
  .shell {
    box-shadow:
      0 0 0 1px var(--rule),
      0 30px 80px rgba(0,0,0,0.18);
  }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ── TYPOGRAPHY UTILS ──────────────────────────────────────── */
.t-eyebrow {
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-eyebrow--accent { color: var(--yellow); }

.t-headline {
  font-family: var(--t-display);
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.t-display {
  font-family: var(--t-display);
  letter-spacing: -0.005em;
  line-height: 0.95;
}

.t-meta {
  font-family: var(--t-meta);
  letter-spacing: 0.05em;
}

.t-italic {
  font-family: var(--t-italic);
  font-style: italic;
  font-weight: 400;
}

.t-mono {
  font-family: var(--t-mono);
  letter-spacing: 0.1em;
}

/* ── SHARED COMPONENTS ─────────────────────────────────────── */

/* Yellow accent block — used for hero accents, callouts, CTAs */
.y-block {
  background: var(--yellow);
  color: var(--yellow-ink);
}

/* Paper card */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
[data-theme="dark"] .card { backdrop-filter: blur(8px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .card { backdrop-filter: blur(8px); }
}

/* Small pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--canvas);
}
.pill--yellow { background: var(--yellow); color: var(--yellow-ink); }
.pill--ghost  { background: transparent; color: var(--ink-3); border: 1px solid var(--rule); }

/* Form indicator dots (W/D/L) */
.form-dots { display: inline-flex; gap: 4px; }
.form-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--t-mono);
  font-size: 8px;
  font-weight: 700;
  color: #fff;
}
.form-dot--w { background: var(--win); }
.form-dot--d { background: var(--draw); }
.form-dot--l { background: var(--loss); }

/* Site header (top bar with crest + theme toggle) */
.site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(8px);
}
.site-bar__crest {
  display: flex;
  align-items: center;
  gap: 8px;
}
.crest-badge {
  height: 30px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
.site-bar__title {
  font-family: var(--t-wordmark);
  font-weight: 600;
  font-size: 14px;
  /* Oswald sets a touch wider than Bebas at the same size, so the tracking
     comes back slightly to keep the bar the same length. */
  letter-spacing: 0.11em;
  color: var(--ink);
}
.site-bar__actions { display: flex; gap: 6px; align-items: center; }

/* Theme toggle button */
.theme-toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); background: var(--paper-2); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

/* Page header */
.page-header {
  padding: 22px 16px 16px;
  border-bottom: 1px solid var(--rule);
}
.page-header__kicker {
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.page-header__title {
  font-family: var(--t-display);
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.page-header__sub {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.3;
}

/* Section heading */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 16px 10px;
}
.section-head__title {
  font-family: var(--t-display);
  font-size: 22px;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
}
.section-head__link {
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 1px;
}

/* Bottom nav — constrained to shell on larger viewports */
.bnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  margin: 0 auto;
  max-width: 480px;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--canvas);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 100;
  backdrop-filter: blur(10px);
}
.bnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--ink-3);
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease);
}
.bnav__icon {
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bnav__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bnav__item--active { color: var(--ink); }
.bnav__item--active .bnav__icon::before {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  background: var(--yellow);
  border-radius: 50%;
  margin-top: 26px;
  box-shadow: 0 0 8px var(--yellow);
}
.bnav__item--active .bnav__icon { position: relative; }

/* ── MORE SHEET ────────────────────────────────────────────── */
.more-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 110;
  pointer-events: none;
  transition: background-color .25s var(--ease);
}
.more-sheet-backdrop[data-open="true"] {
  background: rgba(0,0,0,0.5);
  pointer-events: auto;
}

.more-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  margin: 0 auto;
  max-width: 480px;
  background: var(--canvas);
  border-top: 2px solid var(--yellow);
  border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  z-index: 120;
  transform: translateY(100%);
  transition: transform .35s var(--ease-out);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
}
.more-sheet[data-open="true"] {
  transform: translateY(0);
}

.more-sheet__grab {
  width: 40px;
  height: 4px;
  background: var(--ink-3);
  border-radius: 2px;
  margin: 6px auto 14px;
  opacity: 0.4;
}

.more-sheet__title {
  font-family: var(--t-display);
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 6px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.more-sheet__title-sub {
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.more-sheet__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.more-sheet__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.more-sheet__item:hover {
  transform: translateY(-1px);
  border-color: var(--ink-3);
}
.more-sheet__item--active {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
}
.more-sheet__item-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--canvas-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ink);
  flex-shrink: 0;
}
.more-sheet__item--active .more-sheet__item-icon {
  background: var(--yellow);
  color: var(--yellow-ink);
}
.more-sheet__item-text {
  flex: 1;
  font-family: var(--t-meta);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.more-sheet__divider {
  height: 1px;
  background: var(--rule);
  margin: 8px 0 12px;
}

.more-sheet__admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--canvas);
  text-decoration: none;
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.more-sheet__admin .lock-icon {
  width: 14px; height: 14px;
  color: var(--yellow);
}
.more-sheet__admin span {
  color: var(--yellow);
}

@media (prefers-reduced-motion: reduce) {
  .more-sheet,
  .more-sheet-backdrop { transition: none; }
}

/* Halftone overlay (zine accent in light, subtle dot grid in dark) */
.halftone {
  position: absolute;
  inset: 0;
  background-image: var(--halftone), var(--halftone);
  background-size: 6px 6px, 10px 10px;
  background-position: 0 0, 3px 5px;
  opacity: 0.5;
  pointer-events: none;
}

/* ── Inline cross-link card ────────────────────────────────── */
.inline-links {
  margin: 12px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inline-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.inline-link:hover { transform: translateY(-1px); border-color: var(--ink-3); }
[data-theme="dark"] .inline-link:hover,
:root:not([data-theme]) .inline-link:hover {
  box-shadow: 0 0 18px rgba(184,148,54,0.12);
}
.inline-link__label {
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--yellow);
  text-transform: uppercase;
  white-space: nowrap;
}
.inline-link__text {
  flex: 1;
  font-family: var(--t-meta);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.inline-link__arrow {
  font-family: var(--t-display);
  font-size: 16px;
  color: var(--yellow);
}

/* Yellow rule (used as section divider accent) */
.y-rule {
  height: 3px;
  background: var(--yellow);
  width: 36px;
  border: 0;
}

/* ── GLOW ──────────────────────────────────────────────────── */
/* Yellow glow for dramatic accents — only visible in dark mode where
   it actually feels like a glow against the navy canvas. Light mode
   stays clean (no shadow). */
.t-glow {
  /* default: no glow (light mode safe) */
}
[data-theme="dark"] .t-glow {
  text-shadow:
    0 0 18px rgba(184,148,54,0.55),
    0 0 40px rgba(184,148,54,0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .t-glow {
    text-shadow:
      0 0 18px rgba(184,148,54,0.55),
      0 0 40px rgba(184,148,54,0.22);
  }
}

/* Subtler glow — for smaller type that shouldn't shout */
.t-glow--soft {}
[data-theme="dark"] .t-glow--soft {
  text-shadow: 0 0 10px rgba(184,148,54,0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .t-glow--soft {
    text-shadow: 0 0 10px rgba(184,148,54,0.45);
  }
}

/* Surface glow — for yellow blocks / pills / badges */
.bg-glow {}
[data-theme="dark"] .bg-glow {
  box-shadow:
    0 0 24px rgba(184,148,54,0.30),
    0 0 60px rgba(184,148,54,0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .bg-glow {
    box-shadow:
      0 0 24px rgba(184,148,54,0.30),
      0 0 60px rgba(184,148,54,0.10);
  }
}

/* ── REVEAL ANIMATIONS ─────────────────────────────────────── */
/* Failsafe: elements are visible by default. Only when JS adds the
   .has-anim class to body does the animation kick in. If JS fails,
   nothing animates — content still renders. */
@keyframes doit-rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes doit-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.has-anim .rev {
  animation: doit-rise-in .55s var(--ease-out) both;
}
body.has-anim .rev[data-d="1"] { animation-delay: .03s; }
body.has-anim .rev[data-d="2"] { animation-delay: .09s; }
body.has-anim .rev[data-d="3"] { animation-delay: .16s; }
body.has-anim .rev[data-d="4"] { animation-delay: .24s; }
body.has-anim .rev[data-d="5"] { animation-delay: .32s; }
body.has-anim .rev[data-d="6"] { animation-delay: .40s; }
body.has-anim .rev[data-d="7"] { animation-delay: .48s; }
body.has-anim .rev[data-d="8"] { animation-delay: .56s; }

body.has-anim .fade {
  animation: doit-fade-in .45s var(--ease-out) both;
}

/* Subtle yellow flash for the underline on first paint */
@keyframes doit-yellow-pull {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
body.has-anim .pull-bar::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--yellow);
  margin-top: 8px;
  transform-origin: left;
  animation: doit-yellow-pull .6s var(--ease-out) .25s both;
}

@media (prefers-reduced-motion: reduce) {
  body.has-anim .rev,
  body.has-anim .fade,
  body.has-anim .pull-bar::after { animation: none; }
}

/* ── MICRO-INTERACTIONS ────────────────────────────────────── */

/* Theme toggle — gentle rotation feedback */
.theme-toggle svg { transition: transform .35s var(--ease); }
.theme-toggle:active svg { transform: rotate(-30deg) scale(0.9); }

/* Form dots — subtle bounce on entry */
@keyframes doit-dot-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
body.has-anim .tf-dot {
  animation: doit-dot-pop .35s var(--ease-out) both;
}
body.has-anim .tf-dot:nth-child(1) { animation-delay: .35s; }
body.has-anim .tf-dot:nth-child(2) { animation-delay: .42s; }
body.has-anim .tf-dot:nth-child(3) { animation-delay: .49s; }
body.has-anim .tf-dot:nth-child(4) { animation-delay: .56s; }
body.has-anim .tf-dot:nth-child(5) { animation-delay: .63s; }
@media (prefers-reduced-motion: reduce) { body.has-anim .tf-dot { animation: none; } }

/* Leaderboard rows — slide in */
body.has-anim .lb-row {
  animation: doit-rise-in .45s var(--ease-out) both;
}
body.has-anim .lb-row:nth-child(2) { animation-delay: .15s; }
body.has-anim .lb-row:nth-child(3) { animation-delay: .20s; }
body.has-anim .lb-row:nth-child(4) { animation-delay: .25s; }
body.has-anim .lb-row:nth-child(5) { animation-delay: .30s; }
body.has-anim .lb-row:nth-child(6) { animation-delay: .35s; }
body.has-anim .lb-row:nth-child(7) { animation-delay: .40s; }
body.has-anim .lb-row:nth-child(8) { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { body.has-anim .lb-row { animation: none; } }

/* Album hover lift (gallery) — kept here so it's system-level */
.album { transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.album:hover {
  border-color: var(--ink-3);
  box-shadow: 0 8px 24px rgba(29,35,59,0.10);
}
[data-theme="dark"] .album:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(184,148,54,0.15);
}

/* ── SPONSOR BADGE — shared component ─────────────────────── */
/* Navy container works for all logo types (white, coloured, transparent) */
.sp-badge {
  background: var(--navy);
  border: 1px solid rgba(184,148,54,0.15);
  border-radius: var(--radius-sm);
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s var(--ease);
  flex-shrink: 0;
}
.sp-badge:hover { border-color: rgba(184,148,54,0.35); }
.sp-badge img {
  max-height: 22px;
  max-width: 88px;
  object-fit: contain;
  display: block;
}
.sp-badge__img--invert {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.sp-badge--text {
  font-family: var(--t-meta);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #F7F4EE;
  padding: 0 14px;
  white-space: nowrap;
}
.sp-badge--main {
  height: 46px;
}
.sp-badge--main img { max-height: 26px; max-width: 96px; }

/* Row of sponsor badges */
.sp-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sp-badge-row--tier1 .sp-badge { flex: 1; }

/* Kit sponsor row — single row desktop, wraps on mobile */
.sp-badge-row--kit {
  flex-wrap: nowrap;
}
.sp-badge-row--kit .sp-badge--kit {
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .sp-badge-row--kit {
    flex-wrap: wrap;
  }
  .sp-badge-row--kit .sp-badge--kit {
    flex: 1 1 calc(33% - 4px);
    min-width: calc(33% - 4px);
  }
}

/* ── DESKTOP NAV (injected by desktop-nav.js) ─────────────── */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.desktop-nav__item {
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 7px 12px;
  border-radius: 4px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.desktop-nav__item:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.desktop-nav__item--active {
  color: var(--yellow);
}

/* ── DESKTOP (≥ 1024px) ────────────────────────────────────── */
@media (min-width: 1024px) {
  body.doit-body {
    padding-bottom: 0;
  }
  .shell {
    max-width: 1200px;
    box-shadow: none;
  }
  .bnav { display: none; }
  .more-sheet,
  .more-sheet-backdrop { display: none !important; }
  .desktop-nav { display: flex; }

  /* Site bar gets full-shell padding on desktop */
  .site-bar {
    padding: 12px 32px;
  }
  /* Pages that use var(--gutter) for horizontal spacing — widen on desktop */
  .page-header { padding-left: 32px; padding-right: 32px; }
  .section-head { padding-left: 32px; padding-right: 32px; }
  .inline-links { margin-left: 32px; margin-right: 32px; }
}

/* Reveal animation primitives — DISABLED for now.
   We were hitting browser quirks where the animations stalled at opacity:0.
   Re-enable as a polish pass once the structural work is settled.

@keyframes doit-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: doit-rise-in .55s var(--ease-out) both; }
.rise[data-delay="1"] { animation-delay: .05s; }
…
*/