/* =========================================================
   CAUP — The Cricket Association of Uttar Pradesh
   Static stylesheet. No build step, no framework.
   ========================================================= */

/* ---------- 1. Tokens ----------
   Palette is drawn from the association crest: deep blue, crest red, gold.
   Light is the default; dark is a full token swap, never a filter.
   ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* surfaces */
  --bg:         #fbf9f5;
  --surface:    #ffffff;
  --surface-2:  #f4f1e9;
  --surface-3:  #eae5d8;

  /* type */
  --ink:        #12141c;
  --text:       #3d4254;
  --muted:      #6b7185;

  /* rules */
  --line:       #e2ded2;
  --line-soft:  #efebe1;

  /* brand */
  --brand:        #14237a;
  --brand-strong: #0c1878;
  --brand-soft:   #e7eaf7;
  --on-brand:     #ffffff;

  --gold:       #9d7a1d;
  --gold-soft:  #e0bc57;
  --red:        #c4121c;
  --ok:         #1f6b44;

  /* tags */
  --tag-bg:      #eae5d8;  --tag-fg:      #14237a;
  --tag-open-bg: #e3f0e8;  --tag-open-fg: #1f6b44;
  --tag-soon-bg: #f9edd6;  --tag-soon-fg: #7d5a10;

  /* hero + cta stage */
  --stage:      #0c1878;
  --stage-2:    #1b2a8c;
  --stage-ink:  #ffffff;
  --stage-text: rgba(255, 255, 255, .78);

  /* footer */
  --footer-bg:   #0a0d18;
  --footer-text: rgba(255, 255, 255, .66);
  --footer-head: #ffffff;
  --footer-line: rgba(255, 255, 255, .12);

  --header-bg:  rgba(251, 249, 245, .88);
  --shadow:     0 1px 2px rgba(18, 20, 28, .04), 0 8px 24px -12px rgba(18, 20, 28, .16);
  --shadow-brand: 0 10px 26px -12px rgba(12, 24, 120, .55);

  /* hero stage — light: warm sand with a gold glow, crest sits on it directly */
  --hero-bg:        #f1ebdd;
  --hero-bg-2:      #ebe3d1;
  --hero-tint:      rgba(212, 178, 96, .34);
  --hero-ink:       #12141c;
  --hero-text:      #3d4254;
  --hero-kicker:    #7d6012;
  --hero-accent:    #14237a;
  --hero-rule:      rgba(157, 122, 29, .6);
  --hero-meta-line: rgba(18, 20, 28, .14);
  --hero-meta:      #5f657a;
  --hero-medallion: transparent;
  --hero-medallion-shadow: none;
  --hero-ring:      rgba(157, 122, 29, .28);
  --hero-btn-bg:    #14237a;
  --hero-btn-fg:    #ffffff;
  --hero-btn-hover: #0c1878;
  --hero-ghost-line:  #cfc7b5;
  --hero-ghost-fg:    #12141c;
  --hero-ghost-hover: rgba(18, 20, 28, .05);
  --line-strong: #cfc7b5;
  --gold-glow: rgba(157, 122, 29, .18);
  --gold-rule: rgba(157, 122, 29, .38);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 40px);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
    --bg:         #0b0e1a;
    --surface:    #121627;
    --surface-2:  #101424;
    --surface-3:  #1c2238;

    --ink:        #edebe6;
    --text:       #bfc4d4;
    --muted:      #8d94aa;

    --line:       #272e45;
    --line-soft:  #1d2338;

    --brand:        #8298f7;
    --brand-strong: #a6b5ff;
    --brand-soft:   #1a2145;
    --on-brand:     #0b0e1a;

    --gold:       #e0bc57;
    --gold-soft:  #f0d68c;
    --red:        #f0616b;
    --ok:         #55c48d;

    --tag-bg:      #1c2238;  --tag-fg:      #a6b5ff;
    --tag-open-bg: #14301f;  --tag-open-fg: #6fd8a1;
    --tag-soon-bg: #33270c;  --tag-soon-fg: #eabf63;

    --stage:      #090d1d;
    --stage-2:    #141c44;
    --stage-ink:  #f3f4f8;
    --stage-text: rgba(240, 242, 248, .72);

    --footer-bg:   #070911;
    --footer-text: rgba(236, 238, 246, .62);
    --footer-head: #f2f0ec;
    --footer-line: rgba(236, 238, 246, .1);

    --header-bg:  rgba(11, 14, 26, .86);
    --shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
    --shadow-brand: 0 10px 26px -12px rgba(0, 0, 0, .8);

    /* hero stage — dark: the deep blue panel, crest on a warm medallion */
    --hero-bg:        #090d1d;
    --hero-bg-2:      #141c44;
    --hero-tint:      rgba(224, 188, 87, .20);
    --hero-ink:       #f3f4f8;
    --hero-text:      rgba(240, 242, 248, .72);
    --hero-kicker:    #f0d68c;
    --hero-accent:    #f0d68c;
    --hero-rule:      #f0d68c;
    --hero-meta-line: rgba(255, 255, 255, .16);
    --hero-meta:      rgba(255, 255, 255, .6);
    --hero-medallion: radial-gradient(circle at 50% 36%, #fffdf8, #f7f3e9 66%, #ebe5d5);
    --hero-medallion-shadow: 0 0 0 1px rgba(224, 188, 87, .55), 0 0 0 11px rgba(255, 255, 255, .06), 0 46px 74px -40px rgba(0, 0, 0, .78);
    --hero-ring:      rgba(157, 122, 29, .32);
    --hero-btn-bg:    #ffffff;
    --hero-btn-fg:    #0c1878;
    --hero-btn-hover: #efeadd;
    --hero-ghost-line:  rgba(255, 255, 255, .45);
    --hero-ghost-fg:    #ffffff;
    --hero-ghost-hover: rgba(255, 255, 255, .12);
    --line-strong: #3a4362;
    --gold-glow: rgba(224, 188, 87, .14);
    --gold-rule: rgba(224, 188, 87, .34);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* A component rule that sets `display` outbids the browser's [hidden] styling,
   which silently turns hidden elements back on. This settles it once. */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* clears the sticky header on anchor jumps */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.25rem + 3.6vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.4rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.3rem); }
p  { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-color: rgba(124, 29, 43, .3); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

img, svg { max-width: 100%; }
img { height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- 3. Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(48px, 8vw, 104px); }
.section--cream,
.section--alt { background: var(--surface-2); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.stack > * + * { margin-top: 1rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: var(--on-brand); padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- 4. Shared bits ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .74rem; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
  margin: 0 0 .9rem;
}
.kicker::before {
  content: ""; width: 22px; height: 2px; background: var(--gold); flex: none;
}
.kicker--plain::before { display: none; }
.kicker--live { color: var(--red); }
.kicker--live::before { background: var(--red); }

.lede { font-size: clamp(1.02rem, .97rem + .3vw, 1.16rem); color: var(--text); max-width: 62ch; }

.sec-head { max-width: 64ch; margin-bottom: clamp(32px, 4vw, 52px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .82em 1.5em; border-radius: 100px;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); }
.btn--light { background: #fff; color: #0c1878; }
.btn--light:hover { background: var(--surface-3); color: var(--brand-strong); }
.btn--outline-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.btn svg { width: 14px; height: 14px; flex: none; }

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

.tag {
  display: inline-block; font-size: .7rem; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .35em .7em; border-radius: 100px;
  background: var(--surface-3); color: var(--brand);
}
.tag--open   { background: var(--tag-open-bg); color: var(--tag-open-fg); }
.tag--soon   { background: var(--tag-soon-bg); color: var(--tag-soon-fg); }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 70px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 38px; height: 38px; }
.brand__text { display: grid; line-height: 1.1; }
.brand__name {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 700;
  color: var(--ink); letter-spacing: .01em;
}
.brand__sub {
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 550;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: block; padding: .55em .85em; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500; color: var(--text);
  text-decoration: none; transition: color .16s, background-color .16s;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--brand); font-weight: 600; }

.header__cta { margin-left: 8px; }

.nav-toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px var(--gut) 22px;
    box-shadow: var(--shadow);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .75em .6em; font-size: 1rem; }
  .header__cta { margin: 10px 0 0; }
  .header__cta .btn { width: 100%; }
}

/* ---------- 6. Hero — the stage ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-bg);
  color: var(--hero-text);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(72% 116% at 82% 2%, var(--hero-tint), transparent 62%),
    linear-gradient(168deg, var(--hero-bg-2) 0%, var(--hero-bg) 100%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--hero-rule), transparent);
}

.hero__inner {
  display: grid; gap: clamp(36px, 5vw, 68px);
  grid-template-columns: 1.12fr .88fr; align-items: center;
  padding-block: clamp(64px, 9vw, 116px);
}

.hero .kicker { color: var(--hero-kicker); }
.hero .kicker::before { background: var(--hero-kicker); }
.hero h1 { color: var(--hero-ink); margin-bottom: .42em; }
.hero h1 em { font-style: normal; color: var(--hero-accent); }
.hero .lede { color: var(--hero-text); margin-bottom: 2rem; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  margin-top: 2.2rem; padding-top: 1.4rem;
  border-top: 1px solid var(--hero-meta-line);
  font-size: .86rem; color: var(--hero-meta);
}
.hero__meta strong { color: var(--hero-ink); font-weight: 600; }

/* On the dark stage the crest needs a medallion or its blue shield dissolves
   into the background. On sand it reads on its own, so there is none. */
.hero__art { position: relative; justify-self: center; width: 100%; max-width: 350px; }
.hero__art::before {
  content: ""; position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--hero-tint), transparent 64%);
}
.hero__crest {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 50%;
  background: var(--hero-medallion);
  box-shadow: var(--hero-medallion-shadow);
}
.hero__crest::after {
  content: ""; position: absolute; inset: 15px; border-radius: 50%;
  border: 1px solid var(--hero-ring);
}
.hero__crest img { width: 68%; }

@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr; text-align: left;
    gap: 28px; padding-block: clamp(36px, 7vw, 68px);
  }
  .hero__art { order: -1; max-width: 156px; justify-self: start; }
  .hero__crest::after { inset: 9px; }
}
@media (max-width: 600px) {
  .hero__inner { gap: 22px; }
  .hero__art { max-width: 100px; }
  .hero__crest::after { inset: 6px; }
  .hero__crest img { width: 74%; }
  .hero .lede { margin-bottom: 1.6rem; }
  .hero__meta { flex-direction: column; gap: 7px; margin-top: 1.8rem; }
}

/* ---------- 7. Page header (interior pages) ---------- */
.page-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(44px, 6vw, 76px);
}
.page-head h1 { margin-bottom: .3em; }
.page-head .lede { margin: 0; }

/* ---------- 8. Cards & grids ---------- */
.grid { display: grid; gap: clamp(16px, 2.2vw, 26px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 30px);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card h3 { margin-bottom: .5em; }
.card p { color: var(--text); font-size: .95rem; }
.card--hover:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.card--flat { background: var(--surface-2); border-color: transparent; }

.card__icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--surface-3); color: var(--brand);
}
.card__icon svg { width: 22px; height: 22px; }

/* ---------- 9. Pathway stepper ---------- */
.pathway { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; }
/* the girls' pathway has three rungs rather than five */
.pathway--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .pathway { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pathway { grid-template-columns: 1fr; } }
.pathway__step {
  position: relative; padding: 28px 22px 26px;
  border-top: 2px solid var(--line);
}
.pathway__step::before {
  content: ""; position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--gold);
}
.pathway__step:first-child::before { background: var(--brand); border-color: var(--brand); }
.pathway__age {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  color: var(--ink); display: block; margin-bottom: .2em;
}
.pathway__step p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------- 10. Notices / list rows ---------- */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 150px 1fr auto;
  gap: 8px 28px; align-items: baseline;
  padding: 22px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background-color .18s var(--ease);
}
a.row:hover { background: var(--surface-2); }
@media (max-width: 700px) {
  .row { grid-template-columns: 1fr; gap: 6px; }
}
.row__meta {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.row__title { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--ink); margin: 0 0 .25em; }
.row__body { font-size: .92rem; color: var(--text); margin: 0; max-width: 72ch; }
.row__aside { align-self: center; }

/* ---------- 11. Table ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 460px; }
thead th {
  text-align: left; font-size: .72rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 14px 20px; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- 12. Split / prose ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split__aside { position: sticky; top: 96px; }
@media (max-width: 860px) { .split__aside { position: static; } }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--gold); }

.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.facts li { padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.facts dt, .facts b {
  display: block; font-size: .72rem; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}

/* ---------- 13. Steps (numbered) ---------- */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 26px 52px; margin: 0;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--brand);
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  font-family: var(--sans);
}
.steps li::after {
  content: ""; position: absolute; left: 15.5px; top: 38px; bottom: 6px;
  width: 1px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: .35em; }
.steps p { font-size: .95rem; margin: 0; }

/* ---------- 14. CTA band ---------- */
.band {
  position: relative; overflow: hidden;
  background: var(--stage); color: var(--stage-text);
}
.band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(62% 120% at 84% 0%, rgba(224, 188, 87, .26), transparent 60%),
    radial-gradient(52% 110% at 0% 100%, var(--stage-2), transparent 62%);
}
.band > * { position: relative; }
.band h2 { color: var(--stage-ink); }
.band .kicker { color: var(--gold-soft); }
.band .kicker::before { background: var(--gold-soft); }
.band__inner {
  display: grid; grid-template-columns: 1.3fr auto;
  gap: 32px; align-items: center;
  padding-block: clamp(48px, 6vw, 76px);
}
@media (max-width: 780px) { .band__inner { grid-template-columns: 1fr; } }

/* ---------- 15. Contact ---------- */
.contact-card {
  display: grid; gap: 4px; padding: 26px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.contact-card a { font-weight: 600; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

.map-frame {
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-2); line-height: 0;
}
.map-frame iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--footer-bg); color: var(--footer-text);
  font-size: .9rem; padding-block: clamp(48px, 6vw, 72px) 0;
}
.site-footer h4 {
  font-family: var(--sans); color: var(--footer-head); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 650;
  margin: 0 0 16px;
}
.site-footer a { color: var(--footer-text); text-decoration: none; }
.site-footer a:hover { color: var(--footer-head); text-decoration: underline; text-underline-offset: 3px; }
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 48px);
}
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; text-decoration: none; }
.footer__brand img { width: 40px; height: 40px; }
.footer__brand span { font-family: var(--serif); font-size: 1.05rem; color: var(--footer-head); font-weight: 600; line-height: 1.25; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__bottom {
  margin-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--footer-line);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .82rem; opacity: .75;
}

/* ---------- 17. 404 ---------- */
.notfound { display: grid; place-items: center; text-align: center; padding-block: clamp(72px, 14vh, 140px); }
.notfound__code {
  font-family: var(--serif); font-size: clamp(4rem, 14vw, 8rem);
  color: var(--surface-3); line-height: 1; margin: 0 0 -.1em;
}

/* ---------- 18. FAQ ---------- */
.faq { border-top: 1px solid var(--line); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 20px 2px;
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: 7px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--brand); }
.faq details > p { margin: -4px 0 22px; padding-right: 40px; font-size: .95rem; max-width: 70ch; }

/* ---------- 19. Utilities ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
table caption { text-align: left; }

/* Header CTA: the .nav a rules must not repaint the button. */
.nav .header__cta .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .68em 1.25em; font-size: .88rem; border-radius: 100px;
}
@media (max-width: 900px) { .nav .header__cta .btn { display: flex; } }
.nav .header__cta .btn--primary,
.nav .header__cta .btn--primary:hover { color: var(--on-brand); }
.nav .header__cta .btn--primary { background: var(--brand); }
.nav .header__cta .btn--primary:hover { background: var(--brand-strong); }

/* Notice rows use spans (valid inside <a>) — make the text blocks stack. */
.row__title, .row__body, .row__meta { display: block; }

/* Small phones: the full association name in the header wraps awkwardly. */


/* =========================================================
   20. Responsive refinements for phones and small tablets
   ========================================================= */

/* Buttons go full-width on phones — easier targets, tidier edges. */
@media (max-width: 520px) {
  .btn-row { gap: 10px; }
  .btn-row > .btn { flex: 1 1 100%; }
  .band .btn-row > .btn { flex: 1 1 100%; }
}

/* Page header: a little less air, and room under the CTAs. */
@media (max-width: 600px) {
  .page-head { padding-block: clamp(32px, 8vw, 76px); }
}

/* Pathway becomes a proper vertical timeline instead of stacked cards. */
@media (max-width: 820px) {
  .pathway { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pathway { grid-template-columns: 1fr; padding-left: 26px; }
  .pathway__step {
    border-top: 0;
    border-left: 2px solid var(--line);
    padding: 0 0 26px 22px;
  }
  .pathway__step:last-child { border-left-color: transparent; padding-bottom: 0; }
  .pathway__step::before { top: 2px; left: -7px; }
  .pathway__age { font-size: 1.2rem; }
}

/* Notice rows: keep the label tight above the title on phones. */
@media (max-width: 700px) {
  .row { padding: 18px 4px; }
  .row__meta { margin-bottom: 4px; }
  .row__aside { justify-self: start; margin-top: 8px; }
}

/* Tables scroll horizontally — say so, rather than hoping it's discovered. */
.table-scroll { position: relative; -webkit-overflow-scrolling: touch; }
.scroll-hint {
  display: none;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  margin: 10px 2px 0;
}
.scroll-hint.is-on { display: block; }
@media (max-width: 620px) {
  thead th, tbody td { padding-inline: 14px; }
}

/* Steps list: narrower gutter on phones. */
@media (max-width: 480px) {
  .steps li { padding-left: 44px; padding-bottom: 22px; }
  .steps li::before { width: 28px; height: 28px; font-size: .7rem; }
  .steps li::after { left: 13.5px; top: 34px; }
}

/* FAQ: the chevron needs breathing room next to long questions. */
@media (max-width: 520px) {
  .faq summary { gap: 14px; font-size: 1rem; padding: 17px 2px; }
  .faq details > p { padding-right: 8px; }
}

/* Contact map is shorter on phones so it doesn't swallow the scroll. */
@media (max-width: 620px) {
  .map-frame iframe { height: 280px; }
  .contact-card { padding: 20px; }
}

/* Footer: two columns of links beats one long ribbon of them. */
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .footer__grid > :last-child { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; gap: 6px; }
}

/* Mobile nav panel: give it depth and a considered rhythm. */
@media (max-width: 900px) {
  .nav {
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding-top: 8px;
  }
  .nav a { border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav a:last-of-type { border-bottom: 0; }
  .nav a[aria-current="page"] { background: var(--surface-2); }
}

/* =========================================================
   21. Motion — entrances, scroll reveals, micro-interactions
   All of it is opt-in: the .js-motion class is set by script,
   so a browser without JS renders everything visible and still.
   ========================================================= */

/* --- 21a. Scroll reveal --- */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .62s var(--ease),
    transform .62s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* Once it has landed, stop reserving a compositor layer. */
.js-motion [data-reveal].is-settled { will-change: auto; }

/* --- 21b. Hero / page-header entrance --- */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes crestIn {
  from { opacity: 0; transform: translateY(12px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

.js-motion .hero__inner > div > *,
.js-motion .page-head > .wrap > * {
  animation: rise .7s var(--ease) both;
}
.js-motion .hero .kicker,      .js-motion .page-head .kicker { animation-delay: .05s; }
.js-motion .hero h1,           .js-motion .page-head h1      { animation-delay: .13s; }
.js-motion .hero .lede,        .js-motion .page-head .lede   { animation-delay: .21s; }
.js-motion .hero .btn-row,     .js-motion .page-head .btn-row{ animation-delay: .29s; }
.js-motion .hero__meta { animation-delay: .37s; }

.js-motion .hero__art { animation: crestIn .8s var(--ease) both; }
.js-motion .hero__crest { animation: floatY 7s ease-in-out 1.2s infinite; }
.hero__crest::after { transition: transform .6s var(--ease); }
.hero__art:hover .hero__crest::after { transform: rotate(90deg); }

/* --- 21c. Buttons --- */
.btn { position: relative; overflow: hidden; }
.btn svg { transition: transform .28s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary:hover, .btn--light:hover { box-shadow: var(--shadow-brand); }
.btn--ghost:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* --- 21d. Nav underline --- */
@media (min-width: 901px) {
  .nav a:not(.btn) { position: relative; }
  .nav a:not(.btn)::after {
    content: "";
    position: absolute; left: .85em; right: .85em; bottom: .3em;
    height: 1.5px; background: var(--gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease);
  }
  .nav a:not(.btn):hover::after,
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* --- 21e. Header lifts once the page scrolls --- */
.site-header { transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.site-header.is-stuck {
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(0, 0, 0, .28);
}
.brand img { transition: transform .35s var(--ease); }
.brand:hover img { transform: rotate(-6deg) scale(1.06); }

/* --- 21f. Cards --- */
.card__icon { transition: transform .32s var(--ease), background-color .32s var(--ease); }
.card--hover:hover .card__icon { transform: translateY(-2px) scale(1.06); background: var(--brand-soft); }

/* --- 21g. Notice rows get a travelling arrow --- */
a.row { position: relative; }
a.row .row__title { transition: color .2s var(--ease); }
a.row:hover .row__title { color: var(--brand); }
a.row .row__title::after {
  content: "→";
  display: inline-block;
  margin-left: .45em;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  color: var(--gold);
}
a.row:hover .row__title::after,
a.row:focus-visible .row__title::after { opacity: 1; transform: none; }

/* --- 21h. FAQ panel --- */
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq details[open] > p { animation: faqOpen .3s var(--ease) both; }

/* --- 21i. Footer links --- */
.footer__list a { display: inline-block; transition: transform .22s var(--ease), color .22s var(--ease); }
.footer__list a:hover { transform: translateX(3px); }

/* --- 21j. Pathway dots light up as the row reveals --- */
.pathway__step::before { transition: background-color .4s var(--ease), transform .4s var(--ease); }
.js-motion .pathway__step.is-revealed::before { transform: scale(1.15); }

/* --- 21k. Back to top --- */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand);
  border: 0; cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(89, 19, 32, .8);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .2s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-strong); }
.to-top svg { width: 17px; height: 17px; }
@media (max-width: 520px) { .to-top { right: 14px; bottom: 14px; } }

/* --- 21l. Respect the user's motion setting, properly --- */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js-motion .hero__inner > div > *,
  .js-motion .page-head > .wrap > *,
  .js-motion .hero__art,
  .js-motion .hero__crest { animation: none; }
  .to-top { transition: opacity .01ms; }
}

/* Mobile nav links cascade in when the panel opens. */
@media (max-width: 900px) {
  .js-motion .nav:not([hidden]) > a,
  .js-motion .nav:not([hidden]) > .header__cta {
    animation: rise .34s var(--ease) both;
  }
  .js-motion .nav:not([hidden]) > *:nth-child(2) { animation-delay: .03s; }
  .js-motion .nav:not([hidden]) > *:nth-child(3) { animation-delay: .06s; }
  .js-motion .nav:not([hidden]) > *:nth-child(4) { animation-delay: .09s; }
  .js-motion .nav:not([hidden]) > *:nth-child(5) { animation-delay: .12s; }
  .js-motion .nav:not([hidden]) > *:nth-child(6) { animation-delay: .15s; }
  .js-motion .nav:not([hidden]) > *:nth-child(7) { animation-delay: .18s; }
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .nav:not([hidden]) > a,
  .js-motion .nav:not([hidden]) > .header__cta { animation: none; }
}

/* Grid items default to min-width:auto, so a wide child (a 560px table inside
   .prose) stretches its whole column past the viewport. Pin the floor to zero
   and let .table-scroll do the scrolling it was built for. */
.split > *,
.grid > *,
.band__inner > *,
.hero__inner > *,
.footer__grid > *,
.prose { min-width: 0; }

.table-scroll { max-width: 100%; }
.prose img, .prose pre { max-width: 100%; }

/* ---------- 22. Theme toggle ---------- */
.header__actions { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.site-header__inner { justify-content: flex-start; }
.nav { margin-left: auto; }

.theme-toggle {
  width: 40px; height: 40px; padding: 0; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background-color .2s var(--ease), transform .3s var(--ease);
}
.theme-toggle:hover {
  color: var(--ink); border-color: var(--line-strong); background: var(--surface-2);
}
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 17px; height: 17px; }

/* show the icon for the theme the button switches TO */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }



:root[data-theme="dark"] .map-frame { filter: invert(.9) hue-rotate(180deg); }
:root[data-theme="light"] .map-frame { filter: none; }

/* Hero buttons take their colours from the stage, so they invert with it. */
.hero .btn--primary { background: var(--hero-btn-bg); color: var(--hero-btn-fg); }
.hero .btn--primary:hover { background: var(--hero-btn-hover); color: var(--hero-btn-fg); }
.hero .btn--ghost { border-color: var(--hero-ghost-line); color: var(--hero-ghost-fg); background: transparent; }
.hero .btn--ghost:hover { border-color: var(--hero-ghost-fg); background: var(--hero-ghost-hover); color: var(--hero-ghost-fg); }



/* =========================================================
   23. Forms
   ========================================================= */
.form { max-width: 760px; }
.fieldset { border: 0; padding: 0; margin: 0 0 clamp(28px, 4vw, 42px); }
.fieldset > legend {
  padding: 0; margin: 0 0 4px;
  font-family: var(--serif); font-size: 1.18rem; font-weight: 600; color: var(--ink);
}
.fieldset__hint { font-size: .9rem; color: var(--muted); margin: 0 0 20px; max-width: 60ch; }

/* Inside .split this grid sits in a column that is far narrower than the
   viewport, so a viewport media query is the wrong tool: at 1024px the column
   is only ~490px and two fixed halves leave 238px per control, which native
   date and select widgets on tablets overflow. auto-fit drops to one column
   the moment the container itself is too tight, wherever that happens. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 20px;
}
.field--wide { grid-column: 1 / -1; }

.field { display: grid; gap: 7px; min-width: 0; }
.field > label {
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--ink);
}
.field > label .req { color: var(--red); margin-left: 2px; }
.field__hint { font-size: .78rem; color: var(--muted); }

.input, .select, .textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .68em .8em;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  min-width: 0;
}
.textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
/* Safari gives date inputs an intrinsic width that ignores the grid track */
input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }
.select { appearance: none; padding-right: 2.2em;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05em top 55%, right .75em top 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .75; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--red);
}

.check {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .9rem; color: var(--text); cursor: pointer;
}
.check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }

.form-msg {
  border-radius: var(--r-sm); padding: 14px 16px; font-size: .92rem;
  margin: 0 0 20px; border: 1px solid transparent;
}
.form-msg--error { background: var(--tag-soon-bg); color: var(--tag-soon-fg); border-color: currentColor; }
.form-msg--ok    { background: var(--tag-open-bg); color: var(--tag-open-fg); border-color: currentColor; }
.form-msg[hidden] { display: none; }

.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.form-actions .field__hint { margin: 0; }

/* =========================================================
   24. Status, empty and loading states
   ========================================================= */
.state {
  text-align: center; padding: clamp(40px, 7vw, 72px) 24px;
  border: 1px dashed var(--line); border-radius: var(--r-md);
  color: var(--muted); font-size: .95rem;
}
.state strong { display: block; color: var(--ink); font-family: var(--serif);
  font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; }
.spinner {
  width: 20px; height: 20px; border-radius: 50%; margin: 0 auto 14px;
  border: 2px solid var(--line); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   25. Gallery
   ========================================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

.photo {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; text-align: left;
  padding: 0; font: inherit; color: inherit; cursor: zoom-in;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.photo:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-3); }
.photo figcaption { padding: 16px 18px 18px; }
.photo__caption { font-size: .95rem; color: var(--text); margin: 0 0 6px; }
.photo__date { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); }
.lightbox::backdrop { background: rgba(6, 8, 16, .84); backdrop-filter: blur(3px); }
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--r-md); background: #0b0e1a; }
.lightbox p { color: #fff; font-size: .95rem; margin: 14px 4px 0; }
.lightbox button {
  position: absolute; top: -46px; right: 0;
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}

/* =========================================================
   26. Admin
   ========================================================= */
.admin-login { max-width: 400px; margin-inline: auto; }
.admin-login .card { padding: clamp(26px, 4vw, 34px); }

.admin-bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; margin-bottom: 26px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.admin-bar__who { font-size: .86rem; color: var(--muted); }
.admin-bar__who strong { color: var(--ink); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 26px;
  border-bottom: 1px solid var(--line); }
.tabs button {
  font: inherit; font-size: .92rem; font-weight: 600;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: .7em 1em; color: var(--muted); cursor: pointer; margin-bottom: -1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tabs .count {
  display: inline-block; margin-left: .5em; font-size: .72rem;
  background: var(--surface-3); color: var(--text);
  border-radius: 100px; padding: .1em .5em; font-weight: 700;
}

.panel[hidden] { display: none; }

.entry {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 20px 22px; margin-bottom: 14px;
}
.entry__head {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  align-items: baseline; justify-content: space-between; margin-bottom: 12px;
}
.entry__name { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 0; }
.entry__when { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.entry dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 22px; margin: 0; }
.entry dt { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px; }
.entry dd { margin: 0; font-size: .92rem; color: var(--ink); overflow-wrap: anywhere; }
.entry__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  display: flex; gap: 10px; flex-wrap: wrap; }

.btn--danger { background: var(--red); color: #fff; }
.btn--danger:hover { background: var(--red); filter: brightness(.88); color: #fff; }
.btn--danger-quiet { border-color: var(--line); color: var(--red); background: transparent; }
.btn--danger-quiet:hover { border-color: var(--red); background: var(--red); color: #fff; }
.btn--sm { padding: .5em 1em; font-size: .85rem; }

.admin-item { display: grid; grid-template-columns: 120px 1fr auto; gap: 18px;
  align-items: center; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 14px; margin-bottom: 12px; }
@media (max-width: 620px) { .admin-item { grid-template-columns: 84px 1fr; }
  .admin-item > :last-child { grid-column: 1 / -1; } }
.admin-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sm); background: var(--surface-3); }
.admin-item p { margin: 0 0 4px; font-size: .93rem; color: var(--ink); }
.admin-item__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* While a photograph is being edited its row grows a small form in place of
   the caption, so the picture stays in view next to what you are describing. */
.admin-item--editing { grid-template-columns: 120px 1fr; align-items: start; }
.admin-item--editing img { align-self: center; }
.photo-edit { display: grid; gap: 14px; min-width: 0; }
.photo-edit__foot { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 620px) { .admin-item--editing { grid-template-columns: 84px 1fr; } }

/* A <label> is display:inline by default — without this the dashed box collapses
   and its contents spill out of it. */
.drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 30px 24px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.drop:hover,
.drop.is-over,
.drop:focus-within { border-color: var(--brand); background: var(--brand-soft); }

/* hidden from view but still focusable, so the control can be reached by keyboard */
.drop input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.drop__icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--brand);
}
.drop__icon svg { width: 21px; height: 21px; }
.drop.has-file .drop__icon { display: none; }

.drop__text { font-size: .95rem; color: var(--ink); font-weight: 500; max-width: 42ch; }
.drop__note { font-size: .78rem; color: var(--muted); }

.drop__cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600;
  padding: .6em 1.2em; border-radius: 100px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.drop:hover .drop__cta { border-color: var(--brand); color: var(--brand); }

.drop__preview {
  max-width: 100%; width: 300px;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sm); display: block;
  border: 1px solid var(--line);
}


/* =========================================================
   27. Header — sized so the brand, seven links, the call to
   action and the theme control all fit 1040px without a fight
   ========================================================= */
.site-header__inner { min-height: 68px; gap: 16px; }

.brand { flex: none; }
.brand img { width: 36px; height: 36px; }
.brand__name { font-size: 1.06rem; letter-spacing: .01em; }
.brand__sub {
  white-space: nowrap;
  font-size: .55rem;
  letter-spacing: .055em;
}

/* The full name is long. Where the inline nav is competing for the same row
   there is no room for it, and on phones it has to wrap rather than push the
   page wider than the screen. */
@media (min-width: 901px) and (max-width: 1099px) {
  .brand__sub { display: none; }
}
@media (max-width: 900px) {
  .brand__sub {
    white-space: normal;
    max-width: 30ch;
    line-height: 1.25;
  }
}

.nav { gap: 1px; }
.nav a { font-size: .875rem; padding: .5em .62em; }
.nav .header__cta { margin-left: 10px; }
.nav .header__cta .btn { font-size: .8rem; padding: .62em 1.05em; }

.header__actions { gap: 6px; margin-left: 10px; }

/* the two header controls are the same object at different jobs */
.theme-toggle,
.nav-toggle {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.nav-toggle { display: none; place-items: center; }
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .site-header__inner { min-height: 62px; }
  /* the nav is out of flow here, so its margin-left:auto no longer pushes the
     controls over — the header has to space its own children instead */
  .site-header__inner { justify-content: space-between; }
  .nav { margin-left: 0; }
  .header__actions { margin-left: 0; }

  /* the dropdown reads as a panel sitting over the page, not as more page */
  .nav {
    left: 12px; right: 12px;
    margin-top: 6px;
    padding: 10px 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .55);
  }
  .nav a {
    font-size: .98rem;
    padding: .72em .7em;
    border-radius: var(--r-sm);
    border-bottom: 0;
  }
  .nav a + a { border-top: 1px solid var(--line-soft); }
  .nav a[aria-current="page"] { background: var(--brand-soft); }
  .nav .header__cta { margin: 12px 0 0; }
  .nav .header__cta .btn { font-size: .92rem; padding: .82em 1.2em; }
}

@media (max-width: 420px) {
  .brand__sub { font-size: .5rem; letter-spacing: .03em; max-width: 24ch; }
}

/* =========================================================
   28. Mobile loader
   The ground colour matches the animation's own background exactly, so the
   frame edges are invisible and the batsman appears to walk across the screen.
   ========================================================= */
:root[data-loading],
:root[data-loading] body { overflow: hidden; }

/* painted from the stylesheet, before any script runs, so the page content
   never flashes up ahead of the loader */
:root[data-loading]::before {
  content: "";
  position: fixed; inset: 0; z-index: 9998;
  background: #303f9e;
}
:root[data-loading-out]::before {
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

.site-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-content: center; justify-items: center;
  gap: 20px;
  background: #303f9e;
  transition: opacity .45s var(--ease);
}
.site-loader img {
  display: block;
  width: min(78vw, 320px);
  height: auto;
}
.site-loader__word {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: .34em; text-indent: .34em;
  color: rgba(255, 255, 255, .82);
}
.site-loader.is-out { opacity: 0; pointer-events: none; }

/* desktop never shows it, and never downloads it either — the markup is only
   created by script when the viewport is small */
@media (min-width: 901px) {
  .site-loader { display: none; }
  :root[data-loading]::before { display: none; }
}

/* Build credit — quiet by default, with the studio name picked out.
   The heart is decorative; the word "love" is kept for screen readers. */
.footer__credit a {
  color: var(--footer-head);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--footer-line);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.footer__credit a:hover { border-bottom-color: currentColor; text-decoration: none; }

.footer__heart {
  display: inline-block;
  color: #e2555f;
  font-size: 1.05em;
  line-height: 1;
  transform: translateY(.055em);
}
.js-motion .footer__heart { animation: heartbeat 3s var(--ease) infinite; }
@keyframes heartbeat {
  0%, 70%, 100% { transform: translateY(.055em) scale(1); }
  76%           { transform: translateY(.055em) scale(1.25); }
  82%           { transform: translateY(.055em) scale(1); }
  88%           { transform: translateY(.055em) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .footer__heart { animation: none; }
}

@media (max-width: 560px) {
  .footer__credit { margin-top: 4px; }
}

/* =========================================================
   29. Tournaments, fixtures and districts
   ========================================================= */

/* --- status badges --- */
.badge {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .35em .75em; border-radius: 100px;
  background: var(--surface-3); color: var(--text); white-space: nowrap;
}
.badge--live { background: #fdeaea; color: #a5160f; }
.badge--upcoming { background: var(--tag-soon-bg); color: var(--tag-soon-fg); }
.badge--done { background: var(--tag-open-bg); color: var(--tag-open-fg); }
:root[data-theme="dark"] .badge--live { background: #3a1416; color: #ff8d8d; }

.badge--live .dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}
.js-motion .badge--live .dot { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .badge--live .dot { animation: none; }
}

/* --- a single match --- */
.fixture {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 20px 22px; margin-bottom: 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fixture:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.fixture--live { border-color: var(--red); }

.fixture__head {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.fixture__tourn {
  font-size: .78rem; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand);
}

.fixture__sides { display: grid; gap: 10px; }
.fixture__side {
  display: grid; grid-template-columns: 34px 1fr auto;
  gap: 12px; align-items: center;
}
.fixture__side img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: var(--surface-3); border: 1px solid var(--line);
}
.fixture__crest {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.fixture__team { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.fixture__score {
  font-variant-numeric: tabular-nums; font-size: .95rem;
  font-weight: 600; color: var(--ink); white-space: nowrap;
}
.fixture__side--lost .fixture__team,
.fixture__side--lost .fixture__score { color: var(--muted); font-weight: 500; }
.fixture__side--won .fixture__team { font-weight: 700; }

.fixture__result {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: .92rem; color: var(--ink); font-weight: 500;
}
.fixture__meta {
  margin: 12px 0 0; font-size: .82rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}

@media (max-width: 520px) {
  .fixture { padding: 16px 16px; }
  .fixture__side { grid-template-columns: 28px 1fr auto; gap: 10px; }
  .fixture__side img, .fixture__crest { width: 28px; height: 28px; }
  .fixture__team { font-size: .98rem; }
}

/* --- tournament card --- */
.tourn {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: clamp(20px, 2.4vw, 26px);
  display: flex; flex-direction: column; gap: 12px;
}
.tourn--live { border-color: var(--red); }
.tourn__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; }
.tourn h3 { margin: 0; }
.tourn__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--muted); }
.tourn__meta strong { color: var(--ink); font-weight: 600; }
.tourn__note { font-size: .92rem; color: var(--text); margin: 0; }

/* --- affiliated districts --- */
.district-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.district {
  display: grid; align-content: start; gap: 14px; padding: 20px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: border-color .2s var(--ease);
}
.district:hover { border-color: var(--line-strong); }
.district__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.district img {
  flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--surface-3); border: 1px solid var(--line);
}
.district__initials {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  font-family: var(--serif); font-size: 1.25rem; font-weight: 700;
}
.district__name { font-size: .98rem; font-weight: 600; color: var(--ink); line-height: 1.3; }

/* contact details, each on its own labelled line */
.district__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.district__meta li {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px;
  font-size: .84rem; color: var(--text); overflow-wrap: anywhere;
}
.district__meta li > span {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); padding-top: 2px;
}
.district__meta a { color: var(--brand); text-decoration: none; }
.district__meta a:hover { text-decoration: underline; }
.district__meta--none { margin: 0; font-size: .84rem; color: var(--muted); font-style: italic; }
.district__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- admin: nested fixture editor --- */
/* --- admin: the tournaments panel ---------------------------------------
   The list is the interface. Both forms sit in dialogs, so nothing under the
   cursor moves while a form is open and a live database update cannot wipe
   out half-typed input. */

/* the small heading that separates Senior / Boys / Girls on the
   tournaments page, quiet enough not to compete with the section's own h2 */
.comp-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; font-family: var(--sans);
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.comp-head::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.panel-bar {
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: center; justify-content: space-between; margin-bottom: 22px;
}
.panel-bar__text { min-width: 0; }
.panel-bar h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.panel-bar p { margin: 0; font-size: .87rem; color: var(--muted); max-width: 62ch; }

.group-head {
  display: flex; align-items: center; gap: 9px;
  margin: 26px 0 12px; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.group-head:first-child { margin-top: 0; }
.group-head span {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--surface-3); color: var(--ink);
  font-size: .72rem; letter-spacing: 0;
}

.tcard {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: 12px; overflow: hidden;
}
.tcard--live { box-shadow: inset 3px 0 0 var(--red); }

/* the whole bar is the toggle, so it is a real button for the keyboard */
.tcard__bar {
  width: 100%; display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; justify-content: space-between;
  padding: 16px 18px; border: 0; background: transparent;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: background-color .16s var(--ease);
}
.tcard__bar:hover { background: var(--surface-2); }
.tcard__main { display: grid; gap: 3px; min-width: 0; }
.tcard__title { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; color: var(--ink); }
.tcard__sub { font-size: .8rem; color: var(--muted); }
.tcard__right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tcard__tally { font-size: .78rem; color: var(--muted); }
.tcard__chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s var(--ease); }
.tcard__bar[aria-expanded="true"] .tcard__chev { transform: rotate(180deg); }

.tcard__body { padding: 0 18px 18px; border-top: 1px solid var(--line-soft); }
.tcard__body[hidden] { display: none; }
.tcard__tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; }
.tcard__note {
  margin: 0 0 4px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); font-size: .85rem; color: var(--text);
}

/* --- one match --- */
.mrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px;
  align-items: start; padding: 15px 0; border-top: 1px solid var(--line-soft);
}
.mrow--live { border-left: 3px solid var(--red); padding-left: 12px; margin-left: -12px; }
.mrow__body { min-width: 0; display: grid; gap: 6px; }
.mrow__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mrow__when { font-size: .78rem; color: var(--muted); }
.mrow__teams {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  font-size: .98rem; color: var(--ink);
}
.mrow__side em { font-style: normal; font-weight: 600; color: var(--muted); font-size: .88rem; }
.mrow__side.is-won { font-weight: 700; }
.mrow__side.is-lost { color: var(--muted); }
.mrow__side.is-lost em { opacity: .75; }
/* the "v" travels with the away side, so a narrow screen wraps to
   "Prayagraj 245/6" / "v Kaushambi 198" rather than stranding it */
.mrow__away { display: inline-flex; align-items: baseline; gap: 10px; }
.mrow__v { font-size: .82rem; color: var(--muted); font-style: italic; }
.mrow__result { margin: 0; font-size: .85rem; color: var(--text); }
.mrow__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

@media (max-width: 680px) {
  .mrow { grid-template-columns: 1fr; }
  .mrow__actions { justify-content: flex-start; }
}

/* --- a dialog that holds a form ----------------------------------------- */

.modal { border: 0; padding: 0; background: transparent; max-width: min(720px, 94vw); width: 100%; }
.modal::backdrop { background: rgba(6, 8, 16, .6); backdrop-filter: blur(3px); }
.modal__box {
  display: flex; flex-direction: column; max-height: 90vh;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 24px 60px rgba(6, 8, 16, .28);
  overflow: hidden;
}
.modal__head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--line-soft);
}
.modal__head h3 { margin: 0; font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.modal__sub { margin: 4px 0 0; font-size: .85rem; color: var(--muted); }
.modal__close {
  flex: none; margin-left: auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.modal__close:hover { border-color: var(--ink); color: var(--ink); }
.modal__close svg { width: 16px; height: 16px; }
.modal__body { padding: 20px 22px; overflow-y: auto; }
.modal__foot {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--line-soft); background: var(--surface-2);
}

/* a quiet heading that breaks a long form into a few short decisions */
.form-legend {
  display: flex; align-items: baseline; gap: 8px;
  margin: 22px 0 12px; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.modal__body > .form-legend:first-child { margin-top: 0; }
.form-legend span { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .78rem; }

/* --- status as three visible choices rather than a hidden dropdown ------- */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.seg__opt { position: relative; display: block; cursor: pointer; }
.seg__opt input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%);
}
.seg__opt span {
  display: grid; gap: 2px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.seg__opt strong { font-size: .92rem; font-weight: 600; color: var(--ink); }
.seg__opt small { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.seg__opt:hover span { border-color: var(--line-strong); }
.seg__opt input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.seg__opt--live input:checked + span { border-color: var(--red); background: var(--surface-2); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.state--inline { margin: 6px 0 0; }

.subform {
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: 18px; margin-top: 16px; background: var(--surface-2);
}
.subform h4 { margin: 0 0 14px; font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--ink); }