/* ==========================================================================
   Hochbaum Lab
   Type:  Barlow (display / UI / metadata) + Newsreader (running prose)
   Color: a warm grey ground, with an "iodine violet" accent — thyroid hormone
          is an iodinated molecule, and iodine vapour is violet. The home page
          runs one continuous descent from the black of space down onto that
          ground; it is a single committed visual world, not theme-reactive.
   ========================================================================== */

@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Newsreader set the body text until we moved to Barlow throughout. Nothing
   references it now, so the browser never fetches it; kept for an easy revert. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- tokens --------------------------------------------------------------- */

:root {
  --ground: #ebeae7;
  --ground-2: #e2e1dd;
  --ink: #3b3b38;
  --muted: #71716c;
  --rule: #d6d5d0;
  --accent: #4f4494;
  --accent-soft: #e7e5f1;
  --on-dark: #f4f4f2;

  /* Two seams, one family for now: --sans is chrome (nav, labels, titles),
     --body is running text. Kept separate so body can change on its own. */
  --sans: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --measure: 66ch;
  --page: 1120px;
  --gut: clamp(1.25rem, 5vw, 3rem);

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  --step-4: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
}

/* --- base ----------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ground);
  padding: 0.6rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* A fine fractal grain over everything. It gives the flat ground some tooth,
   and — because it dithers the long gradient — it is also what stops the
   descent from banding into visible steps on 8-bit displays. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* --- layout primitives ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.measure {
  max-width: var(--measure);
}

/* --- header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

/* The home page opens on black, so its masthead sits on black too. */
.site-header--dark {
  --ink: #e0e0db;
  --muted: #b0b0aa;
  --accent: #ded8f5;
  --rule: rgba(224, 224, 219, 0.16);
  background: rgba(0, 0, 0, 0.86);
  color: var(--ink);
}

@media (max-width: 700px) {
  .site-header--dark .nav {
    background: #000;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
  padding-block: 0.75rem;
}

.wordmark {
  display: block;
  text-decoration: none;
  line-height: 1.15;
}

.wordmark__name {
  display: block;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.01em;
}

.wordmark__affil {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.09em;
  text-transform: lowercase;
  color: var(--muted);
}

.wordmark__affil span {
  display: block;
}

.wordmark:hover .wordmark__name {
  color: var(--accent);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.nav a {
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--muted);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}

.nav a:hover {
  color: var(--ink);
}

.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

@media (max-width: 700px) {
  .nav-toggle {
    display: block;
  }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem var(--gut) 1.25rem;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
  }
  .nav.is-open {
    display: flex;
  }
  .nav a {
    width: 100%;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav a[aria-current="page"] {
    border-bottom-color: var(--accent);
  }
}

/* --- hero ----------------------------------------------------------------- */

/* One continuous descent behind the home page. The gradient lives on
   .descent__dark, the wrapper holding the hero, research and team sections, so
   its stops are measured against the dark content alone: the dark→light
   crossover lands on the team photo row and finishes inside that section's
   bottom padding, and everything below (news, publications) sits on the flat
   ground. It used to be a percentage of the whole <main>, which meant every
   news item added below dragged the crossover down onto the dark type. The
   dense stops keep the fade from banding on 8-bit displays. Earth is
   composited with mix-blend-mode: screen, so its black backdrop dissolves into
   the top. */

.descent {
  background: var(--ground);
}

.descent__dark {
  background: linear-gradient(
    to bottom,
    #000000 59.0%,
    #010101 62.5%,
    #030303 66.0%,
    #070707 69.5%,
    #0f0f0e 73.0%,
    #1c1c1c 76.0%,
    #313130 79.5%,
    #4d4d4c 83.0%,
    #706f6e 86.5%,
    #969593 90.0%,
    #bbbab8 93.0%,
    #d9d8d5 96.5%,
    #e9e8e5 99.0%,
    var(--ground) 100%
  );
}

/* Sections lying over the dark part of the descent re-point the palette rather
   than restyling each component. */
.on-dark {
  --ink: #e0e0db;
  --muted: #b0b0aa;
  --accent: #ded8f5;
  --rule: rgba(224, 224, 219, 0.18);
  --accent-soft: rgba(224, 224, 219, 0.07);
  color: var(--ink);
}

.hero {
  position: relative;
  background: transparent;
  padding-block: clamp(2rem, 5vh, 3.5rem) clamp(3rem, 8vh, 5rem);
  text-align: center;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__title {
  margin: 0;
  max-width: 18ch;
  color: var(--ink);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero__earth {
  width: clamp(240px, 34vw, 430px);
  height: auto;
  margin-block: clamp(0.25rem, 1vh, 0.75rem);
  /* The source is a black-backed square; blending it against the black end of
     the gradient removes the box without needing a cut-out alpha channel. */
  mix-blend-mode: screen;
}

/* --- meet the team strip -------------------------------------------------- */

/* .section--handoff, the extra bottom padding under the photo row, is declared
   with the other section rules further down: it must follow .section in the
   cascade or .section's padding-block overrides it. */

.faces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.faces img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.35s ease;
}

.faces a:hover img,
.faces a:focus-visible img {
  filter: grayscale(0%);
}

.faces .faces__mono {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.faces .faces__mono:hover {
  color: var(--accent);
  filter: brightness(0.97);
}

/* --- research tabs -------------------------------------------------------- */

/* --- research carousel ---------------------------------------------------- */

.carousel__viewport {
  overflow: hidden;
}

/* All slides sit in one flex row, so the viewport takes the height of the
   tallest and nothing jumps between them. The track is moved in pixels, not
   percentages — a percentage translate resolves to zero on this element. */
.carousel__track {
  display: flex;
  align-items: stretch;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.slide__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.58fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.slide__grid--wide {
  grid-template-columns: minmax(0, 1fr);
}

.slide__title {
  margin: 0 0 0.85rem;
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.18;
  text-wrap: balance;
}

/* The stage reserves room on both flanks so the arrows sit beside the slides
   without ever overhanging the page. */
.carousel__stage {
  position: relative;
  padding-inline: clamp(2.9rem, 4vw, 3.6rem);
}

.carousel__controls {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 2.5vw, 1.85rem);
}

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  appearance: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.carousel__nav--prev {
  left: 0;
}

.carousel__nav--next {
  right: 0;
}

.carousel__nav:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.carousel__dots {
  display: flex;
  gap: 0.6rem;
}

.carousel__dot {
  appearance: none;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
  transition: background 0.2s ease;
}

.carousel__dot:hover {
  background: var(--muted);
}

.carousel__dot[aria-current="true"] {
  background: var(--accent);
}

.carousel__label {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--muted);
  text-align: right;
}

@media (max-width: 820px) {
  .slide__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- sections ------------------------------------------------------------- */

.section {
  padding-block: clamp(2rem, 4vw, 3.25rem);
}

/* Extra room below the home page's photo row: the tail of the descent (mid
   grey → ground) runs out here, so the first section of dark type never starts
   on grey. Declared after .section so its padding-bottom wins the cascade. */
.section--handoff {
  padding-bottom: clamp(10rem, 22.5vw, 18rem);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.15rem, 2vw, 1.75rem);
}

/* Section headings share the language of the small accent labels — uppercase,
   spaced, violet — just a step larger than the body text. */
.section__title {
  margin: 0;
  color: var(--accent);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-wrap: balance;
}

.more-link {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.more-link::after {
  content: " \2192";
}

.more-link:hover {
  color: var(--accent);
}

/* --- prose ---------------------------------------------------------------- */

.prose {
  font-family: var(--body);
  font-size: var(--step-1);
  line-height: 1.72;
  color: var(--ink);
}

.prose p {
  margin: 0 0 1.15em;
  max-width: var(--measure);
}

.prose--full p {
  max-width: none;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose em {
  font-style: italic;
}

/* Statement list — echoes the middot markers on the original site. */

.statements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  max-width: var(--measure);
}

.statements li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--body);
  font-size: var(--step-1);
  line-height: 1.68;
}

.statements li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Hero variant: no markers, centred, and held to roughly the width of the
   first statement so the longer second one wraps to match it. Must follow the
   base .statements rules — same specificity, so source order decides. */
.statements--invert {
  /* The first statement measures ~581px unwrapped and the second ~820px, so a
     box in between holds the first on one line and folds the second to match. */
  max-width: 39rem;
  margin-top: 0;
  text-align: center;
}

.statements--invert li {
  padding-left: 0;
  color: var(--ink);
  line-height: 1.68;
}

.statements--invert li::before {
  content: none;
}

/* --- research themes ------------------------------------------------------ */

.theme {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
}

.theme:first-of-type {
  padding-top: 0;
}

.theme--flip .theme__figure {
  order: -1;
}

.theme__title {
  margin: 0 0 0.75rem;
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.theme__figure {
  margin: 0;
}

.theme__figure img {
  width: 100%;
  border: 1px solid var(--rule);
  background: #fff;
}

.theme__figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 820px) {
  .theme {
    grid-template-columns: 1fr;
  }
  .theme--flip .theme__figure {
    order: 0;
  }
}

/* --- news ----------------------------------------------------------------- */

.news {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 760px;
}

.news li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--rule);
}

.news li:first-child {
  border-top: 0;
  padding-top: 0;
}

.news time {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: 0.28em;
  white-space: nowrap;
}

.news p {
  margin: 0;
  font-family: var(--body);
  font-size: var(--step-1);
  line-height: 1.72;
}

@media (max-width: 560px) {
  .news li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .news time {
    padding-top: 0;
  }
}

/* --- publications --------------------------------------------------------- */

.pub-group {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.pub-group:last-child {
  margin-bottom: 0;
}

.pub-group__title {
  margin: 0 0 1.5rem;
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.pubs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 880px;
}

/* Entries carrying a graphical abstract set it alongside the citation; those
   without simply run full width rather than reserving an empty column. */
.pub {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.pub--plain {
  grid-template-columns: minmax(0, 1fr);
}

/* Journal cover sits to the right of the citation rather than left of it, and
   the text column is sized to its content so the cover tucks in beside the
   title instead of being pushed to the far edge. */
.pub--cover {
  grid-template-columns: minmax(0, max-content) 170px;
  justify-content: start;
}

.pub__thumb {
  margin: 0;
}

.pub__thumb img {
  width: 100%;
  border: 1px solid var(--rule);
  background: #fff;
}

.pub__read {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--accent);
  text-decoration: none;
}

.pub__read::after {
  content: " \2192";
}

.pub__read:hover {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 620px) {
  .pub {
    grid-template-columns: minmax(0, 1fr);
  }
  .pub__thumb {
    max-width: 260px;
  }
}

/* Titles are sentence-case prose, so they follow the site's lower-case rule.
   This is a display transform, not an edit: the markup keeps real capitals, so
   text copied from the page still pastes correctly into a citation manager.
   Terms whose capitals carry meaning opt out via .keep below. */
.pub__title {
  margin: 0 0 0.35rem;
  font-family: var(--body);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.35;
  text-transform: lowercase;
  text-wrap: pretty;
}

/* Acronyms, genus names and software names whose capitals are not merely
   sentence case. Opts a fragment out of any lower-casing ancestor. */
.keep {
  text-transform: none;
}

.pub__authors {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

/* .self is Daniel; .lab is anyone else who was in the lab. Styled alike, kept
   distinct so the two can diverge later without re-tagging every author list. */
.pub__authors .self,
.pub__authors .lab {
  color: var(--ink);
  font-weight: 500;
}

/* Author lists longer than five names truncate, with the remainder one click
   away rather than on a separate page. */
.authors-more {
  appearance: none;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.authors-more:hover {
  border-bottom-color: currentColor;
}

.pub__venue {
  margin: 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Journal names and author names keep their capitals. Only the titles, which
   are sentence-case prose, follow the site's lower-case rule. */
.pub__venue em {
  font-family: var(--body);
  font-style: italic;
  font-size: 1.02em;
  color: var(--ink);
}

/* Recent years stay open; everything earlier collapses to a year you can
   expand, so the full record is present without dominating the page. */
/* The whole back catalogue hides behind one disclosure; opening it reveals the
   years, each of which opens in turn. */
.pub-archive {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.pub-archive__summary {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-block: 0.5rem;
  list-style: none;
  cursor: pointer;
  color: var(--accent);
  transition: opacity 0.15s ease;
}

.pub-archive__summary::-webkit-details-marker {
  display: none;
}

.pub-archive__summary::before {
  content: "\203A";
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.pub-archive[open] > .pub-archive__summary::before {
  transform: rotate(90deg);
}

.pub-archive__summary:hover {
  opacity: 0.75;
}

.pub-archive__label {
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pub-archive > .pub-year {
  margin-left: 1.6rem;
}

.pub-archive > .pub-year:first-of-type {
  margin-top: 0.9rem;
}

.pub-year {
  margin-bottom: 0.35rem;
}

.pub-year__summary {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-block: 0.55rem;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  transition: color 0.15s ease;
}

.pub-year__summary::-webkit-details-marker {
  display: none;
}

.pub-year__summary::before {
  content: "\203A";
  display: inline-block;
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.pub-year[open] > .pub-year__summary::before {
  transform: rotate(90deg);
}

.pub-year__summary:hover {
  color: var(--accent);
}

.pub-year__label {
  font-size: 1.18rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.pub-year .pubs,
.pub-year .news {
  margin-block: 1.5rem 2.5rem;
}

.footnote {
  margin: 2.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: var(--measure);
}

/* --- team ----------------------------------------------------------------- */

.team-group {
  padding-block: clamp(1.15rem, 2.5vw, 1.85rem);
}

.team-group:first-of-type {
  padding-top: 0;
}

.team-group__title {
  margin: 0 0 1.75rem;
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Alumni collapse behind a disclosure, styled as a peer of the group headings. */
.team-archive {
  padding-block: clamp(1.15rem, 2.5vw, 1.85rem);
}

.team-archive__summary {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  list-style: none;
  cursor: pointer;
  color: var(--accent);
  transition: opacity 0.15s ease;
}

.team-archive__summary::-webkit-details-marker {
  display: none;
}

.team-archive__summary::before {
  content: "\203A";
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.team-archive[open] > .team-archive__summary::before {
  transform: rotate(90deg);
}

.team-archive__summary:hover {
  opacity: 0.75;
}

.team-archive__label {
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.team-archive[open] .people {
  margin-top: 1.75rem;
}

.people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

.people:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
}

.person {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}

.person:nth-child(-n + 2) {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 760px) {
  .people {
    grid-template-columns: minmax(0, 1fr);
  }
  .person:nth-child(2) {
    border-top: 1px solid var(--rule);
    padding-top: 1.75rem;
  }
}

.person__portrait {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-soft);
}

.person__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02);
  transition: filter 0.4s ease;
}

.person:hover .person__portrait img {
  filter: grayscale(0%);
}

/* Monogram stands in where we have no photograph yet. */
.person__monogram {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 2.1rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-soft);
}

.person__name {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.person__role {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.person__role a {
  color: var(--muted);
  text-decoration-color: var(--rule);
}

.person__role a:hover {
  color: var(--accent);
}

/* min-width:0 lets the grid track shrink below the intrinsic width of a long
   address; without it a single email widens the whole page on narrow screens. */
.person__body {
  min-width: 0;
}

.person__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 0.7rem;
  min-width: 0;
}

.person__links a,
.person__email {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  overflow-wrap: anywhere;
}

/* Addresses stay written out with "[at]", as on the original site, so they
   are readable to people but not to naive address harvesters. */
.person__email {
  border-bottom-color: transparent;
}

.person__links a:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

.person__after {
  margin: 0.55rem 0 0;
  font-family: var(--body);
  font-size: 0.98rem;
  font-style: italic;
  color: var(--muted);
}

/* Inline-expanding biography */

.bio-toggle {
  margin-top: 0.85rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.bio-toggle__arrow {
  transition: transform 0.28s ease;
  display: inline-block;
}

.bio-toggle[aria-expanded="true"] .bio-toggle__arrow {
  transform: rotate(90deg);
}

.bio-toggle__label--less {
  display: none;
}

.bio-toggle[aria-expanded="true"] .bio-toggle__label--more {
  display: none;
}

.bio-toggle[aria-expanded="true"] .bio-toggle__label--less {
  display: inline;
}

.bio {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.bio[data-open="true"] {
  grid-template-rows: 1fr;
}

/* visibility keeps a collapsed bio out of the accessibility tree and tab
   order; the delay lets it stay visible for the duration of the close. */
.bio__inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.32s;
}

.bio[data-open="true"] .bio__inner {
  visibility: visible;
  transition-delay: 0s;
}

.bio__inner p {
  margin: 0.9rem 0 0;
  max-width: 60ch;
  font-family: var(--body);
  line-height: 1.72;
  color: var(--ink);
}

/* Appointments and honours, set as year/label pairs. */
.bio__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
  margin-top: 1.75rem;
}

.bio__meta h4 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.bio__meta dl {
  margin: 0;
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 0.4rem 0.9rem;
}

.bio__meta dt {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.bio__meta dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .person {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 1.1rem;
  }
  .person__portrait {
    width: 92px;
    height: 92px;
  }
  .person__monogram {
    font-size: 1.5rem;
  }
}

/* --- callout panel -------------------------------------------------------- */

.panel {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
}

.panel h2 {
  margin: 0 0 0.6rem;
  text-transform: lowercase;
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.2;
}

.panel p {
  margin: 0 0 1.1rem;
  max-width: 58ch;
  font-family: var(--body);
  line-height: 1.72;
}

.panel p:last-child {
  margin-bottom: 0;
}

.button {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.88rem;
  letter-spacing: 0.07em;
  text-transform: lowercase;
  text-decoration: none;
  border-radius: 2px;
}

.button:hover {
  color: #fff;
  filter: brightness(1.12);
}

/* --- footer --------------------------------------------------------------- */

.site-footer {
  text-transform: lowercase;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--ground);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  align-items: start;
}

.site-footer p {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}

.site-footer strong {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 400;
  color: var(--ink);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--accent);
}

/* Sits below the email with a clear gap, so the address does not read as a
   continuation of it. */
.site-footer__address {
  margin-top: 1.4rem;
}

.site-footer__nav {
  display: grid;
  gap: 0.3rem;
}

.site-footer__nav a {
  text-decoration: none;
  font-size: 0.92rem;
}