/* ==========================================================================
   Meridian International Center — visual system
   --------------------------------------------------------------------------
   Derived from the campus, not from a template. Two John Russell Pope houses at
   1630 Crescent Place NW: White-Meyer House (1912) and Meridian House (1919).
   The ground is limestone in Washington light — cool, never a warm cream. The one
   signature accent is antique brass, from the houses' hardware and the Cafritz
   Galleries' gilt frames. Meridian's official brand blue (#1284C0, sampled from
   their own published SecondaryLogo_Blue.png) is preserved for brand moments and
   darkened only where text contrast requires it.

   The motif is the meridian line: one fine vertical rule, after the 16th Street
   meridian that named Meridian Hill. Structural only. No pediments, no columns,
   no globes, no gold gradients.
   ========================================================================== */

/* --- Faces. Self-hosted; no CDN is contacted at runtime. ----------------- */
@font-face {
  font-family: "Sorts Mill Goudy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sorts-mill-goudy-400.woff2") format("woff2");
}
@font-face {
  font-family: "Sorts Mill Goudy";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sorts-mill-goudy-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/libre-franklin-var.woff2") format("woff2-variations");
}

:root {
  /* --- Signature accent: antique brass, as a full OKLCH ramp -------------
     Hue 75 holds the brass cast across the range; chroma peaks mid-ramp so the
     light steps stay parchment rather than yellow, and the dark steps stay
     bronze rather than olive. --accent-500 is #B08D4F, the registered accent. */
  --accent-50:  oklch(97.5% 0.014 75);
  --accent-100: oklch(94.5% 0.028 75);
  --accent-200: oklch(89%   0.048 75);
  --accent-300: oklch(82%   0.066 75);
  --accent-400: oklch(73%   0.080 75);
  --accent-500: oklch(64.2% 0.086 75);   /* #B08D4F */
  --accent-600: oklch(55%   0.082 75);
  --accent-700: oklch(45.5% 0.072 75);
  --accent-800: oklch(36%   0.056 75);
  --accent-900: oklch(27%   0.040 75);

  --accent: var(--accent-500);
  --accent-ink: var(--accent-700);      /* brass that passes AA on the canvas */

  /* --- Ground and ink --------------------------------------------------- */
  --canvas: #f6f7f9;                    /* limestone in Washington light (cool) */
  --paper: #ffffff;
  --parchment: #efeae0;                 /* warmth as a band, never as the ground */
  --ink: #171c23;
  --ink-muted: #3d4753;
  --ink-faint: #5a6474;                 /* clears 4.5:1 on canvas, parchment and paper */
  --rule: #d9dde3;
  --rule-strong: #b9c0c9;

  /* --- Meridian's own brand blue ---------------------------------------- */
  --brand-blue: #1284c0;                /* official; brand moments only (3.6:1) */
  --brand-blue-text: #0b5e8a;           /* same hue, darkened to clear AA */
  --brand-blue-deep: #08496b;

  --link: var(--brand-blue-text);
  --link-hover: var(--ink);
  --focus: var(--brand-blue-deep);

  /* --- Type ------------------------------------------------------------- */
  --display: "Sorts Mill Goudy", Georgia, "Times New Roman", serif;
  --body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  /* --- Rhythm ----------------------------------------------------------- */
  --measure: 44rem;
  --wide: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --step: clamp(3rem, 7vw, 6rem);
  --radius: 2px;                        /* classical restraint: near-square */
  --hairline: 1px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Meridian's own body copy quotes bare URLs, and a 96-character link is one
   unbreakable token: it forces the document wider than the viewport, and every
   full-width element below it follows it out, so an index page reported its
   facet rail as the overflow when the real cause was a YouTube link inside a
   record excerpt. Quoted prose and excerpts may break mid-token. */
body { overflow-wrap: break-word; }
.record__excerpt,
.wrap--measure p,
[data-verbatim] p,
[data-verbatim] li { overflow-wrap: anywhere; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* --- Type scale ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 4.6vw, 3.25rem); }
/* Meridian's own record titles run from four words to twenty-nine, and the
   longest is 193 characters. One display size cannot serve both: at headline
   scale a conference title becomes a text wall that owns the first viewport,
   and 174 of the 828 records are over 88 characters. Length decides the
   register instead. A short title keeps the headline; a long one is set as
   editorial type at reading scale, which is what an archive title of that
   length actually is. The 88-character step matches the display-type
   contract's own review threshold.

   The base size is smaller than a crafted page's h1 for the same reason. Those
   headlines were written to fit ("Six Centers", "A campus built to receive the
   world"); a record title is a quoted string of uncontrollable length. On a
   343px measure at the h1's 34px mobile floor even a four-word title breaks
   into a one-word staircase, so record titles get an editorial floor of their
   own on small screens. */
.record-title { font-size: clamp(1.5rem, 3.6vw, 2.6rem); text-wrap: balance; }
.record-title--medium { font-size: clamp(1.375rem, 3vw, 2.2rem); }
.record-title--long { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.22; }
h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.3125rem, 2vw, 1.625rem); }
h4 { font-size: 1.125rem; font-family: var(--body); font-weight: 600; }

p, li { text-wrap: pretty; }
p { margin: 0 0 1.1em; max-width: var(--measure); }

.lead {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 40rem;
}

/* The eyebrow: small caps tracking, brass rule. The classical cue lives in
   proportion and tracking, never in ornament. */
.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: var(--hairline);
  height: 1.1em;
  background: var(--accent);
  flex: none;
}

/* --- Links --------------------------------------------------------------
   Hover and focus states are darker than rest, never lighter. A label that is
   legible at rest must stay legible under the pointer; axe only evaluates the
   resting state, so this is enforced by hand. */
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); color: var(--link-hover); }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Layout -------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wide)); margin-inline: auto; }
.wrap--measure { width: min(100% - (var(--gutter) * 2), var(--measure)); margin-inline: auto; }
.section { padding-block: var(--step); }
.section:has([data-stoa-index]) { padding-block-start: 1.6rem; }
.section:has([data-stoa-index]) .meridian-line { height: 2rem; margin-bottom: 0.9rem; }
.section--paper { background: var(--paper); }
.section--parchment { background: var(--parchment); }
.section--ink { background: var(--ink); color: var(--canvas); }
.section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink a { color: #cfe6f4; }
.section--ink a:hover { color: var(--paper); }

/* The meridian line: a single fine vertical rule, after the meridian that named
   the hill. It marks section starts, indexes the left edge of a record, marks
   the register lists, and carries the empty state. Structural only. */
.meridian-line {
  width: var(--hairline);
  height: 3.5rem;
  background: linear-gradient(to bottom, var(--accent), transparent);
  margin-bottom: 1.75rem;
}
/* The record's left edge — dormant until the row is pointed at or focused. */
.meridian-line--edge { border-left: 2px solid transparent; }
.meridian-line--edge:hover,
.meridian-line--edge:focus-within { border-left-color: var(--accent); }
/* The register lists (Centers, threads) take the line as their marker. */
.meridian-line--marker { list-style: none; }
.meridian-line--marker > li { position: relative; padding-left: 1.1rem; }
.meridian-line--marker > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25em;
  width: var(--hairline);
  height: 1.1em;
  background: var(--accent);
}
/* Nothing found: the line stays, the results do not. */
.meridian-line--empty {
  border-left: 2px solid var(--accent);
  padding: 0.85rem 0 0.85rem 1.25rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* --- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0.5rem;
  top: 0.5rem;
  /* Beat the global a:focus-visible colour — otherwise this is ink on ink at 1:1. */
  color: var(--paper);
  background: var(--ink);
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* --- Proto banner ------------------------------------------------------- */
.proto-banner {
  background: var(--ink);
  color: var(--canvas);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.6rem var(--gutter);
  text-align: center;
}
.proto-banner a { color: #cfe6f4; }
.proto-banner a:hover { color: var(--paper); }

/* --- Masthead ----------------------------------------------------------- */
.masthead { background: var(--paper); border-bottom: var(--hairline) solid var(--rule); box-shadow: 0 1px 0 color-mix(in oklab, var(--accent) 28%, transparent); }
.masthead__bar {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding-block: 1rem;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--ink); flex: none; min-height: 44px; }
.brand:hover { color: var(--ink); }
.brand img { display: block; height: 46px; width: auto; }
.brand__name { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; }
.brand__sub { display: block; font-family: var(--body); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* --- The omnibox: one input, one button, on every page ------------------- */
.omnibox { flex: 1 1 22rem; position: relative; min-width: 16rem; }
.omnibox__form { display: flex; border: var(--hairline) solid var(--rule-strong); background: var(--paper); border-radius: var(--radius); }
.omnibox__form:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in oklab, var(--focus) 22%, transparent); }
.omnibox__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  border-radius: var(--radius);
}
.omnibox__input:focus { outline: none; }
.omnibox__input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.omnibox__input::placeholder { color: var(--ink-faint); }
.omnibox__submit {
  min-height: 44px;
  min-width: 44px;
  padding: 0 1.1rem;
  border: 0;
  background: var(--brand-blue-text);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0;
}
/* Filled control: hover goes to brass-dark, which holds >=4.5:1 against white.
   Never let a global a:hover rule win here — that is how a button ships at 1.3:1. */
.omnibox__submit:hover,
.omnibox__submit:focus-visible { background: var(--accent-800); color: var(--paper); }

.omnibox__results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.35rem);
  background: var(--paper);
  border: var(--hairline) solid var(--rule-strong);
  box-shadow: 0 12px 32px rgb(23 28 35 / 12%);
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  z-index: 40;
  border-radius: var(--radius);
}
.omnibox__results[hidden] { display: none; }
.omnibox__group { border-top: var(--hairline) solid var(--rule); }
.omnibox__group:first-child { border-top: 0; }
.omnibox__grouplabel {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.6rem 0.9rem 0.3rem;
  margin: 0;
}
.omnibox__hit { display: block; padding: 0.6rem 0.9rem; text-decoration: none; color: var(--ink); border-left: 2px solid transparent; min-height: 44px; }
.omnibox__hit:hover, .omnibox__hit:focus-visible { background: var(--accent-50); border-left-color: var(--accent); color: var(--ink); }
.omnibox__hit strong { display: block; font-weight: 600; font-size: 0.9375rem; }
.omnibox__hit span { display: block; font-size: 0.8125rem; color: var(--ink-muted); }
.omnibox__empty { padding: 1rem 0.9rem; color: var(--ink-muted); font-size: 0.9375rem; }

/* --- Primary nav -------------------------------------------------------- */
.nav { border-top: var(--hairline) solid var(--rule); }
.nav__list { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }
.nav__link[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; }

.menu-btn {
  display: none;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  padding: 0 0.8rem;
}
.menu-btn:hover, .menu-btn:focus-visible { background: var(--accent-50); color: var(--ink); border-color: var(--accent); }

@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .nav__list { display: none; flex-direction: column; gap: 0; padding-block: 0.5rem; }
  .nav__list.is-open { display: flex; }
  .nav__link { min-height: 48px; width: 100%; border-bottom: var(--hairline) solid var(--rule); }
  .nav__link[aria-current="page"] { border-left: 2px solid var(--accent); padding-left: 0.65rem; }
}

/* --- The Index: faceted archive ---------------------------------------- */
.index-layout { display: grid; grid-template-columns: 15rem 1fr; gap: var(--gutter); align-items: start; }
@media (max-width: 900px) { .index-layout { grid-template-columns: 1fr; } }


.facets__group { border-top: var(--hairline) solid var(--rule); padding-block: 0.9rem; }
.facets__group:first-child { border-top: 0; }
.facets__legend {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.facet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 32px;
  padding: 0.25rem 0.35rem;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.facet:hover, .facet:focus-visible { background: var(--accent-50); border-left-color: var(--accent); color: var(--ink); }
.facet[aria-pressed="true"], .facet.is-on { background: var(--accent-100); border-left-color: var(--accent-700); font-weight: 600; color: var(--ink); }
.facet__count { font-size: 0.8125rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.result-count { font-size: 0.9375rem; color: var(--ink-muted); margin: 0 0 1.25rem; }
.result-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.records { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); }
.record { background: var(--paper); padding: 1.15rem 1.25rem; }
.record:hover, .record:focus-within { background: var(--accent-50); }
/* The record's own published frame, carried into the register. Deliberately
   borderless, square-cornered and shadowless: the hairlines here come from the
   1px grid gap above, and a tile with a box around it would turn the whole
   index into the card grid the doctrine bans. Rows whose record has no frame
   keep the single-column layout and are untouched. */
.record--media { display: grid; grid-template-columns: clamp(4.5rem, 17vw, 7.5rem) 1fr; gap: 1.1rem; align-items: start; }
.record__thumb { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--rule); filter: saturate(0.94); }
/* Pinned to column 2 so a row whose record has no frame leaves the gutter empty
   instead of sliding its text left and breaking the register's one text edge.
   min-width:0 keeps a long unbroken title from widening the text column and
   squeezing the frame to nothing. */
.record__body { grid-column: 2; min-width: 0; }
.record__body > :last-child { margin-bottom: 0; }
/* Below 640px the reserved gutter costs more than the frame earns: it squeezed
   the text column hard enough to break a convening title over five lines, and
   the 26% of rows with no frame paid the gutter for nothing. Stack instead, so
   the text keeps the full measure and the photograph stays a band above it. */
@media (max-width: 640px) {
  .record--media { display: block; }
  .record--media .record__thumb { width: 9rem; margin-bottom: 0.7rem; }
  .record--media .record__body { grid-column: auto; }
}
.record__kind {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.record__title { font-family: var(--display); font-size: 1.1875rem; line-height: 1.25; margin: 0.3rem 0 0.4rem; }
.record__title a { color: var(--ink); text-decoration: none; }
.record__title a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.record__excerpt { font-size: 0.9375rem; color: var(--ink-muted); margin: 0 0 0.55rem; max-width: 52rem; }
.record__tags { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.record__tag {
  font-size: 0.75rem;
  color: var(--ink-muted);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.15rem 0.45rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.record__tag:hover, .record__tag:focus-visible { border-color: var(--accent); background: var(--accent-50); color: var(--ink); }

/* --- Pagination (server-resolvable, clean URLs) ------------------------- */
.pager { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.pager a, .pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.6rem;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pager a:hover, .pager a:focus-visible { background: var(--accent-50); border-color: var(--accent); color: var(--ink); }
.pager [aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }

/* --- The six Centers: a typographic register, not cards ---------------- */
.centers { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.centers__item { border-bottom: var(--hairline) solid var(--rule); }
.centers__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0.35rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}
.centers__link:hover, .centers__link:focus-visible { background: var(--accent-50); color: var(--ink); }
.centers__link:hover .centers__name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.centers__name { font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.15; }
.centers__note { font-size: 0.9375rem; color: var(--ink-muted); grid-column: 2; }
.centers__count { font-size: 0.875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .centers__link { grid-template-columns: 1fr; }
  .centers__note, .centers__count { grid-column: 1; }
}

/* --- Figures ------------------------------------------------------------ */
figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
.figure--bleed img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
/* Headshots and any source taller than it is wide: the photograph keeps its own
   proportions, held to a column the reader's eye can take in at once. */
.figure--upright { max-width: 30rem; margin-inline: auto; }
.figure--upright img { width: 100%; height: auto; }
figcaption { font-size: 0.8125rem; color: var(--ink-faint); padding-top: 0.6rem; max-width: 42rem; }
figcaption cite { font-style: normal; }

/* --- Photography: the receiving room ------------------------------------
   One consistent warm-neutral grade so photographs from fifteen years of
   photographers sit together; never a heavy filter, never a duotone. */
.figure--grade img { filter: saturate(0.94); }
.section--flush-bottom { padding-bottom: 0; }

/* The homepage hero opens on the campus rather than on type. The repo's own layout
   rhythm contract requires a meaningful visual inside the FIRST viewport at every
   size, and a text-first hero only satisfied it on a tall desktop: at 960x640 and
   375x720 the photograph sat below the fold. Leading with it fixes every viewport at
   once, and the height cap keeps the headline in view alongside it rather than
   handing the whole screen to an image.

   That last clause holds on DESKTOP only. On a phone the headline now sits just
   below the fold, deliberately: an independent photo review found the 21:9 band
   left the campus photograph's thirty embassy secretaries about 7px tall, so the
   mobile override below trades a short scroll to the headline for a photograph a
   reader can actually see. layout-rhythm still passes, because what it requires is
   a meaningful visual in the first viewport, not the headline; and the headline was
   already below the fold at 360x640 before any of this. */
.section--hero { padding-block-start: 2.25rem; }
.section--hero .figure--hero img { max-height: min(46vh, 26rem); object-fit: cover; object-position: 50% 42%; }
.section--hero .meridian-line { margin-top: 2rem; }
/* On a phone the 21:9 bleed left a lead photograph ~145px tall, so the campus
   picture's thirty embassy secretaries became a 7px band while the gatepost
   further down the same page got more than twice the height — the hierarchy
   exactly inverted. A box NARROWER than the 3:2 sources makes `cover` bind on
   height instead of width, scaling subjects up ~1.8x rather than letterboxing
   them. This is the lead-photo pattern site-wide, not just the two heroes an
   independent review happened to sample. */
@media (max-width: 760px) {
  .figure--bleed img { aspect-ratio: 4 / 3; }
  .section--hero .figure--hero img { max-height: none; }
  /* The meridian line costs 116px between the lead photograph and the headline
     on a 375px screen — disproportionate for a decorative rule on a phone, and
     the single biggest item in the first-viewport budget after the photo
     itself. Halved here so the taller photograph does not push the headline
     down by its full height. */
  .section--hero .meridian-line { margin-top: 1rem; height: 2rem; margin-bottom: 1rem; }
}

/* --- Buttons (filled): same contrast law as the omnibox submit ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.4rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.btn:hover, .btn:focus-visible { background: var(--accent-800); color: var(--paper); }

/* --- Event metadata block ------------------------------------------------ */
.event-meta {
  border-left: 2px solid var(--accent);
  padding: 0.85rem 0 0.85rem 1.25rem;
  margin: 1.5rem 0 0;
  max-width: var(--measure);
}
.event-meta__when { font-family: var(--display); font-size: 1.25rem; margin: 0 0 0.2rem; }
.event-meta__where { color: var(--ink-muted); margin: 0 0 0.9rem; }
.event-meta__cta { margin: 0 0 0.6rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0; }
.event-meta__note { font-size: 0.8125rem; color: var(--ink-faint); margin: 0; }

/* --- Today's threads: a typographic news register ----------------------- */
.threads { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.threads__item { border-bottom: var(--hairline) solid var(--rule); padding: 0.9rem 0.15rem; }
.threads__title { font-family: var(--display); font-size: clamp(1.125rem, 1.8vw, 1.375rem); margin: 0.15rem 0 0; }
.threads__title a { color: var(--ink); text-decoration: none; }
.threads__title a:hover, .threads__title a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* --- Conversion rail on the ink band ------------------------------------ */
.rail { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; background: #2c333d; border: var(--hairline) solid #2c333d; }
.rail__link { display: block; background: var(--ink); padding: 1.4rem 1.5rem; text-decoration: none; min-height: 44px; }
.rail__link:hover, .rail__link:focus-visible { background: #212833; }
.rail__name { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--paper); }
.rail__link:hover .rail__name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.rail__note { display: block; margin-top: 0.3rem; font-size: 0.9375rem; color: #c8ced7; }

/* --- Experts: the receiving line ----------------------------------------- */
.portraits { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1px; background: var(--paper); border: var(--hairline) solid var(--rule); }
.portrait { display: flex; gap: 1rem; background: var(--paper); padding: 1rem 1.1rem; align-items: flex-start; box-shadow: 0 0 0 var(--hairline) var(--rule); }
.portrait__img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 28%; border-radius: var(--radius); flex: none; filter: saturate(0.94); }
.portrait__img--empty { display: flex; align-items: center; justify-content: center; background: var(--accent-100); border-left: 2px solid var(--accent); font-family: var(--display); font-size: 1.125rem; letter-spacing: 0.03em; color: var(--ink); }
.portrait__name { font-family: var(--display); font-size: 1.125rem; line-height: 1.25; margin: 0 0 0.25rem; }
.portrait__name a { color: var(--ink); text-decoration: none; }
.portrait__name a:hover, .portrait__name a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.portrait__note { font-size: 0.875rem; color: var(--ink-muted); margin: 0 0 0.5rem; }

/* --- Centers register with plates ---------------------------------------- */
.centers__link--plate { grid-template-columns: auto 1fr auto 15rem; align-items: center; }
.centers__plate { display: block; width: 15rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); }
.centers__plate img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94); }
@media (max-width: 640px) {
  .centers__link--plate { grid-template-columns: 1fr; }
  /* 10rem put the six plates at 160px while every other photograph on the site
     runs 240-350px, and the two wide group records -- the fountain delegation
     and the Diplocraft cohort -- lost their people to that band on the one page
     whose copy promises each Center is photographed at its own convenings. */
  .centers__plate { width: 100%; height: 13rem; aspect-ratio: auto; order: -1; margin-bottom: 0.75rem; }
  /* At this width the plate is about 2.2:1 over a 3:2 source, so `cover` trims
     roughly 15% off the top. On the frames whose subjects stand high -- the
     dialogue-dinner speaker, the roundtable panel -- that cut landed on their
     heads. Anchor the crop high; the fountain group sits centred in its own
     frame and keeps the default. */
  .centers__plate img { object-position: 50% 25%; }
  .centers__plate[data-photo-story-id="site-center-plate-diplomatic"] img { object-position: 50% 50%; }
}

@media (min-width: 641px) and (max-width: 1080px) {
  .centers__link--plate { grid-template-columns: auto 1fr auto 10rem; }
  .centers__plate { width: 10rem; }
}

/* --- Event series tiles --------------------------------------------------- */
.series-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--gutter); }
.series__img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); filter: saturate(0.94); }
.series__name { font-family: var(--display); font-size: 1.25rem; margin: 0.8rem 0 0.25rem; }
.series__note { font-size: 0.9375rem; color: var(--ink-muted); margin: 0; }

/* --- Campus --------------------------------------------------------------- */
.houses { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: calc(var(--gutter) * 1.4); }
.house h2 { margin-top: 1.25rem; }
.house figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.house__text p { font-size: 0.9689rem; }
.grounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--gutter); margin-top: 1.5rem; }
.grounds figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- The Ball across the decades ------------------------------------------ */
.decades { display: grid; grid-template-columns: minmax(16rem, 2fr) 3fr; gap: var(--gutter); align-items: start; }
.decades__lead img { width: 100%; }
.decades__strips { display: grid; gap: var(--gutter); }
.decades__strips img { width: 100%; }
@media (max-width: 760px) { .decades { grid-template-columns: 1fr; } }
/* The archive strips are one raster holding three photographs, so narrow
   viewports cannot stack them — they scroll instead, at a width where a face
   is still a face. The partial third frame at the edge is the affordance. */
.decades__lead, .decades__strips, .decades__strips figure { min-width: 0; }
.strip-scroll { overflow-x: auto; overscroll-behavior-x: contain; max-width: 100%; }
.strip-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) {
  .strip-scroll img { min-width: 60rem; }
}

/* --- Pull quote ------------------------------------------------------------ */
.pull { margin: 1.75rem 0 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--accent); max-width: var(--measure); }
.pull p { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; color: var(--ink); }

/* --- Ask Meridian ---------------------------------------------------------- */
.ask-form { display: flex; border: var(--hairline) solid var(--rule-strong); background: var(--paper); border-radius: var(--radius); margin-top: 1.5rem; }
.ask-form:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in oklab, var(--focus) 22%, transparent); }
.ask-form__input { flex: 1; min-width: 0; min-height: 48px; padding: 0.5rem 0.9rem; border: 0; background: transparent; font: inherit; color: var(--ink); }
.ask-form__input:focus { outline: none; }
.ask-answer { background: var(--paper); border: var(--hairline) solid var(--rule); border-left: 2px solid var(--accent); padding: 1.4rem 1.5rem; margin-top: 1.75rem; }
.ask-answer h2 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.ask-answer p { margin-bottom: 0.6em; }
.ask-sources { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ask-source { border: var(--hairline) solid var(--rule); border-radius: var(--radius); padding: 0.75rem 0.9rem; background: var(--canvas); }
.ask-source__kind { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 0.15rem; }
.ask-source__title { font-family: var(--display); font-size: 1.0625rem; margin: 0; }
.ask-samples { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.ask-samples a { display: inline-flex; align-items: center; min-height: 32px; }

/* --- The thread rail on every record ------------------------------------- */
.related { margin-top: 2.5rem; }
.related__head { font-family: var(--body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.35rem; }
.related__list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.related__item { border-bottom: var(--hairline) solid var(--rule); padding: 0.7rem 0.1rem; }
.related__title { font-family: var(--display); font-size: 1.0625rem; line-height: 1.3; margin: 0.1rem 0 0; }
.related__title a { color: var(--ink); text-decoration: none; }
.related__title a:hover, .related__title a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* --- Page-local search: a compact sticky bar over the register ------------ */
.index-controls {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.65rem 0;
  margin-bottom: 1.25rem;
  border-bottom: var(--hairline) solid var(--rule);
}
.index-controls__form { display: flex; align-items: center; gap: 0.9rem; flex: 1 1 24rem; }
.index-controls .rail-search { flex: 1 1 18rem; max-width: 28rem; }
.index-controls .result-count { white-space: nowrap; }
@media (max-width: 700px) { .index-controls { flex-wrap: wrap; gap: 0.4rem; } .index-controls .result-count { white-space: normal; } }
.rail-search { display: flex; border: var(--hairline) solid var(--rule-strong); background: var(--paper); border-radius: var(--radius); }
.rail-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in oklab, var(--focus) 22%, transparent); }
.rail-search__input { flex: 1; min-width: 0; min-height: 44px; padding: 0.4rem 0.6rem; border: 0; background: transparent; font: inherit; font-size: 0.9375rem; color: var(--ink); }
.rail-search__input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius); }
.rail-search__submit { min-height: 44px; min-width: 44px; padding: 0 0.7rem; border: 0; background: var(--ink); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; border-radius: 0 var(--radius) var(--radius) 0; }
.rail-search__submit:hover, .rail-search__submit:focus-visible { background: var(--accent-800); color: var(--paper); }

/* --- From the archive: one frame on the index rail ------------------------ */
.archive-card { margin-top: 1.5rem; border-top: var(--hairline) solid var(--rule); padding-top: 1rem; }
.archive-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); filter: saturate(0.94); }

/* --- Index filter state ----------------------------------------------------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 32px; padding: 0.2rem 0.65rem; background: var(--accent-100); border: var(--hairline) solid var(--accent-300); border-radius: var(--radius); font-size: 0.875rem; color: var(--ink); text-decoration: none; }
.filter-chip:hover, .filter-chip:focus-visible { background: var(--accent-200); color: var(--ink); }
.filter-chip::after { content: "\00d7"; font-weight: 700; color: var(--accent-ink); }

/* --- Tables and wide content scroll inside their own container ---------- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: var(--hairline) solid var(--rule); vertical-align: top; }
th { font-family: var(--body); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #c8ced7; padding-block: var(--step) 2rem; margin-top: var(--step); }
.site-footer h2, .site-footer h3 { color: var(--paper); font-size: 0.75rem; font-family: var(--body); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.site-footer a { color: #cfe6f4; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--paper); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 24px; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--gutter); }
.footer__legal { border-top: var(--hairline) solid #2c333d; margin-top: var(--step); padding-top: 1.25rem; font-size: 0.8125rem; }

/* --- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .record, .facet, .centers__link, .omnibox__hit, .nav__link { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .proto-banner, .omnibox, .nav, .menu-btn, .facets, .pager, .site-footer { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .record { break-inside: avoid; border-left: 0; padding-inline: 0; }
  .masthead { border-bottom: 1pt solid #000; }
}

/* --- Forced colors ----------------------------------------------------- */
@media (forced-colors: active) {
  .facet[aria-pressed="true"], .facet.is-on { border-left-color: Highlight; }
  .omnibox__submit { border: 1px solid ButtonText; }
  .meridian-line { background: CanvasText; }
}