/* ============================================================
   40 Before 40 — editorial redesign
   Palette and fonts unchanged: cream paper, black/charcoal, soft grey, and the brush heart.
   Spacing on an 8px base.
   ============================================================ */
:root{
  --paper:#f6f1e7; --paper-deep:#ede6d7; --paper-light:#fbf8f1;
  --ink:#1a1a1a; --char:#3a3a3a; --grey:#6f6f6f; --soft:#8a8a8a; --rule:#cfc9bd;
  --script:"Allura","Segoe Script",cursive;
  --serif:"Source Serif 4",Georgia,serif;
  /* 8px spacing scale */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:2.5rem; --s6:3rem; --s8:4rem; --s10:5rem; --s12:6rem; --s16:8rem;
  /* type scale */
  --t-label:.75rem; --t-small:.875rem; --t-body:1.1875rem; --t-lead:clamp(1.375rem,1.1rem + 1.2vw,2rem);
  --t-h3:1.375rem; --t-h2:clamp(3rem,2rem + 4vw,5rem); --t-hero:clamp(4.25rem,2rem + 7vw,9rem);
  --t-stat:clamp(2.5rem,1.6rem + 3vw,4rem);
  --sec:clamp(var(--s10),9vw,10rem);
  --wrap:1200px; --gutter:clamp(1rem,4vw,3rem);
  --bar-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--char);font:400 var(--t-body)/1.7 var(--serif);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
/* faint vignette for depth */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(70,55,30,.06) 100%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
p{margin:0 0 1em}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--paper);padding:var(--s1) var(--s2);border:1px solid var(--ink)}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.muted{color:var(--grey)}

/* ---------- shared type ---------- */
.eyebrow,.label{font:600 var(--t-label)/1.4 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin:0;text-wrap:balance}
h1,h2,h3,blockquote,.sec-lede,.hero-lead,.goal-line{text-wrap:balance}
.sec-title{font:400 var(--t-h2)/1 var(--script);color:var(--ink);text-align:center;margin:0 0 var(--s2)}
.sec-lede{text-align:center;color:var(--grey);font-style:italic;margin:0 auto var(--s6);max-width:48ch}
.section{padding-block:var(--sec)}
.section-tight{padding-top:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 var(--s4);
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);text-decoration:none;
  font:600 1rem/1 var(--serif);letter-spacing:.02em;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--char)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-sm{min-height:36px;padding:0 var(--s2);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- sticky top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;height:var(--bar-h);
  background:rgba(246,241,231,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule)}
.topbar-in{max-width:var(--wrap);height:100%;margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:var(--s3)}
.brand{font:600 .975rem/1 var(--serif);color:var(--ink);text-decoration:none;white-space:nowrap;margin-right:auto}
.brand i{font-weight:400}
.navlinks{display:flex;gap:var(--s4)}
.navlinks a{font:600 .75rem/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);text-decoration:none;padding:var(--s1) 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.navlinks a:hover,.navlinks a[aria-current="true"]{color:var(--ink);border-color:var(--ink)}
.menu-btn{display:none;background:none;border:0;padding:var(--s1) 0;font:600 .75rem/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:block}
  .navlinks{position:absolute;left:0;right:0;top:var(--bar-h);flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:var(--s1) var(--gutter) var(--s3);
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .navlinks.open{visibility:visible;opacity:1;transform:none}
  .navlinks a{font-size:.875rem;padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
  .navlinks a:last-child{border-bottom:0}
}
@media (max-width:420px){.brand-name{display:none}.topbar-in{gap:var(--s2)}}

/* ---------- hero (video) ---------- */
/* Desktop: cream text column on the left, the running video fills the right side.
   Phones: the video fills the top of the screen and the text sits over a dark fade. */
.hero{position:relative;display:flex;align-items:center;min-height:calc(100svh - var(--bar-h));border-bottom:1px solid var(--rule);overflow:hidden}
.hero-media{position:absolute;top:0;right:0;bottom:0;width:46%;background:var(--ink)}
.hero-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0,rgba(246,241,231,0) 14%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-in{position:relative;z-index:1;width:100%;
  padding:var(--s6) calc(46% + var(--s6)) var(--s6) max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)))}
.hero-title{font:400 clamp(4.25rem,1rem + 6vw,8rem)/.9 var(--script);color:var(--ink);margin:var(--s2) 0 var(--s3);letter-spacing:-.01em}
.hero-lead{font:400 var(--t-lead)/1.3 var(--serif);color:var(--ink);max-width:28ch;margin:0 0 var(--s3)}
.hero-body{max-width:58ch;font-size:1.0625rem;line-height:1.75;margin:0 0 var(--s3)}
.hero-body p{margin:0 0 .75em}
.hero .eyebrow{letter-spacing:.14em;max-width:46ch}
.race{font:600 .9375rem/1.5 var(--serif);font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--char);margin:0 0 var(--s4);text-wrap:balance}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0}
.scroll-cue{margin-top:var(--s4);font:600 .6875rem/1 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--grey);text-decoration:none;display:inline-flex;gap:.6em;align-items:center;padding:var(--s2) 0}
.scroll-cue:hover{color:var(--ink)}
.scroll-cue span{display:inline-block;font-size:.9rem;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (max-width:860px){
  .hero{display:block;min-height:auto;background:var(--ink);border-bottom:0}
  .hero-media{left:0;width:auto;bottom:auto;height:100svh}
  .hero-media video{object-position:50% 20%}
  .hero-media::after{background:linear-gradient(180deg,rgba(26,26,26,.1) 0%,rgba(26,26,26,.2) 30%,rgba(26,26,26,.8) 58%,var(--ink) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .3 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
    .hero-in{padding:44svh var(--gutter) var(--s6)}
  .hero .eyebrow{color:#d9d2c3}
  .hero-title,.hero-lead,.hero .race{color:var(--paper)}
  .hero-body{color:#e8e2d5}
  .hero .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  .hero .btn:hover{background:#e8e2d5}
  .hero .btn-ghost{background:transparent;color:var(--paper)}
  .hero .btn-ghost:hover{background:var(--paper);color:var(--ink)}
  .scroll-cue{color:#cfc9bd}
  .scroll-cue:hover{color:var(--paper)}
}
@media (max-width:420px){.hero-cta .btn{flex:1 1 100%}}
/* soften the slide edges so sketches melt into the paper */
.soft{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%)}
.soft-edge{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.heart{font-family:var(--serif);font-size:.5em;font-weight:400;vertical-align:.3em}

/* ---------- story flip cards ---------- */
/* Without JS or with reduced motion: image and text sit side by side. */
.scene{max-width:var(--wrap);margin:clamp(var(--s10),10vw,11rem) auto 0;padding-inline:var(--gutter)}
.story > .scene:first-child{margin-top:0}
.card3d{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--s4),6vw,var(--s12));align-items:center}
.scene.flip .front{order:2}
.face figure{margin:0}
.front img{width:100%;max-height:640px;object-fit:contain;mix-blend-mode:multiply;filter:contrast(1.05)}
.front-title,.front-hint{display:none}
.back h2{font:400 clamp(2.75rem,1.8rem + 3.4vw,4.75rem)/1.05 var(--script);color:var(--ink);margin:0 0 var(--s3)}
.back p{max-width:60ch}
.back .lead{font-size:var(--t-lead);line-height:1.35;color:var(--ink)}
.back-center{text-align:center}
.back-center p{margin-inline:auto}
@media (max-width:820px){.card3d{grid-template-columns:1fr}.scene.flip .front{order:0}.front figure{max-width:520px;margin-inline:auto}}
/* With JS and motion allowed: each card pins in place and flips from picture to text as you scroll. */
.flip-on .scene{max-width:none;margin:0;padding:0;height:190svh}
.flip-on .story > .pull + .scene,.flip-on .scene + .pull{margin-top:0}
.flip-on .stage{position:sticky;top:var(--bar-h);height:calc(100svh - var(--bar-h));display:flex;align-items:center;justify-content:center;
  padding:var(--s3) var(--gutter);perspective:1800px}
.flip-on .card3d{position:relative;display:block;width:min(100%,760px);height:min(100%,640px);transform-style:preserve-3d;
  transform:rotateY(var(--flip,0deg)) scale(var(--sc,1));will-change:transform}
.flip-on .face{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(var(--s3),4vw,var(--s6));
  background:var(--paper-light);border:1px solid var(--ink);box-shadow:10px 10px 0 var(--paper-deep);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip-on .back{transform:rotateY(180deg);justify-content:center;overflow:auto;font-size:clamp(1rem,.55rem + 1.4svh,1.1875rem)}
.flip-on .front{justify-content:center}
.flip-on .front figure{flex:0 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.flip-on .front img{width:auto;max-width:100%;max-height:min(100%,52svh)}
@media (max-width:860px){
  .flip-on .stage{padding-bottom:calc(var(--s3) + 68px)}
  .flip-on .back{padding-block:var(--s3);font-size:clamp(.9375rem,.4rem + 1.5svh,1.0625rem)}
  .flip-on .back p{margin-bottom:.7em}
  .flip-on .back hr.short{margin:var(--s2) auto}
  .flip-on .back .km-big{font-size:2.75rem;margin:var(--s2) auto var(--s1)!important}
}
.flip-on .front-title{display:block;margin:var(--s2) 0 0;text-align:center;font:400 clamp(2.5rem,1.8rem + 2.4vw,3.75rem)/1 var(--script);color:var(--ink)}
.flip-on .front-hint{display:block;margin:var(--s1) 0 0;text-align:center;font:600 .6875rem/1 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.flip-on .back h2{font-size:clamp(2.5rem,1.8rem + 2.6vw,4rem);margin-bottom:var(--s2)}
.flip-on .back-center h2{font-size:clamp(2.25rem,1.6rem + 2.2vw,3.5rem)}
.flip-on .back p{margin-bottom:.8em}
.flip-on .back .km-big{margin:var(--s3) auto var(--s1)!important}

/* ---------- progress band ---------- */
.band{background:var(--paper-deep);border-bottom:1px solid var(--rule);padding-block:var(--s12)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:var(--s6) 0 var(--s8);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats div{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--s5) var(--s2);border-left:1px solid var(--rule)}
.stats div:first-child{border-left:0}
.stats dd{margin:0;font:600 var(--t-stat)/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.stats dd small{font-size:.45em;font-weight:400;color:var(--grey);letter-spacing:0}
.stats dt{margin-top:var(--s2);font:600 var(--t-label)/1.3 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
@media (max-width:700px){
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(3){border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--rule)}
}
.goal-line{text-align:center;font-size:1.125rem;color:var(--ink);margin:0 auto var(--s8);max-width:44ch}
.goal-line strong{font-weight:600}
/* route */
.route{position:relative;height:96px;margin:0 var(--s3)}
.route-track{position:absolute;left:0;right:0;top:44px;height:2px;background:repeating-linear-gradient(90deg,var(--soft) 0 3px,transparent 3px 9px)}
.route-fill{height:100%;width:0;background:var(--ink);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.route-marks{list-style:none;margin:0;padding:0}
.route-marks li{position:absolute;top:38px;left:calc(var(--at) * 1%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.route-marks li::before{content:"";width:1px;height:14px;background:var(--ink)}
.route-marks span{margin-top:var(--s1);font:600 .6875rem/1.3 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);text-align:center;white-space:nowrap}
.route-marks li:first-child{transform:none;align-items:flex-start}
.route-marks li:last-child{transform:translateX(-100%);align-items:flex-end}
.route-marks li:last-child span{text-align:right}
.route-here{position:absolute;top:0;left:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;transition:left 1.2s cubic-bezier(.2,.7,.2,1)}
.here-label{font:600 .8125rem/1 var(--serif);color:var(--ink);background:var(--paper-light);border:1px solid var(--ink);padding:5px 8px;white-space:nowrap}
.here-dot{position:relative;margin-top:10px;width:14px;height:14px;border-radius:50%;background:var(--ink)}
.here-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--ink);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.stretch{text-align:center;color:var(--grey);font-style:italic;margin:var(--s4) auto 0;max-width:52ch}

/* ---------- story ---------- */
.story{padding-block:var(--sec) 0}
.chapter{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.chapter + .chapter{margin-top:clamp(var(--s10),10vw,11rem)}
.chapter h2{font:400 clamp(2.75rem,1.8rem + 3.4vw,4.75rem)/1.05 var(--script);color:var(--ink);margin:0 0 var(--s3)}
.chapter p{max-width:60ch}
.chapter .lead{font-size:var(--t-lead);line-height:1.35;color:var(--ink)}
hr.short{width:56px;border:0;border-top:1px solid var(--ink);margin:var(--s4) auto}
/* centred opening */
.chapter-center{text-align:center}
.chapter-center p{margin-inline:auto;font-size:1.25rem;line-height:1.8}
.story .km-big{font:600 clamp(3rem,2rem + 4vw,5.5rem)/1 var(--serif);color:var(--ink);letter-spacing:-.02em;margin:var(--s6) auto var(--s2)!important}
/* spread */
.chapter-spread{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--s4),6vw,var(--s12));align-items:center}
.chapter-spread figure{margin:0}
.chapter-spread img{width:100%;max-height:640px;object-fit:contain;mix-blend-mode:multiply;filter:contrast(1.05)}
.chapter-spread.flip figure{order:2}
.chapter-spread .txt{padding-block:var(--s4)}
@media (max-width:820px){
  .chapter-spread{grid-template-columns:1fr}
  .chapter-spread.flip figure{order:0}
  .chapter-spread figure{max-width:520px;margin-inline:auto}
}
/* wide (purpose) */
.chapter-wide{text-align:center}
.chapter-wide h2{max-width:16ch;margin-inline:auto}
.chapter-wide p{margin-inline:auto}
.pillars{list-style:none;padding:0;margin:var(--s6) auto;display:grid;grid-template-columns:1fr 1fr;max-width:640px}
.pillars li{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);font-size:1.0625rem;color:var(--ink)}
.pillars li + li{border-left:1px solid var(--rule)}
.pillars svg{width:56px;height:56px;stroke:var(--ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.chapter-wide figure{margin:var(--s4) calc(var(--gutter) * -1) 0}
.chapter-wide img{width:100%;mix-blend-mode:multiply}
/* pull quotes */
.pull{max-width:var(--wrap);margin:clamp(var(--s10),10vw,11rem) auto;padding-inline:var(--gutter);text-align:center}
.pull blockquote{margin:0;font:400 clamp(3rem,1.6rem + 5vw,6.5rem)/1.05 var(--script);color:var(--ink)}
.pull::before,.pull::after{content:"";display:block;width:1px;height:var(--s8);background:var(--rule);margin:0 auto var(--s4)}
.pull::after{margin:var(--s4) auto 0}
.chapter + .pull{margin-top:clamp(var(--s8),8vw,var(--s16))}
/* dedication */
.dedication{margin-top:clamp(var(--s10),10vw,11rem);text-align:center}
.dedication h2{font:400 clamp(3rem,1.8rem + 5vw,6.5rem)/1 var(--script);color:var(--ink);margin:0 var(--gutter) var(--s2)}
.dedication p{font-size:var(--t-lead);color:var(--char);margin:0 var(--gutter)}
.dedication figure{margin:var(--s4) auto 0;max-width:1100px}
.dedication img{width:100%;mix-blend-mode:multiply}

/* reveal on scroll (only when JS runs and motion is allowed) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- heart dividers ---------- */
.heart-rule{display:flex;align-items:center;gap:var(--s3);max-width:420px;margin:0 auto;padding-inline:var(--gutter);color:var(--ink)}
.heart-rule::before,.heart-rule::after{content:"";flex:1;height:1px;background:var(--rule)}
/* the brush heart, inline: takes the colour of the text around it */
.bh{display:inline-block;width:.95em;height:.92em;vertical-align:-.1em;background:currentColor;
  -webkit-mask:url("../assets/img/heart.png") center/contain no-repeat;mask:url("../assets/img/heart.png") center/contain no-repeat}
.bib-c .bh{margin-right:.25em}
.thanks .bh{width:.45em;height:.44em;vertical-align:.12em}
.brush-heart{display:block;width:34px;height:33px;flex:none;background:var(--ink);
  -webkit-mask:url("../assets/img/heart.png") center/contain no-repeat;mask:url("../assets/img/heart.png") center/contain no-repeat}
.story + .heart-rule{margin-top:var(--sec)}

/* ---------- gift cards ---------- */
.gifts{list-style:none;padding:0;margin:var(--s6) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.gift{position:relative;display:flex;flex-direction:column;padding:var(--s4) var(--s3);background:var(--paper-light);border:1px solid var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.gift:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--paper-deep)}
.gift-amt{font:600 clamp(2.25rem,1.6rem + 1.8vw,3rem)/1 var(--serif);color:var(--ink);letter-spacing:-.02em;margin:0}
.gift-amt.word{font:400 clamp(2.25rem,1.7rem + 1.6vw,3rem)/1 var(--script);letter-spacing:0}
.gift-lkr{font-size:var(--t-small);color:var(--grey);margin:var(--s1) 0 var(--s3)}
.gift h3{font:600 var(--t-h3)/1.25 var(--serif);color:var(--ink);margin:0 0 var(--s1);padding-top:var(--s3);border-top:1px solid var(--rule)}
.gift p:last-child{font-size:1rem;line-height:1.6;margin:0}
@media (max-width:960px){.gifts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gift-amt.word{font-size:1.75rem;line-height:1.3;white-space:nowrap}}
@media (max-width:420px){.gifts{gap:var(--s2)}.gift{padding:var(--s3) var(--s2)}.gift h3{font-size:1.125rem}.gift p:last-child{font-size:.9375rem}}

/* ---------- kilometre bibs ---------- */
.bibs{list-style:none;padding:0;margin:0 auto;max-width:900px;display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(6px,1.2vw,14px)}
.bibs li:last-child{grid-column:1/-1}
.bib{position:relative;width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;
  background:var(--paper-light);border:1px solid var(--soft);color:var(--ink);cursor:pointer;font-family:var(--serif);
  transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
/* safety-pin holes */
.bib::before,.bib::after{content:"";position:absolute;top:8%;width:5px;height:5px;border-radius:50%;border:1px solid var(--soft)}
.bib::before{left:9%}.bib::after{right:9%}
.bib-k{font:600 .5625rem/1 var(--serif);letter-spacing:.18em;color:var(--grey)}
.bib-n{font:600 clamp(1.25rem,.8rem + 2vw,2.25rem)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.bib-c{font-size:clamp(.625rem,.55rem + .3vw,.8125rem);line-height:1;color:var(--grey);min-height:1em}
.bib:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:3px 3px 0 var(--paper-deep)}
.bib:active{transform:scale(.97)}
.bib.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bib.on .bib-k,.bib.on .bib-c{color:#d9d2c3}
.bib.on::before,.bib.on::after{border-color:#8a8378}
.bib[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:3px}
.bib-finish{aspect-ratio:auto;min-height:72px;flex-direction:row;gap:var(--s2)}
.bib-finish::before{left:14px;top:10px}.bib-finish::after{right:14px;top:10px}
.bib-finish .bib-n{font-size:clamp(1.125rem,.9rem + 1vw,1.5rem)}
@media (max-width:640px){.bibs{grid-template-columns:repeat(6,1fr)}.bib-k{display:none}.bib::before,.bib::after{width:4px;height:4px}}

/* ---------- donate card ---------- */
.give-card{max-width:640px;margin:var(--s4) auto 0;background:var(--paper-light);border:1px solid var(--ink);
  padding:clamp(var(--s3),5vw,var(--s6));box-shadow:10px 10px 0 var(--paper-deep)}
.sponsoring{font:400 1.125rem/1.2 var(--serif);color:var(--grey);margin:0 0 var(--s1)}
.sponsoring strong{display:block;font:400 clamp(3rem,2.2rem + 3vw,4.25rem)/1 var(--script);color:var(--ink);margin-top:var(--s1)}
.field{border:0;padding:0;margin:0 0 var(--s4);min-width:0}
.field > label,.field legend{display:block;font:600 var(--t-label)/1.4 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--s1);padding:0}
.field-inline{display:flex;align-items:center;gap:var(--s2);padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
.field-inline label{margin:0;white-space:nowrap;color:var(--grey)}
input,select,textarea{font:inherit;font-size:1.0625rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:var(--s2) 0;width:100%}
input::placeholder,textarea::placeholder{color:var(--soft);font-style:italic}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-width:2px;padding-bottom:calc(var(--s2) - 1px)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:var(--s3);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231a1a1a' stroke-width='1.3'/></svg>") right 2px center/12px no-repeat}
.field-inline select{width:auto;flex:1;min-width:0}
textarea{resize:vertical;min-height:96px}
.pills{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.pill{flex:1 1 0;min-width:72px;min-height:52px;padding:0 var(--s2);border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:600 1.0625rem/1 var(--serif);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.pill:hover{background:var(--paper-deep)}
.pill:active{transform:scale(.97)}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:480px){.pills{flex-wrap:nowrap;gap:6px}.pill{min-width:0;padding:0 4px;font-size:.9375rem;min-height:48px}}
.other-wrap{display:flex;align-items:baseline;gap:var(--s1);margin-top:var(--s2)}
.other-wrap[hidden]{display:none}
.currency{font:600 1.25rem/1 var(--serif);color:var(--ink)}
.other-wrap input{font-size:1.25rem}
.impact{margin:var(--s3) 0 0;font:italic 400 1.1875rem/1.45 var(--serif);color:var(--ink);min-height:1.45em}
.lkr{margin:var(--s1) 0 0;font-size:var(--t-small);color:var(--grey);min-height:1.2em}
.check{display:flex;gap:var(--s2);align-items:flex-start;font-size:1.0625rem;margin:0 0 var(--s2);cursor:pointer}
.check input{width:20px;height:20px;margin:.3em 0 0;flex:none;accent-color:var(--ink);cursor:pointer}
.err{color:var(--ink);font-weight:600;min-height:1.4em;margin:var(--s2) 0}
.err:not(:empty)::before{content:"";display:inline-block;width:.95em;height:.92em;margin-right:.4em;vertical-align:-.1em;background:currentColor;
  -webkit-mask:url("../assets/img/heart.png") center/contain no-repeat;mask:url("../assets/img/heart.png") center/contain no-repeat}
#paypal-buttons{margin-top:var(--s2);min-height:52px}
.thanks{text-align:center;padding:var(--s2) 0}
.thanks .script{font:400 clamp(3rem,2.4rem + 2vw,4rem)/1 var(--script);color:var(--ink);margin:0 0 var(--s2)}

/* ---------- supporter wall ---------- */
.wall{list-style:none;padding:0;margin:var(--s6) 0 0;columns:2;column-gap:var(--s3)}
.wall li{break-inside:avoid;margin:0 0 var(--s3);padding:var(--s4) var(--s4) var(--s3);background:var(--paper-light);border:1px solid var(--rule)}
.wall-name{font:400 2.25rem/1 var(--script);color:var(--ink);margin:0 0 var(--s1)}
.wall-meta{font:600 var(--t-label)/1.4 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:0}
.wall-msg{font-style:italic;font-size:1.0625rem;line-height:1.6;color:var(--char);margin:var(--s2) 0 0;padding-top:var(--s2);border-top:1px solid var(--rule)}
.wall .wall-empty{column-span:all;text-align:center;border-style:dashed}
@media (max-width:640px){.wall{columns:1}}

/* ---------- gallery ---------- */
.gal{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(160px,17vw,240px);grid-auto-flow:row dense;gap:clamp(8px,1.2vw,16px)}
.gal li{min-width:0}
.gal .tall{grid-row:span 2}
.gal .wide{grid-column:span 2}
.gal .big{grid-column:span 2;grid-row:span 2}
.gal button{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:var(--paper-deep);cursor:zoom-in;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(1.02);transform:scale(1.001);transition:filter .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.gal button::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.55;transition:opacity .6s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.gal button:hover img,.gal button:focus-visible img{filter:none;transform:scale(1.03)}
.gal button:hover::after,.gal button:focus-visible::after{opacity:0}
@media (max-width:640px){.gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px}}

/* lightbox */
dialog#lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;display:none;align-items:center;justify-content:center}
dialog#lb[open]{display:flex}
dialog#lb::backdrop{background:rgba(26,26,26,.9)}
#lb-img{max-width:min(92vw,1000px);max-height:86vh;width:auto;border:8px solid var(--paper);opacity:0;transform:scale(.96);transition:opacity .35s ease,transform .35s ease}
dialog#lb.show #lb-img{opacity:1;transform:none}
.lb-btn{position:absolute;width:48px;height:48px;border:1px solid var(--paper);background:rgba(26,26,26,.5);color:var(--paper);font:400 1.75rem/1 var(--serif);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-btn:hover{background:var(--paper);color:var(--ink)}
.lb-x{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--rule);padding-block:var(--s12) var(--s8);text-align:center;font-size:1rem}
.footer p{margin:0 auto var(--s2);max-width:52ch}
.footer-script{font:400 clamp(2.5rem,2rem + 2vw,3.5rem)/1 var(--script);color:var(--ink);margin-bottom:var(--s4)!important}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s1) var(--s4)}

/* ---------- mobile dock ---------- */
.dock,.to-top{display:none}
@media (max-width:860px){
  .dock{display:flex;position:fixed;left:var(--s2);right:var(--s2);bottom:calc(var(--s2) + env(safe-area-inset-bottom));z-index:55;
    min-height:52px;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);text-decoration:none;
    font:600 1rem/1 var(--serif);letter-spacing:.02em;box-shadow:0 6px 20px rgba(26,26,26,.18);
    transform:translateY(160%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .dock{right:calc(var(--s2) + 60px)}
  .dock.show{transform:none}
  .to-top{display:flex;position:fixed;right:var(--s2);bottom:calc(var(--s2) + env(safe-area-inset-bottom));z-index:55;
    width:52px;height:52px;align-items:center;justify-content:center;background:var(--paper-light);color:var(--ink);
    border:1px solid var(--ink);text-decoration:none;font:400 1.375rem/1 var(--serif);box-shadow:0 6px 20px rgba(26,26,26,.14);
    transform:translateY(160%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .to-top.show{transform:none}
  .footer{padding-bottom:calc(var(--s12) + 52px)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}
.story > .pull:first-child{margin-top:0}