/* ============================================================================
   Tzu Chi Philippines: mockup 03 "Signature", every peso changes a life.

   White paper, ink type, and colour that only ever means a kind of help, the
   way the foundation's 2025 Summary Report sets photographs against coloured
   tiles. One family, Hanken Grotesk (Hanken Design Co., Batangas). One radius
   rule: round for what turns and for what you press, square for what rests.
   Plan: docs/superpowers/specs/2026-10-02-concept-03-design-plan.md

   This file: tokens, chrome, the homepage, the docked bar, the donation page
   and the map skin. Inner pages: pages.css.
   ========================================================================== */

:root{
  color-scheme:light;

  /* base */
  --paper:#ffffff;
  --stone:#f2f4f1;
  --stone-2:#e7ebe7;
  --ink:#17201b;
  --ink-hover:#2e3a33;
  --ink-2:#47524c;
  --ink-3:#5b6660;
  --rule:#d3d9d4;
  --rule-2:#e6eae7;
  --line:#7f8a84;             /* control borders, 3:1 or better on Paper and Stone */
  --err:#a61b1b;              /* the one colour that is not a kind of help */

  /* kinds of help (fills only; text on them is --on) */
  --charity:#00704a;
  --medicine:#1f4fb4;
  --education:#e97a2a;
  --relief:#b42318;
  --culture:#9c2a8a;
  --marrow:#7f1d2d;
  --volunteer:#1f2f5c;
  --environment:#0f766e;

  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hold:1240px;
  --gut:32px;
  --top-h:72px;
  --pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --scene:.45s;
}

/* A kind of help: --m is its colour, --on the text that reads on it. */
.m-origin{--m:var(--ink);--on:#fff}
.m-charity{--m:var(--charity);--on:#fff}
.m-medicine{--m:var(--medicine);--on:#fff}
.m-education{--m:var(--education);--on:var(--ink)}
.m-relief{--m:var(--relief);--on:#fff}
.m-culture{--m:var(--culture);--on:#fff}
.m-marrow{--m:var(--marrow);--on:#fff}
.m-volunteer{--m:var(--volunteer);--on:#fff}
.m-environment{--m:var(--environment);--on:#fff}

/* ------------------------------------------------------------- base ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 20px)}
html.dock-up{scroll-padding-bottom:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--sans);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a,button,summary,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
em,i{font-style:italic}
.hold{max-width:var(--hold);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:300;background:var(--ink);color:#fff;padding:12px 18px;
      border-radius:var(--pill);font-weight:700;text-decoration:none}
.skip:focus{left:8px}
::selection{background:#cfe3d8;color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--top-h) + 20px)}

/* Content is never hidden waiting for a scroll position. */
.js .reveal,.js .pg-rv{opacity:1;transform:none;transition:none}

/* the footprint icons are one-colour drawings: white on a dark tile, ink on a bright one */
.ico{display:block;width:40px;height:40px;object-fit:contain;filter:brightness(0) invert(1)}
.m-education .ico{filter:brightness(0)}

/* a colour key: a small square of a kind of help, beside its name */
.key{display:inline-block;flex:none;width:12px;height:12px;background:var(--m);vertical-align:-1px}

/* ------------------------------------------------------------ links ---- */
.tl{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;
    text-underline-offset:4px;transition:text-decoration-thickness .15s var(--ease)}
.tl:hover{text-decoration-thickness:3px}

/* ---------------------------------------------------------- buttons ----
   One filled style, ink. Round, because it is pressed. */
.solid{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
       padding:12px 26px;border:2px solid var(--ink);border-radius:var(--pill);background:var(--ink);
       color:#fff;font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;text-align:center;
       white-space:nowrap;transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .1s}
.solid:hover{background:var(--ink-hover);border-color:var(--ink-hover)}
.solid:active{transform:translateY(1px)}
.solid--block{display:flex;width:100%}
.line{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;
      border:2px solid var(--ink);border-radius:var(--pill);background:transparent;color:var(--ink);
      font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;
      transition:background-color .2s var(--ease)}
.line:hover{background:var(--stone)}
.line:active{transform:translateY(1px)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ------------------------------------------------------- dated notice -- */
/* The headline bar (chrome.js): the newest stories, running right to left
   in a loop, about 40 pixels a second (--mq-dur). It stops while the
   pointer is on it or a link in it has focus, and while it is out of view
   (.is-away). With reduced motion it stands still and shows the newest
   headline in the middle; the others stay for assistive technology. */
.alert{background:var(--stone);color:var(--ink);border-bottom:1px solid var(--rule-2);font-size:14.5px;line-height:1.3}
.mq{overflow:hidden;height:40px}
.mq__track{display:flex;width:max-content;height:100%;animation:mq-go var(--mq-dur,60s) linear infinite}
.mq__list{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none}
.mq__list li{display:flex;align-items:center;flex:none;white-space:nowrap}
.mq__list li::after{content:"";flex:none;width:6px;height:6px;margin:0 24px;background:var(--ink-3);transform:rotate(45deg)}
.mq__list a{display:inline-flex;align-items:center;gap:10px;height:40px;color:var(--ink);text-decoration:none}
.mq__list time{font-weight:700}
.mq__list a:hover span{text-decoration:underline;text-underline-offset:3px}
.mq__list a:focus-visible{outline-offset:-3px}
@keyframes mq-go{to{transform:translateX(-50%)}}
.mq:hover .mq__track,.mq.is-away .mq__track{animation-play-state:paused}
/* with a headline in focus the strip stands at its start and the bar scrolls
   to the focused one (js/chrome.js puts it back when focus leaves) */
.mq:focus-within .mq__track{animation:none}
@media (prefers-reduced-motion:reduce){
  .mq{height:auto;min-height:40px}
  .mq__track{animation:none!important;width:100%;justify-content:center}
  .mq__list{flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--gut)}
  .mq__list[aria-hidden]{display:none}
  .mq__list li{flex:0 1 auto;min-width:0;white-space:normal}
  .mq__list li::after{display:none}
  .mq__list li+li{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  /* the headline in keyboard focus is the one shown */
  .mq__list li+li:focus-within{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none}
  .mq__list:focus-within li:not(:focus-within){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .mq__list a{height:auto;min-height:40px;padding:6px 0;flex-wrap:wrap;justify-content:center;column-gap:10px;row-gap:0;text-align:center}
}

/* ----------------------------------------------------------- header ---- */
.top{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--rule)}
.top__in{display:flex;align-items:center;gap:28px;min-height:var(--top-h)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.mark img{width:46px;height:auto}
.mark span{display:flex;flex-direction:column;line-height:1}
.mark b{font-size:21px;font-weight:800;letter-spacing:-.025em}
.mark i{font-style:normal;font-size:14px;font-weight:600;color:var(--ink-2);margin-top:3px;letter-spacing:-.005em}
.top__act{display:flex;align-items:center;gap:6px}
.top__act .solid{min-height:44px;padding:10px 22px}
.ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:16px;
       font-weight:700;color:var(--ink);text-underline-offset:4px}
.ghost:hover{text-decoration:underline}

.tog{display:none;position:relative;width:46px;height:46px;border:2px solid var(--ink);border-radius:var(--pill);
     background:transparent}
.tog span,.tog span::before,.tog span::after{position:absolute;left:12px;width:18px;height:2px;background:var(--ink);
     transition:transform .25s var(--ease),background-color .2s}
.tog span{top:20px}
.tog span::before{content:"";top:-6px;left:0}
.tog span::after{content:"";top:6px;left:0}
.is-open .tog span{background:transparent}
.is-open .tog span::before{transform:translateY(6px) rotate(45deg)}
.is-open .tog span::after{transform:translateY(-6px) rotate(-45deg)}

/* navigation */
.links{display:flex;align-items:center;margin-left:auto}
.links__net{display:none}
.nv{display:flex;list-style:none;margin:0;padding:0;gap:24px}
.nv__i{position:relative}
.nv__t{display:inline-flex;align-items:center;gap:7px;position:relative;text-decoration:none;font-size:16px;
       font-weight:600;color:var(--ink);padding:24px 0;text-underline-offset:6px}
.nv__t:hover{text-decoration:underline;text-decoration-thickness:2px}
.nv__t.is-here{box-shadow:inset 0 -3px 0 var(--ink)}
.nv__c{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
       transform:rotate(45deg) translateY(-2px)}
.nv__x{display:none}
.nv__d{position:absolute;top:100%;left:-24px;min-width:300px;background:var(--paper);border:1px solid var(--rule);
       padding:10px 0 12px;box-shadow:0 18px 40px rgba(23,32,27,.14);
       opacity:0;visibility:hidden;transition:opacity .16s var(--ease),visibility 0s linear .16s;z-index:60}
/* the last one opens toward the middle, or it would hang past the right edge */
.nv>.nv__i:last-child .nv__d{left:auto;right:-24px}
.nv__i--has:hover .nv__d,.nv__i--has:focus-within .nv__d{opacity:1;visibility:visible;
       transition:opacity .16s var(--ease),visibility 0s}
.nv__dl,.nv__s{list-style:none;margin:0;padding:0}
.nv__dt{display:block;padding:9px 24px;text-decoration:none;font-size:16px;font-weight:700;color:var(--ink)}
.nv__dt:hover,.nv__dt.is-here{background:var(--stone)}
.nv__s{padding:0 0 6px}
.nv__s a{display:block;padding:5px 24px 5px 38px;text-decoration:none;font-size:15px;color:var(--ink-2)}
.nv__s a:hover,.nv__s a.is-here{color:var(--ink);text-decoration:underline}

/* ------------------------------------------------------------ footer --- */
.foot{background:var(--ink);color:#c9d1cc;padding:clamp(56px,7vw,88px) 0 0;font-size:16px}
.foot__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.5fr);
          gap:clamp(32px,4.5vw,64px);padding-bottom:52px}
.mark--foot b{color:#fff}
.mark--foot i{color:#c9d1cc}
.mark--foot img{background:#fff;padding:4px}
.foot__brand p{margin:20px 0 0;font-size:15px;line-height:1.7}
.foot__brand a{color:#fff}
.foot h3{font-size:18px;font-weight:700;color:#fff;margin:0 0 12px}
.foot__sign p{font-size:15px;line-height:1.65;margin:0 0 16px}
.signup{display:flex;gap:8px;flex-wrap:wrap}
.signup input{flex:1;min-width:190px;min-height:48px;border:1.5px solid #a9b3ad;background:#222d27;
              padding:11px 14px;font-size:16px;color:#fff;outline:none}
.signup input::placeholder{color:#a9b3ad}
.signup input:focus-visible{border-color:#fff;box-shadow:0 0 0 1px #fff}
.signup button{min-height:48px;border:2px solid #fff;background:#fff;color:var(--ink);border-radius:var(--pill);
               padding:10px 22px;font-size:16px;font-weight:700;transition:background-color .2s var(--ease)}
.signup button:hover{background:#dfe5e1}
.foot :focus-visible{outline-color:#fff}
.signup__ok{margin:12px 0 0;font-size:15px;color:#fff}
.foot__nav{display:grid;grid-template-columns:repeat(3,max-content);gap:22px 48px}
.foot__nav h3{font-size:16px}
.foot__nav a{display:block;padding:6px 0;text-decoration:none;font-size:15px;color:#c9d1cc}
.foot__nav a:hover{color:#fff;text-decoration:underline}
.foot__soc{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.foot__soc a{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid #7f8a84;border-radius:var(--pill);
             color:#fff;text-decoration:none;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.foot__soc a:hover{border-color:#fff;background:#222d27}
.foot__soc svg{width:18px;height:18px}
.foot__base{display:flex;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;border-top:1px solid #34403a;
            padding-top:20px;padding-bottom:28px;font-size:14px;color:#c9d1cc}
.foot__base p{margin:0}
.foot__base p+p{display:flex;gap:20px;flex-wrap:wrap}
.foot__base a{text-decoration:none}
.foot__base a:hover{color:#fff;text-decoration:underline}

/* ---------------------------------------------- shared section parts --- */
.sec{padding:clamp(64px,8vw,112px) 0}
.sec--stone,.sec--warm{background:var(--stone)}
.sec--tight{padding:clamp(28px,4vw,52px) 0}
.sh{margin:0 0 clamp(28px,3.6vw,48px);max-width:62rem}
.sh h2{font-size:clamp(30px,3.6vw,48px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.sh p{margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.sh p+p{margin-top:12px}
.sh--stack{display:block}
.more{margin:30px 0 0}
.more--two{display:flex;flex-wrap:wrap;gap:0 32px}
.cap{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3)}
.cred{color:var(--ink-3)}

/* ======================================================== the opening ===
   "Every peso changes a life." and the one-peso coin, floating just above the
   page over a soft shadow on the ground, with the photograph of the
   families inside it.
   With motion allowed (html.mo, set in the page head) the stage sticks under
   the header and, as the page scrolls, the coin zooms in and fades, its
   relief lingering a moment as a ghost, until the photograph fills the
   stage and its caption comes up along the bottom. js/app.js sets --e (0 to
   1) and --k (the coin's scale); transform, clip-path and opacity do the
   rest.
   Reduced motion or no JavaScript: the coin stands still, at full strength,
   beside the words; the caption is kept for assistive technology. */
.op{position:relative;background:var(--paper);--e:0;--k:1}
.op__stage{max-width:var(--hold);margin:0 auto;padding:clamp(32px,4.4vw,64px) var(--gut) clamp(64px,7vw,104px);
           display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
/* "Every peso changes a life." on two lines: its longer line, "changes a
   life.", is about 5.8 of its size wide, so the size keeps that inside the
   words' column */
.op h1{font-size:clamp(50px,6.8vw,96px);font-weight:800;letter-spacing:-.045em;line-height:.94;max-width:6.4em}
.op__p{margin:clamp(18px,2vw,28px) 0 0;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--ink-2);max-width:40ch}   /* a little smaller (the user, 2026-10-07) */
.op__go{margin:clamp(20px,2.4vw,32px) 0 0}

/* the coin, standing still: the photograph under the coin, the coin's
   relief and the coin itself at full strength, and the shadow on the ground
   below it with a gap, so the coin seems to hover */
.op__fig{position:relative;margin:0 auto;width:min(100%,500px);min-width:0;aspect-ratio:1}
.op__photo,.coin__relief,.coin__metal{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1;border-radius:50%;
                                      pointer-events:none}
.op__photo{object-fit:cover;background:var(--stone-2)}
.coin__relief,.coin__metal{object-fit:contain}
.coin__relief{mix-blend-mode:overlay;opacity:.9}
.coin__ground{position:absolute;left:12%;width:76%;top:105%;height:11%;border-radius:50%;pointer-events:none;
              background:radial-gradient(closest-side,rgba(23,32,27,.30),rgba(23,32,27,.14) 55%,rgba(23,32,27,0))}
/* the photograph's caption: read by assistive technology; shown once the
   photograph fills the stage (with motion) */
.op__cap{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* the coin, with motion: the photograph covers the stage, clipped to the
   coin's edge, and opens with the zoom; the coin and its relief ride on --k
   and fade (the coin first, the relief a little later); the shadow stays on
   the ground and fades as the coin rises */
.mo .op{--op-h:calc(100svh - var(--hd,72px))}
.mo .op__track{position:relative;height:calc(var(--op-h) + 115svh)}
.mo .op__stage{position:sticky;top:var(--hd,72px);height:var(--op-h);max-width:none;margin:0;padding:0;display:block;
               overflow:clip;container-type:size}
.mo .op__words{position:absolute;z-index:2;top:46%;left:max(var(--gut),calc((100cqw - var(--hold)) / 2 + var(--gut)));
               width:min(40cqw,560px);opacity:clamp(0,calc(1 - var(--e) * 2.8),1);
               transform:translateY(calc(-50% - var(--e) * 10cqh))}
.mo .op.is-open .op__words{pointer-events:none}
/* The zoom in two parts, so the face stays round while it shows:
   --u (the first 60%) moves the coin to the middle and scales the
   photograph from --s0 to full size while the face grows to the stage's
   shorter side; --v (the rest) opens the face past the stage's corners.
   --r0: the coin's radius on screen at the start (in the photograph's own
   frame it is --r0 / --s0, within half the shorter side). */
.mo .op__fig{position:absolute;inset:0;width:auto;margin:0;aspect-ratio:auto;--s0:.68;--ox:22cqw;--oy:-5cqh;--r0:min(32cqh,23cqw);
             --m:min(50cqh,50cqw);--u:clamp(0,calc(var(--e) / .6),1);--v:clamp(0,calc((var(--e) - .6) / .4),1);
             --at:translate(calc(var(--ox) * (1 - var(--u))),calc(var(--oy) * (1 - var(--u)))) scale(var(--k))}
.mo .op__photo{width:100%;height:100%;aspect-ratio:auto;border-radius:0;
               transform:translate(calc(var(--ox) * (1 - var(--u))),calc(var(--oy) * (1 - var(--u)))) scale(calc(var(--s0) + (1 - var(--s0)) * var(--u)));
               clip-path:circle(calc(var(--r0) / var(--s0) + (var(--m) - var(--r0) / var(--s0)) * var(--u) + (50cqw + 50cqh - var(--m)) * var(--v)) at 50% 50%)}
.mo .coin__relief,.mo .coin__metal{left:50%;top:50%;width:calc(var(--r0) * 2);margin:calc(var(--r0) * -1) 0 0 calc(var(--r0) * -1);
                                   transform:var(--at)}
.mo .coin__metal{opacity:clamp(0,calc(1 - var(--e) * 2.4),1)}
.mo .coin__relief{opacity:calc(.9 * clamp(0,calc(1 - var(--e) * 1.6),1))}
.mo .coin__ground{left:calc(50cqw + var(--ox) - var(--r0) * .76);width:calc(var(--r0) * 1.52);
                  top:calc(50cqh + var(--oy) + var(--r0) * 1.1 - var(--r0) * .11);height:calc(var(--r0) * .22);
                  opacity:clamp(0,calc(1 - var(--e) * 3.5),1)}
/* the caption along the bottom of the full photograph, over a scrim dark
   enough for 4.5:1 on any part of it, coming up as the zoom ends */
.mo .op__cap{position:absolute;left:0;right:0;bottom:0;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;
             white-space:normal;z-index:2;padding:96px max(var(--gut),calc((100cqw - var(--hold)) / 2 + var(--gut))) 64px;
             background:linear-gradient(rgba(23,32,27,0),rgba(23,32,27,.74) 58%,rgba(23,32,27,.8));color:#fff;
             font-size:clamp(17px,1.5vw,20px);line-height:1.45;font-weight:600;
             opacity:clamp(0,calc((var(--e) - .72) * 5),1);transform:translateY(calc((1 - clamp(0,calc((var(--e) - .72) * 5),1)) * 14px))}
.mo .op__cap span{display:block;max-width:48ch}
.mo .op__cap span+span{margin-top:4px;font-weight:400;color:#e7ece9}
/* the opening's words wait unseen for their face (the page's head asks for
   it), then come in, so they never show in a stand-in face first */
.font-wait .op__words{opacity:0!important}
.font-in .op__words{animation:op-words-in .35s ease-out}
@keyframes op-words-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .font-in .op__words{animation:none}
}
/* the hint at the foot of the first screen, with motion (above the stage's
   foot by the dated notice, which pushes the stage down until it scrolls
   away): it fades as soon as the page moves, and gives way on screens too
   short to hold it */
.op__hint{display:none}
.mo .op__hint{position:absolute;z-index:2;left:50%;bottom:calc(clamp(14px,3cqh,30px) + var(--above,0px));display:flex;flex-direction:column;align-items:center;gap:2px;
              margin:0;transform:translateX(-50%);font-size:14px;font-weight:600;line-height:1.2;color:var(--ink-2);white-space:nowrap;
              pointer-events:none;opacity:clamp(0,calc(1 - var(--e) * 8),1)}
.mo .op__hint svg{width:18px;height:18px;animation:op-bob 1.8s var(--ease) infinite}
@keyframes op-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){
  .op__hint svg{animation:none}
}
@media (max-height:500px){
  .mo .op__hint{display:none}
}
@media (max-width:899px){
  .op__stage{grid-template-columns:minmax(0,1fr)}
  .op__fig{width:min(100%,420px)}
  /* on a phone the opening is centred: the words, then the coin under them,
     the line a little closer set so the coin can be larger */
  .op__words{text-align:center}
  .op h1,.op__p{margin-left:auto;margin-right:auto}
  .op__p{max-width:46ch;margin-top:12px;font-size:14px;line-height:1.42}     /* the longer line in fewer lines, a little smaller (the user, 2026-10-07) */
  .op__go{margin-top:14px}
  .mo .op h1{font-size:clamp(44px,12.4vw,76px)}
  .mo .op__words{top:clamp(16px,3cqh,40px);left:var(--gut);right:var(--gut);width:auto;transform:translateY(calc(var(--e) * -10cqh))}
  /* the coin under the words, sized to what is left of the first screen
     (less the dated notice above the header, the shadow and the docked bar) */
  .mo .op__fig{--ox:0px;--r0:clamp(64px,calc((100cqh - var(--op-top,300px) - var(--above,0px) - 150px) / 2),38cqw);
               --oy:calc(var(--op-top,300px) + 12px + var(--r0) - 50cqh)}
  /* clear of the docked bar and the concept switcher at the bottom left */
  .mo .op__cap{padding-bottom:136px;font-size:17px}
}

/* the coin image's credit, at the end of the page */
.pg-credit{margin:0 auto;padding-top:18px;padding-bottom:18px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.pg-credit a{color:var(--ink-2);padding-block:13px}

/* ========================================================== the story ===
   Four kinds of help, each with an amount, a 2025 figure and a photograph.
   - Reduced motion or no JavaScript: bands in order on wide screens, a
     native swipe (scroll-snap) on phones and tablets; the box follows.
   - html.mo-wheel, wide screens with motion: the stage sticks under the
     header. The photographs ride a wheel half off the right edge (.wh) that
     js/app.js turns a quarter for each kind of help as the page scrolls
     (--turn on the stage). The words of the one in front stand on the left
     with the donation box under them (beside them on short screens).
   - html.mo-ring, phones, tablets and short screens with motion: the wheel
     sits above the words with its front at the bottom and turns as the
     words are swiped. The box follows.
   Round is for what turns and for what you press; everything at rest is
   square. */
.gs{position:relative;background:var(--paper);color:var(--ink)}

/* a chapter: the photograph, its caption, then the words on its colour */
.gch{display:grid;grid-template-columns:minmax(0,1fr);background:var(--m);color:var(--on);min-width:0}
.gch__fig{margin:0;min-width:0}
.gch__fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--stone-2)}
.gch__fig figcaption{padding:10px var(--gut) 0;font-size:14px;line-height:1.45;color:var(--on)}
.gch__words{padding:18px var(--gut) clamp(28px,4vw,40px);min-width:0}
.gch__k{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px;font-weight:700}
.gch__k .key{display:none}
.gch__h{font-size:clamp(30px,4.2vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.02;max-width:16ch}
.gch__t{margin:14px 0 0;font-size:clamp(17px,1.4vw,19px);line-height:1.5;max-width:42ch}
.gch__fact{margin:22px 0 0}
.gch__num{display:block;font-size:clamp(50px,6vw,88px);font-weight:800;letter-spacing:-.02em;line-height:.92;
          font-variant-numeric:lining-nums proportional-nums}
.gch__lbl{display:block;margin-top:10px;font-size:16px;font-weight:700;line-height:1.35;max-width:30ch}
.gch__more{display:inline-block;margin-top:10px;padding-block:12px;color:var(--on);font-size:16px;font-weight:700;
           text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.gch__more:hover{text-decoration-thickness:3px}
.gs .gch :focus-visible{outline-color:var(--on)}
.gch[data-amount="500"] .gch__fig img{object-position:50% 40%}
.gch[data-amount="1500"] .gch__fig img{object-position:45% 40%}
.gch[data-amount="3000"] .gch__fig img{object-position:50% 30%}
.gch[data-amount="8000"] .gch__fig img{object-position:55% 30%}
.gs__give{background:var(--stone);color:var(--ink);padding:clamp(32px,5vw,64px) var(--gut)}
.gs__give .give{margin:0 auto;border:2px solid var(--ink)}
.wh{display:none}

/* wide screens, still: bands in order */
@media (min-width:1024px){
  .gch{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
  .gch__fig figcaption{padding-bottom:16px}
  .gch__words{padding:40px clamp(28px,4vw,64px)}
}
/* phones and tablets, and the ring: a native swipe, one at a time, the next
   peeking in. The strip clips its own overflow, so the page never scrolls
   sideways. */
@media (max-width:1023px){
  .gs__strip{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
             scrollbar-width:none;container-type:inline-size;padding-bottom:4px}
  .gs__strip::-webkit-scrollbar{display:none}
  .gs__rail{display:flex;gap:10px;padding:0 var(--gut);width:max-content}
  .gch{flex:0 0 calc(100cqw - 2 * var(--gut) - 28px);scroll-snap-align:start;align-content:start}
  .gch__h{font-size:clamp(28px,7.4vw,40px)}
  .gch__num{font-size:clamp(46px,12vw,64px)}
  .gs__give{margin-top:28px}
}
@media (min-width:640px) and (max-width:1023px){
  .gch{flex-basis:calc(100cqw - 2 * var(--gut) - 96px)}
}

/* --- with motion: the words on paper, the figure on its colour --------- */
.mo .gch{position:relative;background:none;color:var(--ink)}
.mo .gch__k .key{display:inline-block}
/* the wheel shows the photograph; this copy keeps its description */
.mo .gch__fig img{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.mo .gch__fig figcaption{padding:0;color:var(--ink-3);font-size:13.5px;max-width:52ch}
.mo .gch__fact{display:flex;align-items:flex-end;gap:10px 16px;background:var(--m);color:var(--on);padding:12px 16px 14px}
.mo .gch__num{flex:none}
.mo .gch__lbl{margin:0 0 3px;max-width:24ch;color:var(--on)}
.mo .gch__more{color:var(--ink)}
.mo .gs .gch :focus-visible{outline-color:var(--ink)}
.mo .gch__words,.mo .gch__fig figcaption{transition:opacity .34s var(--ease),transform .34s var(--ease)}

/* the wheel: a rim, the four photographs on it (each in its colour, upright
   as the wheel turns) and their names running round outside */
.wh__rim{position:absolute;left:var(--cx);top:var(--cy);width:calc(var(--R) * 2);height:calc(var(--R) * 2);
         margin:calc(var(--R) * -1) 0 0 calc(var(--R) * -1);border:2px solid var(--ink);border-radius:50%}
.wh__p{position:absolute;left:var(--cx);top:var(--cy);width:var(--dw);height:var(--dw);
       margin:calc(var(--dw) / -2) 0 0 calc(var(--dw) / -2);padding:clamp(6px,1.1cqh,12px);border-radius:50%;background:var(--m);
       --th:calc(var(--base) + var(--dir,1) * (var(--turn,0deg) - var(--k) * 90deg));
       transform:rotate(var(--th)) translateX(calc(var(--R) * -1)) rotate(calc(var(--th) * -1))}
.wh__p img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid var(--paper);background:var(--stone-2)}
.wh__p:nth-of-type(1) img{object-position:50% 45%}
.wh__p:nth-of-type(2) img{object-position:42% 40%}
.wh__p:nth-of-type(3) img{object-position:50% 30%}
.wh__p:nth-of-type(4) img{object-position:58% 35%}
.wh__type{position:absolute;left:var(--cx);top:var(--cy);overflow:visible;--Rt:calc(var(--R) + var(--dw) / 2 + 14px);
          width:calc(var(--Rt) * 2 / .96);height:calc(var(--Rt) * 2 / .96);margin:calc(var(--Rt) / -.96) 0 0 calc(var(--Rt) / -.96);
          transform:rotate(calc(var(--base) + var(--dir,1) * var(--turn,0deg)))}
.wh__type text{font:700 19px var(--sans);fill:var(--ink);letter-spacing:.01em}

/* --- the wheel: wide screens with motion ------------------------------ */
.mo-wheel .gs{--stage-h:calc(100svh - var(--hd,72px));--step:72svh}
.mo-wheel .gs__track{position:relative;height:calc(var(--stage-h) + 4 * var(--step))}
.mo-wheel .gs__stage{position:sticky;top:var(--hd,72px);height:var(--stage-h);overflow:clip;container-type:size}
.mo-wheel .wh{display:block;position:absolute;inset:0;container-type:size;pointer-events:none;
              --R:max(52cqh,30cqw);--dw:min(40cqh,25cqw,400px);--cx:102cqw;--cy:50cqh;--base:0deg;--dir:-1}
.mo-wheel .gs__side{position:relative;z-index:2;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(12px,2.6cqh,26px);
                    width:min(540px,44cqw);height:100%;margin-left:max(var(--gut),calc((100cqw - var(--hold)) / 2 + var(--gut)));
                    padding:clamp(14px,3.6cqh,40px) 0}
.mo-wheel .gs__strip{min-height:0;display:grid;align-items:center}
.mo-wheel .gs__rail{display:grid}
.mo-wheel .gch{grid-area:1 / 1;display:flex;flex-direction:column;align-items:stretch;gap:clamp(8px,1.6cqh,14px)}
.mo-wheel .gch__fig{order:2}
.mo-wheel .gch__words{display:flex;flex-direction:column;align-items:flex-start;padding:0}
.mo-wheel .gch__k{margin:0 0 clamp(4px,1cqh,10px)}
.mo-wheel .gch__h{font-size:clamp(28px,5.6cqh,46px);max-width:18ch}
.mo-wheel .gch__t{margin-top:clamp(8px,1.4cqh,14px);font-size:clamp(16px,2.5cqh,19px);max-width:44ch}
.mo-wheel .gch__fact{margin-top:clamp(12px,2.2cqh,22px)}
.mo-wheel .gch__num{font-size:clamp(40px,9cqh,80px)}
.mo-wheel .gch__more{margin-top:clamp(0px,.6cqh,6px)}
.mo-wheel .gch:not(.is-on){pointer-events:none}
.mo-wheel .gch:not(.is-on) .gch__words,.mo-wheel .gch:not(.is-on) figcaption{opacity:0;transform:translateY(18px)}
.mo-wheel .gch[data-pos="before"] .gch__words,.mo-wheel .gch[data-pos="before"] figcaption{transform:translateY(-18px)}
.mo-wheel .gs__give{background:none;padding:0}
.mo-wheel .gs__give .give{max-width:none;padding:clamp(12px,2.2cqh,20px) clamp(14px,1.6cqw,22px)}
.mo-wheel .give__top{margin-bottom:clamp(8px,1.6cqh,12px)}
.mo-wheel .amt{min-height:clamp(44px,8.4cqh,60px)}
.mo-wheel .give__row{margin-top:clamp(8px,1.6cqh,12px)}
.mo-wheel .give__fine{margin-top:clamp(8px,1.4cqh,12px);font-size:13px}
@media (max-height:819px){
  .mo-wheel .give__how{display:none}
}
/* short wide screens (a 1366 by 768 laptop, or one that shows about 1366
   by 650): the box moves beside the words, so a long chapter cannot run
   into it */
@media (min-width:1200px) and (max-height:779px){
  .mo-wheel .gs__side{width:auto;grid-template-columns:min(440px,34cqw) min(380px,28cqw);grid-template-rows:minmax(0,1fr);
                      column-gap:clamp(20px,2.2cqw,36px);align-items:center}
  .mo-wheel .wh{--cx:113cqw}
}

/* --- the ring: phones, tablets and short screens with motion ---------- */
.mo-ring .gs__stage{container-type:inline-size}
.mo-ring .wh{display:block;position:relative;overflow:hidden;container-type:size;pointer-events:none;
             --base:-90deg;--R:min(58cqw,380px);--dw:min(46cqw,300px);--cx:50cqw;--cy:calc(var(--R) * -.2);
             height:calc(var(--R) * .8 + var(--dw) / 2 + 18px)}
.mo-ring .wh__type{display:none}
.mo-ring .gs__strip{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
                    scrollbar-width:none;container-type:inline-size;padding-bottom:4px}
.mo-ring .gs__strip::-webkit-scrollbar{display:none}
.mo-ring .gs__rail{display:flex;gap:10px;padding:0 var(--gut);width:max-content}
.mo-ring .gch{display:flex;flex-direction:column;flex:0 0 min(560px,calc(100cqw - 2 * var(--gut) - 28px));scroll-snap-align:start;
              border-top:6px solid var(--m)}
.mo-ring .gch__fig{order:2;padding-top:12px}
.mo-ring .gch__words{padding:14px 0 0}
.mo-ring .gch__h{font-size:clamp(28px,7.4vw,40px)}
.mo-ring .gch__fact{margin-top:18px}
.mo-ring .gch__num{font-size:clamp(44px,11vw,64px)}
.mo-ring .gs__give{margin-top:28px}

/* the donation box: white, square, sitting by the story */
.give{background:var(--paper);color:var(--ink);padding:clamp(16px,1.6vw,22px);max-width:34rem;container-type:inline-size}
.give__h{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0 0 12px}
.freq{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:12px;border-radius:var(--pill);background:var(--stone)}
/* on the homepage the heading and the toggle share a row */
.give__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0 0 12px}
.give__top .give__h{margin:0}
.give__top .freq{flex:1 1 220px;max-width:300px;margin:0}
.freq__b{min-height:44px;border:0;border-radius:var(--pill);background:transparent;font-size:16px;font-weight:700;
         color:var(--ink-2);transition:background-color .2s var(--ease),color .2s var(--ease)}
.freq__b:hover{color:var(--ink);background:var(--stone-2)}
.freq__b[aria-pressed="true"]{background:var(--ink);color:#fff}
.amts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.amt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:60px;
     padding:8px 6px;border:1.5px solid var(--line);border-radius:var(--pill);background:var(--paper);color:var(--ink);
     line-height:1.15;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.amt b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.amt,.dock__amt{--m:var(--ink);--on:#fff}     /* an amount is not tied to one kind of help: pressed, it is ink */
.amt:hover{border-color:var(--ink)}
.amt:active{transform:translateY(1px)}
.amt[aria-pressed="true"]{background:var(--m);border-color:var(--m);color:var(--on)}
/* the amount of the photograph in front of the wheel: suggested, not chosen */
.amt:focus-visible{box-shadow:none}
.give__row{display:grid;gap:12px;margin-top:12px}
@container (min-width:460px){
  .give__row{grid-template-columns:minmax(0,1fr) auto;align-items:end}
}
@container (max-width:439px){
  .amts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.other{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px}
.other label{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.other__f{display:flex;align-items:center;min-height:48px;border:1.5px solid var(--line);background:var(--paper);padding:0 12px}
.other__f:focus-within{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.other__f span{font-size:18px;font-weight:700;color:var(--ink-2)}
.other__f input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:10px 6px;font-size:18px;
                font-weight:700;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.other__f input::-webkit-outer-spin-button,.other__f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.give__fine{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.gs__give .give :focus-visible{outline-color:var(--ink)}

/* ------------------------------------------------------- odometer -----
   A figure that rolls: one strip of digits for each digit, hidden from
   assistive technology, which reads the real number kept beside it.
   js/app.js builds it only when motion is allowed. */
.has-odo{line-height:var(--lh,1.08em)}
.odo{display:inline-flex;vertical-align:top;height:var(--lh,1.08em);line-height:var(--lh,1.08em);overflow:hidden;
     white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;-webkit-user-select:none;user-select:none}
.odo__c{display:block;height:var(--lh,1.08em);overflow:hidden}
.odo__s{display:block;white-space:pre;text-align:center;transform:translateY(calc(var(--i,1) * var(--lh,1.08em) * -1))}
.odo__g{display:block;white-space:pre}
.odo.is-roll .odo__s{transition:transform var(--d,900ms) cubic-bezier(.18,.8,.2,1) var(--w,0ms)}
.solid .odo,#go{--lh:1.2em}

/* =================================================== 2025 in figures ==== */
.ev{padding:clamp(64px,8vw,112px) 0 0}
.ev__src{margin:12px 0 0;font-size:17px;color:var(--ink-2)}
.ev__top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:28px clamp(28px,4vw,64px);
         align-items:end;margin-top:clamp(32px,4.4vw,60px);padding-bottom:clamp(40px,5vw,64px)}
.fig{margin:0;min-width:0}
.fig__v{display:block;font-size:clamp(46px,5.4vw,80px);font-weight:800;letter-spacing:-.02em;line-height:.95;
        font-variant-numeric:lining-nums proportional-nums;white-space:nowrap}
.fig--lead .fig__v{font-size:clamp(64px,9vw,132px);letter-spacing:-.025em}
.fig__u{font-size:.5em;letter-spacing:-.02em}
.fig__l{display:block;margin-top:12px;font-size:19px;font-weight:700;line-height:1.3;max-width:24ch}
.fig__n{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:34ch}
/* the two peso totals on one scale: ₱48.7 million is the full length. With
   motion the bars grow while the figures roll (--g, js/app.js). */
.bar{display:block;height:14px;margin-top:14px;background:var(--ink);transform-origin:0 50%;
     transform:scaleX(calc(var(--v) * var(--g,1)));transition:transform 1.3s cubic-bezier(.18,.8,.2,1)}
.fig--bar .fig__l{margin-top:10px}

/* the four kinds of help as the report's flat tiles, edge to edge */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto minmax(clamp(72px,9vw,130px),1fr) auto auto;
       column-gap:2px;background:var(--paper);list-style:none;margin:0;padding:0}
/* each tile shares the band's rows, so the figures line up whatever the labels' length */
.tile{display:grid;grid-row:span 4;grid-template-rows:subgrid;min-width:0;align-content:start;
      padding:clamp(22px,2.4vw,34px) clamp(20px,2.4vw,36px) clamp(26px,2.8vw,40px);background:var(--m);color:var(--on)}
.tile__k{display:block;font-size:16px;font-weight:700}
.tile .fig__v{align-self:end;font-size:clamp(44px,4.6vw,72px)}
.tile .fig__l{margin-top:12px}
.tile .fig__n{color:var(--on);max-width:28ch}

/* ===================================================== home: our work ==
   The Eight Footprints as colour cards: a grid of four by two on wide
   screens, a native swipe on phones and tablets. Beside the heading, a
   small ring of the eight colours and icons, each a link (drawn by
   js/app.js). The ring turns by itself, one turn in 52 seconds, each icon
   kept upright by turning back as fast. It stops while the pointer is on it
   or one of its links has focus, while it is off screen, and with reduced
   motion. */
.wk__head{display:flex;align-items:center;justify-content:space-between;gap:24px 48px}
.fpr{flex:none;margin:-24px 4px 16px 0}
.fpr:empty{display:none}
.fpr__ring{position:relative;width:236px;height:236px;margin:0;padding:0;list-style:none;--rr:90px;
           animation:fpr-turn 52s linear infinite}
.fpr__ring::before{content:"";position:absolute;inset:calc(50% - var(--rr));border:2px solid var(--ink);border-radius:50%}
.fpr__d{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
        transform:rotate(calc(var(--k) * 45deg)) translateY(calc(var(--rr) * -1)) rotate(calc(var(--k) * -45deg))}
.fpr__d a{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--m);
          animation:fpr-turn 52s linear infinite reverse}
.fpr__d .ico{width:28px;height:28px}
.fpr__d a:focus-visible{outline-offset:3px}
@keyframes fpr-turn{to{transform:rotate(360deg)}}
.fpr__ring:hover,.fpr__ring:hover .fpr__d a,.fpr__ring:focus-within,.fpr__ring:focus-within .fpr__d a,
.fpr.is-away .fpr__ring,.fpr.is-away .fpr__d a{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .fpr__ring,.fpr__d a{animation:none!important}
}
.fps{min-width:0}
.fps__row{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fpc{min-width:0}
.fpc a{display:flex;flex-direction:column;height:100%;background:var(--paper);color:var(--ink);text-decoration:none}
.fpc__top{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:152px;padding:18px 18px 16px;
          background:var(--m);color:var(--on)}
.fpc__top .ico{width:44px;height:44px}
.fpc__top b{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.fpc__body{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 18px 18px}
.fpc__tag{font-size:14px;font-weight:700;color:var(--ink-2)}
.fpc__txt{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.fpc__go{margin-top:auto;padding-top:8px;font-size:15px;font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;
         text-underline-offset:4px}
.fpc a:hover .fpc__go{text-decoration-thickness:3px}

/* ------------------------------------------------------------ map shell */
.mapshell{background:var(--paper);border:1px solid var(--rule)}

/* ================================================== home: latest news == */
.hn{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4.4vw,64px);align-items:start}
.hn__lead a{display:block;text-decoration:none}
.hn__lead img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--stone-2)}
.hn__lead h3{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:14px 0 10px}
.hn__lead p{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.hn__lead a:hover h3,.hn__list a:hover .hn__t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hn__lead .meta{margin-top:16px}
.hn__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.hn__list li{border-bottom:1px solid var(--rule)}
.hn__list a{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:18px;padding:18px 0 20px;text-decoration:none;align-items:start}
.hn__list img{width:112px;aspect-ratio:1;object-fit:cover;background:var(--stone-2)}
.hn__t{display:block;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin-top:6px}

/* ---------------------------------------------------- quotation band --- */
.aph{background:var(--stone);padding:clamp(56px,7vw,96px) 0}
.aph figure{margin:0;max-width:900px}
.aph blockquote{margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.25;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.aph figcaption{margin-top:18px;font-size:16px;color:var(--ink-2)}

/* =========================================================== the dock ===
   Appears once the hero has scrolled away. It floats, so it has a shadow. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--paper);border-top:1px solid var(--rule);
      box-shadow:0 -10px 30px rgba(23,32,27,.12);transform:translateY(100%);transition:transform .32s var(--ease);
      padding-bottom:env(safe-area-inset-bottom,0px)}
.dock[hidden]{display:none}
.dock.is-up{transform:none}

/* ===================================================== back to top ===
   Round, at the bottom right, once the page has moved past its first screen
   (html.past-top, js/chrome.js); above the docked bar while that is up, and
   under the header (so an open phone menu covers it). */
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:85;
       display:grid;place-items:center;width:48px;height:48px;border:2px solid var(--paper);border-radius:50%;
       background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(23,32,27,.28);
       opacity:0;visibility:hidden;transform:translateY(10px);
       transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s,bottom .32s var(--ease),background-color .2s var(--ease)}
.past-top .totop{opacity:1;visibility:visible;transform:none;
                 transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s,bottom .32s var(--ease),background-color .2s var(--ease)}
.dock-up .totop{bottom:calc(var(--dock-h,72px) + 14px)}
.totop:hover{background:var(--ink-hover)}
.totop svg{display:block}
@media (prefers-reduced-motion:reduce){
  .totop{transition:none!important}
}
@media print{
  .totop{display:none}
}
.dock__in{display:flex;align-items:center;gap:18px;min-height:72px;padding-top:10px;padding-bottom:10px}
.dock__t{display:flex;align-items:center;gap:12px;margin:0;flex:1;min-width:0}
.dock__t .key{width:16px;height:16px}
.dock__t .key.m-origin{display:none}
.dock__t span:last-child{min-width:0}
.dock__t b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.dock__t small{display:block;font-size:14px;line-height:1.35;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock__amts{display:flex;gap:6px}
.dock__amt{min-height:44px;min-width:76px;padding:8px 14px;border:1.5px solid var(--line);border-radius:var(--pill);
           background:var(--paper);font-size:15px;font-weight:800;color:var(--ink);
           transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.dock__amt:hover{border-color:var(--ink)}
.dock__amt[aria-pressed="true"]{background:var(--m);border-color:var(--m);color:var(--on)}
.dock .solid{flex:none}

/* =========================================================== donate ==== */
.dhead{padding:clamp(28px,4vw,52px) 0 clamp(56px,7vw,96px)}
.dhead__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,5vw,80px);align-items:start}
.dhead h1{font-size:clamp(44px,6vw,84px);font-weight:800;letter-spacing:-.04em;line-height:.95;margin:0 0 22px}
.dhead__p{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink-2);max-width:52ch}
.facts{list-style:none;margin:32px 0 0;padding:0;max-width:60ch;border-top:2px solid var(--ink)}
.facts li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);
          font-size:16px;line-height:1.55;color:var(--ink-2)}
.facts b{color:var(--ink);font-weight:700}
.give--page{position:sticky;top:calc(var(--top-h) + 20px);border:2px solid var(--ink);max-width:none}
.give--page .solid{margin-top:16px}
.says{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);
      min-height:84px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.says .key{margin-top:5px;width:14px;height:14px}
.says b{display:block;font-size:18px;font-weight:800;color:var(--ink);margin-bottom:2px}
.says span span{display:block}

.chan{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);border:1px solid var(--rule);background:var(--paper)}
.chan__tabs{display:flex;flex-direction:column;gap:6px;padding:14px;border-right:1px solid var(--rule);background:var(--stone)}
.chan__tab{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;text-align:left;
           border:1.5px solid transparent;border-radius:var(--pill);background:transparent;padding:10px 18px;
           transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.chan__tab:hover{background:var(--stone-2)}
.chan__tab.is-on{background:var(--ink);border-color:var(--ink)}
.chan__name{font-size:16px;font-weight:700;color:var(--ink)}
.chan__tab.is-on .chan__name{color:#fff}
.chan__badge{font-size:13px;color:var(--ink-2);white-space:nowrap}
.chan__tab.is-on .chan__badge{color:#d9e0dc}
.chan__body{padding:clamp(24px,3.2vw,44px);min-width:0}
.chan__body h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.chan__lead{font-size:17px;color:var(--ink-2);max-width:58ch;margin:0}
.chan__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,3.4vw,48px);
            margin-top:26px;padding-top:26px;border-top:1px solid var(--rule)}

.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 40px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:28px;height:28px;
                  border-radius:var(--pill);background:var(--ink);color:#fff;font-size:14px;font-weight:800}
.steps li:last-child{padding-bottom:0}
.steps b{font-weight:700;color:var(--ink)}

.qrbox{display:block;width:100%;border:1px solid var(--rule);background:#fff;padding:16px;cursor:zoom-in;
       transition:border-color .2s var(--ease)}
.qrbox:hover{border-color:var(--ink)}
.qrbox img{width:100%;max-width:240px;margin:0 auto}
.qrbox__p{margin:12px 0 0;font-size:15px;color:var(--ink-2);text-align:center;line-height:1.6}
.qrbox__p b{color:var(--ink);font-weight:700}

.bank{border-top:2px solid var(--ink)}
.bank__r{padding:14px 0;border-bottom:1px solid var(--rule)}
.bank__r span{display:block;font-size:14px;color:var(--ink-2);margin-bottom:3px}
.bank__r b{display:block;font-size:17px;font-weight:700;line-height:1.45}
.bank__no{display:flex!important;align-items:center;justify-content:space-between;gap:12px;
          font-variant-numeric:tabular-nums;font-size:19px!important;letter-spacing:.01em}
.copy{min-height:40px;border:1.5px solid var(--ink);background:var(--paper);border-radius:var(--pill);padding:6px 16px;
      font-size:14px;font-weight:700;color:var(--ink);transition:background-color .2s var(--ease)}
.copy:hover{background:var(--stone)}
.copy.is-done{background:var(--ink);color:#fff}
.bank--pts{border-top:0}
.ptsbig{font-size:32px;font-weight:800;letter-spacing:-.025em;margin:0 0 12px}
.bank--pts p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
/* the coin can: the can beside its note (the user, 2026-10-16: "add here coin can") */
.bank--coin{border-top:0;display:grid;grid-template-columns:104px minmax(0,1fr);gap:22px;align-items:center}
.coinimg{display:block;width:104px;height:auto}
.bank--coin p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}

.note{margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.65;
      color:var(--ink-2);max-width:78ch}
.note a{color:var(--ink);font-weight:700}

.lb{position:fixed;inset:0;z-index:300;background:rgba(14,20,17,.92);display:grid;place-items:center;padding:5vh 5vw;
    overscroll-behavior:contain}
.lb[hidden]{display:none}
.lb img{max-width:min(420px,90vw);max-height:88vh;background:#fff;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lb__x{position:absolute;top:16px;right:18px;width:48px;height:48px;border:2px solid #fff;border-radius:var(--pill);
       background:transparent;color:#fff;font-size:28px;line-height:1}
.lb :focus-visible{outline-color:#fff}

/* ================================================ the locator map skin == */
#phmap{
  --phm-land:#d3dad5;
  --phm-land-home:#b9c4bd;
  --phm-land-sel:#8fa598;
  --phm-pin:var(--ink);
  --phm-pin-hover:#46534c;
  --phm-pin-sel:var(--ink);
  --phm-sea:var(--paper);
}
.phm{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr)}
.phm-mapwrap{border-right:1px solid var(--rule);min-width:0}
.phm-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
             padding:12px 16px;border-bottom:1px solid var(--rule)}
.phm-chips{display:flex;gap:4px;flex-wrap:wrap}
.phm-chip{min-height:40px;border:1.5px solid transparent;background:transparent;border-radius:var(--pill);padding:6px 14px;
          font-size:14px;font-weight:700;color:var(--ink-2);transition:color .2s var(--ease),border-color .2s var(--ease)}
.phm-chip:hover{color:var(--ink);border-color:var(--rule)}
.phm-chip.is-on{border-color:var(--ink);color:var(--ink)}
.phm-zoom{display:flex;gap:6px}
.phm-zbtn{width:40px;height:40px;border:1.5px solid var(--line);background:var(--paper);border-radius:var(--pill);
          font-size:16px;font-weight:700;color:var(--ink);line-height:1;transition:border-color .2s var(--ease)}
.phm-zbtn--wide{width:auto;padding:0 14px;font-size:14px}
.phm-zbtn:hover{border-color:var(--ink)}
.phm-stage{position:relative;background:var(--phm-sea);touch-action:none}
.phm-svg{display:block;width:100%;height:clamp(420px,62vh,620px);cursor:grab}
.phm-svg.is-dragging{cursor:grabbing}
.phm-viewport,.phm-scaler{transition:transform .6s var(--ease)}
.is-nofx .phm-viewport,.is-nofx .phm-scaler{transition:none}
.phm-prov{fill:var(--phm-land);stroke:var(--phm-sea);stroke-width:.55;vector-effect:non-scaling-stroke;transition:fill .3s var(--ease)}
.phm-prov.is-home{fill:var(--phm-land-home)}
.phm-prov.is-sel{fill:var(--phm-land-sel)}
.phm-leader{stroke:var(--phm-pin);stroke-width:1.3;vector-effect:non-scaling-stroke;opacity:.4}
.phm-leader.is-sel{opacity:.9}
.phm-leader.is-off{opacity:0}
.phm-pin{cursor:pointer;outline:none}
.phm-hit{fill:transparent}
.phm-art{transform-origin:0 0}
.phm-body{fill:var(--phm-pin);transition:fill .2s var(--ease)}
.phm-eye{fill:#fff}
.phm-halo{fill:none;stroke:var(--ink);stroke-width:2.4;vector-effect:non-scaling-stroke;opacity:0}
.phm-pin:focus-visible .phm-halo{opacity:1}
.phm-ring{display:none}
.phm-pin:hover .phm-body,.phm-pin.is-hot .phm-body{fill:var(--phm-pin-hover)}
.phm-pin.is-sel .phm-body{fill:var(--phm-pin-sel);stroke:#fff;stroke-width:1.8;paint-order:stroke}
.phm-pin.is-sel .phm-art{transform:scale(1.3)}
.phm-pin.is-off{opacity:.18;pointer-events:none}
.phm-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;background:var(--ink);color:#fff;
         padding:8px 12px;font-size:13px;font-weight:700;line-height:1.35;white-space:nowrap;
         opacity:0;transform:translate(-50%,-125%);transition:opacity .15s var(--ease);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.phm-tip small{display:block;font-weight:400;font-size:12px;color:#d9e0dc}
.phm-tip.is-on{opacity:1}
.phm-hint{position:absolute;left:14px;bottom:12px;font-size:13px;color:var(--ink-2);background:var(--paper);
          border:1px solid var(--rule);padding:4px 10px;pointer-events:none}
.phm-hint.is-gone{display:none}
.phm-side{display:flex;flex-direction:column;min-width:0;background:var(--paper)}
.phm-detail{padding:28px 30px;border-bottom:1px solid var(--rule);min-height:230px}
.phm-empty{color:var(--ink-2);max-width:40ch}
.phm-empty svg{color:var(--rule);margin-bottom:12px}
.phm-empty strong{display:block;color:var(--ink);font-size:21px;font-weight:800;letter-spacing:-.015em;margin-bottom:6px}
.phm-empty span{font-size:16px;line-height:1.6}
.phm-tags{display:flex;gap:6px;margin-bottom:12px}
.phm-tag{font-size:13px;font-weight:700;padding:3px 10px;border:1.5px solid var(--rule);border-radius:var(--pill);color:var(--ink-2)}
.phm-tag--hq{border-color:var(--ink);color:var(--ink)}
.phm-dname{font-size:26px;font-weight:800;letter-spacing:-.025em;margin:0 0 4px}
.phm-dsub{margin:0 0 20px;font-size:15px;color:var(--ink-2)}
.phm-rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.phm-rows li{display:flex;gap:12px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.phm-ic{flex:0 0 18px;width:18px;height:18px;margin-top:3px;color:var(--ink)}
.phm-rows a{color:var(--ink);font-weight:600}
.phm-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.phm-btn{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border:2px solid transparent;
         border-radius:var(--pill);padding:10px 20px;font-size:15px;font-weight:700;
         transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.phm-btn--primary{background:var(--ink);border-color:var(--ink);color:#fff}
.phm-btn--primary:hover{background:var(--ink-hover);border-color:var(--ink-hover)}
.phm-btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.phm-btn--ghost:hover{background:var(--stone)}
.phm-listwrap{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--stone)}
.phm-listhead{display:flex;justify-content:space-between;padding:16px 30px 8px;font-size:15px;color:var(--ink);font-weight:700}
.phm-count{color:var(--ink-2);font-weight:400}
.phm-list{list-style:none;margin:0;padding:0 18px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
          gap:2px;overflow-y:auto}
.phm-item{display:flex;align-items:center;gap:11px;min-height:48px;padding:8px 12px;cursor:pointer;transition:background-color .2s var(--ease)}
.phm-item:hover{background:var(--stone-2)}
.phm-item.is-sel{background:var(--paper);box-shadow:inset 3px 0 0 var(--ink)}
.phm-item.is-off{display:none}
.phm-dot{flex:0 0 8px;width:8px;height:8px;background:var(--ink)}
.phm-itxt{min-width:0}
.phm-iname{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phm-icity{display:block;font-size:14px;color:var(--ink-2)}
.phm-hq{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--pill);padding:1px 8px}

/* ======================================================= responsive ==== */
@media (max-width:1200px){ .nv{gap:18px} .nv__t{font-size:15.5px} }
@media (max-width:1120px){ .nv{gap:14px} .top__in{gap:20px} }
@media (max-width:1120px){
  .phm{grid-template-columns:minmax(0,1fr)}
  .phm-mapwrap{border-right:0;border-bottom:1px solid var(--rule)}
  .phm-svg{height:min(60vh,540px)}
}
@media (max-width:1023px){
  .tog{display:block}
  .ghost{display:none}
  .top__act{margin-left:auto}
  .links{position:fixed;left:0;right:0;top:var(--menu-top,118px);bottom:0;flex-direction:column;align-items:stretch;
         background:var(--paper);border-top:1px solid var(--rule);padding:4px var(--gut) 40px;overflow-y:auto;
         overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity .15s var(--ease),visibility 0s linear .15s;
         z-index:55;margin-left:0}
  .is-open .links{visibility:visible;opacity:1;transition:opacity .15s var(--ease),visibility 0s}
  .nv{flex-direction:column;gap:0;width:100%}
  .nv__i{border-bottom:1px solid var(--rule)}
  .nv__t{padding:15px 0;font-size:20px;font-weight:700;width:100%}
  .nv__t.is-here{box-shadow:inset 4px 0 0 var(--ink);padding-left:14px}
  .nv__c{display:none}
  .nv__x{display:block;position:absolute;top:4px;right:-8px;width:48px;height:48px;border:0;background:none}
  .nv__x::before,.nv__x::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink)}
  .nv__x::before{width:14px;height:2px;transform:translate(-50%,-50%)}
  .nv__x::after{width:2px;height:14px;transform:translate(-50%,-50%)}
  .nv__i.is-open .nv__x::after{display:none}
  .nv__d{position:static;opacity:1;visibility:visible;border:0;box-shadow:none;min-width:0;display:none;padding:0 0 12px;background:none}
  .nv__i.is-open .nv__d{display:block}
  .nv__dt{padding:10px 0 10px 14px;font-size:17px}
  .nv__s a{padding:8px 0 8px 30px;font-size:16px}
  .links__net{display:flex;flex-direction:column;margin-top:16px}
  .links__net a{font-size:16px;color:var(--ink-2);padding:10px 0;text-decoration:none}
}

@media (max-width:1023px){
  .ev__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fig--lead{grid-column:1 / -1}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto minmax(72px,1fr) auto auto);row-gap:2px}
  .dhead__in{grid-template-columns:minmax(0,1fr)}
  .give--page{position:static;max-width:560px}
  .chan{grid-template-columns:minmax(0,1fr)}
  .chan__tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--rule)}
  .chan__tab{flex:none}
  .chan__badge{display:none}
  .chan__grid{grid-template-columns:minmax(0,1fr)}
  .chan__aside{order:-1}
  .foot__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot__nav{grid-column:1 / -1}
  .hn{grid-template-columns:minmax(0,1fr)}
  .fps{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
       margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;scroll-padding-inline:var(--gut)}
  .fps::-webkit-scrollbar{display:none}
  .fps__row{display:flex;width:max-content}
  .fpc{flex:0 0 min(76vw,288px);scroll-snap-align:start}
}
@media (max-width:860px){
  .dock__amts{display:none}
}
@media (max-width:720px){
}
@media (max-width:620px){
  :root{--gut:18px;--top-h:64px}
  body{font-size:16.5px}
  .top__in{gap:12px}
  .mark img{width:40px}
  .mark b{font-size:19px}
  .mark i{font-size:13px}
  .top__act .solid{padding:10px 18px}
  .alert{font-size:14px}
  .amts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .amt{min-height:58px}
  .other{grid-template-columns:minmax(0,1fr)}
  .ev__top{grid-template-columns:minmax(0,1fr)}
  .fig--lead .fig__v{font-size:clamp(58px,17vw,80px)}
  .foot__in{grid-template-columns:minmax(0,1fr)}
  .foot__nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .phm-detail{padding:22px}
  .phm-listhead{padding:14px 22px 8px}
  .dock__in{gap:12px;min-height:64px}
  .dock__t small{display:none}
  .dock .solid{padding:10px 18px}
  .facts li{grid-template-columns:minmax(0,1fr);gap:2px}
  .hn__list a{grid-template-columns:minmax(0,1fr) 88px}
  .hn__list img{width:88px}
}
@media (max-width:339px){
  .tiles{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .tile{grid-row:auto;grid-template-rows:none}
  .tile .fig__v{padding-top:28px}
}

/* ============================================================ phones ===
   The phone and tablet pass. Nothing in this block reaches screens wider
   than 1023px, except the header's reserved place, which changes nothing
   once the header is drawn. */

/* the header (drawn by site.js) keeps its place, so nothing shifts as it
   arrives: the headline bar and the bar under it */
.js [data-chrome="header"]{display:block;min-height:116px}

@media (max-width:1023px){
  .js [data-chrome="header"]{min-height:114px}
  /* the donation page: the box straight under the opening line, the notes
     on fees and receipts after it */
  .dhead__in{gap:0}
  .dhead__in>div:first-child{display:contents}
  .dhead__in .give--page{order:1;margin:28px 0 8px}
  .dhead__in .facts{order:2}
  /* a vertical swipe over the map scrolls the page; sideways drags pan it */
  .phm-stage{touch-action:pan-y}
}

/* the opening on phones: a shorter run, the coin as large as the first
   screen allows (up to four fifths of the width), the context line clear of
   the concept switcher; the docked bar stays down while the coin is on
   screen, since the header's Donate and "Choose an amount" are there */
@media (max-width:899px){
  .mo .op__track{height:calc(var(--op-h) + 92svh)}
  .mo .op__fig{--r0:clamp(64px,calc((100cqh - var(--op-top,300px) - var(--above,0px) - 60px) / 2.32),40cqw)}
  .mo .op__cap{padding-bottom:76px}
}

/* the ring's colour index: the four kinds of help under the ring, the one in
   front filled, each a button that swipes to its card */
.gs__ix{display:none}
.mo-ring .gs__ix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:2px var(--gut) 12px}
.gs__ix button{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-height:44px;padding:8px 0 6px;border:0;
               background:none;font-size:13.5px;font-weight:700;line-height:1.2;color:var(--ink-2);text-align:left}
.gs__ix i{display:block;height:6px;background:var(--stone-2);transition:background-color .25s var(--ease)}
.gs__ix button[aria-current="true"]{color:var(--ink)}
.gs__ix button[aria-current="true"] i{background:var(--m)}
.gs__ix button:focus-visible{outline-offset:2px}
.mo-ring .gch{flex-basis:min(560px,calc(100cqw - 2 * var(--gut) - 40px))}

@media (max-width:719px){
  /* the footprint ring under the heading, its icons large enough to know
     and to press */
  .wk__head{display:block}
  .fpr{margin:-6px auto 30px;width:max-content}
  .fpr__ring{width:256px;height:256px;--rr:98px}
  .fpr__d{width:50px;height:50px;margin:-25px 0 0 -25px}
}
.fpr.is-held .fpr__ring,.fpr.is-held .fpr__d a{animation-play-state:paused}

@media (max-width:620px){
  .js [data-chrome="header"]{min-height:110px}
  /* headline links reach 44 pixels */
  .mq{height:44px}
  .mq__list a{height:44px}
  @media (prefers-reduced-motion:reduce){
    .mq{height:auto;min-height:44px}
    .mq__list a{height:auto;min-height:44px}
  }
  .fpc__txt{font-size:16px}
  /* the mission tiles stay two by two, lighter */
  .tile{padding:18px 16px 20px}
  .tile__k{font-size:14px}
  .tile .fig__v{font-size:clamp(30px,9.4vw,42px)}
  .tile .fig__l{margin-top:8px;font-size:16px}
  .tile .fig__n{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------- touch targets ------
   Links that stand on their own get a 44px tall hit area. Vertical padding
   on an inline link grows what can be pressed without moving the text. */
.tl,.crumb a,.rel>li>a,.rel p a,.small a,.note a,.off__l a,.gz__c li a,.ctry__more a,.phm-rows a,
.foot__brand a,.sg-consent a,.watch,.prose a,.rglinks a,.foot__base a,.sh p a{padding-block:12px}

.mark{min-height:48px}
.foot__nav a{padding:11px 0}
.phm-chip{min-height:44px}
/* the zoom buttons finger-sized; Reset as wide as its word */
.phm-zbtn{min-width:44px;height:44px}
.phm-zbtn:not(.phm-zbtn--wide){width:44px}
.phm-zbtn--wide{padding:0 16px}

/* ------------------------------------------------ map on phones ------
   The four filters in one row, a finger-friendly map, and the office list
   starting at five (PHMap shortList adds the button). */
@media (max-width:640px){
  .phm-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .phm-chip{padding:6px 4px}
  .phm-chip__more{display:none}
  .phm-zoom{margin-left:auto}
}
@media (pointer:coarse){ .phm-stage{touch-action:pan-y} }
.phm-more{display:none}
.phm-listwrap.is-clipped .phm-item:nth-child(n+6){display:none}
.phm-listwrap.has-more .phm-more{display:block;min-height:44px;margin:0 30px 18px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:16px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.phm-listwrap.has-more .phm-more[hidden]{display:none}
@media (max-width:620px){ .phm-listwrap.has-more .phm-more{margin:0 22px 16px} }