/* BioMecaNet — single-page site
   Palette taken from the hero simulation: the deep blue field,
   the amber of the filaments and the pale glow of the spindle poles. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  --bg: #05071a;          /* the field behind the spindle */
  /* The space on each side of a section's rule: from the end of the content
     above it, and from the rule down to the next section's title. */
  --section-space: clamp(3.5rem, calc(2rem + 2.5vw), 4.5rem);
  /* Shared by the section titles and the hero line, so they always match. */
  --title-size: clamp(2rem, 3.2vw, 2.75rem);
  --bg-raised: #0a0d26;
  --ink: #e9ebf3;
  --ink-soft: #b0b6cc;
  --ink-faint: #7a819d;
  --col-gap: clamp(1.25rem, 2.5vw, 2rem);  /* between Synopsis columns and key facts, so they line up */
  --rule: rgba(176, 186, 228, 0.14);
  --rule-strong: rgba(176, 186, 228, 0.26);
  --amber: #f2a93b;       /* microtubules */
  --amber-light: #ffc874;
  --amber-line: rgba(242, 169, 59, 0.5);
  --pole: #9ccbff;        /* spindle poles */

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --max: 76rem;
  --date-col: 9.5rem;
  --nav-h: 4rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--amber); color: var(--bg); }

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--pole);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
  z-index: 100;
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--bg);
  font: 600 0.875rem/1 var(--sans);
  text-decoration: none;
  border-radius: 3px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* The nav, the hero text, the sections and the footer share the same column edges. */
.nav-inner, .hero-text, .hero-switches, .section-grid, .footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Small sans-serif labels: key facts, post dates, Imprint labels, people's roles. */
.facts dt, .post-date, .footer-col h3, .group-role {
  font: 500 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}

/* ---------- Navigation ---------- */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(5, 7, 26, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* At the very top the nav sits clear over the hero; main.js makes it solid
   as soon as the page scrolls. Without JavaScript it simply stays solid. */
.js .site-nav:not(.is-solid):not(.menu-open) {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-brand {
  font-size: 1.25rem;
  font-weight: 450;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.nav-links a {
  position: relative;
  font: 500 0.875rem/1 var(--sans);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="true"] { color: var(--ink); }
.nav-links a[aria-current="true"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  order: 2;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
}
.nav-toggle-bars,
.nav-toggle-bars::before {
  display: block;
  width: 1.25rem;
  height: 1px;
  margin: 0 auto;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.nav-toggle-bars { transform: translateY(-3px); }
.nav-toggle-bars::before { content: ""; transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(-90deg); }

/* ---------- Hero ---------- */

.hero {
  padding-top: var(--nav-h);
}

.hero-stage {
  position: relative;
}

/* The figure keeps a 2:1 plate whose field dissolves into the page on every
   side. It is sized by the window's width only: a short window just crops. */
.hero-plate {
  position: relative;
  margin: 0 auto;
  width: min(100%, 90rem);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%);
  mask-composite: intersect;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-slide.is-active { opacity: 1; }

/* Shade on the left and toward the bottom-left corner, where the text sits,
   so it reads over any of the figures. */
.hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 70% at 0% 100%, rgba(5, 7, 26, 0.55), rgba(5, 7, 26, 0) 100%),
    linear-gradient(to right,
      rgba(5, 7, 26, 0.86) 0%,
      rgba(5, 7, 26, 0.62) 34%,
      rgba(5, 7, 26, 0) 66%);
}

.hero-text,
.hero-switches {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}

.hero-text {
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 1.15rem;
}

.hero-aim {
  max-width: 17em;
  font-size: var(--title-size);
  line-height: 1.16;
  font-weight: 350;          /* same weight and optical sizing as the section titles */
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(5, 7, 26, 0.6);
}

.hero-meta {
  margin-top: clamp(0.9rem, 1.4vw, 1.4rem);
  max-width: min(44em, 58%);
  font: 400 0.875rem/1.45 var(--sans);
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  text-shadow: 0 1px 12px rgba(5, 7, 26, 0.9);
}

/* Only the caption of the figure on show appears. It crossfades with the
   figure, a hairline beneath it fills while the figure stays, and clicking
   it moves on to the next figure. */
.hero-switches {
  bottom: 0.75rem;
  display: grid;
  justify-items: end;
  pointer-events: none;
}

.hero-switch {
  grid-area: 1 / 1;
  position: relative;
  padding: 0.3rem 0;
  pointer-events: auto;
  border: 0;
  background: none;
  font: italic 400 0.875rem/1.3 var(--serif);
  color: var(--ink-soft);
  text-align: right;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s var(--ease), visibility 0s 1.4s, color 0.3s var(--ease);
}
.hero-switch.is-current {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s var(--ease), color 0.3s var(--ease);
}
.hero-switch:hover { color: var(--ink); }

.hero-switch-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
}
.hero.is-playing .hero-switch.is-current .hero-switch-bar {
  animation: hero-dwell var(--dwell, 8s) linear both;
}
/* Keyboard focus on the caption pauses the clock; the mouse does not. */
.hero.is-playing .hero-switch:focus-visible .hero-switch-bar {
  animation-play-state: paused;
}
@keyframes hero-dwell {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Without JavaScript the first figure and its caption stay put. */
html:not(.js) .hero-switch { cursor: default; }

/* One moment on arrival: the figure comes into focus, as under a microscope. */
@media (prefers-reduced-motion: no-preference) {
  .hero-plate { animation: hero-focus 1.6s var(--ease) both; }
  @keyframes hero-focus {
    from { opacity: 0; filter: blur(10px); }
    to   { opacity: 1; filter: blur(0); }
  }
}

/* ---------- Sections ---------- */

.section {
  padding: var(--section-space) 0 0;
}
.section:last-child { padding-bottom: var(--section-space); }

.section-grid {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 3.2fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
}
.section-grid::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: var(--rule);
  /* with the grid's 2rem row gap, the title sits one section space below */
  margin-bottom: calc(var(--section-space) - 2rem);
}

.section-grid > h2 {
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 1.5rem);
  font-size: var(--title-size);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 350;
  font-style: italic;
}

.section-body { min-width: 0; }

.lede {
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  line-height: 1.36;
  font-weight: 350;
  letter-spacing: -0.006em;
  max-width: 32em;
  text-wrap: pretty;
}

.prose { max-width: 36em; }
.prose p + p { margin-top: 1em; }
.prose h4 {
  margin: 1.75em 0 0.25em;
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.3;
}
.prose h4:first-child { margin-top: 0; }

.lede a,
.prose a,
.synopsis-detail a,
.footer-col a,
.pub-venue a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--amber-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.lede a:hover,
.prose a:hover,
.synopsis-detail a:hover,
.footer-col a:hover,
.pub-venue a:hover {
  color: var(--amber-light);
  text-decoration-color: var(--amber-light);
}

.prose a.text-link {
  color: var(--amber);
  text-decoration-color: transparent;
}
.prose a.text-link:hover { color: var(--amber-light); text-decoration-color: var(--amber-light); }

.byline { color: var(--ink-soft); font-style: italic; }

/* Synopsis */

/* The two paragraphs after the opening sentence, side by side. With the
   same gap as the key facts, each column sits over two of the facts. */
.synopsis-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--col-gap);
  margin-top: clamp(2rem, 3vw, 3rem);
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

/* Key facts: four columns, each with its own rule above its label. */
.facts {
  margin: clamp(2.5rem, 3.75vw, 3.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem var(--col-gap);
}
.facts > div {
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.facts dd {
  margin: 0.35rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-variant-numeric: lining-nums;
}

/* ---------- Posts ---------- */

.post { border-top: 1px solid var(--rule); }
.post:first-child { border-top: 0; }

.post-heading { font-size: inherit; }  /* the h3 only gives the toggle a heading level */

.post-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: var(--date-col) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding: 1.5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.post:first-child .post-toggle { padding-top: 0.25rem; }
/* The list has no closing rule: the last post ends with its own content, so
   the section space below is measured from there. */
.js .post:last-child:not(.is-open) .post-toggle { padding-bottom: 0; }

.post-date {
  align-self: baseline;
  padding-top: 0.4rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.post-text { display: block; min-width: 0; }
.post-title {
  display: block;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -0.006em;
  text-wrap: balance;
  transition: color 0.2s;
}
.post-lede {
  display: block;
  margin-top: 0.3rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.post-thumb {
  width: 6.5rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  opacity: 0.88;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.post-thumb-light { object-fit: contain; background: #fff; }

.post-icon {
  grid-column: 4;
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  transition: border-color 0.2s, background-color 0.2s;
}
.post-icon::before,
.post-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 1px;
  margin: -0.5px 0 0 -0.375rem;
  background: var(--ink);
  transition: transform 0.35s var(--ease);
}
.post-icon::after { transform: rotate(90deg); }

.post-toggle:hover .post-title { color: var(--amber-light); }
.post-toggle:hover .post-icon { border-color: var(--amber); }
.post-toggle:focus-visible { outline-offset: 6px; }

.post-toggle[aria-expanded="true"] .post-icon { border-color: var(--amber); background: rgba(242, 169, 59, 0.08); }
.post-toggle[aria-expanded="true"] .post-icon::after { transform: rotate(0deg); }
.post-toggle[aria-expanded="true"] .post-thumb { opacity: 0; transform: scale(0.94); }

/* Without JavaScript every post is simply open. */
.post-body {
  display: grid;
  transition: grid-template-rows 0.5s var(--ease);
}
.post-clip { min-height: 0; overflow: hidden; }
.post-inner {
  padding: 0.25rem 0 2.75rem calc(var(--date-col) + clamp(1rem, 2.5vw, 2rem));
  transition: opacity 0.35s var(--ease);
}
.js .post:not(.is-open) .post-body { grid-template-rows: 0fr; }
.js .post:not(.is-open) .post-inner { opacity: 0; }
.js .post.is-open .post-inner { transition-delay: 0.12s; }
html:not(.js) .post-toggle { cursor: default; }
html:not(.js) .post-icon { visibility: hidden; }
html:not(.js) .post-thumb { display: none; }  /* the open post shows the figure itself */
.post:last-child .post-inner { padding-bottom: 0; }

.post-figure { margin: 1.5rem 0; }
.post-figure:first-child { margin-top: 0.25rem; }
.post-figure img,
.post-figure video {
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--bg-raised);
}
.post-figure-narrow { max-width: 24rem; }
.plate {
  max-width: 38rem;
  padding: clamp(0.5rem, 2vw, 1.25rem);
  background: #fff;
  border-radius: 6px;
}
.plate video { background: #fff; border-radius: 0; }

.post-split {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.post-split .post-figure { margin: 0.25rem 0 0; }

.zoomable { cursor: zoom-in; }

/* ---------- Publications ---------- */

.pub-year {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
}
.pub-year:first-child { border-top: 0; padding-top: 0.25rem; }
.pub-year:last-child { padding-bottom: 0; }

.pub-year h3 {
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ink-faint);
  font-variant-numeric: oldstyle-nums;
}

.pubs li + li { margin-top: 1.6rem; }
.pub-title {
  display: inline;
  font-size: 1.25rem;
  line-height: 1.32;
  text-decoration: none;
  text-wrap: pretty;
  background-image: linear-gradient(var(--amber-line), var(--amber-line));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease), color 0.2s;
}
.pub-title:hover { color: var(--amber-light); background-size: 100% 1px; }
.pub-authors {
  margin-top: 0.4rem;
  font-size: 0.975rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.pub-authors .pi { color: var(--ink-soft); }
.pub-venue {
  margin-top: 0.15rem;
  font-size: 0.975rem;
  color: var(--ink-soft);
}

/* ---------- People ---------- */

.groups {
  margin-top: clamp(2rem, 3vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
}
.groups li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* Each principal investigator's portrait heads their column. */
.group-photo {
  width: 100%;
  max-width: 251px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 1rem;
  border-radius: 4px;
  background: var(--bg-raised);
}

.groups h3 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.group-role {
  margin-bottom: 0.6rem;
  line-height: 1.4;
  color: var(--amber);
}
.group-place { color: var(--ink-faint); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-raised);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.975rem;
  line-height: 1.55;
}

.footer-grid {
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
}

.logo-plate {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: #fff;
  border-radius: 4px;
}
/* The logo file has its white margins trimmed, so the artwork fills the plate. */
.logo-plate img { width: 18rem; max-width: 100%; height: auto; }
/* Optically matched: the logo starts as far below "Funding" as text does
   below the other titles (text glyphs sit lower in their line box), and the
   sentence starts the same distance below the logo. */
.footer-funding .logo-plate { margin-top: 0.25rem; }
.footer-funding p { margin-top: 0.25rem; max-width: 26em; }

.footer-col h2 {
  margin-bottom: 0.75rem;
  font: 600 0.875rem/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: var(--ink);
}
/* A second titled block in the same column (Media under Privacy). */
.footer-col p + h2 { margin-top: 2.25rem; }
.footer-col p + p,
.footer-col address + p { margin-top: 0.75rem; }
.footer-col address { margin-top: 0.75rem; font-style: normal; }
.footer-col h3 {
  margin-top: 1.1rem;
  font-weight: 400;
}
.footer-col h2 + h3 { margin-top: 0; }
.footer-col h3 + p,
.footer-col h3 + address { margin-top: 0.2rem; }

/* ---------- Lightbox ---------- */

.lightbox {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.lightbox[open] {
  display: grid;
  place-items: center;
}
.lightbox::backdrop {
  background: rgba(3, 4, 16, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox img {
  max-width: min(94vw, 1600px);
  max-height: 86vh;
  max-height: 86dvh;
  width: auto;
  height: auto;
  border-radius: 4px;
  cursor: zoom-out;
}
.lightbox form { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; }
.lightbox-close {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: rgba(5, 7, 26, 0.6);
  color: var(--ink);
  font: 500 0.875rem/1 var(--sans);
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--amber); }

/* ---------- Responsive ---------- */

@media (max-width: 60rem) {
  .section-grid { grid-template-columns: minmax(0, 1fr); }
  .section-grid > h2 { position: static; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Narrow windows: the three footer columns become one, full width. */
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-funding p { max-width: none; }
}

@media (max-width: 45rem) {
  :root { --nav-h: 3.5rem; }

  .synopsis-detail { grid-template-columns: minmax(0, 1fr); }
  .synopsis-detail p + p { margin-top: 1em; }

  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
  }
  .nav-links.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .nav-links a { display: block; padding: 0.9rem 0; font-size: 1rem; }
  .nav-links a::after { display: none; }
  .nav-links li + li { border-top: 1px solid var(--rule); }
  .site-nav.menu-open { background: var(--bg); border-bottom-color: var(--rule); }

  /* Narrow screens: the plate is too short to carry the text, so it sits above. */
  .hero-text {
    position: static;
    padding-top: 1.75rem;
    padding-bottom: 0.5rem;
    justify-content: flex-start;
  }
  .hero-aim { text-shadow: none; }
  .hero-meta { text-shadow: none; max-width: none; }
  .hero-plate::after { display: none; }
  .hero-plate {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);
  }
  .hero-switches { bottom: 0; }
  .hero-switch { font-size: 0.8125rem; }

  .post-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "date icon"
      "text text";
    gap: 0.5rem 1rem;
    padding: 1.4rem 0;
  }
  .post-date { grid-area: date; align-self: center; padding-top: 0; }
  .post-icon { grid-area: icon; width: 2rem; height: 2rem; }
  .post-text { grid-area: text; }
  .post-thumb { display: none; }
  .post-title { font-size: 1.3rem; }
  .post-inner { padding-left: 0; }
  .post-split { grid-template-columns: minmax(0, 1fr); }
  .post-split .post-figure { max-width: 18rem; }

  .pub-year { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }

  .groups { grid-template-columns: minmax(0, 1fr); }
  /* One row per person: the portrait on the left, the details beside it.
     The last row takes up any height the photo adds, so the text stays
     set tight at the top. */
  .groups li {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 1.1rem;
  }
  .groups li > * { grid-column: 2; }
  .groups li > .group-photo {
    grid-column: 1;
    grid-row: 1 / -1;
    max-width: none;
    margin-bottom: 0;
  }

}

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