/* ═══════════════════════════════════════════════════════════════════════════
   Localized Chemistry Lab — editorial-scientific
   Typography-first, figure-forward, light/dark aware.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Palette D · split-complementary ───────────────────────────────────
     Navy core (#003265) with its split-complements. One accent does every
     interactive job; the three area hues appear ONLY on tag chips and pillar
     accent rules — that restraint is what keeps the page from becoming a
     rainbow. All values verified ≥4.5:1 against their background.
     Previous palette was teal --accent #0f5f57 / #6fd0bf.
     Re-check with: python3 brand/palette.py                                */

  --navy:       #003265;   /* hero fields, deep structure */

  --ink:        #10161d;
  --ink-2:      #414b57;
  --ink-3:      #6a7482;
  --rule:       #dbe0e6;
  --rule-soft:  #eaeef2;
  --bg:         #fbfaf8;
  --bg-2:       #f2f1ed;
  --bg-card:    #ffffff;

  --accent:      #1a5aa5;  /* links, interactive text — 6.6:1 */
  --accent-soft: #dce9f7;
  --emph:        #b34d15;  /* button fills; carries white text at 4.6:1 */
  --emph-bright: #ef6b22;  /* graphics only — 3.0:1, never text */

  --a-electro:   #1a5aa5;
  --a-solid:     #96631a;
  --a-measure:   #0f6b63;

  /* Body copy used to be capped at a classic reading measure (34rem, roughly
     70 characters) while records — the publication list, the pillar rows —
     ran the full container. Nothing technical required that; it just read as
     two different page widths. Prose now fills the container like everything
     else. Display type (hero, page title, lede) keeps its own tighter cap,
     because those are set large and break badly when a line runs too long. */
  --measure: 100%;
  --measure-wide: 100%;
  --wrap: 74rem;
  --r: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #e6eaef;
    --ink-2:     #a8b3c0;
    --ink-3:     #7a8694;
    --rule:      #26313d;
    --rule-soft: #1c242c;
    --bg:        #0d1219;
    --bg-2:      #131a22;
    --bg-card:   #172029;
    --navy:        #131a22;
    --accent:      #7db4ee;
    --accent-soft: #16283c;
    --emph:        #f0955c;
    --emph-bright: #f0955c;
    --a-electro:   #7db4ee;
    --a-solid:     #dbab5c;
    --a-measure:   #5cc4b4;
  }
}
:root[data-theme="dark"] {
  --ink: #e6eaef; --ink-2: #a8b3c0; --ink-3: #7a8694;
  --rule: #26313d; --rule-soft: #1c242c;
  --bg: #0d1219; --bg-2: #131a22; --bg-card: #172029; --navy: #131a22;
  --accent: #7db4ee; --accent-soft: #16283c;
  --emph: #f0955c; --emph-bright: #f0955c;
  --a-electro: #7db4ee; --a-solid: #dbab5c; --a-measure: #5cc4b4;
}
:root[data-theme="light"] {
  --ink: #10161d; --ink-2: #414b57; --ink-3: #6a7482;
  --rule: #dbe0e6; --rule-soft: #eaeef2;
  --bg: #fbfaf8; --bg-2: #f2f1ed; --bg-card: #ffffff; --navy: #003265;
  --accent: #1a5aa5; --accent-soft: #dce9f7;
  --emph: #b34d15; --emph-bright: #ef6b22;
  --a-electro: #1a5aa5; --a-solid: #96631a; --a-measure: #0f6b63;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.muted { color: var(--ink-3); }
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── header ───────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.head-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.brand-mark { width: 2.9rem; height: 2.9rem; flex: none; color: var(--ink); }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--serif); font-size: 1.075rem; font-weight: 600; letter-spacing: .005em; }
.brand-sub { font-size: .705rem; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }

.nav { display: flex; gap: 1.6rem; }
.nav a {
  text-decoration: none; font-size: .875rem; color: var(--ink-2);
  padding-block: .35rem; border-bottom: 1.5px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 4px 0; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto; flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule); padding: .5rem 1.25rem 1.25rem;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); }
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

/* The hero image is dark navy on its left and carries its detail on the right,
   so the text needs only a light left-side scrim. The background matches the
   image's own navy so there is no seam while it loads. */
.hero {
  position: relative; border-bottom: 1px solid var(--rule); overflow: hidden;
  background: #001a42;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 26, 66, .80) 0%,
    rgba(0, 26, 66, .50) 40%,
    rgba(0, 26, 66, 0) 70%);
}
@media (max-width: 820px) {
  /* On narrow screens the rings sit behind the text, so darken evenly. */
  .hero::after { background: rgba(0, 26, 66, .72); }
}
.hero-inner {
  position: relative; z-index: 2;
  padding-block: clamp(5rem, 14vw, 10rem);
  color: #f4f6f7;
}
.eyebrow {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1rem;
}
.hero-inner .eyebrow { color: rgba(244,246,247,.72); }
.hero-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.6rem, 7.5vw, 5rem); line-height: 1.02;
  letter-spacing: -.022em; margin: 0 0 1.25rem; max-width: 16ch;
}
.hero-lede {
  font-size: clamp(1.075rem, 1.6vw, 1.3rem); line-height: 1.55;
  max-width: 46ch; color: rgba(244,246,247,.9); margin: 0 0 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
  display: inline-block; text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: .7rem 1.4rem; border-radius: var(--r);
  background: var(--emph); color: #fff; border: 1px solid var(--emph);
}
.btn:hover { filter: brightness(1.12); }
.btn-ghost { background: transparent; color: #f4f6f7; border-color: rgba(244,246,247,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.1); filter: none; }

/* ── prose ────────────────────────────────────────────────────────────────── */

.prose { max-width: var(--measure); }
.measure-wide, .prose.measure-wide { max-width: var(--measure-wide); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.7rem;
  line-height: 1.2; letter-spacing: -.012em; margin-top: 2.4em; margin-bottom: .1em;
}
.prose h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.22rem;
  margin-top: 2em; margin-bottom: .1em;
}
.prose p { margin-block: 0; color: var(--ink-2); }
.prose li { color: var(--ink-2); margin-bottom: .5em; }
.prose ul { padding-left: 1.15rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose-sm { font-size: .95rem; }

.page-head {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--bg-2);
}
.page-head h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.05;
  letter-spacing: -.02em; margin: 0; max-width: 20ch;
}
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-2);
  max-width: var(--measure-wide); margin: 1rem 0 0; line-height: 1.55;
}
.page-head .eyebrow a { color: var(--ink-3); text-decoration: none; }
.page-head .eyebrow a:hover { color: var(--accent); }

.section-title {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.01em; margin: 0 0 1.75rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--rule);
}

.arrow { text-decoration: none; color: var(--accent); font-weight: 500; font-size: .93rem; }
.arrow::after { content: " →"; }
.arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── bands ────────────────────────────────────────────────────────────────── */

.band {
  background: var(--bg-2); border-block: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.band-quiet { background: var(--bg); }
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.split .prose h2 { margin-top: 0; font-size: 1.45rem; }

/* ── pillar cards ─────────────────────────────────────────────────────────── */

.pillar-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.pillar-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; transition: transform .18s ease, border-color .18s ease;
}
.pillar-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.pillar-fig { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-2); }
.pillar-fig img { width: 100%; height: 100%; object-fit: cover; }
.pillar-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.pillar-num {
  font-family: var(--mono); font-size: .72rem; color: var(--ink-3); letter-spacing: .1em;
  margin: 0;
}
.pillar-body h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin: 0; line-height: 1.25; }
.pillar-body p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.pillar-body .more { font-size: .87rem; color: var(--accent); font-weight: 500; margin-top: .35rem; }
.pillar-body .more::after { content: " →"; }

.pillar-list { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 3rem; }
.pillar-row { display: grid; gap: 2rem; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
@media (max-width: 780px) { .pillar-row { grid-template-columns: 1fr; } }
.pillar-row-fig { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); }
.pillar-row-body h2 { margin-top: .2em; font-size: 1.85rem; }
.pillar-row-body h2 a { text-decoration: none; }
.pillar-row-body h2 a:hover { color: var(--accent); }

.wide-figure { margin: 0 auto; padding-top: 2.5rem; }
.wide-figure img {
  width: 100%; aspect-ratio: 21/9; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--rule);
}
.wide-figure figcaption {
  font-size: .84rem; margin-top: .9rem; color: var(--ink-3);
  max-width: var(--measure-wide); line-height: 1.55;
}
.wide-figure figcaption p { margin: 0; }
.wide-figure figcaption strong { color: var(--ink-2); font-weight: 600; }
.wide-figure figcaption em { font-style: italic; }

/* Inline data figures. The SVG carries its own colour tokens, so it follows
   the theme; the frame just gives it room and a hairline. */
.fig-frame {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--bg-card); padding: .5rem .25rem;
  overflow: hidden;
}
.fig-frame svg { width: 100%; height: auto; display: block; }

.pillar-fig svg, .pillar-row-fig svg { width: 100%; height: 100%; display: block; }
.pillar-fig { background: var(--bg-card); }
.pillar-row-fig { background: var(--bg-card); display: block; }
.pillar-row-fig svg { aspect-ratio: 16/10; object-fit: cover; }

.callout {
  margin-top: 3rem; padding: 1.5rem 1.6rem;
  border-left: 3px solid var(--accent); background: var(--bg-2);
  border-radius: 0 var(--r) var(--r) 0; max-width: var(--measure);
}
.callout h3 { font-family: var(--serif); margin: 0 0 .4rem; font-size: 1.1rem; }
.callout p { margin: 0 0 .5rem; color: var(--ink-2); font-size: .95rem; }

.pillar-nav { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 3.5rem; }
.pillar-nav-item {
  display: flex; flex-direction: column; gap: .3rem; text-decoration: none;
  padding: 1.1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--bg-card);
}
.pillar-nav-item:hover { border-color: var(--accent); }
.pillar-nav-item span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.pillar-nav-item strong { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }

/* ── publications ─────────────────────────────────────────────────────────── */

.pub-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
}
.filter-set { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: .42rem .95rem; border-radius: 100px;
  border: 1px solid var(--rule); background: var(--bg-card); color: var(--ink-2);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-count { margin: 0 0 0 auto; font-size: .82rem; font-family: var(--mono); }

.year-strip {
  display: flex; flex-wrap: wrap; gap: .1rem .35rem;
  padding: .9rem 0; border-bottom: 1px solid var(--rule-soft); margin-bottom: 1rem;
}
.year-strip a {
  font-family: var(--mono); font-size: .76rem; color: var(--ink-3);
  text-decoration: none; padding: .2rem .45rem; border-radius: 3px;
}
.year-strip a:hover { background: var(--accent-soft); color: var(--accent); }

.pub-year { margin-bottom: 2rem; }
.year-head {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .14em;
  color: var(--ink-3); font-weight: 500; text-transform: uppercase;
  margin: 2.5rem 0 .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule-soft);
}

.pub { border-bottom: 1px solid var(--rule-soft); }
.pub-main { padding: 1.15rem 0; }
.pub-toggle {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit;
  color: inherit;
}
.pub-title {
  font-family: var(--serif); font-size: 1.115rem; font-weight: 600;
  line-height: 1.32; color: var(--ink); margin: 0; letter-spacing: -.005em;
}
.pub-title-static { padding-right: 2rem; }
.pub-toggle:hover .pub-title { color: var(--accent); }
.chev {
  flex: none; width: .6rem; height: .6rem; margin-top: .42rem;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .2s ease;
}
.pub-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg); }

.pub-authors { margin: .5rem 0 .2rem; font-size: .9rem; color: var(--ink-3); }
.au-lead { color: var(--ink); font-weight: 600; }
.au-trainee { color: var(--accent); font-weight: 500; }
.au-sep { color: var(--ink-3); }

.pub-cite { margin: .15rem 0 0; font-size: .88rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; }
.doi { font-family: var(--mono); font-size: .76rem; color: var(--accent); text-decoration: none; letter-spacing: .05em; }
.doi:hover { text-decoration: underline; }
.pill {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent); padding: .15rem .5rem; border-radius: 100px;
}

.pub-tags { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: 3px;
  border: 1px solid var(--rule); color: var(--ink-3);
}
.tag-electrochemistry { color: var(--a-electro); border-color: color-mix(in srgb, var(--a-electro) 35%, transparent); }
.tag-solid-state      { color: var(--a-solid);   border-color: color-mix(in srgb, var(--a-solid) 35%, transparent); }
.tag-measurement      { color: var(--a-measure); border-color: color-mix(in srgb, var(--a-measure) 35%, transparent); }

.pub-abstract { padding: 0 0 1.4rem; max-width: var(--measure-wide); }
.pub-abstract .prose { color: var(--ink-2); }
.empty-state { text-align: center; padding: 3rem 0; color: var(--ink-3); }

/* ── group photo ───────────────────────────────────────────── */

/* Same mat as the portraits on /people/, at banner scale. */
.group-figure { margin: 0; }
.group-frame {
  padding: .7rem; background: var(--bg-card);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.group-frame img {
  display: block; width: 100%; height: auto; border-radius: 2px;
  border: 1px solid var(--rule);
}
.group-figure figcaption {
  font-size: .87rem; margin-top: .9rem; color: var(--ink-3);
}
.group-figure figcaption p { margin: 0; }
.group-figure figcaption .arrow { margin-left: .35rem; font-size: .87rem; }

/* ── people ───────────────────────────────────────────────────────────────── */

/* The lead sits in the same card stock as everyone below, just laid out
   sideways: photo in one column, details in the other, one border around both.
   The card's own padding is the mat, so the portrait needs no frame of its own
   here — nesting one would read as a card inside a card. */
.lead-card {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: 12rem 1fr;
  align-items: start; margin-bottom: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r);
}
@media (max-width: 640px) { .lead-card { grid-template-columns: 1fr; } }
.lead-body h2 { font-family: var(--serif); font-size: 1.9rem; margin: .2rem 0 .2rem; }
.lead-body p { margin: 0 0 .3rem; }
.lead-body .role { color: var(--ink-2); font-size: 1rem; }

.people-section { margin-top: 3.5rem; }
.people-grid {
  display: grid; gap: 2rem 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.person {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color .18s ease, transform .18s ease;
}
.person:hover { border-color: var(--accent); transform: translateY(-2px); }
.person-body { padding: 1rem 1.1rem 1.25rem; }
.person h3 { font-family: var(--serif); font-size: 1.075rem; font-weight: 600; margin: 0 0 .15rem; }
.person p { margin: 0 0 .3rem; font-size: .87rem; color: var(--ink-2); }
.person .role { color: var(--ink-3); font-size: .8rem; }
.person-project { font-size: .85rem; color: var(--ink-2); line-height: 1.45; }
.person a { color: var(--accent); font-size: .82rem; }

/* Portraits are shot and cropped 4:5, then set inside a mat the way a print is
   mounted: a band of card stock on every side and a hairline at the edge of the
   image itself. The mat is what keeps a grid of faces from reading as a sheet
   of stamps. Behind each photo sits a plate of flat accent, offset down and to
   the right, so a wedge of colour shows along two edges — enough structure to
   register as deliberate, quiet enough to survive sixteen of them on a page.
   The asymmetric padding is what makes room for the plate; the image itself
   stays flush left and top. */
.portrait {
  padding: .6rem 1.1rem 1.1rem .6rem;
  position: relative; isolation: isolate;
}
.portrait::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: .6rem 1.1rem 1.1rem .6rem;
  transform: translate(.5rem, .5rem);
  background: var(--accent); opacity: .22;
  transition: opacity .18s ease;
}
.person:hover .portrait::before { opacity: .34; }
@media (prefers-reduced-motion: reduce) {
  .portrait::before { transition: none; }
}
.avatar {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 30%; position: relative; z-index: 1;
  background: var(--bg-2); border: 1px solid var(--rule);
}
.avatar.ph {
  display: grid; place-items: center;
  background:
    linear-gradient(145deg, var(--accent-soft) 0%, var(--bg-2) 70%);
}
.avatar.ph span {
  font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 600; color: var(--accent); opacity: .65; letter-spacing: .02em;
}

/* The lead keeps the same plate; only the width is constrained. */
.portrait-lead { max-width: 13rem; }
.alumni-block { margin-bottom: 2.25rem; }
.alumni-head {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  margin: 0 0 .75rem; padding-bottom: .45rem; border-bottom: 1px solid var(--rule-soft);
}
.alumni-list { list-style: none; padding: 0; margin: 0; }
.alumni-list li {
  display: grid; gap: .2rem 1rem; padding: .5rem 0;
  grid-template-columns: minmax(9rem, 14rem) minmax(7rem, 10rem) 1fr;
  border-bottom: 1px solid var(--rule-soft); font-size: .9rem;
}
@media (max-width: 640px) { .alumni-list li { grid-template-columns: 1fr; } }
.al-name { color: var(--ink); }
.al-years { font-family: var(--mono); font-size: .78rem; }
.al-now { color: var(--ink-2); font-size: .87rem; }

/* ── partners ─────────────────────────────────────────────────────────────── */

.partner-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.partner {
  padding: 1.4rem 1.5rem; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--bg-card); border-left: 3px solid var(--accent);
}
.partner h3 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .35rem; }
.partner p { margin: 0; font-size: .87rem; }
.partner-past { list-style: none; padding: 0; margin: 0; }
.partner-past li { padding: .55rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .92rem; }

/* ── footer ───────────────────────────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--rule); background: var(--bg-2); margin-top: 4rem; }
.foot-grid {
  display: grid; gap: 2rem; padding-block: 3.25rem 2rem;
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(11rem, 1fr));
}
.foot-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: 0 0 .3rem; }
.foot-tag { color: var(--ink-3); font-size: .9rem; margin: 0; font-style: italic; }
.site-foot h3 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; margin: 0 0 .75rem;
}
.site-foot p { margin: 0 0 .5rem; font-size: .87rem; color: var(--ink-2); }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { margin-bottom: .45rem; font-size: .87rem; }
.foot-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding-block: 1.25rem; border-top: 1px solid var(--rule);
}
.foot-legal p { margin: 0; font-size: .8rem; }

@media print {
  .site-head, .site-foot, .pub-controls, .year-strip, .hero-actions { display: none; }
  .pub-abstract { display: block !important; }
  body { background: #fff; color: #000; }
}