/* cards.css — claymorphism pass (REVISION-2 §R3 + §R11, Oct 2026). Loaded AFTER site.css + type.css in every page head.
   Owner: Cards (scratchpad DESIGN-SPEC.md §7). Selectors only — no markup lives here or changes for it.
   Light theme only (R7): no dark-theme class rules and no colour-scheme media queries.

   Every card, tile, row, panel, pill and button is a soft clay object: NO border, depth only from layered outer +
   inner shadows on a surface a shade lighter than the page. Page files (home, people, publications, listings,
   pages, blog) override these per region id; nothing here is page-scoped.

   Cascade (DESIGN-SPEC §2.0):
     • Family rules are written `:root :is(…)` = (0,4,0). That single rest rule out-ranks every site.css surface rule,
       including its :hover (max (0,3,0) !important). Region rules (#id …) still win.
     • `!important` only on the ledger properties (border/background on the light family, + box-shadow on the
       navy family and .content-card); each names the site.css rule it out-cascades.
     • Kill lists (§1) are plain lists without `!important`, above every content re-add.
     • Hover motion (transform, shadow step) lives inside prefers-reduced-motion: no-preference; rest = static.
     • Owner hook: set `--card-surface` on a region or card to tint it (e.g. var(--clay-blue)) without !important.
       Two-tone grids (R11 + R11b/c) use §13 `.tone-alt` / `.tone-a` / `.tone-b`.

   21st.dev sources (scratchpad/inspiration + REVISION-2 §R3):
     24338 Neomorphism Metric Card   dual outer shadow (dark bottom-right / white top-left) + inset wells, pills
     3176  Animated 3D Card [saved]  hover lift with a deeper drop
     8224  Gradient Card [saved]     tinted surfaces → --card-surface / --clay-blue / --clay-gold, and the R11
                                     light blue / light gold two-tone (§13)
     5717  Glassmorphism Profile [saved]  inset squircle media on tiles (glass dropped: R3 bans it on cards)
     2318  Squishy card              press = inset shadow + scale(.99)
     34577 Tactile 3D Button         keycap bevel (inset top light + inset bottom shade) that sinks when pressed */


/* ===================================================================================================== 0. TOKEN FALLBACKS
   The R3 tokens are owned by type.css. These zero-specificity copies apply only if type.css has not defined a
   name (its `:root` always wins), so the cards render as clay whatever order the files land in.
   --clay-radius-* and --clay-chip-shadow mirror type.css names; --clay-chip-hover/-pressed, --clay-key* and
   --clay-on-navy are cards-local (pill and button states). The R11c tones (--clay-a / --clay-b) are NOT copied
   here — tone hexes live only in type.css; §13 falls back to --clay-blue / --clay-gold. */
:where(:root) {
  --clay: #F3F6FA;
  --clay-blue: #E6EEFB;
  --clay-gold: #FBF2DA;
  --clay-radius: 1.5rem;
  --clay-shadow:
    14px 14px 30px -6px rgb(23 42 82 / .17),
    -10px -10px 24px -6px rgb(255 255 255 / .95),
    inset 3px 3px 7px rgb(255 255 255 / .9),
    inset -5px -5px 12px rgb(23 42 82 / .07);
  --clay-shadow-hover:
    22px 22px 44px -8px rgb(23 42 82 / .23),
    -12px -12px 28px -6px rgb(255 255 255 / 1),
    inset 3px 3px 7px rgb(255 255 255 / .95),
    inset -6px -6px 14px rgb(23 42 82 / .09);
  --clay-pressed: inset 6px 6px 12px rgb(23 42 82 / .14), inset -6px -6px 12px rgb(255 255 255 / .9);
  --clay-navy: #0B3466;
  --clay-navy-shadow:
    16px 16px 36px -8px rgb(0 28 66 / .42),
    -8px -8px 22px -8px rgb(255 255 255 / .8),
    inset 3px 3px 8px rgb(255 255 255 / .14),
    inset -6px -6px 14px rgb(0 0 0 / .28);
  --clay-media-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 8px 18px -10px rgb(23 42 82 / .35);
  --ink-strong: #0C2340;
  --accent-ink: #1D428A;

  /* cards-local */
  --clay-radius-slab: 1.75rem;
  --clay-radius-media: 1rem;
  --clay-radius-tile: 1.125rem;
  --clay-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  --clay-chip-shadow:
    3px 3px 6px rgb(23 42 82 / .12),
    -3px -3px 6px rgb(255 255 255 / .9),
    inset 1px 1px 1px rgb(255 255 255 / .75);
  --clay-chip-hover:
    5px 5px 10px rgb(23 42 82 / .17),
    -4px -4px 9px rgb(255 255 255 / .95),
    inset 1px 1px 1px rgb(255 255 255 / .8);
  --clay-chip-pressed: inset 2px 2px 5px rgb(23 42 82 / .16), inset -2px -2px 5px rgb(255 255 255 / .85);
  --clay-key:                                   /* navy primary pill (34577 "solid" bevel) */
    0 1px 1px rgb(0 20 50 / .28),
    0 8px 16px -6px rgb(0 28 66 / .5),
    -3px -3px 8px -2px rgb(255 255 255 / .75),
    inset 0 1px 2px rgb(255 255 255 / .22),
    inset 0 -3px 6px rgb(0 0 0 / .32);
  --clay-key-hover:
    0 2px 2px rgb(0 20 50 / .26),
    0 14px 24px -8px rgb(0 28 66 / .55),
    -4px -4px 10px -2px rgb(255 255 255 / .8),
    inset 0 1px 2px rgb(255 255 255 / .26),
    inset 0 -3px 6px rgb(0 0 0 / .3);
  --clay-key-pressed: 0 1px 1px rgb(0 20 50 / .2), inset 0 3px 7px rgb(0 0 0 / .45), inset 0 -1px 1px rgb(255 255 255 / .08);
  --clay-on-navy:                               /* translucent white clay on navy slabs / the photo hero */
    0 8px 18px -10px rgb(0 0 0 / .5),
    inset 1px 1px 2px rgb(255 255 255 / .24),
    inset -2px -3px 6px rgb(0 0 0 / .26);
}


/* ===================================================================================================== 1. KILL LIST
   Glass sheens, rims, corner brackets, scrims and the button/row-action sweeps (site.css 231, 1781, 1804, 1886,
   2027–2042, 2136–2163, 2443, 2493, 3688). Plain list, no :is() around .card:not(.card--flat), no !important. */
.card:not(.card--flat)::before, .card:not(.card--flat)::after,
.person-tile::before, .person-tile::after,
.roster-card::before, .roster-card::after,
.news-card::before, .news-card::after,
.content-card::before, .content-card::after,
.director-card::before, .director-card::after,
.stat-card::before, .stat-card::after,
.editorial-row::after,
.editorial-row--text::before,
.pub-plate::after,
.news-card__media::after,
.btn-primary::before, .btn-primary::after,
.btn-ghost::before, .btn-ghost::after,
.row-action::before { content: none; }


/* ===================================================================================================== 2. DE-GLASS
   No backdrop blur on any card, pill or button (R3: "Do NOT reintroduce glass/backdrop-filter on cards"). */
.card:not(.card--flat), .person-tile, .roster-card, .news-card,
.content-card, .stat-card, .director-card,
.editorial-row, .pub-plate, main > section.max-w-3xl,
.btn-primary, .btn-ghost, .topic-pill, .chip, .row-action,
.news-card__badge {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ===================================================================================================== 3. CLAY FAMILY
   Light clay surface for every content card. ledger: border/background !important beat site.css 519, 2090–2109,
   3055–3071 (gradient-edge border-box backgrounds), 3125–3139 (hover), 3336–3341 (rows); .content-card also
   3075–3113 (navy, incl. box-shadow !important). `.callout-gold` is Pages' gold panel and stays out.
   Rest → --clay-shadow. Hover (motion guard, interactive cards only) → translateY(-4px) + --clay-shadow-hover,
   320ms. :active → --clay-pressed + scale(.99) (2318). The unguarded :hover pins the rest shadow and transform so
   site.css hover lifts (204, 296, 1748, 2182–2193, 2455, 2841, 3815) cannot leak under reduced motion. */
:root :is(.card:not(.card--flat):not(.callout-gold), .person-tile, .roster-card, .news-card,
          .editorial-row, .content-card) {
  background: var(--card-surface, var(--clay)) !important;
  border: 0 !important;
  border-radius: var(--clay-radius);
  box-shadow: var(--clay-shadow);
  color: var(--ink);
  isolation: auto;
  transition:
    transform 320ms var(--clay-ease),
    box-shadow 320ms var(--clay-ease),
    background-color 200ms var(--clay-ease);
}
:root :is(.card:not(.card--flat):not(.callout-gold), .person-tile, .roster-card, .news-card,
          .editorial-row, .content-card):hover {
  box-shadow: var(--clay-shadow);
  transform: none;
}
:root .content-card, :root .content-card:hover { box-shadow: var(--clay-shadow) !important; }   /* site.css 3075 */

/* Interactive = a link card, or a card holding a link/button/disclosure. Empty-state panels never lift. */
@media (prefers-reduced-motion: no-preference) {
  :root :is(.card:not(.card--flat):not(.callout-gold), .person-tile, .roster-card, .news-card,
            .editorial-row, .content-card):where(a[href], :has(a[href], button, summary)):not([class*="-empty"]):hover {
    transform: translateY(-4px);
    box-shadow: var(--clay-shadow-hover);
  }
  :root .content-card:where(a[href], :has(a[href])):hover { box-shadow: var(--clay-shadow-hover) !important; }
}
/* Pressed (2318): only while the card itself, or its own link/button, is held down — selecting text in a tile
   never squishes it. `:is(:hover, :active)` lifts these to the hover rule's weight; source order then wins. */
:root :is(.card:not(.card--flat):not(.callout-gold), .person-tile, .roster-card, .news-card,
          .editorial-row, .content-card):where(a[href]:active, :has(:is(a[href], button, summary):active)):not([class*="-empty"]):is(:hover, :active) {
  box-shadow: var(--clay-pressed);
}
:root .content-card:where(a[href]:active, :has(a[href]:active)):is(:hover, :active) { box-shadow: var(--clay-pressed) !important; }
@media (prefers-reduced-motion: no-preference) {
  :root :is(.card:not(.card--flat):not(.callout-gold), .person-tile, .roster-card, .news-card,
            .editorial-row, .content-card):where(a[href]:active, :has(:is(a[href], button, summary):active)):not([class*="-empty"]):is(:hover, :active) {
    transform: translateY(0) scale(.99);
  }
}

/* A focused link-card keeps the clay corners (the global focus rule, site.css 660, squares them to --radius-sm). */
:root :is(a, [tabindex]):is(.card, .news-card, .content-card, .person-tile, .roster-card, .editorial-row):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--clay-radius);
}

/* Role tints (8224): featured rows/cards sit on gold clay. Owners may set --card-surface: var(--clay-blue). */
.editorial-row--featured, li.is-featured > .editorial-row, .card--gold { --card-surface: var(--clay-gold); }
.card--blue { --card-surface: var(--clay-blue); }

/* Light-family text: navy-cast ink (R2), not grey and never white-on-clay. */
.content-card__title, .card__title, .news-card__title, .person-tile__name { color: var(--ink-strong); }
.content-card__excerpt, .card__excerpt, .news-card__excerpt { color: color-mix(in oklab, var(--ink) 72%, var(--ink-2)); }
.content-card__readmore { color: var(--accent-ink); }


/* ===================================================================================================== 4. NAVY CLAY
   Stat tiles and the director card are navy clay slabs: one committed navy, soft inner light + deep outer drop,
   no gold hairline edge. ledger: border/background/box-shadow !important beat site.css 3075–3113. Home styles
   their contents per region. */
:root :is(.stat-card, .director-card) {
  background: var(--clay-navy) !important;
  border: 0 !important;
  box-shadow: var(--clay-navy-shadow) !important;
  border-radius: var(--clay-radius);
  color: #fff;
  isolation: auto;
}
:root .director-card { border-radius: var(--clay-radius-slab); }
:root :is(.stat-card, .director-card):hover { transform: none; }


/* ===================================================================================================== 5. LISTS
   Rows are clay cards now, so the list spaces them instead of ruling them.
   ledger: border-top / border-top-color !important beat site.css 2464, 3346, 3347. */
.list-divider { border-top: 0 !important; border-top-color: transparent !important; display: grid; gap: 1.25rem; }
.list-divider > li + li { border-top: 0 !important; }
.editorial-row + .editorial-row, li + li > .editorial-row { margin-top: 0; }
@media (max-width: 767px) { .list-divider { gap: 1rem; } }


/* ===================================================================================================== 6. TILT RETIRED
   ledger: transform !important beats GSAP's inline transform (animations.js §9). No markup carries .tilt-card now;
   the gentle director tilt (12828) is Home's, scoped to #director-section. */
.tilt-card { transform: none !important; transform-style: flat; will-change: auto; }
.tilt-card > .tilt-inner { transform: none; }


/* ===================================================================================================== 7. MEDIA
   Inset, never edge-to-edge with a hairline (R3): radius 1rem + --clay-media-shadow; avatars are 1.125rem squircles.
   Beats site.css 300–316 (gold baseline + white rim on .content-card__media), 846–858, 1765–1773. */
.figure-panel, .news-card__media, .content-card__media, .card__media {
  border: 0;
  border-radius: var(--clay-radius-media);
  box-shadow: var(--clay-media-shadow);
  background: color-mix(in oklab, var(--clay) 82%, var(--ink-2));
  overflow: hidden;
}
.person-tile__photo, .roster-card__avatar {
  border: 0;
  border-radius: var(--clay-radius-tile);
  box-shadow: var(--clay-media-shadow);
  overflow: hidden;
}
.figure-panel > :is(img, video), .content-card__media img, .news-card__media img { border-radius: inherit; }
/* .content-card__media is inset 10px by site.css 300 (margin) — keep that inset, drop its frame. */
.content-card:hover .content-card__media { border-color: transparent; }


/* ===================================================================================================== 8. BUTTONS
   Primary = navy clay pill; ghost = clay pill. 34577 bevel: inset top light + inset bottom shade, sinks on :active.
   Replaces the liquid-glass pill (site.css 365–393, 2016–2076). min-height (not height) so a long label wraps
   instead of overflowing. */
.btn-primary, .btn-ghost {
  position: static;
  isolation: auto;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .55rem 1.35rem;
  border: 0;
  border-radius: 999px;
  font: 600 .9375rem/1.2 var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  transition:
    background-color 200ms var(--clay-ease),
    color 200ms var(--clay-ease),
    box-shadow 240ms var(--clay-ease),
    transform 240ms var(--clay-ease);
}
/* .btn-magnetic keeps its smoothed return (site.css 549); animations.js writes the transform. */
.btn-primary.btn-magnetic, .btn-ghost.btn-magnetic { transition-property: background-color, color, box-shadow, transform; }
/* Labels sit in normal flow now that the rim layer is gone (site.css 2076 lifted them to z 3). An .sr-only child
   keeps its absolute positioning, or its clip stops applying and the hidden text shows. */
.btn-primary > :not(.sr-only), .btn-ghost > :not(.sr-only) { position: static; }

.btn-primary { background: var(--clay-navy); color: #fff; box-shadow: var(--clay-key); }
.btn-primary:hover { background: var(--brand-blue, #1D428A); color: #fff; filter: none; transform: none; }
.btn-ghost { background: var(--clay); color: var(--ink-strong); box-shadow: var(--clay-chip-shadow); }
.btn-ghost:hover { background: var(--clay); color: var(--accent-ink); transform: none; }

.btn-primary svg, .btn-ghost svg { transition: transform 180ms var(--ease-settle, var(--clay-ease)); }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--clay-key-hover); }
  .btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--clay-chip-hover); }
  .btn-primary:hover svg, .btn-ghost:hover svg { transform: translateX(2px); }
}
/* Pressed after the guard so it beats the hover shadow at equal weight. */
.btn-primary:active { box-shadow: var(--clay-key-pressed); filter: none; }
.btn-ghost:active { box-shadow: var(--clay-chip-pressed); }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:active, .btn-ghost:active { transform: translateY(0) scale(.98); }
}
/* Focus ring follows the pill (site.css 660 would square it to --radius-sm). */
:is(a, button).btn-primary:focus-visible, :is(a, button).btn-ghost:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 999px;
}

/* On navy / on photo (director card, CTA band, page heroes, the hero CTA): primary turns into a white clay key
   (navy text 12.6:1), ghost into translucent white clay. ledger: background/border-color/color !important beat
   site.css 2377–2394 (`[style*="--grad-navy-band"]` is the Appendix D CTA fallback hook). */
:is(.director-card, [data-cta], [style*="--grad-navy-band"], .page-hero, .hero-cta, .on-navy) .btn-primary {
  background: #fff;
  color: var(--brand-blue-deep, #003366);
  box-shadow:
    0 10px 22px -10px rgb(0 0 0 / .55),
    inset 0 1px 2px rgb(255 255 255 / .9),
    inset 0 -3px 6px rgb(11 52 102 / .18);
}
:is(.director-card, [data-cta], [style*="--grad-navy-band"], .page-hero, .hero-cta, .on-navy) .btn-primary:hover {
  background: #F3F6FA;
  color: var(--brand-blue-deep, #003366);
}
:is(.director-card, [data-cta], [style*="--grad-navy-band"], .page-hero, .hero-cta, .on-navy) .btn-ghost {
  background: rgb(255 255 255 / .12) !important;
  border-color: transparent !important;
  color: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--clay-on-navy);
}
:is(.director-card, [data-cta], [style*="--grad-navy-band"], .page-hero, .hero-cta, .on-navy) .btn-ghost:hover {
  background: rgb(255 255 255 / .2) !important;
  border-color: transparent !important;
  color: #fff !important;
}
:is(.director-card, [data-cta], [style*="--grad-navy-band"], .page-hero, .hero-cta, .on-navy) .btn-ghost:active {
  box-shadow: inset 2px 2px 6px rgb(0 0 0 / .35), inset -1px -1px 2px rgb(255 255 255 / .12);
}


/* ===================================================================================================== 9. PILLS + CHIPS
   Clay mini-surfaces (24338): a role-tinted clay face, dual soft shadow, no border; selected = pressed well.
   Replaces the raised 3D keys and hairline pills (site.css 396–410, 699–725, 1165–1173, 2600–2650, 3353–3367).
   Host Grotesk 500 13px, tabular numerals — no mono, no uppercase (R2). */
.topic-pill, .chip {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .36rem .74rem;
  border: 0;
  border-radius: 999px;
  font: 500 .8125rem/1.1 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
  background: color-mix(in oklab, var(--role, var(--accent-ink)) 8%, var(--clay));
  background-image: none;
  color: color-mix(in oklab, var(--role, var(--accent-ink)) 70%, var(--ink-strong));
  box-shadow: var(--clay-chip-shadow);
  text-shadow: none;
  filter: none;
  transform: none;
  transition:
    color 160ms var(--clay-ease),
    background-color 160ms var(--clay-ease),
    box-shadow 200ms var(--clay-ease),
    transform 200ms var(--clay-ease);
}
.topic-pill:hover, .chip:hover { filter: none; transform: none; }
.topic-pill:active, .chip:active { transform: none; }
:is(a, button).topic-pill, :is(a, button).chip, .chip[aria-pressed] { cursor: pointer; }
:is(a, button).topic-pill:hover, :is(a, button).chip:hover { color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  :is(a, button).topic-pill:not([aria-current], [aria-pressed="true"], .is-active):hover,
  :is(a, button).chip:not([aria-current], [aria-pressed="true"], .is-active):hover {
    transform: translateY(-1px);
    box-shadow: var(--clay-chip-hover);
  }
}
:is(a, button).topic-pill:not([aria-current], [aria-pressed="true"], .is-active):active,
:is(a, button).chip:not([aria-current], [aria-pressed="true"], .is-active):active {
  transform: none;
  box-shadow: var(--clay-chip-pressed);
}
/* Selected filter / current tab = pressed into the clay. */
.chip[aria-pressed="true"], .chip.is-active, .chip[aria-current],
.topic-pill[aria-current], .topic-pill[aria-pressed="true"], .topic-pill.is-active {
  background: var(--clay);
  color: var(--ink-strong);
  font-weight: 600;
  box-shadow: var(--clay-pressed);
  filter: none;
}
:is(a, button).topic-pill:focus-visible, :is(a, button).chip:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Featured = gold clay key (Appendix A: the featured pill is a permitted gold fill; navy ink 8.34:1). */
.topic-pill--featured, .topic-pills .topic-pill--featured {
  --role: var(--brand-gold);
  background: var(--brand-gold);
  color: var(--brand-blue-deep);
  font-weight: 600;
  text-shadow: none;
  box-shadow:
    3px 3px 6px rgb(23 42 82 / .16),
    -2px -2px 5px rgb(255 255 255 / .85),
    inset 1px 1px 2px rgb(255 255 255 / .55),
    inset -2px -2px 4px rgb(138 100 0 / .28);
}
.topic-pill--muted, .topic-pills .topic-pill--muted { --role: var(--ink-2); background: var(--clay); color: var(--ink-2); }

/* On the navy page hero: translucent white clay (white .92 on navy+12% white ≈ 9:1). */
.page-hero :is(.topic-pill, .topic-pill--muted, .chip) {
  background: rgb(255 255 255 / .12);
  background-image: none;
  color: rgb(255 255 255 / .92);
  border: 0;
  box-shadow: var(--clay-on-navy);
}
.page-hero .topic-pill--featured { background: var(--brand-gold); color: var(--brand-blue-deep); border: 0; }
.page-hero :is(a, button):is(.topic-pill, .chip):not(.topic-pill--featured):hover { background: rgb(255 255 255 / .2); color: #fff; }
.page-hero :is(.topic-pill, .chip):is([aria-current], [aria-pressed="true"], .is-active) {
  background: rgb(255 255 255 / .06);
  color: #fff;
  box-shadow: inset 2px 2px 6px rgb(0 0 0 / .35), inset -1px -1px 2px rgb(255 255 255 / .12);
}


/* ===================================================================================================== 10. ROW ACTIONS
   Small clay pills in the role hue (--ra, set inline by the page modules); the clip-path sweep goes (site.css
   3666–3736; its ::before is killed in §1). No mono, no uppercase (R2). --ghost is a text button that becomes a
   pill on hover; an open disclosure stays pressed. --lg fills with the hue on hover. */
.row-action {
  position: static;
  isolation: auto;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.25rem;
  padding: .45rem .95rem;
  border: 0;
  border-radius: 999px;
  background: var(--clay);
  color: color-mix(in oklab, var(--ra, var(--accent-ink)) 74%, var(--ink-strong));
  font: 600 .8125rem/1.1 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: var(--clay-chip-shadow);
  transition:
    color 160ms var(--clay-ease),
    background-color 160ms var(--clay-ease),
    box-shadow 200ms var(--clay-ease),
    transform 200ms var(--clay-ease);
}
.row-action:is(:hover, :focus-visible) { color: color-mix(in oklab, var(--ra, var(--accent-ink)) 88%, var(--ink-strong)); border-color: transparent; }
.row-action:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .row-action:hover { transform: translateY(-1px); box-shadow: var(--clay-chip-hover); }
  .row-action:active { transform: translateY(0) scale(.98); }
  .row-action:hover svg { transform: translate(2px, -2px); }
}
.row-action:active, details[open] > summary.row-action { box-shadow: var(--clay-chip-pressed); }
.row-action--ghost { background: transparent; box-shadow: none; }
.row-action--ghost:is(:hover, :focus-visible) { background: var(--clay); }
details[open] > summary.row-action--ghost { background: var(--clay); }
.editorial-row summary.row-action--ghost { margin-inline-start: -.95rem; }
.row-action--lg { min-height: 2.75rem; padding: .6rem 1.3rem; font: 600 .9375rem/1.2 var(--font-sans); }
.row-action--lg:is(:hover, :focus-visible) { background: var(--ra); color: var(--ra-ink, #fff); }


/* ===================================================================================================== 11. EDITORIAL ROW ANATOMY
   [figure] + div.min-w-0 > meta row + title + byline + excerpt + [details] + ul.topic-pills, inside a clay card.
   Shared, unscoped rules only; page owners set grid columns (card grids / feature cards) per region. */
.editorial-row {
  padding: var(--card-pad, clamp(1.125rem, 1rem + .6vw, 1.5rem));
  gap: 1rem clamp(1rem, .8rem + 1vw, 1.5rem);
  transition:
    transform 320ms var(--clay-ease),
    box-shadow 320ms var(--clay-ease),
    background-color 200ms var(--clay-ease);
}

/* Meta row (the former kicker row): plain Host Grotesk meta, tabular — not an eyebrow. Owners place it after the
   title (R1); the gap reads correctly in either position. Overrides type.css §2.3's mono uppercase values. */
.editorial-row__kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  margin: .5rem 0;
  font: 500 .8125rem/1.4 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Title: Bricolage 600, navy-cast ink; the link recolours to --accent-ink with an underline on hover. */
.editorial-row__title {
  font: 600 clamp(1.125rem, 1.04rem + .4vw, 1.375rem)/1.25 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  text-wrap: pretty;
}
.editorial-row__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
  transition: color 220ms var(--clay-ease), text-decoration-color 220ms var(--clay-ease);
}
.editorial-row__title a svg { color: var(--ink-2); }
.editorial-row:hover .editorial-row__title a,
.editorial-row__title a:focus-visible { color: var(--accent-ink); text-decoration-color: currentColor; }

/* Excerpt + opened abstract: body copy in a navy-cast ink between --ink and --ink-2. */
.editorial-row__excerpt {
  margin-top: .5rem;
  font: 400 clamp(.9375rem, .9rem + .15vw, 1rem)/1.6 var(--font-sans);
  color: color-mix(in oklab, var(--ink) 72%, var(--ink-2));
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
/* The abstract opens into a pressed clay well (no gold rule — R3 bans hairlines). */
.editorial-row details > p {
  margin-top: .75rem;
  padding: .9rem 1.1rem;
  border: 0;
  border-radius: var(--clay-radius-media);
  background: transparent;
  box-shadow: var(--clay-pressed);
  font: 400 .9375rem/1.65 var(--font-sans);
  color: var(--ink);
}

/* Figure: slightly desaturated at rest, full colour + 3% zoom on row hover (motion-guarded). */
.editorial-row .figure-panel > img {
  filter: saturate(.92);
  transition: transform 600ms var(--clay-ease), filter 400ms var(--clay-ease);
}
.editorial-row:hover .figure-panel > img { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .editorial-row:hover .figure-panel > img { transform: scale(1.03); filter: saturate(1); }
}


/* ===================================================================================================== 12. PUB-PLATE
   The no-image fallback is a navy clay well inside the media frame: committed navy, inner light/shade, a faint dot
   grid and the split gold baseline. background-COLOR (longhand) so the news artwork keeps its site.css
   background-image. isolation keeps the plate's z-indexed layers off the card's own badges.
   Only `.pub-plate.pub-plate--news > .pub-plate__weave` is still emitted (home.js news lead fallback); the other
   plate variants and the label/kicker/year/name/typebadge children were retired with R1 / R10. */
.pub-plate {
  --plate-bg: var(--clay-navy);
  background-color: var(--plate-bg);
  border: 0;
  border-radius: inherit;
  color: #fff;
  box-shadow: inset 3px 3px 8px rgb(255 255 255 / .12), inset -6px -6px 14px rgb(0 0 0 / .3);
  isolation: isolate;
}
.pub-plate:hover { transform: none; }                                    /* site.css 1748 lifted it unguarded */
/* Re-adds (after the §1 kill list): the dot grid over everything, the artwork dim under it. */
.pub-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgb(255 255 255 / .11) 1px, transparent 1.2px) 0 0 / 16px 16px;
}
.pub-plate--news::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  box-shadow: none;                                                     /* site.css 1781's gold ring stays gone */
  pointer-events: none;
  background: color-mix(in oklab, var(--clay-navy) 55%, transparent);
}
.pub-plate__weave {
  z-index: 2;
  background:
    linear-gradient(90deg, var(--brand-gold) 0 40%, color-mix(in oklab, var(--brand-gold) 35%, transparent) 40% 100%)
    left bottom / 100% 3px no-repeat;
}
/* Inside a news-card media frame the plate follows the frame's own corners. */
.news-card__media > .pub-plate { border-radius: inherit; }


/* ===================================================================================================== 13. TWO-TONE CARDS (R11 + R11b + R11c)
   Light blue clay (A) and light gold clay (B) alternate card by card so neighbouring cards separate visibly (8224
   tinted surfaces). The split comes from the blue-vs-cream hue plus the clay shadow alone: NO top colour bar, no
   inset accent, no stripe (R11b). Tone hexes live only in type.css (--clay-a #EDF3FC / --clay-b #FEF7E4, R11c).
   Page owners opt in:
     • `.tone-alt` on a grid/list: odd items → A, even → B (`:nth-child` on the grid item, so the pattern holds
       after every filter / page re-render). An item that IS the card is painted; an item that wraps one
       (li > article / .content-card / .news-card / .editorial-row / .card) stays bare and the card inside is painted.
     • `.tone-a` / `.tone-b` on a single card where position can't decide. Use one scheme per list.
   Paint = tone surface + the ordinary clay stack at rest, --clay-shadow-hover on hover (same surface: the tone
   holds), --clay-pressed while pressed. Specificity stays ≤ (0,4,0) on purpose: these are defaults, and a region
   rule (`#grants-list .grant-card`, `#pub-list .pub-card` …) restyles freely. Family cards (§3) take the tone
   through --card-surface, so their !important ledger holds. Holders expose --tone-surface for owners' own rules.
   Text stays AA on both tones (type.css: --ink-2 ≥ 4.9:1); titles stay --ink-strong. Chips, pills and ghost
   buttons inside a tone are white clay (never gold-on-gold). */
:is(.tone-a, .tone-alt > :nth-child(odd))  { --tone-surface: var(--clay-a, var(--clay-blue)); }
:is(.tone-b, .tone-alt > :nth-child(even)) { --tone-surface: var(--clay-b, var(--clay-gold)); }

:is(.tone-a, .tone-b, .tone-alt > *):not(:has(> :is(.content-card, .editorial-row, .news-card, .card, article)), [class*="-empty"]),
:is(.tone-a, .tone-b, .tone-alt > *) > :is(.content-card, .editorial-row, .news-card, .card, article) {
  --card-surface: var(--tone-surface);
  border: 0;
  border-radius: var(--clay-radius);
  background: var(--tone-surface);
  box-shadow: var(--clay-shadow);
}
@media (prefers-reduced-motion: no-preference) {
  :is(.tone-a, .tone-b, .tone-alt > *):not(:has(> :is(.content-card, .editorial-row, .news-card, .card, article)), [class*="-empty"]):where(a[href], :has(a[href], button, summary)):hover,
  :is(.tone-a, .tone-b, .tone-alt > *) > :is(.content-card, .editorial-row, .news-card, .card, article):where(a[href], :has(a[href], button, summary)):hover {
    box-shadow: var(--clay-shadow-hover);
  }
}
:is(.tone-a, .tone-b, .tone-alt > *):not(:has(> :is(.content-card, .editorial-row, .news-card, .card, article)), [class*="-empty"]):where(a[href]:active, :has(:is(a[href], button, summary):active)):is(:hover, :active),
:is(.tone-a, .tone-b, .tone-alt > *) > :is(.content-card, .editorial-row, .news-card, .card, article):where(a[href]:active, :has(:is(a[href], button, summary):active)):is(:hover, :active) {
  box-shadow: var(--clay-pressed);
}

/* White clay chips inside a toned card; selected chips keep their pressed well, the featured pill stays gold. */
:is(.tone-a, .tone-b, .tone-alt > *) :is(.topic-pill, .chip):not(.topic-pill--featured, [aria-current], [aria-pressed="true"], .is-active),
:is(.tone-a, .tone-b, .tone-alt > *) :is(.row-action:not(.row-action--ghost), .btn-ghost, .btn-ghost:hover),
:is(.tone-a, .tone-b, .tone-alt > *) :is(.row-action--ghost:is(:hover, :focus-visible), details[open] > summary.row-action--ghost) {
  background: #fff;
}


/* ===================================================================================================== 14. FORCED COLORS
   Shadows are dropped in forced-colors mode, so borderless clay would lose its edges; give the system a real one.
   The two-tone targets get one too, whichever region rule paints them. */
@media (forced-colors: active) {
  :root :is(.card, .person-tile, .roster-card, .news-card, .editorial-row, .content-card,
            .stat-card, .director-card, .topic-pill, .chip, .row-action, .btn-primary, .btn-ghost),
  :is(.tone-a, .tone-b, .tone-alt > *):not(:has(> :is(.content-card, .editorial-row, .news-card, .card, article)), [class*="-empty"]),
  :is(.tone-a, .tone-b, .tone-alt > *) > :is(.content-card, .editorial-row, .news-card, .card, article) {
    border: 1px solid CanvasText !important;
  }
}