/* ==== pages/get-involved.css ==== */
/* =====================================================================
   Get Involved (body[data-page="get-involved"]). Choreography: assets/js/pages/get-involved.js
   Every scene has a calm static layout first (reduced motion / no JS); html.motion turns it into a
   pinned or scroll-linked scene. Classes are prefixed "gi-" because all page stylesheets ship in one
   bundle. Copy over photographs uses .on-media, so it reads the same in both themes; everything
   else follows the theme tokens.
   ===================================================================== */

/* ---------- 1 · Three ways in ---------- */
.gi-open{position:relative;padding:calc(var(--nav-h) + clamp(56px,10vh,120px)) 0 clamp(72px,10vh,128px)}
.gi-open-copy{max-width:1000px;margin-inline:auto;padding-inline:var(--gutter);text-align:center}
.gi-open-copy .eyebrow{margin-bottom:16px}
.gi-open-copy .lead{max-width:34em;margin:clamp(18px,2vw,26px) auto 0}
.gi-ways{margin-top:clamp(48px,7vw,80px)}
.gi-ways-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.gi-way{position:relative;aspect-ratio:3/4.3;border-radius:var(--r-xl);overflow:hidden;background:var(--media-bg);isolation:isolate;clip-path:inset(0 round var(--r-xl))}
.gi-way-a{position:absolute;inset:0;display:block;border-radius:inherit;color:#f5f5f7}
/* the ring sits above the photograph (a plain outline would paint beneath the positioned media) */
.gi-way-a:focus-visible{outline:none}
.gi-way-a:focus-visible::before{content:"";position:absolute;inset:5px;z-index:3;border-radius:calc(var(--r-xl) - 5px);box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,0,0,.35);pointer-events:none}
.gi-way-media{position:absolute;inset:0;overflow:hidden}
.gi-way-media :is(img,video){position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:var(--img-filter);transition:transform 1.6s var(--ease)}
.gi-way-media video{background:var(--film-bg)}
.gi-way-a:hover .gi-way-media :is(img,video){transform:scale(1.045)}
.gi-way-a::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.3) 38%,rgba(0,0,0,0) 60%),linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,0) 22%)}
.gi-way-n{position:absolute;left:clamp(20px,2.2vw,30px);top:clamp(18px,2vw,26px);z-index:1;font-size:15px;font-weight:500;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.gi-way-text{position:absolute;left:0;right:56px;bottom:0;z-index:1;display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,30px)}
.gi-way-t{font:600 clamp(32px,3.3vw,50px)/1 var(--f-display);letter-spacing:-.036em}
.gi-way-s{max-width:20em;font-size:clamp(15px,1.15vw,17px);line-height:1.38;color:rgba(255,255,255,.86);text-wrap:balance}
.gi-way-go{position:absolute;right:clamp(16px,1.8vw,24px);bottom:clamp(20px,2.2vw,30px);z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);transition:background-color .3s,transform .7s var(--ease)}
.gi-way-go svg{width:8px;height:13px;transform:rotate(90deg)}
.gi-way-a:hover .gi-way-go{background:rgba(255,255,255,.3);transform:translate3d(0,3px,0)}
.gi-way .gi-way-vctl{top:clamp(14px,1.6vw,20px);right:clamp(14px,1.6vw,20px);bottom:auto}
@media (max-width:767px){
  /* phones: a swipeable row */
  .gi-ways-track{display:flex;width:auto;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .gi-ways-track::-webkit-scrollbar{display:none}
  .gi-way{flex:none;width:min(74vw,320px);aspect-ratio:3/4.2;scroll-snap-align:start}
}
/* slow drift inside the still panels */
.motion .gi-way:not(:has(video)) .gi-way-media{animation:gi-drift 22s var(--ease-io) infinite alternate;will-change:transform}
.motion .gi-way:nth-child(2) .gi-way-media{animation-duration:26s;animation-delay:-6s}
@keyframes gi-drift{from{transform:scale(1.02) translate3d(-1%,0,0)}to{transform:scale(1.09) translate3d(1.2%,-1%,0)}}
/* pinned fan: landscape screens only (same query as Q_FAN in the script) */
@media (min-width:768px) and (min-aspect-ratio:1/1) and (min-height:600px){
  .motion .gi-open{height:260vh;padding:0}
  .motion .gi-open-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
  .motion .gi-open-copy{position:absolute;left:0;right:0;top:calc(var(--nav-h) + clamp(40px,9vh,104px));z-index:1;transform-origin:50% 0;will-change:transform,opacity}
  .motion .gi-ways{position:absolute;inset:var(--nav-h) 0 0;z-index:2;display:flex;align-items:center;margin:0;opacity:0;transition:opacity 1.4s var(--ease) .3s}
  .motion .gi-open.is-ready .gi-ways{opacity:1}
  .motion .gi-ways-track{flex:none;height:min(78svh,760px,(min(var(--maxw),100vw - 2*var(--gutter)) - 32px) * .633)} /* never narrower than ~1:1.9 */
  .motion .gi-way{aspect-ratio:auto;height:100%;transform-origin:50% 0;will-change:transform}
  .motion .gi-way:nth-child(1){z-index:2}
  .motion .gi-way:nth-child(2){z-index:3}
  .motion .gi-way:nth-child(3){z-index:1}
  .motion :is(.gi-way-n,.gi-way-text,.gi-way-go){opacity:0;will-change:transform,opacity}
}

/* ---------- 2 · Volunteer: two roles, one stage ---------- */
.gi-vol .shead{margin-bottom:clamp(44px,6vw,80px)}
.gi-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.gi-role{position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:var(--media-bg);isolation:isolate}
.gi-role-media{position:absolute;inset:0;overflow:hidden}
.gi-role-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:var(--img-filter)}
.gi-role-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.44) 36%,rgba(0,0,0,0) 62%)}
.gi-role-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.gi-role-body{position:absolute;left:0;bottom:0;z-index:1;width:100%;padding:clamp(24px,3.4vw,44px)}
.gi-role-k{margin-bottom:12px;font-size:15px;font-weight:500;color:var(--text-meta);font-variant-numeric:tabular-nums}
.gi-role-t{font:600 clamp(34px,3.6vw,52px)/1.02 var(--f-display);letter-spacing:-.034em;text-wrap:balance}
.gi-role-p{max-width:30em;margin-top:16px;font-size:clamp(17px,1.35vw,19px);line-height:1.45;color:var(--text-2)}
.gi-vol-go{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)}
@media (max-width:767px){
  .gi-split{grid-template-columns:1fr;gap:14px}
  .gi-role{aspect-ratio:4/5.3}
}
@media (min-width:768px) and (min-height:540px){
  .motion .gi-split-track{height:300vh}
  .motion .gi-split-stage{position:sticky;top:0;height:100vh;height:100svh;padding:calc(var(--nav-h) + clamp(16px,3vh,28px)) 0 clamp(16px,3vh,28px)}
  .motion .gi-split{display:block;position:relative;height:100%;border-radius:var(--r-xl);overflow:hidden;container-type:inline-size;isolation:isolate}
  .motion .gi-role{position:absolute;inset:0;aspect-ratio:auto;border-radius:var(--r-xl);will-change:transform}
  .motion .gi-role--a{transform:translate3d(calc(-50cqw - 8px),0,0)}
  .motion .gi-role--b{transform:translate3d(calc(50cqw + 8px),0,0)}
  .motion .gi-role-media{right:auto;width:62cqw;will-change:transform}
  .motion .gi-role-body{width:calc(50cqw - 8px)}
  .motion .gi-role-t{max-width:calc(40cqw - 8px - 2*clamp(24px,3.4vw,44px));font-size:clamp(30px,4.2cqw,52px)}
}

/* ---------- 3 · Donate: the analyst's desk, then three principles ---------- */
.gi-donate{position:relative;background:var(--bg)}
.gi-d-stage{display:grid;grid-template-columns:minmax(0,1fr)}
.gi-d-media{grid-area:1/1;position:relative;overflow:hidden;background:var(--film-bg)}
.gi-d-cam{position:absolute;inset:0;overflow:hidden}
.gi-d-cam img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.gi-d-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.46) 52%,rgba(0,0,0,.24) 100%),linear-gradient(0deg,rgba(0,0,0,.42),rgba(0,0,0,0) 42%)}
.gi-d-intro{grid-area:1/1;position:relative;z-index:1;width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto;padding:clamp(120px,20vh,200px) 0}
.gi-d-b1 .eyebrow{margin-bottom:14px}
.gi-d-h{max-width:10em;font:600 clamp(48px,7.4vw,112px)/.96 var(--f-display);letter-spacing:-.042em;color:#fff}
.gi-d-b2{margin-top:clamp(40px,7vh,72px)}
.gi-d-st{max-width:15em;font:600 clamp(30px,3.8vw,56px)/1.06 var(--f-display);letter-spacing:-.03em;color:#fff;text-wrap:balance}
.gi-d-sub{max-width:30em;margin-top:clamp(18px,2.6vh,28px);font-size:clamp(18px,1.5vw,22px);line-height:1.42;font-weight:450;letter-spacing:-.014em;color:var(--text-2)}
.gi-d-layout{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto;padding:var(--sec) 0 calc(var(--sec) * .4)}
.gi-d-frame,.gi-d-ticks{display:none}
.gi-d-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.gi-d-step{padding-top:24px;border-top:1px solid var(--line)}
.gi-d-n{display:block;margin-bottom:16px;font-size:15px;font-weight:500;color:var(--text-meta);font-variant-numeric:tabular-nums}
.gi-d-t{font:600 clamp(28px,2.6vw,40px)/1.05 var(--f-display);letter-spacing:-.03em}
.gi-d-lead{margin-top:16px;font-size:clamp(18px,1.4vw,20px);line-height:1.42;font-weight:500;letter-spacing:-.014em;color:var(--text)}
.gi-d-more{margin-top:12px;font-size:16px;line-height:1.55;color:var(--text-2)}
.gi-d-ticks i{--p:0;position:relative;flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.gi-d-ticks i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p));transform-origin:0 50%}
@media (max-width:860px){ .gi-d-steps{grid-template-columns:1fr;gap:40px} }

/* pinned on screens tall enough to hold it (same query as Q_DONATE in the script) */
@media (min-height:560px){
  .motion .gi-d-track{height:540vh}
  .motion .gi-d-stage{position:sticky;top:0;display:block;height:100vh;height:100svh;overflow:hidden}
  .motion .gi-d-media{position:absolute;inset:0;z-index:1;background:none;will-change:clip-path}
  .motion .gi-d-cam{background:var(--film-bg)}
  .motion .gi-d-cam img{inset:auto;left:0;top:0;width:auto;height:auto;object-fit:fill;transform-origin:0 0;will-change:transform}
  .motion .gi-d-intro{position:absolute;inset:0;z-index:2;display:grid;align-items:center;width:auto;margin:0;
    padding:calc(var(--nav-h) + 24px) max(var(--gutter),calc((100% - var(--maxw))/2)) 48px}
  .motion .gi-d-beat{grid-area:1/1;margin:0;will-change:transform,opacity}
  .motion .gi-d-b2{opacity:0}
  .motion .gi-d-st{max-width:14em;font-size:clamp(36px,5.2vw,80px);line-height:1.03;letter-spacing:-.034em}
  .motion .gi-d-sub{max-width:31em;margin-top:clamp(20px,3.4vh,36px)}
  .motion .gi-d-layout{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,6vw,96px);align-items:center;
    width:auto;margin:0;padding:calc(var(--nav-h) + clamp(20px,4vh,48px)) max(var(--gutter),calc((100% - var(--maxw))/2)) clamp(20px,4vh,48px);pointer-events:none}
  .motion .gi-d-frame{display:block;height:min(70svh,680px)}
  .motion .gi-d-text{opacity:0;will-change:opacity}
  .motion .gi-d-ticks{display:flex;gap:8px;margin-bottom:clamp(28px,5vh,48px)}
  .motion .gi-d-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .motion .gi-d-step{grid-area:1/1;padding:0;border:0;opacity:0;transform:translate3d(0,28px,0);transition:opacity .5s var(--ease),transform 1s var(--ease)}
  .motion .gi-d-step.is-past{transform:translate3d(0,-20px,0)}
  .motion .gi-d-step.is-current{opacity:1;transform:none;transition-delay:.15s}
  .motion .gi-d-t{font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.036em}
  .motion .gi-d-lead{max-width:24em;margin-top:clamp(18px,3vh,28px);font-size:clamp(19px,1.6vw,24px);line-height:1.36}
  .motion .gi-d-more{max-width:32em;margin-top:clamp(12px,2vh,18px);font-size:clamp(16px,1.2vw,18px)}
}
/* frame above the text: phones and portrait tablets */
@media (min-height:560px) and (max-width:767px),(min-height:560px) and (max-aspect-ratio:4/5){
  .motion .gi-d-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;row-gap:clamp(18px,3vh,28px);padding-top:calc(var(--nav-h) + 14px)}
  .motion .gi-d-frame{order:-1;height:36svh}
  .motion .gi-d-ticks{margin-bottom:22px}
  .motion .gi-d-n{margin-bottom:10px}
  .motion .gi-d-t{font-size:clamp(32px,6vw,48px)}
  .motion .gi-d-lead{max-width:30em;margin-top:14px;font-size:clamp(18px,2.4vw,21px);line-height:1.38}
  .motion .gi-d-more{font-size:15px;line-height:1.5}
}

/* ---------- 4 · Funding: segmented control · how funding works · projects ---------- */
/* Static (reduced motion / no JS): no control, both panels one after the other. html.motion: the control
   shows and only the active panel is displayed (the script keeps aria-selected / hidden in sync). */
.gi-fund-head{text-align:center}
.gi-fund-h{max-width:12em;margin-inline:auto}
.gi-seg-wrap{display:none;justify-content:center;margin-top:clamp(28px,3.6vw,44px)}
.motion .gi-seg-wrap{display:flex}
[data-theme="dark"] .gi-fund{--gi-seg-bg:#1c1c1e;--gi-seg-thumb:#3a3a3c;--gi-seg-shadow:0 1px 2px rgba(0,0,0,.4)}
[data-theme="light"] .gi-fund{--gi-seg-bg:#e8e8ed;--gi-seg-thumb:#fff;--gi-seg-shadow:0 2px 8px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04)}
.gi-seg{--seg:0;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,440px);padding:4px;border-radius:var(--r-pill);background:var(--gi-seg-bg)}
.gi-seg-thumb{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:var(--r-pill);background:var(--gi-seg-thumb);box-shadow:var(--gi-seg-shadow);
  transform:translate3d(calc(var(--seg) * 100%),0,0);transition:transform .6s var(--ease)}
.gi-seg-b{position:relative;z-index:1;min-height:40px;padding:0 18px;border-radius:var(--r-pill);font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  color:var(--text);transition:color .35s var(--ease)}
.gi-seg-b:hover,.gi-seg-b[aria-selected="true"]{color:var(--text)}
.gi-seg-b:focus-visible{outline-offset:2px;border-radius:var(--r-pill)}
.gi-panel{margin-top:clamp(56px,8vw,104px)}
.gi-panel+.gi-panel{margin-top:var(--sec)}
.motion .gi-panel{margin-top:clamp(48px,6.4vw,88px)}
.motion .gi-panel:not(.is-active){display:none}
.motion .gi-panel.is-active{animation:gi-panel-in .9s var(--ease) both}
@keyframes gi-panel-in{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.gi-panel:focus-visible{outline-offset:12px;border-radius:var(--r-lg)}

/* How funding works: one donor-acceptance policy, who is accountable, a quiet link to the funder brief */
.gi-panel>.eyebrow,.gi-pj-head .eyebrow{margin-bottom:18px}
.gi-statement{max-width:16.5em;font:600 clamp(34px,4.8vw,72px)/1.05 var(--f-display);letter-spacing:-.034em;text-wrap:balance}
.gi-tag{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 11px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);
  font:500 13px/1 var(--f-text);letter-spacing:-.005em;color:var(--text-2);white-space:nowrap}
.gi-tag.is-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.gi-policy{margin-top:clamp(64px,9vw,128px)}
.gi-policy-h{max-width:14em;font:600 clamp(28px,3.2vw,44px)/1.08 var(--f-display);letter-spacing:-.032em;text-wrap:balance}
.gi-policy-head .gi-term-intro{margin-top:16px}
.gi-terms-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,7vw,112px);margin-top:clamp(40px,5vw,64px)}
.gi-term-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:600 clamp(22px,2vw,28px)/1.2 var(--f-display);letter-spacing:-.024em}
.gi-term-intro{max-width:34em;margin-top:14px;font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--text-2)}
.gi-lines{margin-top:clamp(22px,3vw,34px);border-bottom:1px solid var(--line-soft)}
.gi-lines li{position:relative;padding:20px 0 20px 34px;font-size:clamp(18px,1.5vw,21px);line-height:1.4;letter-spacing:-.016em;color:var(--text)}
.gi-lines li::before,.gi-thr li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
.gi-lines li::after{content:"";position:absolute;left:1px;top:calc(20px + .7em);width:14px;height:1.5px;border-radius:1px;background:var(--accent)}
.motion :is(.gi-lines,.gi-thr) li::before{transform:scaleX(0);transition:transform 1.6s var(--ease) var(--rd,0s)}
.motion :is(.gi-lines,.gi-thr) li.is-in::before{transform:none}
/* proposed thresholds: gift size | what we ask */
.gi-thr{margin-top:clamp(22px,3vw,34px);border-bottom:1px solid var(--line-soft)}
.gi-thr li{position:relative;display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr);gap:6px clamp(16px,2vw,28px);align-items:baseline;padding:20px 0}
.gi-thr-a{font:600 clamp(19px,1.6vw,22px)/1.25 var(--f-display);letter-spacing:-.022em;color:var(--text)}
.gi-thr-b{font-size:16px;line-height:1.5;color:var(--text-2)}
.gi-fine{max-width:36em;margin-top:22px;font-size:15px;line-height:1.55;color:var(--text-2)}
.gi-fine strong{font-weight:600;color:var(--text)}
@media (max-width:860px){ .gi-terms-cols{grid-template-columns:1fr} }
@media (max-width:480px){ .gi-thr li{grid-template-columns:minmax(0,1fr)} }
/* who is accountable */
.gi-who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px clamp(32px,5vw,72px);margin-top:clamp(56px,7vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.gi-who .gi-term-h{align-self:start}
.gi-who-body{display:grid;gap:18px}
.gi-who-body p{max-width:34em;font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--text-2)}
.gi-who-body a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gi-who-dl div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--line-soft);font-size:16px;line-height:1.45}
.gi-who-dl div:first-child{border-top:0;padding-top:0}
.gi-who-dl dt{color:var(--text-meta)}
.gi-who-dl dd{margin:0;color:var(--text)}
@media (max-width:767px){ .gi-who{grid-template-columns:minmax(0,1fr)} }
.gi-fundlink{margin-top:clamp(20px,3vw,32px)}

/* Projects: notice, then a calm two-column grid of cards (one column on phones) */
.gi-pj-head{margin-bottom:clamp(32px,4vw,48px)}
.motion .gi-pj-head{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* the tab names the panel */
.gi-notice{display:flex;align-items:flex-start;gap:14px;width:fit-content;max-width:100%;margin-inline:auto;padding:18px 26px 18px 20px;border-radius:var(--r-lg);
  background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
.gi-notice-i{flex:none;width:22px;height:22px;margin-top:1px;color:var(--text-2)}
.gi-notice-i svg{width:100%;height:100%}
.gi-notice p{font-size:17px;line-height:1.45;color:var(--text-2)}
.gi-notice strong{font-weight:600;color:var(--text)}
.gi-pj-plan{max-width:40em;margin:16px auto 0;text-align:center;font-size:15px;line-height:1.5;color:var(--text-meta)}
.gi-pj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,48px)}
.gi-pj-i--lead{grid-column:1/-1}
.gi-pj-i{display:flex}
.gi-pj{display:flex;flex-direction:column;width:100%;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--line-soft);isolation:isolate}
.gi-pj-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--media-bg)}
.gi-pj-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:var(--img-filter);transition:transform 1.6s var(--ease)}
.gi-pj:hover .gi-pj-media img{transform:scale(1.035)}
.gi-pj-status{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;letter-spacing:-.005em;color:#fff;background:rgba(28,28,30,.48);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.gi-pj-status.is-open::before{content:"";width:6px;height:6px;border-radius:50%;background:#9fd6d2}
.gi-pj-body{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.8vw,36px)}
.gi-pj-k{font-size:14px;font-weight:600;color:var(--text-meta)}
.gi-pj-t{margin-top:8px;font:600 clamp(26px,2.4vw,34px)/1.08 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.gi-pj-s{margin-top:12px;font-size:17px;line-height:1.5;color:var(--text-2)}
.gi-pj-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.gi-pj-facts dt{font-size:13px;line-height:1.3;color:var(--text-meta)}
.gi-pj-facts dd{margin:5px 0 0;font-size:15px;line-height:1.4;color:var(--text)}
/* narrower cards: label | value rows */
@media (max-width:1023px){
  .gi-pj .gi-pj-facts{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0;border-top:0}
  .gi-pj .gi-pj-facts>div{display:grid;grid-template-columns:minmax(0,8em) minmax(0,1fr);gap:14px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
  .gi-pj .gi-pj-facts dt{font-size:14px}
  .gi-pj .gi-pj-facts dd{margin:0}
}
.gi-pj-fund{margin-top:auto;padding-top:28px}
.gi-pj-figs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px clamp(20px,2.4vw,32px)}
.gi-pj-figs dt{font-size:13px;line-height:1.3;color:var(--text-meta)}
.gi-pj-figs dd{margin:4px 0 0;font:600 clamp(22px,2vw,28px)/1.1 var(--f-display);letter-spacing:-.024em;font-variant-numeric:tabular-nums;white-space:nowrap}
.gi-pj-figs .gi-pj-pct{margin-left:auto;text-align:right}
.gi-pj-bar{position:relative;height:6px;margin-top:16px;border-radius:3px;background:var(--line);overflow:hidden}
.gi-pj-fill{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform:translate3d(calc((var(--p) - 1) * 100%),0,0)}
/* minimum viable amount: a quiet notch on the bar (also visible while nothing has been raised yet) */
.gi-pj-floor{position:absolute;top:0;bottom:0;left:calc(var(--f) * 100%);width:2px;margin-left:-1px;background:var(--text-meta);opacity:.75}
.gi-pj-cap,.sheet.gi-pj-sheet p.gi-pj-cap:not(.eyebrow){margin-top:12px;font-size:14px;line-height:1.4;color:var(--text-meta)}
.motion .gi-pj .gi-pj-fill{transform:translate3d(-100%,0,0);transition:transform 2s var(--ease) .1s}
.motion .gi-pj .gi-pj-bar.is-in .gi-pj-fill{transform:translate3d(calc((var(--p) - 1) * 100%),0,0)}
.gi-pj-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}
.gi-pj-more{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--link);font-size:17px;font-weight:500;letter-spacing:-.012em}
.gi-pj-more-i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ctl-bg);color:var(--ctl-fg);transition:transform .6s var(--ease),background-color .3s}
.gi-pj-more:hover .gi-pj-more-i{transform:rotate(90deg);background:var(--ctl-bg-hover)}
.gi-pj-more-i svg{width:12px;height:12px}
.gi-pj-foot{max-width:36em;margin:clamp(32px,4vw,48px) auto 0;text-align:center;font-size:15px;line-height:1.5;color:var(--text-meta)}
.gi-pj-foot .link{min-height:0;font-size:15px;vertical-align:baseline}
@media (max-width:767px){
  .gi-pj-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .gi-notice{padding:16px 18px;text-align:left}
  .gi-notice p{font-size:16px}
  .gi-seg-b{padding:0 12px}
}
/* the flagship project spans the grid; on wide screens its photograph stands beside the copy */
@media (min-width:1024px){
  .gi-pj--lead{flex-direction:row}
  .gi-pj--lead .gi-pj-media{flex:0 0 44%;aspect-ratio:auto}
  .gi-pj--lead .gi-pj-body{flex:1;min-width:0;padding:clamp(32px,3.6vw,52px)}
  .gi-pj--lead .gi-pj-t{font-size:clamp(32px,3.2vw,46px);letter-spacing:-.034em}
  .gi-pj--lead .gi-pj-s{max-width:28em;font-size:19px}
}
/* the "Read more" sheet: facts and funding side by side under the description */
.gi-pj-sheet .sheet-media{aspect-ratio:16/9}
.gi-pj-sheet-meta{display:grid;gap:32px;margin-top:clamp(32px,4vw,48px)}
.gi-pj-sheet .gi-pj-facts{margin-top:0}
.gi-pj-sheet .gi-pj-fund{padding-top:0}
.gi-pj-sheet-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:clamp(28px,4vw,40px)}
.sheet.gi-pj-sheet p.gi-pj-note:not(.eyebrow){max-width:26em;margin:0;font-size:14px;line-height:1.45;color:var(--text-meta)}
@media (max-width:600px){ .gi-pj-sheet .gi-pj-facts{grid-template-columns:minmax(0,1fr)} }
.gi-pj-sec{margin-top:clamp(40px,5vw,64px)}
.gi-pj-h{font:600 clamp(22px,2.2vw,28px)/1.15 var(--f-display);letter-spacing:-.026em}
.gi-bud{width:100%;margin-top:18px;border-collapse:collapse}
.gi-bud th,.gi-bud td{padding:11px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.4;vertical-align:baseline}
.gi-bud th{padding-right:20px;font-weight:400;text-align:left;color:var(--text-2)}
.gi-bud td{padding-left:12px;font-weight:500;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text)}
.gi-bud tfoot th,.gi-bud tfoot td{border-top-color:var(--text-meta);font-weight:600;color:var(--text)}
.sheet.gi-pj-sheet .gi-pj-sec p.gi-pj-note:not(.eyebrow){max-width:34em;margin-top:14px}
.sheet.gi-pj-sheet .gi-pj-sec p.gi-pj-note--top:not(.eyebrow){margin-top:10px}
.gi-ms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px);margin-top:20px}
.gi-ms li{padding-top:16px;border-top:1px solid var(--line)}
.gi-ms-n{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--text-meta);font-variant-numeric:tabular-nums}
.gi-ms-t{margin:0;font:600 18px/1.25 var(--f-display);letter-spacing:-.018em}
.sheet.gi-pj-sheet .gi-ms p:not(.eyebrow){margin-top:8px;font-size:15px;line-height:1.5;color:var(--text-2)}
@media (max-width:640px){ .gi-ms{grid-template-columns:minmax(0,1fr)} }

/* ---------- 5 · How to give: two ways, then why Monero ---------- */
.gi-xmr{text-align:center;overflow:hidden}
[data-theme="dark"] .gi-xmr{--gi-ring:rgba(159,214,210,.5)}
[data-theme="light"] .gi-xmr{--gi-ring:rgba(11,90,120,.34)}
.gi-xmr .eyebrow{margin-bottom:14px}
.gi-xmr-h{max-width:12em;margin-inline:auto}
.gi-xmr-lead{max-width:32em;margin:clamp(20px,2.4vw,28px) auto 0}
/* the two ways to give */
.gi-gives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1000px;margin:clamp(48px,6vw,80px) auto 0;text-align:left}
.gi-give{display:flex;flex-direction:column;padding:clamp(28px,3.4vw,44px);border-radius:var(--r-xl);background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
.gi-give-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gi-give-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--bg-alt);box-shadow:0 0 0 1px var(--line-soft);color:var(--text);font:600 24px/1 var(--f-display)}
.gi-give-mark svg{width:56%;height:56%}
.gi-give-t{margin-top:clamp(28px,3.4vw,44px);font:600 clamp(32px,3.4vw,48px)/1.02 var(--f-display);letter-spacing:-.036em}
.gi-give-k{margin-top:8px;font-size:17px;font-weight:500;letter-spacing:-.012em;color:var(--text-2)}
.gi-give-p{max-width:28em;margin-top:20px;font-size:17px;line-height:1.5;color:var(--text-2)}
.gi-give-go{margin-top:auto;padding-top:24px}
/* why Monero: the mark with slow ripples, then four reasons */
/* open needs (src/needs-ui.mjs; card styles in needs.css) */
.gi-needs{max-width:1000px;margin:clamp(56px,8vw,96px) auto 0;text-align:left}
.gi-needs[hidden]{display:none}
.gi-needs-h{margin:0 0 10px;font:600 clamp(24px,2.6vw,32px)/1.15 var(--f-display);letter-spacing:-.024em;color:var(--text)}
.gi-needs-p{max-width:44em;margin:0 0 24px;font-size:16px;line-height:1.55;color:var(--text-2)}
.gi-needs-p b{font-weight:600;color:var(--text)}
.gi-needs-go{margin-top:20px}
.gi-why{margin-top:clamp(72px,10vw,136px)}
.gi-mark{position:relative;display:grid;place-items:center;width:clamp(190px,21vw,270px);aspect-ratio:1;margin:0 auto clamp(8px,1.6vw,20px)}
.gi-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--gi-ring,var(--line))}
.gi-ring:nth-child(1){transform:scale(.44)}
.gi-ring:nth-child(2){transform:scale(.62);opacity:.85}
.gi-ring:nth-child(3){transform:scale(.8);opacity:.6}
.gi-ring:nth-child(4){transform:scale(.98);opacity:.35}
.gi-glyph{position:relative;display:grid;place-items:center;width:clamp(72px,6.4vw,90px);aspect-ratio:1;border-radius:50%;background:var(--surface);color:var(--text);
  box-shadow:0 0 0 1px var(--line-soft),0 18px 48px rgba(0,0,0,.14)}
.gi-glyph svg{width:52%;height:52%}
.motion .gi-ring{opacity:0;animation:gi-ripple 9s cubic-bezier(.22,.6,.36,1) infinite;animation-play-state:paused;will-change:transform,opacity}
.motion .gi-ring:nth-child(2){animation-delay:-2.25s}
.motion .gi-ring:nth-child(3){animation-delay:-4.5s}
.motion .gi-ring:nth-child(4){animation-delay:-6.75s}
.motion .gi-mark.is-live .gi-ring{animation-play-state:running}
@keyframes gi-ripple{0%{transform:scale(.36);opacity:0}14%{opacity:1}100%{transform:scale(1.18);opacity:0}}
.motion .gi-mark{will-change:transform}
.gi-why-h{max-width:12em;margin-inline:auto;font:600 clamp(30px,3.6vw,52px)/1.05 var(--f-display);letter-spacing:-.034em;text-wrap:balance}
.gi-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px);max-width:1000px;margin:clamp(32px,4vw,52px) auto 0;text-align:left}
.gi-reason{position:relative;display:grid;grid-template-columns:clamp(40px,4vw,56px) minmax(0,1fr);align-items:baseline;padding:24px 0 32px;
  font-size:clamp(19px,1.75vw,25px);line-height:1.3;font-weight:500;letter-spacing:-.02em;color:var(--text)}
.gi-reason::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
.motion .gi-reason::before{transform:scaleX(0);transition:transform 1.6s var(--ease) var(--rd,0s)}
.motion .gi-reason.is-in::before{transform:none}
.gi-reason-n{font-size:15px;font-weight:500;color:var(--text-meta);font-variant-numeric:tabular-nums;letter-spacing:0}
/* the one rule that holds for every gift */
.gi-vow{max-width:19em;margin:clamp(72px,10vw,128px) auto 0;font:600 clamp(28px,3.8vw,54px)/1.06 var(--f-display);letter-spacing:-.034em;text-wrap:balance}
.gi-vow-s{margin-top:16px;font-size:clamp(16px,1.3vw,18px);color:var(--text-2)}
.gi-xmr-go{justify-content:center;margin-top:clamp(32px,4vw,52px)}
@media (max-width:767px){
  .gi-gives{grid-template-columns:minmax(0,1fr);gap:16px}
  .gi-reasons{grid-template-columns:minmax(0,1fr)}
  .gi-reason{padding:20px 0 24px}
}

/* ---------- 6 · Partner with MEPA ---------- */
.gi-partners .shead{margin-bottom:clamp(44px,6vw,80px)}
.gi-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.gi-p-media{position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:var(--media-bg)}
.gi-p-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:var(--img-filter)}
.gi-p-k{margin-top:24px;font-size:14px;font-weight:600;color:var(--text-meta)}
.gi-p-t{margin-top:6px;font:600 clamp(24px,2.1vw,30px)/1.12 var(--f-display);letter-spacing:-.026em}
.gi-p-s{max-width:30em;margin-top:12px;font-size:16px;line-height:1.55;color:var(--text-2)}
@media (max-width:767px){
  /* phones: a swipeable row */
  .gi-pwrap{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:var(--gutter)}
  .gi-pwrap::-webkit-scrollbar{display:none}
  .gi-pwrap:focus-visible{outline-offset:-3px;border-radius:var(--r-lg)}
  .gi-pgrid{display:flex;width:max-content;gap:14px;margin:0;padding-inline:var(--gutter)}
  .gi-p{flex:none;width:min(80vw,330px);scroll-snap-align:start}
}
@media (min-width:768px){
  .motion .gi-partners{padding-bottom:calc(var(--sec) + 40px)}
  .motion .gi-p{will-change:transform}
}
/* an existing partner: one quiet row under the cards */
.gi-pv{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;gap:16px clamp(32px,5vw,72px);align-items:center;margin-top:clamp(72px,9vw,136px);
  padding-block:clamp(26px,3vw,36px);border-block:1px solid var(--line)}
.gi-pv-k{font-size:14px;font-weight:600;color:var(--text-meta)}
.gi-pv-t{margin-top:6px;font:600 clamp(30px,3vw,44px)/1 var(--f-display);letter-spacing:-.036em}
.gi-pv-s{max-width:34em;font-size:17px;line-height:1.5;color:var(--text-2)}
.gi-pv-d{max-width:34em;margin-top:10px;font-size:15px;line-height:1.5;color:var(--text-meta)}
@media (max-width:1023px){ .gi-pv{grid-template-columns:minmax(0,1fr) auto} .gi-pv-body{grid-column:1/-1;grid-row:2} }
@media (max-width:767px){ .gi-pv{grid-template-columns:minmax(0,1fr);margin-top:56px} .gi-pv-body{grid-row:auto} .gi-pv-go{margin-top:-6px} }

/* ---------- 7 · Let's talk + newsletter over the meadow ---------- */
.gi-talk{position:relative;background:#000;color:#f5f5f7;isolation:isolate}
.gi-talk-bg{position:absolute;inset:0;pointer-events:none}
.gi-talk-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.gi-talk-media{position:absolute;inset:0;will-change:transform}
.gi-talk-media img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
.gi-talk-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.3) 68%,rgba(0,0,0,.74) 100%),rgba(0,12,24,.34)}
.gi-talk-body{position:relative;z-index:1;padding-block:clamp(120px,20vh,200px) clamp(96px,14vh,160px)}
.gi-talk .shead{margin-bottom:0}
.gi-talk .shead--center .lead{color:var(--text-2)}
.gi-card{width:min(760px,100%);margin:clamp(40px,6vw,64px) auto 0;padding:clamp(24px,4vw,48px);border-radius:var(--r-xl);background:var(--glass-bg);color:var(--text);
  box-shadow:0 0 0 1px var(--glass-line),0 40px 120px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%)}
/* secondary text on the glass keeps ≥4.5:1 over the brightest patches of the meadow */
[data-theme="dark"] .gi-card{--text-2:#b0b0b5;--text-meta:#98989d}
[data-theme="light"] .gi-card{--text-2:#5e5e63;--text-meta:#5e5e63}
.gi-card-intro{margin-bottom:24px;font-size:17px;line-height:1.47;color:var(--text-2)}
.gi-news{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:16px}
.gi-news .eyebrow{margin-bottom:10px}
.gi-news-h{font:600 clamp(24px,2.4vw,32px)/1.12 var(--f-display);letter-spacing:-.026em;text-wrap:balance}
.gi-news-s{margin-top:12px;font-size:16px;line-height:1.5;color:var(--text-2)}
.gi-news .f-row{grid-template-columns:minmax(0,1fr);gap:0}
.gi-news .f-actions{margin-top:10px}
@media (max-width:767px){ .gi-news{grid-template-columns:minmax(0,1fr)} }

/* ==== pages/needs.css ==== */
/* =====================================================================
   What we need: /needs/ (prefix "nd-"). Calm cards in a grid, a progress bar, no motion beyond the bar.
   ===================================================================== */
.nd{padding:calc(var(--nav-h) + clamp(48px,9vh,110px)) 0 var(--sec)}
.nd-head{max-width:760px;margin:0 0 clamp(28px,4vw,48px)}
.nd-how{display:grid;gap:14px;max-width:760px;margin:0 0 clamp(36px,5vw,64px);padding:22px 24px;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
.nd-how p{margin:0;font-size:15px;line-height:1.55;color:var(--text-2)}
.nd-how b{font-weight:600;color:var(--text)}
.nd-sec{margin:0 0 clamp(40px,6vw,72px)}
.nd-lead{max-width:44em;margin:0 0 20px;font-size:16px;line-height:1.55;color:var(--text-2)}
.nd-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.nd-card[hidden]{display:none}
.nd-card{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
.nd-card p{margin:0;font-size:15px;line-height:1.5;color:var(--text-2)}
.nd-h{margin:0;font:600 19px/1.25 var(--f-display);letter-spacing:-.016em;color:var(--text)}
.nd-meta{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px;line-height:1.4;color:var(--text-2)}
.nd-meta span{display:inline-block;min-width:78px;margin-right:6px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-meta)}
.nd-card .nd-note{font-size:13.5px;color:var(--text-meta)}
.nd-price{margin-top:auto !important;padding-top:6px}
.nd-xmr{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.nd-eur{margin-left:6px;font-size:14px;color:var(--text-meta)}
.nd-price--later{font-size:14px;font-weight:600;color:var(--text-meta) !important}
.nd-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.nd-bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transform:scaleX(var(--p));transform-origin:0 50%;transition:transform .8s var(--ease)}
.nd-pct{font-size:13.5px !important;color:var(--text-meta) !important}
.nd-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.nd-fund{align-self:flex-start;margin-top:6px}
.nd-acts .nd-fund{margin-top:0}
.nd-card[data-state="incoming"],.nd-card[data-state="received"],.nd-card[data-state="funded"],.nd-card[data-state="bought"],.nd-card[data-state="delivered"]{box-shadow:0 0 0 1.5px var(--accent)}
.nd-stat{display:inline-block;align-self:flex-start;padding:4px 10px;border-radius:var(--r-pill);background:var(--accent-tint);font-size:12px;font-weight:600;color:var(--text)}
.nd-stat--open{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--text-meta)}
.nd-log{display:grid;gap:10px;font-size:14px;line-height:1.45;color:var(--text-2)}
.nd-log ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.nd-log time{display:block;font-size:12px;color:var(--text-meta)}
.nd-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.nd-pics a{display:block;border-radius:var(--r-md);overflow:hidden;box-shadow:0 0 0 1px var(--line-soft)}
.nd-pics img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.nd-pics figcaption{font-size:12px;color:var(--text-meta)}
.nd-foot{max-width:46em;margin:clamp(24px,4vw,40px) 0 0;font-size:14px;line-height:1.55;color:var(--text-meta)}
.nd-foot a,.nd-how a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.nd-bar i{transition:none}}

/* the "I have this" panel (reuses .sheet from base.css) */
.nd-have{width:min(640px,100% - 32px)}
.nd-have .sheet-in{padding:clamp(28px,5vw,44px) clamp(22px,5vw,40px) clamp(28px,5vw,40px)}
.nd-have .sheet-h{font-size:clamp(24px,3vw,32px);margin-bottom:6px}
.nd-have p,.nd-have li{font-size:15px;line-height:1.55;color:var(--text-2);max-width:none}
.nd-have p+p{margin-top:.8em}
.nd-have-spec{margin:0 0 18px !important;color:var(--text-meta) !important}
.nd-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;margin:0 0 16px;border-radius:var(--r-pill);background:var(--line-soft)}
.nd-opt{padding:11px 10px;border:0;border-radius:var(--r-pill);background:none;font:600 14px/1.2 var(--f);color:var(--text-2);cursor:pointer}
.nd-opt[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.nd-links{margin:12px 0;padding:0;list-style:none;display:grid;gap:6px}
.nd-links a,.nd-have a:not(.btn){color:var(--link);text-decoration:underline;text-underline-offset:3px}
.nd-fine{font-size:13.5px !important;color:var(--text-meta) !important}
.nd-rules{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.nd-rh{margin:0 0 10px;font:600 16px/1.3 var(--f-display);color:var(--text)}
.nd-rl{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px}
.nd-rl b{font-weight:600;color:var(--text)}
.nd-chk{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--text);cursor:pointer}
.nd-chk input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}
#nd-addr{margin-top:18px;padding:18px 20px;border-radius:var(--r-lg);background:var(--accent-tint)}
.nd-lab{margin:0 0 6px !important;font-size:12px !important;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-meta) !important}
.nd-addr{margin:0 0 12px;font:600 18px/1.45 var(--f-display);font-style:normal;letter-spacing:-.01em;color:var(--text);user-select:all}
#nd-addr .nd-acts{margin:12px 0}
.nd .btn--ghost,.nd-acts .btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.nd .btn--ghost:hover,.nd-acts .btn--ghost:hover{background:var(--line-soft)}
.nd-acts .btn{min-height:42px;padding:0 20px;font-size:15px}

/* ==== pages/related.css ==== */
/* "Related on MEPA": contextual links at the foot of a page (prefix rel-). Plain type and hairlines; always visible, no motion. */
.rel{padding:clamp(40px,6vh,72px) 0;border-top:1px solid var(--line)}
.rel-h{margin-bottom:clamp(16px,2.4vh,24px);font:600 15px/1.3 var(--f-text);letter-spacing:0;color:var(--text-meta)}
.rel-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 clamp(20px,3vw,40px);margin:0;padding:0;list-style:none}
.rel-a{display:grid;gap:4px;min-height:44px;padding:14px 0;border-top:1px solid var(--line);color:var(--text)}
.rel-k{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-meta)}
.rel-t{font:600 18px/1.3 var(--f-display);letter-spacing:-.016em}
.rel-s{font-size:15px;line-height:1.45;color:var(--text-2)}
.rel-a:hover .rel-t{text-decoration:underline;text-underline-offset:3px}