/* ============================================================
   Waiheke Primary School Football — AIMS Games 2026 fundraiser
   Palette + motifs derived from the hand-drawn WPS crest
   ============================================================ */

:root{
  /* paper / ink */
  --paper:      #f4f0e4;
  --paper-card: #fbf8ef;
  --paper-deep: #ece4d2;
  --ink:        #16273f;   /* body text — deep ink navy */
  --ink-soft:   #4a5a70;

  /* crest blues */
  --blue:       #1b4f9c;   /* deep royal */
  --sea:        #3d8dcb;   /* sea blue   */
  --navy:       #0e2942;   /* dark band  */
  --navy-2:     #12365a;

  /* accents */
  --red:        #c0271f;   /* raffle / urgency */
  --gold:       #d8a93c;

  --line:       rgba(22,39,63,.14);
  --line-soft:  rgba(22,39,63,.08);

  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body:    'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1180px;
  --r:    18px;
  --shadow: 0 1px 2px rgba(14,41,66,.05), 0 12px 34px -14px rgba(14,41,66,.22);
  --shadow-lg: 0 30px 70px -28px rgba(14,41,66,.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.02; margin:0; letter-spacing:-.015em; }
p{ margin:0; text-wrap:pretty; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* paper grain overlay for warmth */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
[data-texture="off"] body::before{ display:none; }
main, header, footer{ position:relative; z-index:1; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-weight:800; font-size:1rem;
  padding:15px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 22px -10px var(--blue); }
.btn-primary:hover{ background:#163f7d; transform:translateY(-2px); }
.btn-red{ background:var(--red); color:#fff; box-shadow:0 10px 22px -10px var(--red); }
.btn-red:hover{ background:#a31f18; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn-ghost:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--navy); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(0,0,0,.5); }
.btn-lg{ padding:18px 34px; font-size:1.1rem; }

.eyebrow{
  font-family:var(--font-body); font-weight:800; text-transform:uppercase;
  letter-spacing:.22em; font-size:.78rem; color:var(--sea);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow.on-dark{ color:#7db8e6; }
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; display:inline-block; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 28px;
  background:rgba(244,239,225,.0);
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.scrolled{
  background:rgba(246,242,231,.86);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 var(--line), 0 8px 24px -18px rgba(14,41,66,.5);
  padding:10px 28px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ width:58px; height:58px; object-fit:contain; transition:width .3s ease, height .3s ease;
  -webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 47%, #000 52%, transparent 86%);
  mask-image:radial-gradient(ellipse 70% 68% at 50% 47%, #000 52%, transparent 86%); }
.site-header.scrolled .brand img{ width:48px; height:48px; }
.brand .bt{ font-family:var(--font-display); font-weight:800; font-size:1.02rem; line-height:1.05; color:var(--ink); letter-spacing:-.01em; }
.brand .bt small{ display:block; font-family:var(--font-body); font-weight:700; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sea); }
.nav{ display:flex; align-items:center; gap:8px; }
.nav a.lnk{ text-decoration:none; font-weight:700; font-size:.95rem; color:var(--ink); padding:9px 14px; border-radius:10px; transition:background .15s,color .15s; }
.nav a.lnk:hover{ background:var(--paper-deep); }
.nav .btn{ padding:11px 20px; }
.menu-toggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:34px 0 70px; text-align:center; position:relative; overflow:hidden; }
.hero .crest-wrap{ position:relative; display:inline-block; margin:6px auto 6px; }
.hero .crest{ width:min(440px, 78vw); height:auto; filter:none;
  -webkit-mask-image:radial-gradient(ellipse 68% 66% at 50% 47%, #000 38%, rgba(0,0,0,.55) 62%, transparent 84%);
  mask-image:radial-gradient(ellipse 68% 66% at 50% 47%, #000 38%, rgba(0,0,0,.55) 62%, transparent 84%); }
.hero h1{
  font-size:clamp(2.5rem, 6.4vw, 5.1rem);
  max-width:14ch; margin:14px auto 0; color:var(--navy);
}
.hero h1 .hl{ color:var(--blue); }
.hero .sub{
  font-size:clamp(1.05rem,2vw,1.32rem); color:var(--ink-soft);
  max-width:46ch; margin:20px auto 0; font-weight:600;
}
.hero .cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* voyage route ribbon */
.voyage{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:34px auto 0; max-width:560px; color:var(--blue);
  font-family:var(--font-body); font-weight:800; letter-spacing:.04em;
}
.voyage .pt{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.voyage .pt .dot{ width:13px; height:13px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(27,79,156,.16); }
.voyage .pt .lab{ font-size:.92rem; text-transform:uppercase; letter-spacing:.12em; }
.voyage .pt small{ font-weight:700; color:var(--ink-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
.voyage .route{ flex:1; height:34px; position:relative; min-width:90px; }
.voyage .route svg{ width:100%; height:100%; overflow:visible; }

/* compass watermark */
.compass{ opacity:.9; }

/* ============================================================
   PROGRESS
   ============================================================ */
.progress-sec{ padding:30px 0 64px; }
.progress-card{
  background:var(--paper-card); border:1.5px solid var(--line);
  border-radius:26px; padding:38px clamp(22px,4vw,52px); box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.progress-card .topline{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.progress-card .raised .lab,
.progress-card .target .lab{ font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--ink-soft); }
.progress-card .raised .amt{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.8rem,7vw,4.6rem); color:var(--blue); line-height:.95; letter-spacing:-.02em; }
.progress-card .target{ text-align:right; }
.progress-card .target .amt{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--navy); line-height:1; }

.bar{
  margin-top:26px; height:26px; border-radius:999px;
  background:var(--paper-deep); border:1.5px solid var(--line);
  overflow:hidden; position:relative;
}
.bar .fill{
  height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--sea));
  position:relative;
}
html.reveal-anim .bar .fill{ transition:width 1.4s cubic-bezier(.22,1,.36,1); }
.bar .fill::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(90deg,transparent, rgba(255,255,255,.35));
  background-size:30px 100%; opacity:.5;
}
.bar .knob{ position:absolute; top:50%; transform:translate(-50%,-50%); }

.progstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.progstats .s{ text-align:center; padding:18px 10px; border-radius:16px; background:var(--paper); border:1px solid var(--line-soft); }
.progstats .s .n{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3.4vw,2.2rem); color:var(--navy); line-height:1; }
.progstats .s .n.red{ color:var(--red); }
.progstats .s .l{ font-weight:700; font-size:.82rem; color:var(--ink-soft); margin-top:7px; text-transform:uppercase; letter-spacing:.08em; }
.updated{ text-align:center; margin-top:20px; font-size:.82rem; color:var(--ink-soft); font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; }
.updated .live{ width:8px; height:8px; border-radius:50%; background:#2e9e5b; box-shadow:0 0 0 0 rgba(46,158,91,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(46,158,91,.5);} 70%{box-shadow:0 0 0 9px rgba(46,158,91,0);} 100%{box-shadow:0 0 0 0 rgba(46,158,91,0);} }

/* ============================================================
   STORY  (navy band)
   ============================================================ */
.story{
  background:var(--navy);
  color:#eaf2fb; padding:84px 0; position:relative; overflow:hidden;
}
.story .compass-bg{ position:absolute; right:-90px; top:50%; transform:translateY(-50%); width:460px; opacity:.10; color:#fff; pointer-events:none; }
.story .grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:54px; align-items:center; }
.story h2{ font-size:clamp(2rem,4.4vw,3.3rem); color:#fff; margin-top:14px; }
.story h2 .hl{ color:var(--sea); }
.story p{ color:#c4d6ea; font-size:1.1rem; margin-top:18px; }
.story p + p{ margin-top:14px; }
.story .factcards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.story .fc{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:24px; }
.story .fc .n{ font-family:var(--font-display); font-weight:800; font-size:2.1rem; color:#fff; line-height:1; }
.story .fc .n .u{ font-size:1rem; color:var(--sea); }
.story .fc .l{ color:#9fbdd9; font-weight:700; margin-top:8px; font-size:.95rem; }

/* ============================================================
   RAFFLE
   ============================================================ */
.raffle{ padding:84px 0; }
.raffle .head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.raffle h2{ font-size:clamp(2.1rem,4.6vw,3.4rem); color:var(--navy); margin-top:12px; }
.raffle h2 .hl{ color:var(--red); }
.raffle .head p{ color:var(--ink-soft); font-size:1.12rem; margin-top:16px; }
.raffle .grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:46px; align-items:center; }
.poster-frame{
  position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg);
  border:8px solid #fff; rotate:-1.4deg; transition:rotate .3s ease, transform .3s ease;
}
.poster-frame:hover{ rotate:0deg; transform:scale(1.012); }
.poster-frame::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px rgba(14,41,66,.12); pointer-events:none; }

.raffle-detail .bundle{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--navy); color:#fff; padding:14px 22px; border-radius:14px; margin-bottom:8px;
}
.raffle-detail .bundle .v{ font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--gold); line-height:1; }
.raffle-detail .bundle .t{ font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; line-height:1.3; }
.prizelist{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:2px; }
.prizelist li{ display:flex; align-items:baseline; gap:14px; padding:12px 2px; border-bottom:1px dashed var(--line); }
.prizelist li .pv{ font-family:var(--font-display); font-weight:800; color:var(--red); min-width:74px; font-size:1.05rem; }
.prizelist li .pn{ font-weight:800; color:var(--navy); }
.prizelist li .pn small{ display:block; font-weight:600; color:var(--ink-soft); font-size:.86rem; }
.raffle-buy{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px; }
.raffle-price{ display:flex; gap:10px; }
.raffle-price .chip{ background:var(--paper-card); border:1.5px solid var(--line); border-radius:12px; padding:10px 16px; font-weight:800; color:var(--navy); }
.raffle-price .chip b{ color:var(--red); }
.draw-note{ margin-top:16px; font-weight:700; color:var(--ink-soft); }
.draw-note b{ color:var(--navy); }

/* ============================================================
   DONATE
   ============================================================ */
.donate{ padding:18px 0 90px; }
.donate-card{
  background:linear-gradient(160deg, var(--navy), var(--navy-2));
  color:#fff; border-radius:28px; padding:clamp(34px,5vw,64px);
  position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
}
.donate-card .compass-bg{ position:absolute; left:-70px; bottom:-70px; width:360px; opacity:.09; color:#fff; }
.donate-card .grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; position:relative; z-index:1; }
.donate-card h2{ font-size:clamp(2rem,4.2vw,3rem); color:#fff; }
.donate-card h2 .hl{ color:var(--sea); }
.donate-card p{ color:#c4d6ea; margin-top:16px; font-size:1.08rem; }
.donate-card .smallprint{ font-size:.9rem; color:#8fb0cf; margin-top:18px; }
.donate-actions{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.donate-actions .btn{ width:100%; justify-content:center; }
.secure-badge{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.86rem; color:#9fc4e6; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(8,22,38,.62); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .25s ease;
}
.modal-overlay.open{ display:flex; opacity:1; }
.modal{
  background:var(--paper-card); border-radius:24px; width:min(520px,100%);
  padding:38px; box-shadow:var(--shadow-lg); position:relative;
  transform:translateY(16px) scale(.98); transition:transform .3s cubic-bezier(.22,1,.36,1);
  border:1.5px solid var(--line);
}
.modal-overlay.open .modal{ transform:none; }
.modal .close{ position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; border:none; background:var(--paper-deep); color:var(--ink); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.modal .close:hover{ background:#ddd2bb; }
.modal h3{ font-size:1.7rem; color:var(--navy); }
.modal .lead{ color:var(--ink-soft); margin-top:8px; font-weight:600; }
.bank-rows{ margin-top:24px; display:grid; gap:12px; }
.bank-row{ background:var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.bank-row .k{ font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.bank-row .v{ font-family:var(--font-display); font-weight:800; font-size:1.18rem; color:var(--navy); letter-spacing:.01em; }
.bank-row .v{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--navy); letter-spacing:.01em; white-space:nowrap; }
.bank-row .k{ white-space:nowrap; }
.bank-row.acct .v{ font-variant-numeric:tabular-nums; letter-spacing:0; }
.bank-row > div:first-child{ min-width:0; }
.copy-btn{ border:none; background:var(--blue); color:#fff; font-weight:800; font-size:.78rem; padding:8px 13px; border-radius:9px; cursor:pointer; transition:background .15s; white-space:nowrap; }
.copy-btn:hover{ background:#163f7d; }
.copy-btn.done{ background:#2e9e5b; }
.modal .ref-note{ margin-top:18px; font-size:.92rem; color:var(--ink-soft); background:rgba(216,169,60,.12); border:1px solid rgba(216,169,60,.4); border-radius:12px; padding:12px 16px; font-weight:600; }
.modal .ref-note b{ color:var(--navy); }

/* ============================================================
   SPONSORS
   ============================================================ */
.sponsors{ padding:84px 0 60px; text-align:center; }
.sponsors h2{ font-size:clamp(1.9rem,4vw,2.8rem); color:var(--navy); margin-top:12px; }
.sponsors .head p{ color:var(--ink-soft); font-size:1.1rem; max-width:52ch; margin:16px auto 0; }
.sponsors .label{ font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color:var(--sea); margin:48px 0 18px; }
.sponsor-grid{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.sponsor-grid .sp{
  background:var(--paper-card); border:1.5px solid var(--line); border-radius:14px;
  padding:18px 26px; min-width:160px; transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.sponsor-grid .sp:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.sponsor-grid .sp .nm{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--navy); line-height:1.15; white-space:nowrap; }
.sponsor-grid .sp .ds{ font-size:.78rem; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
/* logo chips — white card so transparent-bg logos read cleanly */
.sponsor-grid .sp.logo{ background:#fff; min-width:170px; min-height:86px; padding:18px 26px; }
.sponsor-grid .sp.logo img{ max-height:42px; max-width:148px; width:auto; height:auto; object-fit:contain; }
/* Arbor Bros logo is near-square/portrait, so the shared 42px height cap left it
   tiny with lots of whitespace. Give it room to grow vertically to match the
   visual weight of the wide landscape logos. */
.sponsor-grid .sp.logo.tall{ padding:12px 22px; }
.sponsor-grid .sp.logo.tall img{ max-height:84px; max-width:96px; }
/* Whelan's wordmark is white, so its chip gets a dark field that feathers to
   white at the edges — keeping the white-edge commonality with the others. */
.sponsor-grid .sp.logo.dark{ background:radial-gradient(ellipse 94% 90% at 50% 50%, var(--navy) 0%, var(--navy) 62%, #fff 100%); }
/* Stoney Ridge has no logo — styled word-art on a matching white chip. */
.sponsor-grid .sp.wordart .wm{ font-family:var(--font-display); font-weight:800; font-size:1.18rem; color:var(--navy); letter-spacing:.02em; white-space:nowrap; }
.sponsor-grid.cash .sp .nm{ font-size:1.05rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy); color:#bcd2e8; padding:56px 0 40px; text-align:center; }
.site-footer img{ width:96px; margin:0 auto 18px;
  -webkit-mask-image:radial-gradient(ellipse 66% 64% at 50% 47%, #000 46%, transparent 82%);
  mask-image:radial-gradient(ellipse 66% 64% at 50% 47%, #000 46%, transparent 82%); }
.site-footer .ft-title{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.3rem; }
.site-footer .ft-sub{ margin-top:6px; color:#8fb0cf; font-weight:600; }
.site-footer .ft-links{ display:flex; gap:22px; justify-content:center; margin:22px 0; flex-wrap:wrap; }
.site-footer .ft-links a{ color:#bcd2e8; text-decoration:none; font-weight:700; font-size:.95rem; }
.site-footer .ft-links a:hover{ color:#fff; }
.site-footer .fine{ font-size:.82rem; color:#6f90ad; margin-top:18px; max-width:60ch; margin-inline:auto; }

/* ============================================================
   reveal animation
   ============================================================ */
/* ============================================================
   reveal animation — FAIL-SAFE
   Content is visible by default. The hidden->reveal animation
   only applies while <html> has .reveal-anim (added early by JS,
   removed by a watchdog if the observer never fires). This means
   content can never get stranded invisible.
   ============================================================ */
.reveal{ opacity:1; transform:none; }
html.reveal-anim .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
html.reveal-anim .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.reveal-anim .reveal{ opacity:1; transform:none; transition:none; } .bar .fill{ transition:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px){
  .story .grid, .raffle .grid, .donate-card .grid{ grid-template-columns:1fr; gap:34px; }
  .story .compass-bg{ display:none; }
  .poster-frame{ rotate:0deg; max-width:460px; margin:0 auto; }
  .raffle-detail{ order:2; }
}
@media (max-width: 680px){
  body{ font-size:17px; }
  .wrap{ padding:0 18px; }
  .nav .lnk{ display:none; }
  .nav .menu-toggle{ display:inline-flex; }
  .progstats{ grid-template-columns:1fr; }
  .progress-card .target{ text-align:left; }
  .hero .cta{ flex-direction:column; }
  .hero .cta .btn{ width:100%; justify-content:center; }
  .voyage{ font-size:.85rem; }
  .modal{ padding:28px 22px; }
  .bank-row{ flex-direction:column; align-items:flex-start; gap:8px; }
}