/* ===== Traceable — Oral History Archive ===== */

:root {
  /* Palette */
  --paper: #F5ECC2;
  --paper-raised: #FAF4D9;
  --paper-deep: #EBE0AC;
  --ink: #241A17;
  --ink-soft: #6A5D4E;
  /* Near-identical to --ink-soft on purpose. On this paper there is no third
     ink step that clears 4.5:1 — anything lighter fails on --paper-deep. The
     label/caption hierarchy is carried by mono, uppercase, size and tracking
     instead of colour. Keep the token: it marks intent, and a darker theme
     could re-open the gap. Do not lighten without re-checking contrast. */
  --ink-faint: #6B5F4D;
  --line: #D9CD9F;
  --line-strong: #A2B0AD;
  --red: #82241F;
  --red-bright: #A03A32;
  --gray: #A2B0AD;
  /* Darkened from #5C6B67 — the original passed on --paper (4.70:1) but
     failed on --paper-deep (4.21:1), where .tier-2 .meta actually sits. */
  --gray-deep: #556360;
  --blue: #A7D4E4;
  --blue-deep: #2F6B85;

  /* Type */
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  /* One typeface throughout: hierarchy comes from size, weight, case, and
     tracking, rather than switching families between display, body, and
     metadata. Keep these aliases so component-level intent stays readable. */
  --sans: var(--serif);
  --mono: var(--serif);

  /* Scale */
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6.5rem;

  /* One knob for the breathing room above and below every section. Two
     neighbouring sections each contribute it, so the visible gap between
     them is twice this value. The narrow-screen override is at the bottom
     of this file; the tight/roomy classes scale it per section. */
  --section-step: var(--s4);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

[hidden] { display: none !important; }

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s3);
}

.wrap-narrow { max-width: var(--wrap-narrow); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 var(--s2); }

.lead {
  font-size: 1.16rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

.muted { color: var(--ink-soft); }

/* ===== Mono labels ===== */

.eyebrow,
.meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-deep);
  display: block;
  margin-bottom: var(--s1);
}

.eyebrow { color: var(--red); }

/* ===== Buttons ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  background: none;
  color: var(--ink);
}

.btn:hover { background: var(--ink); color: var(--paper); }

.btn-accent {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.btn-accent:hover { background: transparent; color: var(--red); }

.btn-row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s3);
}

/* ===== Header ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 236, 194, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.logo {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.logo svg { overflow: visible; flex-shrink: 0; }
.logo svg path { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; }
.logo svg circle { fill: var(--gray-deep); }

.nav-links {
  display: flex;
  gap: var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav-links a {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  color: var(--ink-soft);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.nav-toggle { display: none; }

/* ===== Sections ===== */

section { --section-space: var(--section-step); padding: var(--section-space) 0; }
section.tight { --section-space: calc(var(--section-step) * 0.6); }
section.roomy { --section-space: calc(var(--section-step) * 1.6); }
section.alt { background: var(--paper-deep); }
section.rule { border-top: 1px solid var(--line); }

.section-head {
  max-width: 640px;
  margin-bottom: var(--s4);
}

.section-head p { color: var(--ink-soft); margin-bottom: 0; }

/* ===== Hero ===== */

.hero {
  padding: var(--s6) 0 var(--section-space);
}

.hero h1 { margin-bottom: var(--s3); }
.hero .lead { font-size: 1.24rem; }

.trace-line {
  width: 100%;
  height: 40px;
  margin-top: var(--s4);
  overflow: visible;
}

.trace-line path {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw 2s ease-out 0.3s forwards;
}

.trace-line circle { fill: var(--gray-deep); opacity: 0; animation: fade 0.5s ease 1.6s forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .trace-line path { animation: none; stroke-dashoffset: 0; }
  .trace-line circle { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ===== Stat strip ===== */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  padding: var(--s3) var(--s2) var(--s3) 0;
  border-right: 1px solid var(--line);
}

.stat:last-child { border-right: none; }

.stat .n {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

.stat .l {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== Grid & cards ===== */

.grid { display: grid; gap: var(--s3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  align-items: center;
}

.split-wide { grid-template-columns: 1.15fr 1fr; }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

a.card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.card-body { padding: var(--s3); }
.card-body h3 { margin-bottom: 0.35rem; }
.card-body p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0; }

.card-media {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--line);
  filter: saturate(0.92);
}

.placeholder-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* Stripe lightened from #E2D6A2 so the label clears 4.5:1 on both bands. */
  background:
    repeating-linear-gradient(45deg, var(--paper-deep), var(--paper-deep) 9px, #E7DCAB 9px, #E7DCAB 18px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  padding: var(--s2);
}

.placeholder-img.wide { aspect-ratio: 16 / 9; }
.placeholder-img.tall { aspect-ratio: 3 / 4; }

/* ===== Tags & status ===== */

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  margin: 0 0.3rem 0.3rem 0;
  color: var(--gray-deep);
}

.tag-ai { color: var(--blue-deep); background: rgba(167, 212, 228, 0.3); }
.tag-role { color: var(--red); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray);
  flex-shrink: 0;
}

.status.draft::before { background: var(--red-bright); }
.status.cleared::before { background: var(--blue-deep); }

/* ===== Notice banner ===== */

.notice {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--red);
  background: var(--paper-raised);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s4);
}

.notice .meta { margin-bottom: 0.3rem; color: var(--red); }
.notice p { margin-bottom: 0; font-size: 0.93rem; color: var(--ink-soft); }

/* ===== Filters ===== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.filters button {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filters button:hover { border-color: var(--red); color: var(--red); }

.filters button[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.filter-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-left: auto;
  align-self: center;
}

/* ===== Record list (archive) ===== */

.record {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.record:first-of-type { border-top: 1px solid var(--line); }

.record img,
.record .placeholder-img { aspect-ratio: 1 / 1; border: 1px solid var(--line); object-fit: cover; }

.record-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.record h3 { margin-bottom: 0.2rem; }

.record .role {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: var(--s2);
}

.record p { font-size: 0.97rem; color: var(--ink-soft); }

.record .tags { margin-top: var(--s2); }

/* ===== Pull quote ===== */

blockquote,
.pullquote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  color: var(--ink);
  margin: var(--s4) 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--red);
  max-width: 34ch;
  text-wrap: balance;
}

blockquote cite,
.pullquote cite {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--s2);
}

/* ===== Prose (interview pages) ===== */

.prose { max-width: 660px; }
.prose h2 { margin-top: var(--s4); font-size: 1.55rem; }
.prose h3 { margin-top: var(--s3); }
.prose p { color: var(--ink-soft); }
.prose > p:first-of-type { font-size: 1.1rem; }
.prose ul { color: var(--ink-soft); padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.prose blockquote { max-width: none; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Conversation transcripts use the same quiet reading measure and text
   treatment as the publication notice. Speaker names may still use weight to
   orient the exchange, but the body copy should not feel like a caption. */
.conversation-prose,
.prose:has(.conversation) { max-width: none; }
.conversation {
  width: 100%;
  max-width: 660px;
  font-size: 0.93rem;
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--ink-soft);
}

/* ===== Metadata block ===== */

.record-meta {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s2) 0;
  margin-bottom: var(--s4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s2) var(--s3);
}

.record-meta div { font-family: var(--mono); font-size: 0.72rem; }
.record-meta dt {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-size: 0.64rem;
  margin-bottom: 0.25rem;
}
.record-meta dd { margin: 0; color: var(--ink); }

/* The credit line is a sentence, not a one-word field value. In a 150px
   column it wraps to three lines while every field beside it sits on one,
   which reads as a mistake. Give it the whole row instead of shortening it:
   the descriptor is the part that makes a credit line useful once someone
   has copied it away from this page. */
.record-meta .wide { grid-column: 1 / -1; }

/* An unfilled field reads as unfilled, so a blank never ships by accident */
.record-meta dd.tbd { color: var(--red); font-style: italic; }

/* ===== Map of Ideas ===== */

.question-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}

.question-list button {
  text-align: left;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  padding: var(--s2) var(--s2) var(--s2) var(--s2);
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
}

.question-list button:hover { color: var(--ink); background: var(--paper-raised); }

.question-list button[aria-pressed="true"] {
  color: var(--ink);
  border-left-color: var(--red);
  background: var(--paper-raised);
}

.answers { display: flex; flex-direction: column; gap: var(--s3); }

.answer {
  border: 1px solid var(--line);
  border-top: 2px solid var(--gray);
  background: var(--paper-raised);
  padding: var(--s3);
}

.answer.has-ai { border-top-color: var(--blue-deep); }

.answer .who {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}

.answer .who h4 { margin: 0; }

.answer q {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  quotes: "“" "”";
  display: block;
  margin-bottom: var(--s2);
}

.answer .gloss { font-size: 0.93rem; color: var(--ink-soft); margin-bottom: 0; }

.answer .none {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ===== Table ===== */

.table-scroll { overflow-x: auto; margin-bottom: var(--s3); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 640px;
}

th, td {
  text-align: left;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--line-strong);
}

td { color: var(--ink-soft); }
td a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* ===== Phases / timeline ===== */

.phases { border-top: 1px solid var(--line); }

.phase {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}

.phase .ph-n {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.phase h3 { margin: 0.25rem 0 0; font-size: 1.2rem; }
.phase .now {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-deep);
  border: 1px solid var(--blue-deep);
  padding: 0.1rem 0.4rem;
  display: inline-block;
  margin-top: 0.5rem;
}
.phase ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: 0.95rem; }
.phase li { margin-bottom: 0.35rem; }

/* ===== Numbered list ===== */

.numbered { border-top: 1px solid var(--line); }

.numbered li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.numbered { margin: 0; padding: 0; }

.numbered .n {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--red);
  padding-top: 0.2rem;
}

.numbered p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.numbered strong { color: var(--ink); font-weight: 600; }

/* ===== Form ===== */

.field { margin-bottom: var(--s2); }

.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 0;
}

.field textarea { min-height: 130px; resize: vertical; }

/* ===== Footer ===== */

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s4) 0 var(--s3);
  margin-top: var(--s5);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  /* Baseline, not flex-start: the link row is 0.7rem uppercase next to a
     1.35rem logo, and aligning the boxes leaves it hanging off the logo's
     top edge. Aligning the first baselines instead makes the two read as
     one line. */
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3);
}

.footer-nav-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s2);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  /* Asymmetric on purpose: the horizontal step separates labels on one
     line, but once the row wraps the same value opens a gap wider than
     the line itself. */
  row-gap: var(--s2);
  column-gap: var(--s3);
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Same hover affordance as .nav-links: colour alone is a weak signal, and
   the header already sets the expectation that a nav label underlines. */
.footer-links a {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  color: var(--ink-soft);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* An address, not a nav label: it keeps the mono treatment so it sits with
   the link row, but never the uppercasing — a shouted email reads as a
   mistake, and the tracking that suits four short labels does not suit a
   domain. */
.footer-contact {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.footer-contact a { color: var(--ink-soft); }
.footer-contact a:hover { color: var(--red); }

.footer-tagline {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  /* Tighter than .footer-note, which carries var(--s3) for standalone
     captions. Here the tagline belongs to the logo above it. */
  margin: var(--s1) 0 0;
}

/* Still used outside the footer — figcaptions on the home page, the privacy
   note on Participate — so it keeps its own standalone spacing. */
.footer-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: var(--s3) 0 0;
}

/* ===== TODO flag — content the structure doc leaves open ===== */

.todo {
  border: 1px dashed var(--red);
  background: rgba(130, 36, 31, 0.045);
  padding: var(--s2) var(--s3);
  margin: var(--s3) 0;
}

.todo::before {
  content: "Needs your input";
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.4rem;
}

.todo p,
.todo ul { margin-bottom: 0; font-size: 0.9rem; color: var(--ink-soft); }
.todo ul { padding-left: 1.1rem; }
.todo li { margin-bottom: 0.25rem; }
.todo :last-child { margin-bottom: 0; }

/* ===== Spotlight — the Interviews front door ===== */

.spotlight {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s5);
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) 0;
  margin-bottom: var(--s4);
}

.spotlight img,
.spotlight .placeholder-img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  filter: saturate(0.92);
}

.spotlight h2 { margin-bottom: 0.2rem; }

.spotlight .descriptor {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-bottom: var(--s3);
}

.spotlight .pullquote { margin: 0 0 var(--s3); max-width: none; }

/* ===== Interview grid — every card the same shape ===== */

.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s3);
}

.artist-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.artist-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.artist-card img,
.artist-card .placeholder-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--line);
  filter: saturate(0.92);
}

.artist-card .body {
  padding: var(--s2) var(--s3) var(--s3);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.artist-card h3 { margin: 0; font-size: 1.18rem; }

.artist-card .descriptor {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin: 0;
}

.artist-card .badge-row { margin-top: auto; padding-top: var(--s2); }

/* Format badge — signals format without changing the card */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-deep);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.18rem 0.5rem;
}

.badge .glyph { font-size: 0.8rem; line-height: 1; }
.badge-upcoming { color: var(--red); border-color: var(--red); }

/* ===== Faceted filters ===== */

.facets {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
  margin-bottom: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.facet {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.facet > .facet-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-width: 5.5rem;
}

.facet button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.facet button:hover { border-color: var(--red); color: var(--red); }

.facet button[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.facet-note {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin: 0;
  max-width: 68ch;
}

.result-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.empty-state {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  padding: var(--s4) 0;
  text-align: center;
}

/* ===== Artist page ===== */

.artist-head {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--s5);
  align-items: start;
}

.artist-head img,
.artist-head .placeholder-img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  filter: saturate(0.92);
}

.artist-head h1 { margin-bottom: 0.25rem; }

.artist-head .descriptor {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-bottom: var(--s3);
}

/* Outbound link — appears under the bio and again at the foot */
.see-more {
  padding: var(--s3) 0;
  margin: var(--s4) 0;
}

.see-more .meta { color: var(--red); }

/* Foot of an interview record: back to the archive, and onward to Participate */
.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Hidden from sight, still read aloud. The "Where to see more" links open in
   a new tab: a sighted visitor sees the tab appear, and this is how everyone
   else is told the same thing before they follow the link. Do not use
   display:none or visibility:hidden here, both of which remove the text from
   the accessibility tree along with the screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
}

.link-list a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.95rem;
}

.link-list a[aria-disabled="true"] {
  color: var(--ink-faint);
  text-decoration-style: dotted;
  cursor: default;
}

/* Player sits on top of the transcript, never replacing it */
.player {
  width: 100%;
  margin-bottom: var(--s2);
  background: var(--ink);
  border: 1px solid var(--line-strong);
}

video.player { aspect-ratio: 16 / 9; display: block; }
/* Interview recordings are YouTube embeds; see any interview page's section 4. */
iframe.player { aspect-ratio: 16 / 9; display: block; border: 1px solid var(--line-strong); }
audio.player { background: none; border: none; }

.source-note {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: var(--s4);
}

/* Q&A transcript — question bold, answer below */
.qa { margin-bottom: var(--s3); }

.qa dt {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

/* Verification timecode — points at the passage in the source recording, so
   a listen-through can jump straight to it. Remove these once the interview
   has been verified and approved.
   Red mono is what a timecode looks like on this site, on both page formats:
   inline before a question in a Q&A page, and under a heading in an article
   page. It must not borrow .source-note, which is the grey credit line under
   a recording or a photograph; two jobs sharing one style makes a reader
   read the timecode as a caption. */
.tc {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--red);
}

.qa dt .tc {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: 0.1em;
}

/* Article format: the timecode leads its section, sitting tight under the
   heading rather than floating between it and the first paragraph. */
.prose h2 + .tc { margin-top: -0.5rem; margin-bottom: var(--s2); }

.qa dd p { margin-bottom: 0.9rem; }
.qa dd > p:last-child { margin-bottom: 0; }

.qa dd {
  margin: 0 0 var(--s3);
  color: var(--ink-soft);
}

/* Speaker-labelled conversation: use when an interview is presented as a
   readable dialogue rather than as timestamped source notes. */
.conversation { margin-bottom: var(--s3); }
.conversation-turn { color: var(--ink-soft); margin: 0 0 var(--s2); }
.conversation-turn strong,
.conversation-speakers dt::before,
.conversation-speakers dd > p:first-child::before {
  color: var(--ink);
  font-weight: 600;
}
.conversation-turn-interviewer { color: var(--ink); font-weight: 600; }
.conversation-turn-participant { margin: 0 0 var(--s3); }
.conversation-turn-participant p { margin: 0 0 0.9rem; }
.conversation-turn-participant p:last-child { margin-bottom: 0; }
.qa.conversation-speakers dt .tc { display: none; }
.conversation-speakers dt::before { content: "Ariya: "; }
.conversation-speakers dd > p:first-child::before { content: "Seema Kohli: "; }
.conversation-speakers-manjari dd > p:first-child::before { content: "Manjari Sihare-Sutin: "; }

/* Selected works */
.works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s2);
}

.works figure { margin: 0; }

.works img,
.works .placeholder-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  filter: saturate(0.92);
}

/* Artworks are never cropped. The square crop above is fine for session
   photographs, but applied to a painting it cuts off the work and shows the
   visitor something the artist did not make. Each figure keeps the piece's
   own proportions, so heights legitimately differ across the row. */
.works-art { align-items: start; }
.works-art img {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
}

/* A session with only one usable frame: no grid, and no square crop, which
   would cut a two-person landscape shot down to one person. */
.works-single { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
.works-single img { aspect-ratio: 3 / 2; }

/* A row of artworks brought to one shared height instead of one shared grid
   cell: .works-art alone lets a CSS grid size each row independently, so two
   images of different aspect ratios come out different heights. A flex row
   with a fixed height and width:auto on the image gets "same height,
   proportional width" without cropping either piece, unlike a square-cropped
   .works grid. Modifier on top of .works-art rather than a change to it,
   since .works-single and plain .works still need the grid behaviour.

   The height goes on the img, not the figure: a fixed height on the figure
   clips a figcaption underneath it, which overlaps the next figure instead
   of pushing it down. The figure is left height:auto so it grows to fit
   both the image and its caption.

   Height and width are both set per image (inline, on the figure), computed
   from that image's own aspect ratio at whatever height keeps the pair's
   combined width under the ~712px content column at the .wrap-narrow
   breakpoint (760px), so the row never wraps there. Both go on the figure
   rather than the img: a flex item with no explicit width sizes itself to
   fit its widest child at its "natural" line length, and a figcaption is
   ordinary wrapping text, so an unconstrained figure would size to fit its
   caption on as few lines as look tidy, not to the image's own width. That
   can make the figure wider than its image, which breaks the row's
   arithmetic (a caption a few words wider than its image pushes the pair
   past the column and back into two rows). An explicit width on the figure
   removes that ambiguity; the img and figcaption then simply fill it.

   Below 760px the column itself is narrower than these figures were sized
   for, so the row switches to full-width, natural-height stacked images
   instead of shrinking (which would distort them, since width and height
   are both fixed independently above) or overflowing the column. */
.works-art-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.works-art-row figure { min-width: 0; }
.works-art-row img { display: block; height: 100%; width: 100%; }

@media (max-width: 760px) {
  .works-art-row figure { width: 100% !important; height: auto !important; }
  .works-art-row img { height: auto; }
}

.works figcaption {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-top: 0.45rem;
}

/* ===== Partners ===== */

.partner {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s4);
  align-items: start;
  border-top: 1px solid var(--line);
  padding: var(--s4) 0;
}

.partner:last-of-type { border-bottom: 1px solid var(--line); }

.partner .logo-slot {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.partner h3 { margin-bottom: 0.3rem; font-size: 1.35rem; }
.partner .site-link {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.partner p { color: var(--ink-soft); font-size: 0.97rem; }

/* ===== Research tiers ===== */

.tier {
  border-top: 2px solid var(--red);
  padding-top: var(--s2);
  margin-bottom: var(--s4);
}

.tier .meta { color: var(--red); }
.tier-2 { border-top-color: var(--line-strong); }
.tier-2 .meta { color: var(--gray-deep); }

.entry {
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
}

.entry:first-of-type { border-top: 1px solid var(--line); }
.entry h3 { margin-bottom: 0.3rem; }

.entry .entry-meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s2);
  display: block;
}

.entry p { color: var(--ink-soft); font-size: 0.97rem; }

/* ===== Responsive ===== */

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .phase { grid-template-columns: 150px 1fr; gap: var(--s3); }
  .spotlight { gap: var(--s4); }
  .artist-head { grid-template-columns: 220px 1fr; gap: var(--s4); }
  .partner { grid-template-columns: 140px 1fr; gap: var(--s3); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  :root { --section-step: var(--s3); }
  .hero { padding: var(--s5) 0 var(--section-space); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split, .split-wide { grid-template-columns: 1fr; gap: var(--s3); }
  .spotlight { grid-template-columns: 1fr; gap: var(--s3); }
  .spotlight img, .spotlight .placeholder-img { aspect-ratio: 3 / 2; }
  .artist-head { grid-template-columns: 1fr; gap: var(--s3); }
  .artist-head img, .artist-head .placeholder-img { max-width: 260px; aspect-ratio: 1 / 1; }
  .partner { grid-template-columns: 1fr; gap: var(--s2); }
  .partner .logo-slot { max-width: 200px; }
  .facet > .facet-label { min-width: 100%; }
  .artist-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .record { grid-template-columns: 1fr; gap: var(--s2); }
  .record img, .record .placeholder-img { max-width: 240px; }
  .phase { grid-template-columns: 1fr; gap: var(--s1); }
  .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: none; }
  .filter-count { margin-left: 0; width: 100%; }

  /* Stacked, so the nav group aligns with the logo above it rather than
     hanging off the right edge of a one-item row. */
  .site-footer { margin-top: var(--s4); }
  .footer-inner { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .footer-nav-group { align-items: flex-start; }

  .nav-links {
    position: fixed;
    top: var(--header-h, 57px);
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    padding: var(--s2) var(--s3) var(--s3);
    border-bottom: 1px solid var(--line);
    display: none;
    font-size: 0.8rem;
  }
  .nav-links.open { display: flex; }
  .nav-links li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: 1px solid var(--line-strong);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    color: var(--ink);
  }

  body.nav-open { overflow: hidden; }
}

/* Netlify's honeypot: a field a person never sees and a bot fills in. Hidden
   from the layout and from assistive technology, but still a real input, so
   it has to stay in the document rather than be display:none'd away by a
   framework that prunes empty nodes. */
.hidden-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}