/* =========================================================
   Components: nav, hero, cards, tabs, accordion, footer
   ========================================================= */

/* ---------- Top nav ---------- */
.site-header {
  background: var(--charcoal);
  color: var(--bg);
  border-bottom: 1px solid #000;
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
}
.brand {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--bg);
  border: none;
  white-space: nowrap;
}
.brand .accent { color: var(--gold-light); }
.brand .accent.zh {
  font-family: 'STKaiti', '华文楷体', 'Kaiti SC', 'KaiTi', 'BiauKai', serif;
  font-weight: 400;
  font-size: 0.82em;
  letter-spacing: 0.03em;
  margin-left: 0.14em;
}
.brand:hover { color: var(--gold-light); }

/* All Chinese characters site-wide use 华文楷体 (STKaiti). */
:lang(zh), .zh, [lang="zh"] {
  font-family: 'STKaiti', '华文楷体', 'Kaiti SC', 'KaiTi', 'BiauKai', serif;
}

.nav {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}
.nav a {
  color: var(--bg);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--gold-light); border-bottom-color: var(--gold); }
.nav a.is-active { border-bottom-color: var(--gold); color: var(--gold-light); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--muted);
  color: var(--bg);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
}
@media (max-width: 380px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--charcoal-2);
    padding: var(--s-3) var(--s-5) var(--s-5);
    border-bottom: 1px solid #000;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--s-3) 0; border-bottom: 1px solid #2e2a26; }
}

/* ---------- Hero ---------- */
.hero {
  padding: var(--s-9) 0 var(--s-9);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.hero .eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  margin-bottom: var(--s-4);
}
.hero h1 {
  font-size: clamp(2.5rem, 4vw + 1rem, 4.25rem);
  font-weight: 500;
  margin-bottom: var(--s-5);
}
.hero .lead { font-size: var(--fs-md); color: var(--muted); max-width: 52ch; }
.hero-art {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 480px;
  justify-self: end;
  border: 1px solid var(--divider-strong);
  background: var(--bg-alt);
  position: relative;
}
.hero-art svg { width: 100%; height: 100%; display: block; }
@media (max-width: 820px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-art { justify-self: start; max-width: 360px; }
}

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn--gold { border-color: var(--gold); color: var(--gold-deep); }
.btn--gold:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--gold);
}
.link-arrow:hover { color: var(--gold-deep); }
.link-arrow::after { content: "→"; transition: transform var(--dur) var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--gold); }
.card .meta { color: var(--muted); }
.card h3 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--s-2);
  line-height: 1.25;
}
.card p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.card .tags {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: auto; padding-top: var(--s-4);
}
.tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--divider-strong);
  padding: 2px 8px;
  border-radius: var(--radius);
}
.tag--gold { border-color: var(--gold); color: var(--gold-deep); }

/* Project card with thumb */
.project-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.project-card:hover { border-color: var(--gold); }
.project-thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 2.5rem;
  color: var(--walnut);
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
  /* Default: greyscale. Hover restores subtle hue. */
  filter: grayscale(100%) contrast(0.96) brightness(1.01);
  transition: filter 1000ms var(--ease), transform 1200ms var(--ease);
  will-change: filter;
}
.project-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-card:hover .project-thumb,
.project-card:focus-within .project-thumb {
  filter: grayscale(0%) contrast(1) brightness(1);
  transform: scale(1.012);
}
@media (prefers-reduced-motion: reduce) {
  .project-thumb { transition: none; }
  .project-card:hover .project-thumb { transform: none; }
}
.project-body {
  padding: var(--s-5) var(--s-6) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.project-body .meta-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
}
.project-body h3 { margin: 0; font-size: var(--fs-lg); }
.project-body p.summary { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.project-body .tags { margin-top: auto; padding-top: var(--s-3); }

.project-detail {
  border-top: 1px solid var(--divider);
  padding: var(--s-5) var(--s-6) var(--s-6);
  display: none;
  background: var(--bg-alt);
}
.project-card.is-open .project-detail { display: block; }
.project-detail h4 {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s-4) 0 var(--s-2);
}
.project-detail p { color: var(--ink-soft); font-size: var(--fs-sm); }
.project-detail .links { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); }

.status {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status::before { content: "● "; color: var(--gold); }
.status--ongoing::before { color: var(--gold); }
.status--published::before { color: var(--walnut); }
.status--draft::before { color: var(--muted-light); }

/* ---------- Team cards ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
@media (max-width: 960px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }

.member {
  display: flex; flex-direction: column;
  border: 1px solid var(--divider);
  /* Match the warm off-white used by the home-page domain cards so the
     team grid reads as a continuation of the same vellum-toned surface
     system rather than a stark white interruption. */
  background: #faf8f1;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.member:hover {
  border-color: var(--gold);
  background: var(--surface);
}
/* Portrait: a small, centred, circular frame instead of the old full-width
   square. The round shape plus generous top margin reads more like an
   academic bio card than a tile, and the object-position bias leaves
   deliberate breathing room above the sitter's head so the face sits
   slightly below the top of the circle rather than kissing the frame. */
.member .portrait {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--bg-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 2.3rem;
  color: var(--walnut);
  position: relative;
  overflow: hidden;
  margin: var(--s-6) auto var(--s-4);
  border: 1px solid var(--divider);
}
.member .portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.member .portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* 22% vertical anchor leaves a quiet band of background above the
     head for every portrait whose sitter's face sits in the upper
     third of the source image — which is every professional headshot. */
  object-position: center 22%;
  display: block;
}
/* Likun Cao's source photo is nearly square (793×800) with lots of
   fountain / building background above and below the sitter. Because
   it shares an aspect ratio with the 140×140 circle, object-fit: cover
   does no cropping, and the face ends up smaller and lower than in the
   other portraits (which are 400×600 or similar and get their background
   naturally trimmed off the top and bottom). Zoom the image in and
   anchor the scale near the bottom edge so the face rises into the
   upper third of the circle, matching the other members. */
.member .portrait img[src$="likun-cao.jpg"] {
  transform: scale(1.35);
  transform-origin: center 85%;
}
.member-body { padding: var(--s-5); }
.member-body .name {
  font-family: var(--serif); font-size: var(--fs-lg); margin: 0;
  color: var(--ink);
}
.member-body .role {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold-deep); margin-top: 4px;
}
.member-body .interests {
  font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-3);
  line-height: 1.5;
}
.member-body .bio {
  display: none;
  font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--s-3);
  line-height: 1.6;
}
.member.is-open .bio { display: block; }
.member-links {
  display: flex; gap: var(--s-3); margin-top: var(--s-4);
}
.member-links a {
  color: var(--muted); border: none;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.member-links a:hover { color: var(--gold-deep); }
.member-links svg { width: 16px; height: 16px; }

/* ---------- Tabs / chips ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-7);
}
.chip {
  background: transparent;
  border: 1px solid var(--divider-strong);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.is-active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}

/* ---------- News list ---------- */
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li {
  display: grid;
  grid-template-columns: 110px 88px 1fr;
  gap: var(--s-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
  align-items: baseline;
}
.news-list li:last-child { border-bottom: none; }
.news-list .date {
  font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.news-list .news-tag {
  font-family: var(--mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gold-deep);
}
.news-list .news-body h4 {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 2px;
}
.news-list .news-body p {
  font-size: 0.825rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 720px) {
  .news-list li { grid-template-columns: 1fr; gap: var(--s-2); padding: 12px 0; }
}

/* ---------- Volume cards ---------- */
.volume-list { display: flex; flex-direction: column; gap: 0; }
.volume-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--s-7);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--divider);
  align-items: center;
}
.volume-row:first-child { border-top: 1px solid var(--divider); }
.volume-row .vmonth {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-deep);
}
.volume-row h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  margin: var(--s-2) 0 var(--s-2);
  line-height: 1.2;
}
.volume-row p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
@media (max-width: 720px) {
  .volume-row { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ---------- Ongoing research: spacious horizontal rows ---------- */
.ongoing-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.ongoing-row {
  display: grid;
  /* Narrower thumbnail column — the figure now reads as a small,
     quiet plate rather than a dominant visual, giving more room for
     the title + description text and keeping every project's image
     at the same compact size across the page. */
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
  gap: var(--s-8);
  align-items: start;
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--divider);
}
.ongoing-list .ongoing-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ongoing-row .project-thumb {
  /* Square thumbnail — gives project figures a more formal, plate-like
     frame than the old 16/10 landscape crop, and suits portrait-era
     source art (maps, paintings, portraits) without awkward letterbox
     cropping. */
  aspect-ratio: 1 / 1;
  height: auto;
  position: sticky;
  top: 96px;
  /* Low-saturation colour instead of the grayscale default inherited
     from .project-thumb. Every ongoing project figure on this page
     reads as a quiet, muted plate in the same desaturated palette,
     which keeps the gallery visually unified even when source images
     are taken from wildly different eras and media. On hover the
     saturation lifts back to full colour as a subtle reveal. */
  filter: saturate(0.4) contrast(0.96) brightness(1.01);
}
.ongoing-row:hover .project-thumb,
.ongoing-row:focus-within .project-thumb {
  filter: saturate(1) contrast(1) brightness(1);
  transform: scale(1.012);
}
/* When a project declares a real figure (image) instead of the generated
   tick-grid SVG, the <img> is absolutely filled to cover the 16/10 thumb,
   with object-position optionally overridden per project via inline style
   (from the `figureFocus` field in projects.json). Inherits the greyscale
   → color hover from the shared .project-thumb rule. */
.ongoing-row .project-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ongoing-row .ongoing-body {
  display: flex;
  flex-direction: column;
  padding: var(--s-2) 0;
}
.ongoing-row .ongoing-meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.ongoing-row .ongoing-meta .num {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.ongoing-row h3 {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.6vw + 0.8rem, 2.125rem);
  line-height: 1.18;
  margin: 0 0 var(--s-3);
}
.ongoing-row .summary {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
  padding-left: var(--s-4);
  border-left: 2px solid var(--gold);
  max-width: 56ch;
}
.ongoing-row .ideas {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
  max-width: 60ch;
}
.ongoing-row .footer-row {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--divider);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: baseline;
}
.ongoing-row .contributors {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1 1 auto;
  min-width: 0;
}
.ongoing-row .contributors .label {
  color: var(--muted-light);
  margin-right: 6px;
}
.ongoing-row .row-tags {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.ongoing-row .row-links {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-3);
}
@media (max-width: 880px) {
  .ongoing-row {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .ongoing-row .project-thumb { min-height: 0; }
}

/* ---------- Published archive: dense, publication-style ---------- */
.archive-group { margin-bottom: var(--s-9); }
.archive-group:last-child { margin-bottom: 0; }
.archive-group .group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--gold);
}
.archive-group .group-head h2 {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  margin: 0;
}
.archive-group .group-head .count {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.pub-list { list-style: none; padding: 0; margin: 0; }
.pub-item {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr) auto;
  gap: var(--s-5) var(--s-6);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--divider);
  align-items: start;
}
.pub-item:last-child { border-bottom: none; }
.pub-item .pub-body { min-width: 0; padding-top: 2px; }
.pub-item .project-thumb {
  aspect-ratio: 16 / 10;
  width: 144px;
  height: auto;
  border: 1px solid var(--divider);
  /* Letter-placeholder thumbs keep the original greyscale → color hover
     inherited from the base .project-thumb rule. Real figure plates
     (.has-figure, set by published.js when the paper provides a figure
     path) override this with no filter at all — the paper's own plate
     is meant to be shown direct, in full colour, with no hover trick. */
}
.pub-item .project-thumb.has-figure {
  /* The paper's own figure is shown direct — no fixed aspect ratio,
     no cropping, no greyscale filter, no hover trick. The container
     shrinks to the image's natural proportions at the column width. */
  aspect-ratio: auto;
  height: auto;
  background: var(--surface);
  filter: none;
  transform: none;
  transition: none;
  display: block;
  overflow: visible;
}
.pub-item .project-thumb.has-figure img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  display: block;
}
.pub-item:hover .project-thumb,
.pub-item:focus-within .project-thumb {
  filter: grayscale(0%) contrast(1) brightness(1);
  transform: scale(1.012);
}
/* Figure-bearing thumbs should NOT react to hover — they already show
   the full direct plate, so any hover shift would look twitchy. */
.pub-item:hover .project-thumb.has-figure,
.pub-item:focus-within .project-thumb.has-figure {
  filter: none;
  transform: none;
}
@media (max-width: 720px) {
  .pub-item { grid-template-columns: 100px 1fr; gap: var(--s-3) var(--s-4); }
  .pub-item .project-thumb { width: 100px; }
  .pub-item .pub-links { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}
.pub-item h3 {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: 0 0 6px;
}
.pub-item h3 a { border-bottom: none; color: inherit; }
.pub-item h3 a:hover { color: var(--gold-deep); }
.pub-item .pub-authors {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.pub-item .pub-venue {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0 0 8px;
}
.pub-item .pub-venue .year {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  margin-left: 8px;
}
.pub-item .pub-summary {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 64ch;
}
.pub-item .pub-links {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
  white-space: nowrap;
}
.pub-item .pub-links a {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.pub-item .pub-links a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }

/* ---------- Domain index (home page — horizontal cards with figures) ---------- */
.domain-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 880px) {
  .domain-index { grid-template-columns: 1fr; }
}

.domain-row {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--divider);
  /* Warm off-white — approximately halfway between aged vellum (#f4f1e8)
     and pure surface white (#ffffff). Noticeably lighter than the
     surrounding .section--alt parchment backdrop so the card lifts off
     the page, while still retaining enough warmth that it doesn't read
     as stark clinical white. */
  background: #faf8f1;
  padding: var(--s-5) var(--s-5) var(--s-6);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.domain-row:hover {
  border-color: var(--gold);
  background: var(--surface);
}

/* Figure on top — uses the existing .project-thumb component (greyscale → color hover) */
.domain-row .domain-fig {
  aspect-ratio: 16 / 10;
  margin-bottom: var(--s-4);
}
.domain-row:hover .domain-fig.project-thumb {
  filter: grayscale(0%) contrast(1) brightness(1);
  transform: scale(1.012);
}
/* When a domain declares a real figure (image) instead of the
   generated tick-grid SVG, the <img> is absolutely filled to cover
   the 16/10 card, slightly biased downward so the Bruegel tower's
   summit remains visible in the trimmed frame. Inherits greyscale →
   color hover from the parent .project-thumb. */
.domain-row .domain-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

.domain-row .domain-body { min-width: 0; }
.domain-row .domain-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.18;
  margin: 0 0 var(--s-3);
  letter-spacing: -0.018em;
}
.domain-row .domain-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--s-4);
}
.domain-row .domain-list {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.domain-row .domain-list .sep { color: var(--muted-light); margin: 0 6px; }
.domain-row .domain-aside {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--divider);
}
.domain-row .domain-count {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.domain-row .domain-arrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.domain-row .domain-arrow::after { content: " →"; }

/* ---------- Domain section (research page grouping) ---------- */
.domain-section { margin-bottom: var(--s-10); scroll-margin-top: 88px; }
.domain-section:last-child { margin-bottom: 0; }
.domain-section .domain-section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-5);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--gold);
}
.domain-section .domain-section-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.6vw + 0.7rem, 2rem);
  margin: 0;
  letter-spacing: -0.018em;
}
.domain-section .domain-section-head .num {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--muted-light);
}
.domain-section .domain-section-head .count {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.domain-section .domain-section-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 var(--s-7);
  max-width: 64ch;
}

/* ---------- Activity list ---------- */
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-row {
  display: grid;
  grid-template-columns: 100px 92px 1fr auto;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--divider);
  align-items: baseline;
}
.activity-row:first-child { border-top: 1px solid var(--divider); }
/* When the list follows a section-head, the section-head already
   provides a bottom divider — drop the first-row top border to avoid
   a doubled line stacked right under the "Upcoming" / "Past" heading. */
.section-head + .activity-list .activity-row:first-child { border-top: none; }
/* Upcoming rows are signalled by the "↑ upcoming" badge next to the
   title — no extra left-edge stripe needed. */
.activity-row .a-date {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.activity-row .a-type {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.activity-row .a-body { min-width: 0; }
.activity-row .a-body h4 {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 4px;
  letter-spacing: -0.012em;
}
.activity-row .a-body h4 a { color: inherit; border-bottom: none; }
.activity-row .a-body h4 a:hover { color: var(--gold-deep); }
.activity-row .a-meta {
  font-size: 0.825rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.activity-row .a-meta .who {
  color: var(--ink-soft);
  margin-right: 8px;
}
.activity-row .a-meta .who::after {
  content: " ·";
  color: var(--muted-light);
  margin-left: 4px;
}
.activity-row .a-blurb {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 6px 0 0;
  max-width: 64ch;
}
.activity-row .a-link {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.activity-row .a-link:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }
.activity-row .a-upcoming-mark {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-left: 8px;
}
@media (max-width: 720px) {
  .activity-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-4) 0;
  }
}

/* Home activities preview: same component, no border-top on first row */
.home-activities .activity-row:first-child { border-top: none; }

/* ---------- Prose article (Join page, simple long-form text) ---------- */
.prose-article {
  max-width: var(--max-w-rd);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.prose-section { margin-bottom: var(--s-9); }
.prose-section:last-child { margin-bottom: 0; }
.prose-section h2 {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  letter-spacing: -0.018em;
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--gold);
}
.prose-section p {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
  max-width: 64ch;
}
.prose-section p:last-child { margin-bottom: 0; }

/* Calendly inline widget block */
.cal-heading {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  letter-spacing: -0.018em;
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--gold);
}
.cal-lead {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--s-5);
  max-width: 60ch;
}
.calendly-inline-widget {
  border: 1px solid var(--divider-strong);
  background: var(--bg);
}
.cal-fallback {
  margin-top: var(--s-4);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.cal-fallback a { color: var(--gold-deep); border-bottom: 1px solid var(--gold); }

/* ---------- Home news (full-width section) ---------- */
.home-news {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--s-8);
}
@media (max-width: 880px) {
  .home-news { grid-template-columns: 1fr; gap: 0; }
}
.home-news .news-list li {
  /* Slightly tighter than the standalone news page since each column is narrower */
  grid-template-columns: 96px 80px 1fr;
}

/* Volume page */
.volume-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--gold);
  width: 0;
  z-index: 60;
  transition: width 80ms linear;
}
.volume-article {
  max-width: var(--max-w-rd);
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
}
.volume-article header { margin-bottom: var(--s-7); padding-bottom: var(--s-5); border-bottom: 1px solid var(--gold); }
.volume-article h1 {
  font-size: clamp(2.25rem, 3vw + 1rem, 3.25rem);
  margin: var(--s-3) 0 var(--s-4);
}
.volume-article .vmonth { color: var(--gold-deep); }
.volume-article .director-note {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.6;
  border-left: 2px solid var(--gold);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: var(--s-6) 0 var(--s-7);
}
.volume-section { margin: var(--s-8) 0; }
.volume-section h2 {
  font-size: var(--fs-xl);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--s-5);
}
.volume-item { margin-bottom: var(--s-5); }
.volume-item h3 {
  font-family: var(--serif); font-size: var(--fs-lg); margin: 0 0 var(--s-2);
}
.volume-item p { color: var(--ink-soft); font-size: var(--fs-base); }
.volume-nav {
  display: flex; justify-content: space-between; gap: var(--s-5);
  margin-top: var(--s-9); padding-top: var(--s-5);
  border-top: 1px solid var(--divider);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: var(--muted-light);
  padding: var(--s-9) 0 var(--s-7);
  margin-top: var(--s-10);
}
.site-footer .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
}
.site-footer h4 {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  margin: 0 0 var(--s-4);
  font-weight: 500;
}
.site-footer .brand-block .brand {
  font-size: var(--fs-xl);
  margin-bottom: var(--s-3);
  display: inline-block;
}
.site-footer p { color: var(--muted-light); font-size: var(--fs-sm); }
.site-footer a {
  color: var(--muted-light);
  border: none;
  display: block;
  padding: 4px 0;
  font-size: var(--fs-sm);
}
.site-footer a:hover { color: var(--gold-light); }
.footer-bottom {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid #2a2724;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.theme-toggle {
  background: none; border: 1px solid #3a352f; color: var(--muted-light);
  padding: 4px 12px; border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold-light); }
@media (max-width: 720px) {
  .site-footer .container { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--s-3); }
}

/* ---------- Page header ---------- */
.page-header {
  padding: var(--s-9) 0 var(--s-7);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--divider);
}
.page-header .eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  margin-bottom: var(--s-3);
}
.page-header h1 { margin: 0 0 var(--s-4); font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem); }
.page-header p.lead {
  /* Match the domain-description typography exactly (same font stack,
     weight, style, and line-height as the home-page domain cards) so
     the lead text below every page title reads in the same voice.
     Size and colour are kept as they were. */
  color: var(--muted);
  max-width: 60ch;
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
}