/* proto-paper.html: a researcher's homepage that reads as a paper below the fold.
   First screen: identity block + Figure 1 (the live room), as a split or with the room full-bleed
   behind a panel (?hero=split|overlay). Below: abstract, numbered sections, booktabs tables,
   references with BibTeX, an appendix. Day = warm paper; night (Santa Clara time or the toggle) = ink. */
@font-face { font-family: "Tiempos Text"; font-weight: 400; src: url("../assets/fonts/test-tiempos-text-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Text"; font-weight: 400; font-style: italic; src: url("../assets/fonts/test-tiempos-text-regular-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Text"; font-weight: 600; src: url("../assets/fonts/test-tiempos-text-semibold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Latin Modern Roman"; font-weight: 400; src: url("../fonts/lmroman10-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Latin Modern Roman"; font-weight: 700; src: url("../fonts/lmroman10-bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "LM Roman 17"; font-weight: 400; src: url("../fonts/lmroman17-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "LM Roman Demi"; font-weight: 400; src: url("../fonts/lmromandemi10-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Athletics"; font-weight: 400; src: url("../assets/fonts/Athletics-Regular-Trial.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Athletics"; font-weight: 500; src: url("../assets/fonts/Athletics-Medium-Trial.otf") format("opentype"); font-display: swap; }

:root {
  --bg: #f8f5ee;          /* paper */
  --ink: #1e1d1a;
  --ink-2: #47443c;
  --muted: #7f796c;
  --rule: #d9d2c2;
  --wash: #efeadf;
  --accent: #94620f;      /* Bayker's tabby gold: hover, focus */
  --room: #c3ccc4;        /* the figure before the room paints */
  --bubble-bg: #fbfaf5;
  --bubble-ink: #1b221e;
  --panel: rgba(248, 245, 238, .9);
  --serif: "Tiempos Text", Georgia, serif;
  /* display faces: the name in LM Roman 17, headings in LM Roman Demi */
  --disp: "LM Roman Demi", "Latin Modern Roman", Georgia, serif;
  --disp-name-family: "LM Roman 17", "Latin Modern Roman", Georgia, serif;
  --disp-name-w: 400; --disp-name-size: 56px; --disp-name-ls: .005em; --disp-name-lh: 1.08;
  --disp-h-w: 400; --disp-h-size: 27px; --disp-s-w: 400; --disp-s-size: 18px;
  --sans: "Athletics", ui-sans-serif, system-ui, sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
:root[data-time="night"] {
  --bg: #0f1117;
  --ink: #e8e6ef;
  --ink-2: #bdbccb;
  --muted: #858699;
  --rule: #2c2f3d;
  --wash: #181a24;
  --accent: #e9b65a;
  --room: #20253c;
  --bubble-bg: #f3f1ea;
  --bubble-ink: #1b1d26;
  --panel: rgba(15, 17, 23, .86);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s, color .6s;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* =========================================================== first screen */
.hero { position: relative; isolation: isolate; }

/* identity block */
.panel { position: relative; z-index: 2; }
.name { margin: 0; font: var(--disp-name-w) var(--disp-name-size)/var(--disp-name-lh) var(--disp-name-family); letter-spacing: var(--disp-name-ls); }
.role { margin: 12px 0 0; color: var(--ink-2); font-size: 17px; }
.bio { margin: 24px 0 0; font-size: 18px; line-height: 1.62; max-width: 32em; text-wrap: pretty; }
.interests { margin: 14px 0 0; color: var(--ink-2); font-size: 16px; }
.links { margin: 20px 0 0; font-size: 17px; }
.links .sep { color: var(--muted); }
.ln[aria-expanded="true"] { color: var(--accent); text-decoration-color: currentColor; }
.epigraph { margin: 40px 0 0 1.6em; padding: 0; }
.epigraph p { margin: 0; font: italic 400 17px/1.5 var(--serif); color: var(--muted); text-wrap: balance; }
.toggle { margin-top: 30px; font-size: 13px; color: var(--muted); }
.toggle button { color: var(--muted); }
.toggle button:hover { color: var(--accent); }
.toggle button[aria-pressed="true"] { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }

/* Figure 1 */
.fig { margin: 0; position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; }
.fig-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--room); border-radius: 6px; transition: background-color .6s; }
.scene { position: absolute; inset: 0; touch-action: none; outline: none; }
.scene canvas { display: block; }
/* Focus reached the figure by Tab (figure1.js sets data-kbd-focus; it fades once arrows steer): no hard outline, a soft inset hairline that follows the frame radius (click focus shows nothing). */
.fig-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .25s; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), inset 0 0 14px color-mix(in srgb, var(--ink) 10%, transparent); }
.fig[data-kbd-focus]:not([data-kbd-steer]) .fig-frame::after { opacity: 1; }
.fig-hint { transition: color .25s; }
.fig[data-kbd-focus] .fig-hint { color: var(--ink); }
.noscript-still { position: absolute; inset: 0; background: url("media/proto-3d-still.jpg") center / cover no-repeat; }
.fig-wipe { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; }
.fig-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; visibility: hidden; pointer-events: none;
  background: rgba(255, 255, 255, .95); box-shadow: 0 0 10px 1px rgba(255, 255, 255, .55);
}

.fig-cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px;
  padding: 10px 2px 0;
  font: 400 12.5px/1.5 var(--mono); color: var(--ink-2);
}
.fig-text { margin: 0; }
.fig-text b { font-weight: 500; color: var(--ink); }
/* The one figure control: RGB ↔ Segmentation (key S while the figure is hovered or focused). */
.fig-seg {
  padding: 2px 6px; margin-right: -6px; border-radius: 4px; color: var(--muted);
  font: 400 12.5px/1.5 var(--mono); transition: color .15s, background-color .15s;
}
.fig-seg:hover { color: var(--ink); }
.fig-seg[aria-pressed="true"] { color: var(--ink); background: var(--wash); }
.fig-seg kbd { font: inherit; font-size: 10.5px; color: var(--muted); margin-right: 6px; opacity: .7; }
@media (hover: none) { .fig-seg kbd { display: none; } }

/* Class legend (Segmentation) */
.fig-legend {
  position: absolute; z-index: 2; margin: 0; pointer-events: none;
  font: 400 11px/1.5 var(--mono); color: #eef1f4;
  background: rgba(12, 14, 20, .5); border-radius: 5px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fig-legend { display: none; left: 10px; bottom: 10px; padding: 8px 11px; list-style: none; max-width: calc(100% - 20px); }
.fig[data-view="seg"] .fig-legend { display: grid; }
.fig-legend { grid-template-columns: repeat(3, auto); gap: 1px 14px; font-size: 10.5px; }
.fig-legend li { display: flex; align-items: center; gap: 6px; }
.fig-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

/* ---- split: the room takes the headshot's place, right of the bio ---- */
[data-hero="split"] .hero {
  display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  height: 100vh; height: 100svh; min-height: 620px; max-height: 1100px;
  padding: 24px 24px 18px 0;
}
[data-hero="split"] .panel { align-self: center; justify-self: end; width: min(36rem, 100%); padding: 0 clamp(28px, 4.6vw, 76px) 0 clamp(24px, 4vw, 64px); }

/* ---- overlay: the room full-bleed, identity on a panel that reads like a plain page ---- */
[data-hero="overlay"] .hero { height: 100vh; height: 100svh; min-height: 600px; }
[data-hero="overlay"] .fig { position: absolute; inset: 0; }
[data-hero="overlay"] .fig-frame { position: absolute; inset: 0; border-radius: 0; }
[data-hero="overlay"] .panel {
  position: absolute; left: clamp(16px, 4vw, 64px); top: 50%; translate: 0 -50%;
  width: min(33rem, 44vw); padding: 38px 40px 30px;
  background: var(--panel); border-radius: 14px;
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 22px 60px -28px rgba(20, 18, 12, .55);
  transition: background-color .6s;
}
[data-hero="overlay"] .name { font-size: calc(var(--disp-name-size) - 4px); }
[data-hero="overlay"] .bio { font-size: 17px; }
[data-hero="overlay"] .fig-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 9px clamp(16px, 4vw, 64px) 10px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .6s;
}
[data-hero="overlay"] .fig-legend { left: auto; right: 16px; bottom: 74px; }

/* ---- speech bubbles (from prototype A) ---- */
.bubbles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bubble {
  position: absolute; left: 0; top: 0; margin: -14px 0 0;
  max-width: 15rem; padding: 7px 12px 8px;
  font: 400 14px/1.35 var(--sans); color: var(--bubble-ink);
  background: var(--bubble-bg); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 18px -8px rgba(20, 24, 22, .35);
  opacity: 0; transition: opacity .18s;
}
.bubble::after {
  content: ""; position: absolute; top: 100%; left: var(--tail, 50%);
  width: 10px; height: 7px; margin-left: -5px;
  background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.bubble.is-on { opacity: 1; }
.bubble--bayker { font-size: 13px; padding: 5px 10px 6px; }

/* ---- link preview cards (from prototype A; each in its service's own look, pixel avatar) ---- */
.card {
  position: absolute; z-index: 6; width: 300px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #0f1419; background: #fff; border-radius: 16px; line-height: 1.32;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 12px 32px -12px rgba(20, 24, 22, .45);
  opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s;
}
.card.is-on { opacity: 1; transform: none; }
.card[hidden] { display: none; }
.card p { margin: 0; }
.card img.px { image-rendering: pixelated; background: #cdd5cb; }
.is-todo { color: #8a5a12 !important; background: repeating-linear-gradient(-45deg, #fff6df 0 6px, #fdf0cf 6px 12px); border-radius: 4px; padding: 0 4px; font-style: italic; }
.card--x { padding: 16px; font-size: 15px; }
.card--x .top { display: flex; justify-content: space-between; align-items: flex-start; }
.card--x img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.card--x .follow { background: #0f1419; color: #fff; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 7px 16px; text-decoration: none; }
.card--x .nm { font-weight: 700; margin-top: 8px; }
.card--x .hd { color: #536471; }
.card--x .bio { margin-top: 12px; font-size: 15px; line-height: 1.32; }
.card--li { overflow: hidden; border-radius: 10px; font-size: 14px; line-height: 1.4; color: rgba(0, 0, 0, .9); }
.card--li .banner { height: 56px; background: linear-gradient(120deg, #a0b4b7, #c8d3d4); }
.card--li .body { padding: 0 16px 16px; }
.card--li img.av { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #fff; margin-top: -36px; object-fit: cover; display: block; }
.card--li .nm { font-weight: 600; font-size: 18px; margin-top: 8px; }
.card--li .loc { color: rgba(0, 0, 0, .6); font-size: 13px; margin-top: 2px; }
.card--li .co { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; font-size: 13px; }
.card--li .co img { width: 24px; height: 24px; object-fit: contain; }
.card--li .btn { display: inline-block; margin-top: 12px; background: #0a66c2; color: #fff; font-weight: 600; border-radius: 999px; padding: 5px 16px; text-decoration: none; }
.card--gs { width: 340px; border-radius: 8px; padding: 14px 16px; font-family: Arial, sans-serif; font-size: 13px; color: #222; }
.card--gs .top { display: flex; gap: 12px; }
.card--gs img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.card--gs .nm { font-size: 20px; line-height: 1.2; }
.card--gs .aff { color: #222; margin-top: 3px; }
.card--gs .ints { margin-top: 3px; }
.card--gs .ints span { color: #1a0dab; }
.card--gs .ints span + span::before { content: ", "; color: #222; }
.card--gs table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.card--gs th { text-align: right; font-weight: normal; color: #777; padding: 4px 6px; border-bottom: 1px solid #ddd; }
.card--gs th:first-child, .card--gs td:first-child { text-align: left; }
.card--gs td { text-align: right; padding: 5px 6px; border-bottom: 1px solid #eee; }
.card--gs td:first-child { color: #1a0dab; }
.card--gs .asof { color: #777; font-size: 11px; margin-top: 8px; }
.card--mail { padding: 14px 16px; font-size: 14px; border-radius: 12px; width: auto; min-width: 240px; }
.card--mail .addr { font-weight: 600; }
.card--mail .hint { color: #5f6368; margin-top: 2px; }
.card--mail .hint-done { display: none; color: #137333; margin-top: 2px; }
.card--mail.is-copied .hint { display: none; }
.card--mail.is-copied .hint-done { display: block; }

/* =========================================================== the paper */
.paper {
  display: grid; grid-template-columns: minmax(0, 40rem); justify-content: center;
  padding: 104px 24px 140px;
}
.body { min-width: 0; }

.abstract { max-width: 35rem; margin: 0 auto; }
.abstract h2 { margin: 0 0 12px; text-align: center; font: var(--disp-s-w) var(--disp-s-size)/1.4 var(--disp); }
.abstract p { margin: 0 0 .7em; font: italic 400 17.5px/1.62 var(--serif); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

.sec { margin-top: 76px; scroll-margin-top: 32px; }
.abstract { scroll-margin-top: 32px; }
.sec h2 { margin: 0 0 18px; font: var(--disp-h-w) var(--disp-h-size)/1.25 var(--disp); display: flex; }
.sec h2 .n { width: 1.75em; flex: none; color: var(--muted); font-weight: 400; }
.sec > p { margin: 0 0 1.05em; color: var(--ink-2); text-wrap: pretty; hanging-punctuation: first; }

/* booktabs tables */
.bt { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.bt caption { caption-side: top; text-align: left; padding: 0 0 8px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-2); }
.bt caption b { font-weight: 500; color: var(--ink); }
.bt thead th { font-weight: 500; text-align: left; padding: 7px 14px 6px 0; border-bottom: .75px solid var(--ink); white-space: nowrap; }
.bt tbody th, .bt td { text-align: left; vertical-align: top; padding: 9px 14px 2px 0; font-weight: 400; }
.bt tbody th { font-weight: 500; }
.bt tbody tr:first-child > * { padding-top: 10px; }
.bt tbody tr:last-child > * { padding-bottom: 10px; }
.bt .num { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bt th:last-child, .bt td:last-child { padding-right: 0; }
.bt .note { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.bt .desc td { padding-top: 0; padding-bottom: 8px; color: var(--muted); font-size: 14.5px; }
.bt-svc td.num { color: var(--ink-2); }

/* references */
.refs-sec { position: relative; }
.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.ref { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); scroll-margin-top: 80px; border-radius: 6px; }
.ref.is-target { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 16%, transparent); } to { background: transparent; } }
.ref-n { font: 400 15.5px/1.5 var(--serif); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 4px; }
.cite { margin: 0; }
.ref-title { margin: 0; font: var(--disp-h-w) 20px/1.28 var(--disp); letter-spacing: .002em; color: var(--ink); text-wrap: pretty; }
.ref-title a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .2s, color .15s; }
.ref-title a:hover { color: var(--accent); background-size: 100% 1px; }
.ref-authors { margin: 4px 0 0; font: 400 14.5px/1.5 var(--serif); color: var(--muted); }
.ref-authors b { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.ref-venue { align-self: center; padding: 0 7px; font: 400 11.5px/1.7 var(--mono); letter-spacing: .02em; color: var(--ink-2); border: 1px solid var(--rule, color-mix(in srgb, var(--ink) 22%, transparent)); border-radius: 4px; white-space: nowrap; }
.ref-links { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font: 400 12.5px/1.6 var(--mono); }
.ref-venue + * { margin-left: -2px; }
.ref-links a, .ref-links button { color: var(--muted); text-decoration: none; }
.ref-links a:hover, .ref-links button:hover { color: var(--accent); }
.ref-bib.is-copied { color: var(--accent); }
.ref-more::after { content: " +"; }
.ref-more[aria-expanded="true"]::after { content: " −"; }
.teaser-slot { display: none; }
.ref.is-open .teaser-slot { display: block; margin-top: 12px; }
.teaser-slot img, .teaser-slot video { display: block; width: 100%; max-width: 34rem; height: auto; border-radius: 6px; background: var(--wash); }
.sec h2 .refs-note { margin: auto 0 .2em auto; padding-left: 1em; font: 400 13px/1.4 var(--serif); letter-spacing: 0; color: var(--muted); }
.preview {
  position: absolute; top: 0; left: calc(100% + 48px); width: min(300px, calc((100vw - 40rem) / 2 - 104px));
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; z-index: 5;
}
.preview.on { opacity: 1; transform: none; }
.preview img, .preview video {
  display: block; width: 100%; height: auto; object-fit: cover; border-radius: 6px; background: var(--wash);
  box-shadow: 0 0 0 1px var(--rule), 0 12px 32px -14px rgba(30, 25, 15, .35);
}
@media (max-width: 1239px) { .preview { position: fixed; left: 0; top: 0; width: 240px; transform: none; transition: opacity .15s; } }
@media (hover: none) { .preview { display: none; } }

/* appendix */
.appendix > p { color: var(--ink-2); }
.pixel-cat { display: inline-block; vertical-align: -6px; margin: -8px 2px -4px; }
.pixel-cat canvas { width: 28px; height: 28px; image-rendering: pixelated; display: block; }
.gallery { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gallery li { aspect-ratio: 1; }
.gallery button { display: block; width: 100%; height: 100%; border-radius: 5px; overflow: hidden; background: var(--wash); }
.gallery img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s, transform .4s; display: block; }
.gallery img.ready { opacity: 1; }
.gallery button:hover img { transform: scale(1.04); }
.gallery-more a { display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; border-radius: 5px; border: 1px dashed var(--rule); color: var(--muted); font-size: 11.5px; line-height: 1.35; text-align: center; text-decoration: none; }
.gallery-more a:hover { color: var(--ink); border-color: var(--muted); }
.sec > .fig-note { margin: 12px 0 0; font: 400 12.5px/1.5 var(--mono); color: var(--ink-2); }
.fig-note b { font-weight: 500; color: var(--ink); }

.lightbox { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: #f2f0ea; overflow: hidden; }
.lightbox::backdrop { background: rgba(14, 13, 11, .92); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox:focus { outline: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.lightbox img { max-width: min(92vw, 1100px); max-height: calc(100dvh - 120px); width: auto; height: auto; border-radius: 4px; }
.lightbox figcaption { font: 400 11.5px var(--mono); color: #a6a39b; }
.lb-btn { position: fixed; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 26px; line-height: 1; color: #d8d5cd; transition: background-color .15s; }
.lb-btn:hover { background: rgba(255, 255, 255, .1); }
.lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb-next { right: 16px; top: 50%; translate: 0 -50%; }
.lb-close { right: 16px; top: 16px; font-size: 24px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; translate: -50% 8px; z-index: 50;
  padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s;
}
.toast.show { opacity: 1; translate: -50% 0; }


/* =========================================================== narrower */
@media (max-width: 1099px) {
  .paper { padding-top: 80px; }
}
@media (max-width: 900px) and (min-width: 721px) {
  [data-hero="split"] .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .name { font-size: calc(var(--disp-name-size) - 6px); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .name { font-size: calc(var(--disp-name-size) - 10px); }
  .role { font-size: 15.5px; margin-top: 8px; }
  .bio { font-size: 16px; margin-top: 18px; }
  .interests { font-size: 15px; }
  .links { font-size: 16px; margin-top: 16px; }
  .epigraph { margin-top: 28px; }
  .epigraph p { font-size: 16px; }
  .toggle { margin-top: 22px; }
  .card { width: min(300px, calc(100% - 24px)); }
  .card--gs { width: min(340px, calc(100% - 24px)); }
  .fig-cap { padding: 8px 16px 0; font-size: 11.5px; }
  .fig-seg { font-size: 11.5px; padding: 2px 5px; margin-right: -5px; }
  .fig-legend { grid-template-columns: repeat(3, auto); gap: 0 10px; font-size: 9.5px; padding: 6px 8px; }

  [data-hero="split"] .hero { display: block; height: auto; min-height: 0; max-height: none; padding: 0; }
  [data-hero="split"] .panel { width: auto; padding: 56px 20px 36px; }
  [data-hero="split"] .fig { height: min(68svh, 580px); }
  [data-hero="split"] .fig-frame { border-radius: 0; }

  [data-hero="overlay"] .panel { left: 0; right: 0; top: 0; translate: none; width: auto; padding: 44px 18px 18px; border-radius: 0 0 14px 14px; }
  [data-hero="overlay"] .name { font-size: calc(var(--disp-name-size) - 16px); }
  [data-hero="overlay"] .bio { font-size: 15px; margin-top: 12px; line-height: 1.55; }
  [data-hero="overlay"] .role { font-size: 14.5px; margin-top: 6px; }
  [data-hero="overlay"] .interests { font-size: 14px; margin-top: 8px; }
  [data-hero="overlay"] .links { font-size: 15px; margin-top: 10px; }
  [data-hero="overlay"] .epigraph { margin-top: 12px; }
  [data-hero="overlay"] .epigraph p { font-size: 14.5px; }
  [data-hero="overlay"] .toggle { position: absolute; top: 12px; right: 18px; margin: 0; }
  [data-hero="overlay"] .fig-cap { padding: 7px 16px 9px; }
  [data-hero="overlay"] .fig-legend { left: 10px; right: auto; bottom: 92px; }

  .paper { padding: 64px 20px 110px; }
  .sec { margin-top: 60px; }
  .sec h2 { font-size: calc(var(--disp-h-size) - 2px); }
  .abstract p { font-size: 16.5px; text-align: left; }
  .bt { font-size: 14.5px; }
  .bt thead { display: none; }
  .bt tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 9px 0 0; }
  .bt tbody tr > * { padding: 0 !important; }
  .bt tbody tr.desc { padding: 2px 0 10px; border-bottom: .75px solid var(--rule); }
  .bt tbody tr.desc:last-child { border-bottom: 0; }
  .bt-exp tbody tr:not(.desc) td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--ink-2); }
  .bt-exp tbody tr:not(.desc) td:nth-child(3) { display: none; }
  .bt-exp tbody tr:not(.desc) td.num { grid-column: 2; grid-row: 1; font-size: 13px; }
  .bt-exp .desc td { grid-column: 1 / -1; }
  .bt-edu tbody tr { padding-bottom: 9px; }
  .bt-edu td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--ink-2); }
  .bt-edu td.num { grid-column: 2; grid-row: 1; font-size: 13px; }
  .bt-svc tbody tr { padding-bottom: 4px; }
  .bt-svc tbody tr:last-child { padding-bottom: 9px; }
  .ref { grid-template-columns: 2.4em minmax(0, 1fr); }
  .ref-title { font-size: 18.5px; }
  .ref-authors { font-size: 14px; }
  .sec h2 .refs-note { display: none; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  body, .fig-frame, .card, .bubble, .preview, .toast, .gallery img, [data-hero="overlay"] .panel { transition: none; }
  .fig-frame::after, .fig-hint { transition: none; }
  .ref.is-target { animation: none; }
}