/* ============================================================
   Blind Travel Foundation — interior pages
   Loaded after style.css. Adds: the multi-level site nav,
   the interior page masthead, and long-form prose.
   ============================================================ */

/* ---------- navigation ----------------------------------------------
   One level, except Projects: the grant years are a real hierarchy worth
   keeping in the menu. The other sections list their own contents on the
   page, so they are plain links. */

.nav__item{position:relative}
.nav__top{
  display:inline-flex;align-items:center;gap:.32rem;
  background:none;border:0;cursor:pointer;font:inherit;font-family:var(--f-body);
  text-decoration:none;padding:.55rem .7rem;border-radius:10px;
  font-size:.94rem;font-weight:500;color:var(--ink);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav__top:hover,.nav__top[aria-expanded="true"]{background:var(--blue-wash);color:var(--blue-ink)}
.nav__item--here > .nav__top{color:var(--blue);font-weight:700}

.nav__caret{width:.5rem;height:.5rem;flex:none;transition:transform .2s var(--ease)}
.nav__caret path{stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav__top[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

.nav__panel{
  position:absolute;top:calc(100% + .5rem);left:0;
  min-width:14rem;padding:.5rem;list-style:none;margin:0;
  background:#fff;border:1px solid rgba(11,16,32,.1);border-radius:18px;
  box-shadow:0 18px 44px -18px rgba(11,16,32,.34);
  display:none;z-index:120;
}
.nav__panel[data-open]{display:block}
.nav__panel li{margin:0}
.nav__sep{border-top:1px solid rgba(11,16,32,.09);margin-top:.4rem;padding-top:.4rem}
.nav__panel a{
  display:block;padding:.5rem .75rem;border-radius:10px;
  text-decoration:none;font-size:.9rem;color:var(--ink);white-space:nowrap;
}
.nav__panel a:hover{background:var(--blue-wash);color:var(--blue-ink)}
.nav__panel a[aria-current="page"]{color:var(--blue);font-weight:700}

.nav__link{
  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__link:hover{background:var(--blue-wash);color:var(--blue-ink)}
.nav__link[aria-current="page"],.nav__link--here{color:var(--blue);font-weight:700}

@media (max-width:1199px){
  .nav__link{padding:.95rem .4rem;font-size:1.1rem;border-radius:0;
    border-bottom:1px solid rgba(11,16,32,.08)}
  .nav__item{width:100%}
  .nav__top{width:100%;justify-content:space-between;padding:.95rem .4rem;font-size:1.1rem;
    border-radius:0;border-bottom:1px solid rgba(11,16,32,.08)}
  .nav__panel{position:static;display:none;min-width:0;padding:.2rem 0 .6rem .8rem;
    border:0;border-left:2px solid var(--blue-wash);border-radius:0;box-shadow:none;
    background:none;margin:.2rem 0 .2rem .2rem}
  .nav__panel[data-open]{display:block}
  .nav__panel a{white-space:normal;font-size:1rem;padding:.5rem .55rem;border-bottom:0}
}

/* ---------- interior masthead ---------- */
.phead{
  background:var(--blue-pale);
  padding-block:clamp(2.4rem,6vw,4.6rem) clamp(2rem,4vw,3.2rem);
  border-bottom:1px solid rgba(11,16,32,.07);
}
.phead__in{width:var(--shell);margin-inline:auto}
.phead__t{max-width:22ch}
.phead__lead{
  /* Same measure as the reading column below it, so the masthead and the page
     share one edge. `ch` is relative to each element's own font-size and the
     standfirst is set slightly smaller than body copy, so 98ch here lands
     within a few px of the column's 96ch rather than short of it. */
  margin:1.2rem 0 0;max-width:98ch;
  font-size:clamp(1.06rem,1.3vw,1.3rem);
  line-height:1.55;color:var(--ink-60);
}
.phead__meta{
  /* the only masthead element that had no measure, so a long one ran the
     full 1280px shell while the standfirst above it stopped at 76ch */
  margin:1.2rem 0 0;max-width:96ch;font-family:var(--f-mono);font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink);
}

/* breadcrumb */
.crumbs{margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.crumbs li{display:flex;align-items:center;gap:.5rem;color:var(--ink-60)}
.crumbs li+li::before{content:"/";color:rgba(11,16,32,.3)}
.crumbs a{color:var(--blue-ink);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:currentColor}
.crumbs [aria-current="page"]{color:var(--ink-60)}

/* ---------- long-form prose ---------- */
.pbody{padding-block:clamp(2.6rem,6vw,4.6rem);width:var(--shell);margin-inline:auto}
/* The reading column starts where the page title starts — a centred
   column under a left-aligned masthead reads as two unrelated pages. */
.prose{width:min(96ch,100%)}
/* Several pages print bare URLs as link text; without this they push the
   whole page sideways on a phone. */
.prose{overflow-wrap:break-word}
.prose a{overflow-wrap:anywhere}

/* Grant-winner pages: the reading column is centred under the full-width photo.
   The masthead heading stays flush left, as it is on every other page.
   Both wrappers are covered so a page that carries a second `.psec` section
   (videos, sibling-project cards) keeps its text on the same centre line. */
.p-project .pbody > .prose,
.p-project .psec > .shell > .prose{margin-inline:auto}

/* Same centred column, asked for by name rather than inferred from the URL.
   `p-centered` is for the one-off page that reads as an article without
   living under /projects/. */
.p-centered .pbody > .prose,
.p-centered .psec > .shell > .prose{margin-inline:auto}

.prose > *+*{margin-top:1.15em}
.prose p{margin:0;line-height:1.72}
/* `.prose p` and `.prose ul/ol` out-rank `.prose > *+*` (an element name beats
   a universal), so their `margin:0` was silently killing the flow spacing and
   every paragraph ran straight into the next. Naming the elements here puts the
   rule back on equal specificity, later in the file, so it wins. The gap is
   bigger than 1.15em because the body line-height is 1.72 — a break has to be
   clearly larger than the space between two lines to read as a break at all. */
.prose * + p{margin-top:1.5em}
.prose h2{
  font-family:var(--f-display);font-variation-settings:"wdth" 108;font-weight:700;
  font-size:clamp(1.55rem,2.6vw,2.2rem);line-height:1.12;letter-spacing:-.015em;
  margin:2.4em 0 0;text-wrap:balance;
}
.prose h3{
  font-family:var(--f-display);font-variation-settings:"wdth" 104;font-weight:700;
  font-size:clamp(1.16rem,1.6vw,1.4rem);line-height:1.2;
  margin:1.9em 0 0;text-wrap:balance;
}
.prose h4{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--blue-ink);margin:1.9em 0 0;
}
.prose h2+p,.prose h3+p,.prose h4+p,.prose h2+ul,.prose h3+ul{margin-top:.7em}

.prose a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1.5px;text-decoration-color:rgba(0,38,166,.35)}
.prose a:hover{text-decoration-color:currentColor}

.prose ul,.prose ol{margin:0;padding-left:1.35rem}
/* Same trap as the paragraphs: the reset above out-ranks the flow rule, so a
   list welded itself to whatever came before it. Smaller than the paragraph
   gap, because a list is usually introduced by the sentence above it. */
.prose * + ul,
.prose * + ol{margin-top:1.1em}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--blue)}

.prose blockquote{
  margin:2em 0;padding:.2rem 0 .2rem 1.5rem;
  border-left:3px solid var(--cane);
  font-size:1.1em;line-height:1.55;color:var(--ink);
}
.prose blockquote p+p{margin-top:.8em}
.prose cite{display:block;margin-top:.7em;font-style:normal;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}

.prose hr{border:0;border-top:1px solid rgba(11,16,32,.13);margin:2.6em 0}

.prose figure{margin:2.2em 0}
/* Landscape and square photographs fill the reading column, so they match the
   width of the photograph at the top of the page. Leaving `width` to the tag's
   own attribute means an image smaller than the column renders at its true size
   rather than being upscaled — `max-width` does the capping.
   Portraits keep the height cap, or a 743x1400 headshot runs for two screens;
   buildpages.py adds `.is-tall`, since CSS cannot read an image's ratio. */
.prose figure img{max-width:100%;height:auto;
  margin-inline:auto;border-radius:var(--r);display:block}
.prose figure img.is-tall{width:auto;max-height:32rem}
.prose figcaption{
  margin-top:.75rem;font-size:.87rem;line-height:1.5;color:var(--ink-60);
}
.prose .fig{margin:2.2em 0}
.prose .fig img{width:100%}

/* A portrait set into the text rather than sitting above it: the picture holds
   the left edge of the column and the paragraphs run down its right side, the
   way a magazine sets a headshot beside the opening of a profile. The height
   cap `.is-tall` puts on a full-width portrait is dropped — inside a column
   this narrow the width is already the limit. Below the breakpoint there is no
   room for two columns of anything, so it goes back to a plain full-width
   figure. */
.prose figure.fig--inset{
  float:left;width:min(15rem,40%);
  /* The heading below clears the float, and clearance swallows that heading's
     own `margin-top`. So the gap has to come from here instead, and it is the
     h2 rule's `2.4em` resolved against the same clamped h2 font size — that
     way the picture parts from the next section on exactly the rhythm every
     other heading on the page keeps. */
  margin:.4em 1.7rem clamp(3.72rem,6.24vw,5.28rem) 0;
}
.prose figure.fig--inset img,
.prose figure.fig--inset img.is-tall{width:100%;max-height:none}
/* Pairs with the float above: a heading always starts a fresh block rather
   than tucking into the gap beside the picture. A no-op on every page that
   floats nothing. */
.prose h2{clear:left}
@media (max-width:34rem){
  .prose figure.fig--inset{float:none;width:auto;margin:2.2em 0}
  /* back to a plain figure, height cap and all — without restoring the cap a
     743x1400 headshot runs for two screens, which is what `.is-tall` exists
     to prevent. */
  .prose figure.fig--inset img,
  .prose figure.fig--inset img.is-tall{width:auto;max-height:32rem}
}

.prose table{width:100%;border-collapse:collapse;font-size:.94rem}
.prose thead th{
  text-align:left;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-ink);padding:.65rem .8rem;
  border-bottom:2px solid var(--blue-wash);
}
.prose td{padding:.7rem .8rem;border-bottom:1px solid rgba(11,16,32,.09);vertical-align:top}
.prose .tablewrap{overflow-x:auto;margin:2em 0}

.prose code{font-family:var(--f-mono);font-size:.88em;background:var(--blue-wash);
  padding:.12em .4em;border-radius:6px}

/* a pull-out box for eligibility rules, deadlines, notes */
.note{
  background:var(--blue-wash);border-radius:var(--r);
  padding:clamp(1.3rem,3vw,2rem);margin:2.2em 0;
}
.note > *+*{margin-top:.8em}
/* ...and again here: `.prose p{margin:0}` out-ranks the rule above, so the
   element has to be named for a note box to keep its tighter inner spacing. */
.note > * + p,
.note > * + ul,
.note > * + ol{margin-top:.8em}
/* A sub-heading inside a note opens a new block and needs clear air above it.
   `.note h3` out-ranks `.prose h3`, so a flat `margin-top:0` here welded every
   heading after the first to the line above while the list it introduced kept
   its own gap — the two spacings then read as unequal. Both cases are spelled
   out: air above a heading, none above the first child, and a tight gap down to
   the list or paragraph the heading introduces, so each group reads as one unit. */
.note h3,.note h4{margin-top:1.7em}
.note > :first-child,
.note > h3:first-child,
.note > h4:first-child{margin-top:0}
.note h3 + p,.note h3 + ul,.note h3 + ol,
.note h4 + p,.note h4 + ul,.note h4 + ol{margin-top:.65em}
.note li+li{margin-top:.5em}
.note--cane{background:#FFF1EE;border-left:4px solid var(--cane)}

/* The masthead's own padding already frames the top of the reading column;
   the first block's margin on top of that opened a band of dead space before
   the page started. */
.prose > :first-child{margin-top:0}

/* The home page's date grid (`.dates`, style.css) reused inside prose.
   `.prose * + p` names an element, so it out-ranks `.date__t{margin:0}` and
   would drop every line 1.5em below its own date label. */
/* On the apply page this grid is the page's spine, not one card among many, so
   it differs from the home page's copy in two ways. One column: a schedule
   reads top to bottom, and two columns made the order ambiguous — you cannot
   tell whether the next entry is to the right or below. And blue rather than
   the home page's cane red, which there is an accent and here would be the
   loudest thing on the page.
   `.prose * + p` names an element, so it out-ranks `.date__t{margin:0}` and
   would drop every line 1.5em below its own date label. */
.prose .dates{
  margin:1.6em 0 2.4em;
  grid-template-columns:1fr;
  background:rgba(0,57,226,.16);
  border-color:rgba(0,57,226,.16);
}
/* Nine stacked rows, each only two short lines: the home page's cell padding
   is sized for a 2x4 block and leaves this one over-tall. */
.prose .date{padding:1.15rem 1.4rem}
.prose .date__t{margin:0}
.prose .date__d{margin-bottom:.35rem;color:var(--blue)}

/* ---------- numbered question list -----------------------------------
   The application questions arrived as fifteen identical bold paragraphs:
   the question, its helper text and its character limit all carried the same
   weight, so nothing told a reader where one question ended and the next
   began. Splitting them into numbered cards puts each question on its own
   footing and demotes the limits to chips, which is also what makes the page
   usable as the drafting checklist it is meant to be.

   `.prose ol`, `.prose li+li` and `.prose h3` all name an element, so a bare
   class would lose to them — hence the doubled-up selectors below. */
.qs{margin:1.5em 0 0;counter-reset:qnum}
.qs p{margin:0}
.qs__grp + .qs__grp{margin-top:2.1rem}
.qs .qs__gh{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--blue-ink);margin:0 0 .9rem;
}

.qs ol.qs__list{list-style:none;margin:0;padding:0}
.qs li.q{
  position:relative;background:#fff;border:1px solid rgba(11,16,32,.1);
  border-radius:18px;padding:1.15rem 1.35rem 1.15rem 4rem;
}
.qs li.q + li.q{margin-top:.7rem}
.qs li.q::before{
  counter-increment:qnum;content:counter(qnum);
  position:absolute;left:1.2rem;top:1.15rem;
  width:1.9rem;height:1.9rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-wash);color:var(--blue-ink);
  font-family:var(--f-mono);font-size:.82rem;font-weight:600;line-height:1;
}

.qs .q__t{font-weight:600;font-size:1.04rem;line-height:1.5}
.qs .q__h{margin-top:.42rem;font-size:.95rem;line-height:1.55;color:var(--ink-60)}
/* The limit and the optional flag ride at the end of the question in brackets.
   Dropping them to the secondary weight and colour keeps them legible as a note
   *on* the question rather than as part of the question itself, and `nowrap`
   stops "(Max 1500 characters)" splitting across two lines. */
.qs .q__lim{font-weight:500;color:var(--ink-60);white-space:nowrap}

/* The closing statements are terms to agree to, not questions — so they sit
   outside the numbering. */
.qs .qs__ack{
  margin-top:1.9rem;background:var(--blue-wash);border-radius:var(--r);
  padding:clamp(1.2rem,3vw,1.8rem);
}
.qs .qs__ackh{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--blue-ink);margin:0 0 .8rem;
}
.qs .qs__ack p + p{margin-top:.8rem}

@media (max-width:520px){
  .qs li.q{padding:1rem 1.05rem 1.05rem 3.5rem}
  .qs li.q::before{left:.95rem;top:1rem;width:1.75rem;height:1.75rem;font-size:.78rem}
}

/* ---------- child / sibling page cards ---------- */
.plist{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
}
.pcard{
  display:flex;flex-direction:column;gap:.55rem;height:100%;
  background:#fff;border:1px solid rgba(11,16,32,.1);border-radius:var(--r);
  padding:1.5rem;text-decoration:none;color:inherit;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.pcard:hover{transform:translateY(-3px);border-color:var(--blue);
  box-shadow:0 18px 40px -22px rgba(0,57,226,.5)}
.pcard__k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue)}
.pcard__t{font-family:var(--f-display);font-variation-settings:"wdth" 104;font-weight:700;
  font-size:1.2rem;line-height:1.18;margin:0;letter-spacing:-.01em}
.pcard__d{margin:0;font-size:.94rem;line-height:1.55;color:var(--ink-60)}
.pcard__fig{aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--blue-wash);margin:-.4rem 0 .3rem}
.pcard__fig img{width:100%;height:100%;object-fit:cover}

.psec{padding-block:clamp(2.6rem,6vw,4.4rem)}
.psec__h{margin:0 0 1.8rem}

/* ---------- previous / next ---------- */
.pnav{
  width:var(--shell);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  padding-block:2.5rem;border-top:1px solid rgba(11,16,32,.1);
}
.pnav a{
  text-decoration:none;display:flex;flex-direction:column;gap:.2rem;max-width:26rem;
}
.pnav span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-60)}
.pnav b{font-weight:600;color:var(--blue-ink)}
.pnav a:hover b{text-decoration:underline}
.pnav a:last-child{text-align:right;align-items:flex-end}

/* ---------- embeds ---------- */
.embed{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--blue-deep);margin:2.2em 0}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed--audio{aspect-ratio:auto;height:auto;background:none}
.embed--audio iframe{position:static;height:200px}

/* an offsite link we cannot embed under our own content policy */
.offsite{
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;
  background:#fff;border:1px solid rgba(11,16,32,.12);border-radius:18px;
  padding:1.1rem 1.3rem;margin:1.1em 0;text-decoration:none;color:inherit;
}
.offsite:hover{border-color:var(--blue)}
.offsite b{font-weight:600;flex:1 1 16rem}
.offsite span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue)}

/* ---------- home page project cards now lead somewhere ----------
   The title carries the link; a stretched pseudo-element makes the
   whole card clickable without giving screen readers twelve
   identical "read more" links. The Describe badge is lifted above
   it so a photograph's description is still reachable. */
.card{position:relative}
.card__t a{color:inherit;text-decoration:none}
.card__t a::after{content:"";position:absolute;inset:0;border-radius:var(--r);z-index:1}
.card__t a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.card:focus-within{outline:3px solid var(--cane);outline-offset:3px}
.card__t a:focus-visible{outline:none}
.card .fig__desc,.card__yr{z-index:3}

/* ---------- forms ----------------------------------------------
   None of these post anywhere in a static build; the shared
   handler in main.js says so out loud on submit. */
.field{display:block;margin-top:1rem}
.field:first-of-type{margin-top:0}
.field > span{
  display:block;margin-bottom:.35rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--blue-ink);
}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid rgba(11,16,32,.22);
  border-radius:12px;padding:.75rem .9rem;
}
.field textarea{min-height:9rem;resize:vertical}
.field input:hover,.field textarea:hover{border-color:rgba(11,16,32,.4)}
.field input:focus,.field textarea:focus{border-color:var(--blue);outline-offset:1px}
form .btn{margin-top:1.2rem}
[data-formnote]{margin-top:1rem;font-size:.94rem;color:var(--blue-ink);min-height:1.5rem}
[data-formnote]:empty{margin-top:0;min-height:0}

/* a plain dated list — lighter than a grid of cards for archives */
.dated{list-style:none;margin:0;padding:0}
.dated li{
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid rgba(11,16,32,.1);
}
.dated time,.dated .dated__k{
  flex:none;min-width:9rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-60);
}
.dated a{color:var(--blue-ink);text-decoration:none;font-weight:600}
.dated a:hover{text-decoration:underline}

/* ---------- home page: latest ---------- */
.latest{display:grid;gap:clamp(1.6rem,4vw,3rem);margin-top:2.4rem;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.latest{grid-template-columns:1fr}}
.latest__lead .embed{margin:0 0 1.4rem}
.latest__lead h3{margin:0 0 .6rem}
.latest__lead p{margin:0;color:var(--ink-60);line-height:1.65}
.latest__lead a{color:var(--blue-ink)}
.latest__list{list-style:none;margin:0;padding:0}
.latest__list li{padding:1.4rem 0;border-top:1px solid rgba(11,16,32,.12)}
.latest__list li:first-child{padding-top:0;border-top:0}
.latest__list p{margin:0;color:var(--ink-60);line-height:1.6;font-size:.98rem}
.latest__k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue)}
.latest__t{font-family:var(--f-display);font-variation-settings:"wdth" 104;font-weight:700;
  font-size:1.22rem;line-height:1.18;letter-spacing:-.01em;margin:.4rem 0 .5rem}
.latest__t a{color:inherit;text-decoration:none}
.latest__t a:hover{text-decoration:underline;text-underline-offset:.14em}

/* ---------- logo grids ------------------------------------------
   Sponsor and partner marks arrive at wildly different aspect
   ratios — a 4346x1358 wordmark next to a 1000x1000 square. The
   cell is fixed and the mark is contained inside it, so the grid
   stays even however the source files were exported. */
.logos{list-style:none;margin:2.2em 0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr))}
.logos li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  background:#fff;border:1px solid rgba(11,16,32,.1);border-radius:18px;
  padding:1.3rem;min-height:8rem;text-align:center}
.logos img,.prose .logos img{width:auto;max-width:100%;max-height:4.4rem;
  height:auto;object-fit:contain;border-radius:0}
.logos a{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:.7rem}

/* `logos--marks` is the grid holding the official artwork: every file is the
   real mark, horizontal and on transparency. Containing them in a fixed cell
   is not enough on its own — contained, a 5.5:1 wordmark and a 1.6:1 square
   both touch an edge and then read at wildly different weights. So the height
   comes from the same optical table the home-page marquee uses (`.spon--*` in
   style.css, one ratio per mark), and the cell is wide enough that the widest
   wordmark reaches that height before `max-width` can claw it back. */
/* Three to a row, fixed rather than auto-filled: the tiers hold six, two and
   one, and auto-fill sized each row to its own count, so a card under Gold
   came out wider than a card under Bronze. Three tracks give every mark the
   same cell whatever the tier holds — and six Bronze sponsors fall as two
   clean rows instead of 4 + 2. */
.logos--marks{--lh:clamp(40px,4.6vw,62px);
  grid-template-columns:repeat(3,minmax(0,1fr))}
/* /about/support/ lists four sponsors, which at three across strands the
   fourth on a row of its own. Two tracks pair them instead. */
.logos--marks.logos--duo{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.logos--marks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){
  .logos--marks,
  .logos--marks.logos--duo{grid-template-columns:minmax(0,1fr)}
}
.logos--marks li{padding:1rem;min-height:9rem}
/* `width:auto` with an explicit height means a mark too wide for its cell gets
   its width clamped by `.logos img{max-width:100%}` while the height stays put
   — i.e. squashed. Giving the image the full cell and letting object-fit do the
   scaling makes that impossible, and lets a long wordmark use the whole width. */
.logos--marks img,.prose .logos--marks img{
  width:100%;height:var(--h);max-width:100%;max-height:none;
  object-fit:contain;object-position:center;
}
.logos span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-60)}
/* a mark exported white-on-transparent needs a dark cell to exist at all */
.logos li.is-reversed{background:var(--blue-deep);border-color:var(--blue-deep)}
.logos li.is-reversed span{color:rgba(255,255,255,.72)}

/* ---------- small portraits ------------------------------------
   The board portraits are 150px square originals. Upscaling them
   into a wide card crop makes them blurry and cuts off heads. */
.prose .portrait{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 0 1.3rem}
.pcard__fig--portrait{aspect-ratio:1;max-width:8.5rem;border-radius:50%;margin:0 auto .4rem}

/* schedule tables: never break a time across two lines */
.prose td:first-child,.prose th:first-child{white-space:nowrap}

/* a logo sitting inside a card: fixed cell, contained mark, so a
   755x232 wordmark and a 401x399 square read as the same weight */
.pcard__logo{display:flex;align-items:center;justify-content:center;
  min-height:6.5rem;margin:-.2rem 0 .7rem;padding:1.1rem;
  background:var(--blue-wash);border-radius:16px}
.pcard__logo img{width:auto;max-width:100%;max-height:4rem;height:auto;object-fit:contain}
/* a mark exported white-on-transparent needs a dark cell to be visible */
.pcard__logo.is-reversed{background:var(--blue-deep)}
/* cards that are not links should not pretend to lift on hover */
li.pcard:hover{transform:none;border-color:rgba(11,16,32,.1);box-shadow:none}

/* ---------- a photograph directly under the masthead ---------- */
.pbanner{padding-block:clamp(1.8rem,4vw,3rem) 0}
.pbanner figure{margin:0}
/* Every grant-winner page opens on the same photograph shape, so the pages
   line up when you move between them. Source files are 1200x750 apart from
   Marybai and Eliana's, where the joint photograph the foundation holds is
   only 755x425 — object-fit makes it render at the same size as the rest. */
.pbanner img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;
  border-radius:var(--r);display:block}

/* On a grant-winner page the photograph is set to the same measure as the
   prose, so the page reads as one column from the top down. `96ch` is what
   `.prose` uses and resolves the same here, both being body-font contexts;
   `--shell` caps it so narrow viewports still go edge to edge.
   The projects hub opts out — its group photograph is a full-width opener. */
.p-project .pbanner:not(.pbanner--wide) > .shell{width:min(96ch,var(--shell))}
.pbanner + .psec{padding-top:clamp(1.8rem,4vw,3rem)}

/* /projects/ — the full grid with the year filter, as on the home page.
   The filter chips carry the top margin, so the banner does not need one too. */
.psec .filters{margin:0 0 2.2rem}
.psec__years{
  margin:2.6rem 0 0;font-size:.95rem;line-height:1.6;color:var(--ink-60);
  max-width:62ch;
}
.psec__years a{font-weight:600;color:var(--blue-ink)}

/* Every grant-winner page closes on the same link back to its year, set
   smaller than a primary button — it is a way back, not a call to action. */
.pfoot{margin-top:2.6em!important}
.pfoot .btn{font-size:.82rem;padding:.5rem 1.05rem;border-width:1.5px}

/* "Learn more about the other <year> Grant Winners" — a way onward, not a
   headline, so it is set well below the page's own h2 scale. */
.psec__h--sib{font-size:clamp(1.15rem,1.7vw,1.42rem)!important;
  font-variation-settings:"wdth" 104!important;letter-spacing:-.005em}

/* A button inside prose was losing its colour to `.prose a`, which is the
   more specific selector — white label on blue became blue on blue. */
.prose .btn{text-decoration:none}
.prose .btn--blue,.prose .btn--cane{color:#fff}
.prose .btn--white{color:var(--blue-ink)}
.prose .btn--ghost{color:inherit}

/* One Donate button, always the round one in the top right. The base
   stylesheet hides it once the nav collapses to the drawer; it stays. */
@media (max-width:1199px){
  .hdr__act .btn{display:inline-flex}
}
@media (max-width:620px){
  .hdr__in{gap:.6rem}
  .hdr__act{gap:.45rem}
  .hdr__act .btn{padding:.6rem 1rem;font-size:.85rem}
}

/* ---------- photo cards ------------------------------------------
   Every card image is a purpose-made 16:10 crop in assets/img/cards,
   so the grid never has to cope with a portrait file. */
.plist--cards{gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr))}
.pcard--photo{padding:0;overflow:hidden}
.pcard--photo .pcard__fig{
  display:block;aspect-ratio:16/10;background:var(--blue-wash);
  border-radius:0;margin:0;overflow:hidden;
}
.pcard--photo .pcard__fig img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.pcard--photo:hover .pcard__fig img{transform:scale(1.04)}
.pcard--photo .pcard__k{padding:1.3rem 1.4rem 0}
.pcard--photo .pcard__t{padding:0 1.4rem}
.pcard--photo .pcard__d{padding:0 1.4rem 1.5rem}
/* The bottom padding used to live only on `.pcard__d`, so a card with no
   description — every one of Brian Fischler's dispatches — had its title
   sitting hard against the card edge. Put it on whatever ends the card. */
.pcard--photo > :last-child{padding-bottom:1.5rem}
@media (prefers-reduced-motion:reduce){
  .pcard--photo .pcard__fig img{transition:none}
  .pcard--photo:hover .pcard__fig img{transform:none}
}

.psec__lede{margin:-.9rem 0 1.8rem;max-width:60ch;color:var(--ink-60);
  font-size:1.05rem;line-height:1.6}
.psec__more{margin:1.7rem 0 0;font-family:var(--f-mono);font-size:.74rem;
  letter-spacing:.11em;text-transform:uppercase}
.psec__more a{color:var(--blue-ink);text-decoration:none;
  border-bottom:1.5px solid rgba(0,38,166,.35);padding-bottom:.15rem}
.psec__more a:hover{border-bottom-color:currentColor}
.psec .btn+.btn{margin-left:.6rem}

/* ============================================================
   FOOTER NEWSLETTER
   The sign-up used to be two near-identical pages (/sign-up/ and
   /signup/) that nothing linked to except the menu. It is now one
   form, in the footer, on every page — so it is never more than a
   scroll away and there is nothing to navigate to.
   ============================================================ */
.ft__nl{
  display:grid;grid-template-columns:minmax(0,35rem) 1fr;gap:2rem clamp(2rem,5vw,4rem);
  align-items:start;padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
.ft__nl-h{
  font-family:var(--f-display,inherit);font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.15;letter-spacing:-.02em;margin:0;color:#fff;
}
.ft__nl-d{color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.6;margin:.7rem 0 0}

.nl__lab{
  display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:.6rem;
}
.nl__row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
/* A <button> does not stretch in a flex row the way a div would, so without
   this it settled against the bottom of the taller input instead of its centre. */
.nl__in{
  flex:1 1 15rem;min-width:0;font:inherit;font-size:1rem;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  border-radius:12px;padding:.8rem 1rem;
}
.nl__in::placeholder{color:rgba(255,255,255,.45)}
.nl__in:focus-visible{outline:3px solid var(--cane-light,#FF9E8F);outline-offset:2px}
/* `form .btn{margin-top:1.2rem}` is for the stacked contact form, where the
   submit sits below the fields. Here the button sits beside the input, so
   that margin only pushed it off the input's centre line. */
.nl__row .btn{flex:0 0 auto;margin-top:0}
.nl__note{color:rgba(255,255,255,.82);font-size:.92rem;line-height:1.55;margin:.8rem 0 0}
.nl__note:empty{margin:0}

@media (max-width:1040px){
  .ft__nl{grid-template-columns:1fr;gap:1.4rem}
}

/* Four cards in a three-up grid leaves one stranded on its own row.
   Where a set is exactly four, pair them. */
.plist--duo{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.plist--duo{grid-template-columns:1fr}}

/* /apply/questions/ and /resources/travel-tips/ each carried their own lede
   and paragraph widths for a while, to pull a sentence onto one line. The
   site-wide 76ch and 96ch above clear both, so the one-offs are gone and
   neither page needs a body class any more. */

/* ---------- sponsor cells: the mark in the card, the copy beneath ------
   A wall of logos tells you who paid but not who they are, so each sponsor
   now carries one line about the company and the mark links to them.

   The white card frames the mark and only the mark. So the cell stops being
   the card: the link takes the chrome and the sentence sits outside it, on
   the page ground. Giving the card a fixed floor also puts every mark on the
   same baseline, which a caption-bearing cell would otherwise lose — grid
   rows stretch to their tallest cell, so a neighbour's longer sentence would
   drag this one's logo down with it. */
.logos--described li{
  background:none;border:0;border-radius:0;padding:0;min-height:0;
  justify-content:flex-start;gap:.85rem;
}
.logos--described .logos__card{
  width:100%;min-height:9rem;padding:1rem;
  background:#fff;border:1px solid rgba(11,16,32,.1);border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.logos--described .logos__card:hover{
  border-color:rgba(11,16,32,.22);box-shadow:0 2px 10px rgba(11,16,32,.06);
}
.logos--described .logos__d,
.prose .logos--described .logos__d{
  margin:0;font-size:.85rem;line-height:1.5;color:var(--ink-60);text-wrap:pretty;
}
/* `.prose li+li{margin-top:.5em}` is written for a bulleted list in the copy.
   A logo grid is also a <ul>, so it inherited that rule on every cell except
   the first — leaving the first mark in each list sitting half a line above
   its own row. Predates the captions; visible on any .logos grid in prose. */
.prose .logos li{margin-top:0}

/* ---------- the board, all on one page -------------------------------
   Five bios that used to be five pages. Each keeps its own anchor so the
   old per-person URLs still land on the right person.

   Instead of a plain circle each portrait sits in an organic bubble, a
   lopsided ellipse built from eight radii — one silhouette per person, so
   no two neighbours match. The side alternates down the page.

   `--bub` is 180px because the source files are 150px square, in the built
   asset and in content/imgraw alike: there is no larger original to draw
   on. 180 is about as far as they stretch before the softening shows. If
   better photographs turn up, raise this one value. */
.prose .board{list-style:none;margin:2em 0 0;padding:0;display:grid;gap:0}
.prose .board li{margin-top:0}
.board__m{
  --bub:180px;
  display:grid;grid-template-columns:var(--bub) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.6rem);align-items:start;
}
/* every other portrait crosses to the right. The markup keeps one order —
   portrait, then name and bio — so a screen reader and a phone both read
   each person the same way regardless of which side the photo is on. */
.board__m:nth-child(even){grid-template-columns:minmax(0,1fr) var(--bub)}
.board__m:nth-child(even) > .board__fig{grid-column:2;grid-row:1}
.board__m:nth-child(even) > .board__b{grid-column:1;grid-row:1}
/* Space on BOTH sides of the rule, and as padding rather than margin: the
   `.prose .board li{margin-top:0}` above names an element as well as its
   classes, so it beat a margin here and the rule sat flush against the last
   line of each bio. Padding is uncontested. */
.prose .board__m:not(:last-child){padding-bottom:clamp(2.4rem,4vw,3.4rem)}
.prose .board__m + .board__m{
  padding-top:clamp(2.4rem,4vw,3.4rem);
  border-top:1px solid rgba(11,16,32,.12);
}
/* `.prose figure` names an element as well as a class, so it out-ranks a bare
   `.board__fig` and its 1.9em margin pushed every portrait below its own name. */
.prose .board__fig{
  margin:0;width:var(--bub);height:var(--bub);overflow:hidden;flex:none;
  background:var(--blue-wash);
  border-radius:68% 32% 41% 59% / 34% 56% 44% 66%;
}
.prose .board__m:nth-child(2) .board__fig{border-radius:36% 64% 67% 33% / 62% 33% 67% 38%}
.prose .board__m:nth-child(3) .board__fig{border-radius:63% 37% 31% 69% / 30% 65% 35% 70%}
.prose .board__m:nth-child(4) .board__fig{border-radius:33% 67% 58% 42% / 66% 40% 60% 34%}
.prose .board__m:nth-child(5) .board__fig{border-radius:59% 41% 68% 32% / 37% 63% 37% 63%}
/* No hover morph and no transition on the radius: a one-second ease meant the
   shapes visibly reshaped whenever the pointer crossed them during a scroll,
   which read as the page still settling. The silhouettes are fixed now. */
.prose .board__fig img{
  width:100%;height:100%;object-fit:cover;border-radius:0;margin:0;display:block;
}
.prose .board__n{margin:0;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2}
.prose .board__r{
  margin:.4rem 0 0;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--blue-ink);
}
.prose .board__b > p + p{margin-top:1.1em}
.prose .board__b > .board__r + p{margin-top:1.2em}

@media (max-width:620px){
  /* One column — and the alternating rows have to give up their explicit
     placement with it. `grid-column:2` against a single-column template
     conjures an implicit second column, which squeezed every other bio
     into a 160px strip on a phone. */
  .board__m,
  .board__m:nth-child(even){grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .board__m:nth-child(even) > .board__fig{grid-column:1;grid-row:1}
  .board__m:nth-child(even) > .board__b{grid-column:1;grid-row:2}
}

/* ---------- with thanks: the board's bubble, at half the size ---------
   Same organic frame as .board__fig so the two pages read as one hand, and
   one person per row like the board — just a smaller bubble, since these
   are short acknowledgements rather than full bios. */
.prose .folk{
  list-style:none;margin:1.8em 0 0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,2.6vw,2.1rem);
}
.prose .folk li{margin-top:0}
/* the bubble takes a quarter of the row and squares itself off, rather than
   sitting at a fixed pixel size, so it holds that quarter as the column moves */
.folk__m{
  display:grid;grid-template-columns:clamp(150px,26%,320px) minmax(0,1fr);
  gap:clamp(1.3rem,2.4vw,2rem);align-items:start;
}
.prose .folk__fig{
  margin:0;width:100%;aspect-ratio:1;overflow:hidden;
  background:var(--blue-wash);
  border-radius:66% 34% 39% 61% / 36% 58% 42% 64%;
}
.prose .folk__m:nth-child(2) .folk__fig{border-radius:35% 65% 64% 36% / 61% 34% 66% 39%}
.prose .folk__m:nth-child(3) .folk__fig{border-radius:61% 39% 33% 67% / 32% 63% 37% 68%}
.prose .folk__m:nth-child(4) .folk__fig{border-radius:34% 66% 60% 40% / 65% 38% 62% 35%}
.prose .folk__m:nth-child(5) .folk__fig{border-radius:57% 43% 66% 34% / 39% 61% 39% 61%}

.prose .folk__fig img{
  width:100%;height:100%;object-fit:cover;border-radius:0;margin:0;display:block;max-width:none;
}
/* both were set smaller than the surrounding page. Dropping the overrides
   lets the name take `.prose h3` and the thanks take `.prose p`, so this
   section reads at the same size as everything around it. */
.prose .folk__n{margin:0}
.prose .folk__d{margin:.7rem 0 0}

@media (max-width:520px){
  .folk__m{grid-template-columns:clamp(96px,28%,130px) minmax(0,1fr);gap:1rem}
}

/* ---------- FAQ ------------------------------------------------------
   Nineteen questions in a row, each an h2 at the page-section size, made
   the list read as nineteen sections rather than one list. Smaller type
   here only: the questions still lead, but at a scale that suits a run of
   short question-and-answer pairs. */
.p-faq .prose h2{
  font-size:clamp(1.2rem,1.85vw,1.6rem);line-height:1.25;
  margin-top:2.1em;
}
/* `em`, not `rem`: body copy here is 19px but the root is 16, so .94rem
   would have dropped the answers to 15px rather than trimming them. */
.p-faq .prose p{font-size:.94em;line-height:1.68}
.p-faq .prose h2 + p{margin-top:.55em}

/* The contact form runs the full reading column, but a name box the width of a
   paragraph looks like a mistake — so the short fields pair up two to a row and
   only the message and the controls span the whole width. */
.form--grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.15rem 1.5rem;align-items:start;
}
/* the gap does the spacing here, so the component's own stacking margin goes */
.form--grid > .field{margin-top:0}
/* anything that is not a paired field takes the full row */
.form--grid > .field--wide,
.form--grid > p{grid-column:1 / -1}
.form--grid > p{margin:0}
@media (max-width:640px){
  .form--grid{grid-template-columns:minmax(0,1fr)}
  .form--grid > .field{grid-column:1 / -1}
}