/* ==========================================================================
   Asia Premier Pickleball League — design system
   Dark stadium base, electric volt accent, heavy condensed display type.
   ========================================================================== */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1.1rem + 4.4vw, 5rem);
  --text-hero: clamp(3rem, 1rem + 8vw, 8.5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* Surfaces — stadium dark */
  --color-bg:#08090A;
  --color-surface:#0E1113;
  --color-surface-2:#14181A;
  --color-surface-3:#1B2023;
  --color-line:rgba(255,255,255,.10);
  --color-line-strong:rgba(255,255,255,.20);

  /* Text */
  --color-text:#EDF1EC;
  --color-text-muted:#9BA5A0;
  --color-text-faint:#6B7570;
  --color-ink:#08090A;

  /* Accents */
  --color-volt:#C8F531;
  --color-volt-dim:#9BC419;
  --color-magenta:#FF2E77;
  --color-cyan:#3FD7F5;

  --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-full:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --transition-interactive:200ms var(--ease);

  --content:1240px;
  --content-narrow:760px;

  --font-display:'Anton','Arial Narrow',sans-serif;
  --font-body:'Satoshi','Inter','Helvetica Neue',sans-serif;
}

/* ---------- typography primitives ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-volt);
}
.eyebrow--muted { color: var(--color-text-faint); }
.lede { font-size: var(--text-lg); color: var(--color-text-muted); line-height:1.5; }
.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- layout ---------- */
.wrap { width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--space-5); }
@media (min-width:900px){ .wrap{ padding-inline:var(--space-8);} }
.section { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); position:relative; }
.section--tight { padding-block: clamp(var(--space-12), 5vw, var(--space-20)); }
.section-head { display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-8); align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-10); }
.section-head h2 { font-size:var(--text-2xl); }
.section-head p { max-width:46ch; }
.rule { height:1px; background:var(--color-line); border:0; }

/* court-line background texture */
.courtlines::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 75%);
}

/* ---------- header ---------- */
.skip { position:absolute; left:var(--space-4); top:-4rem; z-index:200; background:var(--color-volt); color:var(--color-ink); padding:var(--space-2) var(--space-4); font-weight:700; }
.skip:focus { top:var(--space-3); }

.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,10,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-line);
}
.header-inner { display:flex; align-items:center; gap:var(--space-6); height:68px; }
.brand { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; flex:0 0 auto; }
.brand svg { width:34px; height:34px; color:var(--color-volt); }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand-text b { font-family:var(--font-display); font-size:1.35rem; letter-spacing:.02em; font-weight:400; }
.brand-text span { font-size:.5625rem; letter-spacing:.2em; color:var(--color-text-faint); text-transform:uppercase; margin-top:3px; }

.nav { margin-left:auto; display:flex; align-items:center; gap:var(--space-6); }
.nav a {
  text-decoration:none; font-size:var(--text-sm); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--color-text-muted); position:relative; padding-block:var(--space-2);
}
.nav a:hover { color:var(--color-text); }
.nav a[aria-current="page"] { color:var(--color-text); }
.nav a[aria-current="page"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--color-volt);
}
.nav a.nav-cta { margin-left:var(--space-2); color:var(--color-bg); }
.nav a.nav-cta:hover { color:var(--color-bg); }
.nav-toggle { display:none; margin-left:auto; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--color-line); border-radius:var(--radius-md); color:var(--color-text); }

@media (max-width:900px){
  .nav {
    position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--color-surface); border-bottom:1px solid var(--color-line);
    padding:var(--space-2) var(--space-5) var(--space-6); margin-left:0;
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:all 180ms var(--ease);
  }
  .nav[data-open="true"]{ transform:none; opacity:1; visibility:visible; }
  .nav a { padding:var(--space-4) 0; border-bottom:1px solid var(--color-line); font-size:1rem; }
  .nav a[aria-current="page"]::after{ display:none; }
  .nav a[aria-current="page"]{ color:var(--color-volt); }
  .nav a.nav-cta { margin:var(--space-5) 0 0; text-align:center; border-bottom:0; color:var(--color-bg); }
  .nav-toggle { display:flex; }
}

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.85rem 1.4rem; border-radius:var(--radius-sm); text-decoration:none; border:1px solid transparent;
  min-height:44px;
}
.btn--primary { background:var(--color-volt); color:var(--color-ink); }
.btn--primary:hover { background:#DCFF4F; transform:translateY(-1px); }
.btn--ghost { border-color:var(--color-line-strong); color:var(--color-text); background:rgba(255,255,255,.02); }
.btn--ghost:hover { border-color:var(--color-volt); color:var(--color-volt); }
.btn--sm { padding:.55rem 1rem; min-height:38px; font-size:var(--text-xs); }

/* ---------- badges / chips ---------- */
.badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .6rem; border:1px solid var(--color-line-strong); border-radius:var(--radius-sm); color:var(--color-text-muted);
}
.badge--volt { color:var(--color-ink); background:var(--color-volt); border-color:var(--color-volt); }
.badge--mag { color:var(--color-magenta); border-color:color-mix(in oklab, var(--color-magenta) 45%, transparent); }
.badge--live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--color-magenta); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------- hero ---------- */
.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--color-line); }
.hero-media { position:absolute; inset:0; z-index:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-media::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(8,9,10,.95) 0%, rgba(8,9,10,.78) 45%, rgba(8,9,10,.35) 100%),
    linear-gradient(to top, var(--color-bg) 2%, rgba(8,9,10,.15) 60%);
}
.hero-inner { position:relative; z-index:1; padding-block: clamp(var(--space-16), 12vw, var(--space-32)); }
.hero h1 { font-size:var(--text-hero); max-width:15ch; }
.hero h1 em { font-style:normal; color:var(--color-volt); }
.hero .lede { max-width:52ch; margin-top:var(--space-6); }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); }
.hero-meta { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-8); margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid var(--color-line); }
.hero-meta div { min-width:104px; }
.hero-meta b { display:block; font-family:var(--font-display); font-size:var(--text-xl); line-height:1; letter-spacing:0; }
.hero-meta span { font-size:var(--text-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-faint); }

/* page hero (interior) */
.pagehero { position:relative; overflow:hidden; border-bottom:1px solid var(--color-line); }
.pagehero .hero-media img { object-position:center 40%; }
.pagehero-inner { position:relative; z-index:1; padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
.pagehero h1 { font-size:var(--text-3xl); max-width:16ch; margin-top:var(--space-3); }
.pagehero p { max-width:56ch; margin-top:var(--space-4); color:var(--color-text-muted); }

/* ---------- ticker ---------- */
.ticker { border-bottom:1px solid var(--color-line); background:var(--color-surface); overflow:hidden; position:relative; }
.ticker-track { display:flex; width:max-content; animation:slide 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-group { display:flex; align-items:center; }
.ticker-item {
  display:flex; align-items:center; gap:var(--space-3); padding:.7rem var(--space-5);
  font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; color:var(--color-text-muted);
  border-right:1px solid var(--color-line);
}
.ticker-item b { color:var(--color-text); font-weight:700; }
.ticker-item i { font-style:normal; color:var(--color-volt); font-weight:700; }
@keyframes slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; overflow-x:auto; }
  .ticker { overflow-x:auto; }
}

/* ---------- cards / grids ---------- */
.grid { display:grid; gap:var(--space-4); }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid--4 { grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .grid--4 { grid-template-columns:repeat(3,1fr);} }
@media (min-width:1000px){ .grid--4 { grid-template-columns:repeat(4,1fr);} }
.grid--pair { grid-template-columns:1fr; }
@media (min-width:760px){ .grid--pair { grid-template-columns:repeat(2,1fr);} }

.card {
  background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-md);
  padding:var(--space-6);
}
.card--pad-lg { padding:var(--space-8); }

/* format steps */
.steps { display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); counter-reset:step; }
.step { position:relative; background:var(--color-surface); border:1px solid var(--color-line); border-top:2px solid var(--color-volt); padding:var(--space-6) var(--space-5) var(--space-5); }
.step-n { font-family:var(--font-display); font-size:2.75rem; line-height:.8; color:var(--color-volt); }
.step h3 { font-family:var(--font-display); font-weight:400; font-size:1.375rem; text-transform:uppercase; letter-spacing:.01em; margin-top:var(--space-3); }
.step p { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-2); }
.step-time { position:absolute; top:var(--space-4); right:var(--space-4); font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; color:var(--color-text-faint); }

/* run of night timeline */
.runsheet { display:grid; gap:0; border:1px solid var(--color-line); background:var(--color-surface); }
.runsheet-row { display:grid; grid-template-columns:96px 1fr; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-line); align-items:baseline; }
.runsheet-row:last-child { border-bottom:0; }
.runsheet-row b { font-family:var(--font-display); font-size:1.25rem; color:var(--color-volt); letter-spacing:.02em; }
.runsheet-row span { font-size:var(--text-sm); color:var(--color-text-muted); }

/* stat blocks */
.stats { display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.stat { border-left:2px solid var(--color-volt); padding-left:var(--space-4); }
.stat b { display:block; font-family:var(--font-display); font-size:clamp(2.5rem,6vw,4rem); line-height:.85; }
.stat span { display:block; font-size:var(--text-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-faint); margin-top:var(--space-2); }

/* ---------- fixtures ---------- */
.fixture {
  background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-md);
  overflow:hidden;
}
.fixture-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-line); background:var(--color-surface-2); }
.fixture-top .wk { font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-volt); white-space:nowrap; }
.fixture-top .dt { font-size:var(--text-xs); letter-spacing:.08em; white-space:nowrap; text-transform:uppercase; color:var(--color-text-faint); }
.fixture-body { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-3); padding:var(--space-5) var(--space-4); }
.fx-team { display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.fx-team:last-child { flex-direction:row-reverse; text-align:right; }
.fx-team .crest { width:38px; height:38px; flex:0 0 auto; }
.fx-team span { font-family:var(--font-display); font-size:1.0625rem; line-height:1.05; text-transform:uppercase; letter-spacing:.01em; overflow-wrap:break-word; word-break:normal; hyphens:none; }
.fx-v { font-family:var(--font-display); font-size:.875rem; color:var(--color-text-faint); letter-spacing:.1em; }
.fixture-foot { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-4); padding:var(--space-3) var(--space-4); border-top:1px solid var(--color-line); font-size:var(--text-xs); color:var(--color-text-faint); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:420px){
  .fx-team span { font-size:.9375rem; }
  .fixture-body { padding-inline:var(--space-3); gap:var(--space-2); }
}

/* ---------- tables ---------- */
.table-card { border:1px solid var(--color-line); background:var(--color-surface); min-width:0; overflow:hidden; }
.table-title { margin:0; padding:var(--space-4) var(--space-5); font-size:1.375rem; text-transform:uppercase; letter-spacing:.02em; border-bottom:1px solid var(--color-line); background:var(--color-surface-2); }
.table-wrap { overflow-x:auto; }
table.standings { min-width:600px; font-variant-numeric:tabular-nums; }
table.standings th, table.standings td { padding:var(--space-3) var(--space-3); text-align:right; font-size:var(--text-sm); border-bottom:1px solid var(--color-line); }
table.standings th { font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-faint); font-weight:700; }
table.standings th:first-child, table.standings td:first-child { text-align:left; width:34px; color:var(--color-text-faint); }
table.standings th:nth-child(2), table.standings td:nth-child(2) { text-align:left; }
table.standings tbody tr:last-child td { border-bottom:0; }
table.standings tbody tr:hover td { background:rgba(200,245,49,.04); }
.tm-cell { display:flex; align-items:center; gap:var(--space-3); }
.tm-cell .crest { width:26px; height:26px; flex:0 0 auto; }
.tm-cell b { font-weight:600; font-size:var(--text-sm); white-space:nowrap; }
td.pts { font-family:var(--font-display); font-size:1.125rem; color:var(--color-volt); letter-spacing:.02em; }

/* ---------- team cards ---------- */
.team-card { background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-md); overflow:hidden; transition:border-color var(--transition-interactive), transform var(--transition-interactive); }
.team-card:hover { border-color:color-mix(in oklab, var(--tm,#C8F531) 55%, transparent); transform:translateY(-2px); }
.team-card-head { display:flex; gap:var(--space-4); padding:var(--space-5); border-bottom:1px solid var(--color-line); align-items:flex-start; background:linear-gradient(120deg, color-mix(in oklab, var(--tm,#C8F531) 9%, transparent), transparent 60%); }
.team-card-head .crest { width:58px; height:58px; flex:0 0 auto; }
.team-card-head h3 { font-family:var(--font-display); font-weight:400; font-size:1.5rem; text-transform:uppercase; letter-spacing:.01em; line-height:.95; }
.team-card-head .idl { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-2); }
.team-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--space-4); padding:var(--space-5); }
.team-meta dt { font-size:var(--text-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-faint); }
.team-meta dd { font-size:var(--text-sm); margin-top:var(--space-1); }
details.roster { border-top:1px solid var(--color-line); }
details.roster summary { list-style:none; cursor:pointer; padding:var(--space-4) var(--space-5); font-size:var(--text-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-muted); display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); min-height:44px; }
details.roster summary::-webkit-details-marker { display:none; }
details.roster summary:hover { color:var(--color-volt); }
details.roster summary .chev { transition:transform var(--transition-interactive); }
details.roster[open] summary .chev { transform:rotate(180deg); }
.roster-list { padding:0 var(--space-5) var(--space-5); }
.roster-row { display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-2) 0; border-bottom:1px dashed var(--color-line); font-size:var(--text-sm); }
.roster-row:last-child { border-bottom:0; }
.roster-row span { color:var(--color-text-muted); }
.roster-row .dupr { font-variant-numeric:tabular-nums; color:var(--color-volt); font-weight:700; }
.founding { font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--color-ink); background:var(--color-volt); padding:.15rem .45rem; display:inline-block; margin-bottom:var(--space-2); font-weight:700; }

/* ---------- tabs / filters ---------- */
.filters { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.filter-label { font-size:var(--text-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-faint); margin-right:var(--space-2); }
.chip {
  font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .85rem; border:1px solid var(--color-line-strong); border-radius:var(--radius-sm);
  color:var(--color-text-muted); background:transparent; min-height:38px;
}
.chip:hover { color:var(--color-text); border-color:var(--color-text-faint); }
.chip[aria-selected="true"], .chip[aria-pressed="true"] { background:var(--color-volt); border-color:var(--color-volt); color:var(--color-ink); }

/* ---------- bracket ---------- */
.bracket { display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.final { border:1px solid var(--color-line); background:var(--color-surface); padding:var(--space-6) var(--space-5); position:relative; overflow:hidden; }
.final::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--fc,var(--color-volt)); }
.final h3 { font-family:var(--font-display); font-weight:400; font-size:1.5rem; text-transform:uppercase; }
.final .who { font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--fc,var(--color-volt)); margin-top:var(--space-2); font-weight:700; }
.final p { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-3); }

/* ---------- sponsors ---------- */
.logo-wall { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); border:1px solid var(--color-line); }
.logo-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-8) var(--space-4); border-right:1px solid var(--color-line); border-bottom:1px solid var(--color-line); text-align:center; }
.logo-cell b { font-family:var(--font-display); font-size:1.25rem; text-transform:uppercase; letter-spacing:.02em; color:var(--color-text); }
.logo-cell span { font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-faint); }
.logo-cell .mark { color:var(--color-volt); display:block; }
.logo-cell svg { width:40px; height:40px; }
.logo-cell b { margin-top:var(--space-1); }

.tier { display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-line); padding:var(--space-6); }
.tier--feature { border-color:var(--color-volt); background:linear-gradient(180deg, rgba(200,245,49,.07), transparent 40%); }
.tier h3 { font-family:var(--font-display); font-weight:400; font-size:var(--text-xl); text-transform:uppercase; }
.tier .price { font-size:var(--text-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--color-volt); margin-top:var(--space-2); font-weight:700; }
.tier ul { list-style:none; margin-top:var(--space-5); display:grid; gap:var(--space-3); }
.tier li { display:flex; gap:var(--space-3); font-size:var(--text-sm); color:var(--color-text-muted); }
.tier li::before { content:"—"; color:var(--color-volt); flex:0 0 auto; }
.tier .btn { margin-top:var(--space-6); }

/* ---------- forms ---------- */
.form { display:grid; gap:var(--space-5); }
.field { display:grid; gap:var(--space-2); }
.field label { font-size:var(--text-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); }
.field input, .field select, .field textarea {
  background:var(--color-surface-2); border:1px solid var(--color-line-strong); border-radius:var(--radius-sm);
  padding:.8rem .9rem; color:var(--color-text); width:100%; min-height:46px; font-size:var(--text-base);
}
.field textarea { min-height:120px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder { color:var(--color-text-faint); }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--color-volt); outline:none; box-shadow:0 0 0 3px rgba(200,245,49,.16); }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color:var(--color-magenta); }
.err { font-size:var(--text-xs); color:var(--color-magenta); min-height:1em; letter-spacing:.04em; }
.field-row { display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.check { display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-sm); color:var(--color-text-muted); }
.check input { width:20px; height:20px; min-height:0; flex:0 0 auto; margin-top:2px; accent-color:var(--color-volt); }
.success-panel { border:1px solid var(--color-volt); background:linear-gradient(180deg, rgba(200,245,49,.10), transparent 60%); padding:var(--space-8); }
.success-panel h3 { font-family:var(--font-display); font-weight:400; font-size:var(--text-xl); text-transform:uppercase; margin-top:var(--space-3); }
.success-panel p { color:var(--color-text-muted); margin-top:var(--space-3); }
[hidden] { display:none !important; }

/* ---------- key dates ---------- */
.dates { border-top:1px solid var(--color-line); }
.date-row { display:grid; grid-template-columns:150px 1fr; gap:var(--space-4); padding:var(--space-4) 0; border-bottom:1px solid var(--color-line); align-items:baseline; }
.date-row b { font-family:var(--font-display); font-size:1.25rem; color:var(--color-volt); letter-spacing:.02em; }
.date-row div span { display:block; font-size:var(--text-sm); color:var(--color-text-muted); }
.date-row div strong { font-weight:600; }
@media (max-width:540px){ .date-row { grid-template-columns:1fr; gap:var(--space-1);} }

/* ---------- CTA band ---------- */
.cta-band { position:relative; overflow:hidden; border-block:1px solid var(--color-line); }
.cta-band img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; }
.cta-band::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,9,10,.95), rgba(8,9,10,.55)); }
.cta-band .wrap { position:relative; z-index:2; }
.cta-band h2 { font-size:var(--text-2xl); max-width:16ch; }

/* ---------- footer ---------- */
.site-footer { border-top:1px solid var(--color-line); background:var(--color-surface); padding-block:var(--space-16) var(--space-8); margin-top:0; }
.footer-grid { display:grid; gap:var(--space-8); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.footer-grid h4 { font-size:var(--text-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:var(--space-4); }
.footer-grid ul { list-style:none; display:grid; gap:var(--space-2); }
.footer-grid a { font-size:var(--text-sm); color:var(--color-text-muted); text-decoration:none; }
.footer-grid a:hover { color:var(--color-volt); }
.footer-brand svg { width:40px; height:40px; color:var(--color-volt); }
.footer-brand p { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-4); max-width:34ch; }
.footer-domain { font-family:var(--font-body); font-weight:700; font-size:var(--text-base); letter-spacing:.02em; margin-top:var(--space-5); display:inline-block; text-decoration:none; color:var(--color-text); }
.footer-domain:hover { color:var(--color-volt); }
.footer-bottom { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); justify-content:space-between; align-items:center; margin-top:var(--space-12); padding-top:var(--space-5); border-top:1px solid var(--color-line); }
.footer-bottom p { font-size:var(--text-xs); color:var(--color-text-faint); letter-spacing:.04em; max-width:70ch; }

/* ---------- reveal ---------- */
[data-reveal] { opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; } }

/* ---------- misc ---------- */
.note { border-left:2px solid var(--color-line-strong); padding-left:var(--space-4); font-size:var(--text-sm); color:var(--color-text-faint); }
.split { display:grid; gap:var(--space-10); grid-template-columns:1fr; align-items:center; }
.split--narrow { align-items:start; }
@media (min-width:900px){ .split { grid-template-columns:1.05fr .95fr; gap:var(--space-16);} .split--narrow{grid-template-columns:1fr 1fr} }
.media-frame { border:1px solid var(--color-line); overflow:hidden; position:relative; }
.media-frame img { width:100%; height:100%; object-fit:cover; }
.tag-list { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-6); }

/* standings: keep club names visible while scrolling horizontally on small screens */
@media (max-width:760px){
  table.standings { min-width:520px; }
  table.standings th:first-child,
  table.standings td:first-child { display:none; }
  table.standings th:nth-child(2),
  table.standings td:nth-child(2) {
    position:sticky; left:0; z-index:2;
    background:var(--color-surface);
    box-shadow:1px 0 0 var(--color-line);
  }
  table.standings thead th:nth-child(2) { background:var(--color-surface); }
}

/* Sponsorship package grid — fixed 3-up so six tiers form two clean rows */
.tier-grid { display:grid; gap:var(--space-6); grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
@media (max-width:1040px) { .tier-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px)  { .tier-grid { grid-template-columns:1fr; } }