/* listings.css — Owner: Listings (projects, project, grants). REVISION-2 R1–R17. Three pages in one file
   (DESIGN-SPEC §7), hence past the 800-line soft ceiling; every selector is id-scoped, so no !important.
   Borderless clay, light only, two-tone `.tone-alt` grids without a top bar. R14: regions use --page-inset
   (type.css) = hero slab and footer edges; wider screens get more columns, not wider cards.
   21st.dev: 7795 Services Card, 3176 Animated 3D Card, 8224 Gradient Card, 24338 Neomorphism Metric Card,
   2318 Squishy card, 5964 Project Card, 29471 Article With Author Sidebar. */

/* 0. Private aliases — clay tokens (type.css) with fallbacks. */
#projects-hero, #projects-content, #grants-hero, #grants-list, #project-root {
  --l-surface: var(--clay, var(--paper));
  --l-blue: var(--clay-blue, color-mix(in oklab, var(--brand-blue) 8%, var(--paper)));
  --l-gold: var(--clay-gold, color-mix(in oklab, var(--brand-gold) 16%, var(--paper)));
  --l-radius: var(--clay-radius, 1.5rem);
  --l-shadow: var(--clay-shadow, var(--elev-card));
  --l-shadow-hover: var(--clay-shadow-hover, var(--elev-hover));
  --l-pressed: var(--clay-pressed, inset 0 2px 6px rgb(11 19 36 / .14));
  --l-media-shadow: var(--clay-media-shadow, 0 0 0 1px var(--line));
  --l-navy: var(--clay-navy, var(--navy-panel));
  --l-ink-strong: var(--ink-strong, var(--ink));
  --l-accent: var(--accent-ink, var(--navy-ink));
  --l-chip-shadow: var(--clay-chip-shadow, 3px 3px 6px rgb(23 42 82 / .12), -3px -3px 6px rgb(255 255 255 / .9));
  --l-sep: 0 1px 0 rgb(23 42 82 / .08);          /* soft separator line — never a border */
  --l-live: #0F7A5F;                              /* "Active" dot */
  --l-gap: 1rem;
  --l-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  /* R11c tones: type.css tokens only */
  --l-tone-a: var(--clay-a);
  --l-tone-b: var(--clay-b);
  --l-featured-halo: 0 18px 40px -20px color-mix(in srgb, var(--clay-b-accent) 60%, transparent);
  --l-chip-on-tone: #fff;                        /* white clay chips inside either tone */
}
@media (min-width: 768px) {
  #projects-content, #grants-list, #project-root { --l-gap: 1.25rem; }
}


/* == 1. Page heroes — slab + row are type.css .page-hero; only the controls live here == */
/* View tabs: recessed track on navy, the open view a raised clay pill. */
#project-tabs {
  display: inline-flex;
  flex: none;
  gap: .25rem;
  padding: .3rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .2);
  box-shadow: inset 3px 3px 8px rgb(0 0 0 / .35), inset -2px -2px 6px rgb(255 255 255 / .08);
}
#project-tabs .project-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;                            /* 44px tap target */
  padding: 0 1.05rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(255 255 255 / .84);
  font: 500 .9375rem/1 var(--font-sans);
  text-decoration: none;
  transition: background-color 200ms var(--l-ease), color 200ms var(--l-ease), box-shadow 200ms var(--l-ease);
}
#project-tabs .project-tab:hover { background: rgb(255 255 255 / .07); color: #fff; }
#project-tabs .project-tab[aria-current="page"] {
  background: #F3F6FA;
  color: #0C2340;                                 /* 15:1 */
  font-weight: 600;
  box-shadow: 4px 4px 10px rgb(0 0 0 / .32), inset 2px 2px 4px rgb(255 255 255 / .9), inset -2px -2px 5px rgb(23 42 82 / .12);
}
#project-tabs .project-tab__count {
  font: 700 1.0625rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* The shared row stacks below 1024px: keep the controls at content width. */
@media (max-width: 1023.98px) {
  #project-tabs, #grants-hero .listing-hero__stat { align-self: flex-start; }
}

/* Grants count: clay stat pill, gold numeral. */
#grants-hero .listing-hero__stat {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  padding: .55rem 1.25rem .6rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .08);
  box-shadow: 6px 6px 16px -6px rgb(0 0 0 / .4), inset 2px 2px 5px rgb(255 255 255 / .1), inset -3px -3px 8px rgb(0 0 0 / .25);
  color: rgb(255 255 255 / .84);
  font: 500 .9375rem/1 var(--font-sans);
}
#grants-hero .listing-hero__num {
  font: 700 1.75rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--brand-gold);                       /* 8.3:1 on navy */
}


/* == 2. Shared primitives — section head, grid, chips, buttons, empty == */
/* R14: content edges = hero slab edges at every width. */
#projects-content .listing-section,
#grants-list {
  max-width: none;
  margin-inline: var(--page-inset);
  padding-block: var(--section-py);
  padding-inline: 0;
}

/* Section head: title + count chip, optional lede (no eyebrow). */
:is(#projects-content, #project-root) .listing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin: 0 0 1.25rem;
}
:is(#projects-content, #project-root) .listing-head__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}
:is(#projects-content, #project-root) .listing-head__title {
  margin: 0;
  font: 650 clamp(1.5rem, 1.3rem + .8vw, 2rem)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--l-ink-strong);
  text-wrap: balance;
}
:is(#projects-content, #project-root) .listing-head__lede {
  margin: 0;
  max-width: 48rem;
  font: 400 1rem/1.5 var(--font-sans);
  color: var(--ink-2);
}
#project-root .listing-head__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.75rem;                            /* 44px hit area */
  padding-inline: .25rem;
  font: 600 .9375rem/1.2 var(--font-sans);
  color: var(--l-accent);
  text-decoration: none;
}
#project-root .listing-head__link:hover { text-decoration: underline; text-underline-offset: .2em; }

/* Grid: 1 → 2 (≥640) → 3 on 6 tracks (compact/grants ≥1024, feature ≥1800) → 4 on 12 tracks (compact ≥1800).
   A short last row spreads across the width. */
:is(#projects-content, #grants-list, #project-root) .lcard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--l-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(#projects-content, #grants-list, #project-root) .lcard-cell { display: flex; min-width: 0; margin: 0; }
:is(#projects-content, #grants-list, #project-root) .lcard-cell > * { flex: 1 1 auto; min-width: 0; }
@media (min-width: 640px) {
  :is(#projects-content, #grants-list, #project-root) .lcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* odd count: the last card takes the row */
  :is(#projects-content, #grants-list, #project-root) .lcard-grid > .lcard-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  :is(#projects-content, #grants-list, #project-root) :is(.lcard-grid--compact, .lcard-grid--grants) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  :is(#projects-content, #grants-list, #project-root) :is(.lcard-grid--compact, .lcard-grid--grants) > .lcard-cell,
  :is(#projects-content, #grants-list, #project-root) :is(.lcard-grid--compact, .lcard-grid--grants) > .lcard-cell:last-child:nth-child(odd) {
    grid-column: span 2;
  }
  /* last row of two → half and half */
  :is(#projects-content, #grants-list, #project-root) :is(.lcard-grid--compact, .lcard-grid--grants) > .lcard-cell:nth-last-child(2):nth-child(3n+1),
  :is(#projects-content, #grants-list, #project-root) :is(.lcard-grid--compact, .lcard-grid--grants) > .lcard-cell:last-child:nth-child(3n+2) {
    grid-column: span 3;
  }
  /* last row of one → full width (the card switches to its horizontal layout below) */
  :is(#projects-content, #grants-list, #project-root) :is(.lcard-grid--compact, .lcard-grid--grants) > .lcard-cell:last-child:nth-child(3n+1) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1800px) {
  /* feature: the same 3 columns on 6 tracks */
  #projects-content .lcard-grid--feature { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #projects-content .lcard-grid--feature > .lcard-cell,
  #projects-content .lcard-grid--feature > .lcard-cell:last-child:nth-child(odd) { grid-column: span 2; }
  #projects-content .lcard-grid--feature > .lcard-cell:nth-last-child(2):nth-child(3n+1),
  #projects-content .lcard-grid--feature > .lcard-cell:last-child:nth-child(3n+2) { grid-column: span 3; }
  #projects-content .lcard-grid--feature > .lcard-cell:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  /* compact: 4 cols on 12 tracks; spread a last row of 3 / 2 / 1 */
  :is(#projects-content, #project-root) .lcard-grid--compact { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell,
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:is(:last-child:nth-child(odd), :last-child:nth-child(3n+1), :last-child:nth-child(3n+2), :nth-last-child(2):nth-child(3n+1)) {
    grid-column: span 3;
  }
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:nth-last-child(3):nth-child(4n+1),
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:nth-last-child(2):nth-child(4n+2),
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:last-child:nth-child(4n+3) { grid-column: span 4; }
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:nth-last-child(2):nth-child(4n+1),
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:last-child:nth-child(4n+2) { grid-column: span 6; }
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
}
/* "More projects" renders 4: 2×2 <1024, 3 at 1024–1799, 4 ≥1800. */
@media (min-width: 1024px) and (max-width: 1799.98px) {
  #project-root .project-more .lcard-cell:nth-child(n+4) { display: none; }
}

/* Chips — clay mini-surfaces (status dot, blue funder, gold featured). */
:is(#projects-content, #grants-list, #project-root) .lcard-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
:is(#projects-content, #grants-list, #project-root) .lchip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 1.75rem;
  padding: .3rem .7rem;
  border: 0;
  border-radius: 999px;
  background: var(--l-surface);
  box-shadow: var(--l-chip-shadow);
  color: var(--ink);
  font: 500 .8125rem/1.1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
}
:is(#projects-content, #grants-list, #project-root) .lchip--status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-2);
}
:is(#projects-content, #grants-list, #project-root) .lchip--status.is-active::before {
  background: var(--l-live);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--l-live) 22%, transparent);
}
:is(#projects-content, #grants-list, #project-root) .lchip--funder {
  background: var(--l-blue);
  color: var(--l-accent);
  font-weight: 650;
  letter-spacing: .01em;
}
:is(#projects-content, #grants-list, #project-root) .lchip--featured {
  background: var(--l-gold);
  color: var(--gold-ink);
  font-weight: 600;
}
:is(#projects-content, #project-root) .lchip--count { color: var(--ink-2); font-weight: 600; }

/* R11 tones per cell (+ a well in the other tone): 1/3 cols odd A even B; 2 cols A B / B A; 4 cols
   A B A B / B A B A — vertical neighbours differ too. */
:is(#projects-content, #grants-list, #project-root) .tone-alt > .lcard-cell {
  background: none;                               /* the card is the surface */
  box-shadow: none;
}
:is(#projects-content, #grants-list, #project-root) .tone-alt > :nth-child(odd) {
  --l-tone: var(--l-tone-a); --l-well: var(--l-tone-b); --l-well-ink: var(--gold-ink);
}
:is(#projects-content, #grants-list, #project-root) .tone-alt > :nth-child(even) {
  --l-tone: var(--l-tone-b); --l-well: var(--l-tone-a); --l-well-ink: var(--l-accent);
}
@media (min-width: 640px) {
  :is(#projects-content, #grants-list, #project-root) .lcard-grid.tone-alt > :nth-child(4n+3) {
    --l-tone: var(--l-tone-b); --l-well: var(--l-tone-a); --l-well-ink: var(--l-accent);
  }
  :is(#projects-content, #grants-list, #project-root) .lcard-grid.tone-alt > :nth-child(4n) {
    --l-tone: var(--l-tone-a); --l-well: var(--l-tone-b); --l-well-ink: var(--gold-ink);
  }
}
@media (min-width: 1024px) {
  :is(#projects-content, #grants-list, #project-root) :is(.lcard-grid--compact, .lcard-grid--grants).tone-alt > :nth-child(4n+3) {
    --l-tone: var(--l-tone-a); --l-well: var(--l-tone-b); --l-well-ink: var(--gold-ink);
  }
  :is(#projects-content, #grants-list, #project-root) :is(.lcard-grid--compact, .lcard-grid--grants).tone-alt > :nth-child(4n) {
    --l-tone: var(--l-tone-b); --l-well: var(--l-tone-a); --l-well-ink: var(--l-accent);
  }
}
@media (min-width: 1800px) {
  #projects-content .lcard-grid--feature.tone-alt > :nth-child(4n+3),
  :is(#projects-content, #project-root) .lcard-grid--compact.tone-alt > :is(:nth-child(8n+6), :nth-child(8n)) {
    --l-tone: var(--l-tone-a); --l-well: var(--l-tone-b); --l-well-ink: var(--gold-ink);
  }
  #projects-content .lcard-grid--feature.tone-alt > :nth-child(4n),
  :is(#projects-content, #project-root) .lcard-grid--compact.tone-alt > :is(:nth-child(8n+5), :nth-child(8n+7)) {
    --l-tone: var(--l-tone-b); --l-well: var(--l-tone-a); --l-well-ink: var(--l-accent);
  }
}
/* White chips inside either tone (gold-ink on white 5.4:1). */
:is(#projects-content, #grants-list, #project-root) .tone-alt .lchip { background: var(--l-chip-on-tone); }

/* Arrows in CTAs: nudge on hover (8224). */
:is(#projects-content, #grants-list, #project-root) .lcard-arrow {
  flex: none;
  width: 1em;
  height: 1em;
  transition: transform 300ms var(--l-ease);
}

/* Buttons on the navy slab: white clay pill + translucent clay pill. */
#project-root .lbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .5rem 1.25rem;
  border: 0;
  border-radius: 999px;
  font: 600 .9375rem/1.2 var(--font-sans);
  text-decoration: none;
  transition: transform 200ms var(--l-ease), box-shadow 200ms var(--l-ease), background-color 200ms var(--l-ease);
}
#project-root .lbtn--light {
  background: #F3F6FA;
  color: #0C2340;
  box-shadow: 6px 6px 16px -4px rgb(0 0 0 / .4), inset 2px 2px 4px rgb(255 255 255 / .9), inset -3px -3px 6px rgb(23 42 82 / .14);
}
#project-root .lbtn--light:hover { background: #fff; }
#project-root .lbtn--glass {
  background: rgb(255 255 255 / .09);
  color: #fff;
  box-shadow: 6px 6px 16px -6px rgb(0 0 0 / .4), inset 2px 2px 5px rgb(255 255 255 / .12), inset -3px -3px 8px rgb(0 0 0 / .25);
}
#project-root .lbtn--glass:hover { background: rgb(255 255 255 / .15); }

/* Empty state — clay card + inset icon well. */
:is(#projects-content, #grants-list) .listing-empty {
  display: grid;
  justify-items: center;
  gap: .75rem;
  max-width: 36rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
  border: 0;
  border-radius: var(--l-radius);
  background: var(--l-surface);
  box-shadow: var(--l-shadow);
  text-align: center;
}
:is(#projects-content, #grants-list) .listing-empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.125rem;
  background: var(--l-blue);
  box-shadow: var(--l-pressed);
  color: var(--l-accent);
}
:is(#projects-content, #grants-list) .listing-empty__icon svg { width: 1.625rem; height: 1.625rem; }
:is(#projects-content, #grants-list) .listing-empty__title {
  margin: .25rem 0 0;
  font: 650 clamp(1.375rem, 1.25rem + .5vw, 1.625rem)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--l-ink-strong);
}
:is(#projects-content, #grants-list) .listing-empty__text {
  margin: 0;
  max-width: 30rem;
  font: 400 1rem/1.6 var(--font-sans);
  color: var(--ink-2);
}
#projects-content .listing-empty__action { margin-top: .5rem; }


/* == 3. Project cards — compact: image on top · feature 1024–1799: image left 45% == */
:is(#projects-content, #project-root) .lcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: .625rem;
  border: 0;
  border-radius: var(--l-radius);
  background: var(--l-tone, var(--l-surface));
  box-shadow: var(--l-shadow);
  color: var(--ink);
  transition: transform 320ms var(--l-ease), box-shadow 320ms var(--l-ease);
}
:is(#projects-content, #project-root) .lcard__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  background: #fff;                               /* the figures are white-ground diagrams */
  box-shadow: var(--l-media-shadow);
}
/* Captioned diagrams (1:1–3.1:1): `contain` on the white well, never sliced. */
:is(#projects-content, #project-root) .lcard__media img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: .5rem;
  object-fit: contain;
  transition: transform 600ms var(--l-ease), filter 600ms var(--l-ease);
}
:is(#projects-content, #project-root) .lcard.is-archived .lcard__media img { filter: grayscale(1); }
:is(#projects-content, #project-root) .lcard-plate {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .12), transparent 60%), var(--l-navy);
  color: #fff;
  font: 750 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--font-display);
  letter-spacing: -0.025em;
}
:is(#projects-content, #project-root) .lcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
  padding: .875rem .625rem .5rem;
}
:is(#projects-content, #project-root) .lcard__title {
  margin: 0;
  font-family: var(--font-display);
  color: var(--l-ink-strong);
  text-wrap: pretty;
}
:is(#projects-content, #project-root) .lcard__name {
  display: block;
  font-size: clamp(1.375rem, 1.2rem + .55vw, 1.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
:is(#projects-content, #project-root) .lcard__name--long {   /* a title without a short "Name:" lead */
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.012em;
}
:is(#projects-content, #project-root) .lcard__sub {
  display: block;
  margin-top: .3rem;
  font-size: clamp(1rem, .96rem + .18vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 220ms var(--l-ease);
}
/* Stretched title link: one tab stop per card. */
:is(#projects-content, #project-root) .lcard__link {
  color: inherit;
  text-decoration: none;
}
:is(#projects-content, #project-root) .lcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--l-radius);
}
:is(#projects-content, #project-root) .lcard__excerpt {
  margin: 0;
  max-width: 72ch;
  font: 400 .9375rem/1.6 var(--font-sans);
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
:is(#projects-content, #project-root) .lcard__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .25rem;
  font: 600 .9375rem/1.2 var(--font-sans);
  color: var(--l-accent);
}
:is(#projects-content, #project-root) .lcard:hover .lcard__sub,
:is(#projects-content, #project-root) .lcard:focus-within .lcard__sub { color: var(--l-accent); }

/* Keyboard focus rings the card. */
:is(#projects-content, #project-root) .lcard__link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: .25rem; }
@supports selector(:has(a)) {
  :is(#projects-content, #project-root) .lcard__link:focus-visible { outline: none; }
  :is(#projects-content, #project-root) .lcard:has(.lcard__link:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: 4px;
  }
}

/* Feature variant (active projects) */
#projects-content .lcard--feature .lcard__excerpt { -webkit-line-clamp: 4; line-clamp: 4; }
/* A lone last card in 2 cols spans the row: image left, text right. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  :is(#projects-content, #project-root) .lcard-grid > .lcard-cell:last-child:nth-child(odd) .lcard {
    display: grid;
    grid-template-columns: minmax(0, calc((100% - var(--l-gap)) / 2)) minmax(0, 1fr);
  }
  :is(#projects-content, #project-root) .lcard-grid > .lcard-cell:last-child:nth-child(odd) .lcard__body {
    padding: .75rem .75rem .5rem 1.25rem;
  }
}
@media (min-width: 1024px) {
  #projects-content .lcard--feature {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    align-items: stretch;
  }
  /* centred 16:10 well beside the text */
  #projects-content .lcard--feature .lcard__media {
    align-self: center;
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
  }
  #projects-content .lcard--feature .lcard__body { padding: .875rem .875rem .625rem 1.375rem; }
  /* a lone last feature card spans both columns: keep the image to a third */
  #projects-content .lcard-grid--feature > .lcard-cell:last-child:nth-child(odd) .lcard--feature {
    grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  }
  /* a lone last compact card spans the row: same horizontal layout */
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:last-child:nth-child(3n+1) .lcard {
    display: grid;
    grid-template-columns: minmax(0, calc((100% - 2 * var(--l-gap)) / 3)) minmax(0, 1fr);
  }
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:last-child:nth-child(3n+1) .lcard__body {
    padding: .875rem .875rem .625rem 1.375rem;
  }
}
/* ≥1800: feature cards upright in 3 cols; a lone last card stays horizontal. */
@media (min-width: 1800px) {
  #projects-content .lcard--feature,
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:last-child:nth-child(3n+1) .lcard { display: flex; }
  /* shorter tone-tinted well; white-ground figures multiply into the tint, still `contain` */
  #projects-content .lcard--feature .lcard__media {
    align-self: stretch;
    aspect-ratio: 2 / 1;
    max-height: 17rem;
    isolation: isolate;
    background: color-mix(in oklab, var(--l-tone, var(--l-surface)) 60%, #fff);
  }
  #projects-content .lcard--feature .lcard__media img { mix-blend-mode: multiply; }
  #projects-content .lcard--feature .lcard__body,
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:last-child:nth-child(3n+1) .lcard__body {
    padding: .875rem .625rem .5rem;
  }
  #projects-content .lcard-grid--feature > .lcard-cell:last-child:nth-child(3n+1) .lcard--feature {
    display: grid;
    grid-template-columns: minmax(0, calc((100% - 2 * var(--l-gap)) / 3)) minmax(0, 1fr);
  }
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:last-child:nth-child(4n+1) .lcard {
    display: grid;
    grid-template-columns: minmax(0, calc((100% - 3 * var(--l-gap)) / 4)) minmax(0, 1fr);
  }
  #projects-content .lcard-grid--feature > .lcard-cell:last-child:nth-child(3n+1) .lcard__media { align-self: center; }
  #projects-content .lcard-grid--feature > .lcard-cell:last-child:nth-child(3n+1) .lcard__body,
  :is(#projects-content, #project-root) .lcard-grid--compact > .lcard-cell:last-child:nth-child(4n+1) .lcard__body {
    padding: .875rem .875rem .625rem 1.375rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(#projects-content, #project-root) .lcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--l-shadow-hover);
  }
  :is(#projects-content, #project-root) .lcard:active {
    transform: translateY(0) scale(.99);
    box-shadow: var(--l-pressed);
  }
  :is(#projects-content, #project-root) .lcard:hover .lcard__media img { transform: scale(1.03); }
  :is(#projects-content, #project-root) .lcard.is-archived:hover .lcard__media img { filter: grayscale(0); }
  :is(#projects-content, #project-root) .lcard:hover .lcard__cta .lcard-arrow,
  #project-root .listing-head__link:hover .lcard-arrow { transform: translateX(3px); }
}


/* == 4. Grant cards — 3 columns, featured gold halo, inset icon well == */
#grants-list .grant-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  height: 100%;
  margin: 0;
  padding: var(--card-pad);
  border: 0;
  border-radius: var(--l-radius);
  background: var(--l-tone, var(--l-surface));
  box-shadow: var(--l-halo, 0 0 0 transparent), var(--l-shadow);
  color: var(--ink);
  transition: transform 320ms var(--l-ease), box-shadow 320ms var(--l-ease);
}
/* Featured keeps its alternating tone + a gold halo (--l-halo, kept on hover/press), gold well and chip.
   No top bar (R11b). */
#grants-list .grant-card.is-featured {
  --l-halo: var(--l-featured-halo);
  background: var(--l-tone, var(--l-gold));
}
#grants-list .grant-card__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: calc(-1 * var(--card-pad) + .625rem) calc(-1 * var(--card-pad) + .625rem) .25rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--l-media-shadow);
}
#grants-list .grant-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#grants-list .grant-card__head {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
}
#grants-list .grant-card__well {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .875rem;
  background: var(--l-well, var(--l-gold));       /* the other tone: gold well on blue clay, blue well on gold */
  box-shadow: var(--l-pressed);
  color: var(--l-well-ink, var(--gold-ink));
}
#grants-list .grant-card.is-featured .grant-card__well {
  background: var(--clay-b-accent);
  color: #0C2340;                                 /* icon 7.4:1 on the gold well */
}
#grants-list .grant-card__well svg { width: 1.375rem; height: 1.375rem; }
#grants-list .grant-card__title {
  margin: 0;
  font: 650 clamp(1.125rem, 1.06rem + .28vw, 1.3125rem)/1.25 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--l-ink-strong);
  text-wrap: pretty;
}
#grants-list .grant-card__link {
  color: inherit;
  text-decoration: none;
}
#grants-list .grant-card__link::after {       /* the title link covers the card */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--l-radius);
}
#grants-list .grant-card__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  margin: 0;
  font: 500 .875rem/1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
#grants-list .grant-card__years {
  font: 650 1rem/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--l-ink-strong);
}
#grants-list .grant-card__award { font-weight: 600; color: var(--ink); letter-spacing: .01em; }
#grants-list .grant-card__amount { font-weight: 700; color: var(--l-ink-strong); }
#grants-list .grant-card__desc {
  margin: 0;
  font: 400 .9375rem/1.6 var(--font-sans);
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
#grants-list .grant-card.is-open .grant-card__desc { display: block; -webkit-line-clamp: unset; line-clamp: none; }
#grants-list .grant-card__foot {
  position: relative;
  z-index: 2;                                     /* above the stretched title link */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: auto;
  padding-top: .25rem;
}
#grants-list .grant-card__foot:not(:has(> :not([hidden], .sr-only))) { display: none; }
#grants-list .grant-card__more {
  min-height: 2.75rem;                            /* 44px tap target */
  padding: .35rem .95rem;
  border: 0;
  border-radius: 999px;
  background: var(--l-surface);
  box-shadow: var(--l-chip-shadow);
  color: var(--l-accent);
  font: 600 .875rem/1.2 var(--font-sans);
  cursor: pointer;
  transition: box-shadow 200ms var(--l-ease);
}
#grants-list .grant-card__more[aria-expanded="true"] { box-shadow: var(--l-pressed); }
#grants-list .grant-card__more:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
#grants-list .grant-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 600 .9375rem/1.2 var(--font-sans);
  color: var(--l-accent);
  text-decoration: none;
}
#grants-list .grant-card__cta:hover { text-decoration: underline; text-underline-offset: .2em; }

/* A lone last grant spans the row: facts left, description right. */
@media (min-width: 1024px) {
  #grants-list .lcard-grid--grants > .lcard-cell:last-child:nth-child(3n+1) .grant-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-auto-flow: dense;
    align-content: start;
    column-gap: 2.5rem;
  }
  #grants-list .lcard-grid--grants > .lcard-cell:last-child:nth-child(3n+1) .grant-card > :not(.grant-card__desc, .grant-card__foot) { grid-column: 1; }
  #grants-list .lcard-grid--grants > .lcard-cell:last-child:nth-child(3n+1) .grant-card > :is(.grant-card__desc, .grant-card__foot) { grid-column: 2; }
  #grants-list .lcard-grid--grants > .lcard-cell:last-child:nth-child(3n+1) .grant-card__desc { grid-row: 1 / span 3; }
}

@media (prefers-reduced-motion: no-preference) {
  #grants-list .grant-card:has(.grant-card__link):hover {
    transform: translateY(-4px);
    box-shadow: var(--l-halo, 0 0 0 transparent), var(--l-shadow-hover);
  }
  #grants-list .grant-card:has(.grant-card__link:active) {
    transform: translateY(0) scale(.99);
    box-shadow: var(--l-halo, 0 0 0 transparent), var(--l-pressed);
  }
  #grants-list .grant-card:hover .grant-card__cta .lcard-arrow { transform: translate(2px, -2px); }
}
@supports selector(:has(a)) {
  #grants-list .grant-card__link:focus-visible { outline: none; }
  #grants-list .grant-card:has(.grant-card__link:focus-visible) { outline: var(--focus-ring); outline-offset: 4px; }
}


/* == 5. Project detail — hero slab, prose panel + sticky facts aside, paper rows, "More projects" == */
#project-root { padding-bottom: var(--section-py); }
/* R14: sections take the hero slab's edges. */
#project-root > section:not(.project-hero) { max-width: none; margin-inline: var(--page-inset); }

/* -- Hero: the shared .page-hero navy clay slab (type.css) + a two-column inner grid -- */
#project-root .project-hero {
  --focus-ring: 2px solid var(--brand-gold);
  display: grid;
  gap: 1.5rem;
  margin-top: .75rem;
  padding-inline: clamp(1.25rem, .5rem + 2.6vw, 3rem);
}
/* Text beside the figure ≥768, stacked below. */
@media (min-width: 768px) {
  #project-root .project-hero--figure {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
}
/* ≥1024 the figure column hugs the figure (≤45%), the text takes the rest. */
@media (min-width: 1024px) {
  #project-root .project-hero--figure { grid-template-columns: minmax(0, 1fr) fit-content(45%); }
}
#project-root .project-hero__text { min-width: 0; }
#project-root .project-hero__title {
  margin: 0;
  font-family: var(--font-display);
  color: #fff;
  text-wrap: balance;
  overflow-wrap: break-word;
}
#project-root .project-hero__name {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.025em;
}
#project-root .project-hero__sub {
  display: block;
  margin-top: .6rem;
  max-width: 34ch;
  font-size: clamp(1.25rem, 1.12rem + .55vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: rgb(255 255 255 / .92);
}
/* ≥1440 the subtitle runs on one line where it fits (after the base rule, so it wins). */
@media (min-width: 1440px) {
  #project-root .project-hero__sub { max-width: 36em; }
}
/* Meta row: chips then actions, one line where they fit. */
#project-root .project-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 1.125rem;
}
#project-root .project-hero__meta > .project-hero__actions { margin-top: 0; }
#project-root .lchip--on-navy {
  background: rgb(255 255 255 / .1);
  box-shadow: 4px 4px 10px -2px rgb(0 0 0 / .35), inset 1px 1px 2px rgb(255 255 255 / .14);
  color: rgb(255 255 255 / .92);
}
#project-root .lchip--on-navy.lchip--status::before { background: rgb(255 255 255 / .6); }
#project-root .lchip--on-navy.lchip--status.is-active::before {
  background: var(--brand-gold);
  box-shadow: 0 0 0 3px rgb(255 204 0 / .22);
}
#project-root .lchip--link:hover { background: rgb(255 255 255 / .18); }
#project-root .project-hero__lede {
  margin: 1rem 0 0;
  max-width: 44rem;
  font: 400 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.55 var(--font-sans);
  color: rgb(255 255 255 / .84);
  text-wrap: pretty;
}
#project-root .project-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
#project-root .lcard-arrow--back { width: 1.05em; height: 1.05em; }
/* The white well hugs the figure; grid columns are fixed, so image load never reflows the title. */
#project-root .project-hero__figure {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: .625rem;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 12px 12px 28px -10px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .35);
}
#project-root .project-hero__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 10rem;                              /* phones: the figure sits under the text */
  object-fit: contain;
  border-radius: .75rem;
}
/* Phones: the figure hangs 3.5rem off the slab's bottom edge, keeping the slab ~360px. */
@media (max-width: 767.98px) {
  #project-root .project-hero--figure { overflow: visible; row-gap: 1.25rem; }
  #project-root .project-hero--figure .project-hero__figure {
    position: relative;
    z-index: 1;
    justify-self: center;
    margin-bottom: -5.5rem;                       /* 3.5rem past the slab's 2rem bottom padding */
  }
  #project-root .project-hero--figure + .project-body { margin-top: calc(3.5rem + var(--l-gap)); }
}
@media (min-width: 768px) {
  #project-root .project-hero__figure { justify-self: end; }
  #project-root .project-hero__img { max-height: 12rem; }
}
@media (min-width: 1024px) {
  #project-root .project-hero__img { max-height: 13rem; }   /* slab ≤ 300px at 1440 (R6) */
}
@media (min-width: 1800px) {
  #project-root .project-hero__img { max-height: 15rem; }
}

/* -- Prose panel + sticky facts aside (the aside grows with the grid) -- */
#project-root .project-body {
  display: grid;
  gap: var(--l-gap);
  margin-top: var(--l-gap);
}
@media (min-width: 1024px) {
  #project-root .project-body {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24%);
    align-items: start;
  }
}
#project-root .project-panel,
#project-root .project-facts {
  border: 0;
  border-radius: var(--l-radius);
  background: var(--l-surface);
  box-shadow: var(--l-shadow);
}
#project-root .project-panel {
  container: project-panel / inline-size;
  padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
}
/* R14 no hollow panel: 80ch measure; a panel ≥64rem flows the prose in two columns. */
#project-root .project-prose,
#project-root .project-prose :is(p, li) { max-width: 80ch; }
#project-root .project-prose > :first-child { margin-top: 0; }
#project-root .project-prose > :last-child { margin-bottom: 0; }
#project-root .project-prose :is(p, li) {
  font: 400 clamp(1.0625rem, 1rem + .25vw, 1.125rem)/1.7 var(--font-sans);
  color: var(--ink);
  text-wrap: pretty;
}
#project-root .project-prose p { margin: 0 0 1em; }
@container project-panel (min-width: 64rem) {
  #project-root .project-prose { columns: 2; column-gap: clamp(2rem, 3cqi, 3.5rem); }
  #project-root .project-prose,
  #project-root .project-prose :is(p, li) { max-width: none; }
}
#project-root .project-prose--empty {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--font-sans);
  color: var(--ink-2);
}

#project-root .project-facts { padding: var(--card-pad); }
@media (min-width: 1024px) {
  #project-root .project-facts {
    position: sticky;
    top: calc(var(--nav-h, 68px) + 1.25rem);
  }
}
#project-root .project-facts__title {
  margin: 0 0 .25rem;
  font: 650 1.1875rem/1.2 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--l-ink-strong);
}
#project-root .project-facts__list { margin: 0; }
#project-root .project-facts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  box-shadow: var(--l-sep);
}
#project-root .project-facts__row dt {
  font: 500 .875rem/1.3 var(--font-sans);
  color: var(--ink-2);
}
#project-root .project-facts__row dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem .875rem;
  margin: 0;
  font: 600 .9375rem/1.3 var(--font-sans);
  color: var(--l-ink-strong);
  text-align: right;
}
#project-root .project-facts__link {
  color: var(--l-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}
#project-root .project-facts__link:hover { text-decoration-color: currentColor; }
#project-root .project-facts__link--more { font-weight: 500; }
#project-root .project-facts__actions { margin-top: 1rem; }
#project-root .project-facts__copy { width: 100%; }
#project-root .project-facts__copy svg { width: 1rem; height: 1rem; }

/* -- Papers: clay rows -- */
#project-root .project-papers {
  margin-top: var(--section-py);
  scroll-margin-top: calc(var(--nav-h, 68px) + 1rem);
}
#project-root .project-papers__list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#project-root .project-paper {
  position: relative;
  display: grid;
  gap: .4rem;
  padding: 1rem 1.25rem 1.1rem;
  border: 0;
  border-radius: 1.125rem;
  background: var(--l-tone, var(--l-surface));
  box-shadow: var(--l-shadow);
  transition: transform 320ms var(--l-ease), box-shadow 320ms var(--l-ease);
}
#project-root .project-paper__title {
  margin: 0;
  font: 600 clamp(1.0625rem, 1rem + .25vw, 1.1875rem)/1.35 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--l-ink-strong);
  text-wrap: pretty;
}
#project-root .project-paper__link { color: inherit; text-decoration: none; }
#project-root .project-paper__link::after { content: ""; position: absolute; inset: 0; border-radius: 1.125rem; }
#project-root .project-paper--linked:is(:hover, :focus-within) .project-paper__link { color: var(--l-accent); }
#project-root .project-paper__authors {
  margin: 0;
  font: 400 .875rem/1.5 var(--font-sans);
  color: var(--ink-2);
}
#project-root .project-paper__venue {
  font: 500 .8125rem/1.3 var(--font-sans);
  color: var(--ink-2);
}
/* Two columns of rows on wide screens (an odd last row spans both), tones in a checkerboard. */
@media (min-width: 1280px) {
  #project-root .project-papers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--l-gap); }
  #project-root .project-papers__list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  #project-root .project-papers__list.tone-alt > :nth-child(4n+3) { --l-tone: var(--l-tone-b); }
  #project-root .project-papers__list.tone-alt > :nth-child(4n) { --l-tone: var(--l-tone-a); }
}
@media (prefers-reduced-motion: no-preference) {
  #project-root .project-paper--linked:hover {
    transform: translateY(-3px);
    box-shadow: var(--l-shadow-hover);
  }
}

/* -- More projects -- */
#project-root .project-more { margin-top: var(--section-py); }


/* == 6. Forced colors — shadows drop, surfaces get a system edge == */
@media (forced-colors: active) {
  :is(#projects-content, #project-root) :is(.lcard, .project-panel, .project-facts, .project-paper),
  :is(#projects-content, #grants-list) .listing-empty,
  #grants-list .grant-card,
  :is(#projects-content, #grants-list, #project-root) .lchip,
  #project-root .lbtn,
  #grants-list .grant-card__more,
  #project-tabs .project-tab {
    border: 1px solid CanvasText;
  }
  #project-tabs .project-tab[aria-current="page"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  #project-root .project-facts__row { border-bottom: 1px solid CanvasText; }
}