/* ==========================================================================
   Guoyin Chen — observatory edition
   A printed plate book: paper, ink, and two colours borrowed from the data.
   ========================================================================== */

/* ---------- 1. Faces ---------------------------------------------------- */

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-normal-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-normal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/spectral-normal-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/spectral-normal-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/spectral-italic-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fragmentmono-normal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fragmentmono-italic-400.woff2') format('woff2');
}

/* ---------- 2. Tokens --------------------------------------------------- */

:root {
  /* paper & ink */
  --paper: #f4eee3;
  --paper-2: #faf6eb;
  --paper-3: #eae1d0;
  --ink: #171310;
  --ink-2: #4b433b;
  --ink-3: #655b50;
  --rule: #ded3bf;
  --rule-2: #bdb09a;
  --link-rule: #8d8171;

  /* the two colours of a magnetogram, used only where the data speaks */
  --blue: #234a78;
  --blue-2: #2f6098;
  --red: #98291f;

  /* type */
  --serif: 'Spectral', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'Fragment Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --fs-name: clamp(3.1rem, 6.1vw, 5.35rem);
  --fs-h2: clamp(1.9rem, 2.75vw, 2.6rem);
  --fs-h3: clamp(1.18rem, 1.45vw, 1.42rem);
  --fs-lead: clamp(1.12rem, 1.33vw, 1.32rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.6875rem;
  --fs-mono-lg: 0.8125rem;

  /* measure & rhythm */
  --wrap: 1320px;
  --gutter: clamp(1.25rem, 3.4vw, 3.5rem);
  --col-gap: clamp(1rem, 1.7vw, 1.5rem);
  --sect: clamp(4.5rem, 8.5vw, 8.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 620ms;
}

/* ---------- 3. Reset ---------------------------------------------------- */

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

/* Components below set their own display (grid, flex). Without this, the UA
   sheet's [hidden] rule loses to them and filtered publications stay on screen
   while the counter says otherwise. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--link-rule);
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}

a:hover {
  color: var(--blue);
  text-decoration-color: var(--blue);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 0;
}

::selection {
  background: var(--blue);
  color: var(--paper-2);
}

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- 4. Type helpers -------------------------------------------- */

.mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.mono--sm { font-size: 0.625rem; letter-spacing: 0.11em; }
.mono--data { text-transform: none; letter-spacing: 0.02em; font-size: var(--fs-mono-lg); }

.tnum { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper-2);
  padding: 0.7rem 1rem;
  text-decoration: none;
}
.skip:focus { top: 0.75rem; color: var(--paper-2); }

/* ---------- 5. Layout --------------------------------------------------- */

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

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.band { border-top: 1px solid var(--rule); }

/* ---------- 6. Masthead ------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.masthead__in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.9rem;
  padding-block: 1.15rem 1rem;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wordmark:hover { color: var(--ink); }
.wordmark__mark {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  position: relative;
  transform: translateY(0.02em);
}
.wordmark__mark::after {
  content: '';
  position: absolute;
  inset: 2px 50% 2px 2px;
  background: var(--ink);
  border-radius: 50% 0 0 50%;
}
.wordmark__sep { color: var(--rule-2); }

.nav {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.nav a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-2); }
.nav a[aria-current='page'],
.nav a[aria-current='true'] { color: var(--ink); border-bottom-color: var(--ink); }

.masthead__ext {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  align-items: baseline;
}
.masthead__ext a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-3);
  white-space: nowrap;
}
.masthead__ext a:hover { color: var(--ink); }

@media (max-width: 860px) {
  /* Keep the language switch reachable on phones; drop the profile links. */
  .masthead__ext { display: flex; margin-left: auto; }
  .masthead__ext a:not(.lang-link) { display: none; }
  .lang-link { border-left: 0; margin-left: 0; padding-left: 0; }
  .masthead__in { flex-wrap: wrap; row-gap: 0.6rem; }
}

/* ---------- 7. Hero ----------------------------------------------------- */

.hero { padding-top: clamp(2.2rem, 4.4vw, 4.2rem); padding-bottom: clamp(2.4rem, 4vw, 3.6rem); }

.hero__grid {
  grid-template-rows: auto;
  align-items: end;
  row-gap: 2.5rem;
}

.hero__copy {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--blue);
  margin-bottom: clamp(1.1rem, 2vw, 1.9rem);
}
.kicker::before {
  content: '';
  width: 2.1rem;
  height: 1px;
  background: var(--blue);
  flex: none;
}

.hero h1 {
  font-size: var(--fs-name);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.033em;
  margin-left: -0.045em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 40ch;
  margin-top: clamp(1.2rem, 2.1vw, 1.9rem);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.hero__lead em { font-style: italic; }
.hero__lead strong { font-weight: 500; }

.hero__meta {
  margin-top: clamp(2rem, 3.6vw, 3rem);
  padding-top: 0.95rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.42rem;
  color: var(--ink-2);
  font-size: 0.75rem;
  letter-spacing: 0.015em;
  text-transform: none;
}
.hero__meta span:first-child { color: var(--ink); }
.hero__meta a { color: var(--ink-2); text-decoration-color: var(--rule-2); }
.hero__meta a:hover { color: var(--ink); }
.hero__meta .mono { display: block; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 2.2rem;
}

.hero__plate { grid-column: 10 / span 3; }

/* ---------- 8. Plates --------------------------------------------------- */

.plate { margin: 0; }

.plate__media {
  position: relative;
  background: var(--paper-3);
  overflow: hidden;
}
.plate__media img { width: 100%; }

.plate__no {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-top: 1px solid var(--ink);
  padding-top: 0.5rem;
  margin-bottom: 0.45rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plate__no b {
  font-weight: 400;
  color: var(--blue);
}

.plate figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  max-width: 46ch;
}
.plate figcaption em { font-style: italic; }

.plate--hero .plate__media { border: 1px solid var(--rule); padding: 0.5rem; background: var(--paper-2); }
.plate--hero .plate__media img { filter: saturate(0.82) contrast(1.02); }

/* A plate that runs past the text column */
.plate--wide { grid-column: 1 / -1; }

/* The measured plate: a figure from the papers, let into the paper */
.plate--figure {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  margin-top: clamp(2.6rem, 4.4vw, 4rem);
}
.plate--figure .plate__media { grid-column: 1 / -1; background: transparent; }
.plate--figure .plate__media img { mix-blend-mode: multiply; }
.plate--figure .plate__no {
  grid-column: 1 / span 3;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
}
.plate--figure figcaption {
  grid-column: 4 / span 7;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  max-width: 64ch;
  border-top: 1px solid var(--rule);
  align-self: start;
}

/* ---------- 9. Profile rule (section divider carrying a spectral line) --- */

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

.profile-rule {
  display: block;
  width: 100%;
  height: clamp(44px, 5.4vw, 76px);
  color: var(--rule-2);
  overflow: visible;
}
.profile-rule .trace {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.profile-rule .trace--blue { stroke: var(--blue); opacity: 0.9; }
.profile-rule .trace--red { stroke: var(--red); opacity: 0.9; }
.profile-rule .axis { stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.profile-rule .ticks line { stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.5; }

/* draw-on (the path carries pathLength="1", so the dash maths is unit-free) */
.js .profile-rule .trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .profile-rule.is-in .trace {
  animation: draw 2.4s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- 10. Section shell ------------------------------------------ */

.section { padding-block: clamp(3.4rem, 5.6vw, 6.2rem); }

.section__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  margin-bottom: clamp(2rem, 3.4vw, 3.2rem);
}

.section__aside { grid-column: 1 / span 3; }
.section__title { grid-column: 5 / span 8; }

.sect-label {
  display: block;
  color: var(--ink-3);
}
.sect-label b {
  color: var(--blue);
  font-weight: 400;
  margin-right: 0.5rem;
}

.section__title h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.section__title p {
  margin-top: 1rem;
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.section__body { grid-column: 5 / span 8; }

.section__body--full { grid-column: 1 / -1; }

/* ---------- 11. Research threads --------------------------------------- */

.threads { border-top: 1px solid var(--rule); }

.thread {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 0.82fr) minmax(0, 1.18fr);
  column-gap: clamp(1rem, 2.4vw, 2.6rem);
  padding-block: clamp(1.7rem, 2.7vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.thread__no {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  padding-top: 0.5rem;
}

.thread__head h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
  max-width: 22ch;
  text-wrap: balance;
}

.thread__body p {
  max-width: 58ch;
  color: var(--ink-2);
  font-size: 1.015rem;
  line-height: 1.6;
}

.thread__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 0.9rem;
  color: var(--ink-3);
}
.thread__links a { text-decoration-color: var(--rule-2); }
.thread__links span { color: var(--rule-2); }

/* ---------- 12. Publications ------------------------------------------- */

.year-block { border-top: 1px solid var(--rule); padding-top: 1.1rem; margin-bottom: 2.4rem; }
.year-block:first-child { border-top: 0; padding-top: 0; }

.year-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.year-head h2,
.year-head h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.year-head::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--rule);
  transform: translateY(-0.18em);
}

.pub {
  padding-block: clamp(1.15rem, 1.9vw, 1.6rem);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  column-gap: clamp(1.4rem, 3vw, 2.8rem);
  row-gap: 0.5rem;
  align-items: start;
}
.pub:last-child { border-bottom: 0; }

.pub__title, .pub__authors { grid-column: 1; }
.pub__venue { grid-column: 2; grid-row: 1; }
.pub__flags { grid-column: 2; grid-row: 2; }
.pub__tools, .pub__errata { grid-column: 1 / -1; }

.pub__title {
  font-size: clamp(1.12rem, 1.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.006em;
  max-width: 46ch;
  text-wrap: pretty;
}
.pub__title a { text-decoration: none; }
.pub__title a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.16em; }

.pub__authors {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 66ch;
}
.pub__authors b { font-weight: 600; color: var(--ink); }
.pub__authors .au { white-space: nowrap; }

.pub__venue {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.3rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.pub__venue .jrnl { color: var(--ink-2); }
.pub__venue a { color: var(--ink-3); text-decoration-color: var(--rule-2); }
.pub__venue a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.14em; }
.pub__venue .lbl { color: var(--ink-2); }
.pub__venue .lbl::after { content: ' '; }
.pub__venue .id { letter-spacing: 0; text-transform: none; }

.pub__flags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: baseline;
}

/* abstract + bibtex share one line under the entry */
.pub__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.8rem;
  align-items: baseline;
}
.pub__tools .pub__more { margin-top: 0; }
.pub__tools details[open] { flex: 1 0 100%; }
.flag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.14rem 0.38rem;
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.flag--first { border-color: var(--blue); color: var(--blue); }
.flag--co {
  border-color: transparent;
  color: var(--ink-3);
}
.flag--type { border-color: var(--red); color: var(--red); }

.pub__more { margin-top: 0.15rem; }

.pub details,
details.disclosure {
  border-top: 1px dashed transparent;
}

.pub details > summary {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  list-style: none;
  transition: color 160ms var(--ease);
}
.pub details > summary::-webkit-details-marker { display: none; }
.pub details > summary::before {
  content: '+';
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1;
  width: 0.6rem;
  text-align: center;
  color: var(--ink-3);
  flex: none;
  transform: translateY(-0.02em);
}
.pub details[open] > summary::before { content: '−'; color: var(--ink); }
.pub details[open] > summary { color: var(--ink); }
.pub details > summary:hover { color: var(--ink); }

.pub__abstract {
  margin-top: 0.6rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--ink-2);
}
.pub__abstract p + p { margin-top: 0.6rem; }

.bibtex {
  margin-top: 0.8rem;
  position: relative;
  max-width: 100%;
}
.bibtex pre {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: var(--ink-2);
  overflow-x: auto;
  white-space: pre;
}
.copy {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  color: var(--ink-2);
}
.copy:hover { border-color: var(--ink); color: var(--ink); }
.copy.is-done { border-color: var(--blue); color: var(--blue); }

.pub-list-foot {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  color: var(--ink-3);
}

.pubs--compact .pub { padding-block: clamp(1rem, 1.6vw, 1.35rem); grid-template-columns: minmax(0, 1fr) 13.5rem; column-gap: 2rem; }
.pubs--compact .pub__title { font-size: 1.0625rem; }

/* ---------- 13. Software ------------------------------------------------ */

.projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--col-gap);
  border-top: 1px solid var(--ink);
}

.project {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(1.3rem, 2.0vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.project__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.project__name {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.project__name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.12em; }
.project__domain { color: var(--ink-3); text-align: right; }

.project p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
}

.project__foot {
  margin-top: auto;
  padding-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  color: var(--ink-3);
}
.project__foot span { white-space: nowrap; }

.projects--compact .project p { font-size: 0.9rem; }

.also {
  margin-top: 2.2rem;
  color: var(--ink-3);
}

/* ---------- 14. About --------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}

.about__text { grid-column: 1 / span 7; }
.about__side { grid-column: 9 / span 4; }

.about__text p { max-width: 60ch; font-size: 1.0625rem; }
.about__text p + p { margin-top: 1.1rem; }
.about__text p:first-child { font-size: 1.18rem; line-height: 1.58; }

.about__text p:first-child::first-letter {
  float: left;
  font-size: 3.35em;
  line-height: 0.86;
  font-weight: 300;
  padding-right: 0.09em;
  padding-top: 0.045em;
  color: var(--ink);
}

.deflist { border-top: 1px solid var(--rule); }
.deflist > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.deflist dt { color: var(--ink-3); }
.deflist dd { color: var(--ink-2); font-size: 0.9375rem; text-transform: none; letter-spacing: 0.015em; }
.deflist dd .mono { display: block; color: var(--ink-3); }

.side-note {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: 34ch;
}
.side-note .mono { display: block; color: var(--ink-3); margin-bottom: 0.5rem; }

/* ---------- 15. Contact / footer --------------------------------------- */

.contact {
  border-top: 1px solid var(--ink);
  padding-block: clamp(2.6rem, 4.6vw, 4.4rem);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 2rem;
  align-items: end;
}

.contact__head { grid-column: 1 / span 6; }
.contact__head h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.contact__head p { margin-top: 0.9rem; color: var(--ink-2); max-width: 40ch; }

.contact__mail { grid-column: 7 / span 6; }
.mail {
  display: inline-block;
  font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 0.12em;
  word-break: break-word;
}
.mail:hover { border-bottom-color: var(--ink); border-bottom-width: 2px; color: var(--ink); }

.contact__links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
}
.contact__links a { text-decoration-color: var(--rule-2); }

.colophon {
  padding-block: 2rem 2.6rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 0.6rem;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
}
.colophon p { grid-column: 1 / span 6; text-transform: none; letter-spacing: 0.02em; }
.colophon .colophon__right { grid-column: 8 / span 5; text-align: right; text-transform: none; letter-spacing: 0.02em; }

@media (max-width: 760px) {
  .colophon p, .colophon .colophon__right { grid-column: 1 / -1; text-align: left; }
}

/* ---------- 16. Buttons / chips ---------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 0.72rem 1rem 0.66rem;
  color: var(--ink);
  background: transparent;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper-2); }
.btn--ghost { border-color: var(--rule-2); color: var(--ink-2); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper-2); }
.btn__arrow { font-family: var(--serif); font-size: 0.95rem; line-height: 1; transform: translateY(0.04em); }

/* ---------- 17. Publications page -------------------------------------- */

.page-head {
  padding-top: clamp(2.4rem, 4.6vw, 4rem);
  padding-bottom: clamp(1.6rem, 2.6vw, 2.4rem);
}
.page-head h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 16ch;
}
.page-head p {
  margin-top: 1.1rem;
  max-width: 56ch;
  font-size: 1.0625rem;
  color: var(--ink-2);
}

.record {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  padding-bottom: var(--sect);
}

.record__side {
  grid-column: 1 / span 3;
  position: sticky;
  top: 5.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.record__main { grid-column: 5 / span 8; }

.filters { display: flex; flex-direction: column; gap: 0.55rem; }
.filters .filter-row { display: flex; flex-wrap: wrap; gap: 0.22rem; }

.chip {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  padding: 0.24rem 0.4rem;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper-2); }
.chip[aria-pressed='true']:hover { border-color: var(--ink); color: var(--paper-2); }

.search {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  background: transparent;
  padding: 0.5rem 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.search::placeholder { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.625rem; }
.search:hover { border-bottom-color: var(--ink-3); }
.search:focus { outline: none; border-bottom-color: var(--ink); }
.search:focus-visible { outline: 1px solid var(--blue); outline-offset: 3px; }

.record-count { color: var(--ink-3); }

/* ---------- 17b. Record details & small print --------------------------- */

.record__label { color: var(--ink-3); margin-bottom: 0.55rem; }

.record__note {
  font-size: 0.75rem;
  color: var(--ink-3);
  max-width: 26ch;
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0.015em;
}

.record__empty { color: var(--ink-3); padding: 2rem 0; }

.pub__errata {
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0.015em;
}

.et-al { color: var(--ink-3); }

.wordmark__sub { color: var(--ink-3); }
.wordmark:hover .wordmark__sub { color: var(--ink-2); }

.masthead.is-stuck { border-bottom-color: var(--rule-2); }

.pub .copy:focus-visible { outline-offset: 2px; }

.preprints {
  margin-top: clamp(2.8rem, 4.4vw, 3.8rem);
  border-top: 1px solid var(--rule);
  padding-top: 1.7rem;
}
.preprints[hidden] { display: none; }
.preprints__note {
  font-size: 0.75rem;
  color: var(--ink-3);
  max-width: 58ch;
  margin: 0.45rem 0 0.9rem;
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0.015em;
}
.pub--pre .pub__title { font-size: clamp(1.05rem, 1.4vw, 1.12rem); }

/* ---------- 18. Responsive --------------------------------------------- */
@media (max-width: 1080px) {
  .hero__copy { grid-column: 1 / span 7; }
  .hero__plate { grid-column: 10 / span 3; }
  .about__text { grid-column: 1 / span 7; }
  .about__side { grid-column: 9 / span 4; }
}

@media (max-width: 900px) {
  .grid12 { column-gap: 1rem; }
  .hero__grid { row-gap: 2.2rem; }
  .hero__copy, .hero__plate { grid-column: 1 / -1; }
  .hero__copy { order: 1; }
  .hero__plate { order: 2; max-width: 30rem; }
  .hero__meta { margin-top: 1.7rem; padding-top: 0.95rem; }
  .section__aside, .section__title, .section__body { grid-column: 1 / -1; }
  .section__title { margin-top: 0.9rem; }
  .section__body { margin-top: 1.6rem; }
  .thread { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: 0.55rem; }
  .thread__head, .thread__body { grid-column: 2; }
  .pub, .pubs--compact .pub { grid-template-columns: minmax(0, 1fr); }
  .pub__venue, .pub__flags { grid-column: 1; grid-row: auto; }
  .pub__venue { flex-direction: row; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
  .pub__venue .link { flex: 0 0 auto; }
  .pub__venue .id { display: inline; }
  .about__text, .about__side { grid-column: 1 / -1; }
  .about__side { margin-top: 2.2rem; }
  .record { grid-template-columns: 1fr; }
  .record__side, .record__main { grid-column: 1 / -1; }
  .record__side {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.9rem 1.4rem;
    margin-bottom: 2rem;
  }
  .record__side > div:first-child { grid-column: 1 / -1; }
  .record__side > div:nth-child(2) { grid-column: 1; }
  .record__side .record-count { grid-column: 2; }
  .record__note { display: none; }
  .filters { flex: 1 1 100%; }
  .contact__head, .contact__mail { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .projects { grid-template-columns: 1fr; border-top-color: var(--rule); }
  .project:first-child { border-top: 0; }
  .thread { grid-template-columns: 2rem minmax(0, 1fr); }
  .thread__no { padding-top: 0.35rem; }
  .hero__actions { gap: 0.5rem; }
  .btn { padding: 0.62rem 0.8rem 0.56rem; }
  .deflist > div { grid-template-columns: 1fr; row-gap: 0.2rem; }

  /* a plate is a plate: image, then label, then caption — all full width */
  .plate--figure { grid-template-columns: minmax(0, 1fr); }
  .plate--figure .plate__media { grid-column: 1; margin-bottom: 0.7rem; }
  .plate--figure .plate__no { grid-column: 1; order: 2; border-top: 1px solid var(--ink); padding-top: 0.5rem; }
  .plate--figure figcaption { grid-column: 1; order: 3; border-top: 0; padding-top: 0.55rem; max-width: 58ch; }
}

@media (max-width: 520px) {
  :root { --fs-body: 1rem; }
  .masthead__in { padding-block: 0.9rem 0.8rem; min-height: 0; }
  .nav { gap: 0.85rem; }
  .nav a { font-size: 0.6875rem; letter-spacing: 0.05em; }
  .wordmark { font-size: 0.6875rem; }
  .wordmark__sub, .wordmark__sep { display: none; }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }

  /* on a phone the portrait is a square plate so the whole first screen is the introduction */
  .hero__plate .plate__media img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 18%; }
  .plate__caption { max-width: none; }
}

@media (max-width: 380px) {
  .wordmark__text { display: none; }
}

/* ---------- 19. Entrance ------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: rise 900ms var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise {
  to { opacity: 1; transform: none; }
}

.js .fade-up { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .fade-up.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .js .fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Print: the page is already a printed sheet. */
@media print {
  .masthead, .profile-rule, .contact__links, .btn { display: none; }
  body { background: #fff; }
  a { text-decoration: none; color: #000; }
}

/* ---------- 20. Corrections --------------------------------------------- */

/* About reads as one left-aligned column: label above heading, both at the margin. */
#about .section__head {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
#about .section__aside { grid-column: auto; }
#about .section__title { grid-column: auto; }

.pub__flags { justify-content: flex-end; }
.plate--figure figcaption { text-wrap: pretty; }

@media (max-width: 900px) {
  .pub__flags { justify-content: flex-start; }
  .pub__venue { align-items: flex-start; text-align: left; flex-wrap: wrap; }
  .pub__venue .id { display: inline; }
}

/* ---------- 21. Filter disclosure --------------------------------------- */

.filters-block > summary {
  list-style: none;
  cursor: default;
  user-select: none;
}
.filters-block > summary::-webkit-details-marker { display: none; }
.filters-block[open] .filters { margin-top: 0.75rem; }
.filters-block__count { color: var(--ink-3); }

@media (max-width: 720px) {
  .filters-block > summary {
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
  }
  .filters-block > summary::after {
    content: '+';
    font-size: 0.9rem;
    line-height: 1;
    color: var(--ink-3);
  }
  .filters-block[open] > summary::after { content: '\2212'; }
  .record__note { display: none; }
  .record__side { gap: 1.1rem; }
}

/* ---------- 22. Language switch + Chinese edition ----------------------- */

.lang-link {
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--rule-2);
  letter-spacing: 0.04em;
}

/* Latin stays Spectral / Fragment Mono; CJK falls through to a Song face for
   headings and a Hei face for running text, which is the ordinary Chinese
   pairing and keeps the printed-book rhythm. */
html[lang="zh-CN"] {
  --serif: "Spectral", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --sans: "Spectral", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: "Fragment Mono", "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;
}

html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3,
html[lang="zh-CN"] .plate__no {
  letter-spacing: 0.01em;
}

/* Chinese needs more leading than Latin at the same size. */
html[lang="zh-CN"] .hero__lead,
html[lang="zh-CN"] .section__title p,
html[lang="zh-CN"] .thread__body p,
html[lang="zh-CN"] .about__text p,
html[lang="zh-CN"] .contact__head p,
html[lang="zh-CN"] .page-head p,
html[lang="zh-CN"] .pub__abstract p,
html[lang="zh-CN"] .project p,
html[lang="zh-CN"] .side-note,
html[lang="zh-CN"] .preprints__note,
html[lang="zh-CN"] .deflist dd {
  font-family: var(--sans);
  line-height: 1.92;
}

html[lang="zh-CN"] .hero__lead { line-height: 1.85; }
html[lang="zh-CN"] .deflist dd { font-size: 0.9375rem; letter-spacing: 0.02em; }
html[lang="zh-CN"] .mono { letter-spacing: 0.03em; }

/* Chinese paragraphs want a slightly shorter measure than Latin ones. */
html[lang="zh-CN"] .thread__body p { max-width: 30em; }
html[lang="zh-CN"] .about__text p { max-width: 31em; }
html[lang="zh-CN"] .hero__lead { max-width: 27em; }

/* A drop cap is a Latin device; in Chinese it reads as a mistake. */
html[lang="zh-CN"] .about__text > p:first-child::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  font-weight: inherit;
}
html[lang="zh-CN"] .about__text > p:first-child { text-indent: 0; }

/* 23. Bilingual name lockup
   Two editions, two lead names: the English page sets the Latin name first and
   the Chinese one beneath it; the Chinese page inverts that. Both second names
   are quieter, tracked out, and set in a Song face so 陈国银 never inherits a
   Hei fallback from the Latin stack. */
.hero__name-zh,
.hero__name-latin {
  margin-top: 0.5rem;
  color: var(--ink-3);
  font-weight: 400;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  letter-spacing: 0.3em;
  line-height: 1.3;
}
.hero__name-latin {
  font-family: var(--serif);
  font-size: clamp(0.78rem, 0.95vw, 0.86rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
html[lang="zh-CN"] h1 { letter-spacing: 0.05em; }
@media (max-width: 520px) {
  .hero__name-zh,
  .hero__name-latin { margin-top: 0.35rem; }
}

/* ---------------------------------------------------------------------------
   24. Warm ground, paper grain, and the corona plate
   The page is printed on warm paper, not white: the ground carries a little
   grain so large fields read as a surface rather than a screen, and the plate
   between §02 and §03 drops to near-black so the corona can be seen at all.
   --------------------------------------------------------------------------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* The hero photograph: no frame, bled to the right edge of the window. */
.hero__plate .plate__media {
  border: 0;
  padding: 0;
  background: transparent;
}
.hero__plate .plate__media img { filter: saturate(0.92) contrast(1.03); }
.hero__plate figcaption,
.hero__plate .plate__no { max-width: 34rem; }

@media (min-width: 1000px) {
  .hero__plate {
    margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--sbw, 0px) - var(--wrap)) / 2)));
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .hero__plate .plate__media { flex: 1 1 auto; }
  .hero__plate .plate__media img {
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 26%;
  }
}

/* The corona plate. */
.corona {
  position: relative;
  margin-block: clamp(3.2rem, 6.5vw, 6rem);
  background: #0a0b0d;
  color: #f0e7da;
  overflow: hidden;
  border-block: 1px solid #0a0b0d;
}
.corona__art {
  position: absolute;
  inset: 0;
  background-image: url("../img/field-lines.svg");
  background-position: 50% 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.corona::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(6, 7, 9, 0.9) 0%,
    rgba(6, 7, 9, 0.72) 26%,
    rgba(6, 7, 9, 0.28) 48%,
    rgba(6, 7, 9, 0) 66%
  );
  pointer-events: none;
}
.corona__in {
  position: relative;
  z-index: 2;
  min-height: clamp(300px, 38vw, 470px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.7rem;
  padding-block: clamp(2rem, 4.5vw, 3.4rem);
}
.corona__label {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e6b17b;
}
.corona__label b { font-weight: 400; color: #f0e7da; }
.corona__cap {
  max-width: 44ch;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(240, 231, 218, 0.8);
}
.corona__cap a { color: #f0e7da; text-decoration-color: rgba(240, 231, 218, 0.45); }

@media (max-width: 720px) {
  .corona { margin-block: clamp(2.4rem, 8vw, 3.4rem); }
  .corona__in { min-height: 340px; }
  .corona__cap { font-size: 0.82rem; }
  /* On a narrow screen the caption sits under the glow, not beside it, so the
     scrim has to run bottom-up instead of left-to-right. */
  .corona::after {
    background: linear-gradient(
      to top,
      rgba(6, 7, 9, 0.9) 0%,
      rgba(6, 7, 9, 0.6) 34%,
      rgba(6, 7, 9, 0.12) 64%,
      rgba(6, 7, 9, 0) 88%
    );
  }
}

@media (prefers-reduced-motion: no-preference) {
  .corona__art img { transform: scale(1.04); }
}

/* ---------------------------------------------------------------------------
   25. Corrections for the warm plate set
   --------------------------------------------------------------------------- */

.plate__media picture { display: block; }

.contact__alt {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.contact__alt a { color: var(--ink-2); }

html[lang="zh-CN"] .corona__cap {
  font-family: var(--sans);
  line-height: 1.9;
  letter-spacing: 0.01em;
}
html[lang="zh-CN"] .corona__label { letter-spacing: 0.06em; }
html[lang="zh-CN"] .contact__alt { letter-spacing: 0.03em; }


/* ---------------------------------------------------------------------------
   24. The solar-field plate (background artwork)

   A magnetogram drawn from the physics, where blue and red are the two signs of
   the line-of-sight field. It sits behind the first screen only. Both the plate
   and its speckle tile are generated by art/magnetogram.mjs; never hand-edit
   the SVGs.
--------------------------------------------------------------------------- */

/* The paper stock stays plain; the plate in the hero carries the artwork. */

.hero {
  position: relative;
  isolation: isolate;
}

/* A band of magnetogram sits in the quiet space between the affiliation block
   and the buttons: the one stretch of the first screen with no type to fight. */
.hero::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--gutter));
  right: 0;
  bottom: 2.2rem;
  height: min(196px, 26%);
  background: url("../img/solar-field.svg") 72% 44% / min(1250px, 100vw) auto no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 22%, #000 74%, transparent 100%),
    linear-gradient(to right, transparent 0, transparent 44%, rgba(0, 0, 0, 0.5) 60%, #000 82%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 22%, #000 74%, transparent 100%),
    linear-gradient(to right, transparent 0, transparent 44%, rgba(0, 0, 0, 0.5) 60%, #000 82%);
  mask-composite: intersect;
}

@media (max-width: 900px) {
  .hero::before {
    background-position: 88% 0;
    background-size: 1250px auto;
    opacity: 0.5;
  }
}

/* The dark plate carries its own artwork; keep the paper stock off it. */
.corona {
  background-color: #0a0b0d;
  background-image: none;
}
.contact,
.page-head {
  background-color: var(--paper);
  background-image: none;
}



/* 25. Marginal plate
   The research section's thread list starts at column five, which leaves the
   whole left column empty for the length of the section. One figure from the
   papers stands in that column and sticks while the threads scroll past, so the
   margin is never blank. */
.margin-plate {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: 6.2rem;
  margin: 0;
}

.margin-plate__media {
  border-top: 1px solid var(--ink);
  padding-top: 0.55rem;
}

.margin-plate__media img {
  display: block;
  width: 100%;
  height: auto;
}

.margin-plate figcaption {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  max-width: 34ch;
}

.margin-plate figcaption .cap-no {
  display: block;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.margin-plate figcaption b {
  font-weight: 400;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .margin-plate {
    position: static;
    grid-column: 1 / -1;
    max-width: 21rem;
    margin-bottom: 1.8rem;
  }
}

/* 25. Two networks, one plate
   Each architecture gets a letter, its own line of explanation, and shares one
   source line at the foot. The letter sits in a narrow column so the two
   figures line up on the same left edge no matter how tall the caption runs. */
.plate--nets {
  display: block;
}

.plate--nets .net {
  padding-top: clamp(1.5rem, 2.4vw, 2.2rem);
}

.plate--nets .net + .net {
  margin-top: clamp(1.7rem, 2.8vw, 2.6rem);
  border-top: 1px solid var(--rule);
}

.plate--nets .net__letter {
  margin-right: 0.55rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.plate--nets .net__media {
  max-width: 1120px;
}

.plate--nets .net__media img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.plate--nets .net__cap {
  max-width: 74ch;
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.plate--nets .net__cap b {
  color: var(--ink);
  font-weight: 600;
}

.plate--nets .plate__src {
  margin: clamp(1.3rem, 2.2vw, 1.9rem) 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .plate--nets .net__cap {
    font-size: 0.625rem;
  }
}