:root {
  --accent: #FF5A47;
  --accent-dark: #C2331F;
  --bg: #0B0C0E;
  --bg-alt: #121417;
  --surface: #15171A;
  --surface-2: #1A1D21;
  --line: #23262B;
  --line-2: #2E3238;
  --line-3: #3A3E45;
  --ink: #F2EFE8;
  --ink-2: #E4E1DA;
  --ink-3: #C9CBCF;
  --muted: #A3A7AE;
  --dim: #5B6068;
  --blue: #6FA8FF;
  --yellow: #F2C14E;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(56px, 7vw, 96px);
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}
a { color: var(--ink); }
a:hover { color: var(--accent); }
img { max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }

/* ---------- layout ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.band { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* ---------- header ---------- */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 22px; padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }
.brand-logo { width: 28px; height: auto; display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: 24px; font-family: var(--mono); font-size: 13px; }
.site-nav a { text-decoration: none; }

/* ---------- banner ----------
   The 2.5:1 triptych fitted to the width, flush at the top; the title block follows below it.
   Intro state (.banner.intro, before the first scroll): .banner-screen fills the first screen, with
   a scroll hint below the image, so the title starts below the fold. main.js drops .intro on the
   first scroll and the screen collapses back to the plain layout.
   main.js also sets --shade (0..1) on .banner as the image scrolls out of view. */
.banner { position: relative; --shade: 0; }
.banner-screen { display: flex; flex-direction: column; min-height: 0; transition: min-height 1.2s cubic-bezier(0.25, 0.6, 0.2, 1); }
.banner-media { position: relative; flex: none; aspect-ratio: 5 / 2; overflow: hidden; }
.banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scroll-hint {
  flex: 1 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  overflow: hidden; opacity: 0; transition: opacity 0.6s ease;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--muted); text-decoration: none;
}
.scroll-hint:hover { color: var(--ink); }
.scroll-hint svg { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
@media (min-aspect-ratio: 1/1) {
  /* Only on landscape screens: on portrait ones the strip is short and an intro screen would be mostly empty */
  .js .banner.intro .banner-screen { min-height: 100vh; min-height: 100svh; }
  .js .banner.intro .scroll-hint { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-screen { transition: none; }
  .scroll-hint svg { animation: none; }
}
.banner-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(11, 12, 14, 0.55), rgba(11, 12, 14, 0) 22%),
    linear-gradient(to bottom, rgba(11, 12, 14, calc(var(--shade) * 0.45)), rgba(11, 12, 14, calc(0.15 + var(--shade) * 0.8)));
}
.banner .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; border-bottom: 0; }
.banner .site-nav a, .banner .brand { color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.banner-content { padding-top: clamp(32px, 5vh, 56px); padding-bottom: clamp(48px, 8vh, 96px); }

.hero-text { max-width: 1100px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--accent); }
.hero h1 { font-size: clamp(42px, 6.2vw, 86px); line-height: 0.98; font-weight: 760; font-stretch: 112%; letter-spacing: -0.025em; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--line-3); text-decoration: none; font-weight: 600;
}
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.is-tbd { color: var(--muted); border-style: dashed; cursor: default; }
.tbd { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); }

/* ---------- authors ---------- */
.hero-authors { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.author-list { font-size: 18px; line-height: 1.7; color: var(--ink-3); }
.author-list > span { white-space: nowrap; }
.author-list sup { color: var(--muted); }
.affiliations { font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--muted); }
.affiliations span { margin-right: 1.5em; white-space: nowrap; }

/* ---------- thesis band ----------
   Dark band: heading + text in the left column (--thesis-col). The simulation image fills the
   right ~52% of the band, darkened, and fades into the band on its left edge.
   On narrow screens the image sits under the text instead. */
.thesis {
  --thesis-col: 560px;
  position: relative; overflow: hidden;
  background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.thesis-bg {
  position: absolute; top: 0; right: 0; width: 52%; height: 100%;
  object-fit: cover; object-position: 55% 50%;
  filter: brightness(0.72) saturate(1.15);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%);
  mask-image: linear-gradient(to right, transparent 0%, #000 32%);
}
.thesis .wrap {
  position: relative; display: flex; flex-direction: column; gap: 24px;
  padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px);
}
.thesis .wrap > * { max-width: var(--thesis-col); }
.thesis-head { display: flex; flex-direction: column; gap: 14px; }
.thesis-kicker { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; color: var(--accent); }
.thesis h2 { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.05; font-weight: 780; font-stretch: 108%; letter-spacing: -0.025em; }
.thesis h2 .line { display: block; }
.thesis h2 .line + .line { padding-left: 1.2em; }
.thesis h2 em { font-style: normal; color: var(--accent); }
.thesis p { font-size: 18px; line-height: 1.6; color: var(--muted); padding-left: 20px; border-left: 2px solid var(--line-3); }
.thesis p strong { color: var(--accent); font-weight: 750; }
.thesis p strong.ink { color: var(--ink); }
@media (max-width: 1000px) {
  .thesis-bg {
    position: static; display: block; width: 100%; height: auto; aspect-ratio: 2.75 / 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
  }
  .thesis { display: flex; flex-direction: column-reverse; }
  .thesis h2 .line { white-space: normal; }
  .thesis h2 .line + .line { padding-left: 0; }
}

/* ---------- section headings ---------- */
.sec-head { display: flex; flex-direction: column; gap: 10px; }
.sec-head > p { text-wrap: balance; }
.sec-head-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sec-head-split > p { max-width: 460px; color: var(--muted); }
.eyebrow { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.sec-title { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; font-weight: 720; font-stretch: 106%; }
.sec-title.sm { font-size: clamp(30px, 3.6vw, 44px); }

/* ---------- bibtex ---------- */
#bibtex { gap: 20px; }
.bib {
  margin: 0; padding: 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--ink-2); white-space: pre;
}

/* ---------- prior work ----------
   Link cards in one row (stacked on phones); images are cropped to the same 16:9 frame so the cards line up. */
.prior-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .prior-grid { grid-template-columns: 1fr; } }
.prior {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-alt); text-decoration: none; color: var(--ink);
  transition: border-color 0.2s ease;
}
.prior:hover { border-color: var(--accent); color: var(--ink); }
.prior img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.prior-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.prior-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); }
.prior h3 { font-size: 17px; line-height: 1.3; font-weight: 650; }
.prior h3::after { content: " \2197"; color: var(--muted); font-weight: 400; }
.prior p { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap {
  padding-top: 32px; padding-bottom: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}

/* ---------- top nav (all pages) ----------
   Sticky on subpages. On the overview (.topnav.autohide) it stays hidden until the banner has
   scrolled past; main.js toggles .is-shown. */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 12, 14, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topnav.autohide { position: fixed; left: 0; right: 0; transform: translateY(-100%); transition: transform 0.35s ease; }
.topnav.autohide.is-shown { transform: none; }
.topnav-inner { display: flex; align-items: center; gap: 28px; min-height: 60px; }
.topnav .brand { text-decoration: none; color: var(--ink); flex: none; }
.topnav-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; font-size: 15px; }
.topnav-links::-webkit-scrollbar { display: none; }
.topnav-links a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
  color: var(--ink-3); text-decoration: none; white-space: nowrap;
}
.topnav-links a:hover { color: var(--ink); background: var(--surface-2); }
.topnav-links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
@media (max-width: 640px) { .topnav .brand span { display: none; } .topnav-inner { gap: 12px; } }

/* ---------- media slots ----------
   <div class="slot" data-video="path.mp4"> or data-image="path.jpg". Until the file exists the
   slot shows a dashed placeholder naming the expected path; main.js swaps in the media once it loads. */
.slot {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px dashed var(--line-3);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.slot.square { aspect-ratio: 1 / 1; }
.slot.tall { aspect-ratio: 4 / 3; }
.slot-label { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--dim); padding: 16px; word-break: break-all; }
.slot-label b { display: block; color: var(--muted); font-weight: 500; letter-spacing: 0.08em; margin-bottom: 4px; }
.slot > video, .slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.slot.has-media { border-style: solid; border-color: var(--line); }
.slot.has-media .slot-label { display: none; }
/* images keep their own proportions once loaded */
.slot.fit.has-media { aspect-ratio: auto; display: block; }
.slot.fit.has-media > img { position: static; height: auto; object-fit: contain; }

.media-card { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.media-card h3 { font-size: 19px; font-weight: 650; }
.media-card p, .media-card figcaption { color: var(--muted); font-size: 15px; }
.media-card .tag { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.06em; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 36px 24px; }
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- tabs ---------- */
.tablist { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: 600 15px var(--sans); color: var(--ink-3); background: transparent; border: 1px solid var(--line-3);
}
.tab:hover { color: var(--ink); border-color: var(--muted); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tabpanel { display: flex; flex-direction: column; gap: 14px; }
.tabpanel[hidden] { display: none; }

/* ---------- subpages ---------- */
.page-head { padding-top: clamp(48px, 7vw, 88px); padding-bottom: 8px; display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.page-head h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; font-weight: 760; font-stretch: 110%; letter-spacing: -0.02em; }
.page-head p { font-size: 18px; color: var(--muted); }
.subsection { padding-top: clamp(40px, 5vw, 64px); display: flex; flex-direction: column; gap: 24px; }
.subsection + .subsection { border-top: 1px solid var(--line); margin-top: clamp(40px, 5vw, 64px); }
.subsection > p { color: var(--muted); text-wrap: balance; }
/* Bottom pager: previous / next subpage */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px);
}
.pager a {
  display: flex; flex-direction: column; gap: 6px; padding: 24px 28px; border-radius: 16px; border: 1px solid var(--line);
  text-decoration: none; background: var(--bg-alt);
}
.pager a:hover { border-color: var(--line-3); color: var(--ink); }
.pager .pager-next { text-align: right; align-items: flex-end; }
.pager span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.pager strong { font-size: clamp(20px, 2.6vw, 32px); font-weight: 720; font-stretch: 106%; }
@media (max-width: 520px) { .pager { grid-template-columns: 1fr; } }

/* Side arrows: fixed at the window edges, page name slides out on hover. Wide screens only. */
.side-arrow {
  position: fixed; top: 50%; z-index: 40; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line-3); background: rgba(21, 23, 26, 0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink-3); text-decoration: none; font-size: 14px; font-weight: 600;
}
.side-arrow.prev { left: 8px; }
.side-arrow.next { right: 8px; }
.side-arrow:hover, .side-arrow:focus-visible { color: var(--ink); border-color: var(--muted); }
.side-label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.3s ease; }
.side-arrow:hover .side-label, .side-arrow:focus-visible .side-label { max-width: 220px; }
@media (max-width: 1100px) { .side-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .side-label { transition: none; } }

/* ---------- overview: chapter buttons ----------
   Four big image buttons in a row (2x2 on tablets, stacked on phones). The still fills the tile;
   number + title sit on a dark gradient at the bottom. */
.chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.chapter {
  position: relative; display: block; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.chapter .slot { aspect-ratio: 3 / 4; border: 0; border-radius: 0; align-items: flex-start; }
.chapter .slot > img { transition: transform 0.5s ease; }
.chapter-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 20px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(to top, rgba(11, 12, 14, 0.92), rgba(11, 12, 14, 0.6) 55%, rgba(11, 12, 14, 0));
}
.chapter-num { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.chapter h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.1; font-weight: 720; font-stretch: 106%; }
.chapter h3::after { content: " →"; color: var(--accent); }
.chapter:hover, .chapter:focus-visible { border-color: var(--accent); color: var(--ink); transform: translateY(-3px); }
.chapter:hover .slot > img, .chapter:focus-visible .slot > img { transform: scale(1.04); }
@media (max-width: 900px) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .chapters { grid-template-columns: 1fr; }
  .chapter .slot { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter, .chapter .slot > img { transition: none; }
  .chapter:hover, .chapter:focus-visible { transform: none; }
  .chapter:hover .slot > img, .chapter:focus-visible .slot > img { transform: none; }
}

/* ---------- click-to-play player (video with sound) ---------- */
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.player video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer; background: rgba(11, 12, 14, 0.25); color: var(--bg);
  transition: background 0.2s ease;
}
.play-overlay span {
  width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); padding-left: 6px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease;
}
.play-overlay:hover { background: rgba(11, 12, 14, 0.1); }
.play-overlay:hover span, .play-overlay:focus-visible span { transform: scale(1.08); }
.player.is-playing .play-overlay { display: none; }
@media (prefers-reduced-motion: reduce) { .play-overlay span { transition: none; } }