/* ============================================================
   HOPE & FUTURE — v3
   Editorial / documentary. Palette from the logo.
   All text pairs verified WCAG AA.

   BREAKPOINT SYSTEM (mobile-first)
     base    0–479    small phone
     sm    ≥ 480      large phone
     md    ≥ 640      phablet / phone landscape
     lg    ≥ 900      tablet landscape / small laptop
     xl    ≥ 1200     desktop
     2xl   ≥ 1600     large desktop
   ============================================================ */
:root{
  --red:#E8232A;        /* logo red — large display only */
  --red-ui:#C6161C;     /* buttons + small text — AA 5.94 */
  --red-lt:#FF6B57;     /* accent on dark — AA 5.91 */
  --navy:#16375F;
  --navy-dk:#0B1F38;
  --ink:#12263F;        /* AA 15.28 */
  --body:#3B444F;       /* AA 9.88 */
  --mut:#5F6874;        /* AA 5.65 */
  --line:#E4E0D8;
  --cream:#FDFBF7;
  --sand:#F5F0E8;

  --max:1240px;
  --gut:clamp(18px,5vw,56px);
  --sec:clamp(40px,6vw,88px);       /* vertical section rhythm */
  --sec-t:clamp(28px,4vw,56px);     /* tight variant */
  --stack:clamp(22px,3.4vw,34px);   /* grid gap */
  --tap:44px;                       /* minimum touch target */


  /* ---- type scale: 11 fluid steps, replaces 53 ad-hoc sizes ---- */
  --fs-3xs:  clamp(.60rem, .16vw + .57rem, .66rem);   /* micro labels, tags */
  --fs-2xs:  clamp(.70rem, .20vw + .66rem, .76rem);   /* eyebrows, meta */
  --fs-xs:   clamp(.80rem, .22vw + .75rem, .86rem);   /* captions, legal */
  --fs-sm:   clamp(.88rem, .20vw + .84rem, .95rem);   /* secondary body */
  --fs-base: clamp(.98rem, .28vw + .92rem, 1.06rem);  /* body, buttons */
  --fs-lg:   clamp(1.08rem,.90vw + .89rem, 1.32rem);  /* lede */
  --fs-xl:   clamp(1.20rem,1.20vw + .94rem, 1.50rem); /* h3 */
  --fs-2xl:  clamp(1.50rem,2.60vw + .93rem, 2.30rem); /* small h2, quotes */
  --fs-3xl:  clamp(1.85rem,4.30vw + .88rem, 3.20rem); /* h2 */
  --fs-4xl:  clamp(2.40rem,7.60vw + .55rem, 5.40rem); /* h1 */
  --fs-display: clamp(1.85rem,3.60vw + 1.0rem, 3.60rem); /* editorial statement */
  --fs-mark:    clamp(4.4rem,14vw,10rem);             /* decorative quote glyph */

  /* ---- spacing: 4pt grid ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:48px; --s9:64px;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media(min-width:1600px){ :root{ --max:1360px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--body);
  font:clamp(16px,.55vw + 14.2px,17.5px)/1.7 var(--sans);
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media(min-width:900px){ body{padding-bottom:0} }
img{max-width:100%; display:block; height:auto}

/* ---------- type ---------- */
h1,h2,h3{color:var(--ink); margin:0 0 .4em; font-family:var(--serif);
  font-weight:600; font-variation-settings:"SOFT" 0,"WONK" 0; line-height:1.05;
  letter-spacing:-.028em; text-wrap:balance; overflow-wrap:break-word}
h1{font-size:var(--fs-4xl); line-height:1.02}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-xl); line-height:1.2}
h4{font-family:var(--sans); font-size:var(--fs-base); font-weight:750; color:var(--ink); margin:0 0 .4em}
p{margin:0 0 1.15em; text-wrap:pretty}
a{color:var(--red-ui)}
.lede{font-size:var(--fs-lg); line-height:1.56; color:var(--body)}
.big{font-family:var(--serif); font-weight:500; font-size:var(--fs-2xl);
  line-height:1.26; color:var(--ink); letter-spacing:-.02em}


/* ---------- editorial statement — one per page ----------
   The three sentences the whole site rests on. Short measure
   is what makes large type land; a long line at this size
   just reads as a wall. */
.statement{
  font-family:var(--serif); font-weight:500;
  font-size:var(--fs-display); line-height:1.08; letter-spacing:-.028em;
  color:var(--ink); max-width:26ch; text-wrap:balance;
  margin:0; padding-top:clamp(16px,2vw,24px); position:relative;
}
.statement::before{
  content:""; position:absolute; top:0; left:0;
  width:clamp(48px,7vw,88px); height:4px; background:var(--red-ui);
}
.on-dark .statement,.on-red .statement{color:#fff}
.on-dark .statement::before{background:var(--red-lt)}
.on-red .statement::before{background:#fff}
.statement + p{margin-top:clamp(16px,2.4vw,24px)}
/* the statement carries its own breathing room */
.statement-block{padding-block:var(--sec-t)}
@media(max-width:400px){ .statement{max-width:none; letter-spacing:-.028em} }

/* ---------- layout ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}
.narrow{max-width:760px}
.center{text-align:center}
section{padding-block:var(--sec)}
section.tight{padding-block:var(--sec-t)}

.kicker{display:flex; align-items:center; gap:12px; font-family:var(--sans);
  font-size:var(--fs-2xs); font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red-ui); margin-bottom:clamp(16px,2.4vw,22px)}
.kicker::before{content:""; width:clamp(22px,4vw,34px); height:2px; background:currentColor; flex:0 0 auto}
.center .kicker{justify-content:center}
.on-dark .kicker{color:var(--red-lt)}
.num{font-family:var(--serif); font-size:var(--fs-sm); font-weight:600; color:var(--red-ui);
  letter-spacing:.08em; display:block; margin-bottom:10px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); background:var(--red-ui); color:#fff; text-decoration:none;
  padding:16px clamp(20px,3.4vw,30px); font-family:var(--sans); font-weight:750;
  font-size:var(--fs-base); border:0; cursor:pointer; border-radius:2px;
  transition:background .18s,transform .18s; line-height:1.25; text-align:center}
.btn:hover{background:#A81217; transform:translateY(-2px)}
.btn:active{transform:none}
.btn.navy{background:var(--navy)} .btn.navy:hover{background:var(--navy-dk)}
.btn.ghost{background:transparent; color:var(--ink); border:2px solid var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--cream)}
.btn.light{background:var(--cream); color:var(--ink)} .btn.light:hover{background:#fff}
.btn.wide{display:flex; width:100%}
.btn.sm{padding:12px 20px; font-size:var(--fs-sm); min-height:0}
.btn .arw{transition:transform .18s} .btn:hover .arw{transform:translateX(4px)}
.btnrow{display:flex; gap:12px; flex-wrap:wrap}
@media(max-width:479px){ .btnrow .btn{width:100%} }

/* ---------- a11y ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--red-ui); outline-offset:3px; border-radius:2px}
.on-dark a:focus-visible,.on-dark button:focus-visible,.hero a:focus-visible{outline-color:var(--red-lt)}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:12px 20px; z-index:200; text-decoration:none; font-weight:700}
.skip:focus{left:12px; top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1!important; transform:none!important}
}
.reveal{opacity:0; transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}


/* ---------- utilities (replace inline styles) ---------- */
.sec-sand{background:var(--sand)}
.sec-head{max-width:640px; margin-bottom:clamp(24px,3.4vw,40px)}
.sec-head.narrow-head{max-width:600px}
.foot-blurb{max-width:34ch; margin:0}
.mt-sm{margin-top:20px}
.mt-md{margin-top:24px}
.mt-lg{margin-top:32px}
.mb-md{margin-bottom:24px}
.note-sm{font-size:var(--fs-sm); color:var(--mut); margin-top:24px}
.portrait{aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  width:100%; max-height:min(66vh,560px)}
.banner-img{aspect-ratio:16/9; object-fit:cover; width:100%; max-height:min(62vh,560px)}
.prog-narrow{max-width:420px}
.center-row{justify-content:center}
.unit{font-family:var(--sans); font-size:var(--fs-sm); font-weight:600; color:var(--mut)}
.on-dark .unit{color:#9FB2C7}
.lede-dark{color:#C9D3E0}
.statement-lede{margin:clamp(14px,2vw,20px) 0 20px}
.cta-center{max-width:52ch; margin:0 auto clamp(24px,4vw,32px)}
.signup input.light{border-color:var(--line); background:#fff; color:var(--ink)}
.hero .kicker.on-hero{color:var(--red-lt)}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:100; background:rgba(253,251,247,.92);
  backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:clamp(14px,3vw,32px);
  height:clamp(64px,9vw,80px)}
.brand{display:flex; align-items:center; gap:clamp(8px,1.4vw,13px); text-decoration:none; flex:0 0 auto}
.brand img{display:block; width:auto}
.brand .mark{height:clamp(34px,7vw,42px)}
.brand .wordmark{display:none; height:clamp(15px,1.9vw,19px)}
@media(min-width:640px){ .brand .wordmark{display:block} }
.brand.foot{margin-bottom:24px; gap:0}
.brand.foot img{height:auto; width:clamp(120px,17vw,150px)}

.menu{display:none; gap:clamp(18px,2.6vw,32px); margin-left:auto}
.menu a{color:var(--body); text-decoration:none; font-size:var(--fs-sm); font-weight:600;
  position:relative; padding:8px 0}
.menu a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--red-ui); transition:right .25s}
.menu a:hover::after,.menu a.on::after{right:0}
.menu a.on{color:var(--ink)}
@media(min-width:900px){ .menu{display:flex} }

header .btn{margin-left:auto}
@media(min-width:900px){ header .btn{margin-left:0} }
@media(max-width:479px){
  header .btn{padding:10px 16px; font-size:var(--fs-xs)}
}

/* burger */
.burger{display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
  width:var(--tap); height:var(--tap); background:none; border:0; cursor:pointer; padding:10px;
  margin-right:calc(var(--gut) * -.35)}
.burger span{display:block; height:2px; width:100%; background:var(--ink);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:900px){ .burger{display:none} }

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:95; background:var(--cream);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column; padding:calc(var(--gut) + 76px) var(--gut) var(--gut);
  overflow-y:auto; visibility:hidden}
.drawer.open{transform:none; visibility:visible}
.drawer a{font-family:var(--serif); font-size:var(--fs-2xl); color:var(--ink);
  text-decoration:none; padding:clamp(10px,2.4vw,16px) 0; border-bottom:1px solid var(--line);
  font-weight:600; letter-spacing:-.02em}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{margin-top:clamp(20px,4vw,32px); font-size:var(--fs-base)}
.drawer .meta{margin-top:auto; padding-top:32px; font-size:var(--fs-xs); color:var(--mut); line-height:1.8}
body.locked{overflow:hidden}
@media(min-width:900px){ .drawer{display:none} }

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy-dk); color:#EDE7DD; overflow:hidden;
  min-height:min(78svh,660px); display:flex; align-items:flex-end}
@supports not (height:1svh){ .hero{min-height:min(78vh,660px)} }
@media(max-width:899px) and (orientation:landscape){ .hero{min-height:auto} }
.hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5}
.hero .veil{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,31,56,.78) 0%,rgba(11,31,56,.34) 34%,rgba(11,31,56,.95) 100%)}
.hero .wrap{position:relative; z-index:2;
  padding-top:clamp(96px,18vw,150px); padding-bottom:clamp(44px,7vw,88px)}
.hero h1{color:#fff; max-width:15ch}
.hero h1 em{font-style:normal; color:var(--red-lt)}
.hero p{color:#D6DEE8; font-size:var(--fs-lg); max-width:50ch;
  margin-top:clamp(16px,2.6vw,22px)}
.hero .btnrow{margin-top:clamp(24px,4vw,34px)}
.scrollcue{position:absolute; right:var(--gut); bottom:32px; z-index:3; color:#8FA3BA;
  font-size:var(--fs-2xs); letter-spacing:.2em; text-transform:uppercase; writing-mode:vertical-rl; display:none}
@media(min-width:1200px){ .scrollcue{display:block} }

/* ---------- stat strip ---------- */
.strip{background:var(--ink); color:#C9D3E0}
.strip .wrap{display:grid; gap:0}
@media(min-width:640px){ .strip .wrap{grid-template-columns:repeat(3,1fr)} }
.strip .cell{padding:clamp(22px,3.4vw,40px) 0; border-bottom:1px solid rgba(255,255,255,.13)}
.strip .cell:last-child{border-bottom:0}
@media(min-width:640px){
  .strip .cell{padding-inline:clamp(18px,3vw,34px); border-bottom:0; border-left:1px solid rgba(255,255,255,.13)}
  .strip .cell:first-child{padding-left:0; border-left:0}
  .strip .cell:last-child{padding-right:0}
}
.strip b{display:block; font-family:var(--serif); font-size:var(--fs-3xl);
  color:#fff; font-weight:600; line-height:1; margin-bottom:8px; letter-spacing:-.03em}
.strip span{font-size:var(--fs-sm); color:#9FB2C7}

/* ---------- feature (offset editorial) ---------- */
.feature{display:grid; gap:var(--stack); align-items:center}
@media(min-width:900px){
  .feature{grid-template-columns:1fr 1fr; gap:clamp(38px,5vw,84px)}
  .feature.flip .txt{order:2}
}
.feature .media{position:relative}
@media(min-width:900px){
  .feature .media::after{content:""; position:absolute; inset:0; border:1px solid var(--line);
    transform:translate(14px,14px); z-index:-1}
}

/* ---------- before / after ---------- */
.ba{position:relative; overflow:hidden; aspect-ratio:4/3; user-select:none;
  touch-action:pan-y; background:var(--navy-dk)}
@media(min-width:900px){ .ba{aspect-ratio:4/3; max-height:min(64vh,540px)} }
.ba.wide{aspect-ratio:4/3}
@media(min-width:640px){ .ba.wide{aspect-ratio:16/9} }
@media(min-width:1200px){ .ba.wide{aspect-ratio:21/9} }
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba .aft{clip-path:inset(0 0 0 50%)}
.ba .tag{position:absolute; top:clamp(10px,2vw,16px); font-family:var(--sans);
  font-size:var(--fs-3xs); font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  background:rgba(11,31,56,.9); color:#fff; padding:8px 12px; z-index:3}
.ba .tag.l{left:clamp(10px,2vw,16px)} .ba .tag.r{right:clamp(10px,2vw,16px)}
.ba .hdl{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; z-index:4; cursor:ew-resize}
.ba .knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(44px,8vw,52px); height:clamp(44px,8vw,52px); border-radius:50%; background:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-weight:800}
.cap{font-size:var(--fs-xs); color:var(--mut); margin-top:16px; font-style:italic}

/* ---------- grids ---------- */
.g2,.g3,.g4{display:grid; gap:var(--stack)}
@media(min-width:640px){ .g2{grid-template-columns:1fr 1fr} .g4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .g3{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ .g4{grid-template-columns:repeat(4,1fr)} }
@media(min-width:640px) and (max-width:899px){ .g3{grid-template-columns:repeat(2,1fr)} }

/* ---------- cards ---------- */
.card{display:flex; flex-direction:column; text-decoration:none; background:transparent}
.card .ph{position:relative; overflow:hidden; aspect-ratio:5/4; margin-bottom:16px}
.card .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover){ .card:hover .ph img{transform:scale(1.05)} }
.card .badge{position:absolute; top:0; left:0; z-index:2; font-family:var(--sans);
  font-size:var(--fs-3xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 12px; color:#fff}
.badge.done{background:var(--navy)} .badge.live{background:var(--red-ui)} .badge.plan{background:#667485}
.card .meta{font-size:var(--fs-2xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut); margin-bottom:8px}
.card h3{margin-bottom:8px; transition:color .18s}
@media(hover:hover){ .card:hover h3{color:var(--red-ui)} }
.card p{font-size:var(--fs-sm); color:var(--mut); margin-bottom:16px}
.card .go{margin-top:auto; font-family:var(--sans); font-size:var(--fs-sm); font-weight:800; color:var(--red-ui)}

.pillar{border-top:2px solid var(--ink); padding-top:20px}
.pillar .n{font-family:var(--serif); font-size:var(--fs-xs); color:var(--red-ui); font-weight:600;
  letter-spacing:.1em; display:block; margin-bottom:12px}
.pillar h3{margin-bottom:8px}
.pillar p{font-size:var(--fs-sm); color:var(--mut); margin:0}

/* ---------- donation panel ---------- */
.give{background:#fff; border:1px solid var(--line);
  padding:clamp(22px,4.4vw,44px); box-shadow:0 24px 60px -30px rgba(18,38,63,.3)}
.give h2{font-size:var(--fs-2xl); margin-bottom:8px}
.give .sub{color:var(--mut); font-size:var(--fs-base); margin-bottom:clamp(20px,3.4vw,26px)}
.prog{margin-bottom:clamp(20px,3.4vw,26px)}
.prog .row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; gap:12px; flex-wrap:wrap}
.prog .row span{font-size:var(--fs-sm); color:var(--mut); font-weight:600}
.prog .row b{font-family:var(--serif); font-size:var(--fs-xl); color:var(--ink); font-weight:600}
.prog .bar{height:8px; background:var(--sand); overflow:hidden}
.prog .fill{height:100%; background:var(--red-ui)}

.freq{display:flex; gap:10px; margin-bottom:16px}
.freq button{flex:1; min-height:var(--tap); background:#fff; border:2px solid var(--line);
  padding:12px 8px; font:inherit; font-family:var(--sans); font-size:var(--fs-sm);
  font-weight:750; color:var(--body); cursor:pointer; line-height:1.3; border-radius:2px; transition:.15s}
.freq button.on{border-color:var(--ink); background:var(--ink); color:#fff}
.freq button.on small{color:#B7C4D3}
.freq small{display:block; font-size:var(--fs-2xs); font-weight:500; color:var(--mut); margin-top:2px}

.tiers{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px}
@media(min-width:680px){ .tiers{grid-template-columns:repeat(4,1fr)} }
.tier{border:2px solid var(--line); background:#fff; padding:16px 8px; text-align:center;
  cursor:pointer; transition:.15s; border-radius:2px; min-height:var(--tap);
  display:flex; flex-direction:column; justify-content:center}
.tier:hover{border-color:var(--mut)}
.tier.on{border-color:var(--red-ui); background:#FDF4F4}
.tier b{display:block; font-family:var(--serif); color:var(--ink);
  font-size:var(--fs-lg); font-weight:600}
.tier small{display:block; font-size:var(--fs-2xs); color:var(--mut); margin-top:4px; line-height:1.3}
.pay{display:grid; gap:10px}
.vipps{background:#E8501A} .vipps:hover{background:#C43F12}
.secure{text-align:center; font-size:var(--fs-xs); color:var(--mut); margin-top:16px}



.storycol{min-width:0}
@media(min-width:1000px){
  .storycol{padding-right:clamp(0px,1vw,16px)}
}
@media(max-width:999px){
  .givecol{margin-top:clamp(24px,4vw,32px)}
}
/* ---------- donate page ---------- */
.donate-layout{display:grid; gap:clamp(24px,4vw,48px)}
@media(min-width:1000px){
  .donate-layout{grid-template-columns:minmax(0,1fr) 340px; align-items:start}
  .donate-side{position:sticky; top:calc(clamp(64px,9vw,80px) + 20px)}
}
.donate-h{font-size:var(--fs-3xl); margin-bottom:12px}

/* name + email */
.fields{display:grid; gap:12px; margin:20px 0}
@media(min-width:560px){ .fields{grid-template-columns:1fr 1fr} }
.fld{display:block}
.fld > span{display:block; font-size:var(--fs-2xs); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut); margin-bottom:8px}
.fld input{width:100%; min-height:var(--tap); padding:12px 16px; font:inherit;
  font-size:var(--fs-base); border:2px solid var(--line); border-radius:2px;
  background:#fff; color:var(--ink)}
.fld input:focus{border-color:var(--ink); outline:none}
.fld input:focus-visible{outline:3px solid var(--red-ui); outline-offset:2px}
.fld small{display:block; margin-top:8px; font-size:var(--fs-2xs); color:var(--mut)}
@media(min-width:560px){ .fld:first-child small{visibility:hidden} }

/* side panel */
.side-card{border:1px solid var(--line); background:#fff; overflow:hidden}
.side-img{width:100%; aspect-ratio:16/10; object-fit:cover}
.side-in{padding:20px}
.side-in h2{font-size:var(--fs-xl); margin-bottom:12px}
.ticks{list-style:none; margin:0 0 16px; padding:0}
.ticks li{position:relative; padding-left:26px; margin-bottom:10px;
  font-size:var(--fs-sm); color:var(--body)}
.ticks li::before{content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--red-ui); font-weight:800}
.side-in .note-sm{margin-top:0; margin-bottom:16px}

.other-ways{margin-top:32px; padding-top:24px; border-top:1px solid var(--line)}
.other-ways h2{font-size:var(--fs-xl); margin-bottom:12px}

/* ---------- pull quote ---------- */
.quote{position:relative; padding-left:clamp(26px,6vw,64px)}
.quote::before{content:"\201C"; position:absolute; left:-4px; top:clamp(-18px,-3vw,-26px);
  font-family:var(--serif); font-size:var(--fs-mark); color:var(--red);
  line-height:1; opacity:.24}
.quote p{font-family:var(--serif); font-size:var(--fs-2xl); line-height:1.34;
  color:var(--ink); font-weight:500; letter-spacing:-.02em}
.on-dark .quote p{color:#fff}
.quote .who{display:block; font-family:var(--sans); font-size:var(--fs-xs); color:var(--mut);
  font-weight:750; letter-spacing:.06em; margin-top:16px}
.on-dark .quote .who{color:#9FB2C7}

/* ---------- video ---------- */
.video{position:relative; overflow:hidden; aspect-ratio:16/9; cursor:pointer;
  background:var(--navy-dk); max-height:min(62vh,520px); margin-inline:auto}
@media(max-width:479px){ .video{aspect-ratio:4/3} }
.video img{width:100%;height:100%;object-fit:cover;opacity:.66; transition:transform .8s,opacity .3s}
@media(hover:hover){ .video:hover img{transform:scale(1.03); opacity:.55} }
.video .play{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:clamp(10px,2vw,16px); color:#fff; text-align:center; padding:16px}
.video .disc{width:clamp(60px,12vw,82px); height:clamp(60px,12vw,82px); border-radius:50%;
  background:var(--red-ui); display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xl); transition:transform .25s}
@media(hover:hover){ .video:hover .disc{transform:scale(1.08)} }
.video span{font-family:var(--sans); font-size:var(--fs-xs); letter-spacing:.07em;
  font-weight:700; text-transform:uppercase}

/* ---------- dark ---------- */
.on-dark{background:var(--navy-dk); color:#C9D3E0}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark .big{color:#fff}
.on-dark .cap{color:#8FA3BA}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl{width:100%; border-collapse:collapse; font-size:var(--fs-base)}
.tbl th,.tbl td{text-align:left; padding:clamp(12px,2.4vw,16px) 4px; border-bottom:1px solid var(--line)}
.tbl th{font-family:var(--sans); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.13em;
  color:var(--mut); font-weight:800}
.tbl td:last-child,.tbl th:last-child{text-align:right; white-space:nowrap; padding-left:16px}
.tbl tr:last-child td{border-bottom:0; font-weight:800; color:var(--ink)}
.tbl.plain td:first-child{color:var(--mut); font-weight:600; width:44%}
.tbl.plain td:last-child{text-align:left; color:var(--ink); font-weight:750; white-space:normal}
.tbl.plain tr:last-child td{font-weight:750}
@media(max-width:479px){
  .tbl.plain td:first-child{width:42%}
  .tbl.plain td{font-size:var(--fs-sm)}
}

/* ---------- team ---------- */
.person img{aspect-ratio:3/4; object-fit:cover; width:100%; margin-bottom:16px}
.person b{display:block; font-family:var(--serif); color:var(--ink);
  font-size:var(--fs-lg); font-weight:600}
.person small{color:var(--mut); font-size:var(--fs-xs)}

/* ---------- steps ---------- */
.step{border-top:2px solid var(--ink); padding-top:20px}
.step .n{font-family:var(--serif); font-size:var(--fs-2xl); color:var(--red-ui);
  font-weight:600; line-height:1; display:block; margin-bottom:12px}
.step p{font-size:var(--fs-sm); color:var(--mut); margin:0}

/* ---------- signup ---------- */
.signup .form{display:flex; gap:10px; max-width:480px; flex-wrap:wrap; margin-top:clamp(18px,3vw,24px)}
.signup input{flex:1 1 220px; min-height:var(--tap); padding:16px 16px;
  border:2px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:#fff;
  font:inherit; font-size:var(--fs-base); border-radius:2px}
.signup input::placeholder{color:#8FA3BA}
.center .signup .form{margin-inline:auto}
@media(max-width:479px){ .signup .form .btn{width:100%} }

/* ---------- footer ---------- */
footer{background:var(--ink); color:#9FB2C7; padding:clamp(46px,8vw,88px) 0 32px;
  font-size:var(--fs-sm)}
footer .cols{display:grid; gap:clamp(26px,4vw,36px)}
@media(min-width:560px){ footer .cols{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ footer .cols{grid-template-columns:1.8fr 1fr 1fr 1fr} }
@media(min-width:560px) and (max-width:999px){ footer .cols>div:first-child{grid-column:1/-1} }
footer .foot-h{color:#fff; font-family:var(--sans); font-size:var(--fs-2xs); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 16px; line-height:1.3}
footer a{color:#9FB2C7; text-decoration:none; display:block; margin-bottom:10px;
  font-size:var(--fs-sm); transition:color .15s; padding:2px 0}
footer a:hover{color:#fff}
footer .brand b{color:#fff} footer .brand small{color:#7D91A8}
.legal{border-top:1px solid rgba(255,255,255,.14); margin-top:clamp(30px,5vw,44px);
  padding-top:24px; font-size:var(--fs-xs); color:#8296AC; line-height:1.9}
.legal b{color:#D6DEE8}

/* ---------- sticky ask ----------
   Hidden on arrival. Slides up only after the visitor has read
   enough to know who we are (Google penalises popups that block
   content on arrival; engagement-triggered slide-ins are exempt).
   Never covers more than ~22% of a mobile viewport. */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:90; background:#fff;
  border-top:1px solid var(--line);
  padding:12px clamp(16px,4vw,20px) calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  box-shadow:0 -6px 28px rgba(18,38,63,.13);
  transform:translateY(110%); transition:transform .42s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.sticky.show{transform:none}
.sticky .t{flex:1; min-width:0}
.sticky .t b{display:block; font-family:var(--serif); color:var(--ink);
  font-size:var(--fs-base); line-height:1.2; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sticky .t small{color:var(--mut); font-size:var(--fs-2xs)}
.sticky .btn{padding:12px clamp(16px,4vw,24px); white-space:nowrap; min-height:var(--tap)}

/* expanded state — shown once, then settles back to compact */
.sticky .more{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .42s cubic-bezier(.2,.7,.3,1), opacity .3s;
}
.sticky .more > div{overflow:hidden; min-height:0}
.sticky.big .more{grid-template-rows:1fr; opacity:1}
.sticky.big{flex-wrap:wrap}
.sticky .more .bar{height:6px; background:var(--sand); overflow:hidden; margin-top:10px}
.sticky .more .fill{height:100%; background:var(--red-ui); width:12.5%}
.sticky .more p{margin:0; font-size:var(--fs-2xs); color:var(--mut)}
.sticky .close{
  background:none; border:0; cursor:pointer; color:var(--mut); font-size:1.1rem;
  line-height:1; width:var(--tap); height:var(--tap); flex:0 0 auto; border-radius:50%;
}
.sticky .close:hover{background:var(--sand); color:var(--ink)}
/* desktop: the bar still appears, but sits inline-right rather than
   spanning the full width, and pages with a sticky give card opt out */
@media(min-width:900px){
  .sticky{left:auto; right:24px; bottom:24px; width:min(420px,38vw);
    border:1px solid var(--line); border-radius:2px;
    box-shadow:0 18px 46px rgba(18,38,63,.20);
    padding:16px 20px; transform:translateY(140%)}
  .sticky.show{transform:none}
  body.has-givecard .sticky{display:none}
}
@media(max-width:319px){ .sticky .t small{display:none} }
@media(prefers-reduced-motion:reduce){
  .sticky{transition:none}
  .sticky .more{transition:none}
}

/* ---------- sticky donation card (desktop project page) ---------- */
.givecol{position:relative}
@media(min-width:1000px){
  .project-layout{display:grid; grid-template-columns:minmax(0,1fr) 380px;
    gap:clamp(32px,4vw,64px); align-items:start}
  .givecol{position:sticky; top:calc(clamp(64px,9vw,80px) + 20px)}
  .givecol .give{padding:24px}
  .givecol .give h2{font-size:var(--fs-2xl)}
  .givecol .tiers{grid-template-columns:repeat(2,1fr)}
}

/* ---------- comp bar ---------- */
.compbar{background:#111; color:#ccc; font-size:var(--fs-2xs); padding:8px 0; letter-spacing:.03em}
.compbar .wrap{display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; align-items:center}
.compbar a{color:#fff; text-decoration:none; background:#333; padding:4px 12px; font-size:var(--fs-2xs)}
.compbar a.on{background:#fff; color:#111; font-weight:700}
.compbar .grp{display:flex; gap:8px; flex-wrap:wrap}
@media(max-width:479px){ .compbar>.wrap>span:first-child{display:none} }

/* ---------- print ---------- */
@media print{
  .compbar,.sticky,.burger,.drawer,header .btn,.video,.signup{display:none!important}
  body{background:#fff; padding:0}
  .hero{min-height:auto; background:#fff; color:#000}
  .hero img.bg,.hero .veil{display:none}
  .hero h1,.hero p{color:#000}
  .on-dark{background:#fff; color:#000}
  .on-dark h1,.on-dark h2,.on-dark h3{color:#000}
  a{text-decoration:underline}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   v4 — language toggle · duotone · colour blocking · motion
   ============================================================ */

/* ---------- language toggle ---------- */
.langtoggle{display:flex; border:1.5px solid var(--line); border-radius:2px; overflow:hidden; flex:0 0 auto}
.langtoggle button{
  background:transparent; border:0; cursor:pointer; font:inherit; font-family:var(--sans);
  font-size:var(--fs-2xs); font-weight:800; letter-spacing:.09em; color:var(--mut);
  padding:8px 10px; min-height:34px; transition:background .16s,color .16s;
}
.langtoggle button.on{background:var(--ink); color:#fff}
.langtoggle button:not(.on):hover{background:var(--sand); color:var(--ink)}
/* Mobile: language toggle sits between the logo and Donate.
   margin-left:auto on the toggle collects the free space, so the
   pair (EN|NO)(Donate) rides the right edge together. */
@media(max-width:899px){
  header .langtoggle{display:flex; margin-left:auto}
  header .btn{margin-left:12px}
}
@media(max-width:479px){
  header .langtoggle button{padding:7px 9px; min-height:32px}
  header .btn.sm{padding:11px 14px}
  .nav{gap:10px}
}
.drawer-lang{align-self:flex-start; margin-top:clamp(18px,3vw,26px)}
.drawer-lang button{padding:10px 16px; font-size:var(--fs-xs); min-height:var(--tap)}

/* ---------- duotone (supporting imagery only) ---------- */
.duo{position:relative; overflow:hidden; isolation:isolate; background:none; line-height:0}
.duo img{display:block}
.duo img{filter:none}
.duo::before,.duo::after{content:""; position:absolute; inset:0; pointer-events:none}
.duo::before{background:none}
.duo::after{background:none}
.duo.warm::after{background:none}
/* colour returns on hover for portraits */
@media(hover:hover){
  .person .duo img,.person .duo::before,.person .duo::after{transition:filter .45s,opacity .45s}
  .person:hover .duo img{filter:none}
  .person:hover .duo::before{opacity:0}
  .person:hover .duo::after{opacity:0}
}
/* the old blanket greyscale on portraits is replaced by .duo */
.person img{filter:none}

/* ---------- colour blocking ---------- */
:root{ --deep-red:#9E1418 }
.on-red{background:var(--deep-red); color:#F6E4E2}
.on-red h1,.on-red h2,.on-red h3,.on-red .big{color:#fff}
.on-red .kicker{color:#FFC9BE}
.on-red .quote::before{color:#fff; opacity:.26}
.on-red .quote p{color:#fff}
.on-red .quote .who{color:#F3C9C4}
.on-red .cap{color:#EFC6C1}
/* on a red panel CTAs go cream — red-on-red can never happen,
   so "red = donate" survives */
.on-red .btn{background:var(--cream); color:var(--deep-red)}
.on-red .btn:hover{background:#fff}
.on-red .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.on-red .btn.ghost:hover{background:#fff; color:var(--deep-red)}
.on-red a:focus-visible,.on-red button:focus-visible{outline-color:#FFC9BE}

/* hairline rule at section boundaries */
.rule-top{border-top:3px solid var(--red-ui)}

/* ---------- motion ---------- */
.hero img.bg{will-change:transform}
.reveal.stagger{transition-delay:var(--d,0ms)}

/* button fill sweep */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; transform:scaleX(0);
  transform-origin:left; transition:transform .34s cubic-bezier(.2,.7,.3,1);
  background:rgba(0,0,0,.16)}
@media(hover:hover){ .btn:hover::before{transform:scaleX(1)} }
.btn.ghost::before{background:var(--ink)}
.on-red .btn::before{background:rgba(0,0,0,.10)}

/* progress bar fills on scroll */
.prog .fill{width:0; transition:width 1.4s cubic-bezier(.2,.7,.3,1)}

/* count-up numerals hold their width so the layout cannot jump */
.strip b{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .hero img.bg{transform:none!important}
  .prog .fill{transition:none!important}
  .btn::before{display:none}
  .reveal.stagger{transition-delay:0ms!important}
}

/* ---------- Norwegian overflow guards ----------
   Compounds like Organisasjonsnummer / Frivillighetsregisteret
   are long enough to break tight components. */
.menu a,.drawer a,.card h3,.pillar h3,.step h3{hyphens:auto; overflow-wrap:break-word}
.tier b,.tier small{hyphens:auto; overflow-wrap:anywhere}
.tbl.plain td:first-child{overflow-wrap:anywhere; hyphens:auto}
.btn{overflow-wrap:break-word; white-space:normal}
@media(max-width:400px){
  .tbl.plain td:first-child{width:46%; font-size:var(--fs-xs)}
  .tbl.plain td:last-child{font-size:var(--fs-sm)}
}

/* ============================================================
   v5 — heartbeat: header pulse + donation processing state
   ============================================================ */

/* real cardiac rhythm: lub-dub, then rest.
   two beats close together beats a single even pulse. */
@keyframes beat{
  0%   { transform:scale(1) }
  9%   { transform:scale(1.24) }   /* LUB  — first beat, big */
  19%  { transform:scale(1.02) }   /* relax, but not all the way */
  29%  { transform:scale(1.17) }   /* DUB  — second beat, clearly separate */
  44%  { transform:scale(1) }      /* settle */
  100% { transform:scale(1) }      /* rest, so the pair reads as one heartbeat */
}
@keyframes ring{
  0%   { transform:scale(.72); opacity:.55 }
  70%  { opacity:0 }
  100% { transform:scale(1.85); opacity:0 }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:none }
}

/* --- 3 · one pulse on the header mark at load --- */
/* only the heart beats — the wordmark is a separate image and stays still */
.brand .mark{transform-origin:center; animation:beat 1.4s ease-out .45s 2 both}
.brand .wordmark{animation:none}

/* --- 1 · donation processing overlay --- */
.payover{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(11,31,56,.97);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.payover.on{display:flex}
.payover .panel{text-align:center; max-width:420px; color:#C9D3E0}
.payover .heartwrap{position:relative; width:132px; height:132px; margin:0 auto 32px;
  display:flex; align-items:center; justify-content:center}
.payover .heartwrap img{width:104px; height:auto; transform-origin:center;
  animation:beat 1.4s ease-out infinite}
.payover .heartwrap::before,.payover .heartwrap::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(232,35,42,.5); animation:ring 2.8s ease-out infinite}
.payover .heartwrap::after{animation-delay:1.4s}
.payover h2{color:#fff; font-size:var(--fs-2xl); margin-bottom:12px}
.payover p{color:#AFC0D2; font-size:var(--fs-base); margin:0 auto; max-width:34ch}
.payover .amt{display:block; font-family:var(--serif); color:var(--red-lt);
  font-size:var(--fs-2xl); font-weight:600; margin-bottom:8px}
.payover .dots::after{content:""; animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* success state */
.payover.done .heartwrap img{animation-duration:2.6s}
.payover.done .heartwrap::before,.payover.done .heartwrap::after{
  border-color:rgba(255,255,255,.34)}
.payover .success{display:none; animation:fadeUp .5s ease-out both}
.payover.done .success{display:block}
.payover.done .working{display:none}
.payover .success .btn{margin-top:24px}
.payover .receipt{margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16);
  font-size:var(--fs-sm); color:#8FA3BA; line-height:1.7}

/* demo label so nobody mistakes this for a live payment */
.payover .demo{position:absolute; top:16px; left:0; right:0; text-align:center;
  font-size:var(--fs-3xs); letter-spacing:.18em; text-transform:uppercase; color:#6E829A; font-weight:800}

@media(prefers-reduced-motion:reduce){
  .brand .mark{animation:none}
  .payover .heartwrap img{animation:none}
  .payover .heartwrap::before,.payover .heartwrap::after{animation:none; opacity:0}
  .payover .dots::after{animation:none; content:"..."}
  .payover .success{animation:none}
}

/* ---------- scroll-triggered invitation (home only) ----------
   Fires on engagement, never on arrival — Google's intrusive
   interstitial signal exempts scroll-triggered overlays.
   Carries the ask, not the payment form: Vipps redirects away
   from the page, so the form itself must live at a real URL. */
.invite{
  position:fixed; inset:0; z-index:150; display:none;
  align-items:center; justify-content:center; padding:20px;
}
.invite.on{display:flex}
.invite .veil{position:absolute; inset:0; background:rgba(11,31,56,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  animation:fadeIn .3s ease-out both}
.invite .box{
  position:relative; z-index:2; background:var(--cream); max-width:520px; width:100%;
  max-height:90vh; max-height:90svh; overflow-y:auto; box-shadow:0 30px 80px rgba(11,31,56,.45);
  animation:popIn .42s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0; transform:translateY(24px) scale(.97)}to{opacity:1; transform:none}}
.invite figure{margin:0; position:relative}
.invite figure img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.invite figure figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:14px 20px;
  background:linear-gradient(transparent,rgba(11,31,56,.86));
  color:#fff; font-size:var(--fs-2xs); font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
}
.invite .in{padding:clamp(20px,4vw,32px)}
.invite h2{font-size:var(--fs-2xl); margin-bottom:10px}
.invite p{font-size:var(--fs-base); color:var(--body); margin-bottom:18px}
.invite .prog{margin-bottom:20px}
.invite .btnrow{gap:10px}
.invite .btnrow .btn{flex:1 1 auto}
.invite .later{
  display:block; width:100%; margin-top:14px; background:none; border:0; cursor:pointer;
  font:inherit; font-size:var(--fs-sm); color:var(--mut); text-decoration:underline;
  padding:8px; min-height:var(--tap);
}
.invite .later:hover{color:var(--ink)}
.invite .x{
  position:absolute; top:10px; right:10px; z-index:3; width:var(--tap); height:var(--tap);
  border:0; border-radius:50%; background:rgba(11,31,56,.55); color:#fff;
  font-size:1.3rem; line-height:1; cursor:pointer;
}
.invite .x:hover{background:rgba(11,31,56,.8)}
@media(prefers-reduced-motion:reduce){
  .invite .veil,.invite .box{animation:none}
}

/* ============================================================
   v6 — mobile density
   Content is never removed from the DOM (Google indexes
   mobile-first). It is collapsed, tightened, or cut for
   BOTH platforms — never hidden on one.
   ============================================================ */

/* ---------- progressive disclosure ----------
   Collapses to the first paragraph on mobile; full text stays
   in the DOM and is fully expanded from 700px up. */
.more-wrap{position:relative}
.more-wrap > .rest{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.2,.7,.3,1);
}
.more-wrap > .rest > div{overflow:hidden; min-height:0}
.more-wrap.open > .rest{grid-template-rows:1fr}
.more-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  background:none; border:0; padding:10px 0; min-height:var(--tap);
  font:inherit; font-family:var(--sans); font-size:var(--fs-sm); font-weight:800;
  color:var(--red-ui); cursor:pointer; letter-spacing:.02em;
}
.more-btn::after{content:"↓"; transition:transform .3s}
.more-wrap.open .more-btn::after{transform:rotate(180deg)}
.on-dark .more-btn{color:var(--red-lt)}
.on-red .more-btn{color:#FFC9BE}
@media(min-width:700px){
  .more-wrap > .rest{grid-template-rows:1fr}
  .more-btn{display:none}
}
@media(prefers-reduced-motion:reduce){ .more-wrap > .rest{transition:none} }

/* ---------- mobile density ----------
   Section padding was tuned for desktop and applied everywhere. */
@media(max-width:699px){
  :root{
    --sec:clamp(32px,7vw,56px);
    --sec-t:clamp(24px,5vw,40px);
    --stack:18px;
  }
  .sec-head{margin-bottom:20px}
  .hero{min-height:min(72svh,560px)}
  .hero .wrap{padding-top:88px; padding-bottom:36px}
  p{margin-bottom:.9em}
  .lede{line-height:1.5}
  .statement{padding-top:16px}
  .give{padding:20px}
  .prog{margin-bottom:16px}
  .freq{margin-bottom:12px}
  .tiers{margin-bottom:16px; gap:8px}
  .tier{padding:11px 6px}
  .side-in,.card .in{padding:16px}
  .signup .form{margin-top:16px}
  .other-ways{margin-top:24px; padding-top:20px}
  footer{padding-top:40px}
  footer .cols{gap:22px}
  .legal{margin-top:26px; padding-top:18px}
  /* stat strip: 3 stacked cells was 354px for three short facts */
  .strip .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
  .strip .cell{padding:18px 8px; border-bottom:0; text-align:center}
  .strip b{font-size:var(--fs-xl); margin-bottom:4px}
  .strip span{font-size:var(--fs-3xs); line-height:1.35}
  /* team: 4 stacked portraits was ~2000px */
  /* headshots stay 3:4 at every width, otherwise object-fit re-crops the
     frame and eats the headroom above the crown */
  .person img{aspect-ratio:3/4; max-height:none}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
  .strip .cell{padding:14px 5px}
  .strip span{font-size:9.5px; letter-spacing:0}
}

/* ---------- mobile: project cards swipe instead of stack ----------
   The rail lives OUTSIDE .wrap. No negative margins, no transform
   on the scroll container — both created a layout box wider than
   the viewport, which body{overflow-x:hidden} only masks on desktop
   and does not reliably mask in mobile Safari. */
.cardrail{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}

@media(max-width:699px){
  .cardrail{
    max-width:none; margin:0; padding:0;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scroll-padding-left:var(--gut);          /* iOS < 15 */
    scroll-padding-inline-start:var(--gut);
    scrollbar-width:none;
  }
  .cardrail::-webkit-scrollbar{display:none}
  /* edge padding is done with flex SPACERS, not padding.
     box-sizing:border-box + width:max-content absorbs padding into
     the max-content calculation, so it never renders and the row
     sits flush against the screen edge. */
  .g3.cards{
    display:flex; gap:12px; width:auto;
    padding:0 0 12px; margin:0;
  }
  .g3.cards::before,
  .g3.cards::after{
    content:""; flex:0 0 var(--gut); align-self:stretch;
  }
  .g3.cards > .card{
    flex:0 0 min(76vw, 320px);
    scroll-snap-align:start;
    opacity:1; transform:none;
  }
  .g3.cards .ph{aspect-ratio:16/10; margin-bottom:12px}
  .g3.cards .card p{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; margin-bottom:10px;
  }
  .swipe-hint{
    display:flex; align-items:center; gap:8px; margin:0 0 10px;
    font-size:var(--fs-2xs); color:var(--mut); font-weight:700;
    letter-spacing:.08em; text-transform:uppercase;
  }
  .swipe-hint::after{content:"→"; animation:nudge 1.8s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  .quote p{font-size:var(--fs-xl); line-height:1.35}
  .quote::before{font-size:4rem; top:-12px}
  .portrait{max-height:min(42vh,320px)}
}
@media(min-width:700px){ .swipe-hint{display:none} }
@media(prefers-reduced-motion:reduce){ .swipe-hint::after{animation:none} }

/* ---------- mobile footer ----------
   The two nav columns duplicate the hamburger drawer, which is
   already in the DOM on mobile — so hiding them here costs nothing
   for crawling and removes ~250px of redundant scrolling.
   What remains is what a footer is actually for on a phone:
   how to reach us, and who we legally are. */
@media(max-width:699px){
  footer{padding:28px 0 22px}
  footer .cols{display:block}
  footer .cols > div:not(:first-child):not(:last-child){display:none}  /* nav columns */
  footer .brand.foot{margin-bottom:16px}
  footer .brand.foot img{width:104px}
  footer .foot-blurb{display:none}
  footer .cols > div:last-child .foot-h{display:none}                  /* "Get in touch" is obvious */
  footer .cols > div:last-child a[href^="mailto"],
  footer .cols > div:last-child a[href^="tel"],
  footer .cols > div:last-child > a{
    display:flex; align-items:center; min-height:var(--tap);
    font-size:var(--fs-base); color:#fff; font-weight:600; margin-bottom:2px;
  }
  .socials{margin-top:14px}
  .legal{margin-top:20px; padding-top:16px; font-size:var(--fs-3xs); line-height:1.65}
}

/* signup section: kicker + h2 + lede + form was ~500px */
@media(max-width:699px){
  .signup ~ *,.signup{margin-top:0}
  section.sec-sand.tight .lede{font-size:var(--fs-sm); line-height:1.5}
}

/* ---------- social icons ---------- */
.socials{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); margin:0; border-radius:2px;
  background:rgba(255,255,255,.09); color:#C9D3E0; transition:.16s;
}
.socials a:hover{background:var(--red-ui); color:#fff}
.socials svg{width:19px; height:19px; fill:currentColor; display:block}
@media(max-width:699px){
  .socials{gap:8px}
  .socials a{width:40px; height:40px}
  .socials svg{width:17px; height:17px}
}

/* ---------- project cards, by state ----------
   Three cards doing three different jobs, not one card three times.
   Completed = evidence · Ongoing = fundable · Planned = costed. */
.card{background:transparent}
article.card{display:flex; flex-direction:column}
.card .ph.noimg{
  aspect-ratio:5/4; background:var(--sand); border:1px solid var(--line);
  display:flex; align-items:flex-end; padding:16px;
}
.card .ph.noimg .ph-note{
  font-size:var(--fs-2xs); color:var(--mut); line-height:1.5; font-weight:600;
  max-width:32ch;
}
.card.is-plan .ph.noimg{background:var(--soft)}

/* the live card is the one that can take money — give it weight */
.card.is-live{
  background:#fff; border:1px solid var(--line);
  box-shadow:0 12px 34px -22px rgba(18,38,63,.4);
}
.card.is-live .ph{margin-bottom:0}
.card.is-live > *:not(.ph){padding-inline:16px}
.card.is-live > .meta{padding-top:14px}
.card.is-live > *:last-child{padding-bottom:16px}

.card-prog{margin:2px 0 14px}
.card-prog .row{margin-bottom:6px}
.card-prog .row span{font-size:var(--fs-2xs)}
.card-prog .row b{font-size:var(--fs-base)}
.card-prog .bar{height:6px}

.card-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:auto}
.card-actions .go{margin-top:0}
a.go{text-decoration:none; display:inline-flex; align-items:center; min-height:var(--tap)}
a.go:hover{text-decoration:underline}
article.card:hover h3{color:inherit}
article.card h3{transition:none}
@media(hover:hover){
  article.card:hover .ph img{transform:scale(1.04)}
}

@media(max-width:699px){
  .card.is-live > *:not(.ph){padding-inline:14px}
  .card .ph.noimg{aspect-ratio:16/10; padding:12px}
  .card-actions{gap:10px}
  .card-actions .btn.sm{flex:1 1 auto}
}

/* ---------- project status + budget table (Aug 2026 record) ---------- */
.prog .prognote{
  margin:2px 0 0; font-size:var(--fs-sm); color:var(--mut); font-weight:600;
}
.on-dark .prog .prognote{color:#9FB2C7}
.tbl tr.sub td{border-top:1px solid var(--line)}
.tbl tr.tot td{border-top:2px solid var(--ink)}
.shot{margin:0}
/* Source is portrait 1200x1600. Unconstrained at 90vw that renders ~1728px
   tall on a laptop — nearly two screens. Crop to a wider ratio as the
   viewport widens, biased to 38% down so the three faces stay in frame. */
.shot img{display:block; width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:50% 34%; max-height:64vh}
@media(min-width:600px){
  .shot img{aspect-ratio:4/3; object-position:50% 38%; max-height:min(66vh,560px)}
}
@media(min-width:1000px){
  .shot img{aspect-ratio:16/10; max-height:min(68vh,600px)}
}
.shot .cap{margin-top:10px}

/* Vipps brand orange is fixed; at >=18.7px bold the label counts as large text,
   which needs 3:1 rather than 4.5:1 — white on #E8501A measures 3.75. */
.btn.vipps{font-size:19px; font-weight:700}

/* ---------- amount tiles on very narrow phones ----------
   Below 360px the sub-labels wrap and push the tiles from 74px to 89px,
   which tips the donation card past one screen. Amount alone is enough. */
@media(max-width:359px){
  .tier small{display:none}
  .tier{padding-top:14px; padding-bottom:14px}
  .kicker{white-space:normal}
}
@media(max-width:359px){
  /* "Card . Apple Pay . Google Pay" cannot hold one line at 242px without
     dropping below a comfortable size, so let it wrap as two balanced lines
     rather than shrinking the primary button alongside it. */
  .pay .btn.ghost{line-height:1.25; padding-top:10px; padding-bottom:10px; text-wrap:balance}
}

/* ---------- see-all link under the project rail ---------- */
.allprojects{margin:clamp(18px,3vw,26px) 0 0; text-align:right}
@media(max-width:699px){ .allprojects{text-align:left} }

/* ---------- a project grid holding a single card ----------
   Three declared columns left one card marooned in the left third,
   so a lone card gets a comfortable centred width instead. */
@media(min-width:700px){
  .g3.one{grid-template-columns:minmax(0,620px); justify-content:center}
}

/* ---------- payment buttons awaiting live links ----------
   Until a Stripe Payment Link is configured the button routes to
   "Other ways to give" rather than pretending to be a live checkout. */
.btn.is-pending{position:relative}
.btn.vipps.is-pending{background:var(--mut)}
.btn.vipps.is-pending:hover{background:var(--ink)}

/* ---------- founder quote ---------- */
.founder{display:grid; grid-template-columns:minmax(0,260px) 1fr;
  gap:clamp(26px,5vw,58px); align-items:center}
.founder-photo{line-height:0}
.founder-photo img{width:100%; height:auto; display:block}
.founder blockquote{margin:0}
@media(max-width:699px){
  .founder{grid-template-columns:1fr; gap:22px}
  .founder-photo{max-width:210px}
}

/* ---- Vipps how-to reveal (shown when no QR link is configured) ---- */
.vipps-how{margin:14px 0 0;padding:18px 20px;border:1px solid var(--line);
  border-radius:12px;background:var(--sand);text-align:center}
.vipps-how[hidden]{display:none}
.vh-step{margin:0;font-size:var(--fs-sm);color:var(--mut)}
.vh-num{margin:6px 0 8px;font-size:var(--fs-3xl);font-weight:800;letter-spacing:.02em;
  color:var(--ink);
  line-height:1.1;font-variant-numeric:tabular-nums}
.vh-num span{opacity:.45;margin-right:2px}
.vh-note{margin:0;font-size:var(--fs-xs);color:var(--mut);max-width:38ch;
  margin-inline:auto;line-height:1.45}

/* ---- newsletter: consent line + inline status ---- */
.signup-note{margin:10px 0 0;font-size:var(--fs-xs);color:var(--mut);
  max-width:46ch;margin-inline:auto;line-height:1.5}
.signup-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.on-dark .signup-note,.sec-sand .signup-note{color:var(--mut)}
.signup-msg{margin:12px 0 0;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.signup-msg[hidden]{display:none}
.signup-msg.is-err{color:var(--red-ui)}
.on-dark .signup-msg{color:#fff}
.on-dark .signup-msg.is-err{color:var(--red-lt)}

/* ---- newsletter: the block that replaces the form on success ---- */
.signup-done{max-width:44ch;margin:6px auto 0;padding:22px 24px;
  border:1px solid var(--line);border-radius:12px;background:var(--cream);text-align:center}
.signup-done h3{margin:0 0 8px;font-size:var(--fs-xl)}
.signup-done p{margin:0;font-size:var(--fs-sm);color:var(--body);line-height:1.5}
.signup-done b{font-weight:700;word-break:break-all}
.signup-done .signup-spam{margin-top:10px;font-size:var(--fs-xs);color:var(--mut)}
.on-dark .signup-done{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.on-dark .signup-done h3{color:#fff}
.on-dark .signup-done p{color:#D9E2EC}
.on-dark .signup-done .signup-spam{color:#9FB1C4}