/* Sustainable Futures Research Laboratory
   One stylesheet for the whole site. Colours, type and spacing all
   come from the custom properties in the first block - change a value
   there and it updates everywhere. */

/* ---------------------------------------------------------------
   Design tokens
   Palette: freshwater and boreal — cool paper, spruce ink, deep
   teal accent. The five "stratum" bands read top-to-bottom like a
   soil or water core sample: canopy, water, wetland, silt, bedrock.
   --------------------------------------------------------------- */
:root {
  --paper:   #edf0ed;
  --paper-2: #e4e9e5;
  --ink:     #15211c;
  --ink-2:   #47574f;
  --rule:    #c9d1cb;
  --accent:  #0c6a6a;
  --accent-2:#094f4f;

  --band-canopy:  #2f6f4f;
  --band-water:   #0c6a6a;
  --band-wetland: #5f8f86;
  --band-silt:    #a9722a;
  --band-bedrock: #15211c;

  --serif: "Iowan Old Style", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 36rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shell: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #101815;
    --paper-2: #18221e;
    --ink:     #e7ece9;
    --ink-2:   #a3b1aa;
    --rule:    #2c3934;
    --accent:  #57b8b0;
    --accent-2:#82cfc8;

    --band-canopy:  #4b9a70;
    --band-water:   #3d9c9c;
    --band-wetland: #7fada6;
    --band-silt:    #c9913f;
    --band-bedrock: #6f7f78;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; }
p, ul, ol, dl { margin: 0; }
img { max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
a:hover { color: var(--accent-2); }

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

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

/* Skip link — visible only once focused by keyboard */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------
   Masthead
   --------------------------------------------------------------- */
.masthead { padding-block: 1.5rem 1.25rem; }

.masthead-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.affiliation { display: block; flex: none; }
.affiliation img {
  display: block;
  height: clamp(46px, 6.5vw, 68px);
  width: auto;
}

/* The supplied artwork is the red version, intended for light backgrounds.
   Rather than recolour a trademark, dark mode sets it on a light plate.
   Delete this rule once the official reverse version is in place. */
@media (prefers-color-scheme: dark) {
  .affiliation {
    background: #edf0ed;
    border-radius: 4px;
    padding: 2px 10px;
  }
}

.wordmark {
  color: inherit;
  text-decoration: none;
  display: flex;
  /* The mark is now a circle, which has no ground line to share, so it
     centres rather than sitting on the baseline. */
  align-items: center;
  /* The name's size lives here so the mark can scale from it in em. */
  font-size: clamp(0.684rem, 2.5vw + 0.18rem, 1.9rem);
  gap: 0.55em;
}

.mark {
  flex: none;
  display: block;
  height: 1.5em;
  width: auto;
}
.wordmark-text {
  display: block;
  /* The name's optical centre is its cap-height midpoint, 0.35em above the
     baseline; the line box centres 0.30em above it. Nudging the type down by
     the 0.05em difference lines it up with the middle of the rings. */
  position: relative;
  top: 0.05em;
}

.wordmark-text b {
  display: block;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.1;
  white-space: nowrap;
}
.wordmark-text span {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.2rem;
}
.wordmark:hover b { color: var(--accent); }

.nav { margin-top: 1.5rem; }
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.35rem;
  list-style: none;
  padding: 0;
}
.nav a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--band-water);
}

/* ---------------------------------------------------------------
   Signature: the stratum band (a core sample, read left to right).
   Purely graphic, so it is hidden from assistive technology.
   --------------------------------------------------------------- */
.stratum {
  height: 6px;
  background: linear-gradient(to right,
    var(--band-canopy)  0,      var(--band-canopy)  16.67%,
    var(--band-water)   16.67%, var(--band-water)   44.44%,
    var(--band-wetland) 44.44%, var(--band-wetland) 55.56%,
    var(--band-silt)    55.56%, var(--band-silt)    61.11%,
    var(--band-bedrock) 61.11%, var(--band-bedrock) 100%);
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 9vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); }

/* The maple sits in the margin to the left of the headline, with the rest of
   the hero indented to the same line so every left edge agrees. A grid rather
   than absolute positioning, so the drawing can never ride over the type. */
.hero { --tree-w: clamp(112px, 12vw, 146px); }
.hero-title { display: grid; }

@media (min-width: 66rem) {
  .hero-title {
    grid-template-columns: var(--tree-w) minmax(0, 1fr);
    align-items: end;
    gap: 3rem;
  }
  .hero-grid { margin-inline-start: calc(var(--tree-w) + 3rem); }
}

.hero-tree { display: none; }
@media (min-width: 66rem) {
  .hero-tree {
    display: block;
    width: 100%;
    height: auto;
    color: var(--band-canopy);
  }
}

.hero h1 {
  font-size: clamp(2.05rem, 1.1rem + 3.9vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  max-width: 26ch;
  margin-block: 0.9rem 0;
}

.hero-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 46rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

.lede {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  color: var(--ink-2);
  max-width: var(--measure);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  padding: 0;
  margin-top: 1.75rem;
}
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn:hover { background: var(--accent); color: var(--paper); }
.btn-solid {
  background: var(--accent);
  color: var(--paper);
}
.btn-solid:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--paper); }

/* Specimen-label record block */
.record {
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
  display: grid;
  gap: 1rem;
  align-content: start;
}
.record dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.25rem;
}
.record dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.record .qualifications {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-top: 0.3rem;
}

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
/* Four narrow slices on one line, evenly spaced and never touching. Stays
   four across at every width — the gap tightens on small screens rather than
   the row wrapping, so the strip reads as one band. */
.field-strip {
  list-style: none;
  padding: 0;
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.4rem, 1.5vw, 1.25rem);
}
.field-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--paper-2);
}

/* Sections */
.band { border-top: 1px solid var(--rule); }
.band-tinted { background: var(--paper-2); }

.section { padding-block: clamp(2.75rem, 7vw, 4.75rem); }

.section h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-block: 0.6rem 1.25rem;
  max-width: 24ch;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1rem; }

/* Research streams — each carries one band of the core sample */
.streams {
  list-style: none;
  padding: 0;
  margin-top: 2.25rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 46rem) {
  .streams { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.stream {
  border-inline-start: 3px solid var(--stream-band, var(--rule));
  padding-inline-start: 1.1rem;
}
.stream:nth-child(1) { --stream-band: var(--band-canopy); }
.stream:nth-child(2) { --stream-band: var(--band-water); }
.stream:nth-child(3) { --stream-band: var(--band-silt); }

.stream h3 {
  font-size: 1.14rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.stream p {
  color: var(--ink-2);
  font-size: 0.97rem;
}

/* Partner list */
.partners {
  list-style: none;
  padding: 0;
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.partners li { border-inline-start: 2px solid var(--rule); padding-inline-start: 0.75rem; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vw, 3.5rem) 2rem;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 46rem) {
  .footer-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.footer address {
  font-style: normal;
  color: var(--ink-2);
  line-height: 1.55;
  margin-top: 0.75rem;
}
.footer nav ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.footer nav a { color: var(--ink); text-decoration-color: var(--rule); }
.footer nav a:hover { text-decoration-color: currentColor; }

.colophon {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

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

@media print {
  .skip, .nav, .stratum, .actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band-tinted { background: none; }
  .section { padding-block: 1rem; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ---------------------------------------------------------------
   Interior pages
   --------------------------------------------------------------- */
.page-head { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3.25rem); }
.page-head h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  max-width: 20ch;
  margin-block: 0.7rem 1rem;
}
.page-head .lede { max-width: var(--measure); }
.page-head .actions { margin-top: 1.5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* People */
.roster-grid {
  margin-top: 2rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 46rem) {
  .roster-grid { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2.5rem; }
}
.roster h3 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--band-water);
}
.roster ul { list-style: none; padding: 0; margin-top: 0.9rem; }
.roster li { padding-block: 0.35rem; }
.person-name { display: block; }
.person-years {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-2);
}

/* Publications */
.pub-year { margin-top: 2.25rem; }
.pub-year:first-of-type { margin-top: 1.5rem; }
.pub-year h3 {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.pub-list { list-style: none; padding: 0; margin-top: 1rem; }
.pub-list li {
  padding-block: 0.7rem;
  max-width: 46rem;
  border-inline-start: 2px solid var(--rule);
  padding-inline-start: 1rem;
  margin-bottom: 0.4rem;
}
.pub-list li:hover { border-inline-start-color: var(--band-water); }

/* Vacancies */
.positions { list-style: none; padding: 0; margin-top: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .positions { grid-template-columns: repeat(3, 1fr); } }
.position { border-top: 3px solid var(--rule); padding-top: 1rem; }
.position.is-open { border-top-color: var(--band-water); }
.position h3 { font-size: 1.1rem; font-weight: 600; margin-block: 0.4rem 0.6rem; }
.position p { color: var(--ink-2); font-size: 0.97rem; }
.position-status {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.is-open .position-status { color: var(--accent); }
.is-closed .position-status { color: var(--ink-2); }

/* Contact */
.footer-email { margin-top: 0.7rem; }


/* ---------------------------------------------------------------
   Biography
   --------------------------------------------------------------- */
.bio-grid { display: grid; gap: 2.5rem; }
@media (min-width: 46rem) {
  .bio-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3rem; }
}
.bio-side { align-content: start; }
.bio-photo {
  display: block;
  width: 100%;
  /* 13rem is 208px: a downscale from the 292px file on an ordinary screen,
     so it stays crisp, while still giving the portrait real presence. Left at
     its own proportions so nothing is cropped off a face. */
  max-width: 13rem;
  height: auto;
  background: var(--paper);
  margin-bottom: 1.75rem;
}
.profile-links { list-style: none; padding: 0; margin-top: 0.8rem; display: grid; gap: 0.5rem; }
.profile-links a { text-decoration-color: var(--rule); }
.profile-links a:hover { text-decoration-color: currentColor; }

.awards { margin-top: 2rem; display: grid; gap: 1.1rem; max-width: 46rem; }
.awards > div {
  display: grid;
  gap: 0.15rem 1.25rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--rule);
}
@media (min-width: 34rem) {
  .awards > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
}
.awards dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  padding-top: 0.2rem;
}
.awards dd { margin: 0; font-size: 0.97rem; line-height: 1.5; }

.affiliations {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 46rem) {
  .affiliations { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2.5rem; }
}
.affiliations li {
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--band-canopy);
}
.affiliation-note {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.2rem;
}

/* Funders. A long list of names, so it re-flows into columns rather than
   running as one tall stack; the hairline on each keeps the rows legible
   across the gap. */
.funders {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  display: grid;
  gap: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
@media (min-width: 46rem) {
  .funders { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2.5rem; }
}
@media (min-width: 64rem) {
  .funders { grid-template-columns: repeat(3, 1fr); }
}
.funders li {
  color: var(--ink-2);
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--band-water);
  /* Grid rows stretch to the tallest item, so a one-line name would otherwise
     sit at the top of a two-line rule. Centring the text against its own rule
     keeps the column even however the names wrap. */
  display: flex;
  align-items: center;
}

/* Profile disclosure. A native <details>, so it opens by pointer or keyboard,
   is announced correctly by screen readers, and needs no JavaScript. Holds the
   degrees, then either a research summary or a thesis. */
.profile { margin-top: 0.3rem; }

.profile summary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.profile summary::-webkit-details-marker { display: none; }
.profile summary::after { content: '+'; font-size: 0.9rem; line-height: 1; }
.profile[open] summary::after { content: '\2212'; }
.profile summary:hover { color: var(--accent-2); }

.profile-body {
  margin-top: 0.7rem;
  margin-bottom: 0.4rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--rule);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.profile-body p + p { margin-top: 0.7rem; }

.profile-degrees { font-size: 0.86rem; }

/* Supervision arrangements and similar asides. */
.profile-note {
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 0.4rem !important;
}

/* Small heading above the research summary or the thesis. */
.profile-label {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 1.1rem !important;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
}
.thesis-title { font-weight: 600; color: var(--ink); margin-top: 0.35rem !important; }

/* On paper everything opens — a printed roster shouldn't hide its content. */
@media print {
  .profile > *:not(summary) { display: block !important; }
  .profile summary::after { content: ''; }
}

/* Google Scholar link, sitting right after the name. */
.scholar-link {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration-color: var(--rule);
}
.scholar-link:hover { text-decoration-color: currentColor; }

/* Funding acknowledgement, sitting after the thesis or research summary. */
.profile-funding {
  font-size: 0.8rem;
  margin-top: 0.6rem !important;
}
.profile-funding-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 0.3rem;
}

/* Research streams: photo beside the text, alternating text-then-image on a
   wide screen. Falls back to a single column, image below text, on narrow
   ones — never squeezing the prose column to fit a picture. */
.stream-layout {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 46rem) {
  .stream-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; }
}
.stream-photo {
  display: block;
  width: 100%;
  height: auto;
  /* No fixed aspect-ratio here: each image's own width/height attributes in
     the markup set its box, so a stream can carry a landscape or portrait
     photo (like the Peace Tower shot) without distortion or cropping. */
  object-fit: cover;
  background: var(--paper-2);
}

/* About section: the cogs sit in the margin to the right of the text,
   echoing the maple beside the headline. Hidden below the point where
   there's no longer room without squeezing the prose. */
.about-layout { display: grid; }
@media (min-width: 60rem) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.75rem;
  }
}

.about-cogs { display: none; }
@media (min-width: 60rem) {
  .about-cogs {
    display: block;
    width: clamp(240px, 22vw, 340px);
    height: auto;
    color: var(--band-canopy);
  }
}

/* People page intro: the graduates sketch sits to the right of the text,
   matching the maple on the home page. Hidden where there's no room. */
.people-intro { display: grid; }
@media (min-width: 60rem) {
  .people-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}

.people-grads { display: none; }
@media (min-width: 60rem) {
  .people-grads {
    display: block;
    width: clamp(240px, 24vw, 360px);
    height: auto;
    color: var(--band-canopy);
  }
}

/* Vacancies page intro: two acorns sit to the right of the text, matching the
   maple, cogs and graduates elsewhere on the site. */
.vac-intro { display: grid; }
@media (min-width: 60rem) {
  .vac-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}

.vac-acorns { display: none; }
@media (min-width: 60rem) {
  .vac-acorns {
    display: block;
    width: clamp(150px, 15vw, 220px);
    height: auto;
    color: var(--band-canopy);
  }
}

/* Courses page intro: the lecturer sketch sits to the right of the heading,
   matching the maple, cogs, graduates and acorns elsewhere on the site. */
.courses-intro { display: grid; }
@media (min-width: 60rem) {
  .courses-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}

.courses-lecture { display: none; }
@media (min-width: 60rem) {
  .courses-lecture {
    display: block;
    width: clamp(250px, 25vw, 360px);
    height: auto;
    color: var(--band-canopy);
  }
}

/* Course photos: text and image side by side, either order depending on
   the course's own 'side' setting. Stacks on narrow screens, image below
   text, same as the research streams. */
.course-layout {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 46rem) {
  .course-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; }
  .course-layout-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .course-layout-reverse > div:first-child { order: 2; }
  .course-layout-reverse > .course-photo { order: 1; }
}
.course-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-2);
}

.pubs-intro { display: grid; }
@media (min-width: 60rem) {
  .pubs-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}
.pubs-books { display: none; }
@media (min-width: 60rem) {
  .pubs-books {
    display: block;
    width: auto;
    height: clamp(240px, 24vw, 360px);
    object-fit: contain;
  }
}

/* Research page intro: the student at a desk sits to the right of the heading. */
.research-intro { display: grid; }
@media (min-width: 60rem) {
  .research-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}
.research-student { display: none; }
@media (min-width: 60rem) {
  .research-student {
    display: block;
    width: clamp(240px, 24vw, 340px);
    height: auto;
    color: var(--band-canopy);
  }
}