/* ============================================================================
   ICResG — Composition
   Loaded last. This is the layer that decides RHYTHM: how a page is paced,
   which sections carry weight, and where the eye is meant to land.

   The problem it solves: every section used to be the same shape — eyebrow,
   heading, "view all", equal card grid — so nothing could be more important
   than anything else. Alternating background colour was the only variation.
   Here each section type gets a distinct architecture, and the page reads as
   a composed document rather than a stack of identical rows.

   Archetypes:
     .masthead      the opening statement — type-led, live work as counterweight
     .sec--split    sticky heading beside flowing content (essays, statements)
     .sec--lead     one dominant item, the rest supporting (featured work)
     .sec--index    numbered editorial rows (things that are genuinely a set)
     .sec--rail     horizontal scroll (logos, long flat lists)
     .sec           the plain grid, now the exception rather than the default
   ========================================================================== */

/* ============================================================== masthead ===
   Built to match chijiukaakuma.com, which the client designed and likes:
   slate ground, ONE electric blue, very heavy display weight with tight
   tracking, a short row of pill chips instead of a paragraph of detail, and
   the key figures anchored along the base. Left-aligned on desktop; centring
   is a small-screen fallback only.
   ========================================================================== */
.masthead {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(28rem, 76vh, 46rem);
  padding-block: clamp(2.25rem, 1.9rem + 2vw, 3.75rem) clamp(3rem, 2.6rem + 2.4vw, 5rem);
  background: var(--deep);
  color: #fff;
  /* Left-aligned on any real screen. Centring is a small-screen fallback
     only — on desktop it wastes the measure and reads as a landing page. */
  text-align: left;
  overflow: hidden;
}

/* Optional photograph, set from the dashboard. */
.masthead__media {
  position: absolute; inset: 0; z-index: -3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .38;
}
/* A scrim over the photograph, weighted to the left where the headline and
   lead sit. Without it the hero's legibility depends on whichever image an
   administrator happens to upload — a bright one would put white text on a
   pale ground. This keeps the reading side dark whatever the picture. */
.masthead__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(10, 17, 32, .92) 0%,
      rgba(10, 17, 32, .78) 32%,
      rgba(10, 17, 32, .34) 62%,
      rgba(10, 17, 32, .18) 100%),
    linear-gradient(to top, rgba(10, 17, 32, .55), transparent 45%);
}
@media (max-width: 767.98px) {
  /* Narrow screens put the text over the whole frame, so the scrim is even. */
  .masthead__media::after {
    background: linear-gradient(180deg, rgba(10, 17, 32, .82), rgba(10, 17, 32, .92));
  }
}
/* Two soft blue blooms give the flat slate depth without a picture. */
/* The lab scene. Anchored bottom-right and bled off both edges: floated in
   the middle it read as a small vignette surrounded by dead space. Kept
   adjacent to its siblings so a future edit to this section moves it too —
   an earlier version was appended to the end of the file and got removed
   with an unrelated block, which silently dropped the hero to a static img. */
.masthead__scene {
  position: absolute;
  z-index: -3;
  right: -6%;
  bottom: -8%;
  width: clamp(620px, 74vw, 1320px);
  opacity: .72;
  pointer-events: none;
  /* Faded on the left and top so the headline over it always wins. */
  -webkit-mask-image: linear-gradient(to left, #000 52%, transparent 98%),
                      linear-gradient(to top, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, #000 52%, transparent 98%),
              linear-gradient(to top, #000 68%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 991.98px) {
  .masthead__scene { right: -14%; bottom: -2%; width: 132%; opacity: .2; }
}

.masthead__glow {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(56% 52% at 22% 10%, rgba(37, 99, 235, .30) 0%, transparent 64%),
    radial-gradient(46% 44% at 82% 92%, rgba(37, 99, 235, .16) 0%, transparent 66%),
    linear-gradient(180deg, transparent 55%, rgba(10, 17, 32, .85) 100%);
  pointer-events: none;
}

.masthead__inner {
  max-width: 62rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* No mobile centring. This `align-items: center` survived the switch to a
   left-aligned hero: because the inner is a flex column, centring the items
   shrink-wrapped each child and pushed it to the middle, so the headline sat
   on a different axis from the lead, the chips and the buttons under it —
   even though every one of them computed `text-align: left`. */

/* Availability pill — a live signal, not decoration. */
.masthead__pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45em 1.1em;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.masthead__pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: mh-pulse 2.4s ease-out infinite;
}
@keyframes mh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { .masthead__pill-dot { animation: none; } }

/* Eyebrow with a rule on each side, centred. */
.masthead__eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: clamp(1rem, .9rem + .6vw, 1.6rem) 0 clamp(.8rem, .7rem + .5vw, 1.2rem);
  font-family: var(--body);
  font-size: clamp(.66rem, .63rem + .1vw, .76rem);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #93B4F5;
}
.masthead__eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: rgba(147, 180, 245, .5);
  flex: none;
}
/* The trailing rule only earns its place when the block is centred. */
.masthead__eyebrow::after { content: none; }
@media (max-width: 767.98px) {
  .masthead__eyebrow::after {
    content: ""; width: clamp(24px, 4vw, 52px); height: 1px;
    background: rgba(147, 180, 245, .5); flex: none;
  }
}

/* Stacked, very heavy, tight. The accent word owns its own line. */
.masthead__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.5rem + 3.3vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.masthead__title span { display: block; }
.masthead__title em { display: block; font-style: normal; color: #3B82F6; }

.masthead__lead {
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .35vw, 1.18rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .70);
  margin: clamp(1.1rem, 1rem + .6vw, 1.7rem) 0 0;
  max-width: 58ch;
}

/* Chips carry the specifics, so the paragraph does not have to. */
.masthead__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: clamp(1.1rem, 1rem + .6vw, 1.6rem);
}
.chip {
  padding: .5em 1.05em;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, .80);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.chip:hover { border-color: rgba(59, 130, 246, .6); background: rgba(37, 99, 235, .14); }

.masthead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: clamp(1.6rem, 1.4rem + 1vw, 2.4rem);
}
.mh-btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .95em 1.9em;
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-spring),
              background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.mh-btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 26px rgba(37, 99, 235, .42);
}
.mh-btn--primary:hover {
  background: var(--accent-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(37, 99, 235, .55);
}
.mh-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .30); }
.mh-btn--ghost:hover {
  color: #fff;
  text-decoration: none;
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
  transform: translateY(-2px);
}
.mh-btn .ico { --ico-size: 1em; transition: transform var(--dur) var(--ease-spring); }
.mh-btn:hover .ico { transform: translateX(3px); }

/* ---- Figures, anchored inside the hero ---------------------------------
   Placed here rather than in a card between sections: it gives the dark band
   a job, removes a whole floating strip from the page, and keeps the numbers
   in the same left rail as the headline. */
.mh-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 1.2rem + 1.6vw, 3.25rem);
  margin: clamp(2rem, 1.7rem + 1.4vw, 3.25rem) 0 0;
  padding-top: clamp(1.4rem, 1.2rem + .8vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
  width: 100%;
}
.mh-stat { display: flex; flex-direction: column; gap: .25rem; }
.mh-stat__num {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1.15vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.mh-stat__suffix { color: #3B82F6; }
.mh-stat__label {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  line-height: 1.35;
}
@media (max-width: 767.98px) {
  /* Two to a row, hanging off the same left rail as the headline above them.
     They used to centre, which put the numbers on a different axis from every
     other thing in the hero. */
  .mh-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
    justify-content: start;
  }
  .mh-stat { align-items: flex-start; text-align: left; }
}

/* ============================================================= sections === */
.sec { padding-block: clamp(2.25rem, 1.9rem + 1.7vw, 3.75rem); }
.sec--tight { padding-block: clamp(1.6rem, 1.4rem + 1vw, 2.5rem); }
.sec--alt { background: var(--paper-alt); }
.sec--ink { background: var(--deep); color: #FFFCF6; }
.sec--ink .sec__title { color: #FFFCF6; }
.sec--ink .sec__eyebrow { color: var(--gold); }
.sec--ink .sec__intro { color: rgba(255, 250, 242, .72); }

.sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: clamp(1.25rem, 1.1rem + 0.8vw, 2rem);
}
.sec__eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 .7rem;
}
.sec__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); flex: none; }
/* Section titles are a real step above body — the old scale topped out at
   1.65rem, which is why every section felt the same weight as the next. */
.sec__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 1.58vw, 2.79rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.sec__intro { margin: .9rem 0 0; color: var(--ink-soft); max-width: 58ch; }
.sec__more {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--accent-dark);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: .2em;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.sec__more:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--gold); }
.sec__more .ico { transition: transform var(--dur) var(--ease-spring); }
.sec__more:hover .ico { transform: translateX(4px); }
.sec--ink .sec__more { color: var(--gold); }
.sec--ink .sec__more:hover { color: #FFFCF6; }

/* ---- Archetype: split (sticky heading beside flowing content) ----------- */
.sec--split .sec__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .sec--split .sec__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
}

/* ---- Archetype: lead (one dominant item + supporting stack) ------------- */
.sec--lead .sec__grid {
  display: grid;
  gap: clamp(1.2rem, 1rem + 1vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .sec--lead .sec__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}

/* ---- Archetype: index (numbered editorial rows) ------------------------- */
.index-list { border-top: 1px solid var(--hairline); }
.index-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, .8rem + 1.2vw, 2.4rem);
  padding: clamp(1.1rem, 1rem + .9vw, 2rem) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background var(--dur) var(--ease-out), padding-inline var(--dur) var(--ease-out);
}
.index-row:hover {
  background: var(--raise);
  text-decoration: none;
  color: inherit;
  padding-inline: clamp(.6rem, .5rem + .8vw, 1.4rem);
}
.index-row__num {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.index-row__body { min-width: 0; }
.index-row__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.1rem, .98rem + .7vw, 1.75rem);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.index-row:hover .index-row__title { color: var(--accent-dark); }
.index-row__desc {
  margin: .4rem 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  max-width: 68ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.index-row__go {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  color: var(--ink-soft);
  transition: transform var(--dur) var(--ease-spring),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.index-row:hover .index-row__go {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFCF6;
  transform: translateX(4px);
}
@media (max-width: 575.98px) {
  .index-row { grid-template-columns: auto 1fr; }
  .index-row__go { display: none; }
}

/* ---- Archetype: rail (horizontal scroll) ------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(260px, 78vw), 1fr);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }

/* ============================================================ editorial === */
/* A card that reads as a piece of work, not a box. */
.ecard {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  height: 100%;
  padding: clamp(1.15rem, 1rem + .7vw, 1.8rem);
  background: var(--raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.ecard::before {
  /* A jade edge that arrives on hover — the card acknowledges the pointer
     without moving the text. */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur) var(--ease-out);
}
.ecard:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-4px);
  border-color: rgba(30, 122, 107, .34);
  box-shadow: var(--shadow-lg);
}
.ecard:hover::before { transform: scaleY(1); }
.ecard__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.02rem, .96rem + .35vw, 1.28rem);
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.ecard:hover .ecard__title { color: var(--accent-dark); }
.ecard__desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ecard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.ecard__tags { display: flex; flex-wrap: wrap; gap: .35rem; }

/* The lead card in a .sec--lead: bigger type, more room, same component. */
.ecard--lead { padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.6rem); }
.ecard--lead .ecard__title { font-size: clamp(1.3rem, 1.05rem + 0.86vw, 1.72rem); line-height: 1.12; }
/* 5 lines cut a normal abstract off mid-word. The bound stays — a pathological
   abstract must not run the card off the page — but it is now well clear of
   anything of ordinary length, so in practice nothing is cut. */
.ecard--lead .ecard__desc { font-size: var(--fs-base); -webkit-line-clamp: 12; }

/* Compact row form, for supporting stacks beside a lead item. */
.erow {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: padding-inline var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.erow:first-child { border-top: 1px solid var(--hairline); }
.erow:hover {
  text-decoration: none; color: inherit;
  background: var(--raise);
  padding-inline: var(--sp-3);
}
.erow__body { min-width: 0; flex: 1; }
/* These were inline spans with a margin-top on the venue — which does nothing
   on an inline box, so the journal name ran straight on from the title and
   wrapped as if it were part of it. Both are blocks now, and the title has
   room to be the title. */
.erow__title {
  display: block;
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.erow:hover .erow__title { color: var(--accent-dark); }
.erow__meta {
  display: block;
  margin: .3rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-faint);
}
/* The year was a 44px box stacking "2025" over the word YEAR. Four digits in a
   publication list are self-evidently a year, and the label forced a cramped
   two-line box that read like a form field. It is one small tag now, on the
   site's shared tag tokens, sized to the title's first line. */
.erow__year {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  margin-top: .1em;
  padding: .34em .6em;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid rgba(37, 99, 235, .18);
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--accent-dark);
}

/* ------------------------------------------------- commitments (split) --- */
.commit-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.commit-list li {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  line-height: 1.6;
}
.commit-list li:last-child { border-bottom: 1px solid var(--hairline); }
.commit-list__n {
  flex: none;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--gold);
  padding-top: .25em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- meter --- */
.meter {
  display: block;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunk);
  overflow: hidden;
}
.meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #2E9C88);
}

/* ---------------------------------------------------------- completed --- */
/* A footnote, not a section: completed work is context, not the headline. */
.completed {
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3.5rem);
  padding-top: clamp(1.2rem, 1rem + .8vw, 2rem);
  border-top: 1px solid var(--hairline);
}
.completed__label {
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .6rem;
}
.completed__list { list-style: none; margin: 0; padding: 0; }
.completed__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  padding: .5rem 0;
}
.completed__list li + li { border-top: 1px dotted var(--hairline); }
.completed__list a { font-weight: 600; color: var(--ink); }
.completed__list a:hover { color: var(--accent-dark); }
.completed__list span { font-size: var(--fs-xs); color: var(--ink-faint); margin-left: auto; white-space: nowrap; }

/* ============================================ lift the legacy vocabulary ===
   Interior pages (membership, about, listings) still use the original
   .section / .section-head / .page-head classes. Rather than rewrite twenty
   templates, map those onto the new rhythm so every page inherits the
   composition. New work should use .sec; this keeps the rest consistent. */

.section     { padding-block: clamp(2.25rem, 1.9rem + 1.7vw, 3.75rem); }
.section-alt { background: var(--paper-alt); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: clamp(1.25rem, 1.1rem + 0.8vw, 2rem);
}
/* Section headings across the whole site step up to the display scale — the
   old ceiling of 1.65rem is why every section read at the same weight. */
.section h2,
.section-head h2,
.about-section-head h2 {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 1.58vw, 2.79rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* The interior page head gets the masthead's voice at a smaller scale. */
.page-head {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2rem, 1.75rem + 1.4vw, 3.25rem);
}
.page-head h1 {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.4rem + 2.3vw, 3.61rem);
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.page-head-lead {
  font-size: clamp(.98rem, .94rem + .3vw, 1.16rem);
  line-height: 1.65;
  max-width: 62ch;
}

/* ------------------------------------------------- commitments panel ----- */
/* A framed counterweight to the overview prose, so the split section has two
   columns of substance instead of one column and a canyon. */
.commit-panel {
  background: var(--raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1.1rem + .8vw, 2rem);
}
.commit-panel__label {
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 var(--sp-3);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--hairline);
}
.commit-panel .commit-list { margin: 0 0 var(--sp-3); }
.commit-panel .commit-list li:first-child { border-top: 0; padding-top: 0; }
.commit-panel .commit-list li:last-child { border-bottom: 0; }

/* ========================================================= project cards === */
/* A project card must answer four things at a glance: what it is, which area
   it belongs to, how far along it is, and who runs it. The previous card
   answered only the first — hence a bare progress line with its number
   stranded on the opposite side of the card. */
.pcards {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.pcard {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.2rem, 1.05rem + .7vw, 1.75rem);
  background: var(--raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
/* A jade rail that arrives on hover, without shifting any text. */
.pcard::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease-out);
}
.pcard:hover {
  text-decoration: none; color: inherit;
  transform: translateY(-4px);
  border-color: rgba(30, 122, 107, .32);
  box-shadow: var(--shadow-lg);
}
.pcard:hover::before { transform: scaleY(1); }

.pcard__top { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.pcard__area {
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
  padding-left: .45rem;
  border-left: 1px solid var(--hairline);
  line-height: 1.2;
}
.pcard__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.05rem, .98rem + .4vw, 1.32rem);
  letter-spacing: -.02em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
}
.pcard:hover .pcard__title { color: var(--accent-dark); }
.pcard__summary {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Progress gets a label, and its number sits beside the bar it describes. */
.pcard__progress { display: block; margin-top: auto; padding-top: .4rem; }
.pcard__progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .35rem;
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pcard__progress-head .tabular {
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}
.pcard .meter { height: 7px; }

.pcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding-top: .8rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.pcard__lead { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
/* The lead's name wraps rather than truncating — a name is the last thing
   that should be cut off. The avatar beside it keeps its own width. */
.pcard__lead > span { min-width: 0; }
.pcard__avatar {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hairline);
}
.pcard__avatar--initials {
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: var(--head);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: -.01em;
  border-color: var(--tag-ok-bd);
}
.pcard__team { display: inline-flex; align-items: center; gap: .35em; flex: none; color: var(--ink-faint); }
.pcard__team .ico { --ico-size: .95rem; }

/* ============================================================ our people ===
   Image-led cards: the photograph fills the top of the card edge to edge and
   the detail sits beneath it. A small circular avatar made every card look
   like a contact row; a full-width portrait makes it look like a person.
   ========================================================================== */
.people {
  display: grid;
  gap: var(--sp-4);
  /* 220px put five cards across a 1300px row at ~230px each, which squeezed
     the name and the institution line. 265px gives four across at ~310px —
     room for a full name on one line and a place that does not wrap to three.
     auto-fill (not auto-fit) keeps the tracks their size when there are only
     two or three people, so cards never stretch to fill the row. */
  grid-template-columns: repeat(auto-fill, minmax(min(265px, 100%), 1fr));
}
@media (max-width: 575.98px) {
  /* Two to a row on a phone — one full-width portrait per screen was a card
     the height of the viewport. */
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
}
.person {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  height: 100%;
  overflow: hidden;                /* so the image corners follow the card */
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.person:hover {
  text-decoration: none; color: inherit;
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, .32);
  box-shadow: var(--shadow-lg);
}

.person__portrait {
  position: relative;
  width: 100%;
  /* A fixed ratio keeps every card in the row the same shape whatever the
     uploaded photograph's dimensions are; object-fit crops, never distorts.
     1:1 rather than 4:5 — the taller crop made each card overwhelm the row. */
  aspect-ratio: 1 / 1;
  background: linear-gradient(155deg, var(--deep-2), var(--deep));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.person__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.person:hover .person__portrait img { transform: scale(1.04); }
.person__initials {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.05rem);
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .26);
}
.person__verified {
  position: absolute;
  right: .45rem; top: .45rem;
  display: inline-flex; align-items: center; gap: .35em;
  padding: .25em .5em;
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(166, 206, 57, .38);
  color: #C7E37A;
}
.person__verified .ico { --ico-size: .85rem; stroke-width: 2.3; }

.person__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .34rem;
  padding: var(--sp-4) var(--sp-4) .8rem;
}
.person__name {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(.98rem, .92rem + .3vw, 1.14rem);
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--ink);
}
.person:hover .person__name { color: var(--accent-dark); }
.person__role {
  padding: .3em .75em;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid rgba(37, 99, 235, .18);
  font-family: var(--body);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  line-height: 1.3;
}
.person__position { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 575.98px) {
  /* Two cards to a phone row leaves ~165px, and a role like "Founder &
     Research Lead" wraps inside its pill — a two-line pill reads as a mistake
     rather than a badge. The chrome comes off and the role becomes a plain
     tracked line, which wraps the way a line of text is supposed to.
     (This lives here, not in components.css: layout.css loads last, so a rule
     for .person anywhere earlier loses to the pill styling above.) */
  .person__role {
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    color: var(--accent-dark);
    font-size: .62rem;
    letter-spacing: .09em;
  }
}
.person__place {
  display: flex; align-items: flex-start; gap: .4em;
  margin-top: auto;
  padding: .65rem var(--sp-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  line-height: 1.4;
}
.person__place .ico { --ico-size: .9rem; flex: none; margin-top: .14em; }

/* ============================================================ page heads ===
   Interior pages get the masthead's voice at a smaller scale, so About and
   Projects feel like the same publication as the homepage.
   ========================================================================== */
.phead {
  position: relative;
  isolation: isolate;
  background: var(--deep);
  color: #fff;
  padding-block: clamp(2.75rem, 2.4rem + 2.4vw, 4.5rem);
  overflow: hidden;
}
.phead__glow {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(58% 60% at 18% 8%, rgba(37, 99, 235, .30) 0%, transparent 64%),
    radial-gradient(42% 46% at 88% 96%, rgba(37, 99, 235, .16) 0%, transparent 68%);
  pointer-events: none;
}
.phead__scene {
  position: absolute; z-index: -3;
  right: -4%; top: 50%;
  transform: translateY(-50%);
  width: clamp(360px, 44vw, 760px);
  opacity: .34;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 44%, transparent 96%);
  mask-image: linear-gradient(to left, #000 44%, transparent 96%);
}
@media (max-width: 991.98px) { .phead__scene { opacity: .16; right: -20%; width: 130%; } }

.phead__inner { max-width: 60rem; }
.phead__eyebrow {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 clamp(.7rem, .6rem + .4vw, 1rem);
  font-family: var(--body);
  font-size: clamp(.66rem, .63rem + .1vw, .74rem);
  font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: #93B4F5;
}
.phead__eyebrow::before {
  content: ""; width: clamp(22px, 3.5vw, 44px); height: 1px;
  background: rgba(147, 180, 245, .5); flex: none;
}
.phead__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.45vw, 3.48rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  color: #fff;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.phead__title em { font-style: normal; color: #3B82F6; }
.phead__lead {
  margin: clamp(.9rem, .8rem + .5vw, 1.4rem) 0 0;
  font-size: clamp(.98rem, .94rem + .3vw, 1.14rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .70);
  max-width: 58ch;
}

/* Facts along the base — live numbers, so nothing here is a claim the
   database cannot support. */
.phead__facts {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.4rem, 1.1rem + 1.5vw, 3rem);
  margin: clamp(1.6rem, 1.4rem + 1vw, 2.4rem) 0 0;
  padding-top: clamp(1.2rem, 1rem + .7vw, 1.7rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.phead__fact { display: flex; flex-direction: column; gap: .2rem; }
.phead__fact-n {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(1.5rem, 1.25rem + 0.86vw, 1.84rem);
  line-height: 1; letter-spacing: -.04em; color: #fff;
  font-variant-numeric: tabular-nums; margin: 0;
}
.phead__fact-l {
  margin: 0; font-family: var(--body);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* ================================================================= about === */
.about-grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 992px) {
  .about-grid { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
  .about-rail { position: sticky; top: calc(var(--nav-h-stuck) + 1.5rem); order: 2; }
  .about-flow { order: 1; }
}

.toc {
  background: var(--raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.toc__label {
  font-family: var(--body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 var(--sp-3);
}
.toc__link {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .48rem 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  text-decoration: none;
  border-top: 1px solid var(--hairline);
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}
.toc__link:first-of-type { border-top: 0; }
.toc__link:hover { color: var(--accent-dark); text-decoration: none; padding-left: .3rem; }
.toc__n {
  font-family: var(--mono); font-size: .68rem;
  color: var(--accent); flex: none; font-variant-numeric: tabular-nums;
}

.motto {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.motto__mark { --ico-size: 4.5rem; position: absolute; right: -.6rem; bottom: -.9rem; color: rgba(59,130,246,.18); }
.motto__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #93B4F5; margin: 0 0 .4rem;
}
.motto__line {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  letter-spacing: -.03em; color: #fff; margin: 0 0 .35rem;
}
.motto__sub { margin: 0; font-size: var(--fs-xs); color: rgba(255,255,255,.6); line-height: 1.5; }

.about-cta {
  display: grid; gap: var(--sp-4);
  align-items: center;
  margin-top: clamp(2rem, 1.7rem + 1.4vw, 3.25rem);
  padding: clamp(1.5rem, 1.3rem + 1.2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  border: 1px solid rgba(37, 99, 235, .18);
}
@media (min-width: 800px) { .about-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.about-cta__label {
  font-family: var(--body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 .4rem;
}
.about-cta__title {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(1.3rem, 1.15rem + .9vw, 1.9rem);
  letter-spacing: -.035em; color: var(--ink); margin: 0 0 .5rem;
}
.about-cta__lead { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); max-width: 52ch; line-height: 1.6; }
.about-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.phead__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: clamp(1.1rem, 1rem + .6vw, 1.6rem); }
/* Buttons sitting on the slate head need the on-dark treatment. */
.phead__actions .btn-outline-secondary {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .32);
  --btn-bg: transparent;
}
.phead__actions .btn-outline-secondary:hover {
  --btn-bd: #fff;
  --btn-bg: rgba(255, 255, 255, .1);
  --btn-fg: #fff;
}

/* ============================================================== spotlight ===
   One academic at a time, rotating. A single large card carries far more
   weight than a grid of twelve small ones — which is the point: this is the
   place to say "look who has joined us".

   Slides are stacked and cross-faded rather than moved, so the section never
   changes height as it rotates and nothing below it jumps.
   ========================================================================== */
.spot { position: relative; }

.spot__stage {
  display: grid;
  /* Every slide occupies the same cell, so the tallest sets the height once
     and the rest fade over it. */
  grid-template-areas: "slide";
  border-radius: var(--radius-lg);
  background: var(--raise);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.spot__slide {
  grid-area: slide;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
  pointer-events: none;
}
.spot__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}
@media (min-width: 768px) {
  /* Side by side from tablet up, but the portrait takes a share rather than a
     fixed 26rem — that was what squeezed the text to 278px before. Beside the
     text the photograph is a tall column, which is the shape a headshot wants;
     full width it has to be cropped into a band. */
  .spot__slide { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  /* A headshot wants a portrait-shaped box. Once the card came down to ~380px
     tall, a 24-32rem column made that box landscape (512x381) and `cover` had
     to cut the top and bottom off the person. Roughly 4:5 against the new
     height, so the crop is gentle and the whole head stays in frame. */
  .spot__slide { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}
@media (min-width: 1360px) {
  /* Give the portrait real presence — this section exists to show a person. */
  .spot__slide { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
}

/* ---- portrait ---- */
.spot__portrait {
  position: relative;
  background: linear-gradient(155deg, var(--deep-2), var(--deep));
  /* A fixed portrait ratio, capped, so the card keeps its proportions
     whatever the photograph's own dimensions are and however long the
     biography runs. object-fit crops rather than distorts. */
  aspect-ratio: 4 / 5;
  max-height: 30rem;
  min-height: 17rem;
  display: grid;
  place-items: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  /* Beside the text the portrait should be as tall as the card, not decide how
     tall the card is: a 4:5 ratio on a wide card made it 480px and left a void
     under a short biography. And no max-height — capping it at 34rem left the
     bottom of the photo column blank whenever the text ran taller. It fills
     the row; object-fit crops rather than stretches. */
  .spot__portrait { aspect-ratio: auto; height: 100%; min-height: 17rem; max-height: 27rem; }
}
@media (max-width: 767.98px) {
  /* Single column below 820px, so the 4:5 portrait ran the full card width and
     came out ~430px tall — over half a phone screen of photograph before the
     name or the biography appeared. A landscape crop of the same headshot
     keeps the person clearly visible and brings their details into the same
     view. The head sits slightly below the top edge rather than against it. */
  .spot__portrait {
    /* A definite width plus a ratio — never aspect-ratio with max-height.
       When max-height clamps a box that has a ratio the browser preserves the
       ratio by shrinking the WIDTH, which is what left a white band beside the
       photograph. And the box is near-square here: a shallow one cropped the
       headshot so hard the top of the head and the chin were cut off. */
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    /* Safe now that the width is definite: a max-height with an aspect-ratio
       only shrinks the WIDTH when the width is indeterminate. Square keeps a
       headshot well cropped on a phone, but at 700px of card that same square
       is 700px of photograph, so it stops at 22rem. */
    max-height: 26rem;
  }
}
.spot__portrait img {
  /* Absolutely positioned, so the photograph fills whatever box it is given
     and can never set that box's height. It could before: `height: 100%`
     resolves to `auto` when the parent's own height is indefinite, so a
     536x701 portrait laid out at its intrinsic ratio — 670px in a 512px
     column — and that, not the content, was deciding how tall the whole
     spotlight card became. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Headroom above the face rather than the crown against the frame edge. This
   has to follow the rule above, not precede it — same specificity, so source
   order decides. */
@media (max-width: 767.98px) {
  /* Anchored to the top, not 18% down. Stacked, the box is as wide as the
     card and therefore a shallow band on a portrait photograph — offsetting
     the crop downwards pushed the top of the person's head out of frame.
     From the top, the crop always takes the bottom, which is what a headshot
     crop is supposed to do. */
  .spot__portrait img { object-position: center top; }
}
.spot__initials {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(3rem, 2rem + 3.6vw, 4.51rem);
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .22);
}
/* The ORCID mark is the strongest trust signal here, so it sits on the
   portrait rather than in the body copy. */
.spot__verified {
  position: absolute;
  left: var(--sp-3); bottom: var(--sp-3);
  display: inline-flex; align-items: center; gap: .4em;
  padding: .38em .8em;
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(166, 206, 57, .4);
  color: #C7E37A;
  font-family: var(--body);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.spot__verified .ico { --ico-size: .9rem; stroke-width: 2.3; }

/* ---- body ---- */
.spot__body {
  padding: clamp(1.25rem, 1.1rem + .9vw, 2rem);
  min-width: 0;
}
.spot__role {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.spot__name {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.25rem + 1.01vw, 1.97rem);
  letter-spacing: -.04em;
  line-height: 1.06;
  color: var(--ink);
}
.spot__position { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.spot__place {
  margin: .1rem 0 0;
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.spot__place .ico { --ico-size: .9rem; flex: none; }
.spot__bio {
  margin: .7rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
}
@media (min-width: 1120px) { .spot__bio { max-width: none; } }

/* ---- the right rail ----------------------------------------------------
   The biography sets its own measure — text past ~62 characters a line stops
   being readable — so on a wide card the space beside it was simply empty and
   the card looked like the text had been cut off. That space now carries what
   a reader wants next: what the person works on, what they have produced, and
   where to find them. It sits under the biography on narrow screens, where
   there was never any spare width to begin with. */
.spot__body { display: grid; gap: var(--sp-4) var(--sp-5); align-content: start; }
.spot__main { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
@media (min-width: 1120px) {
  .spot__body {
    /* The reading column is capped, not fluid. As 1fr it grew with the card
       while the biography stopped at its own measure — at 1920px that left
       363px of nothing between the text and the rail. The rail takes the
       slack now, and its tags flow into it. */
    grid-template-columns: minmax(0, 34rem) minmax(15rem, 1fr);
    grid-template-areas: "main rail" "foot rail";
    align-content: space-between;
  }
  .spot__main { grid-area: main; }
  .spot__rail { grid-area: rail; }
  .spot__foot { grid-area: foot; }
}
.spot__rail {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}
@media (min-width: 1120px) {
  /* A hairline, not a panel — the rail is a companion to the biography, not
     a second card sitting inside the first. */
  .spot__rail { border-left: 1px solid var(--hairline); padding-left: var(--sp-5); }
}
@media (min-width: 768px) and (max-width: 1119.98px) {
  /* Between tablet and the point where the rail can sit beside the text, it
     stacks under the biography — three groups in a column made the card half
     again as tall as it needed to be. Two columns halves that back. */
  .spot__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .spot__facts { grid-column: 1 / -1; }
}

.spot__facts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin: 0; }
.spot__fact { min-width: 0; }
.spot__fact-n {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.75rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spot__fact-l {
  margin: .3rem 0 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.spot__group-label {
  margin: 0 0 .45rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.spot__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.spot__tag {
  padding: .38em .8em;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid rgba(37, 99, 235, .18);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent-dark);
}
.spot__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.spot__id {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: var(--paper-alt);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  transition: transform var(--dur) var(--ease-spring),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.spot__id:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.spot__id .ico { --ico-size: 1.05rem; }
.spot__bio p { margin: 0 0 .7rem; }
.spot__bio p:last-child { margin-bottom: 0; }
/* No cap and no inner scrollbar. This used to be limited to 16em with
   overflow-y:auto to stop the card resizing as people rotate — but the slides
   already share one grid cell, so the stage is sized by the longest biography
   whether or not this scrolls, and the cap bought nothing while hiding the end
   of what someone wrote about themselves. The bio runs in full. */
.spot__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
}
.spot__link {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--body); font-weight: 700; font-size: var(--fs-sm);
  color: var(--accent-dark);
  text-decoration: none;
  padding-bottom: .15em;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur), color var(--dur);
}
.spot__link:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--accent); }
.spot__link .ico { transition: transform var(--dur) var(--ease-spring); }
.spot__link:hover .ico { transform: translateX(3px); }

/* ---- controls ---- */
.spot__controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.spot__nav {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  background: var(--raise);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur),
              color var(--dur), transform var(--dur) var(--ease-spring);
}
.spot__nav:hover {
  background: var(--accent); border-color: var(--accent);
  color: #fff; transform: translateY(-2px);
}
.spot__nav .ico { --ico-size: 1.05rem; }

.spot__dots { display: flex; align-items: center; gap: .45rem; }
.spot__dot {
  width: 9px; height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--hairline);
  cursor: pointer;
  transition: width var(--dur) var(--ease-spring), background var(--dur);
}
.spot__dot:hover { background: var(--ink-faint); }
.spot__dot.is-active { width: 26px; border-radius: var(--radius-pill); background: var(--accent); }

/* =============================================================== pillars ===
   Vision, Mission and Aim lifted out of the essay and raised over the head's
   bottom edge. The page then opens on structure rather than on a paragraph,
   and the three ideas that matter most are legible in two seconds.
   ========================================================================== */
.pillars-wrap { position: relative; z-index: 2; margin-top: clamp(-3.5rem, -3rem - 1.6vw, -2.25rem); }
.pillars {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.25rem, 1.1rem + .8vw, 1.9rem);
  background: var(--raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.pillar:hover {
  text-decoration: none; color: inherit;
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, .3);
  box-shadow: var(--shadow-xl);
}
.pillar__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid rgba(37, 99, 235, .16);
  color: var(--accent-dark);
  margin-bottom: .3rem;
}
.pillar__ico .ico { --ico-size: 1.25rem; }
.pillar__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem);
  letter-spacing: -.03em;
  color: var(--ink);
}
.pillar__text { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); }
.pillar__more {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: auto; padding-top: .6rem;
  font-family: var(--body); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-dark);
}
.pillar__more .ico { transition: transform var(--dur) var(--ease-spring); }
.pillar:hover .pillar__more .ico { transform: translateX(4px); }

/* ============================================================= manifesto ===
   The group's argument for existing, given a full-bleed band instead of being
   chapter five of nine. One large statement, dark ground, nothing else on it.
   ========================================================================== */
.manifesto {
  position: relative;
  isolation: isolate;
  background: var(--deep);
  color: #fff;
  padding-block: clamp(2.75rem, 2.4rem + 2.6vw, 5rem);
  overflow: hidden;
  scroll-margin-top: 6rem;
}
.manifesto__glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(48% 60% at 12% 0%, rgba(37, 99, 235, .28) 0%, transparent 66%),
    radial-gradient(40% 50% at 92% 100%, rgba(37, 99, 235, .18) 0%, transparent 68%);
  pointer-events: none;
}
.manifesto__mark {
  display: block;
  color: rgba(59, 130, 246, .38);
  margin-bottom: .4rem;
}
.manifesto__mark .ico { --ico-size: 2.75rem; stroke-width: 1.5; }
.manifesto__label {
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #93B4F5;
  margin: 0 0 clamp(.8rem, .7rem + .5vw, 1.2rem);
}
/* Set larger and lighter than body copy: this is meant to be read slowly. */
.manifesto__body {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.85rem);
  line-height: 1.42;
  letter-spacing: -.025em;
  color: #fff;
  max-width: 46ch;
  text-wrap: pretty;
}
.manifesto__body p { margin: 0 0 .8rem; }
.manifesto__body p:last-child { margin-bottom: 0; }
.manifesto__body p + p {
  font-weight: 400;
  font-family: var(--body);
  font-size: clamp(.98rem, .94rem + .3vw, 1.1rem);
  line-height: 1.75;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .72);
  max-width: 62ch;
}

/* ------------------------------------------------- chapters, restyled ----- */
/* The number moves into the margin as a large quiet marker, so the reading
   column starts clean and the sequence is still obvious. */
.chapter {
  position: relative;
  padding-block: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 6rem;
}
.chapter:first-child { border-top: 0; padding-top: 0; }
.chapter__marker {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.01vw, 2.13rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--hairline);
  display: block;
  margin-bottom: .35rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1100px) {
  /* Hung in the margin on wide screens; stacked above on narrow ones. */
  .chapter { padding-left: 4.75rem; }
  .chapter__marker { position: absolute; left: 0; top: clamp(1.5rem, 1.3rem + 1vw, 2.5rem); margin: 0; }
  .chapter:first-child .chapter__marker { top: 0; }
}
.chapter__title {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--head); font-weight: 700;
  font-size: clamp(1.35rem, 1.15rem + 0.72vw, 1.68rem);
  letter-spacing: -.035em; line-height: 1.12;
  color: var(--ink); margin: 0 0 var(--sp-3);
}
.chapter__ico { --ico-size: 1.15rem; color: var(--accent); flex: none; }
.chapter__body { color: var(--ink-soft); max-width: 70ch; }
.chapter__body p { margin-bottom: .9rem; }
.chapter__body p:last-child { margin-bottom: 0; }

/* ============================== spotlight: staggered entrance =============
   The card used to cross-fade as one block. Each part now arrives on its own
   short delay — role, name, affiliation, biography, then the rail — so a
   rotation reads as the next person being introduced rather than a flicker.
   Only the incoming slide animates; the outgoing one just fades.
   ========================================================================== */
@keyframes spot-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.spot__slide.is-active .spot__role,
.spot__slide.is-active .spot__name,
.spot__slide.is-active .spot__position,
.spot__slide.is-active .spot__place,
.spot__slide.is-active .spot__bio,
.spot__slide.is-active .spot__rail,
.spot__slide.is-active .spot__foot {
  animation: spot-in var(--dur-slow, .45s) var(--ease-out) both;
}
.spot__slide.is-active .spot__role     { animation-delay: .04s; }
.spot__slide.is-active .spot__name     { animation-delay: .09s; }
.spot__slide.is-active .spot__position { animation-delay: .14s; }
.spot__slide.is-active .spot__place    { animation-delay: .17s; }
.spot__slide.is-active .spot__bio      { animation-delay: .21s; }
.spot__slide.is-active .spot__rail     { animation-delay: .27s; }
.spot__slide.is-active .spot__foot     { animation-delay: .33s; }

/* The photograph settles rather than sliding — a face jumping around is
   distracting where a caption arriving is not. */
@keyframes spot-portrait-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}
.spot__slide.is-active .spot__portrait img,
.spot__slide.is-active .spot__initials {
  animation: spot-portrait-in .7s var(--ease-out) both;
}

/* Anyone who has asked for less motion gets the cross-fade and nothing else. */
@media (prefers-reduced-motion: reduce) {
  .spot__slide.is-active .spot__role,
  .spot__slide.is-active .spot__name,
  .spot__slide.is-active .spot__position,
  .spot__slide.is-active .spot__place,
  .spot__slide.is-active .spot__bio,
  .spot__slide.is-active .spot__rail,
  .spot__slide.is-active .spot__foot,
  .spot__slide.is-active .spot__portrait img,
  .spot__slide.is-active .spot__initials { animation: none; }
}

/* ------------------------------------------------ wide screens (FHD, 4K) ---
   The inner column is capped at 62rem. On a 1920 or 2560 monitor the container
   is far wider than that, so the whole hero sat in the left third with the rest
   of the band empty. Past 1600px it takes the full measure and centres, the
   headline runs on one line instead of breaking after "to", and it scales up
   to match. Below that nothing changes — the hero stays left-aligned. */
@media (min-width: 1600px) {
  .masthead__inner {
    max-width: min(92rem, 100%);
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }
  /* width:100% because `align-items: center` shrink-wraps its flex children,
     and `text-wrap: balance` then split a headline that had room to sit on one
     line. Full measure + normal wrapping: it runs across, and a longer custom
     headline still wraps rather than overflowing. */
  .masthead__title { width: 100%; text-wrap: normal; }
  .masthead__title span, .masthead__title em { display: inline; }
  .masthead__title em { margin-left: .25em; }
  .masthead__lead { max-width: 74ch; }
  .masthead__chips, .masthead__actions, .mh-stats { justify-content: center; }
  .mh-stats { gap: clamp(2rem, 1.4rem + 2.4vw, 4.5rem); }
  .mh-stat { align-items: center; text-align: center; }
}

/* ============================================================ join band ====
   Was a Bootstrap row: copy in the left half, a floating illustration in the
   right. On anything wider than a laptop the illustration sat marooned in the
   middle of an empty half. The right side now carries the four steps to join —
   the question a reader has at the bottom of a homepage is "so what do I
   actually do", and answering it beats decorating the space.
   ========================================================================== */
.joinband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(3rem, 2.4rem + 3vw, 6rem);
  background:
    radial-gradient(rgba(148, 163, 184, .10) 1px, transparent 1px),
    linear-gradient(160deg, var(--deep-3) 0%, var(--deep-2) 55%, var(--deep) 100%);
  background-size: 34px 34px, cover;
}
.joinband__glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(52% 62% at 78% 12%, rgba(37, 99, 235, .30) 0%, transparent 68%),
    radial-gradient(42% 52% at 8% 96%, rgba(217, 119, 6, .14) 0%, transparent 66%);
  pointer-events: none;
}
.joinband__grid {
  display: grid;
  gap: clamp(2rem, 1.6rem + 2.4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 992px) {
  /* The copy sets its own measure, so the steps take the remainder rather
     than both halves growing and leaving a gap in the middle. */
  .joinband__grid { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
}

.joinband__eyebrow {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .7rem;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #93B4F5;
}
.joinband__eyebrow::before {
  content: ""; width: 1.6rem; height: 2px; flex: none;
  background: var(--accent); border-radius: 2px;
}
.joinband__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.85rem, 1.4rem + 1.58vw, 2.54rem);
  line-height: 1.08;
  letter-spacing: -.04em;
  color: #fff;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.joinband__title em { font-style: normal; color: #60A5FA; }
.joinband__lead {
  margin: 0;
  font-size: clamp(.98rem, .94rem + .3vw, 1.1rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, .72);
  max-width: 54ch;
}

/* --- social proof: real faces beat a claim ------------------------------- */
.joinband__social {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .8rem var(--sp-3);
  margin-top: var(--sp-4);
}
.joinband__faces { display: flex; }
.joinband__face {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--deep-2);
  background: var(--deep);
  transition: transform var(--dur) var(--ease-spring);
}
.joinband__face + .joinband__face { margin-left: -.75rem; }
.joinband__face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.joinband__faces:hover .joinband__face { transform: translateY(-3px); }
.joinband__social-text { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .62); }
.joinband__social-text strong { color: #fff; font-weight: 700; }

.joinband__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.joinband__note {
  display: flex; align-items: center; gap: .45em;
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .55);
}
.joinband__note .ico { --ico-size: .95rem; color: #34D399; flex: none; }

/* --- the four steps ------------------------------------------------------ */
.joinband__steps { display: grid; gap: .7rem; }
.joinstep {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding: clamp(.95rem, .85rem + .5vw, 1.35rem) clamp(1rem, .9rem + .6vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.joinband__steps:hover .joinstep { opacity: .72; }
.joinband__steps .joinstep:hover {
  opacity: 1;
  background: rgba(37, 99, 235, .14);
  border-color: rgba(59, 130, 246, .45);
  transform: translateX(4px);
}
.joinstep__n {
  font-family: var(--head);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .32);
  font-variant-numeric: tabular-nums;
  padding-top: .55em;
}
.joinstep__ico {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius);
  background: rgba(37, 99, 235, .18);
  border: 1px solid rgba(59, 130, 246, .3);
  color: #93B4F5;
}
.joinstep__ico .ico { --ico-size: 1.05rem; }
.joinstep:hover .joinstep__ico { background: var(--accent); color: #fff; border-color: var(--accent); }
.joinstep__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.joinstep__title {
  font-family: var(--head);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: -.015em;
  color: #fff;
}
.joinstep__text { font-size: var(--fs-xs); line-height: 1.6; color: rgba(255, 255, 255, .62); }

@media (max-width: 575.98px) {
  .joinstep { grid-template-columns: auto minmax(0, 1fr); }
  .joinstep__n { display: none; }   /* the order is obvious in a single column */
}

/* ============================ hero + page heads: centred on small screens ==
   Page-level intro content — the homepage hero and the header every other page
   shares — centres below 768px. On a narrow column a centred masthead reads as
   a deliberate title block, where left-aligned text with a ragged right edge
   just looks like it ran out of room.

   Cards are deliberately NOT included: their contents stay left-aligned at
   every width, which is what makes a name, a role and an institution line up
   down a column. Appended at the end of the file so these win over the
   left-aligned defaults above without needing !important.
   ========================================================================== */
@media (max-width: 767.98px) {

  /* ---- homepage hero ---- */
  .masthead__inner {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .masthead__eyebrow { justify-content: center; }
  .masthead__title   { width: 100%; }
  .masthead__lead    { margin-inline: auto; }
  .masthead__chips,
  .masthead__actions { justify-content: center; }

  /* The stats keep their two-up grid but centre inside it, so the numbers sit
     under the copy rather than off to one side of it. */
  .mh-stats { justify-content: center; }
  .mh-stat  { align-items: center; text-align: center; }

  /* ---- the header shared by the other 12 pages ---- */
  .phead__inner   { margin-inline: auto; text-align: center; }
  .phead__eyebrow { justify-content: center; }
  .phead__lead    { margin-inline: auto; }
  .phead__facts   { justify-content: center; }
  .phead__fact    { align-items: center; text-align: center; }
  .phead__actions { justify-content: center; }
}