/* ==========================================================================
   joostvandebrake.com — homepage
   Replaces the inline <style> block in index.html.
   Requires tokens.css and base.css to be loaded first.

   Every selector from the previous stylesheet is preserved, so no HTML has to
   change for the styling alone. The separate patch file adds the mobile
   navigation, the skip-link target, and the real hrefs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: min(var(--content), calc(100% - (2 * var(--page-pad))));
  margin-inline: auto;
}

.sec {
  padding: var(--sp-section) var(--page-pad);
  background: var(--white);
}

.sec.alt {
  background: var(--warm-50);
}

.sec-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */

.eye {
  margin-bottom: var(--sp-2);
  color: var(--red);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.h1 {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}

.h2 {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
}

.h3 {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}

/* Was font-weight 300 in mid-grey. Light weight at this size was the main
   source of the "hard to read" feeling on the homepage. */
.lead {
  max-width: var(--measure);
  color: var(--ink-600);
  font-size: var(--t-md);
  font-weight: var(--w-regular);
  line-height: var(--lh-loose);
}

.tag {
  display: inline-flex;
  padding: 2px 9px;
  background: var(--ink-100);
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 11px 22px;
  background: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  color: inherit;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn-red {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.btn-red:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--white);
}

.btn-ghost {
  border-color: var(--ink-500);
  color: var(--ink-800);
}

.btn-ghost:hover {
  border-color: var(--ink-600);
  color: var(--ink-900);
}

.btn-sm {
  min-height: 38px;
  padding: 6px 14px;
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--ink-200);
  transition: box-shadow var(--dur-base) var(--ease);
}

.nav.scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--header-h);
  width: min(var(--content), calc(100% - (2 * var(--page-pad))));
  margin-inline: auto;
}

.logo {
  display: block;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}

.logo-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: var(--w-bold);
  line-height: 1.05;
}

/* Was --ink-400 at 0.75 opacity: 2.49:1 on white, a clear AA failure. The size
   stays small because this line sets the width of the whole header bar. */
.logo-sub {
  display: block;
  margin-top: 2px;
  color: var(--ink-600);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

.nav-sep {
  flex-shrink: 0;
  width: 1px;
  height: 24px;
  background: var(--ink-200);
}

.nav-ul {
  display: flex;
  margin-left: auto;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 9px;
  background: none;
  border: none;
  color: var(--ink-600);
  font-family: var(--sans);
  /* pinned rather than --t-sm: five labels plus the name and the language
     switch have to fit the bar, and the Dutch labels are the long ones */
  font-size: var(--t-xs);
  font-weight: var(--w-regular);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.nav-link:hover,
.nav-ul li.act .nav-link {
  color: var(--red);
}

.nav-ul li.act .nav-link {
  font-weight: var(--w-medium);
  box-shadow: inset 0 -3px 0 var(--red);
}

.nav-ul li.cta .nav-link {
  margin-left: var(--sp-1);
  padding-left: 14px;
  border-left: 1px solid var(--ink-200);
  color: var(--red);
  font-weight: var(--w-medium);
}

/* Language switch */
.lang-row {
  display: flex;
  flex-shrink: 0;
  gap: 3px;
  margin-left: var(--sp-1);
}

.lb {
  min-width: 42px;
  min-height: 32px;
  padding: 4px 9px;
  background: none;
  border: 1.5px solid var(--ink-500);
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  font-family: var(--sans);
  font-size: var(--t-2xs);
  /* Was 700, which Source Sans 3 is not loaded at on this page, so the
     browser was synthesising a fake bold. 600 is a real weight. */
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.lb.on,
.lb[aria-pressed="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Mobile navigation
   Previously the menu was simply hidden below 900px with no replacement,
   which left Contact unreachable on a phone.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin-left: auto;
  padding: 8px 12px;
  background: none;
  border: 1.5px solid var(--ink-500);
  border-radius: var(--radius-sm);
  color: var(--ink-800);
  font-family: var(--sans);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}

.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after  { top:  5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* The bar collapses at 1180px rather than 900px because the five labels plus
   the name and the language switch genuinely need that much room, and more so
   in Dutch, where "Samenwerking met de praktijk" is the longest item. Below
   this width the same five links live in the menu instead of overflowing. */
@media (max-width: 1180px) {
  .nav-sep {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-ul {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    display: none;
    flex-direction: column;
    margin: 0;
    padding: var(--sp-2) var(--page-pad) var(--sp-5);
    background: var(--white);
    border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--shadow-sm);
  }

  .nav-ul.open {
    display: flex;
  }

  .nav-ul li {
    border-bottom: 1px solid var(--ink-150);
  }

  .nav-ul li:last-child {
    border-bottom: none;
  }

  .nav-link {
    width: 100%;
    height: auto;
    padding: 14px 0;
    font-size: var(--t-base);
  }

  .nav-ul li.act .nav-link {
    box-shadow: none;
  }

  .nav-ul li.cta .nav-link {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: clamp(48px, 7vw, 88px) var(--page-pad);
  background: var(--white);
  border-top: 4px solid var(--red);
}

.hero-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: var(--sp-7);
  width: min(var(--content), 100%);
  margin-inline: auto;
}

.hero-content .h1 {
  margin-bottom: var(--sp-3);
}

.hero-tagline {
  max-width: 620px;
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--red);
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: var(--lh-snug);
}

.hero-identity {
  max-width: 620px;
  margin: calc(-1 * var(--sp-1)) 0 var(--sp-3);
  color: var(--ink-600);
  font-size: var(--t-xs);
  line-height: var(--lh-body);
}

.hero-content .lead {
  max-width: 620px;
  margin-bottom: var(--sp-6);
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The source file is 420 x 560. Displaying it near that size left it soft on
   any high-density screen, so the box is capped well below it: at 300px the
   image still has 1.4x the pixels the box needs. */
.portrait {
  aspect-ratio: 4 / 5;
  max-width: 300px;
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}

/* The <picture> wrapper must not become the img's containing block, or the
   height: 100% below stops resolving. */
.portrait picture {
  display: contents;
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Highlights strip
   -------------------------------------------------------------------------- */

.highlights {
  padding: var(--sp-6) var(--page-pad);
  background: var(--white);
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  width: min(var(--content), 100%);
  margin-inline: auto;
}

.hl-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-left: 14px;
  border-left: 3px solid var(--red);
}

.hl-item .label {
  color: var(--ink-600);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.hl-item .value {
  color: var(--ink-900);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}

.hl-item .sub {
  color: var(--ink-600);
  font-size: var(--t-xs);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Card grids
   -------------------------------------------------------------------------- */

.home-offers,
.featured-pubs,
.card-grid,
.proj-grid,
.off-grid {
  display: grid;
  gap: 14px;
}

/* The home page runs its grids three across; it is a landing page and the
   cards there are short. The sub-page grids carry a paragraph each, so their
   tracks are wide enough to land on two across in the same frame. */
.home-offers  { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.featured-pubs{ grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.card-grid    { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
.proj-grid    { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
.off-grid     { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }

/* Featured publications */
.fp {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}

.fp .venue {
  max-width: none;
  color: var(--red);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.fp .title {
  flex: 1;
  max-width: none;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}

.fp .auth {
  max-width: none;
  color: var(--ink-600);
  font-size: var(--t-sm);
}

/* Sits where the DOI would be, for work that does not have one yet. */
.fp .fp-note {
  max-width: none;
  align-self: start;
  margin-top: auto;
  color: var(--teal-dark);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
}

/* Was 'Courier New', a third typeface used only for DOIs. */
.fp .doi-link,
.pub-doi {
  align-self: start;
  margin-top: auto;
  color: var(--red);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   Dark call-to-action strips
   -------------------------------------------------------------------------- */

.home-cta,
.cta-strip {
  padding: clamp(40px, 6vw, 64px) var(--page-pad);
  background: var(--ink-950);
  color: var(--on-dark);
}

.home-cta .wrap,
.cta-strip .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-6);
}

.home-cta h2,
.cta-strip h2 {
  margin-bottom: var(--sp-2);
  color: var(--on-dark-strong);
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}

.home-cta p,
.cta-strip p {
  max-width: var(--measure);
  color: var(--on-dark);
  font-size: var(--t-base);
  line-height: var(--lh-body);
}

.home-cta .btn-red,
.cta-strip .btn-red {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink-950);
}

.home-cta .btn-red:hover,
.cta-strip .btn-red:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* Was rgba(255,255,255,.35): 3.2:1, below the 3:1 floor once antialiasing
   is taken into account. */
.home-cta .btn-ghost,
.cta-strip .btn-ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--on-dark-strong);
}

.home-cta .btn-ghost:hover,
.cta-strip .btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Audience cards
   -------------------------------------------------------------------------- */

.aud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
  margin-top: var(--sp-7);
}

.aud-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 22px 22px 20px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.aud-card:hover {
  border-color: var(--red);
  color: inherit;
  transform: translateY(-2px);
}

.aud-card.featured {
  border-top: 3px solid var(--teal);
}

.aud-card.featured .aud-card-cue {
  color: var(--teal);
}

.aud-card h3 {
  margin-bottom: 0;
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: var(--w-bold);
}

.aud-card p {
  flex: 1;
  max-width: none;
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

.aud-card .aud-card-cue,
.aud-card span {
  margin-top: var(--sp-1);
  color: var(--red);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
}

/* --------------------------------------------------------------------------
   Quick facts
   -------------------------------------------------------------------------- */

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

.fact {
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}

/* Was --ink-400 on the page background: 2.97:1, an AA failure. */
.fact-l {
  margin-bottom: var(--sp-1);
  color: var(--ink-600);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.fact-v {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}

.fact-s {
  margin-top: 3px;
  color: var(--ink-600);
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------------------
   Sub-page header
   -------------------------------------------------------------------------- */

.pg-hd {
  padding: clamp(40px, 6vw, 64px) var(--page-pad) clamp(28px, 4vw, 44px);
  background: var(--white);
  border-top: 4px solid var(--red);
}

.pg-hd .wrap h1 {
  margin-bottom: var(--sp-2);
  font-family: var(--serif);
  font-size: var(--t-2xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
}

/* :not(.eye) matters. This rule is two classes deep, so without it the
   eyebrow above the page title lost its size, weight, and red to the
   standfirst styling and rendered as plain grey body copy. */
.pg-hd .wrap p:not(.eye) {
  max-width: var(--measure);
  color: var(--ink-600);
  font-size: var(--t-md);
  font-weight: var(--w-regular);
  line-height: var(--lh-loose);
}

.pg-hd .wrap .eye {
  margin-bottom: var(--sp-2);
}

/* Research, Teaching, and Working with organisations each open with an
   illustration beside the title. It is deliberately the smaller half of the
   header: the page is still a heading and a standfirst, with a picture. */
.pg-hd.has-figure .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: var(--sp-7);
}

.pg-hd-figure {
  margin: 0;
}

/* The title has roughly half the width it would have on its own, so it takes
   a step down the scale. At full size it dominated the illustration beside it,
   most visibly on Research, whose standfirst is a single sentence. */
.pg-hd.has-figure .wrap h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
}

.pg-hd-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

@media (max-width: 900px) {
  .pg-hd.has-figure .wrap {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .pg-hd-figure {
    max-width: 420px;
  }
}

/* --------------------------------------------------------------------------
   Rich content blocks
   -------------------------------------------------------------------------- */

.block {
  margin-bottom: var(--sp-6);
}

.block-h {
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-200);
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
}

/* Direct children only. As `.block p` this rule reached down into the
   publication list, the award list, and the cards, and overrode every
   .pub-auth, .pub-venue, .li-meta, and .li-body underneath it. */
.block > p {
  max-width: var(--measure);
  margin-bottom: var(--sp-3);
  color: var(--ink-700);
  font-size: var(--t-base);
  line-height: var(--lh-body);
}

.block > p:last-child {
  margin-bottom: 0;
}

.block ul {
  padding: 0;
  list-style: none;
}

.block li {
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-200);
}

.block li:last-child {
  border-bottom: none;
}

.li-h {
  margin-bottom: 3px;
  color: var(--ink-900);
  font-weight: var(--w-medium);
}

.li-meta {
  margin-bottom: 5px;
  color: var(--ink-600);
  font-size: var(--t-xs);
}

.li-body {
  max-width: var(--measure);
  color: var(--ink-700);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Publications list
   -------------------------------------------------------------------------- */

.pub-list {
  border-top: 1px solid var(--ink-200);
}

.pub-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-200);
}

.pub-title {
  max-width: var(--measure);
  margin-bottom: var(--sp-1);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}

.pub-auth {
  max-width: none;
  margin-bottom: 3px;
  color: var(--ink-600);
  font-size: var(--t-sm);
}

/* Was --ink-400 italic: 3.65:1, an AA failure at this size. */
.pub-venue {
  max-width: none;
  color: var(--ink-600);
  font-size: var(--t-sm);
  font-style: italic;
}

/* Status or a paper-specific distinction, under the reference line. */
.pub-note {
  max-width: none;
  margin-top: 4px;
  color: var(--teal-dark);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
}

.pub-doi {
  align-self: center;
  margin-top: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Generic cards
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}

.card.alt {
  background: var(--warm-50);
}

.card-tag {
  align-self: start;
  padding: 3px 9px;
  background: var(--red-soft);
  border-radius: var(--radius-sm);
  color: var(--red-dark);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.card-tag.teal {
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.card h3 {
  margin-bottom: 0;
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}

.card p {
  flex: 1;
  max-width: var(--measure);
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

.card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--sp-1);
  padding-top: 10px;
  border-top: 1px solid var(--ink-200);
  color: var(--ink-600);
  font-size: var(--t-xs);
}

/* Cards rather than banners: a single column of these across the full frame
   left each short one looking like a strip. The MTM entry keeps the full
   width because it carries the most copy. */
.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 14px;
}

.resource-card.featured {
  grid-column: 1 / -1;
}

.resource-card.featured {
  padding-top: 19px;
  border-top: 4px solid var(--teal);
}

.resource-card p {
  flex: 0;
}

.resource-card .btn {
  align-self: start;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Project cards
   -------------------------------------------------------------------------- */

.proj {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}

.proj p {
  max-width: var(--measure);
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

.proj p.proj-org {
  color: var(--ink-900);
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: var(--w-bold);
}

.proj p.proj-window {
  color: var(--ink-600);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
}

.proj p.proj-body {
  flex: 1;
}

.proj p.proj-meta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--ink-200);
  color: var(--ink-700);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
}

/* --------------------------------------------------------------------------
   Offerings
   -------------------------------------------------------------------------- */

.off {
  padding: 20px 22px;
  background: var(--warm-50);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.off h3 {
  margin-bottom: 7px;
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: var(--w-bold);
}

.off p {
  max-width: var(--measure);
  margin-bottom: 0;
  color: var(--ink-700);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.ct-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
}


.ct-desc {
  max-width: var(--measure);
  margin-bottom: 22px;
  color: var(--ink-700);
  font-size: var(--t-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-loose);
}

.ci-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

.ci {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.ci-l {
  color: var(--ink-600);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.ci-v {
  max-width: none;
  font-size: var(--t-sm);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  padding: 22px var(--page-pad);
  background: var(--ink-950);
  color: var(--on-dark-quiet);
  font-size: var(--t-xs);
}

.ft {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  width: min(var(--content), 100%);
  margin-inline: auto;
}

.ft-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

/* Was rgba(255,255,255,.34): 3.11:1 at 14px, an AA failure. */
.ft-links a {
  color: var(--on-dark);
}

.ft-links a:hover {
  color: var(--on-dark-strong);
}

/* --------------------------------------------------------------------------
   Responsive
   Two breakpoints, matching the rest of the site.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-wrap {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .highlights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .aud-grid {
    grid-template-columns: 1fr;
  }

  .home-cta .wrap,
  .cta-strip .wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .highlights-grid {
    grid-template-columns: 1fr;
  }

  .ct-cols,
  .ci-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .pub-item {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  .pub-doi {
    align-self: start;
    white-space: normal;
  }
}