:root {
  --ink: #183d36;
  --ink-strong: #102b26;
  --paper: #f6f2e8;
  --paper-bright: #fcfaf5;
  --sage: #a7bc88;
  --mint: #d7e5d2;
  --clay: #c96b43;
  --sand: #e7c982;
  --line: rgba(24, 61, 54, .18);
  --body: #35534d;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100svh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.benchmark-link { color: var(--clay); border-bottom: 1px solid currentColor; }
.benchmark-link:hover { color: var(--green); }
.star-mark { color: var(--clay); font-size: 1.05em; }
main { min-height: calc(100svh - 80px); overflow: visible; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: min(1240px, calc(100% - 64px));
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; letter-spacing: .08em; }
.brand-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: "Playfair Display", serif;
  font-style: italic;
  letter-spacing: 0;
}
nav { display: flex; gap: 26px; font-size: .83rem; font-weight: 600; }
nav a { position: relative; }
nav a::after { content: ""; position: absolute; right: 0; bottom: -4px; left: 0; height: 1px; background: var(--clay); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
nav a:hover::after, nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-code, .text-link { font-family: "DM Mono", monospace; font-size: .76rem; color: var(--clay); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, .9fr);
  width: min(1240px, calc(100% - 64px));
  min-height: calc(100svh - 80px);
  margin: 0 auto;
  padding: 96px 0 76px;
  gap: 54px;
  overflow: hidden;
}
.hero.is-active-page {
  min-height: calc(100svh - 80px);
  overflow: visible;
  align-content: start;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hero.is-active-page::-webkit-scrollbar { display: none; }
.eyebrow, .section-index { margin: 0 0 18px; color: var(--clay); font-family: "DM Mono", monospace; font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; color: var(--ink-strong); }
h1, h2 { font-family: "Playfair Display", serif; font-weight: 600; line-height: .98; letter-spacing: -.045em; }
h1 { max-width: 760px; font-size: clamp(3.9rem, 7vw, 6.9rem); }
h1 em, h2 em { color: var(--clay); font-weight: 600; }
.hero-intro { max-width: 610px; margin: 32px 0 28px; color: var(--body); font-size: 1.05rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 13px 16px; border: 1px solid var(--ink); font-size: .82rem; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { border-color: #aa142d; background: transparent; color: #aa142d; }
.button-primary:hover { background: rgba(170, 20, 45, .08); }
.button-quiet { background: transparent; }
.button-quiet:hover { background: rgba(167, 188, 136, .24); }
.button-matlab { border-color: #b85e38; color: #8e3e25; background: transparent; }
.button-matlab:hover { background: rgba(201, 107, 67, .08); }
.button-logo { display: block; width: 18px; height: 18px; flex: none; object-fit: contain; }
.arxiv-logo { width: 19px; height: 20px; object-fit: cover; object-position: center; }
.github-logo { width: 19px; height: 19px; }
.matlab-logo { width: 20px; height: 20px; }
.button-arrow { margin-left: 2px; font-family: "DM Mono", monospace; font-size: .9rem; line-height: 1; }
.authors { margin: 62px 0 0; color: var(--ink); font-size: .84rem; line-height: 1.45; }
.authors sup { color: var(--clay); font-weight: 700; }
.authors span { display: inline-block; color: var(--body); font-size: .76rem; line-height: 1.45; }
.authors .author-link { border-bottom: 1px solid transparent; font-weight: 700; }
.authors .author-link:hover { color: var(--clay); border-bottom-color: var(--clay); }

.hero-art { position: relative; display: grid; place-items: center; min-height: 500px; }
.hero-art::before { content: ""; position: absolute; width: 92%; aspect-ratio: 1; border: 1px dashed rgba(24, 61, 54, .4); border-radius: 50%; }
.hero-art img { position: relative; z-index: 2; width: min(84%, 500px); mix-blend-mode: multiply; filter: saturate(.85) contrast(1.02); }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-one { top: 7%; right: 7%; width: 105px; height: 105px; background: rgba(201, 107, 67, .25); }
.orb-two { bottom: 9%; left: 2%; width: 142px; height: 142px; background: rgba(167, 188, 136, .33); }
.art-label { position: absolute; z-index: 3; color: var(--ink); font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .06em; }
.label-explore { top: 12%; left: 4%; }
.label-exploit { right: 5%; bottom: 19%; }
.figure-note { position: absolute; z-index: 3; right: 0; bottom: 1%; width: 170px; margin: 0; font-family: "DM Mono", monospace; font-size: .62rem; line-height: 1.5; }

.statement, .mechanisms, .evaluation, .citation { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.statement {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 60px;
  min-height: calc(100svh - 80px);
  align-content: center;
  padding: 70px 0;
}
h2 { font-size: clamp(2.6rem, 4.1vw, 4.8rem); }
.statement h2 { margin-bottom: 31px; }
.statement div > p { max-width: 700px; margin: 0; font-size: 1.13rem; color: var(--body); }

.mechanisms {
  min-height: calc(100svh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 58px 0;
}
.section-heading { display: grid; grid-template-columns: .55fr 1.45fr; gap: 60px; margin-bottom: 48px; }
.mechanism-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.mechanism-card { position: relative; min-height: 320px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.mechanism-card::after { content: ""; position: absolute; width: 175px; height: 175px; right: -54px; bottom: -75px; border-radius: 50%; opacity: .55; }
.producer::after { background: var(--mint); }
.consumer::after { background: #f3dfad; }
.decomposer::after { background: #e5c2b0; }
.card-number, .role-tag { font-family: "DM Mono", monospace; font-size: .68rem; }
.card-number { color: var(--clay); }
.mechanism-card h3 { margin-top: 71px; font-family: "Playfair Display", serif; font-size: 2rem; }
.mechanism-card p { position: relative; z-index: 1; max-width: 300px; color: var(--body); font-size: .87rem; }
.role-tag { position: absolute; bottom: 27px; color: var(--ink); }
.method-footnote { display: flex; align-items: flex-start; gap: 12px; width: min(620px, 100%); margin: 24px 0 0 auto; font-size: .84rem; color: var(--body); }
.method-footnote p { margin: 0; }
.pulse-dot { display: block; width: 10px; height: 10px; margin-top: .43em; flex: none; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 6px rgba(201, 107, 67, .12); }

.evaluation {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 44px 92px;
  min-height: calc(100svh - 80px);
  padding: 54px 0;
}
.evaluation-copy h2 { margin-bottom: 27px; }
.evaluation-copy > p:not(.section-index) { max-width: 560px; margin: 0 0 27px; color: var(--body); }
.metric-list { border-top: 1px solid var(--ink); }
.metric { display: grid; grid-template-columns: 114px 1fr; align-items: baseline; gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.metric strong { font-family: "Playfair Display", serif; font-size: 3.7rem; line-height: .8; letter-spacing: -.06em; color: var(--clay); }
.metric span { max-width: 190px; color: var(--body); font-size: .88rem; }

.resource-band {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 38px;
  color: var(--paper-bright);
  background: var(--ink);
}
.resource-band p { margin: 0; font-family: "Playfair Display", serif; font-size: clamp(1.55rem, 2.2vw, 2.3rem); }
.resource-band div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 21px; font-family: "DM Mono", monospace; font-size: .76rem; }
.resource-band a { border-bottom: 1px solid rgba(246, 242, 232, .5); }

.citation {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-content: center;
  gap: 72px;
  min-height: calc(100svh - 80px);
  padding: 70px 0;
}
.citation h2 { margin-top: 18px; font-size: clamp(2.25rem, 3.5vw, 4rem); }
.citation-box { position: relative; align-self: center; padding: 50px 34px 30px; background: #e9e0cc; border: 1px solid rgba(24, 61, 54, .22); }
.citation pre { margin: 0; overflow-x: auto; color: var(--ink-strong); font-family: "DM Mono", monospace; font-size: .72rem; line-height: 1.75; white-space: pre-wrap; }
.copy-button { position: absolute; top: 13px; right: 13px; padding: 7px 9px; color: var(--ink); background: transparent; border: 1px solid rgba(24, 61, 54, .45); font-family: "DM Mono", monospace; font-size: .64rem; cursor: pointer; }

.project-footer { display: flex; justify-content: space-between; width: min(880px, calc(100% - 64px)); margin: 30px auto 0; padding: 25px 0 0; border-top: 1px solid var(--line); color: var(--body); font-family: "DM Mono", monospace; font-size: .67rem; }
.article-page .project-footer { width: 100%; }
.project-footer p { margin: 0; }
.project-footer a { color: var(--clay); }
.project-credit { text-align: right; }
.hero-footer { position: absolute; right: 0; bottom: 24px; left: 0; width: 100%; margin: 0; }
.hero.is-active-page .hero-footer {
  position: static;
  grid-column: 1 / -1;
  margin-top: 0;
}

/* These rules must follow the section layouts so inactive pages stay hidden. */
.page-section { display: none; }
.page-section.is-active-page { animation: panel-enter .42s ease both; }
.hero.is-active-page,
.statement.is-active-page,
.evaluation.is-active-page,
.citation.is-active-page { display: grid; }
.mechanisms.is-active-page { display: flex; }

/* Research pages: structured to communicate the manuscript at a glance. */
.section-kicker {
  margin: 0 0 11px;
  color: var(--ink);
  font-family: "DM Mono", monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.section-summary {
  max-width: 630px;
  margin: 20px 0 0;
  color: var(--body);
  font-size: .9rem;
  line-height: 1.62;
}

.statement {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  grid-template-rows: auto auto;
  gap: 30px 74px;
  align-content: center;
  padding: 38px 0 32px;
}
.statement h2 { margin-bottom: 20px; }
.statement .section-kicker { max-width: none; margin: 0 0 11px; color: var(--ink); font-size: .68rem; }
.statement .section-summary { max-width: 590px; }
.statement .section-summary { font-size: .9rem; }
.overview-claims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.overview-claims article { min-height: 92px; padding: 14px 16px; border-top: 2px solid var(--ink); background: rgba(255, 255, 255, .32); }
.overview-claims span, .overview-figure figcaption span { color: var(--clay); font-family: "DM Mono", monospace; font-size: .65rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.overview-claims p { margin: 7px 0 0; color: var(--ink); font-size: .76rem; line-height: 1.45; }
.overview-figure { position: relative; margin: 0; align-self: center; }
.figure-frame { position: relative; display: grid; min-height: 285px; place-items: center; overflow: hidden; background: linear-gradient(135deg, rgba(215, 229, 210, .8), rgba(252, 250, 245, .9)); }
.figure-frame::before { content: ""; position: absolute; width: 86%; height: 86%; border-radius: 50%; }
.figure-frame img { position: relative; width: 82%; max-height: 265px; object-fit: contain; mix-blend-mode: multiply; }
.overview-figure figcaption { display: grid; grid-template-columns: 118px 1fr; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.overview-figure figcaption p { margin: 0; color: var(--body); font-size: .71rem; line-height: 1.45; }
.overview-principles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.overview-principles article { display: grid; grid-template-columns: 38px 1fr; gap: 12px; min-height: 95px; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.overview-principles strong { color: var(--clay); font-family: "DM Mono", monospace; font-size: .68rem; font-weight: 500; }
.overview-principles h3 { font-family: "Playfair Display", serif; font-size: 1.05rem; }
.overview-principles p { margin: 3px 0 0; color: var(--body); font-size: .69rem; line-height: 1.45; }

.mechanisms { padding: 35px 0 30px; }
.section-heading { margin-bottom: 26px; }
.section-heading .section-summary { margin-top: 18px; }
.mechanism-card { min-height: 218px; padding: 20px 24px; }
.mechanism-card h3 { margin-top: 40px; font-size: 1.7rem; }
.mechanism-card p { margin-top: 9px; font-size: .78rem; line-height: 1.48; }
.role-tag { right: 24px; bottom: 18px; max-width: calc(100% - 48px); color: var(--body); font-size: .59rem; }
.method-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: center; gap: 32px; margin-top: 20px; }
.workflow-steps { display: flex; align-items: center; gap: 11px; color: var(--ink); font-family: "DM Mono", monospace; font-size: .65rem; letter-spacing: .01em; }
.workflow-steps span { white-space: nowrap; }
.workflow-steps i { display: block; width: 100%; height: 1px; min-width: 22px; background: var(--clay); }
.workflow-figure { display: grid; grid-template-columns: 134px 1fr; align-items: center; gap: 11px; margin: 0; }
.workflow-figure img { width: 134px; height: 54px; object-fit: cover; object-position: center; }
.workflow-figure figcaption { color: var(--body); font-family: "DM Mono", monospace; font-size: .64rem; line-height: 1.4; }

.evaluation {
  grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
  grid-template-areas: "copy visuals" "track track" "resources resources";
  gap: 19px 62px;
  padding: 28px 0;
}
.evaluation-copy { grid-area: copy; align-self: center; }
.evaluation-copy h2 { margin-bottom: 18px; }
.evaluation-copy > p:not(.section-index):not(.section-kicker) { margin: 0 0 16px; font-size: .86rem; line-height: 1.6; }
.experiment-visuals { grid-area: visuals; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.experiment-visuals figure { margin: 0; overflow: hidden; background: var(--paper-bright); }
.experiment-visuals img { display: block; width: 100%; height: 170px; object-fit: cover; object-position: center; }
.experiment-visuals figcaption { padding: 7px 10px; color: var(--body); font-family: "DM Mono", monospace; font-size: .62rem; }
.experiment-track { grid-area: track; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.experiment-track article { position: relative; display: grid; grid-template-columns: 28px 1fr 34px; gap: 9px; min-height: 98px; padding: 15px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.experiment-number { color: var(--clay); font-family: "DM Mono", monospace; font-size: .64rem; }
.experiment-track h3 { font-family: "Playfair Display", serif; font-size: 1rem; }
.experiment-track p { margin: 4px 0 0; color: var(--body); font-size: .67rem; line-height: 1.42; }
.experiment-track strong { align-self: end; color: var(--sage); font-family: "Playfair Display", serif; font-size: 2rem; line-height: .85; }
.resource-band { grid-area: resources; min-height: 0; padding: 13px 20px; }
.resource-band p { font-size: 1.16rem; }
.resource-band div { gap: 15px; font-size: .66rem; }

/* Content-first research pages. Each page scrolls independently under the fixed navigation. */
.content-page.is-active-page {
  display: block;
  min-height: calc(100svh - 80px);
  overflow: visible;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 48px 0 76px;
}
.citation.is-active-page {
  display: block;
  height: auto;
  min-height: calc(100svh - 80px);
  overflow: visible;
}
.content-page.is-active-page::-webkit-scrollbar { display: none; }
.article-page {
  width: min(880px, calc(100% - 64px));
  margin: 0 auto;
}
.content-page .section-index {
  margin: 0 0 18px;
  color: var(--clay);
  font-family: "DM Mono", monospace;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.55;
  text-transform: uppercase;
}
.article-intro {
  margin-bottom: 38px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.article-intro p {
  max-width: 760px;
  margin: 0;
  color: var(--body);
  font-size: 1rem;
  line-height: 1.72;
}
.article-section { margin: 0 0 42px; }
.article-section h2 {
  margin: 0 0 13px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.article-section p {
  max-width: 800px;
  margin: 0 0 13px;
  color: var(--body);
  font-size: .94rem;
  line-height: 1.7;
}
.article-section em { color: var(--ink); font-style: normal; font-weight: 600; }
.analytics-panel { margin: 0 0 30px; padding: 22px 0 0; }
.home-analytics { grid-column: 1 / -1; }
.visitor-title {
  margin: 0 0 18px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.1;
}
.visitor-views {
  display: block;
}
.visitor-view {
  min-width: 0;
  min-height: 220px;
  overflow: hidden;
  background: transparent;
  text-align: center;
}
.visitor-view h3 {
  margin: 0 0 10px;
  color: var(--body);
  font-family: "DM Mono", monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.visitor-map {
  width: min(760px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.article-figure { margin: 22px 0 0; }
.article-figure img { display: block; width: 100%; height: auto; background: transparent; }
.article-figure.figure-medium { max-width: 620px; }
.article-figure.figure-wide { max-width: 820px; }
.method-visuals { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 22px; }
.method-visuals figure { margin: 0; }
.method-visuals img { display: block; width: 100%; height: auto; }
.method-visuals .method-figure-square { max-width: 500px; }
.method-visuals .method-figure-wide { max-width: 720px; }
.engineering-cases { display: grid; gap: 32px; margin-top: 26px; }
.engineering-case { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); }
.engineering-case figure { margin: 0; }
.engineering-case figure img { display: block; width: 100%; height: auto; }
.engineering-results { min-width: 0; }
.engineering-results h3 { margin: 0 0 8px; font-family: "Playfair Display", serif; font-size: 1rem; }
.engineering-results table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: "DM Mono", monospace; font-size: clamp(.34rem, .58vw, .48rem); line-height: 1.35; }
.engineering-results th, .engineering-results td { padding: 3px 1px; text-align: center; white-space: nowrap; }
.engineering-results thead th { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); color: var(--ink); font-weight: 700; }
.engineering-results tbody tr:last-child th, .engineering-results tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.engineering-results tbody th { font-family: "Playfair Display", serif; font-size: 1.05em; }
.engineering-results th:first-child { width: 9%; text-align: left; }
.article-figure figcaption,
.experiment-visuals figcaption,
.method-visuals figcaption {
  margin-top: 7px;
  color: var(--body);
  font-family: "DM Mono", monospace;
  font-size: .68rem;
  line-height: 1.45;
}
.content-page .overview-claims,
.content-page .overview-principles,
.content-page .method-bottom,
.content-page .section-heading,
.content-page .resource-band { display: none; }
.content-page .experiment-visuals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 22px 0 0;
}
.content-page .experiment-visuals figure { margin: 0; border: 0; background: transparent; overflow: visible; }
.content-page .experiment-visuals img { display: block; width: 100%; height: auto; border: 0; object-fit: contain; }
.content-page .experiment-visuals figcaption { padding: 0; }

@media (max-width: 820px) {
  .content-page.is-active-page { height: calc(100svh - 80px); padding: 34px 0 56px; }
  .article-page { width: min(100% - 36px, 880px); }
  .article-intro { margin-bottom: 30px; }
  .article-intro p, .article-section p { font-size: .9rem; }
  .article-section { margin-bottom: 34px; }
  .visitor-view { min-height: 180px; }
  .content-page .experiment-visuals { grid-template-columns: 1fr; }
  .engineering-case { grid-template-columns: 1fr; }
  .engineering-results table { font-size: clamp(.42rem, 1.3vw, .58rem); }
}
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
  main { overflow-y: auto; }
  .site-header { width: min(100% - 36px, 1240px); }
  nav { display: none; }
  .hero { grid-template-columns: 1fr; width: min(100% - 36px, 1240px); min-height: 0; padding: 66px 0 54px; }
  .hero-art { min-height: 370px; order: -1; }
  .hero-art img { width: min(80%, 420px); }
  .hero-footer { position: static; grid-column: 1 / -1; width: 100%; margin-top: 15px; }
  .authors { margin-top: 42px; }
  .statement, .mechanisms, .evaluation, .citation { width: min(100% - 36px, 1240px); }
  .statement, .section-heading, .evaluation, .citation { grid-template-columns: 1fr; gap: 25px; }
  .statement, .mechanisms, .evaluation, .citation { min-height: auto; padding: 72px 0; }
  .mechanism-grid { grid-template-columns: 1fr; }
  .mechanism-card { min-height: 260px; }
  .mechanism-card h3 { margin-top: 42px; }
  .statement { grid-template-columns: 1fr; grid-template-rows: auto; }
  .overview-principles, .experiment-track { grid-template-columns: 1fr; }
  .overview-figure { order: 2; }
  .overview-principles { order: 3; }
  .overview-figure figcaption { grid-template-columns: 1fr; }
  .figure-frame { min-height: 240px; }
  .method-bottom { grid-template-columns: 1fr; }
  .workflow-steps { flex-wrap: wrap; }
  .workflow-steps i { width: 20px; flex: 0 0 20px; }
  .workflow-figure { grid-template-columns: 134px 1fr; }
  .experiment-visuals { grid-template-columns: 1fr; }
  .experiment-visuals img { height: auto; max-height: 250px; object-fit: contain; }
  .evaluation { grid-template-areas: "copy" "visuals" "track" "resources"; }
  .resource-band { align-items: flex-start; flex-direction: column; padding: 36px 18px; }
  .resource-band div { justify-content: flex-start; }
  .project-footer { width: min(100% - 36px, 880px); flex-direction: column; gap: 9px; }
  .article-page .project-footer { width: 100%; }
  .project-credit { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .page-section.is-active-page { animation: none; }
}