/* ============================================================
   Blind Travel Foundation
   Palette sampled from the foundation's own logo (#0039E2) and
   from the desert their 2025 grantees travelled through.
   Accent is the red tip of a white cane.
   ============================================================ */

:root{
  --blue:#0039E2;
  --blue-ink:#0026A6;
  --blue-deep:#0026A6;
  --blue-wash:#E7ECFD;
  --cane:#E8402F;
  --blue-pale:#E6ECFD;
  --paper:#F8FAFE;
  --ink:#0B1020;
  --ink-60:#4A5068;

  --shell:min(1280px,92vw);
  --r:26px;
  --r-lg:44px;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  /* Audience includes low-vision readers: body copy starts larger than default. */
  font-size:clamp(17px,.55vw + 15px,19px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

/* ---------- display type: expanded grotesque, signage energy ---------- */
.d{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 112;font-weight:700;
  line-height:.94;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
.d--xl{font-size:clamp(3.1rem,9.2vw,8.4rem);font-variation-settings:"wdth" 116;font-weight:800}
.d--lg{font-size:clamp(2.3rem,5.2vw,4.3rem)}
.d--md{font-size:clamp(1.7rem,3vw,2.7rem);font-variation-settings:"wdth" 108;font-weight:700}
.d--sm{font-size:clamp(1.25rem,1.7vw,1.55rem);font-variation-settings:"wdth" 104;font-weight:700;line-height:1.15}

/* ---------- utility / data face ---------- */
.mono{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;color:var(--blue);
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:currentColor;flex:none;
}
.eyebrow--light{color:rgba(255,255,255,.72)}

.lede{
  font-size:clamp(1.1rem,1.5vw,1.32rem);
  line-height:1.55;color:var(--ink-60);max-width:60ch;
}
.lede--light{color:rgba(255,255,255,.8)}

/* ---------- shell + sections ---------- */
.shell{width:var(--shell);margin-inline:auto}
.shell--narrow{width:min(880px,92vw)}
.section{padding-block:clamp(5rem,10vw,9rem);position:relative}
.section--tight{padding-block:clamp(3.5rem,6vw,5.5rem)}

.bg-paper{background:var(--paper)}
.bg-pale{background:var(--blue-pale)}
.bg-blue{background:var(--blue);color:#fff}
.bg-deep{background:var(--blue-deep);color:#fff}

/* ---------- contour rule: BTF's own shape language ----------
   Tactile maps and park topo maps are both drawn in nested
   contour lines. They replace Mira's blobs as the organic motif. */
.contour{display:block;width:100%;height:auto;color:currentColor}
.contour--flip{transform:scaleY(-1)}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--ink);color:#fff;padding:.85rem 1.3rem;border-radius:12px;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  transition:top .18s var(--ease);
}
.skip:focus{top:1rem}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(248,250,254,.84);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(11,16,32,.09);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.hdr__in{
  width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;gap:1.4rem;
  min-height:78px;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}

.nav{display:flex;gap:.35rem;margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;padding:.55rem .8rem;border-radius:10px;
  font-size:.94rem;font-weight:500;color:var(--ink);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav a:hover{background:var(--blue-wash);color:var(--blue-ink)}

.hdr__act{display:flex;align-items:center;gap:.6rem;flex:none}

/* the signature control */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:999px;padding:.85rem 1.6rem;text-decoration:none;
  font-weight:700;font-size:.97rem;border:2px solid transparent;cursor:pointer;
  font-family:var(--f-body);
  transition:transform .18s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--cane{background:var(--cane);color:#fff}
.btn--cane:hover{background:#cf2f1f}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-ink)}
.btn--ghost{border-color:currentColor;color:inherit}
.btn--ghost:hover{background:currentColor}
.btn--ghost:hover span{color:var(--blue)}
.btn--white{background:#fff;color:var(--blue-ink)}
.btn--sm{padding:.62rem 1.15rem;font-size:.9rem}

.nav-toggle{display:none}

/* ---------- focus ---------- */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--cane);outline-offset:3px;border-radius:6px;
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--blue-deep);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
/* 8%, not 42%: the frame is 155px taller than the hero box at desktop width,
   and at 42% enough of that came off the top to clip the walker's hat. */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
/* The walker stands in the right fifth of the photo (x 68-88%). Once the hero
   box is narrower than the frame's 1.58 aspect, `cover` crops the sides, not
   the top: at 50% a 390px phone shows only x 33-67% — the valley, with him
   just past the right edge, so all that survives is the cane tip. Pulling the
   crop to 96% shows x 63-97% and keeps him in shot with room on both sides.
   Above 900px the box is wide enough that this is moot. */
@media (max-width:900px){
  .hero__media img{object-position:96% 8%}
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,20,78,.62) 0%,rgba(0,20,78,.24) 34%,rgba(0,20,78,.55) 72%,rgba(0,20,78,.95) 100%),
    linear-gradient(95deg,rgba(0,57,226,.42) 0%,rgba(0,57,226,0) 62%);
}
.hero__in{
  position:relative;width:var(--shell);margin-inline:auto;
  padding-block:clamp(6rem,15vh,10rem) clamp(2rem,4vh,3rem);
  min-height:clamp(620px,90vh,900px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero__kicker{
  display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);border-radius:999px;padding:.5rem 1.1rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:2rem;
}
.hero__kicker b{color:#fff;font-weight:600}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--cane);flex:none;
  box-shadow:0 0 0 0 rgba(232,64,47,.7);animation:pulse 2.4s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 11px rgba(232,64,47,0)}
  100%{box-shadow:0 0 0 0 rgba(232,64,47,0)}
}
.hero h1{color:#fff;max-width:15ch}
.hero h1 em{display:block;font-style:normal}
.hero__sub{
  margin:2rem 0 2.4rem;max-width:46ch;
  font-size:clamp(1.12rem,1.6vw,1.4rem);line-height:1.5;color:rgba(255,255,255,.88);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:3rem}

/* the thesis: the photo, and the words that carry it to someone who can't see it */
.hero__desc{
  border-top:1px solid rgba(255,255,255,.28);
  padding-top:1.15rem;display:flex;gap:1.1rem;align-items:flex-start;
  max-width:74ch;
}
.hero__desc .tag{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cane);background:rgba(232,64,47,.16);border:1px solid rgba(232,64,47,.4);
  padding:.32rem .6rem;border-radius:6px;flex:none;margin-top:.15rem;
}
.hero__desc p{
  margin:0;font-family:var(--f-mono);font-size:.87rem;line-height:1.7;
  color:rgba(255,255,255,.82);font-weight:400;
}

/* ---------- figure descriptions ---------- */
figure{margin:0;position:relative}
.fig{position:relative;border-radius:var(--r);overflow:hidden;background:var(--blue-wash)}
.fig img{width:100%;height:100%;object-fit:cover}


/* Visually hidden, but present in the DOM and announced by screen readers.
   The sighted reveal control is gone; the description is not. */
.fig__desc{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.fig__desc::before{
  content:"Described";display:block;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cane);margin-bottom:.45rem;font-weight:600;
}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.22)}
.stat{background:var(--blue);padding:2.4rem 1.5rem}
.stat__n{
  font-family:var(--f-display);font-variation-settings:"wdth" 118;font-weight:800;
  font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:1;letter-spacing:-.03em;
}
.stat__l{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:.75rem;line-height:1.5;
}
/* `1fr` is minmax(auto,1fr), and `auto` will not shrink a column below its
   min-content. "$10,000" needs 171px, but an equal half of a 390px phone
   offers 146px, so the grid handed column one the difference and the divider
   sat 12% right of centre — the whole band read as lopsided. minmax(0,1fr)
   forces true halves; the number then has to fit the narrower box, which is
   what the smaller type and tighter padding here are for. */
@media (max-width:620px){
  /* grid-auto-rows:1fr because the labels wrap to different line counts —
     at 430px the top row ran 141px and the bottom 124px. Equal rows keep the
     four boxes identical whatever the labels do. */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .stat{padding:2rem 1.1rem}
  .stat__n{font-size:2rem}
}

/* ---------- grant / three steps ---------- */
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3.5rem}
.step{
  background:#fff;border:1px solid rgba(11,16,32,.09);border-radius:var(--r);
  padding:2rem 1.7rem;position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.step:hover{transform:translateY(-6px);box-shadow:0 22px 50px -26px rgba(0,57,226,.42);border-color:rgba(0,57,226,.3)}
.step__v{
  font-family:var(--f-display);font-variation-settings:"wdth" 116;font-weight:800;
  font-size:1.9rem;color:var(--blue);letter-spacing:-.02em;margin-bottom:.7rem;line-height:1;
}
.step p{margin:0;color:var(--ink-60);font-size:.98rem;line-height:1.6}
.step__i{
  position:absolute;right:-14px;bottom:-22px;width:96px;height:96px;
  color:var(--blue);opacity:.09;
}

.amount{
  font-family:var(--f-display);font-variation-settings:"wdth" 120;font-weight:800;
  font-size:clamp(4.2rem,13vw,10rem);line-height:.82;letter-spacing:-.045em;
  color:var(--blue);display:block;
}
.amount small{
  display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-60);margin-top:1.1rem;font-weight:500;
}

/* ---------- projects ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin:2.5rem 0 3rem}
.filter{
  border:1.5px solid rgba(11,16,32,.18);background:none;border-radius:999px;
  padding:.6rem 1.25rem;cursor:pointer;font-family:var(--f-mono);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--ink-60);transition:.2s var(--ease);
}
.filter:hover{border-color:var(--blue);color:var(--blue)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{
  background:#fff;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(11,16,32,.09);display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-7px);box-shadow:0 26px 56px -30px rgba(11,16,32,.42)}
.card.is-hidden{display:none}
/* re-entry when a year filter is applied */
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card__fig{aspect-ratio:4/3.15;position:relative;border-radius:0}
.card__fig img{transition:transform .6s var(--ease)}
.card:hover .card__fig img{transform:scale(1.045)}
.card__yr{
  position:absolute;left:.85rem;top:.85rem;z-index:3;
  background:var(--blue);color:#fff;border-radius:8px;padding:.3rem .6rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;font-weight:600;
}
.card__b{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.card__t{margin:0 0 .5rem}
.card__who{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cane);font-weight:600;margin:0 0 .85rem;
}
.card__d{margin:0;color:var(--ink-60);font-size:.95rem;line-height:1.6}

/* ---------- parks carousel ---------- */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.rail-nav{display:flex;gap:.55rem}
.rail-btn{
  width:3rem;height:3rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  background:none;color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:.2s var(--ease);
}
.rail-btn:hover:not(:disabled){background:#fff;color:var(--blue-deep);border-color:#fff}
.rail-btn:disabled{opacity:.3;cursor:not-allowed}
.rail-btn svg{width:18px;height:18px}

.rail{
  display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:3rem .4rem 1.5rem;margin-inline:calc(50% - 50vw);
  padding-inline:max(.4rem,calc(50vw - var(--shell)/2));
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.park{
  flex:0 0 clamp(280px,31vw,400px);scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.park__fig{aspect-ratio:4/3;border-radius:var(--r)}
.park__fig img{transition:transform .7s var(--ease)}
.park:hover .park__fig img{transform:scale(1.05)}
.park__meta{
  display:flex;align-items:center;gap:.7rem;margin:1.25rem 0 .6rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.park__meta b{color:var(--cane);font-weight:600}
.park h3{margin:0 0 .7rem;color:#fff}
.park p{margin:0;color:rgba(255,255,255,.68);font-size:.94rem;line-height:1.62}

/* ---------- story timeline ---------- */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.story__fig{border-radius:var(--r-lg);aspect-ratio:3/3.6}
.tl{list-style:none;margin:2.8rem 0 0;padding:0;position:relative}
.tl::before{
  content:"";position:absolute;left:5.4rem;top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(180deg,var(--blue),rgba(0,57,226,.12));
}
.tl li{display:grid;grid-template-columns:5.4rem 1fr;gap:2rem;padding-bottom:2.4rem;position:relative}
.tl li:last-child{padding-bottom:0}
.tl__y{
  font-family:var(--f-mono);font-size:.82rem;font-weight:600;color:var(--blue);
  letter-spacing:.06em;padding-top:.1rem;
}
.tl__b{position:relative;padding-left:1.6rem}
.tl__b::before{
  content:"";position:absolute;left:-.42rem;top:.5rem;width:.85rem;height:.85rem;
  border-radius:50%;background:var(--paper);border:2.5px solid var(--blue);
}
.tl__b h4{margin:0 0 .4rem;font-size:1.06rem;font-weight:700}
.tl__b p{margin:0;color:var(--ink-60);font-size:.96rem;line-height:1.6}
.pull{
  border-left:3px solid var(--cane);padding:.3rem 0 .3rem 1.5rem;margin:2rem 0;
  font-size:1.1rem;line-height:1.55;font-style:italic;color:var(--ink);
}
.pull cite{
  display:block;margin-top:.9rem;font-style:normal;font-family:var(--f-mono);
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60);
}

/* ---------- summit ---------- */
.summit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.summit__fig{border-radius:var(--r-lg);aspect-ratio:4/3.4}
.facts{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:.1rem}
.facts li{
  display:grid;grid-template-columns:8.5rem 1fr;gap:1.2rem;
  padding:1rem 0;border-top:1px solid rgba(255,255,255,.18);
}
.facts li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.facts dt,.facts .k{
  font-family:var(--f-mono);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.5);padding-top:.2rem;
}
.facts .v{color:#fff;font-size:1rem;line-height:1.5}

/* ---------- sponsors ---------- */
.marquee{overflow:hidden;position:relative;padding-block:.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marquee__t{display:flex;gap:3.2rem;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__t{animation:none}.marquee{mask-image:none;-webkit-mask-image:none;overflow-x:auto}}
.spon{
  display:flex;align-items:center;flex:none;
  transition:transform .25s var(--ease);
}
.spon:hover{transform:translateY(-2px)}
.spon img{display:block;width:auto;height:var(--h)}

/* Sized on measured ink, not on the bounding box. A logo whose mark towers
   over its wordmark (Ambutech's star, Seable's square) reads far smaller than
   a pure wordmark at the same height, so each ratio below is derived from the
   median column ink-height of the artwork itself. */
.marquee{--lh:clamp(26px,2.7vw,36px)}
.spon--aira      {--h:calc(var(--lh)*0.87)}
.spon--united    {--h:calc(var(--lh)*0.96)}
.spon--uber      {--h:calc(var(--lh)*0.82)}
.spon--airbnb    {--h:calc(var(--lh)*1.14)}
.spon--ambutech  {--h:calc(var(--lh)*1.42)}
.spon--feeldom   {--h:calc(var(--lh)*0.77)}
.spon--awarewolf {--h:calc(var(--lh)*1.14)}
.spon--axley     {--h:calc(var(--lh)*0.87)}
.spon--seable    {--h:calc(var(--lh)*1.25)}
/* The four the summit grid adds. Same derivation: a two-line lockup needs the
   room for both lines before its capitals match a one-line wordmark, and a
   mark that is a filled rectangle sits smaller than type of equal height. */
.spon--agiga     {--h:calc(var(--lh)*1.55)}
.spon--opendoors {--h:calc(var(--lh)*1.75)}
.spon--twoblindbrothers{--h:calc(var(--lh)*1.50)}
.spon--glamcanes {--h:calc(var(--lh)*1.25)}
/* the Gund Foundation has no logo, so it keeps the wordmark treatment */
.spon--word{
  font-family:var(--f-display);font-variation-settings:"wdth" 106;font-weight:600;
  font-size:calc(var(--lh)*.66);line-height:1;color:var(--ink-60);
  letter-spacing:-.01em;white-space:nowrap;
}

/* ---------- apply / dates ---------- */
.dates{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(11,16,32,.1);
  border:1px solid rgba(11,16,32,.1);border-radius:var(--r);overflow:hidden;margin-top:3rem}
.date{background:var(--paper);padding:1.6rem 1.5rem}
.date__d{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cane);font-weight:600;margin-bottom:.5rem}
.date__t{font-weight:600;font-size:1rem;line-height:1.45;margin:0}

/* ---------- faq ---------- */
/* The answers were the widest running text on the site, at the full 1280px
   shell. 96ch is the measure every other page reads at. */
.faq{margin-top:3rem;max-width:96ch;border-top:1px solid rgba(11,16,32,.14)}
.faq details{border-bottom:1px solid rgba(11,16,32,.14)}
.faq summary{
  cursor:pointer;padding:1.4rem 3rem 1.4rem 0;position:relative;list-style:none;
  font-weight:600;font-size:1.28rem;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.85rem;width:14px;height:14px;
  border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg);top:2rem}
.faq summary:hover{color:var(--blue)}
/* An answer belongs to the question above it: it sits close under its own
   summary, and the breathing room goes below, before the next question. */
.faq details[open] summary{padding-bottom:.55rem}
.faq__a{
  padding:0 3rem 1.9rem 0;margin:0;color:var(--ink-60);
  line-height:1.62;
}

/* ---------- closing CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--blue);color:#fff;text-align:center}
.cta__in{position:relative;z-index:2;padding-block:clamp(5rem,10vw,8rem)}
.cta h2{color:#fff;margin-bottom:1.6rem}
.cta__btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem}

/* ---------- newsletter ---------- */
.news{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.form{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.form input{
  flex:1 1 240px;padding:.95rem 1.2rem;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);
  color:#fff;font-family:var(--f-body);font-size:1rem;
}
.form input::placeholder{color:rgba(255,255,255,.5)}
.form input:focus{border-color:#fff;background:rgba(255,255,255,.14);outline:none}
.form__note{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;
  color:rgba(255,255,255,.5);margin-top:1rem}

/* ---------- footer ---------- */
.ft{background:var(--blue-deep);color:#fff;padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem}
.ft__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.15)}
.ft h5{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 1.2rem;font-weight:500;
}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
/* Plain items in these lists (the address, the EIN) were inheriting body size
   and full-strength white, so they shouted next to the links beside them. */
.ft li{font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.82)}
.ft a{text-decoration:none;color:rgba(255,255,255,.82);font-size:.95rem;transition:color .18s var(--ease)}
.ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft__mission{color:rgba(255,255,255,.62);font-size:.95rem;line-height:1.65;max-width:38ch;margin:1.2rem 0 0}

/* Social links. No chip, no border — just the glyph on the footer blue, so the
   row reads as part of the identity block rather than a set of buttons.
   `.ft ul` above is a grid, so the display has to be reset here.
   44px targets with a 21px glyph: comfortable to hit, quiet to look at. */
.ft__social{display:flex!important;flex-wrap:wrap;gap:.15rem;margin:1.1rem 0 0!important;
  margin-left:-.6rem!important}
.ft__social li{font-size:0;line-height:0}
.ft__social a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:rgba(255,255,255,.72);text-decoration:none;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.ft__social a:hover{color:#fff;background-color:rgba(255,255,255,.11)}
.ft__social svg{width:21px;height:21px;display:block}
.ft__bot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:2rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;color:rgba(255,255,255,.45);
  text-transform:uppercase}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .projects{grid-template-columns:repeat(2,1fr)}
  .ft__top{grid-template-columns:1fr 1fr}
}
@media (max-width:1199px){
  .nav{
    position:fixed;inset:78px 0 auto;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:1rem 6vw 2rem;border-bottom:1px solid rgba(11,16,32,.12);
    transform:translateY(-120%);transition:transform .34s var(--ease);
    box-shadow:0 24px 40px -28px rgba(11,16,32,.5);max-height:calc(100vh - 78px);overflow-y:auto;
  }
  .nav.open{transform:none}
  .nav a{padding:.95rem .4rem;font-size:1.1rem;border-radius:0;
    border-bottom:1px solid rgba(11,16,32,.08)}
  .nav-toggle{
    display:grid;place-items:center;width:2.9rem;height:2.9rem;margin-left:auto;
    background:none;border:1.5px solid rgba(11,16,32,.2);border-radius:12px;cursor:pointer;
  }
  .nav-toggle span{display:block;width:19px;height:2px;background:var(--ink);
    position:relative;transition:.22s var(--ease)}
  .nav-toggle span::before,.nav-toggle span::after{
    content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);transition:.22s var(--ease)}
  .nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
  .hdr__act .btn{display:none}
}
@media (max-width:900px){
  .grid-2,.story,.summit,.news{grid-template-columns:1fr}
  .story__fig,.summit__fig{aspect-ratio:4/3;max-height:420px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
}
@media (max-width:620px){
  .projects{grid-template-columns:1fr}
  .dates{grid-template-columns:1fr}
  .ft__top{grid-template-columns:1fr}
  .tl::before{left:3.6rem}
  .tl li{grid-template-columns:3.6rem 1fr;gap:1.1rem}
  .facts li{grid-template-columns:1fr;gap:.3rem}
  .hero__desc{flex-direction:column;gap:.7rem}
}

/* ============================================================
   REVISION PASS
   ============================================================ */

/* ---- contour dividers: the Mira-style curved section change,
        drawn in the language of tactile maps and topo lines ---- */
.section,.hero,.cta,section{position:relative}
.divider{
  position:absolute;left:0;right:0;bottom:-1px;width:100%;
  height:clamp(52px,6.5vw,110px);z-index:1;display:block;pointer-events:none;
}
.shell,.stats,.rail,.cta__in{position:relative;z-index:2}

/* ---- grant card: replaces the floating amount ---- */
.gcard{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--blue);color:#fff;padding:clamp(2rem,3.4vw,3rem);
  box-shadow:0 34px 70px -40px rgba(0,57,226,.75);
}
.gcard__in{position:relative;z-index:2}
.gcard .amount{
  color:#fff;font-size:clamp(2.9rem,6.4vw,4.6rem);line-height:.9;letter-spacing:-.04em;
}
.gcard__sub{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:.9rem 0 2rem;
}
.gcard__rows{margin:0;display:grid;gap:0}
.gcard__rows div{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-top:1px solid rgba(255,255,255,.22);
}
.gcard__rows div:last-of-type{border-bottom:1px solid rgba(255,255,255,.22)}
.gcard__rows dt{
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin:0;
}
.gcard__rows dd{margin:0;font-size:.94rem;font-weight:600;text-align:right;line-height:1.35}
.gcard__btn{margin-top:2rem;width:100%}

/* ---- steps read stronger without the decorative icons ---- */
.step{padding:2.2rem 2rem 2.4rem}
.step__v{font-size:2.15rem;margin-bottom:.9rem}

/* ---- column balance: top-align, don't float content in dead space ---- */
.grid-2{align-items:start}
.summit{align-items:start}
.story{align-items:start}

/* ---- summit portrait: the frame matches the source's own 2:3, so the whole
        stage shot survives - speaker's head to the guide dog at his feet -
        with nothing for object-fit:cover to crop away ---- */
.summit__fig{aspect-ratio:2/3}
.summit__sticky{position:sticky;top:110px}

/* ---- parks rail ---- */
.rail-head{align-items:flex-start;margin-bottom:.5rem}
.rail-head>.rv:first-child{max-width:60ch}
.rail{padding-bottom:2.5rem}
.park p{padding-bottom:.2rem}
.rail-nav{padding-top:.6rem}

/* ---- apply: give the intro a second column instead of dead space ---- */
.apply-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.gets{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.gets li{
  display:flex;gap:.9rem;align-items:flex-start;padding:.95rem 0;
  border-top:1px solid rgba(11,16,32,.13);font-size:.98rem;line-height:1.55;
}
.gets li:last-child{border-bottom:1px solid rgba(11,16,32,.13)}
.gets svg{width:1.15rem;height:1.15rem;flex:none;color:var(--blue);margin-top:.22rem}

/* ---- dates: tighter, more deliberate ---- */
.dates{margin-top:3.5rem}
.date{padding:1.5rem 1.6rem}

@media (max-width:900px){
  .apply-head{grid-template-columns:1fr}
  .summit__fig{aspect-ratio:2/3;max-height:none}
  .summit__sticky{position:static}
  .gcard__rows div{grid-template-columns:1fr;gap:.2rem}
  .gcard__rows dd{text-align:left}
}

/* ---- hero: the described band is the thesis, so it has to sit
        above the fold on a normal laptop, not just below it ---- */
.hero__in{
  min-height:clamp(560px,84vh,820px);
  padding-block:clamp(4.5rem,11vh,7.5rem) clamp(1.6rem,3vh,2.4rem);
}
.hero__kicker{margin-bottom:1.6rem}
.hero__sub{margin:1.6rem 0 1.9rem}
.hero__cta{margin-bottom:2.2rem}
.hero__desc{padding-top:1rem}
.hero__desc p{font-size:.83rem;line-height:1.6}


@media (max-width:620px){
  .kicker-more{display:none}
  .hero__kicker{font-size:.62rem}
}
@media (max-width:1199px){
  .hdr__in{gap:.7rem}
  .nav-toggle{margin-left:auto}
  .hdr__act{margin-left:0}
}

/* ---- contrast corrections (axe, WCAG AA) ----
   The bright cane red stays as an accent mark, but white text needs a
   deeper red behind it: #E8402F gives 4.03:1, #D0321F gives 5.05:1. */
.btn--cane{background:#D0321F}
.btn--cane:hover{background:#B62815}
.ft__bot{color:rgba(255,255,255,.56)}

/* ============================================================
   PRODUCTION PASS — real logo, utility classes, no inline styles
   (every declaration below replaces a style="" attribute, so the
   site can ship a Content-Security-Policy without 'unsafe-inline')
   ============================================================ */

/* ---- brand ---- */
.brand__logo{height:clamp(38px,3.9vw,52px);width:auto;display:block}
.brand--ft{display:inline-block}
.brand__logo-ft{height:96px;width:auto;display:block}

/* ---- divider colours ---- */
.divider--paper{color:#F8FAFE}
.divider--pale{color:#E6ECFD}
.divider--deep{color:#0026A6}
.divider--blue{color:#0039E2}

/* ---- spacing + width utilities ---- */
.mt-sm{margin-top:1rem}
.mt-md{margin-top:1.2rem}
.mt-16{margin-top:1.6rem}
.mt-lg{margin-top:1.8rem}
.mt-xl{margin-top:2rem}
.w-16{max-width:16ch}
.w-18{max-width:18ch}
.w-52{max-width:52ch}
.t-white{color:#fff}
.is-centered{justify-content:center}
.spon-head{text-align:center;margin-bottom:2.5rem}
.lede--center{margin:1.8rem auto 0;text-align:center}
.news-lede{margin-top:1rem;font-size:1.05rem}

.quote-mono{
  margin-top:2rem;font-family:var(--f-mono);font-size:.82rem;
  color:rgba(255,255,255,.75);line-height:1.7;
}
.quote-attr{
  letter-spacing:.13em;text-transform:uppercase;font-size:.66rem;
  color:rgba(255,255,255,.62);
}

.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

@media (max-width:900px){
  .brand__logo-ft{height:82px}
}

/* ---- 404 ---- */
.nf{display:grid;place-items:center;min-height:calc(100vh - 78px - 120px);
  padding-block:clamp(4rem,10vw,8rem);text-align:center}
.nf__in{display:grid;justify-items:center}
.nf .cta__btns{margin-top:2.6rem}
.nf__ghost{color:var(--blue)}
.nf__ghost:hover span{color:#fff}
.nf__act{margin-left:auto}
.nf__bot{border-top:none;padding-top:0}

/* ---- newsletter band sits directly above the footer in the same colour,
        so close the seam rather than stacking two full paddings ---- */
#newsletter{padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.ft{padding-top:clamp(2.5rem,4vw,3.5rem)}
.ft__top{border-top:1px solid rgba(255,255,255,.13);padding-top:clamp(2.5rem,4vw,3.5rem)}

/* ============================================================
   LIGHTER-BLUE PALETTE PASS
   The sections that were near-black navy are now #0026A6, so every
   accent that used to sit on near-black needs re-checking. The cane
   red reads at only 2.8:1 there; this is its tint for blue grounds.
   ============================================================ */
:root{ --cane-light:#FF9E8F; }

.park__meta b{color:var(--cane-light)}
.ft h5{color:rgba(255,255,255,.66)}
.ft__bot{color:rgba(255,255,255,.66)}

/* the same accent sits on the dark scrims over photographs */
.hero__desc .tag{
  color:var(--cane-light);
  background:rgba(255,158,143,.14);
  border-color:rgba(255,158,143,.45);
}
.fig__desc::before{color:var(--cane-light)}

/* A break that only applies where there is room for it: below 820px the
   column is too narrow for the split to help, and a forced break there
   just strands a word. */
.br-wide{display:none}
@media (min-width:821px){.br-wide{display:inline}}

/* keep an identifier from splitting across lines */
.nb{white-space:nowrap}


/* The 'what the grant carries' list is shorter than the copy beside it. Letting
   it stretch lines the last rule up with the bottom of the text column instead
   of leaving it hanging. */
.apply-head{align-items:stretch}
.apply-head>.rv:last-child{display:flex;flex-direction:column}
.apply-head .gets{flex:1;grid-auto-rows:1fr}
.apply-head .gets li{align-items:center}

/* The grant heading runs at the full display size like every other section
   headline, which needs a little more column than the default split to keep its
   three authored lines from re-wrapping. Guarded by min-width: an #id + class
   selector outranks the max-width:900px stacking rule, so an unguarded version
   would keep this section in two columns on a phone. */
@media (min-width:901px){
  #grant .grid-2{grid-template-columns:1.12fr .88fr;gap:clamp(2rem,3.6vw,3.5rem)}
}
/* Same slope and ceiling as .d--lg, so this headline matches every other
   section headline at desktop sizes; only the floor is a shade lower, so the
   three authored lines still hold on a 360px phone. */
#grant h2{font-size:clamp(2.05rem,5.2vw,4.3rem)}