/* Adapted to the supplied semantic-wm template's type, palette, and layout. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/CormorantGaramond-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
}

:root {
  --bg: #f5f2ea;
  --paper: #fffdf8;
  --ink: #2b302b;
  --muted: #6c7068;
  --line: rgba(58, 66, 52, .14);
  --accent: #4c6257;
  --hover: #2d493b;
  --shadow: 0 18px 50px rgba(55, 59, 45, .06);
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 106px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--hover); }
a:focus-visible, input:focus-visible, video:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 20; padding: 8px 16px; background: var(--paper); }
.skip-link:focus { top: 8px; }

.section-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 28px -22px 42px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(239, 235, 225, .94);
  backdrop-filter: blur(14px);
}
.section-nav-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; padding: 12px 18px; }
.section-nav a { border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; color: var(--muted); font-size: .86rem; font-weight: 800; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.section-nav a:hover, .section-nav a.active { color: var(--accent); background: rgba(76,98,87,.12); border-color: rgba(76,98,87,.16); }

main, footer { max-width: 1180px; padding: 0 22px; margin: auto; }
.paper-header { padding: 78px 0 56px; text-align: center; }
h1 { margin: 0 auto 20px; max-width: 1080px; color: var(--accent); font: 600 clamp(3rem,8vw,6.2rem)/.94 var(--display); letter-spacing: -.04em; }
.paper-subtitle { max-width: 980px; margin: 0 auto 28px; color: var(--muted); font: 400 clamp(1.8rem,4vw,3.1rem)/1.05 var(--display); }
.authors { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; max-width: 940px; margin: 7px auto; padding: 0; list-style: none; color: var(--ink); font-size: 17px; font-weight: 400; }
sup { margin-left: 2px; font-size: .68em; line-height: 0; vertical-align: super; color: var(--muted); }
.author-link { color: var(--ink); text-decoration: none; }
.author-link:hover { color: var(--accent); text-decoration: underline; }
.affiliations { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; max-width: 940px; margin: 7px auto; color: var(--muted); font-size: .9rem; }
.affiliations sup { margin-right: 3px; margin-left: 0; }
.paper-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.paper-links a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: 1px solid var(--accent); border-radius: 999px; color: var(--ink); background: transparent; font-size: .95rem; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.paper-links a:first-child { background: var(--accent); color: #fff; }
.paper-links a:hover { transform: translateY(-2px); background: rgba(76,98,87,.08); }
.paper-links a:first-child:hover { background: var(--hover); }
.paper-links svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

figure { margin: 0; }
img { display: block; max-width: 100%; width: 100%; height: auto; }
.promo-video-section { max-width: 940px; margin: -18px auto 36px; }
.teaser video, .teaser > img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); background: var(--paper); }
.teaser [hidden] { display: none; }
figcaption { max-width: 820px; margin: 14px auto 22px; color: var(--muted); font-size: .9rem; line-height: 1.55; text-align: center; }

main > section:not(.paper-header):not(.promo-video-section) { margin: 0 auto 56px; }
h2 { max-width: 920px; margin: 0 auto 22px; color: var(--accent); font: 600 clamp(2.2rem,4vw,3.4rem)/1.05 var(--display); letter-spacing: -.03em; text-align: center; }
h2::after { content: ""; display: block; width: 86px; height: 2px; margin: 18px auto 0; background: var(--accent); }
h3 { margin: 34px 0 18px; color: var(--accent); font: 600 clamp(1.8rem,3vw,2.4rem)/1.15 var(--display); text-align: center; }
.content-card { max-width: 1060px; margin: 0 auto; padding: 28px clamp(20px,4vw,40px); background: rgba(255,253,248,.9); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
p { max-width: 880px; margin: 0 auto 24px; color: #3c423b; }
.content-card > p:last-child, .prose > p:last-child { margin-bottom: 0; }
.smallcaps { font-variant: small-caps; }
strong { font-weight: 700; }
.method-figure { max-width: 940px; margin: 24px auto 10px; }
.method-figure img { padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }

.demo { max-width: 940px; margin: 24px auto 0; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.demo-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.demo-panes #crop { width: 75%; margin-inline: auto; }
.demo-panes figcaption { margin: 10px auto 0; font-size: .85rem; }
.canvas { position: relative; overflow: hidden; border-radius: 10px; }
#window { position: absolute; top: 33.333333%; width: 35%; height: 46.666667%; border: 3px solid var(--accent); box-shadow: 0 0 0 100vmax #2b302b30; clip-path: inset(-100%); }
#crop { display: block; width: 100%; height: auto; border-radius: 10px; }
.demo-controls { max-width: 560px; margin: 22px auto 0; }
label { display: block; color: var(--ink); font-size: .9rem; font-weight: 600; }
input[type=range] { display: block; width: 100%; margin: 12px 0 18px; accent-color: var(--accent); }
output { display: block; color: var(--accent); font: 14px/1.6 "SFMono-Regular", Consolas, monospace; }
.note { margin: 8px 0 0; color: var(--muted); font-size: .85rem; }

pre { max-width: 940px; padding: 20px 24px; margin: 20px auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow-x: auto; font: 13px/1.8 "SFMono-Regular", Consolas, monospace; tab-size: 2; }
#citation .content-card { background: #eeece4; }
#citation pre { margin-top: 0; margin-bottom: 0; }
footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }

@media (max-width: 720px) {
  .paper-header { padding-top: 50px; padding-bottom: 46px; }
  .authors { font-size: 16px; gap: 6px 14px; }
  body { font-size: 16px; }
  .content-card { padding: 24px 20px; }
  .demo { padding: 18px; }
  .demo-panes { gap: 18px; }
  .section-nav a { padding: 6px 10px; font-size: 13px; }
}
@media (max-width: 460px) {
  .section-nav { margin-left: -16px; margin-right: -16px; }
  .section-nav-inner { gap: 4px 6px; padding: 8px 12px; }
  .section-nav a { padding: 5px 8px; font-size: 12px; }
  main, footer { padding-left: 16px; padding-right: 16px; }
  .paper-header { padding-top: 38px; }
  h1 { font-size: 3.5rem; }
  .paper-subtitle { font-size: 1.9rem; }
  .affiliations { font-size: 13px; }
  .paper-links a { padding: 9px 15px; font-size: 14px; }
  .teaser video, .teaser > img { border-radius: 16px; }
  .content-card { padding: 22px 16px; border-radius: 18px; }
  .demo-panes { grid-template-columns: 1fr; gap: 20px; }
  pre { padding: 16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .paper-links a { transition: none; }
  .paper-links a:hover { transform: none; }
}
@media print {
  body { padding-top: 0; background: #fff; }
  .section-nav, .skip-link { display: none; }
  .paper-header { padding-top: 0; }
  .content-card { box-shadow: none; }
}

.visa-example { max-width: 940px; margin: 28px auto; }
.visa-question { text-align: center; color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.visa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.visa-grid h3 { margin: 0 0 12px; color: var(--ink); font: 600 15px/1.4 var(--body); }
.visa-grid img { aspect-ratio: 4 / 3; object-fit: contain; border-radius: 12px; }
.visa-grid figcaption { margin-bottom: 0; font-size: .85rem; }
.no-evidence { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 16px; border: 1px dashed #b5b7ae; border-radius: 12px; background: #f2f1eb; color: var(--muted); text-align: center; font-size: .85rem; }
@media (max-width: 600px) {
  .visa-grid { grid-template-columns: 1fr; gap: 28px; max-width: 360px; margin-inline: auto; }
}

.results-scroll { max-width: 100%; overflow-x: auto; margin: 26px auto 12px; }
.results-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.results-table { width: 100%; min-width: 820px; border-collapse: collapse; color: var(--ink); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.results-table caption { padding: 0 0 16px; color: var(--ink); font-size: 16px; font-weight: 600; text-align: left; }
.results-table th, .results-table td { padding: 10px 9px; text-align: center; white-space: nowrap; }
.results-table thead { border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line); }
.results-table thead th { font-weight: 600; }
.results-table tbody th { text-align: left; font-weight: 400; }
.results-table tbody tr { border-bottom: 1px solid var(--line); }
.results-table tbody tr:last-child { border-bottom: 2px solid var(--accent); }
.results-table .model-group { border-top: 2px solid var(--line); }
.results-table strong { font-weight: 700; }
.results-note { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.notebook-list { max-width: 880px; margin: 24px auto; padding-left: 24px; }
.notebook-list li { padding-left: 6px; margin-bottom: 20px; }
.notebook-list a { font-weight: 600; }
.notebook-list p { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }