/* ==========================================================================
   Dookie United FNC — structural styles
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html{overflow-x:clip}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:var(--heading-leading);
  margin:0 0 var(--space-4);
  font-weight:var(--heading-weight);
  letter-spacing:var(--heading-tracking);
  text-transform:var(--heading-transform);
  text-wrap:pretty;
  color:var(--color-text);
}
h1{font-size:clamp(2.7rem,1.6rem + 5vw,5.5rem)}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem)}
h3{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem)}
h4{font-size:var(--fs-md)}
p{margin:0 0 var(--space-5);max-width:70ch;color:var(--color-text)}
a{color:var(--color-link)}
ul,ol{margin:0 0 var(--space-5);padding-left:1.3em}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.25rem)}
.container--narrow{max-width:var(--container-narrow)}
section{padding-block:clamp(3rem,6vw,5.5rem)}
.section-alt{background:var(--color-bg-alt)}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:3px;
  border-radius:4px;
}

/* Skip link */
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--color-primary);color:#fff;
  padding:.8em 1.4em;border-radius:0 0 8px 0;z-index:1000;
  font-weight:600;
}
.skip-link:focus{left:0;top:0}

/* ---------- Utility / topbar (SW1 .sw-topbar) ---------- */
.utility-bar{background:var(--color-bg-invert);color:var(--color-text-invert);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em}
.utility-bar__inner{
  max-width:var(--container-max);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.25rem);
  height:36px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-size:.74rem;
}
.utility-bar a{color:var(--color-text-invert);text-decoration:none;display:inline-flex;align-items:center;gap:.4em}
.utility-bar a:hover{color:var(--color-primary)}
.utility-bar svg{width:22px;height:22px;flex:none}
.utility-bar__social{display:flex;gap:var(--space-3);align-items:center}
.utility-bar__social svg{fill:currentColor}
@media (max-width:640px){.utility-bar{display:none}}

/* ---------- Header (SW1 .sw-header) ---------- */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--color-header-bg);
  color:var(--color-header-text);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
  height:var(--header-h);
}
.site-header__bar{
  max-width:var(--container-max);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.25rem);
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0}
.brand__crest{width:50px;height:50px;flex:none;object-fit:contain}
.brand__name{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;color:#fff;
  font-size:1.05rem;line-height:1;letter-spacing:.02em;white-space:nowrap;
}
.brand__sub{display:block;font-family:var(--font-mono);font-weight:400;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-soft);white-space:nowrap;margin-top:.3em}

/* Primary nav (desktop) */
.primary-nav{display:none}
@media (min-width:1000px){
  /* Dookie's real nav (9 top-level items) runs longer than SW1's own
     reference clubs — tightened the same way SW1's own [data-variant=
     "gameday"] override handles its long nav (blocks.css: gap:0, smaller
     link padding/font) so it fits the 1200px container without pushing
     the header CTA off-screen. */
  .primary-nav{display:flex;align-items:stretch;gap:var(--space-1);height:100%;min-width:0}
  .primary-nav > ul{display:flex;list-style:none;margin:0;padding:0;gap:0;height:100%;align-items:center;flex-wrap:nowrap}
  .primary-nav > ul > li{position:relative;display:flex;align-items:center}
  .nav-link{
    position:relative;display:flex;align-items:center;font-family:var(--font-display);font-weight:700;
    text-transform:uppercase;letter-spacing:.03em;padding:.55rem .55rem;
    text-decoration:none;color:#fff;font-size:.86rem;white-space:nowrap;
    border-radius:var(--radius-sm);transition:color var(--dur) var(--ease);
  }
  .nav-link:hover,.nav-link[aria-expanded="true"],.nav-link[aria-current="page"]{color:var(--color-accent-on-bg)}
  .nav-link[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--color-primary)}
  .has-dropdown{position:relative}
  .dropdown{
    position:absolute;top:100%;left:0;min-width:230px;background:var(--color-surface);
    border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
    padding:.5rem;list-style:none;margin:0;opacity:0;visibility:hidden;display:flex;flex-direction:column;
    transform:translateY(6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  }
  .has-dropdown:hover > .dropdown,.has-dropdown:focus-within > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
  .dropdown a{
    display:flex;align-items:center;min-height:44px;padding:.55rem .7rem;border-radius:var(--radius-sm);
    text-decoration:none;color:var(--color-text);font-weight:400;font-size:.95rem;
  }
  .dropdown a:hover{background:var(--color-surface-2);color:var(--color-accent-on-bg)}
  .caret{margin-left:.3em;font-size:.65em;opacity:.85}
}
a.btn.header-cta{display:none}
@media (min-width:1000px){
  a.btn.header-cta{display:inline-flex;white-space:nowrap;flex-shrink:0;padding:.6rem 1rem;font-size:.88rem;min-height:auto}
}

/* Hamburger */
.hamburger{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:none;background:transparent;cursor:pointer;
  border-radius:var(--radius-sm);
}
.hamburger span{display:block;width:24px;height:2px;background:#fff;position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:#fff}
.hamburger span::before{top:-7px}
.hamburger span::after{top:7px}
@media (min-width:1000px){.hamburger{display:none}}

/* Mobile drawer (SW1 .sw-drawer) */
.mobile-drawer{
  /* overflow:hidden here (not just relying on the global html{overflow-x:clip})
     matters: .mobile-drawer__panel sits off-canvas via transform:translateX(100%)
     from right:0 when closed, which puts its painted box to the right of the
     viewport. Without clipping this fixed container itself, that off-canvas
     box was reachable via a right-swipe/overscroll gesture on mobile,
     dragging the whole page horizontally to reveal it (confirmed on
     /welfare/concussion at 375px — a real, swipe-reachable bug, not just a
     scrollWidth number). */
  position:fixed;inset:0;z-index:300;visibility:hidden;overflow:hidden;
}
.mobile-drawer[data-open="true"]{visibility:visible}
.mobile-drawer__scrim{
  position:absolute;inset:0;background:rgba(0,0,0,.65);opacity:0;transition:opacity .2s var(--ease);
}
.mobile-drawer[data-open="true"] .mobile-drawer__scrim{opacity:1}
.mobile-drawer__panel{
  position:absolute;top:0;right:0;height:100dvh;width:min(92vw,380px);
  background:var(--color-bg);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .28s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;border-left:1px solid var(--color-border);
}
.mobile-drawer[data-open="true"] .mobile-drawer__panel{transform:translateX(0)}
.mobile-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5);border-bottom:1px solid var(--color-border)}
.mobile-drawer__close{width:44px;height:44px;border:none;background:var(--color-surface);border-radius:50%;font-size:1.3rem;cursor:pointer;color:var(--color-text)}
.mobile-nav{list-style:none;margin:0;padding:var(--space-4)}
.mobile-nav li{border-bottom:1px solid var(--color-border)}
.mobile-nav > li:last-child{border-bottom:none}
.mobile-nav a{display:flex;align-items:center;min-height:48px;text-decoration:none;color:var(--color-text);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.1rem;padding:.4em 0}
.mobile-submenu{list-style:none;margin:0 0 var(--space-3);padding-left:var(--space-4)}
.mobile-submenu a{font-family:var(--font-body);font-weight:400;text-transform:none;font-size:1rem;min-height:44px;color:var(--color-text-soft)}
.mobile-group-label{display:block;font-weight:700;padding-top:.6em}
.mobile-drawer__footer{margin-top:auto;padding:var(--space-5);border-top:1px solid var(--color-border)}

@media (min-width:1000px){.mobile-drawer{display:none !important}}

/* ---------- Buttons (SW1 .sw-btn / .sw-btn--ghost) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:48px;padding:.85em 1.5em;border-radius:var(--radius-sm);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.02rem;text-decoration:none;cursor:pointer;white-space:nowrap;
  border:2px solid transparent;transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
  line-height:1.1;
  max-width:100%;
}
/* A handful of real buttons carry long link labels (e.g. /welfare/concussion's
   "View Guidelines: The Management of Sport-Related Concussion") — white-space:
   nowrap on those forces the button wider than a phone viewport, which
   overflows the whole page horizontally (confirmed: pushed html's layout
   width to 492px on a 375px viewport, reachable via an edge swipe despite
   html{overflow-x:clip}, since fixed-position descendants like the mobile
   nav drawer size off the inflated layout viewport, not the visual one).
   Letting buttons wrap below the width where short pill-style CTAs would
   ever need to is a safe, general fix. */
@media (max-width:640px){.btn{white-space:normal;text-align:center}}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-md)}
.btn-gold{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn-gold:hover{background:var(--color-primary-dark)}
.btn-outline{background:transparent;border:2px solid var(--color-border);color:var(--color-text)}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-accent-on-bg)}
.btn-ghost-light{background:transparent;border:2px solid rgba(255,255,255,.4);color:#fff}
.btn-ghost-light:hover{border-color:#fff;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:var(--space-6)}

/* ---------- Hero (SW1 .sw-hero / .sw-hero-motif) ----------
   Real Broadcast is NOT in SW1's MEDIA_VARIANTS list (Hero.tsx) — it's a
   motif-only hero, no photo: solid ink-black background, a diagonal
   three-bar stripe motif pinned to the right edge (accent / currentColor /
   accent), confirmed against the live reference. Photo heroes on inner
   pages still carry a real Dookie photo behind a scrim (SW1 gives every
   non-media variant that background-image option too), but the signature
   graphic is the three-bar motif, not the photo. */
.hero{position:relative;overflow:hidden;color:var(--color-hero-text);background:var(--color-hero-bg)}
.hero__media{position:absolute;inset:0}
/* object-position biased toward the top: team photos/action shots put
   subjects' heads near the top of frame — cropping symmetrically (the
   default) cuts heads off on wide/short hero bands. Losing some grass/feet
   off the bottom instead is the much safer default here. */
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:center 15%;opacity:.32}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,14,16,.85) 0%,rgba(11,14,16,.55) 45%,rgba(11,14,16,.25) 75%,rgba(11,14,16,.1) 100%)}
/* The skewed bars visually bleed well past their own layout box (skewX
   shears the painted shape sideways across the full hero height), so at
   any viewport where the centered .hero__content/.dual-hero__content column
   runs close to full width — which is every width below roughly 1500px,
   including "desktop" 1280–1440 laptops, not just phones/tablets — the
   bars cut across the headline and lede, producing white-text-on-white-bar
   patches that are flatly illegible. Confirmed at 375, 900, 1100 and even
   1280px. Since it's purely decorative (aria-hidden) with no functional
   value, the safe fix is to only show it once there's genuinely enough
   clear margin to the right of the 760px content column to guarantee no
   overlap, and keep it subtler even then. */
.hero__motif{position:absolute;inset:0;display:none;justify-content:flex-end;gap:clamp(10px,2vw,26px);pointer-events:none;opacity:.55}
.hero__motif i{display:block;width:clamp(48px,10vw,140px);transform:skewX(var(--skew-angle));transform-origin:top;font-style:normal}
@media (min-width:1500px){.hero__motif{display:flex}}
/* Bolder, cleaner bands — solid colour, not a translucent wash (the low
   opacity previously used made the teal bands read as muddy/dark against
   the ink-black hero instead of a crisp graphic statement). */
.hero__motif i:nth-child(1){background:var(--color-primary)}
.hero__motif i:nth-child(2){background:currentColor}
.hero__motif i:nth-child(3){background:var(--color-primary)}
.hero__content{position:relative;z-index:2;padding-block:clamp(3.5rem,9vw,7.5rem);max-width:760px;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.25rem)}
.hero--compact .hero__content{padding-block:clamp(2.75rem,7vw,5rem)}
.hero__eyebrow{
  font-family:var(--font-mono);display:inline-flex;align-items:center;gap:.6em;color:var(--color-accent-on-bg);
  font-weight:600;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem;
}
.hero__eyebrow::before{content:"";width:1.4rem;height:2px;background:var(--color-primary);display:inline-block}
.hero h1{color:#fff;max-width:none;margin:1rem 0 1.25rem}
.hero__lede{font-size:1.25rem;max-width:54ch;color:rgba(255,255,255,.78);margin-bottom:2rem}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.card__icon{
  width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--color-primary) 18%,transparent);color:var(--color-accent-on-bg);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);flex:none;
}
.card__icon svg{width:26px;height:26px}
.card h3{margin-bottom:var(--space-2)}
.card p:last-child{margin-bottom:0}
.card--link{text-decoration:none;color:inherit;display:block}

.program-card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.program-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.program-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-surface-2)}
.program-card__media img{width:100%;height:100%;object-fit:cover}
.program-card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 55%,rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.program-card:hover .program-card__media img{transform:scale(1.05)}
.program-card__media img{transition:transform .35s var(--ease)}
.program-card__body{padding:var(--space-5);flex:1;display:flex;flex-direction:column;gap:var(--space-2)}
.program-card__body h3{margin-bottom:0}
.program-card__tag{
  display:inline-block;align-self:flex-start;font-family:var(--font-mono);background:var(--color-primary);color:#fff;
  font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.25em .55em;border-radius:3px;
}

/* ---------- Pull quote / President welcome ---------- */
.pullquote{
  position:relative;background:var(--color-bg-alt);border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-8) var(--space-7);border-left:6px solid var(--color-primary);
}
.pullquote::before{
  content:"\201C";position:absolute;top:.1em;left:var(--space-6);font-family:var(--font-display);
  font-size:5rem;color:var(--teal-300);line-height:1;opacity:.5;
}
.pullquote blockquote{margin:0 0 var(--space-6);font-family:var(--font-display);font-weight:var(--heading-weight);text-transform:none;font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--color-text);max-width:66ch}
.pullquote .attribution{display:flex;align-items:center;gap:var(--space-3);font-weight:700}
.pullquote .attribution span{display:block;font-weight:500;color:var(--color-text-muted);font-size:.9em}

/* ---------- Info bands (training times, Auskick details, reg steps) ----------
   Card-row treatment with a circular icon badge per item. Replaces the old
   flat pale-teal box per client feedback ("needs a major improve"). */
.info-band{
  display:flex;flex-wrap:wrap;gap:var(--space-5);margin:0 0 var(--space-7);padding:0;
}
.info-band__item{
  flex:1 1 220px;min-width:190px;display:flex;align-items:center;gap:var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-primary);
  border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);box-shadow:var(--shadow-sm);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.info-band__item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.info-band__icon{
  width:52px;height:52px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--color-primary) 18%,transparent);color:var(--color-accent-on-bg);
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 40%,transparent);
}
.info-band__icon svg{width:24px;height:24px}
.info-band__text{min-width:0}
.info-band__item dt{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-soft);margin:0 0 .3em}
.info-band__item dd{margin:0;font-weight:700;font-size:1.02rem;font-family:var(--font-display);letter-spacing:.01em;color:var(--color-text)}
@media (max-width:640px){
  .info-band{flex-direction:column}
  .info-band__item{flex:1 1 auto}
}

/* ---------- Placeholder / honest-gap notice ---------- */
.notice{
  border:1px solid var(--color-border);border-left:3px solid var(--color-primary);background:var(--color-surface);border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-6);color:var(--color-text-soft);margin-block:var(--space-6);
}
.notice strong{color:var(--color-text)}
.notice--callout{border-color:color-mix(in srgb,var(--color-primary) 45%,transparent);border-left-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,transparent)}

/* ---------- Forms (mailto-based — no backend/POST endpoint on this static site) ---------- */
.form-row{margin-bottom:var(--space-4)}
.form-row label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4em}
.form-row input{
  width:100%;padding:.7em .9em;border-radius:var(--radius-sm);border:1px solid var(--color-border);
  background:var(--color-bg-alt);color:var(--color-text);font:inherit;
}
.form-row input:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}

/* ---------- Committee / people list ---------- */
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-5)}
.person{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-5);display:flex;gap:var(--space-4);align-items:flex-start;
}
.person>div:last-child{min-width:0;flex:1}
.person__name,.person__role{overflow-wrap:break-word}
.person__avatar{
  width:52px;height:52px;border-radius:50%;background:var(--teal-500);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.1rem;
}
.person__name{font-weight:700;margin-bottom:.15em}

/* ---------- Award cards (Best & Fairest) — crest badge + ghosted watermark ---------- */
.award-card{position:relative;overflow:hidden;padding-top:var(--space-7)}
.award-card__crest-ghost{
  position:absolute;top:50%;left:50%;width:230px;height:230px;transform:translate(-50%,-45%);
  opacity:.06;pointer-events:none;filter:grayscale(1) brightness(3);
}
.award-card__crest-ghost img{width:100%;height:100%;object-fit:contain}
.award-card__badge{
  position:relative;width:64px;height:64px;border-radius:50%;background:var(--color-bg-alt);
  border:2px solid var(--color-primary);padding:10px;flex:none;
}
.award-card__badge img{width:100%;height:100%;object-fit:contain}
.award-card__name{position:relative;margin:var(--space-3) 0 .2em;letter-spacing:.02em}
.person__role{font-size:.85rem;color:var(--color-accent-on-bg);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.35em}
.person__phone{font-weight:600;white-space:nowrap;text-decoration:none;color:var(--color-link)}

/* ---------- Sponsor carousel (SW1 .sw-sponsor-marquee, sitewide, above footer) ---------- */
.sponsor-carousel{background:var(--color-bg-alt);color:var(--color-text);padding-block:var(--space-8);position:relative;overflow:hidden;border-block:1px solid var(--color-border)}
.sponsor-carousel .section-head{position:relative;z-index:1}
.sponsor-carousel h2{color:var(--color-text)}

/* True auto-scrolling marquee (not a manual/draggable slider): the track's
   content is rendered twice by build.mjs and animated continuously; at
   -50% translateX it lines up exactly where it started, so the loop is
   seamless. Pauses on hover/focus so a visitor can actually click a logo. */
.sponsor-marquee{position:relative;z-index:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sponsor-marquee__track{display:flex;align-items:stretch;gap:var(--space-6);width:max-content;animation:sponsor-marquee 130s linear infinite}
.sponsor-marquee:hover .sponsor-marquee__track,.sponsor-marquee:focus-within .sponsor-marquee__track{animation-play-state:paused}
@keyframes sponsor-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .sponsor-marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .sponsor-marquee__track[aria-hidden] ~ .sponsor-marquee__track,
  .sponsor-marquee__track > [aria-hidden]{display:none}
}
.sponsor-tile{margin:0;flex:0 0 220px}
.sponsor-tile a,.sponsor-tile > span{
  display:flex;align-items:center;justify-content:center;height:110px;width:100%;background:#fff;border-radius:var(--radius-lg);
  border:1px solid var(--color-border);padding:var(--space-5);box-shadow:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  box-sizing:border-box;
}
.sponsor-tile a:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.sponsor-tile__logo{max-height:56px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-tile--cta a{
  flex-direction:column;gap:.3em;background:var(--color-primary);border-color:var(--color-primary);color:#fff;text-align:center;
}
.sponsor-tile__cta-title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:1rem}
.sponsor-tile__cta-sub{font-size:.78rem;font-weight:600;opacity:.9}

/* ---------- Sponsor tiers (/sponsors page) ---------- */
.sponsor-tier{margin-bottom:var(--space-9)}
.sponsor-tier h3{
  text-align:center;letter-spacing:.1em;text-transform:uppercase;font-size:1rem;
  color:var(--color-text-soft);margin-bottom:var(--space-5);
  font-family:var(--font-display);font-weight:700;
}
.sponsor-tier.tier-gold h3{color:var(--color-accent-on-bg);font-size:1.15rem}
.sponsor-tier.tier-silver h3{color:var(--color-text)}
.sponsor-tier__row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-6)}
.sponsor-tile--tier{
  display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:none;text-decoration:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.sponsor-tile--tier:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}

/* Gold — largest, most prominent tiles */
.sponsor-tile--gold{height:190px;width:280px;padding:var(--space-6);border-width:2px;border-color:var(--color-primary);gap:var(--space-6)}
img.sponsor-tile__logo--gold{max-width:100%;max-height:130px;width:auto;height:auto;object-fit:contain}
.sponsor-tile__text.sponsor-tile__logo--gold{font-family:var(--font-display);font-weight:700;font-size:1.15rem;text-align:center;line-height:var(--lh-snug);color:var(--ink-900)}

/* Silver — medium tiles */
.sponsor-tile--silver{height:140px;width:230px;padding:var(--space-5)}
img.sponsor-tile__logo--silver{max-width:100%;max-height:88px;width:auto;height:auto;object-fit:contain}
.sponsor-tile__text.sponsor-tile__logo--silver{font-family:var(--font-display);font-weight:700;font-size:.98rem;text-align:center;line-height:var(--lh-snug);color:var(--ink-900)}

/* Bronze — smaller, denser tiles */
.sponsor-tile--bronze{height:110px;width:190px;padding:var(--space-4)}
img.sponsor-tile__logo--bronze{max-width:100%;max-height:66px;width:auto;height:auto;object-fit:contain}
.sponsor-tile__text.sponsor-tile__logo--bronze{font-family:var(--font-display);font-weight:700;font-size:.85rem;text-align:center;line-height:var(--lh-snug);color:var(--ink-900)}

/* Some supplied logo files are white/light artwork meant for a dark
   background (their normal on-brand display) — give just those tiles a
   dark surface so the mark stays visible instead of vanishing on our
   white tile background. */
.sponsor-tile--logo-dark{background:var(--ink-800);border-color:var(--ink-800)}
.sponsor-tile--logo-dark:hover{border-color:var(--color-primary)}

.sponsor-tier__more{margin-top:var(--space-5);color:var(--color-text-muted);font-size:.92rem}
.sponsor-tier__more a{font-weight:600}

.sponsor-tile__text{display:block;padding:var(--space-2)}

/* ---------- Home hero (SW1 HeroStandard — .sw-hero, motif-only) ----------
   Confirmed against both the source (Hero.tsx: "broadcast" is absent from
   MEDIA_VARIANTS, so it renders HeroStandard, not a photo hero) and the
   live reference (sportsweb-one-v1.vercel.app/?club=dookie-united&variant=
   broadcast): solid ink-black hero, diagonal three-bar motif pinned right,
   accent bars + eyebrow + h1 + lede + CTAs on the left. No home photo. */
.bars-icon{display:flex;gap:6px;height:26px;margin-bottom:1rem}
.bars-icon i{width:12px;transform:skewX(var(--skew-angle));border-radius:1px;font-style:normal;display:block}
.bars-icon i:nth-child(1){background:var(--color-primary)}
.bars-icon i:nth-child(2){background:var(--color-text)}
.bars-icon i:nth-child(3){background:var(--color-primary)}

.dual-hero{position:relative;overflow:hidden;background:var(--color-hero-bg);color:var(--color-hero-text)}
.dual-hero__inner{position:relative;max-width:760px;margin-inline:0;padding-inline:clamp(1.1rem,4vw,2.25rem);padding-block:clamp(3.5rem,9vw,7.5rem)}
.dual-hero__content{max-width:none}
.dual-hero__content h1{color:#fff;margin:1rem 0 1.25rem}
.dual-hero__lede{font-size:1.25rem;color:rgba(255,255,255,.78);max-width:54ch;margin-bottom:1.5rem}
.dual-hero__codes{display:flex;gap:.75rem;margin-bottom:2rem;flex-wrap:wrap}
.dual-hero__code{
  display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;
  padding:.5em 1.1em;border-radius:var(--radius-sm);font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;
}
.dual-hero__code svg{width:1.1em;height:1.1em}

/* ---------- Quick-links bar (SW1 .sw-quicklinks, under the home hero) ---------- */
.quick-links-bar{
  display:flex;flex-wrap:wrap;background:var(--color-bg-invert);
}
.quick-links-bar a{
  flex:1 1 200px;display:flex;align-items:center;justify-content:center;gap:.8em;
  color:var(--color-text-invert);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.03em;text-transform:uppercase;
  padding:1.4em 1em;border-right:1px solid var(--silver-150);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.quick-links-bar a:last-child{border-right:none}
.quick-links-bar a:hover{background:var(--color-primary);color:#fff}
.quick-links-bar a span{margin-left:auto;color:var(--color-primary)}
.quick-links-bar a:hover span{color:#fff}

/* ---------- Get Involved band ---------- */
.get-involved-band{background:var(--color-primary);color:#fff;padding-block:var(--space-9)}
.get-involved-band h2{color:#fff;max-width:none}
.get-involved-band p{color:rgba(255,255,255,.9);max-width:56ch;margin-inline:auto}
.btn-outline-light{
  display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;color:#fff;background:transparent;
  padding:.75em 1.5em;border-radius:var(--radius-pill);font-weight:700;font-size:.9rem;text-decoration:none;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.btn-outline-light:hover{background:#fff;color:var(--color-primary-darker)}

/* ---------- Gallery / carousel ---------- */
.carousel{position:relative}
.carousel__track{
  display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-3);
  scrollbar-width:thin;
}
.carousel__track > *{scroll-snap-align:start;flex:0 0 clamp(220px,70vw,340px)}
.carousel__track img{border-radius:var(--radius-md);aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-5)}
.gallery-grid figure{margin:0;border-radius:var(--radius-md);overflow:hidden;background:var(--teal-100)}
.gallery-grid img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;transition:transform .3s var(--ease)}
.inline-photo{width:100%;height:auto;display:block;border-radius:var(--radius-md)}
.gallery-grid a:hover img{transform:scale(1.04)}
.gallery-grid figcaption{padding:.6em .2em;font-size:.85rem;color:var(--color-text-muted)}

/* ---------- FAQ / accordion ---------- */
.accordion-item{border-bottom:1px solid var(--color-border)}
.accordion-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-5) 0;font-weight:700;font-family:var(--font-display);font-size:1.05rem;gap:var(--space-4);
}
.accordion-item summary::-webkit-details-marker{display:none}
.accordion-item summary::after{content:"+";font-size:1.4rem;color:var(--color-primary);flex:none}
.accordion-item[open] summary::after{content:"\2212"}
.accordion-item .accordion-body{padding-bottom:var(--space-5)}

/* ---------- Steps list ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps > li{
  counter-increment:step;position:relative;padding:var(--space-5) 0 var(--space-5) 3.2em;border-bottom:1px solid var(--color-border);
}
.steps > li:last-child{border-bottom:none}
.steps > li::before{
  content:counter(step);position:absolute;left:0;top:var(--space-5);width:2.2em;height:2.2em;border-radius:50%;
  background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);
}
.steps h3{margin-bottom:.3em}
.steps ul{margin-top:.6em}

/* ---------- Stat strip ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-5);margin-block:var(--space-7)}
.stat{background:var(--color-bg-alt);border-radius:var(--radius-md);padding:var(--space-5);text-align:center}
.stat__num{display:block;font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--color-primary)}
.stat__label{font-size:.85rem;color:var(--color-text-muted)}

/* ---------- Policy list ---------- */
.policy-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.policy-list li{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);
}
.policy-list a{font-weight:700;text-decoration:none;white-space:nowrap}

/* ---------- Table-ish contact rows ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6)}
.contact-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.contact-card a{font-weight:700;word-break:break-word}

/* ---------- Map embed (Contact + Auskick) ---------- */
.map-embed{margin-top:var(--space-6)}
.map-embed iframe{
  display:block;width:100%;height:380px;max-width:100%;
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.map-embed__directions{margin-top:var(--space-5)}

/* ---------- Program pages (Football/Netball Seniors/Juniors) ---------- */
.program-copy{max-width:74ch}
.program-side-photo{
  float:right;max-width:300px;margin:0 0 var(--space-7) var(--space-8);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-border);
}
@media (max-width:640px){
  .program-side-photo{float:none;max-width:100%;margin:0 0 var(--space-6)}
}
.program-standout{
  margin:var(--space-7) 0;padding:var(--space-6) var(--space-7);border-left:4px solid var(--color-primary);
  background:var(--color-surface);border-radius:var(--radius-md);font-family:var(--font-display);
  text-transform:none;font-size:var(--fs-lg);font-weight:var(--heading-weight);line-height:var(--lh-snug);color:var(--color-text);
  max-width:60ch;text-wrap:pretty;
}
.team-badge{border-top:4px solid var(--color-primary);padding-top:var(--space-7)}
.team-badge__icon{
  width:60px;height:60px;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 18%,transparent);color:var(--color-accent-on-bg);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 40%,transparent);
}
.team-badge__icon svg{width:28px;height:28px}
.team-badge__name{margin:0;font-size:1.1rem}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{padding-block:var(--space-4);font-size:.85rem;color:var(--color-text-soft)}
.breadcrumbs a{color:var(--color-text-soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--color-accent-on-bg)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:0}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:.5em;color:var(--color-border)}

/* ---------- Footer (SW1 .sw-footer — inverted: light paper band on the
   dark theme, echoing the Get Involved/quicklinks contrast-band pattern
   confirmed in blocks.css: background:var(--bg-invert), which on broadcast
   resolves to the club's paper colour, not another dark shade). ---------- */
.site-footer{background:var(--color-bg-invert);color:var(--color-text-invert);padding-block:var(--space-9) var(--space-6)}
.site-footer a{color:var(--color-text-invert)}
.site-footer h2,.site-footer h3{color:var(--color-text-invert)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-7);margin-bottom:var(--space-8);padding-bottom:var(--space-7);border-bottom:1px solid var(--silver-150)}
.footer-brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.footer-brand img{width:52px;height:52px}
.footer-brand strong{font-family:var(--font-display);font-size:1.15rem;color:var(--color-text-invert)}
.footer-col h4{color:var(--color-text-invert);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-4);font-family:var(--font-body);font-weight:700}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:.65em}
.footer-col a{text-decoration:none;color:var(--silver-700)}
.footer-col a:hover{color:var(--color-primary-dark);text-decoration:underline}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-4)}
.footer-social a{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--silver-150);display:flex;align-items:center;justify-content:center;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.footer-social a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.footer-social svg{width:20px;height:20px;fill:currentColor}
.acknowledgement{
  display:flex;align-items:flex-start;gap:var(--space-4);max-width:80ch;
}
.acknowledgement p{font-size:.88rem;color:var(--silver-700);margin:0}
.flag-pair{display:flex;gap:var(--space-2);flex:none;margin-top:.2em}
.flag-icon{width:30px;height:20px;border-radius:2px;flex:none;box-shadow:0 0 0 1px var(--silver-150)}
@media (max-width:560px){
  .acknowledgement{flex-direction:column;gap:var(--space-3)}
}
.footer-bottom{
  border-top:1px solid var(--silver-150);margin-top:var(--space-6);padding-top:var(--space-6);
  display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--silver-700);
}
/* The global `p{color:var(--color-text)}` base rule (bright, for the dark
   site body) directly matches these <p> elements and wins over the merely
   *inherited* dark-on-light footer colour — inheritance always loses to any
   matching rule, regardless of specificity. Re-assert explicitly here. */
.footer-bottom p,.credit{color:var(--silver-700)}
.footer-bottom nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-4);margin:0;padding:0}
.footer-bottom nav a{color:var(--silver-700);text-decoration:none}
.footer-bottom nav a:hover{color:var(--color-primary-dark);text-decoration:underline}
.credit a{color:var(--color-primary-dark);font-weight:600}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:150;
  width:50px;height:50px;border-radius:50%;background:var(--color-primary);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.back-to-top[data-visible="true"]{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top svg{width:20px;height:20px}

/* ---------- PWA install prompt ---------- */
.install-prompt{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--color-surface);border-top:1px solid var(--color-border);
  box-shadow:0 -8px 24px rgba(0,0,0,.25);
  padding:env(safe-area-inset-bottom,0) 0 0 0;
  animation:install-prompt-in .3s var(--ease);
}
@keyframes install-prompt-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
.install-prompt__inner{
  max-width:900px;margin:0 auto;padding:var(--space-4) var(--space-5);
  display:flex;align-items:center;gap:var(--space-4);
}
.install-prompt__icon{width:44px;height:44px;flex:none;border-radius:var(--radius-md);object-fit:contain;background:#fff;padding:4px}
.install-prompt__text{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.install-prompt__text strong{color:var(--color-text);font-size:.98rem}
.install-prompt__text span{color:var(--color-text-soft);font-size:.86rem}
.install-prompt__actions{display:flex;align-items:center;gap:var(--space-3);flex:none}
.install-prompt__actions .btn{padding:.55rem 1.2rem;font-size:.88rem}
.install-prompt__dismiss{
  background:none;border:none;color:var(--color-text-soft);cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.install-prompt__dismiss:hover{color:var(--color-text);background:var(--color-surface-2)}
.install-prompt__dismiss svg{width:18px;height:18px}
@media (max-width:640px){
  .install-prompt__inner{padding:var(--space-3) var(--space-4);gap:var(--space-3)}
  .install-prompt__text span{display:none}
  .install-prompt__icon{width:36px;height:36px}
}
/* Keep back-to-top clear of the install banner while it's showing. */
body:has(.install-prompt:not([hidden])) .back-to-top{bottom:calc(var(--space-5) + 84px)}

/* ---------- Utility ---------- */
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.max-w-prose{max-width:66ch}
/* SW1 .sw-eyebrow: mono font, wide tracking, accent colour, short dash
   rule before the text — not a pill badge. */
.eyebrow{
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-accent-on-bg);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:var(--space-4);
}
.eyebrow::before{content:"";width:1.4rem;height:2px;background:var(--color-primary);display:inline-block}
.section-head{max-width:70ch;margin-bottom:var(--space-7)}
.section-head.text-center{margin-inline:auto}
.section-head.text-center .eyebrow{justify-content:center}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.nowrap{white-space:nowrap}
.mailto{word-break:break-word}

/* 404 */
.error-page{text-align:center;padding-block:var(--space-11)}
.error-page .code{font-family:var(--font-display);font-size:6rem;color:var(--teal-300);line-height:1;margin-bottom:var(--space-4)}

@media (max-width:640px){
  section{padding-block:var(--space-7)}
  .pullquote{padding:var(--space-6) var(--space-5)}
}

/* ---------- Facebook feed embed ---------- */
.card--news{display:flex;flex-direction:column}
.fb-embed{
  margin:var(--space-4) 0 0;border-radius:var(--radius-md);overflow:hidden;
  background:var(--color-bg-alt);border:1px solid var(--color-border);
  min-height:220px;display:flex;justify-content:center;
}
.fb-embed iframe{display:block;width:100%;max-width:940px}
@media (max-width:480px){
  .fb-embed iframe{height:900px}
}