/* ============================================================
   THE BIGG PULL, Marketing Site Design System · v2.1
   BLACK & GOLD CI (2026 Power Team poster) · mostly-dark cinematic bands
   · metallic-gradient gold display headings · pure black / gold / white
   NOTE: legacy token names (--red / --navy) are retained but now hold GOLD
   values so all existing var() references recolour automatically.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:"Proxima Nova"; src:url("../fonts/ProximaNova-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Proxima Nova"; src:url("../fonts/ProximaNova-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Alfa Slab One"; src:url("../fonts/AlfaSlabOne-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Impact LT"; src:url("../fonts/Impact.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Artbrush"; src:url("../fonts/Artbrush.ttf") format("truetype"); font-weight:400; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  /* ---- Gold (primary CI), legacy names kept, values are gold now ---- */
  --gold:#C9A227;         /* core metallic gold (poster) */
  --gold-bright:#EBCB6E;  /* bright highlight / hover */
  --gold-deep:#8A6A22;    /* deep bronze */
  --gold-pale:#F6E5A6;    /* pale top highlight for gradients */
  --gold-grad:linear-gradient(180deg,#F6E5A6 0%,#E7C86A 30%,#C9A227 55%,#9A7620 74%,#EBCB72 100%);
  --red:var(--gold);          /* legacy alias → gold */
  --red-bright:var(--gold-bright); /* legacy alias → bright gold */
  --navy:var(--gold-deep);    /* legacy alias → deep gold (blue is dropped) */
  --navy-deep:#5f4718;
  --ink:#0D0D0D;          /* cinematic black */
  --ink-2:#141414;
  --ink-3:#1c1c1f;
  --ink-0:#070707;        /* deepest black */
  --paper:#ffffff;
  --paper-2:#f4f4f4;
  --line:rgba(201,162,39,.16);   /* gold hairline on dark */
  --line-dark:#e4e4e4;
  --txt-dark:#16181d;
  --txt-mute:#6b7280;
  --txt-on-dark:#ffffff;
  --txt-on-dark-mute:rgba(255,255,255,.66);
  --rope:#c9a86b;         /* rope accent (already gold family) */
  --on-accent:#141414;    /* text colour on the accent (gold) */
  --maxw:1200px;
  --r:10px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --font-body:"Proxima Nova",system-ui,Segoe UI,Arial,sans-serif;
  --font-display:"Alfa Slab One","Impact LT",Impact,system-ui,sans-serif;
  --font-impact:"Impact LT",Impact,"Alfa Slab One",sans-serif;
  --font-script:"Artbrush",cursive;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--font-body);color:var(--txt-dark);background:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--red)}
.eyebrow.on-dark{color:var(--red-bright)}
.script{font-family:var(--font-script);font-weight:400}

/* Display headings, huge condensed uppercase */
/* Sentence case, matching the portal - its page heading reads "Login", not "LOGIN".
   Small eyebrow and label elements keep their own uppercase, exactly as the portal does. */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:400;line-height:1.02;letter-spacing:.005em}
h1{font-size:clamp(2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem)}
/* .hero h1 italic removed 2026-08-21 - the slanted poster hero. */

/* Metallic-gradient gold display type (poster look), hero + section heads */
.gold-text,
.hero h1,
.section-head h1,.section-head h2,
.band--dark .section-head h1,.band--dark .section-head h2,
.band--ink2 .section-head h1,.band--ink2 .section-head h2{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Keep headings solid ink on the retained light bands (contrast) */
.band--light .section-head h1,.band--light .section-head h2,
.band--paper2 .section-head h1,.band--paper2 .section-head h2,
.band--navy .section-head h1,.band--navy .section-head h2{
  background:none;-webkit-text-fill-color:var(--txt-dark);color:var(--txt-dark);
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.86rem;padding:.95em 1.7em;border-radius:999px;transition:.18s ease;white-space:nowrap}
.btn-red{background:var(--gold-grad);color:#141414;box-shadow:0 6px 18px rgba(201,162,39,.28)}
.btn-red:hover{background:linear-gradient(180deg,#FBEEBE,#EBCB6E 55%,#C9A227);color:#141414;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px #fff;background:rgba(255,255,255,.08)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn-lg{padding:1.1em 2.2em;font-size:.95rem}
.btn .live-dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ---------- Top marquee ticker ---------- */
.ticker{background:var(--red);color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;overflow:hidden;white-space:nowrap}
.ticker__track{display:inline-block;padding:8px 0;animation:scroll-x 28s linear infinite}
.ticker__track span{padding:0 1.4rem;opacity:.95}
.ticker__track span::after{content:"●";margin-left:1.4rem;color:rgba(255,255,255,.5)}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(13,13,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:28px;max-width:var(--maxw);margin:0 auto;padding:12px 24px}
.nav__logo{display:flex;align-items:center;gap:12px}
.nav__logo img{height:46px;width:auto}
.nav__links{display:flex;gap:19px;margin:0 auto}
.nav__links a{color:rgba(255,255,255,.82);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.78rem;padding:6px 0;position:relative;white-space:nowrap}
.nav__links a:hover,.nav__links a.active{color:#fff}
.nav__links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--red)}
.nav__links a.btn-red{display:none}
.nav__cta{display:flex;align-items:center;gap:14px}
.nav__social{display:flex;align-items:center;gap:12px}
.nav__social a{color:rgba(255,255,255,.78);display:flex;transition:.18s}
.nav__social a:hover{color:var(--red-bright)}
.nav__social svg{width:20px;height:20px;display:block}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav__burger span{width:24px;height:2px;background:#fff;transition:.2s}

/* ---------- Sections / banding ---------- */
section{position:relative}
.band{padding:clamp(56px,8vw,110px) 0}
.band--dark{background:var(--ink);color:var(--txt-on-dark)}
.band--ink2{background:var(--ink-2);color:var(--txt-on-dark)}
.band--navy{background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#fff}
.band--light{background:var(--paper);color:var(--txt-dark)}
.band--paper2{background:var(--paper-2);color:var(--txt-dark)}
.band--dark .eyebrow{color:var(--red-bright)}
.band--navy .eyebrow{color:#fff;opacity:.8}
.section-head{max-width:760px;margin-bottom:42px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{margin-top:14px;font-size:1.05rem;color:var(--txt-mute)}
.band--dark .section-head p,.band--navy .section-head p,.band--ink2 .section-head p{color:var(--txt-on-dark-mute)}

/* Rope texture divider */
/* Flowing rope, one continuous rope that bridges two sections (pulled toward the centre) */
.rope-flow{position:relative;z-index:5;height:120px;margin:-52px 0;pointer-events:none}
.rope-flow{overflow:hidden}
.rope-flow svg{display:block;width:100%;height:100%;filter:drop-shadow(0 5px 7px rgba(0,0,0,.5))}
.rope-flow path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.rope-flow .r-core{stroke:#b8965a;stroke-width:15}
.rope-flow .r-shade{stroke:#6f5327;stroke-width:15;stroke-dasharray:5 9;stroke-linecap:butt;opacity:.5}
.rope-flow .r-hi{stroke:#efd7a0;stroke-width:4}
@media(max-width:640px){ .rope-flow{height:84px;margin:-34px 0} .rope-flow .r-core,.rope-flow .r-shade{stroke-width:11} }

/* Real braided-rope divider (photo), threaded between sections down the page */
.rope-real{position:relative;z-index:5;height:46px;margin:-22px 0;pointer-events:none;
  background:url("../img/rope-strip.png") repeat-x left center;background-size:auto 46px;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.5))}
@media(max-width:640px){ .rope-real{height:32px;margin:-15px 0;background-size:auto 32px} }

/* ---------- Hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;background:#000}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.62}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,13,13,.35) 0%,rgba(13,13,13,.2) 40%,rgba(13,13,13,.95) 100%),
             linear-gradient(90deg,rgba(13,13,13,.75),rgba(13,13,13,.1))}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 24px 64px;width:100%}
.hero__kicker{display:inline-block;background:var(--gold-grad);color:#141414;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;padding:7px 14px;border-radius:6px;margin-bottom:22px}
.hero h1{max-width:16ch;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.hero h1 em{color:var(--red-bright);font-style:italic}
.hero__tag{font-family:var(--font-script);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--rope);margin:14px 0 8px;text-transform:none}
.hero__sub{max-width:54ch;font-size:1.1rem;color:rgba(255,255,255,.85);margin-bottom:28px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
/* Centred, because the media launch hero is pre-cropped to 16:9 rather than needing the 86%
   the old studio shot did. Darker than the site-wide .62: this is a bright daylight frame with
   white banners and pale foliage exactly where the headline sits, and at .62 the copy had
   nothing to sit against. */
.hero--home .hero__bg img{object-position:center 50%;opacity:.45}
.hero--home .hero__bg::after{background:
  linear-gradient(180deg,rgba(13,13,13,.5) 0%,rgba(13,13,13,.12) 34%,rgba(13,13,13,.35) 66%,rgba(13,13,13,.82) 100%),
  linear-gradient(90deg,rgba(13,13,13,.82) 0%,rgba(13,13,13,.35) 42%,rgba(13,13,13,0) 70%)}
.hero--page{min-height:52vh}
.hero--page h1{max-width:22ch}

/* ---------- Stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stats .stat{background:var(--ink);padding:30px 20px;text-align:center}
.band--navy .stats{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2)}
.band--navy .stats .stat{background:transparent}
.stat__num{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);color:#fff;line-height:1}
.stat__num .u{color:var(--red-bright)}
.stat__lbl{margin-top:8px;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--txt-on-dark-mute);font-weight:700}

/* ---------- Split photo block ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;min-height:480px}
.split__media{position:relative;height:100%;min-height:380px;overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.split__body{padding:clamp(36px,5vw,72px)}
.split--rev .split__media{order:2}
.split__body h2{margin-bottom:18px}
.split__body p{margin-bottom:14px}
.band--dark .split__body p{color:var(--txt-on-dark-mute)}

/* ---------- Live coverage banner ---------- */
.live-banner{background:linear-gradient(120deg,#161206,#0d0d0d 70%);color:#fff;border:1px solid rgba(201,162,39,.42);border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-columns:1.2fr 1fr;box-shadow:var(--shadow)}
.live-banner__body{padding:clamp(32px,4vw,56px)}
.live-banner__badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.74rem;background:rgba(0,0,0,.25);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.live-banner__badge .live-dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.live-banner__media{position:relative;min-height:240px}
.live-banner__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.live-banner__media::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;color:#fff}

/* ---------- Power team mystery grid ---------- */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.mystery{aspect-ratio:1/1;border-radius:var(--r);background:
   radial-gradient(circle at 50% 35%,rgba(201,162,39,.32),transparent 60%),var(--ink-3);
  border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden;transition:.2s}
.mystery:hover{transform:translateY(-4px);border-color:var(--red)}
.mystery__q{font-family:var(--font-display);font-size:2.4rem;color:rgba(255,255,255,.22)}
.mystery.confirmed{background:linear-gradient(160deg,var(--navy),var(--navy-deep))}
.mystery.confirmed .mystery__q{color:#fff;font-size:1.5rem}
.mystery__tag{position:absolute;bottom:8px;left:8px;right:8px;text-align:center;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--txt-on-dark-mute);font-weight:700}

/* ---------- Power Team cards (whole card = one tap to open the profile) ---------- */
.team-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;max-width:1120px;margin:0 auto}
.pt-card{position:relative;display:block;width:100%;aspect-ratio:3/4;border:0;padding:0;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-3);color:#fff;cursor:pointer;font-family:inherit;text-align:left;box-shadow:0 10px 26px rgba(0,0,0,.3);-webkit-tap-highlight-color:transparent;transition:transform .25s ease,box-shadow .25s ease}
.pt-card>img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;transition:transform .35s ease}
.pt-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.88) 100%);pointer-events:none}
.pt-card__no{position:absolute;top:10px;left:10px;z-index:2;width:30px;height:30px;display:grid;place-items:center;background:var(--gold-grad);color:#141414;border-radius:6px;font-family:var(--font-display);font-size:1rem;line-height:1}
.pt-card__name{position:absolute;left:0;right:0;bottom:44px;z-index:2;padding:0 14px;color:#fff;font-family:var(--font-display);text-transform:uppercase;font-size:1.02rem;line-height:1.04}
.pt-card__cta{position:absolute;left:14px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--red);padding:6px 12px;border-radius:999px}
.pt-card__cta::after{content:"\2192"}
.pt-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.45)}
.pt-card:hover>img{transform:scale(1.06)}
.pt-card:active{transform:scale(.99)}
.pt-card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pt-card--soon{cursor:default}
.pt-card--soon .pt-card__cta{background:rgba(255,255,255,.16)}
.pt-card--soon .pt-card__cta::after{content:""}
.pt-card--soon:hover{transform:none;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.pt-card--soon:hover>img{transform:none}

/* ---------- Power Team roster ---------- */
.roster{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(10,auto);grid-auto-flow:column;gap:10px 26px;max-width:900px;margin:0 auto}
.roster__item{display:flex;align-items:center;gap:14px;background:var(--ink-3);border:1px solid var(--line);border-radius:8px;padding:12px 16px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#fff;font-size:.95rem}
.roster__no{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;background:var(--gold-grad);color:#141414;border-radius:6px;font-family:var(--font-display);font-size:1rem;line-height:1}
.roster__item em{color:var(--rope);font-style:normal;text-transform:none}
@media(max-width:640px){ .roster{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row} }

/* ---------- Cards (updates / generic) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--paper);border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden;transition:.2s}
.band--dark .card,.band--ink2 .card{background:var(--ink-3);border-color:var(--line);color:#fff}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card__media{aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .card__media img{transform:scale(1.06)}
/* Photo (non-video) news cards: fill the frame but keep faces in view (portraits sit high) */
.news-card--photo .card__media img{object-fit:cover;object-position:center top}
.article__media.article__media--photo{background:#0b0b0b;display:flex;justify-content:center;overflow:hidden}
.article__media.article__media--photo img{width:auto;height:auto;max-width:100%;max-height:640px;object-fit:contain}
.card__body{padding:20px}
/* Cards that end in a call to action line their buttons up on one baseline.
   Grid already makes sibling cards equal height, but the button sat directly under copy of
   whatever length, so the "Five Ways To Join The Pull" row put five buttons at five
   different heights. Making the card a flex column lets margin-top:auto push the button to
   the bottom of whatever height the row settles on.
   align-self matters: .btn is inline-flex, so a flex parent's default align-items:stretch
   would blow it out to full card width and change every one of these buttons.
   :not(:last-child) keeps the paragraph gap off news cards, whose copy IS the last child. */
.card{display:flex;flex-direction:column}
.card__body{display:flex;flex-direction:column;flex:1}
.card__body>p:not(:last-child){margin-bottom:14px}
.card__body>.btn:last-child{margin-top:auto;align-self:flex-start}
.card__tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--red);font-weight:700}
.card h3{font-size:1.15rem;margin:8px 0;line-height:1.05}
.card p{font-size:.92rem;color:var(--txt-mute)}
.band--dark .card p,.band--ink2 .card p{color:var(--txt-on-dark-mute)}

/* ---------- Sponsors ---------- */
.tier{margin-bottom:40px}
.tier__label{text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;margin-bottom:18px;color:var(--rope)}
.sponsor-row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
/* Sizes bumped 2026-08-19 ("make the logos bigger"). Fixed px throughout — not the
   percentage-in-an-auto-row pattern that bit the charity wall, so no circular-height risk
   resizing this directly. Tiles are <a> now that every sponsor links to their own site;
   text-decoration:none keeps the tile from picking up a default link underline. */
.sponsor{background:#fff;border-radius:var(--r);display:grid;place-items:center;padding:26px 34px;min-width:200px;min-height:110px;text-decoration:none;transition:transform .2s, box-shadow .2s}
.sponsor:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.sponsor img{max-height:78px;width:auto;filter:saturate(1)}
.sponsor--ghost{background:rgba(255,255,255,.06);border:1px dashed var(--line);color:var(--txt-on-dark-mute);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
/* /sponsors goes a further step up ("increase logo sizes & make cards bigger" — homepage
   only asked for bigger logos, not bigger cards, hence this being page-scoped rather than
   just raising the base rule again). <body class="page-sponsors"> on sponsors.html only —
   the first page-scoping hook introduced on this site; there was no prior convention. */
.page-sponsors .sponsor{padding:32px 40px;min-width:240px;min-height:140px}
.page-sponsors .sponsor img{max-height:110px}

/* ---------- Shop teaser ---------- */
.shop-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.shop-item{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:24px;text-align:center;color:#fff;transition:.2s}
.shop-item:hover{transform:translateY(-4px);border-color:var(--red)}
.shop-item .emoji{font-size:2.6rem}
.shop-item h3{font-size:1.05rem;margin:10px 0 4px}
.shop-item .price{color:var(--rope);font-weight:700}

/* ---------- Route ---------- */
.route{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.route__map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.route__stretches{display:grid;gap:14px}
.stretch{padding:18px 20px;border-radius:var(--r);background:var(--ink-3);border-left:4px solid var(--red)}
.band--light .stretch{background:var(--paper-2);border-left-color:var(--navy)}
.stretch h3{font-size:1.05rem}
.stretch p{font-size:.9rem;color:var(--txt-on-dark-mute)}
.band--light .stretch p{color:var(--txt-mute)}

/* ---------- Timeline (apply) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.step{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative}
.band--light .step{background:#fff;border-color:var(--line-dark)}
.step::before{counter-increment:s;content:counter(s);font-family:var(--font-display);font-size:2.4rem;color:var(--red);line-height:1}
.step h3{margin:6px 0 10px;font-size:1.2rem}
.step p,.step li{font-size:.92rem;color:var(--txt-mute)}
.band--dark .step p,.band--dark .step li{color:var(--txt-on-dark-mute)}
.step li{padding-left:18px;position:relative;margin-top:6px}
.step li::before{content:"▸";position:absolute;left:0;color:var(--red)}

/* ---------- Forms ---------- */
.form{display:grid;gap:18px;max-width:680px}
.form.cols{grid-template-columns:1fr 1fr}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;color:var(--txt-mute)}
.band--dark .field label,.band--navy .field label{color:var(--txt-on-dark-mute)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border-radius:8px;border:1px solid var(--line-dark);
  background:#fff;font:inherit;color:var(--txt-dark)}
.band--dark .field input,.band--dark .field select,.band--dark .field textarea,
.band--navy .field input,.band--navy .field select,.band--navy .field textarea{background:var(--ink-3);border-color:var(--line);color:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red)}
.field textarea{min-height:130px;resize:vertical}
.form .note{font-size:.82rem;color:var(--txt-mute)}

/* ---------- Contact cards ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.contact-card{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:24px;color:#fff}
.contact-card h3{font-size:1.1rem}
.contact-card .role{color:var(--rope);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;margin-bottom:10px}
.contact-card a{color:rgba(255,255,255,.8)}
.contact-card a:hover{color:#fff}

/* ---------- Newsletter ---------- */
.newsletter{display:grid;grid-template-columns:1fr auto;gap:12px;max-width:560px}
.newsletter input{padding:15px 16px;border-radius:999px;border:1px solid var(--line);background:var(--ink-3);color:#fff;font:inherit}

/* ---------- Footer ---------- */
.footer{background:#070707;color:var(--txt-on-dark-mute);position:relative;overflow:hidden;padding:64px 0 28px}
.footer__watermark{position:absolute;right:-2%;bottom:-6%;font-family:var(--font-display);font-size:22vw;color:rgba(255,255,255,.025);pointer-events:none;line-height:.8;white-space:nowrap}
.footer__grid{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.footer h4{color:#fff;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin-bottom:14px}
.footer a{display:block;padding:4px 0;font-size:.9rem}
.footer a:hover{color:#fff}
.footer__logos{display:flex;align-items:center;gap:26px;margin-bottom:18px;flex-wrap:wrap}
.footer__logos img{height:72px;width:auto;display:block}
.footer__bottom{position:relative;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem}
.footer__bottom a{display:inline;padding:0;font-size:inherit;color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__bottom a:hover{color:var(--gold-bright)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
/* Widescreen: widen the content container on large displays */
@media(min-width:1500px){ :root{--maxw:1320px} }
@media(min-width:1850px){ :root{--maxw:1400px} }

/* Nav collapses to the burger below 1024 (8 links + social + Donate need the room) */
@media(max-width:1024px){
  .nav__links{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--ink);padding:18px 24px;gap:4px;
    border-bottom:1px solid var(--line);transform:translateY(-130%);transition:.28s;margin:0;z-index:59}
  .nav__links.open{transform:none}
  .nav__links a{padding:12px 0;font-size:1rem}
  .nav__links a.btn-red{
    display:inline-flex;align-items:center;justify-content:center;gap:.5em;
    margin:14px 0 6px;padding:.95em 1.7em;border-radius:999px;
    font-size:.86rem;letter-spacing:.06em}
  .nav__links a.btn-red::after{display:none}
  .nav__burger{display:flex;margin-left:auto}
  .nav__social{display:none}
}

@media(max-width:960px){
  .nav__links{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--ink);padding:18px 24px;gap:4px;
    border-bottom:1px solid var(--line);transform:translateY(-130%);transition:.28s;margin:0}
  .nav__links.open{transform:none}
  .nav__links a{padding:12px 0;font-size:1rem}
  .nav__burger{display:flex;margin-left:auto}
  .nav__cta .btn-text{display:none}
  .split,.live-banner,.route{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .live-banner__media,.split__media{min-height:240px}
  .stats{grid-template-columns:repeat(2,1fr)!important}
  .cards,.steps,.shop-row{grid-template-columns:repeat(2,1fr)!important}
  .team-grid{grid-template-columns:repeat(4,1fr)!important}
  .footer__grid{grid-template-columns:1fr 1fr}
  .form.cols{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cards,.steps{grid-template-columns:1fr!important}
  .shop-row,.team-grid,.stats{grid-template-columns:1fr 1fr!important}
  .stats .stat{padding:22px 10px;min-width:0}
  .newsletter{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}

/* Mobile: centre short heading/CTA blocks, keep body copy left-aligned for readability */
@media(max-width:760px){
  .band{padding:clamp(40px,9vw,110px) 0}

  .ticker{display:none}

  .section-head{text-align:center;margin-inline:auto;margin-bottom:32px}
  .section-head h2{font-size:clamp(1.5rem,7vw,2.05rem)}

  .split__body,.live-banner__body{text-align:center}
  .split__body p,.split__body ul,
  .live-banner__body p,.live-banner__body ul{text-align:left}

  .hero__inner{text-align:center}
  .hero h1,.hero__sub{margin-inline:auto}
  .hero__actions{justify-content:center}
}

@media(max-width:480px){
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%;justify-content:center}
  .ticker{font-size:.68rem}
  .ticker__track{padding:6px 0}
}

/* ---------- Pricing / tier cards ---------- */
.tier-card{background:var(--ink-3);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:var(--r);padding:26px;display:flex;flex-direction:column}
.band--light .tier-card,.band--paper2 .tier-card{background:#fff;border-color:var(--line-dark);border-top-color:var(--red)}
.tier-card__tag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.tier-card h3{font-size:1.3rem;margin:4px 0}
.tier-card__price{font-family:var(--font-display);font-size:2rem;color:#fff;line-height:1;margin:8px 0 2px}
.band--light .tier-card__price,.band--paper2 .tier-card__price{color:var(--txt-dark)}
.tier-card__price span{display:block;font-family:var(--font-body);font-size:.76rem;color:var(--txt-on-dark-mute);font-weight:700;margin-top:5px}
.band--light .tier-card__price span,.band--paper2 .tier-card__price span{color:var(--txt-mute)}
.tier-card__value{font-size:.84rem;color:var(--rope);font-weight:700;margin:8px 0}
.ticklist{margin-top:6px}
.ticklist li{position:relative;padding-left:22px;margin:7px 0;font-size:.88rem;color:var(--txt-on-dark-mute)}
.band--light .ticklist li,.band--paper2 .ticklist li{color:var(--txt-mute)}
.ticklist li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}

/* ---------- Data table ---------- */
.ptable{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.band--light .ptable,.band--paper2 .ptable{border-color:var(--line-dark)}
.ptable table{width:100%;border-collapse:collapse;min-width:560px;font-size:.9rem}
.ptable th,.ptable td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.band--light .ptable th,.band--light .ptable td,.band--paper2 .ptable th,.band--paper2 .ptable td{border-color:var(--line-dark)}
.ptable thead th{background:var(--navy);color:#fff;text-transform:uppercase;letter-spacing:.07em;font-size:.72rem}
.ptable tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
.band--light .ptable tbody tr:nth-child(even),.band--paper2 .ptable tbody tr:nth-child(even){background:var(--paper-2)}
.ptable td:first-child{font-weight:700;color:#fff}
.band--light .ptable td:first-child,.band--paper2 .ptable td:first-child{color:var(--txt-dark)}

/* ---------- Disclaimer / pull-quote / route chips ---------- */
.disclaimer{font-size:.78rem;color:var(--txt-on-dark-mute);max-width:96ch;margin-top:18px;line-height:1.6}
.band--light .disclaimer,.band--paper2 .disclaimer{color:var(--txt-mute)}
.pullquote{font-family:var(--font-script);font-size:clamp(1.6rem,3.6vw,2.8rem);color:var(--rope);text-align:center;max-width:26ch;margin:0 auto;line-height:1.12}
.stops{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.stops span{background:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:700}
.band--light .stops span,.band--paper2 .stops span{background:#fff;border-color:var(--line-dark)}
.stops .start{background:var(--gold);color:#141414;border-color:var(--gold)}
.stops .end{background:var(--navy);color:#fff;border-color:var(--navy)}
@media(max-width:960px){ .nav__links{gap:4px} .nav__social{display:none} }

/* ---------- Countdown ---------- */
.countdown-band{padding:20px 0}
.countdown-row{display:flex;align-items:center;justify-content:space-between;gap:18px 26px;flex-wrap:wrap}
.countdown-label .eyebrow{display:block}
.countdown-label p{color:var(--txt-on-dark-mute);font-weight:700;letter-spacing:.03em;font-size:.92rem;margin-top:6px}
.countdown{display:flex;gap:10px}
.cd-unit{min-width:66px;text-align:center;background:var(--ink-3);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:8px;padding:11px 9px}
.cd-num{display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cd-lbl{display:block;margin-top:6px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-on-dark-mute);font-weight:700}
.countdown.live .cd-num{color:var(--red-bright)}
@media(max-width:620px){ .countdown-row{justify-content:center;text-align:center} .countdown{gap:7px} .cd-unit{min-width:58px;padding:9px 6px} .cd-num{font-size:1.6rem} }

/* ---------- Donation amount + payment method ---------- */
.amounts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.amount{padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.07);color:#fff;font-weight:700;font-size:.92rem;transition:.16s}
.amount:hover{border-color:var(--red)}
.amount.selected{background:var(--gold);color:#141414;border-color:var(--gold)}
.pay-methods{display:flex;gap:12px;flex-wrap:wrap}
.pay{display:flex;align-items:center;gap:9px;padding:13px 18px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-weight:700;color:#fff;background:rgba(255,255,255,.07)}
.pay span{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--rope);font-weight:700}
.pay input{accent-color:var(--red)}
.pay:has(input:checked){border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}

/* ---------- Re-theme blue (navy) bands as WHITE + drop blue accents ---------- */
.band--navy{background:var(--paper);color:var(--txt-dark);border-block:1px solid var(--line-dark)}
.band--navy .eyebrow{color:var(--red);opacity:1}
.band--navy h2,.band--navy h3{color:var(--txt-dark)}
.band--navy .section-head p{color:var(--txt-mute)}
.band--navy p,.band--navy li,.band--navy .note,.band--navy .ticklist li{color:var(--txt-mute)!important}
.band--navy .card__tag,.band--navy .tier-card__tag{color:var(--red)!important}
/* stat strip -> light boxes */
.band--navy .stats{background:var(--line-dark);border-color:var(--line-dark)}
.band--navy .stats .stat{background:#fff}
.band--navy .stat__num{color:var(--txt-dark)}
.band--navy .stat__lbl{color:var(--txt-mute)}
/* translucent-white cards -> solid light cards */
.band--navy .card,.band--navy .tier-card{background:#fff!important;border-color:var(--line-dark)!important;color:var(--txt-dark)!important}
.band--navy .card *,.band--navy .tier-card *{border-color:var(--line-dark)}
.band--navy .tier-card{border-top-color:var(--red)!important}
.band--navy .tier-card__price{color:var(--txt-dark)}
/* form fields + newsletter -> light */
.band--navy .field label{color:var(--txt-mute)}
.band--navy .field input,.band--navy .field select,.band--navy .field textarea,.band--navy .newsletter input{background:#fff!important;border-color:var(--line-dark)!important;color:var(--txt-dark)!important}
/* donation chips + pay pills -> light */
.band--navy .amount{background:var(--paper-2);color:var(--txt-dark);border-color:var(--line-dark)}
.band--navy .amount.selected{background:var(--gold);color:#141414;border-color:var(--gold)}
.band--navy .pay{background:#fff;color:var(--txt-dark);border-color:var(--line-dark)}
.band--navy .script{color:var(--red)!important}
/* remove remaining blue accents site-wide */
.btn-navy{background:var(--ink);color:#fff}
.btn-navy:hover{background:var(--ink-3)}
.ptable thead th{background:var(--gold);color:#141414}
.band--light .stretch,.band--paper2 .stretch{border-left-color:var(--red)}
.mystery.confirmed{background:linear-gradient(160deg,var(--gold-deep),#3a2c0f)}
.stops .end{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Coming-soon (merch) ---------- */
.badge-soon{display:inline-block;margin-top:14px;background:var(--gold);color:#141414;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;padding:7px 15px;border-radius:999px}
.price.soon{color:var(--txt-on-dark-mute);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.shop-item.soon{opacity:.85}
.btn.is-disabled{opacity:.55;cursor:default;pointer-events:none}

/* ---------- Announcement modal ---------- */
section[id]{scroll-margin-top:84px}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(3px);animation:fade .3s ease}
.modal__card{position:relative;z-index:1;max-width:480px;width:100%;text-align:center;color:#fff;border:1px solid var(--line);border-radius:14px;padding:42px 34px 38px;box-shadow:var(--shadow);
  background:linear-gradient(160deg,var(--ink) 0%,#1a1305 52%,var(--gold) 175%);animation:pop .38s cubic-bezier(.2,.8,.2,1)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.modal__close{position:absolute;top:12px;right:14px;z-index:5;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1rem;display:grid;place-items:center;transition:.15s}
.modal__close:hover{background:var(--red);transform:rotate(90deg)}
.modal__flag{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:#fff;background:rgba(255,255,255,.14);padding:7px 14px;border-radius:999px}
.modal__flag .live-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.modal__logo{height:66px;width:auto;margin:20px auto 6px}
.modal__card h2{color:#fff;font-size:clamp(1.5rem,4.4vw,2.1rem);margin:8px 0 12px;line-height:1.04}
.modal__card h2 em{color:var(--red-bright);font-style:italic}
.modal__card p{color:rgba(255,255,255,.86);margin-bottom:26px;font-size:1rem}
.modal__card .btn{width:100%;justify-content:center}

/* ---------- Gallery / flipbook albums ---------- */
.album{margin-bottom:18px}
.album__head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:22px;border-bottom:1px solid var(--line-dark);padding-bottom:16px}
.album__head .album__count{color:var(--txt-mute);font-size:.9rem;margin-top:6px}
.album__pdf .btn[disabled]{opacity:.6;pointer-events:none}
.flip-wrap{max-width:1080px;margin:0 auto}
.flipbook{margin:0 auto;touch-action:pan-y}
.flipbook .page{position:relative;background:#fff;overflow:hidden}
.page__photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#efece4;padding:18px}
.page__photo img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.page__no{position:absolute;bottom:10px;right:14px;font-size:.68rem;color:var(--txt-mute);letter-spacing:.1em;z-index:2}
.page--cover{background:linear-gradient(150deg,var(--ink) 0%,#2a1f0a 55%,var(--gold) 135%);box-shadow:inset 0 0 0 1px rgba(201,162,39,.18)}
.cover__in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.cover__logo{height:74px;width:auto;margin-bottom:14px}
.cover__year{font-family:var(--font-display);font-size:2.6rem;color:var(--red-bright);line-height:1}
.page--cover h3{font-size:1.55rem;color:#fff;text-transform:uppercase;line-height:1.06;margin:8px 0 6px}
.page--cover p{color:rgba(255,255,255,.82);font-size:.92rem;max-width:26ch}
.cover__hint{margin-top:20px;font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.5)}
.album__controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px}
.flip-btn{width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:1.4rem;line-height:1;transition:.18s}
.flip-btn:hover{background:var(--red);transform:translateY(-2px)}
.flip-ind{font-weight:700;letter-spacing:.08em;font-size:.8rem;color:var(--txt-mute);min-width:96px;text-align:center}
/* Fallback grid if the flip library is unavailable */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.album-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px}
@media(max-width:600px){ .cover__year{font-size:2rem} .page--cover h3{font-size:1.2rem} }

/* ---------- Poster tagline device (black & gold) ---------- */
.quote-band{background:var(--ink-0);text-align:center;overflow:hidden}
.quote-mark{font-family:var(--font-display);font-size:clamp(3rem,8vw,6rem);line-height:.5;color:var(--gold);opacity:.9}
.quote-lines{font-family:var(--font-display);text-transform:uppercase;line-height:.98;letter-spacing:.01em;margin:6px auto}
.quote-lines .l1,.quote-lines .l3{display:block;font-size:clamp(2.2rem,6.4vw,5rem);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.quote-lines .l2{display:block;font-size:clamp(1.5rem,4.4vw,3.4rem);color:#fff;margin:.06em 0}

/* ---------- Gallery (justified rows + filter + lightbox) ---------- */
.hero--gallery{min-height:56vh}
.hero--gallery .hero__bg img{object-position:center 42%}
@media(max-width:560px){
  .hero{min-height:72vh}
  .hero--page{min-height:44vh}
  .hero--gallery{min-height:46vh}
  /* A phone shows only the middle third of the frame, and dead centre lands on the big banner
     rather than the truck. Biasing left puts the Auman R in the window instead. */
  .hero--home .hero__bg img{object-position:35% 50%}
}
.gtabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 32px}
.gtab{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;
  color:var(--txt-on-dark-mute);background:var(--ink-3);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;transition:.16s;display:inline-flex;align-items:center;gap:8px;line-height:1}
.gtab:hover{color:#fff;border-color:var(--red)}
.gtab.active{color:var(--on-accent);background:var(--red);border-color:var(--red)}
.gtab__n{font-size:.66rem;opacity:.9;background:rgba(0,0,0,.2);padding:2px 7px;border-radius:999px}

.gjust{display:flex;flex-direction:column;gap:10px;min-height:40vh}
.grow{display:flex;gap:10px}
.gitem{position:relative;overflow:hidden;border-radius:8px;padding:0;background:var(--ink-3);cursor:pointer;flex:0 0 auto;border:none}
.gitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gitem:hover img{transform:scale(1.06)}
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.4));opacity:0;transition:.2s}
.gitem:hover::after{opacity:1}
.gitem__zoom{position:absolute;right:9px;bottom:9px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:var(--on-accent);font-weight:700;font-size:1.15rem;line-height:1;opacity:0;transform:translateY(6px);transition:.2s;z-index:2}
.gitem:hover .gitem__zoom{opacity:1;transform:none}
.gloading{text-align:center;color:var(--txt-on-dark-mute);padding:36px 0;font-weight:700;letter-spacing:.06em}
/* Two buttons now: "Load more" and its "Show fewer" partner, which appears only once the grid
   has grown past the opening batch. gap + wrap so the pair stacks rather than overflowing on a
   narrow phone. */
.gmore-wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:30px}
.gless[hidden],.gmore[hidden]{display:none}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,5,.94);backdrop-filter:blur(4px);padding:40px 70px}
.lb[hidden]{display:none}
.lb__stage{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb__img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb__cap{color:rgba(255,255,255,.82);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}
.lb__close{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.05rem;display:grid;place-items:center;transition:.16s;z-index:2}
.lb__close:hover{background:var(--red);color:var(--on-accent);transform:rotate(90deg)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:2rem;line-height:1;display:grid;place-items:center;transition:.16s;z-index:2}
.lb__nav:hover{background:var(--red);color:var(--on-accent)}
.lb__prev{left:16px}.lb__next{right:16px}
.lb__count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.78);font-weight:700;letter-spacing:.1em;font-size:.78rem}
@media(max-width:640px){
  .lb{padding:16px}
  .lb__nav{width:42px;height:42px;font-size:1.5rem}
  .lb__prev{left:6px}.lb__next{right:6px}
  .lb__img{max-height:74vh}
}

/* ---------- Facebook feed embed ---------- */
.fb-embed{display:flex;justify-content:center}
.fb-embed iframe{width:100%;max-width:500px;height:680px;border:none;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}

/* ---------- Social feeds (Facebook + Instagram) ---------- */
.feeds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.feed-col{min-width:0}
.feed-col__head{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:var(--txt-dark);margin-bottom:14px}
.ig-card{min-height:680px;border-radius:var(--r);background:linear-gradient(135deg,#F6E5A6 0%,#E7C86A 22%,#C9A227 55%,#9A7620 82%,#5f4718 100%);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;box-shadow:var(--shadow)}
.ig-card__inner{max-width:340px;color:#141414}
.ig-card__inner h3{color:#141414;font-size:1.9rem;margin:18px 0 10px}
.ig-card__inner p{color:rgba(20,20,20,.86);margin-bottom:24px}
.ig-card .btn{background:#141414;color:var(--gold-bright)}
.ig-card .btn:hover{background:#000;color:#fff;transform:translateY(-2px)}
.ig-note{display:block;margin-top:16px;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(20,20,20,.7);font-weight:700}
@media(max-width:960px){ .feeds{grid-template-columns:minmax(0,1fr);gap:34px} .ig-card{min-height:440px} }

/* ============================================================
   POSTER LOOK & FEEL block REMOVED 2026-08-21 (Toons: the gold "army style" headings
   read as AI-generated; match the portal CI instead).

   It painted assets/img/tex/gold-tex.jpg THROUGH the letterforms of every display heading,
   gave .btn-red a brushed-metal bevel, slanted the roster number tabs with a clip-path, and
   laid sun-ray gradients over the dark bands - 11 !important rules in all.

   Nothing needed writing to replace it. The portal-matching styling was already in this file
   underneath: .btn (border-radius:999px) + .btn-red (var(--gold-grad), same shadow) are
   byte-for-byte the portal's .btn-join rule, and the smooth --gold-grad heading treatment sits
   just above. The poster layer was simply burying it.

   Recoverable as a unit from git; the textures remain in assets/img/tex/.
   ============================================================ */

/* (edge pull-ropes removed) */
.rope-short{display:none !important;}

/* ---------- Newsfeed ---------- */
.news-cards{margin-top:8px}
.news-card{color:inherit}
.news-card .news-more{display:inline-block;margin-top:10px;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem}
.news-card:hover .news-more{color:var(--red-bright)}

.article{max-width:820px;margin:0 auto}
.news-back{display:inline-block;margin-bottom:20px;color:var(--txt-on-dark-mute);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem}
.news-back:hover{color:#fff}
.article__tag{display:block;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;margin-bottom:8px}
.article__title{font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.06;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.article__meta{color:var(--txt-on-dark-mute);font-size:.86rem;margin:14px 0 22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mailer-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(201,162,39,.14);color:var(--rope);border:1px solid rgba(201,162,39,.32);padding:4px 10px;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.62rem}
.article__media{border-radius:var(--r);overflow:hidden;margin-bottom:26px;border:1px solid var(--line)}
.article__media img{width:100%;height:auto;display:block;max-height:440px;object-fit:cover}
.article__body{color:rgba(255,255,255,.86);font-size:1.06rem;line-height:1.75}
.article__body p{margin:0 0 18px}
.article__body .lede{font-size:1.22rem;color:#fff}
.article__body h3{font-family:var(--font-display);text-transform:uppercase;color:#fff;font-size:1.5rem;margin:30px 0 14px;letter-spacing:.01em}
.article__body blockquote{font-family:var(--font-script);font-size:clamp(1.5rem,3.4vw,2.4rem);color:var(--rope);text-align:center;margin:30px auto;max-width:26ch;line-height:1.15;text-transform:none;border:0}
.article__body ol{list-style:decimal;padding-left:1.4em;margin:0}
.article__body li{margin:6px 0;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:.98rem;color:#fff}
.article__body li em{color:var(--rope);font-style:normal;text-transform:none}
.roster-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px;margin:6px 0 8px}
@media(max-width:640px){ .roster-cols{grid-template-columns:1fr} }
.article__share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.article__share>span{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--txt-on-dark-mute)}
.article__share a,.article__share .copy-link{color:#fff;background:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-weight:700;font-size:.8rem;transition:.16s;cursor:pointer;font-family:inherit}
.article__share a:hover,.article__share .copy-link:hover{border-color:var(--red);color:var(--red-bright)}
.article__body .pquote{border-left:3px solid var(--red);padding:6px 0 6px 20px;margin:24px 0;color:#fff;font-size:1.12rem;font-style:italic;line-height:1.6}
.article__body .pquote__by{display:block;margin-top:12px;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--rope)}

/* ===== Get Involved dropdown nav (added 2026-07-01, Claude Code) ===== */
.nav__has-sub{position:relative;display:inline-flex;align-items:center}
.nav__has-sub>.nav__sub-parent{display:inline-flex;align-items:center;gap:5px}
.nav__caret{font-size:.6em;line-height:1;opacity:.85;transition:transform .2s}
.nav__has-sub:hover .nav__caret,.nav__has-sub:focus-within .nav__caret{transform:rotate(180deg)}
.nav__sub{position:absolute;top:100%;left:0;min-width:190px;display:flex;flex-direction:column;gap:2px;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:8px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s;z-index:70}
.nav__has-sub:hover .nav__sub,.nav__has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{white-space:nowrap;padding:8px 12px;border-radius:8px}
.nav__sub a:hover{background:rgba(255,255,255,.06)}
@media (max-width:1024px){
  .nav__has-sub{display:block;width:100%}
  .nav__has-sub>.nav__sub-parent{width:100%}
  .nav__caret{display:none}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;
    background:transparent;min-width:0;padding:2px 0 6px 14px;margin-top:2px;border-left:2px solid var(--line)}
}

/* ---------- Power Team slider (home) ---------- */
.team-slider{position:relative}
.team-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 14px;-ms-overflow-style:none;scrollbar-width:none}
.team-track::-webkit-scrollbar{display:none}
.team-track .pt-card{flex:0 0 220px;scroll-snap-align:start}
.team-nav{position:absolute;top:calc(50% - 8px);transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;
  background:var(--gold-grad);color:var(--on-accent);font-size:1.7rem;line-height:1;display:grid;place-items:center;
  border:none;box-shadow:0 6px 18px rgba(201,162,39,.28);transition:.15s;cursor:pointer}
.team-nav:hover{filter:brightness(1.08)}
.team-nav--prev{left:-10px}.team-nav--next{right:-10px}
@media(max-width:640px){.team-track .pt-card{flex-basis:158px} .team-nav{display:none}}

/* ---------- Power Team profile form ---------- */
.profile-form{max-width:860px;margin:0 auto;display:block}
.pf-group{margin-bottom:30px}
.pf-legend{display:block;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--red);padding-bottom:8px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.pf-legend em{color:var(--txt-on-dark-mute);font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;font-size:.86em}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pf-socials{grid-template-columns:1fr 1fr 1fr}
@media(max-width:760px){.pf-grid,.pf-socials{grid-template-columns:1fr}}
.profile-form .field label em{color:var(--txt-on-dark-mute);text-transform:none;letter-spacing:0;font-weight:400}
/* dark field styling for the profile form (band--ink2 wasn't covered) */
.band--ink2 .field label{color:var(--txt-on-dark-mute)}
.band--ink2 .field input,.band--ink2 .field select,.band--ink2 .field textarea{background:var(--ink-3);border-color:var(--line);color:#fff}
.band--ink2 .field input:focus,.band--ink2 .field select:focus,.band--ink2 .field textarea:focus{outline:none;border-color:var(--red)}
.profile-form input[type=file]{padding:10px 12px;font-size:.86rem;color:var(--txt-on-dark-mute)}
.pf-check{display:flex;gap:12px;align-items:flex-start;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;color:#fff;font-weight:600;cursor:pointer}
.pf-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--red);flex:0 0 auto}
.profile-form .btn{margin-top:6px}

/* ===== Wish list (donate page, added 2026-07-01, Claude Code) ===== */
.wishlist{list-style:none;margin:12px 0 0;padding:0}
.wishlist li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--line);font-size:.95rem;line-height:1.45}
.wishlist li:first-child{border-top:0}
.wishlist li::before{content:"";position:absolute;left:3px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--red-bright)}

/* ===== 2-up teaser pair (home Earn + Merch, added 2026-07-01, Claude Code) ===== */
.cards--2{grid-template-columns:1fr 1fr;max-width:960px;margin-inline:auto}
.cards--2 .card__body{padding:34px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
@media(max-width:820px){.cards--2{grid-template-columns:1fr;max-width:520px}}

/* ===== Power Team profile modal (added 2026-07-01, Claude Code) ===== */
.modal__card--profile{max-width:560px;text-align:left;padding:0;max-height:90vh;overflow-y:auto}
.pt-hero{display:flex;gap:16px;align-items:center;padding:26px 28px 18px;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)}
.pt-hero img{width:90px;height:90px;border-radius:12px;object-fit:cover;border:1px solid var(--line);flex:none}
.pt-no{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:.7rem;padding:3px 9px;border-radius:999px;letter-spacing:.08em}
.pt-hero h3{color:#fff;margin:7px 0 2px;font-size:1.5rem;line-height:1.05}
.pt-nick{color:var(--red-bright);font-style:italic;font-size:.95rem}
.pt-body{padding:4px 28px 28px}
.pt-meta{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.pt-meta span{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;font-size:.8rem;padding:5px 11px;border-radius:999px}
.pt-body h4{color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin:16px 0 5px}
.pt-body p{color:rgba(255,255,255,.88);margin:0;font-size:.98rem;line-height:1.5}
.pt-socials{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.pt-socials a{display:inline-flex;align-items:center;gap:7px;background:var(--ink-3);border:1px solid var(--line);color:#fff;padding:9px 15px;border-radius:999px;font-weight:700;font-size:.82rem;transition:.15s}
.pt-socials a:hover{border-color:var(--red);color:var(--red-bright)}

/* ===== Power Team profile, brand logo + share (added 2026-07-01, Claude Code) ===== */
.pt-hero{position:static}
.pt-hero__id{min-width:0}
.pt-logo{margin-left:auto;align-self:flex-end;height:42px;width:auto;opacity:.95;flex:none}
.pt-actions{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.pt-actions .pt-share{cursor:pointer}
.pt-share-note{color:var(--gold);font-weight:700;font-size:.82rem}
@media(max-width:520px){.pt-logo{height:34px}}

/* Centre the desktop nav menu at the true header centre (absolute so unequal logo/cta
   widths don't shift it). Mobile fixed menu untouched. */
@media(min-width:1025px){
  .nav__inner{position:relative;justify-content:space-between}
  .nav__logo{position:relative;z-index:1}
  .nav__links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
  .nav__cta{position:relative;z-index:1;margin-left:auto}
}

/* Mobile header: logo left, burger right (Donate Now moved into the menu) */
@media(max-width:1024px){
  .nav__inner{position:relative;justify-content:space-between;gap:12px}
  .nav__cta{gap:0;margin-left:0}
  .nav__cta .btn-red{display:none}
  .nav__burger{margin-left:0}
}

/* Get Involved modal option buttons */
.modal__opts{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.modal__opts .btn{width:100%;justify-content:center}

/* ---------- Legal pages (privacy / terms) ---------- */
.legal{max-width:820px;margin:0 auto}
.legal h2{font-size:1.4rem;line-height:1.12;margin:34px 0 12px}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 14px;line-height:1.75}
.legal ul{list-style:disc;padding-left:1.3em;margin:0 0 16px}
.legal li{margin:7px 0;line-height:1.7}
.legal .updated{color:var(--txt-mute);font-size:.92rem;margin-bottom:22px}
.legal a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.legal .legal-note{margin-top:30px;padding:16px 18px;border-left:3px solid var(--red);background:var(--paper-2);border-radius:8px;font-size:.95rem}
.footer__legal a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.legal p,.legal li{color:var(--txt-dark)}

/* Newsfeed video embed + card play badge */
.article__video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:26px;background:#000}
.article__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.news-card .card__media{position:relative}
.card__play{position:absolute;inset:0;margin:auto;width:58px;height:58px;display:grid;place-items:center;z-index:2;
  background:rgba(0,0,0,.55);color:#fff;border-radius:50%;font-size:1.35rem;padding-left:4px;border:2px solid rgba(255,255,255,.85);transition:.18s}
.news-card:hover .card__play{background:var(--red);color:var(--on-accent);transform:scale(1.06)}

/* Gallery "Watch" video section */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:34px}
.vcard{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#000;color:inherit;cursor:pointer;text-align:left;transition:.2s}
.vcard:hover{transform:translateY(-3px);border-color:var(--red)}
.vcard__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b0b0b}
.vcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}
.vcard:hover .vcard__media img{transform:scale(1.05)}
.vcard__play{position:absolute;inset:0;margin:auto;width:62px;height:62px;display:grid;place-items:center;z-index:2;background:rgba(0,0,0,.55);color:#fff;border-radius:50%;font-size:1.4rem;padding-left:5px;border:2px solid rgba(255,255,255,.85);transition:.18s}
.vcard:hover .vcard__play{background:var(--red);color:var(--on-accent);transform:scale(1.08)}
.vcard__body{padding:15px 17px 17px}
.vcard__tag{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red-bright);margin-bottom:7px}
.vcard__title{font-size:1.06rem;line-height:1.18;color:#fff;margin:0}
/* Video modal */
.vmodal{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.vmodal[hidden]{display:none}
.vmodal__frame{width:min(1100px,100%)}
.vmodal__ratio{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.vmodal__ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal__close{position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:1.2rem;cursor:pointer;z-index:2;transition:.18s}
.vmodal__close:hover{background:var(--red);color:var(--on-accent);border-color:var(--red)}

/* ---------- Facebook Page Plugin (live Newsfeed) ---------- */
/* Facebook caps the plugin at 500px and gives no dark theme, so the white box is
   framed in the site's panel styling to read as deliberate rather than pasted in. */
/* 526px = Facebook's 500px cap + 12px padding + 1px border each side, so the
   iframe can actually reach 500 instead of being squeezed down to 474. */
.fb-feed{
  width:100%;max-width:526px;margin-inline:auto;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;overflow:hidden;
  display:flex;justify-content:center;
  min-height:320px}
.fb-feed iframe{display:block;border-radius:8px;background:#fff;max-width:100%}
.fb-feed__note{max-width:500px;margin:14px auto 0;text-align:center;
  font-size:.82rem;color:var(--txt-on-dark-mute)}
.fb-feed__note a{color:var(--red-bright)}
@media(max-width:560px){ .fb-feed{padding:8px} }

/* Support Team — the crew who make the pull possible without pulling. Reuses .pt-card and
   .team-cards wholesale so the cards match the athletes at every breakpoint; only the
   section intro and the per-group heading are new. Rendered into the SUPPORT-TEAM markers
   on power-team.html by the Control Room roster export. */
.st-intro{margin:-4px 0 18px;font-size:14px;line-height:1.7;color:var(--muted,#b9b3a7);max-width:68ch}
.st-group{margin:26px 0 12px;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold,#c9a24a)}
/* No number badge for support crew — they have no Power Team number, and one here would
   read as though they were the 21st athlete. */
.team-cards .pt-card--support .pt-card__no{display:none}

/* ============================================================
   2026 CHARITIES · the official beneficiaries
   ------------------------------------------------------------
   The logos come from nineteen different organisations, so they arrive as nineteen
   different shapes: a 1.68:1 landscape lockup (Gift of Sight), a 0.89:1 portrait one
   (Amazing Graces), and everything between. scripts/process-charity-logos.py normalises
   them onto one 512px transparent canvas, and the rules below then only have to hold a
   fixed box and centre the mark inside it. That combination is what makes the grid line
   up; either half alone does not.

   Every plate is WHITE on purpose. Most of these marks are dark artwork drawn for white
   stationery, and the site's bands are near-black — on the raw band they would disappear.
   ============================================================ */

/* --- charity page: the card grid --- */
.cards--charity{grid-template-columns:repeat(4,1fr);gap:20px}
/* Flex for the same reason as the homepage wall below: a percentage height on a grid item
   whose row is auto-sized is circular and gets dropped, which let logos escape the plate. */
.card__media--logo{aspect-ratio:16/10;background:#fff;display:flex;align-items:center;justify-content:center;padding:22px 24px;overflow:hidden}
.card__media--logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:.4s}
.card:hover .card__media--logo img{transform:scale(1.04)}
/* Missing-file fallback: a gold-on-ink name plate, never a broken image on a live page. */
.card__media--logo.is-empty{background:linear-gradient(135deg,var(--ink-3),var(--ink-2));padding:16px}
.card__media--logo .logo-fallback{font-family:var(--font-display);font-size:1rem;line-height:1.15;text-align:center;color:var(--gold);text-transform:uppercase;letter-spacing:.04em}
/* The flex column comes from the base .card rule above; this pins the "Represented by"
   line to the bottom so it lands on one baseline across a row.
   margin-top:auto on the LINE ITSELF, not flex:1 on the paragraph: a charity can be listed
   with no description at all (Amazing Graces, whose copy was withdrawn), and with no
   paragraph to stretch, a flex:1 approach let its rep line float up out of line with its
   row. Pushing from the element that has to align works whether the copy is there or not. */
.cards--charity .card__body{padding:18px 20px 20px}
.cards--charity .charity-rep{margin-top:auto}
.charity-rep{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.8rem;color:var(--txt-mute)}
.charity-rep a{color:var(--gold-bright);font-weight:700;text-decoration:none}
.charity-rep a:hover{text-decoration:underline}
.charity-visit{display:inline-block;margin-top:10px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.charity-visit:hover{text-decoration:underline}
/* A card can carry a second link: Make Pretoria Great has both a site and a Facebook page.
   The builder emits the two anchors with no whitespace between them, so without a margin they
   butt together and read as one word, "VISIT SITE >FACEBOOK >".
   The margin goes on the RIGHT, not the left of the second one. The charity cards are a narrow
   column, so two links almost always wrap onto separate lines, and a left margin indented the
   wrapped one into a ragged step. A right margin spaces them when they do fit side by side and
   leaves both flush left when they do not. The trailing margin on a single-link card is
   invisible. */
.charity-visit{margin-right:18px}
/* "Charity on the cap" in the Power Team profile is a link to that charity's site, and without
   this it renders in body white and nobody can tell. Matches .charity-rep a on the charity page,
   so the same relationship looks the same in both places. */
#pt-charity a{color:var(--gold-bright);font-weight:700;text-decoration:none}
#pt-charity a:hover{text-decoration:underline}
/* The charity's own mark beside its name, on a light plate. Several of the twenty logos are
   dark-on-transparent (Door of Hope, WRSA and Amazing Graces ship on their own dark plate), so
   a translucent dark chip would swallow them. A light plate is the one background that works
   for all twenty. */
.pt-charity-link{display:inline-flex;align-items:center;gap:9px}
.pt-charity-link img{width:34px;height:34px;object-fit:contain;flex:0 0 34px;padding:3px;
  background:rgba(255,255,255,.94);border-radius:8px}

/* Charity mark on the roster card, top-right. Top-left is the member's number and the bottom is
   the name + CTA, so this corner is the only one free. Injected by team-profiles.js.

   A white rounded square, logo only: the charity's name was dropped from the card on 2026-08-24
   because at card width it wrapped to two lines and crowded the photo. The name still reads in
   full in the profile, and lives on here in the img alt and the chip's title.

   White rather than translucent because several of the twenty marks (Door of Hope, WRSA,
   Amazing Graces) are dark artwork on their own dark plate and vanish on anything but a light
   background. */
.pt-card__charity{position:absolute;top:9px;right:9px;z-index:2;width:46px;height:46px;
  display:grid;place-items:center;padding:5px;border-radius:12px;background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.38);pointer-events:none;overflow:hidden}
.pt-card__charity img{width:100%;height:100%;object-fit:contain;display:block}
/* Name-only fallback, for a charity that has not supplied a mark. */
.pt-card__charity span{font-size:.46rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  line-height:1.1;color:#1b1b1b;text-align:center;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
/* The home slider runs narrower cards (220px). */
.team-track .pt-card__charity{width:42px;height:42px;border-radius:11px}
@media (max-width:560px){
  .pt-card__charity{width:38px;height:38px;top:7px;right:7px;padding:4px;border-radius:10px}
}

/* --- homepage: the logo wall ---
   A fixed-track grid, NOT .sponsor-row. .sponsor sizes itself to its contents, so with
   nineteen different logo shapes it produced nineteen different tile sizes — the ragged
   look on the homepage. Fixed equal tracks give identical cells; the logo is centred and
   contained inside whatever its own proportions are. auto-fit keeps the last row centred
   rather than left-stranded. */
.charity-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,124px);
  justify-content:center;
  gap:14px;
  max-width:1000px;
  margin:0 auto;
}
/* FLEX, not grid, and the image capped in px rather than %.
   This was `display:grid; place-items:center` with `max-height:100%` on the image, and the
   logos spilled out of the bottom of their tiles. A percentage max-height resolves against
   the grid AREA, and the implicit row here is auto-sized — a circular dependency, so the
   browser drops the constraint and the image renders at natural size. Flex gives the image
   a definite parent height to measure against, and the explicit px caps mean the rule holds
   even if the tile dimensions are changed later. overflow:hidden is the final backstop. */
.charity-wall .charity-tile{
  width:124px;height:84px;
  background:#fff;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  padding:12px 14px;overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  text-decoration:none; /* tiles are <a> now (2026-08-19) — no link underline on the tile */
}
.charity-wall .charity-tile:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.4)}
.charity-wall .charity-tile img{max-width:96px;max-height:60px;width:auto;height:auto;object-fit:contain}
.charity-wall .logo-fallback{font-family:var(--font-display);font-size:.62rem;line-height:1.1;text-align:center;color:var(--ink);text-transform:uppercase}
@media(max-width:640px){
  .charity-wall{grid-template-columns:repeat(auto-fit,98px);gap:10px}
  .charity-wall .charity-tile{width:98px;height:68px;padding:9px 10px}
  .charity-wall .charity-tile img{max-width:78px;max-height:50px}
}

/* ── Foton sizing (2026-08-21) ─────────────────────────────────────────────────
   .sponsor img is sized by max-height, which measures the WHOLE file rather than the mark
   inside it. Foton's artwork was a 420x420 square with the logo floating in the middle,
   filling only 39% of the height, so it rendered at about a third the size of neighbours
   like NPL, XCO and Everest whose files fill 99-100%. The file is now cropped to its mark
   (87% fill), which on its own brings it level with the rest.
   These two rules take it deliberately PAST parity, because Foton is a Main Sponsor and is
   meant to stand out. Remove them and the logo simply returns to the same size as the others. */
.sponsor img[src*="foton"]{max-height:104px}
.page-sponsors .sponsor img[src*="foton"]{max-height:140px}