/* ============================================================================
   INTERIOR PAGES — About, Research, Programs, Newsroom
   ============================================================================
   ONE stylesheet for all four, not a <style> block per page: the four pages are
   the same page with different content in it, and four copies of these rules
   would drift the moment one of them got adjusted (00-build-rules.md RULE 10).

   Everything here builds on shared/base.css. No colour is hard-coded — the
   interior pages retint with the palette exactly as the home page does, because
   they only ever reference semantic tokens.

   DESIGN NOTE. A broadsheet's inside pages are not its front page. The front
   page shouts: full-bleed photography, a carousel, alternating dark bands. The
   inside pages are for reading, so they are quieter by design — one measured
   column, generous leading, a page-head that states what the page is and gets
   out of the way. The identity stays present through the nib rule and the plum
   headings rather than through more furniture.
   ========================================================================= */

/* ---- page head ---------------------------------------------------------
   The interior counterpart to the home page's hero. A dark band, because that
   is what sits under the masthead on the home page too, so moving between
   pages does not change the rhythm at the top of the screen. */
.pagehead{position:relative}
/* margin-inline:0 is NOT optional. This class sits on the SAME element as .wrap,
   which supplies `max-width:var(--wrap)` AND `margin-inline:auto`. Overriding only
   the max-width leaves the auto margins in force, so the narrower box gets
   CENTRED in the viewport instead of aligning to the page's content column —
   which put the page-head headline 344px to the right of the masthead, the body
   copy, the giving band and the footer, all of which start at the wrap edge.
   The fix is structural, not a margin override: the measure now lives on a CHILD
   of .wrap, so it inherits the wrap's centring and gutter exactly like every other
   content column on the site, and cannot drift from them again. */
.pagehead__inner{max-width:760px}
.pagehead h1{
  font-family:var(--display);font-weight:700;font-size:var(--fs-h1);
  line-height:1.08;letter-spacing:-.012em;color:var(--on-dark);
  max-width:20ch;text-wrap:balance;margin:var(--s3) 0 var(--s4);
}
.pagehead__deck{
  font-family:var(--body);font-size:var(--fs-deck);line-height:1.55;
  color:var(--on-dark-muted);max-width:58ch;text-wrap:pretty;
}
.pagehead .nib-rule{margin-top:var(--s5)}

/* ---- in-page section navigation ---------------------------------------
   About carries four of the nine navigation labels as sections, so it needs its
   own contents strip: the dropdown deep-links land here, and the strip makes it
   obvious the sections are all on one page rather than four. */
.onpage{
  border-bottom:1px solid var(--hairline);
  background:var(--ground-alt);
  position:sticky;top:0;z-index:60;
}
.onpage ul{
  display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;
}
.onpage a{
  display:block;padding:var(--s4) var(--s5) calc(var(--s4) - 3px);
  font-family:var(--label);font-size:var(--fs-nav);font-weight:500;
  font-variation-settings:"wdth" 106;
  color:var(--on-light);border-bottom:3px solid transparent;
  transition:border-color var(--t-fast) ease,color var(--t-fast) ease;
}
.onpage a:first-child{padding-left:0}
.onpage a:hover{color:var(--identity);border-bottom-color:var(--accent-light)}
.onpage a:focus-visible{outline:3px solid var(--identity);outline-offset:-3px}
@media (max-width:599px){
  .onpage{position:static}
  .onpage a{padding-inline:var(--s3);font-size:.8125rem}
  .onpage a:first-child{padding-left:0}
}

/* the sticky strip must not hide a heading it just scrolled to */
.sec{scroll-margin-top:calc(var(--s8) + 56px)}

/* ---- reading column ----------------------------------------------------
   640px is the home page's article measure (.article__body). Interior prose
   uses the same one so body text is the same width across the whole site. */
.prose{max-width:640px}
.prose > p{
  font-family:var(--body);font-size:var(--fs-body);line-height:1.62;
  margin-bottom:var(--s5);text-wrap:pretty;
}
.prose > p:last-child{margin-bottom:0}
.prose h2,.sec__h{
  font-family:var(--display);font-weight:700;font-size:var(--fs-h2);
  line-height:1.14;letter-spacing:-.008em;color:var(--identity);
  max-width:24ch;text-wrap:balance;margin:0 0 var(--s4);
}
.sec + .sec{margin-top:var(--s9)}
.sec__lead{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5)}

/* ---- text beside a picture -------------------------------------------
   Used for Joe and Ruthie: the paragraphs are about two people, so a portrait
   belongs next to them rather than above them. Single column until there is
   genuinely room for two, so the photograph never becomes a thumbnail. */
.sidefig{display:grid;gap:var(--s6);align-items:start}
@media (min-width:900px){
  .sidefig{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s7)}
  .sidefig--left{grid-template-columns:340px minmax(0,1fr)}
  .sidefig--left .sidefig__text{order:2}
  .sidefig--left .sidefig__fig{order:1}
}
.sidefig__fig{margin:0}
.sidefig__fig figcaption{
  margin-top:var(--s3);font-family:var(--label);font-size:var(--fs-credit);
  letter-spacing:.04em;color:var(--on-light-muted);line-height:1.45;
}

/* ---- a slot waiting for a photograph ----------------------------------
   The client's document says "[Photo to come]" against four images. A grey box
   would read as a broken page, so the slot is the same plate gradient the home
   page's placeholder cards use, labelled for what it is. It is deliberately
   NOT an <img> with a missing file: nothing here 404s. */
.figslot{
  position:relative;display:grid;place-items:center;
  background:linear-gradient(118deg,
    var(--plate-1) 0%, var(--plate-2) 54%, var(--plate-3) 100%);
  aspect-ratio:4/5;overflow:hidden;
}
.figslot::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgb(var(--on-dark-rgb) / .10) 0 1px, transparent 1px 44px);
}
/* The label carries its OWN solid ground rather than sitting on the gradient,
   which is the same fix .card__ph b already uses in base.css for the same
   reason. On the gradient it measured 3.64:1 over the light end in Newsprint
   and 2.78:1 in Plum; on --band-dark-deep it is 15.17:1 and 14.08:1. */
.figslot span{
  position:relative;z-index:1;text-align:center;
  background:var(--band-dark-deep);color:var(--on-dark);
  padding:5px 9px;
  font-family:var(--label);font-size:var(--fs-credit);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.35;
}
.figslot--wide{aspect-ratio:16/9}

/* ---- leadership --------------------------------------------------------
   Three people, so a three-up on desktop. Each carries a portrait slot at the
   same 4/5 as the Hopkins portrait, so when the real photographs arrive they
   can all be shot and cropped to one ratio. */
/* Four people as of 2026-08-07. A three-column grid left the fourth stranded on
   its own row, so it is two-up from 640 and four-up once there is genuinely room
   — 1100px, not 1000, because four portraits plus a three-line role need it. */
.people{display:grid;gap:var(--s6);grid-template-columns:1fr;margin-top:var(--s6)}
/* minmax(0,1fr), not 1fr. A bare 1fr has an AUTO minimum, so a column whose
   content has a wide min-content — "Communications", "Goodlie-Brown" — grows and
   the others shrink. That made one portrait 318px against the others' 282 and
   dropped its name 36px below the rest of the row. minmax(0,…) forces the four
   columns genuinely equal, so every portrait matches and the names line up. */
@media (min-width:640px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.people{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}}
/* The roles are wildly uneven ("Director" vs "Director of Strategic
   Communications and Engagement"), but the names still line up on their own,
   because every portrait is the same width and carries the same aspect ratio.
   An earlier attempt made .person a grid with height:100% to force it — that
   STRETCHED the aspect-ratio box instead, rendering one portrait 318px against
   the others' 282 and pushing that name 36px down. The uneven roles simply leave
   the figures bottom-ragged, which is correct: the tops are what must align. */
.person{margin:0}
.person .figslot{aspect-ratio:4/5;margin-bottom:var(--s4)}
.person h3{
  font-family:var(--display);font-weight:700;font-size:var(--fs-card);
  line-height:1.2;color:var(--identity);margin:0 0 4px;
}
.person p{
  font-family:var(--label);font-size:var(--fs-eyebrow);font-weight:500;
  font-variation-settings:"wdth" 112;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-light);margin:0;
}

/* ---- a section with nothing in it yet ---------------------------------
   Three of the four pages the client sent read "Please check back for updates"
   and nothing else. That IS the content — it is a holding message they wrote,
   not a gap for us to fill — so it is set as a deliberate holding notice rather
   than padded out with invented copy. See the notes on those pages.

   Centred, because there is nothing to align it to, and given real vertical
   space so the page reads as finished-and-waiting rather than half-built. */
.holding{
  display:grid;place-items:center;text-align:center;
  padding-block:var(--s8);
}
.holding__inner{max-width:44ch}
/* margin-inline:auto, not text-align. .icon is display:block in base.css, so the
   inherited text-align:center does nothing to it and it sat at the left edge of
   the centred box instead of over the message. */
.holding .icon{
  width:46px;height:46px;color:var(--accent-light);
  margin:0 auto var(--s4);
}
.holding p{
  font-family:var(--display);font-weight:700;font-size:var(--fs-quote);
  line-height:1.2;color:var(--identity);margin:0;text-wrap:balance;
}
.holding__sub{
  font-family:var(--body)!important;font-size:var(--fs-excerpt)!important;
  font-weight:400!important;line-height:1.55!important;
  color:var(--on-light-muted)!important;margin-top:var(--s4)!important;
}
.holding .nib-rule{margin:var(--s5) auto 0}

/* ---- the closing giving band ------------------------------------------
   Every interior page ends by pointing at the one conversion path the client's
   own navigation proves they want. Quieter than the home page's giving band:
   one line and one button, not four pillars. */
.endgive{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5) var(--s7);
  justify-content:space-between}
.endgive__t{max-width:46ch}
.endgive h2{
  font-family:var(--display);font-weight:700;font-size:var(--fs-quote);
  line-height:1.16;color:var(--on-dark);margin:var(--s3) 0 0;text-wrap:balance;
}

/* ---- content that has not arrived yet ---------------------------------
   NOT .foot__slot. That class exists for the footer's dark ground and uses
   --on-dark-muted, which measures 1.9:1 on the cream grounds — reusing it here
   put unreadable text on a light band. This is its light-ground counterpart:
   --on-light-muted is 5.77:1 on cream in Newsprint and 5.81:1 in Plum.

   Set as a bordered notice rather than a stray dashed phrase, so an empty
   section reads as deliberately held open rather than forgotten. */
.tocome{
  border:1px dashed var(--hairline-strong);
  background:var(--ground-alt);
  padding:var(--s5) var(--s6);
  max-width:640px;
}
.tocome p{
  font-family:var(--label)!important;font-size:var(--fs-excerpt)!important;
  font-weight:500!important;line-height:1.5!important;
  color:var(--on-light-muted)!important;margin:0!important;
}
.tocome .tocome__what{
  display:block;font-family:var(--label);font-size:var(--fs-credit);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-light);margin-bottom:6px;
}