/* ==========================================================================
   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 whole home page. Stops are placed against
   measured section offsets so the dark→light crossover lands on the team photo
   row — no body text ever sits over the ambiguous mid-tones. Earth is composited
   with mix-blend-mode: screen, so its black backdrop dissolves into the top. */

.descent {
  background: linear-gradient(
    to bottom,
    #000000 35.0%,
    #010101 37.5%,
    #030303 40.0%,
    #070707 42.5%,
    #0f0f0e 45.0%,
    #1c1c1c 47.5%,
    #313130 50.0%,
    #4d4d4c 52.5%,
    #706f6e 55.0%,
    #969593 57.5%,
    #bbbab8 60.0%,
    #d9d8d5 62.5%,
    #e9e8e5 65.0%,
    #ebeae7 67.5%,
    #ebeae7 70.0%,
    #ebeae7 72.5%,
    #ebeae7 75.0%,
    #ebeae7 77.5%,
    #ebeae7 80.0%,
    #ebeae7 82.5%,
    #ebeae7 85.0%,
    #ebeae7 87.5%,
    #ebeae7 90.0%,
    #ebeae7 92.5%,
    #ebeae7 95.0%,
    #ebeae7 97.5%,
    #ebeae7 100.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 {
  padding-bottom: clamp(4.5rem, 10vw, 8rem);
}

.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);
}

.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;
}