/* COLLECTIVE PAGE — local styles. Prefix: c- */

/* Full-bleed photograph behind the hero copy, sharp and in full colour.

   Sharpness costs contrast. The sky in this frame reaches pure white, so the
   scrim is heavier than a softer frame would need, and the numbers were
   measured against this image rather than carried over. The gradient runs
   left-to-right so the copy has dark ground while the assembly stays visible on
   the right. Below 900px the copy spans the full width and it turns vertical. */
.c-hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 120px 0 108px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  isolation: isolate;
}
.c-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.c-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 68%;
  display: block;
  /* Shifted right so the trunk and the person standing beside it clear the dark
     end of the scrim. The hero is wider than the photograph's own aspect, so
     cover crops vertically and object-position's X has no effect — the shift has
     to come from an overscale plus a translate. scale(1.16) leaves 8% spare on
     each side; translating 6% keeps the left edge covered with room over. */
  transform: scale(1.16) translateX(6%);

}
.c-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(17,21,28,0.95) 0%,
    rgba(17,21,28,0.92) 44%,
    rgba(17,21,28,0.70) 64%,
    rgba(17,21,28,0.40) 82%,
    rgba(17,21,28,0.26) 100%);
}
.c-hero__grid { position: relative; }
.c-hero__copy { max-width: 56%; }
.c-hero__eyebrow { margin-bottom: 22px; }
.c-hero__title {
  font-family: var(--display);
  font-size: clamp(60px, 8vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.028em;
  font-weight: 400;
  color: var(--paper);
  margin-bottom: 32px;
  text-wrap: balance;
}
/* Joel asked for the blue here. Plain --petrol measures 1.00:1 against this
   scrimmed photograph — the same luminance as its background, so literally
   invisible. --petrol-lift is that blue raised for dark ground and lands at
   4.49:1, where the saffron it replaces was 4.46:1. */
.c-hero__title em { font-style: italic; color: var(--petrol-lift); }
.c-hero__lead {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.35;
  color: rgba(243,235,221,0.92);
  max-width: 46ch;
  margin-bottom: 18px;
}
.c-hero__body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(243,235,221,0.86);
  max-width: 52ch;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .c-hero { padding: 88px 0 76px; }
  .c-hero__copy { max-width: none; }
  .c-hero__bg::after {
    background: linear-gradient(180deg,
      rgba(17,21,28,0.84) 0%,
      rgba(17,21,28,0.82) 60%,
      rgba(17,21,28,0.76) 100%);
  }
}

.c-section-head {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 48px;
}
.c-section-head__title { max-width: 18ch; }
.c-section-head__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--steel);
  max-width: 56ch;
}

.c-people {
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0;
  overflow: hidden;
}
.c-people .c-section-head__body { color: rgba(243,235,221,0.7); }
.c-category {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saffron);
  margin: 36px 0 18px;
  display: flex; align-items: center; gap: 14px;
}
.c-category::after {
  content: '';
  flex: 1; height: 1px;
  background: rgba(243,235,221,0.14);
}
/* Nothing on the site links here any more. The chair/co-chair pill in the
   training section did, until 11 August 2026, when it became a dialog button
   like its neighbours rather than a jump. The id and this rule are kept
   because the anchor is public — the site header is sticky, so anyone
   arriving on /collective/#current-members from a bookmark or a shared link
   needs the heading to clear it or it lands underneath. */
#current-members { scroll-margin-top: 112px; }

.c-training {
  padding: 96px 0;
  background: var(--paper-2);
}
.c-training__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.c-training__copy {
  padding: 48px;
  border-radius: var(--r-card-lg);
  background: var(--paper);
  border: 1px solid var(--rule);
}
.c-training__copy .section-title { margin-top: 14px; margin-bottom: 22px; }
.c-training__copy p { font-size: 15.5px; line-height: 1.6; color: var(--steel); max-width: 44ch; }
.c-training__metric {
  padding: 48px;
  border-radius: var(--r-card-lg);
  background: linear-gradient(150deg, #232b27 0%, #161c19 100%);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(243,235,221,0.08);
}
.c-training__metric::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(247,241,230,0.04) 1px, transparent 1px),
    radial-gradient(rgba(247,241,230,0.03) 1px, transparent 1px);
  background-size: 28px 28px, 60px 60px;
  background-position: 0 0, 14px 30px;
  pointer-events: none;
}
.c-training__metric > * { position: relative; }
.c-bignum {
  font-family: var(--display);
  font-size: clamp(86px, 9vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 400;
  color: var(--paper);
  margin-bottom: 14px;
}
.c-bignum-lbl {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(243,235,221,0.72);
  max-width: 40ch;
  margin-bottom: 30px;
}
.c-mini-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.c-partners { padding: 96px 0; background: var(--paper); }
.c-partners__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.c-partners__list { display: grid; }
.c-partner {
  padding: 24px 0;
  border-top: 1px solid var(--rule-strong);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
}
.c-partner:last-child { border-bottom: 1px solid var(--rule-strong); }
.c-partner__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--saffron);
  padding-top: 4px;
}
.c-partner__title {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 6px;
}
.c-partner__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--steel);
}

/* This band used to be --paper, like the partners section directly above it and
   with no rule between them, so the two read as one long stretch of cream. It
   now carries a photograph under a scrim — which both answers Joel's request
   for a hero-style treatment and supplies the missing divider, since the change
   of ground is the divider.

   The gradient is vertical and eases as it descends: heaviest where the heading
   sits, lightest at the foot of the frame where the river and the cobbled bank
   are, so the photograph is actually legible rather than merely present. The
   --ink cta-band that follows is flat colour, and a photograph under a scrim
   reads differently enough from flat ink that the two do not merge; the hairline
   at the bottom edge settles it. */
.c-wayfinder {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0;
  border-bottom: 1px solid rgba(243,235,221,0.10);
  overflow: hidden;
  isolation: isolate;
}
.c-wayfinder__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.c-wayfinder__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* The band is far wider than the photograph's 4:3, so cover crops vertically
     and object-position's X is inert. 62% holds the canoe and the near bank in
     frame and drops most of the empty sky. */
  object-position: center 62%;
  display: block;
}
.c-wayfinder__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(17,21,28,0.90) 0%,
    rgba(17,21,28,0.88) 28%,
    rgba(17,21,28,0.66) 66%,
    rgba(17,21,28,0.52) 100%);
}
.c-wayfinder .container { position: relative; }
.c-wayfinder .section-title { color: var(--paper); }
.c-wayfinder .c-section-head__body { color: rgba(243,235,221,0.86); }

.c-wayfinder__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Glass rather than paper. Solid cream cards over a photograph would hide the
   thing we just put there; these carry their own slight ground so the text has
   somewhere to sit while the frame still shows through. Same construction as the
   committee pills in the training section, so the two dark surfaces on this page
   are built the same way. */
.c-route {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 36px;
  padding: 26px;
  min-height: 220px;
  background: rgba(17,21,28,0.42);
  border: 1px solid rgba(243,235,221,0.18);
  border-radius: var(--r-card);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  text-decoration: none;
  color: inherit;
}
.c-route:hover {
  transform: translateY(-3px);
  background: rgba(17,21,28,0.54);
  border-color: rgba(243,235,221,0.34);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.55);
  opacity: 1;
}
.c-route:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 3px;
}
.c-route__title {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--paper);
  margin-bottom: 8px;
}
.c-route__body {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(243,235,221,0.82);
}
/* Inverted from the light version — an --ink chip would vanish into the card. */
.c-route__arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 16px;
  align-self: flex-start;
}

@media (max-width: 1100px) {
  .c-hero__grid,
  .c-section-head,
  .c-method__grid,
  .c-training__grid,
  .c-partners__grid { grid-template-columns: 1fr; gap: 32px; }
  .c-wayfinder__grid { grid-template-columns: repeat(2, 1fr); }
  .c-mini-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .c-wayfinder__grid,
  .c-mini-metrics { grid-template-columns: 1fr; }
  .c-training__copy,
  .c-training__metric { padding: 32px; }
}

/* =========================================================
   PROTOTYPE — equalised peer cards + constellation layout
   Additive. New class names, nothing above is touched, so the
   existing collective page renders exactly as before.
   Delete whichever of these is not chosen.
   ========================================================= */

.c-peer {
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid rgba(243,235,221,0.12);
  background: rgba(255,255,255,0.035);
  display: flex; flex-direction: column;
  gap: 16px;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.c-peer:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(243,235,221,0.22);
  transform: translateY(-2px);
}

/* A portrait band across the full width of the card. The previous 72px circle
   made people hard to tell apart, which defeats the point of a page about who
   the collective is. object-position sits high so faces land in frame on the
   portraits that were shot loose. */
.c-peer__portrait {
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, #4a5340 0%, #2a3027 80%);
  border-bottom: 1px solid rgba(243,235,221,0.12);
  overflow: hidden;
}
.c-peer__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.c-peer__portrait--initials {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 46px;
  letter-spacing: 0.08em;
  color: rgba(243,235,221,0.92);
}
.c-peer__body {
  padding: 20px 22px 24px;
  display: flex; flex-direction: column;
  gap: 14px;
  flex: 1;
}
.c-peer--lead .c-peer__portrait { border-bottom-color: var(--rule-strong); }
.c-peer__id { }
.c-peer__name {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.004em;
  color: var(--paper);
  margin-bottom: 4px;
}
.c-peer__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--saffron-lift);
}
.c-peer__focus {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(243,235,221,0.78);
}
.c-peer__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; }
.c-peer__links a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243,235,221,0.62);
  border-bottom: 1px solid rgba(243,235,221,0.22);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.c-peer__links a:hover,
.c-peer__links a:focus-visible {
  color: var(--petrol-lift);
  border-color: var(--petrol-lift);
}

/* --- Prototype A: even grid ------------------------------------------- */
.c-peers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .c-peers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .c-peers-grid { grid-template-columns: 1fr; }
}

/* --- The lead card ---------------------------------------------------- */
/* Joel asked for the director's card to be quickly discernible. It inverts:
   paper ground, ink text, while every other card stays dark. The distinction
   is deliberately only a colour — same template, same heading level, same
   avatar size, same amount of text — so it reads as "start here" rather than
   as rank. Contrast on the inverted card: ink on paper 15.50, petrol on paper
   9.01, ink-soft on paper 11.07. */
.c-peer--lead {
  background: var(--paper);
  border-color: var(--rule-strong);
}
.c-peer--lead:hover {
  background: #f5f2ea;
  border-color: var(--petrol);
}
.c-peer--lead .c-peer__expand { color: var(--ink); }
.c-peer--lead .c-peer__role { color: var(--petrol); }
.c-peer--lead .c-peer__focus { color: var(--ink-soft); }
/* The links had no resting colour on this card until 9 August 2026, so they
   inherited the dark card's rgba(243,235,221,0.62) — paper-coloured text on a
   paper ground, about 1.05:1, rendered and unreadable. --petrol is 9.01:1 here.
   The hover rule below it was the other half of the same miss: its first
   selector read `.c-peer--lead .c-peer--lead`, which cannot match anything, so
   only :focus-visible ever took the override. */
.c-peer--lead .c-peer__links a {
  color: var(--petrol);
  border-bottom-color: rgba(30,66,88,0.35);
}
.c-peer--lead .c-peer__links a:hover,
.c-peer--lead .c-peer__links a:focus-visible {
  color: #16334a;
  border-bottom-color: #16334a;
}

/* --- Expandable cards -------------------------------------------------- */
/* Only cards that open something get the pointer. Alumni cards render no button
   and no dialog, so they must not look clickable. */
.c-peer[data-peer-card] { cursor: pointer; }

/* The name is a button so the expansion is reachable by keyboard and announced
   as an control. It should still look like the heading it sits inside. */
.c-peer__expand {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.c-peer__expand:focus-visible {
  outline: 2px solid var(--petrol-lift);
  outline-offset: 3px;
  border-radius: 2px;
}
.c-peer--lead .c-peer__expand:focus-visible { outline-color: var(--petrol); }

.c-peer-modal {
  width: min(640px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  padding: 0;
  border: 1px solid rgba(243,235,221,0.16);
  border-radius: var(--r-card-lg);
  background: #171c24;
  color: var(--paper);
  overflow: auto;
  /* The FLIP transition scales the whole dialog, so the transform origin has to
     be the centre for the movement to read as travel rather than stretch. */
  transform-origin: center center;
}
.c-peer-modal::backdrop {
  background: rgba(10, 13, 18, 0.72);
  backdrop-filter: blur(3px);
}
.c-peer-modal--lead {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule-strong);
}
.c-peer-modal__inner { padding: 32px; position: relative; }
.c-peer-modal__close {
  position: absolute;
  top: 16px; right: 18px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(243,235,221,0.24);
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.c-peer-modal__close:hover { background: rgba(255,255,255,0.08); }
.c-peer-modal__close:focus-visible { outline: 2px solid var(--petrol-lift); outline-offset: 2px; }
.c-peer-modal--lead .c-peer-modal__close { border-color: var(--rule-strong); }
.c-peer-modal--lead .c-peer-modal__close:hover { background: rgba(17,21,28,0.06); }
.c-peer-modal--lead .c-peer-modal__close:focus-visible { outline-color: var(--petrol); }

.c-peer-modal__head {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 24px;
  padding-right: 44px;
}
.c-peer-modal__portrait {
  width: 108px; height: 108px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(140deg, #4a5340 0%, #2a3027 80%);
  border: 1px solid rgba(243,235,221,0.18);
}
.c-peer-modal--lead .c-peer-modal__portrait { border-color: rgba(17,21,28,0.22); }
.c-peer-modal__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.c-peer-modal__portrait--initials {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 28px;
  letter-spacing: 0.08em;
  color: rgba(243,235,221,0.92);
}
.c-peer-modal__name {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.014em;
  margin-bottom: 8px;
}
.c-peer-modal__role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--saffron-lift);
}
.c-peer-modal--lead .c-peer-modal__role { color: var(--petrol); }
.c-peer-modal__body { display: grid; gap: 14px; }
.c-peer-modal__body p {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(243,235,221,0.82);
}
.c-peer-modal--lead .c-peer-modal__body p { color: var(--ink-soft); }
/* --- Optional profile blocks: active research, funding, note, keyword pills ---
   Moved off the About page's director block on 9 August 2026. Every rule below
   is written for both modal grounds, because the fields are generic even though
   only the lead card carries them today: the default is the dark modal
   (#171c24), and the .c-peer-modal--lead override is the paper one. Get one of
   those pairs wrong and the text is invisible on exactly one card. */
.c-peer-modal__foci {
  margin-top: 26px;
  border-top: 1px solid rgba(243,235,221,0.16);
  border-bottom: 1px solid rgba(243,235,221,0.16);
  padding: 22px 0;
}
.c-peer-modal--lead .c-peer-modal__foci {
  border-top-color: var(--rule);
  border-bottom-color: var(--rule);
}
.c-peer-modal__foci__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saffron-lift);
  margin-bottom: 16px;
}
/* --saffron-lift is 9.68:1 on --ink but 1.60:1 on --paper. The light modal
   takes --petrol at 9.01:1 — the same swap the role line above makes for the
   same reason. */
.c-peer-modal--lead .c-peer-modal__foci__label { color: var(--petrol); }

.c-peer-modal__foci__list {
  list-style: none;
  counter-reset: foci;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.c-peer-modal__foci__list li {
  counter-increment: foci;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(243,235,221,0.76);
}
.c-peer-modal--lead .c-peer-modal__foci__list li { color: var(--ink-soft); }
.c-peer-modal__foci__list li::before {
  content: counter(foci, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(243,235,221,0.42);
  padding-top: 3px;
}
.c-peer-modal--lead .c-peer-modal__foci__list li::before { color: var(--steel); }

.c-peer-modal__funding {
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(243,235,221,0.82);
}
.c-peer-modal--lead .c-peer-modal__funding { color: var(--ink-soft); }

.c-peer-modal__note {
  margin-top: 20px;
  border-left: 2px solid var(--poppy);
  padding: 4px 0 4px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(243,235,221,0.7);
}
.c-peer-modal--lead .c-peer-modal__note { color: var(--steel); }

/* Keyword pills. The horizontal padding is trimmed here rather than on the
   global .tag — that class is also used on research, publications and post
   pages. No tag--dark/tag--light modifier: the ground depends on which modal
   this is, so both are handled here. */
.c-peer-modal__tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.c-peer-modal__tags .tag {
  padding: 6px 11px 6px 9px;
  gap: 7px;
  color: rgba(243,235,221,0.92);
  border: 1px solid rgba(239,236,228,0.42);
  background: rgba(255,255,255,0.02);
}
.c-peer-modal--lead .c-peer-modal__tags .tag {
  color: var(--ink-soft);
  border-color: var(--rule-strong);
  background: rgba(255,253,248,0.6);
}
/* A dot per pill, cycling three accents. Decorative — no meaning is attached to
   which colour lands where — but each set is picked for its own ground: saffron
   8.25:1, petrol-lift 8.30:1 and canopy-lift 8.15:1 on --ink; petrol 9.01:1,
   canopy 8.31:1 and poppy 5.09:1 on --paper. */
.c-peer-modal__tags .tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pill-dot, var(--saffron));
  flex-shrink: 0;
}
.c-peer-modal__tags .tag:nth-child(3n + 1) { --pill-dot: var(--saffron); }
.c-peer-modal__tags .tag:nth-child(3n + 2) { --pill-dot: var(--petrol-lift); }
.c-peer-modal__tags .tag:nth-child(3n + 3) { --pill-dot: var(--canopy-lift); }
.c-peer-modal--lead .c-peer-modal__tags .tag:nth-child(3n + 1) { --pill-dot: var(--petrol); }
.c-peer-modal--lead .c-peer-modal__tags .tag:nth-child(3n + 2) { --pill-dot: var(--canopy); }
.c-peer-modal--lead .c-peer-modal__tags .tag:nth-child(3n + 3) { --pill-dot: var(--poppy); }

.c-peer-modal__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.c-peer-modal__links a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243,235,221,0.68);
  border-bottom: 1px solid rgba(243,235,221,0.26);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.c-peer-modal__links a:hover,
.c-peer-modal__links a:focus-visible {
  color: var(--petrol-lift);
  border-color: var(--petrol-lift);
}
.c-peer-modal--lead .c-peer-modal__links a {
  color: var(--petrol);
  border-bottom-color: rgba(30,66,88,0.35);
}
.c-peer-modal--lead .c-peer-modal__links a:hover,
.c-peer-modal--lead .c-peer-modal__links a:focus-visible { color: #16334a; border-color: #16334a; }

@media (max-width: 560px) {
  .c-peer-modal__inner { padding: 24px 20px; }
  .c-peer-modal__head { flex-direction: column; align-items: flex-start; gap: 14px; padding-right: 34px; }
  .c-peer-modal__portrait { width: 84px; height: 84px; }
}

/* --- Committee pills, and the lists they open ------------------------- */
/* These replaced four decorative theme pills. They are buttons because they do
   something; the hover and focus states say so before the click does. */
.c-committee-pill {
  grid-column: span 2;
  text-align: left;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(243,235,221,0.18);
  background: rgba(255,255,255,0.04);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.c-committee-pill:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--saffron);
  transform: translateY(-1px);
}
.c-committee-pill:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 3px;
}
.c-committee-pill__num {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--saffron);
  flex-shrink: 0;
}
.c-committee-pill__lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.45;
  color: rgba(243,235,221,0.86);
}

/* The --jump modifier, its arrow and its visually-hidden hint were deleted on
   11 August 2026 when the first pill stopped navigating and started opening a
   dialog like the other two. All three are plain buttons now. */

.c-committee-modal {
  width: min(620px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  padding: 0;
  border: 1px solid rgba(243,235,221,0.16);
  border-radius: var(--r-card-lg);
  background: #171c24;
  color: var(--paper);
  overflow: auto;
}
.c-committee-modal::backdrop {
  background: rgba(10,13,18,0.72);
  backdrop-filter: blur(3px);
}
.c-committee-modal__inner { padding: 32px; position: relative; }
.c-committee-modal__close {
  position: absolute;
  top: 16px; right: 18px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(243,235,221,0.24);
  background: none;
  color: inherit;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.c-committee-modal__close:hover { background: rgba(255,255,255,0.08); }
.c-committee-modal__close:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.c-committee-modal__title {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 27px);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.15;
  padding-right: 44px;
  margin-bottom: 10px;
}
.c-committee-modal__blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(243,235,221,0.72);
  margin-bottom: 24px;
}
.c-committee-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.c-committee-list__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 0;
  border-top: 1px solid rgba(243,235,221,0.12);
}
.c-committee-list__name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  color: var(--paper);
}
.c-committee-list__where {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(243,235,221,0.78);
}
.c-committee-list__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--saffron-lift);
}

@media (max-width: 720px) {
  .c-committee-pill { grid-column: span 2; }
  .c-committee-modal__inner { padding: 24px 20px; }
}

/* --- The method as a cycle -------------------------------------------- */
/* The travelling dash. Motion is along the path, so nothing rotates and no text
   moves — spinning labels are hard to read and a vestibular problem besides. */


/* --- Woven corner mark, right of the principles ------------------------- */
/* .atlas already carries position: relative and overflow: hidden in styles.css,
   and .atlas .container is already z-index 1, so this needs no new stacking
   work — it sits at z-index 0 underneath.

   Note this is NOT the .layer-topo system. That one is dormant sitewide: it
   renders at opacity 0 unless <body> carries .show-topo, which nothing sets.
   Waking it would have changed the homepage and about sections at the same
   time, so this is its own element.

   WHERE THIS ACTUALLY READS. .atlas-card is background: var(--paper), opaque,
   and four of them fill the 2.2fr column across the whole right side. A mark
   anchored right is therefore covered wherever the cards are. What is left for
   it is real but specific: the section's top padding above the card row, and —
   on viewports wider than the container — the page margin outside .container,
   which is full-bleed --paper. `contain` keeps the square whole and sizes it to
   the section height, so it fills that corner rather than being cropped to a
   sliver of itself. If more of it is wanted, the cards would have to stop being
   opaque, which is a bigger decision than this rule. */
/* The HOW WE WORK section and the animated heading it carried were removed on
   11 August 2026: the section is gone from this page entirely, and the
   animation moved to the landing page, above the research statement. Its rules
   live in landing.css now. */

.atlas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/assets/img/weave-corner.svg');
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
  opacity: 0.30;
}

/* Below 1100px the grid collapses to one column and the cards stack over most
   of it, which is why it eases off rather than fighting for space it no longer
   has. */
@media (max-width: 1100px) {
  .atlas::before { opacity: 0.18; }
}