/* Oza Lab website styles
   Palette: forest green on bright ivory, Poly Canyon gold accents.
   Type: Newsreader (editorial serif), IBM Plex Sans (interface), IBM Plex Mono (labels).
   Fonts are self-hosted from assets/fonts (SIL Open Font License). */

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --green: #064f32;
  --green-deep: #033823;
  --green-soft: #4d6f60;
  --gold: #f2c75c;
  --gold-deep: #b08014; /* gold for large text on light backgrounds: 3.4:1 on ivory (the bright gold is 1.6:1) */
  --gold-ink: #7d600f;
  --paper: #fffefa;
  --wash: #f5f7f1;
  --rule: #cfdcd3;
  --rule-strong: #9fb7a8;
  --on-dark: #fffefa;
  --on-dark-soft: #c9d8cf;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: clamp(20px, 5vw, 76px);
  --max: 1180px;
  --header-h: 76px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  color: var(--green);
  background: var(--paper);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .18s ease; }
a:hover { color: var(--gold-ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--gold); color: var(--green-deep); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--green); color: var(--paper); font: 500 14px/1 var(--sans); text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--paper); }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--green); font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
h1 { margin-bottom: 18px; font-size: clamp(46px, 6.2vw, 82px); line-height: 1.02; letter-spacing: -.03em; }
h2 { margin-bottom: 18px; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.08; }
h3 { margin-bottom: 10px; font-size: clamp(23px, 2.3vw, 29px); font-weight: 550; line-height: 1.18; letter-spacing: -.012em; }
p { text-wrap: pretty; }
em { font-style: italic; }

.content { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.section { padding: clamp(60px, 8vw, 108px) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-wash { background: var(--wash); border-top: 1px solid var(--rule); }
.lede { max-width: 56ch; margin-bottom: 0; color: var(--green-soft); font-size: clamp(20px, 2vw, 24px); line-height: 1.45; }
.muted { color: var(--green-soft); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--gold-ink);
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.banner-copy .eyebrow { color: #5e4609; } /* darker gold-ink so the label stays readable over the banner artwork */

/* Placeholder text that still needs verified content */
.placeholder { color: var(--green-soft); font-style: italic; }

/* ---------- Links and buttons ---------- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font: 500 15px/1.3 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.text-link::after { content: "→"; transition: transform .2s ease; }
.text-link:hover::after { transform: translateX(3px); }
.text-link.external::after { content: "↗"; }

.button-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 14px 22px;
  border: 1px solid var(--green);
  border-radius: 2px;
  background: var(--green);
  color: var(--paper);
  font: 500 15px/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn::after { content: "→"; transition: transform .2s ease; }
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--paper); }
.btn:hover::after { transform: translateX(3px); }
.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: var(--green); color: var(--paper); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--header-h);
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 254, 250, .94);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; text-decoration: none; }
.brand img { display: block; width: 48px; height: 48px; flex: 0 0 auto; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font: 600 27px/1 var(--serif); letter-spacing: -.02em; }
.brand-copy small { margin-top: 5px; color: var(--green-soft); font: 400 12.5px/1.2 var(--sans); letter-spacing: .01em; white-space: nowrap; }
.brand:hover { color: var(--green); }
.nav { display: flex; flex-wrap: nowrap; gap: clamp(18px, 2.6vw, 38px); font: 500 15px/1.2 var(--sans); }
.nav a { position: relative; padding: 10px 0; text-decoration: none; white-space: nowrap; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav a:hover { color: var(--green); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { background: var(--green); transform: scaleX(1); }

/* ---------- Home hero ---------- */
.home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 46vw, 620px);
  overflow: hidden;
  border-bottom: 1px solid var(--green);
  background: var(--paper);
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .34;
  filter: url(#forest-ink);
}
/* Readability veil: ivory behind the text on the left, clearing toward the right so the art shows. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 254, 250, .95) 0%,
    rgba(255, 254, 250, .9) 36%,
    rgba(255, 254, 250, .62) 52%,
    rgba(255, 254, 250, .18) 66%,
    rgba(255, 254, 250, 0) 76%);
}
/* Gold tracers along the circuit lines; motion is driven by the script at the end of index.html. */
.hero-traces { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.trace-src path { fill: none; stroke: none; }
.trace-live path { fill: none; stroke: var(--gold); stroke-linecap: round; stroke-linejoin: round; }
.trace-live .trace-halo { opacity: .28; }
.trace-live .trace-tail { opacity: .62; }
.trace-live .trace-head { stroke: #e6b23a; }

/* ---------- Interior page banner (Research, Team, Contact) ----------
   Same artwork, veil, and gold tracers as the home hero (assets/tracers.js), shorter, with the page title.
   Each page shows a different crop; the SVG's preserveAspectRatio must match the image's object-position. */
.page-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(240px, 23vw, 330px);
  overflow: hidden;
  border-bottom: 1px solid var(--green);
  background: var(--paper);
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 254, 250, .95) 0%,
    rgba(255, 254, 250, .9) 30%,
    rgba(255, 254, 250, .55) 46%,
    rgba(255, 254, 250, .14) 58%,
    rgba(255, 254, 250, 0) 68%);
}
.page-banner--top .hero-art { object-position: center top; }
.page-banner--bottom .hero-art { object-position: center bottom; }
.banner-copy { padding: clamp(56px, 7vw, 96px) 0 clamp(36px, 4vw, 52px); }
.banner-copy h1 { margin-bottom: 0; }
.page-banner + .page-intro { padding-top: clamp(40px, 5vw, 64px); }
/* Teaching: a lighter veil, so the striped hills that run under the title show through it. */
.page-banner--drape::before {
  background: linear-gradient(90deg,
    rgba(255, 254, 250, .8) 0%,
    rgba(255, 254, 250, .72) 30%,
    rgba(255, 254, 250, .42) 46%,
    rgba(255, 254, 250, .1) 58%,
    rgba(255, 254, 250, 0) 68%);
}

/* Teaching: the "Learn by doing" ribbon arches over the top of the sunburst, so on wide screens the banner grows
   with the window to keep all of it in view. */
@media (min-width: 761px) { .page-banner--tall { min-height: clamp(330px, 22vw, 580px); } }

/* Banner art. Every page uses the same sunrise over the mountains (assets/banner-home.jpg for the home hero and
   banner-research.jpg, -team, -publications, -contact, -teaching for the other pages), drawn in the lab's line-art pen.
   Only the icon set into the face of the big peak changes: a block P on Home, a translating ribosome on Research, three
   people and an open seat on Team, an open notebook on Publications, and an envelope and paper plane on Contact.
   Teaching shows the same block P as Home, with a "Learn by doing" ribbon draped over the sunburst to set it apart.
   Gold tracers follow the routes in each banner's SVG (the sun, the icon, the ridge up to the summit, and out and
   back along three rays); the matching glow outline lights when one arrives. */
.banner-glow path { fill: none; stroke: #e6b23a; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .7s ease; }
.banner-glow path.is-lit { opacity: .8; }
.banner-gold path { fill: none; stroke: #e6b23a; stroke-linecap: round; opacity: .85; }
.hero-traces path.route { fill: none; stroke: none; }
.hero-copy { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 56px 0; }
.hero-title {
  margin: 0 0 26px;
  color: var(--green);
  font: 650 clamp(56px, 7vw, 96px)/.98 var(--serif);
  letter-spacing: -.035em;
}
.hero-title .hero-phrase { display: block; -webkit-text-stroke: 1.1px var(--gold); paint-order: stroke fill; }
.hero-title .hero-learn { display: block; margin-top: .08em; color: var(--gold-deep); -webkit-text-stroke: 1.5px var(--green); paint-order: stroke fill; }
.hero-lede { max-width: 40ch; margin: 0 0 34px; color: var(--green); font-size: clamp(20px, 1.9vw, 24px); font-weight: 450; line-height: 1.45; }

/* ---------- Home: student feature ---------- */
.student-feature { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: clamp(28px, 6vw, 88px); }
.student-feature img { display: block; width: 100%; height: auto; }
/* Home: a real photo replaces the line drawing, so the drawing's multiply blend is switched off (it is set in home-research.css). */
.page-home .student-feature img.student-photo { mix-blend-mode: normal; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule-strong); background: var(--wash); }
.student-copy h2 { margin-bottom: 20px; }
.student-copy p { max-width: 36ch; margin-bottom: 28px; color: var(--green-soft); }

/* ---------- Section headings ---------- */
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 36ch; margin: 0 0 6px; color: var(--green-soft); }

/* ---------- Theme cards ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 48px); }
.theme-card { display: flex; flex-direction: column; padding-top: 28px; border-top: 1px solid var(--green); }
.theme-card .theme-icon { width: 72px; height: 72px; margin-bottom: 22px; }
.theme-card h3 { margin-bottom: 12px; }
.theme-card p { margin-bottom: 24px; color: var(--green-soft); font-size: 18px; line-height: 1.55; }
.theme-card .text-link { margin-top: auto; align-self: flex-start; }
.theme-card .theme-num, .theme-num { margin: 0 0 18px; color: var(--gold-ink); font: 500 12px/1 var(--mono); letter-spacing: .12em; }

/* Line-art icons */
.theme-icon { display: block; overflow: visible; }
.theme-icon * { vector-effect: non-scaling-stroke; }
.theme-icon .ink { fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon .accent { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon .accent-fill { fill: var(--gold); stroke: var(--green); stroke-width: 1; }
.theme-icon .dot { fill: var(--green); stroke: none; }

/* ---------- Recent publications (home) ---------- */
.recent-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.recent-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.recent-year { margin: 4px 0 0; color: var(--gold-ink); font: 500 13px/1.3 var(--mono); letter-spacing: .08em; }
.recent-list h3 { margin: 0 0 6px; font-size: clamp(21px, 1.9vw, 25px); }
.recent-list h3 a { text-decoration: none; }
.recent-list h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; color: var(--green); }
.recent-list p { margin: 0; color: var(--green-soft); font-size: 17px; }
.recent-footer { margin-top: 28px; }

/* ---------- Dark band ---------- */
.band-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 10vw, 128px) 0;
  background: var(--green);
  color: var(--on-dark);
}
.band-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/topo-circuit-original.jpg") center / cover no-repeat;
  filter: invert(1) grayscale(1);
  mix-blend-mode: screen;
  opacity: .07;
}
.band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark p { color: var(--on-dark-soft); }
.band-dark .eyebrow { color: var(--gold); }
.band-dark a { color: var(--on-dark); }
.band-dark a:hover { color: var(--gold); }
.band-dark a:focus-visible { outline-color: var(--gold); }
.work-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.work-head h2 { margin: 0; font-size: clamp(44px, 6vw, 76px); }
.work-head h2 span { color: var(--gold); }
.work-head > p { max-width: 40ch; margin: 0 0 8px; font-size: 20px; }
.work-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.work-card { padding-top: 26px; border-top: 1px solid rgba(255, 254, 250, .35); }
.work-card p { max-width: 38ch; margin-bottom: 22px; }
.band-dark .text-link { color: var(--gold); }
.band-dark .text-link:hover { color: var(--on-dark); }

/* ---------- Interior page intro ---------- */
.page-intro { padding: clamp(64px, 9vw, 120px) 0 clamp(44px, 6vw, 72px); border-bottom: 1px solid var(--rule); }
.intro-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, .7fr); align-items: end; gap: clamp(32px, 7vw, 100px); }
.intro-aside { max-width: 34ch; margin: 0 0 8px; padding-left: 22px; border-left: 2px solid var(--gold); color: var(--green-soft); font-size: 18px; line-height: 1.55; }
.jump-links { margin: 0; padding: 0; list-style: none; font: 500 15px/1.3 var(--sans); }
.jump-links li + li { margin-top: 12px; }
.jump-links a { display: inline-flex; gap: 12px; text-decoration: none; }
.jump-links a span { color: var(--gold-ink); font: 500 12px/1.6 var(--mono); }
.jump-links a:hover { color: var(--gold-ink); }

/* ---------- Research page ---------- */
.theme-block { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); gap: clamp(32px, 7vw, 104px); }
.theme-block-head { align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.theme-block-head .theme-icon { width: 104px; height: 104px; margin-bottom: 26px; }
.theme-block-head h2 { margin-bottom: 0; }
.theme-block-body .lede { margin-bottom: 36px; color: var(--green); }
.detail-label { margin: 0 0 14px; color: var(--green-soft); font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.focus-list { margin: 0 0 40px; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.focus-list li { position: relative; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.5; }
.focus-list li::before { content: ""; position: absolute; left: 4px; top: 27px; width: 9px; height: 9px; border: 1.5px solid var(--green); border-radius: 50%; background: var(--gold); }
.paper-links { margin: 0; padding: 0; list-style: none; }
.paper-links li { padding: 10px 0; font-size: 17px; line-height: 1.45; }
.paper-links a { text-decoration-color: var(--rule-strong); }
.paper-links a:hover { text-decoration-color: var(--gold); }
.paper-links span { display: block; margin-top: 3px; color: var(--green-soft); font: 400 13.5px/1.4 var(--sans); }

.cycle-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 96px); align-items: center; }
.cycle-figure { margin: 0; }
.cycle-figure svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.cycle-steps { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.cycle-steps li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cycle-steps strong { font: 600 13px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cycle-steps li:last-child strong { color: var(--gold-ink); }
.cycle-steps span { color: var(--green-soft); font-size: 18px; line-height: 1.5; }

/* ---------- Research: cell-free workflow diagram (assets/workflow.js) ----------
   Adapted from the slide "Improving access to CFPS from beginning to end". Each step, input, bracket, and
   application is a button; its card opens on hover, keyboard focus, or tap and links to the papers. */
.wf {
  --wf-icon: clamp(56px, 6vw, 84px);
  --wf-icon-sm: calc(var(--wf-icon) * .78);
  --wf-font: clamp(13.5px, 1.2vw, 17px);
  --wf-app-icon: calc(var(--wf-font) * 1.9);
  position: relative; margin-top: 8px;
}
.wf-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wf-wires path { fill: none; stroke: var(--rule-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease, stroke-width .25s ease; }
.wf-wires .wf-arc { stroke-dasharray: 2 6; }
.wf-wires path.is-hot { stroke: #e6b23a; stroke-width: 2.4; }
.wf-wires .wf-head { fill: var(--rule-strong); stroke: none; transition: fill .25s ease; }
.wf-wires .wf-head.is-hot { fill: #e6b23a; }
.wf-group-label { margin: 0 0 6px; color: var(--gold-ink); font: 500 clamp(11.5px, .95vw, 13.5px)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }

.wf-node { position: relative; }
.wf-trigger {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; margin: 0; padding: 10px 6px 12px;
  border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: var(--green); font: 500 var(--wf-font)/1.3 var(--sans); text-align: center; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.wf-trigger:hover, .wf-node.is-open > .wf-trigger, .wf-node:focus-within > .wf-trigger { background: var(--wash); border-color: var(--rule); }
.wf-trigger:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.wf-label { max-width: 15ch; text-wrap: balance; }
.wf-sub { margin-top: -4px; color: var(--green-soft); font: italic 400 calc(var(--wf-font) * .95)/1.2 var(--serif); }
.wf-icon { display: block; width: var(--wf-icon); height: var(--wf-icon); overflow: visible; }
.wf-icon *, .wf-app-icon * { vector-effect: non-scaling-stroke; }
.wf-icon .ink, .wf-app-icon .ink { fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wf-icon .acc, .wf-app-icon .acc { fill: none; stroke: #e6b23a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf-icon .accf, .wf-app-icon .accf { fill: var(--gold); stroke: var(--green); stroke-width: 1; }
.wf-input .wf-icon, .wf-storage .wf-icon { width: var(--wf-icon-sm); height: var(--wf-icon-sm); }
.wf-ai .wf-trigger { border: 1.5px dashed #c99a2e; }
.wf-ai .wf-trigger:hover, .wf-ai.is-open > .wf-trigger, .wf-ai:focus-within > .wf-trigger { border-color: #c99a2e; background: #fdf8e8; }

/* brackets */
.wf-bracket { display: flex; flex-direction: column; align-items: center; }
.wf-brace { position: relative; display: block; width: calc(100% - 16px); height: 12px; border: 1.5px solid var(--green-soft); border-top: 0; border-radius: 0 0 4px 4px; }
.wf-brace::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 1.5px; height: 11px; background: var(--green-soft); transform: translateX(-50%); }
.wf-bracket .wf-trigger { width: auto; margin-top: 14px; padding: 6px 12px; font: 500 calc(var(--wf-font) * 1.1)/1.3 var(--serif); }
.wf-bracket .wf-label { max-width: 22ch; }

/* applications */
.wf-apps-wrap { position: relative; padding-left: 4px; }
.wf-apps { margin: 0; padding: 0; list-style: none; }
.wf-app .wf-trigger { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 5px 10px 5px 6px; text-align: left; border-radius: 999px; }
.wf-app .wf-label { max-width: none; }
.wf-dot { flex: 0 0 auto; width: 11px; height: 11px; border: 1.5px solid var(--green-soft); border-radius: 50%; background: var(--paper); transition: background-color .2s ease, border-color .2s ease; }
.wf-app:hover .wf-dot, .wf-app.is-open .wf-dot, .wf-app:focus-within .wf-dot { background: var(--gold); border-color: var(--green); }
.wf-app-icon { flex: 0 0 auto; width: var(--wf-app-icon); height: var(--wf-app-icon); overflow: visible; }

/* cards */
.wf-card {
  position: absolute; z-index: 30; top: 100%; left: 50%; width: min(320px, 80vw);
  padding-top: 8px; transform: translate(-50%, 4px);
  visibility: hidden; opacity: 0; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  text-align: left;
}
.wf-card-inner { padding: 16px 18px 14px; border: 1px solid var(--rule-strong); border-top: 3px solid var(--gold); border-radius: 4px; background: var(--paper); box-shadow: 0 14px 34px rgba(3, 56, 35, .14); }
.wf-card-title { margin: 0 0 6px; font: 600 19px/1.25 var(--serif); }
.wf-card-text { margin: 0; color: var(--green-soft); font-size: 15.5px; line-height: 1.5; }
.wf-card-label { margin: 12px 0 4px; color: var(--gold-ink); font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.wf-papers { margin: 0; padding: 0; list-style: none; }
.wf-papers li { padding: 6px 0; border-top: 1px solid var(--rule); font: 500 13.5px/1.35 var(--sans); }
.wf-papers li:first-child { border-top: 0; }
.wf-papers a { text-decoration-color: var(--rule-strong); }
.wf-papers a::after { content: " ↗"; color: var(--gold-ink); }
.wf-papers a:hover { color: var(--gold-ink); text-decoration-color: var(--gold); }
.wf-papers span:not(.visually-hidden) { display: block; margin-top: 2px; color: var(--green-soft); font: 400 12.5px/1.35 var(--sans); }
.wf-card-more { margin: 12px 0 0; }
.wf-node.is-open, .wf-node:focus-within { z-index: 40; }
.wf-node.is-open > .wf-card, .wf-node:focus-within > .wf-card { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .18s ease, transform .18s ease; }
@media (hover: hover) {
  .wf-node:hover { z-index: 40; }
  .wf-node:hover > .wf-card { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .18s ease .05s, transform .18s ease .05s; }
}
/* card placement at the edges */
.wf-node[data-node="growth"] > .wf-card, .wf-node[data-node="b-workflow"] > .wf-card { left: 0; transform: translate(0, 4px); }
.wf-node[data-node="growth"]:is(:hover, :focus-within, .is-open) > .wf-card,
.wf-node[data-node="b-workflow"]:is(:hover, :focus-within, .is-open) > .wf-card { transform: none; }
.wf-app > .wf-card { top: 50%; left: auto; right: 100%; padding: 0 10px 0 0; transform: translate(-4px, -50%); }
.wf-app:is(:hover, :focus-within, .is-open) > .wf-card { transform: translate(0, -50%); }

/* desktop layout */
@media (min-width: 961px) {
  .wf {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr)) minmax(clamp(268px, 24vw, 330px), 3.4fr);
    grid-template-areas:
      ". . . . . . gl-in gl-in gl-in gl-in gl-in gl-in apps"
      ". . . . ai ai dna dna cof cof energy energy apps"
      "growth growth harvest harvest lysis lysis extract extract reaction reaction product product apps"
      "b-workflow b-workflow b-workflow b-workflow b-workflow b-workflow b-shelf b-shelf b-shelf b-rates b-rates b-rates apps"
      ". . . . . . storage storage storage . . . apps";
    grid-template-rows: auto auto auto auto auto;
    column-gap: 6px; row-gap: 26px;
    align-items: start;
  }
  /* On wide screens the diagram breaks out of the 1180 px text column (half a gutter from the screen edge) so its icons and labels can be larger. */
  @media (min-width: 1240px) {
    .wf { --wf-w: min(1360px, calc(100vw - var(--gutter) - 17px)); width: var(--wf-w); margin-left: calc((100% - var(--wf-w)) / 2); }
  }
  .wf-gl-inputs { align-self: end; margin: 0 0 -14px; text-align: center; }
  .wf-input .wf-trigger, .wf-storage .wf-trigger { gap: 6px; }
  .wf-step:not(.wf-storage) { align-self: start; }
  .wf-apps-wrap { align-self: center; margin-left: 28px; }
  .wf-apps-wrap .wf-group-label { margin-left: 40px; }
  .wf-app:nth-child(1), .wf-app:nth-child(9) { margin-left: 44px; }
  .wf-app:nth-child(2), .wf-app:nth-child(8) { margin-left: 28px; }
  .wf-app:nth-child(3), .wf-app:nth-child(7) { margin-left: 14px; }
  .wf-app:nth-child(4), .wf-app:nth-child(6) { margin-left: 4px; }
  .wf-ai { align-self: center; }
  .wf-ai .wf-trigger { width: 88%; margin: 0 auto; }
}

/* stacked layout for tablets and phones */
@media (max-width: 960px) {
  .wf { display: flex; flex-direction: column; gap: 4px; }
  .wf-wires { display: none; }
  .wf-node { order: 10; }
  .wf-node[data-node="growth"] { order: 1; } .wf-node[data-node="harvest"] { order: 2; } .wf-node[data-node="lysis"] { order: 3; }
  .wf-node[data-node="extract"] { order: 4; } .wf-gl-inputs { order: 5; margin-top: 14px; }
  .wf-node[data-node="ai"] { order: 6; } .wf-node[data-node="dna"] { order: 7; } .wf-node[data-node="cof"] { order: 8; } .wf-node[data-node="energy"] { order: 9; }
  .wf-node[data-node="reaction"] { order: 10; } .wf-node[data-node="product"] { order: 11; }
  .wf-bracket { order: 12; } .wf-node[data-node="storage"] { order: 13; }
  .wf-apps-wrap { order: 14; margin-top: 18px; }
  .wf-trigger, .wf-bracket .wf-trigger { flex-direction: row; justify-content: flex-start; gap: 14px; width: 100%; margin: 0; padding: 8px 12px; text-align: left; font: 500 15px/1.3 var(--sans); }
  .wf-icon, .wf-input .wf-icon, .wf-storage .wf-icon { width: 40px; height: 40px; }
  .wf-label { max-width: none; }
  .wf-sub { margin: 0 0 0 auto; }
  .wf-trigger::after { content: "+"; margin-left: auto; color: var(--gold-ink); font: 400 20px/1 var(--sans); }
  .wf-ai .wf-trigger::after { margin-left: 12px; }
  .wf-node.is-open > .wf-trigger::after { content: "\2212"; }
  .wf-brace { display: none; }
  .wf-bracket { align-items: stretch; }
  .wf-bracket .wf-trigger { border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; }
  .wf-node[data-node="b-workflow"] { margin-top: 14px; }
  .wf-card, .wf-app > .wf-card { position: static; width: auto; padding: 0 0 8px; transform: none; display: none; visibility: visible; opacity: 1; transition: none; }
  .wf-node.is-open > .wf-card, .wf-node:focus-within > .wf-card,
  .wf-app:is(:focus-within, .is-open) > .wf-card,
  .wf-node[data-node]:is(:focus-within, .is-open) > .wf-card { display: block; transform: none; }
  .wf-card-inner { box-shadow: none; }
  .wf-app { margin: 0 !important; }
}
@media (max-width: 960px) and (hover: hover) {
  .wf-node:hover > .wf-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-card { transition: none !important; }
}
.wf-jump { margin: 26px 0 0; }

/* ---------- Teaching page ---------- */
.course-facts { margin: 0 0 36px; padding: 0; border-top: 1px solid var(--rule); }
.course-facts div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.course-facts dt { color: var(--gold-ink); font: 500 12px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.course-facts dd { margin: 0; font-size: 17.5px; line-height: 1.5; }
.material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.material-card { padding: 16px 18px; border: 1px dashed var(--rule-strong); border-radius: 4px; background: var(--paper); }
.material-title { margin: 0 0 6px; font: 600 18px/1.25 var(--serif); }
.material-link { margin: 0; font: 400 14px/1.4 var(--sans); }
.material-card a { font: 500 14px/1.4 var(--sans); }
.theme-block-body .lede + .material-grid { margin-top: 4px; }
.igem-more { margin: -12px 0 24px; color: var(--green-soft); }
.igem-logo { display: block; width: min(100%, 300px); height: auto; margin: 0 0 26px; mix-blend-mode: multiply; }
.tool-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.tool-list li { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.tool-list a { font: 600 21px/1.25 var(--serif); text-decoration-color: var(--rule-strong); }
.tool-list a:hover { text-decoration-color: var(--gold); }
.tool-list p { max-width: 58ch; margin: 6px 0 4px; color: var(--green-soft); font-size: 17px; line-height: 1.5; }
.tool-list span { color: var(--green-soft); font: 400 13px/1.4 var(--sans); }
@media (max-width: 760px) {
  .course-facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- CTA strip ---------- */
.cta-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 8vw, 110px); align-items: center; }
.cta-strip h2 { margin: 0; }
.cta-strip .lede { margin: 0 0 24px; }

/* ---------- Photos (Research, Teaching, Contact, Team) ---------- */
.photo-band { padding: clamp(40px, 5vw, 64px) 0 0; }
.section + .photo-band { padding-top: 0; }
/* Home: photo with a names caption under it */
.student-figure { margin: 0; }
.student-figure figcaption { margin-top: 12px; color: var(--green-soft); font: 400 14.5px/1.55 var(--sans); }
.student-figure figcaption span { display: block; }
.student-figure figcaption b { color: var(--green); font-weight: 600; }
@media (max-width: 760px) { .page-home .student-feature .student-figure { order: 2; } }
.photo-band + .section { border-top: 0; }
.photo-figure { border: 1px solid var(--rule-strong); background: var(--wash); line-height: 0; }
.photo-figure img { display: block; width: 100%; height: auto; }
.theme-block-body .photo-figure { margin: 0 0 36px; }
.theme-block-body .photo-figure--small { max-width: 440px; }
.contact-route .photo-figure { margin: 0 0 28px; }
.section-heading + .photo-figure { margin: 0; }

/* ---------- Team page ---------- */
.team-photo-section { padding: clamp(32px, 4vw, 56px) 0 0; }
.team-photo { margin-top: 0; margin-bottom: 0; border: 1px solid var(--rule-strong); background: var(--wash); line-height: 0; }
.team-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.team-photo-section + .page-intro { padding-top: clamp(36px, 5vw, 64px); }
.pi-feature { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.portrait {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  width: 100%;
  border: 1px solid var(--rule-strong);
  background: var(--wash);
  color: var(--green-soft);
  text-align: center;
}
.portrait::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule); pointer-events: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; font: 400 13px/1.4 var(--sans); }
.portrait-mark b { color: var(--green); font: 500 64px/1 var(--serif); letter-spacing: -.02em; }
.pi-copy .person-role { margin-bottom: 14px; }
.pi-copy h2 { margin-bottom: 8px; }
.pi-title { margin: 0 0 26px; color: var(--green-soft); font: 400 16px/1.5 var(--sans); }
.pi-copy p.bio { max-width: 60ch; }
.pi-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; }
.person-role { margin: 0 0 8px; color: var(--gold-ink); font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.member-card { padding: 26px; border: 1px dashed var(--rule-strong); background: var(--paper); }
.member-card .avatar { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 20px; border: 1px dashed var(--rule-strong); border-radius: 50%; color: var(--green-soft); font: 400 12px/1 var(--sans); }
.member-card h3 { margin-bottom: 4px; font-size: 23px; }
.member-card p { margin: 0; color: var(--green-soft); font-size: 16px; line-height: 1.5; }
.member-card p + p { margin-top: 10px; }
.member-card--named { padding: 22px 26px; border-style: solid; border-color: var(--rule); display: flex; align-items: center; gap: 18px; }
.member-card--named .avatar { flex: none; width: 52px; height: 52px; margin: 0; border: 1px solid var(--rule-strong); background: var(--wash); color: var(--green); font: 500 19px/1 var(--serif); letter-spacing: .02em; }
.member-card--named h3 { margin: 0; }
.alumni-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.alumni-list li { display: grid; grid-template-columns: minmax(200px, .7fr) 1.3fr; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--rule); }

/* ---------- Contact page ---------- */
.contact-routes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.contact-route { padding: clamp(28px, 3.4vw, 44px); border-top: 3px solid var(--gold); background: var(--wash); }
.contact-route h2 { margin: 0 0 14px; font-size: clamp(26px, 2.6vw, 32px); font-weight: 550; line-height: 1.18; letter-spacing: -.012em; }
.contact-route > p { max-width: 44ch; color: var(--green-soft); }
.check-list { margin: 22px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 8px 0 8px 28px; font-size: 17px; line-height: 1.45; }
.check-list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 6px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-45deg); }
.contact-detail { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 16px; }
.contact-address { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; gap: 40px; }
.contact-address h2 { margin: 0; }
.contact-address address { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; font-style: normal; }
.contact-address address p { margin: 0; font-size: 18px; line-height: 1.55; }
.contact-address address strong { display: block; margin-bottom: 8px; color: var(--gold-ink); font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Publications page ---------- */
.publication-intro { padding: 44px 0 48px; }
.publication-hero-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.55fr); align-items: center; gap: 12px; min-height: 280px; }
.publication-hero-copy .lede { max-width: 31ch; }
.publication-hero-art { display: block; width: 100%; height: 280px; object-fit: cover; object-position: right center; }
/* Gold tracers on the notebook, papers, and pencil (assets/tracers.js). The SVG matches the image crop:
   viewBox = image size, xMaxYMid slice = object-fit cover + object-position right center. */
.publication-hero-media { position: relative; min-width: 0; }
.publication-hero-media .banner-glow path { stroke-width: 5; }
.scholar-link { margin-top: 26px; }
.publication-section { padding-top: clamp(40px, 5vw, 64px); }
.pub-year { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; border-top: 1px solid var(--green); }
.pub-year + .pub-year { margin-top: 0; }
.pub-year-label {
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 20px);
  margin: 0;
  padding: 26px 0;
  color: var(--gold-ink);
  font: 500 15px/1 var(--mono);
  letter-spacing: .1em;
}
.pub-year-list { border: 0; }
.publication-entry { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; align-items: start; padding: 26px 0 30px; }
.publication-entry + .publication-entry { border-top: 1px solid var(--rule); }
.publication-detail h3, .recent-list h3, .paper-links a { text-wrap: pretty; }
.publication-detail h3 { margin: 0 0 10px; font: 550 clamp(21px, 1.9vw, 25px)/1.25 var(--serif); letter-spacing: -.01em; }
.publication-detail h3 a { text-decoration: none; }
.publication-detail h3 a:hover, .publication-detail h3 a:focus-visible { color: var(--green); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.publication-detail .citation { margin: 0; color: var(--green-soft); font-size: 17px; line-height: 1.5; }
.publication-detail .record-note { margin: 8px 0 0; color: var(--green-soft); font: 400 12.5px/1.45 var(--sans); }
.paper-figure { width: 100%; margin: 0; }
.paper-figure-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 160px;
  padding: 10px;
  border: 1px solid var(--rule);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.paper-figure-link img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.paper-figure-link:hover { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.paper-figure figcaption { margin: 9px 0 0; color: var(--green-soft); font: 400 11.5px/1.4 var(--sans); }
.paper-figure-empty .paper-figure-link { flex-direction: column; gap: 8px; border-style: dashed; border-color: var(--rule-strong); background: var(--wash); color: var(--green-soft); font: 400 12.5px/1.4 var(--sans); text-align: center; }
.paper-figure-empty .paper-figure-link b { color: var(--green); font-weight: 600; }
.publication-entry:target { background: #fbfaf2; }
.content-note { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--green-soft); font: 400 13.5px/1.55 var(--sans); }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: var(--on-dark-soft); font: 400 14.5px/1.55 var(--sans); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .8fr); gap: 40px; padding: clamp(52px, 6vw, 76px) 0 40px; }
.footer-brand { display: flex; gap: 16px; align-items: flex-start; }
.footer-brand img { width: 52px; height: 52px; flex: 0 0 auto; }
.footer-brand strong { display: block; margin-bottom: 4px; color: var(--on-dark); font: 600 25px/1.1 var(--serif); letter-spacing: -.02em; }
.footer-brand p { max-width: 46ch; margin: 0; }
.footer-col h2 { margin: 0 0 14px; color: var(--gold); font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li + li { margin-top: 8px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer a:focus-visible { outline-color: var(--gold); }
.footer-base { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 28px; border-top: 1px solid rgba(255, 254, 250, .16); font-size: 13px; }
.footer-base p { margin: 0; }
.motion-toggle { align-self: center; min-height: 24px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.motion-toggle:hover { color: var(--gold); }
.site-footer .motion-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .theme-grid { grid-template-columns: 1fr; gap: 0; }
  .theme-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 28px; padding: 30px 0; }
  .theme-card .theme-icon { grid-row: 1 / span 4; margin: 0; }
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --header-h: 112px; }
  body { font-size: 18px; }
  .site-header { position: static; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 20px 4px; }
  .brand img { width: 42px; height: 42px; }
  .brand-copy strong { font-size: 24px; }
  .brand-copy small { white-space: normal; font-size: 12px; }
  .nav { justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; overflow: visible; font-size: clamp(12px, 3.3vw, 14px); }
  .nav::-webkit-scrollbar { display: none; }
  html { scroll-padding-top: 16px; }
  .home-hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .home-hero::before { display: none; }
  .page-home .home-hero .hero-art { object-position: 100% 50%; opacity: .26; }
  .trace-live, .motion-toggle { display: none; }
  .page-banner { min-height: 200px; }
  .page-banner::before { display: none; }
  .page-banner .hero-art { opacity: .2; }
  .page-banner .banner-gold { opacity: .4; }
  .banner-copy { padding: 48px 0 28px; }
  .hero-copy { order: 1; width: calc(100% - 40px); padding: 44px 0 36px; }
  .hero-title { font-size: clamp(46px, 12.5vw, 70px); }
  .hero-lede { font-size: 19px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 14px; }
  .student-feature, .work-row, .work-head, .intro-layout, .cta-strip, .cycle-layout, .contact-routes, .contact-address, .pi-feature, .theme-block { grid-template-columns: 1fr; }
  .student-feature { gap: 28px; }
  .intro-layout { gap: 28px; }
  .work-head { gap: 18px; }
  .theme-card { grid-template-columns: 1fr; }
  .theme-card .theme-icon { grid-row: auto; margin-bottom: 18px; width: 60px; height: 60px; }
  .theme-block-head { position: static; }
  .theme-block-head .theme-icon { width: 76px; height: 76px; margin-bottom: 18px; }
  .recent-list li { grid-template-columns: 1fr; gap: 6px; }
  .cycle-steps li { grid-template-columns: 1fr; gap: 2px; }
  .pi-feature .portrait { max-width: 280px; }
  .member-grid { grid-template-columns: 1fr; }
  .alumni-list li { grid-template-columns: 1fr; gap: 4px; }
  .contact-address address { grid-template-columns: 1fr; gap: 24px; }
  .publication-intro { padding: 36px 0 28px; }
  .publication-hero-layout { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
  .publication-hero-art { height: 190px; }
  .pub-year { grid-template-columns: 1fr; gap: 0; }
  .pub-year-label { position: static; padding: 22px 0 4px; }
  .publication-entry { grid-template-columns: 1fr; gap: 18px; padding: 18px 0 28px; }
  .paper-figure { max-width: 380px; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-base { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trace-live, .motion-toggle { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .page-banner .hero-media, .page-banner::before { display: none; }
  .site-header { position: static; }
  .band-dark, .site-footer { background: none; color: var(--green); }
}
.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; }
@media (max-width: 760px) {
  .student-feature img { order: 2; }
}