/* ------------------------------------------------------------------
   Theme tokens. Light is the default; dark applies when the system
   prefers it (unless the visitor picked light) or when picked explicitly.
   ------------------------------------------------------------------ */
:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --text: #1c1d1f;
  --muted: #5d6066;
  --faint: #868a91;
  --border: #e6e3db;
  --accent: #1f5fae;
  --accent-soft: #e8f0fa;
  --on-accent: #ffffff;
  --mark: #f8e1a6;
  --status: #1a7f37;
  --thumb-bg: #ffffff;
  --thumb-filter: none;
  --code-bg: #f4f2ed;
  --header-bg: rgba(251, 250, 247, 0.94);
  --sun-display: none;
  --moon-display: block;
  --panel-bg: #fbfaf7;
  --panel-border: rgba(255, 255, 255, 0.7);
  --panel-shadow: 0 24px 64px rgba(40, 60, 80, 0.12);
  /* Backdrop: an overcast winter day */
  --scene-sky-top: #a7c1d7;
  --scene-sky-bottom: #efe3c9;
  --scene-glow: rgba(255, 243, 214, 0.85);
  --scene-far: #b0bfcd;
  --scene-far-snow: #eef3f7;
  --scene-mid: #8899ac;
  --scene-mid-snow: #f4f7fa;
  --scene-mist: rgba(255, 255, 255, 0.6);
  --scene-snow: rgba(255, 255, 255, 0.95);
  --scene-moon: 0.35;
  --scene-aurora: none;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1114;
    --surface: #161a1f;
    --text: #e8e7e4;
    --muted: #a6aab0;
    --faint: #80858d;
    --border: #272b32;
    --accent: #8ab4f8;
    --accent-soft: rgba(138, 180, 248, 0.12);
    --on-accent: #0f1114;
    --mark: rgba(232, 182, 84, 0.3);
    --status: #4ac26b;
    --thumb-bg: #ffffff;
    --thumb-filter: brightness(0.88);
    --code-bg: #1b1f25;
    --header-bg: rgba(15, 17, 20, 0.92);
    --sun-display: block;
    --moon-display: none;
    --panel-bg: #0f1114;
    --panel-border: rgba(255, 255, 255, 0.06);
    --panel-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    /* Backdrop: a clear night with the aurora out */
    --scene-sky-top: #050912;
    --scene-sky-bottom: #11253b;
    --scene-glow: rgba(150, 175, 230, 0.1);
    --scene-far: #18263a;
    --scene-far-snow: #3b4d63;
    --scene-mid: #121e2e;
    --scene-mid-snow: #53667d;
    --scene-mist: rgba(170, 190, 220, 0.07);
    --scene-snow: rgba(235, 242, 255, 0.9);
    --scene-moon: 0.92;
    --scene-aurora: block;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0f1114;
  --surface: #161a1f;
  --text: #e8e7e4;
  --muted: #a6aab0;
  --faint: #80858d;
  --border: #272b32;
  --accent: #8ab4f8;
  --accent-soft: rgba(138, 180, 248, 0.12);
  --on-accent: #0f1114;
  --mark: rgba(232, 182, 84, 0.3);
  --status: #4ac26b;
  --thumb-bg: #ffffff;
  --thumb-filter: brightness(0.88);
  --code-bg: #1b1f25;
  --header-bg: rgba(15, 17, 20, 0.92);
  --sun-display: block;
  --moon-display: none;
  --panel-bg: #0f1114;
  --panel-border: rgba(255, 255, 255, 0.06);
  --panel-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  --scene-sky-top: #050912;
  --scene-sky-bottom: #11253b;
  --scene-glow: rgba(150, 175, 230, 0.1);
  --scene-far: #18263a;
  --scene-far-snow: #3b4d63;
  --scene-mid: #121e2e;
  --scene-mid-snow: #53667d;
  --scene-mist: rgba(170, 190, 220, 0.07);
  --scene-snow: rgba(235, 242, 255, 0.9);
  --scene-moon: 0.92;
  --scene-aurora: block;
  color-scheme: dark;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s ease, color 0.25s ease;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.serif { font-family: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; }
.mono, time, .badge, pre { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

.container { max-width: 880px; margin-inline: auto; padding-inline: 24px; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 8px 12px; border-radius: 6px;
  background: var(--accent); color: var(--on-accent);
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--border); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }

.brand { font-weight: 600; font-size: 1.08rem; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; color: var(--accent); }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-links { display: flex; gap: 2px; }
.nav a {
  padding: 6px 10px; border-radius: 7px;
  color: var(--muted); font-size: 0.9rem; font-weight: 500;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav a:hover, .nav a[aria-current] { color: var(--text); background: var(--accent-soft); text-decoration: none; }
.nav .nav-cv { color: var(--accent); }

.theme-toggle {
  display: grid; place-items: center;
  width: 36px; height: 36px; margin-left: 8px; padding: 0;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: var(--sun-display); }
.theme-toggle .icon-moon { display: var(--moon-display); }

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.hero { display: grid; grid-template-columns: 210px 1fr; gap: 44px; align-items: start; padding-block: 56px 28px; }

.portrait {
  width: 210px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.name { margin: 0; font-size: clamp(2.05rem, 4.2vw, 2.7rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.015em; }
.name-bn { margin: 6px 0 0; color: var(--muted); font-family: "Noto Serif Bengali", "Source Serif 4", Georgia, serif; font-size: 1.02rem; }
.role { margin: 12px 0 0; color: var(--muted); font-size: 0.98rem; }

/* Contact links: a quiet list under the portrait on desktop, pills on phones */
.links { display: flex; flex-direction: column; gap: 2px; margin: 22px 0 0; padding: 0; list-style: none; }
.links a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 0;
  color: var(--muted); font-size: 0.9rem; font-weight: 500;
  transition: color 0.15s ease;
}
.links a:hover { color: var(--accent); text-decoration: none; }
.links svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.bio { margin-top: 22px; }
.bio p { margin: 0 0 1em; }
.bio a {
  color: var(--accent); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.bio a:hover { text-decoration-color: var(--accent); }

mark {
  color: inherit; font-weight: 600;
  background: linear-gradient(transparent 58%, var(--mark) 58%);
  padding: 0 0.08em;
}

abbr[title] { text-decoration: none; cursor: help; }

.callout {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 22px 0 0; padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px;
}
.callout p { margin: 0; }
.callout strong { font-weight: 600; }
.status-dot {
  position: relative; flex: none;
  width: 10px; height: 10px; margin-top: 0.5em;
  border-radius: 50%; background: var(--status);
}
@media (prefers-reduced-motion: no-preference) {
  .status-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--status);
    animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
}
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* ------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------ */
.section { padding-block: 44px 8px; scroll-margin-top: 64px; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 18px; }
.section-head h2 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
.section-head .aside { color: var(--muted); font-size: 0.88rem; }

.subhead {
  margin: 28px 0 6px;
  color: var(--faint); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.subhead:first-of-type { margin-top: 4px; }
.subhead-note { margin: 0 0 6px; color: var(--muted); font-size: 0.93rem; }

/* Publications */
.pubs { list-style: none; margin: 0; padding: 0; }
.pub { display: grid; grid-template-columns: 224px 1fr; gap: 26px; padding-block: 22px; border-bottom: 1px solid var(--border); }
.pub:last-child { border-bottom: 0; }

.pub-thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  background: var(--thumb-bg);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  filter: var(--thumb-filter);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pub-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.pub-thumb img {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: contain;
}

.pub-title { margin: 0 0 5px; font-size: 1.04rem; font-weight: 600; line-height: 1.42; }
.pub-title a { color: var(--text); }
.pub-title a:hover { color: var(--accent); }
.pub-authors { margin: 0; color: var(--muted); font-size: 0.92rem; }
.pub-authors .me { color: var(--text); font-weight: 600; }
.ab { color: var(--faint); font-size: 0.85em; cursor: help; }

.pub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.badge { padding: 4px 7px; border-radius: 5px; font-size: 0.7rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em; }
.badge-venue { background: var(--accent); color: var(--on-accent); }
.badge-plain { border: 1px solid var(--border); color: var(--muted); }
.tag { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.74rem; font-weight: 500; }
.venue { color: var(--muted); font-size: 0.9rem; font-style: italic; }
.pub.compact .pub-meta { margin-top: 2px; }

.pub-tldr { margin: 10px 0 0; font-size: 0.94rem; }

.pub-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pub-links a, .pub-links button {
  padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text);
  font-family: inherit; font-size: 0.79rem; font-weight: 500; line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.pub-links a:hover, .pub-links button:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pub-links button[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* Without JS, abstracts and BibTeX stay visible, so the toggle buttons would do nothing */
html:not(.js) .pub-links button { display: none; }

.panel { margin-top: 12px; color: var(--muted); font-size: 0.9rem; }
.panel p { margin: 0 0 0.75em; }
.panel p:last-child { margin-bottom: 0; }
.js .panel:not(.is-open) { display: none; }

.bibtex { position: relative; }
.bibtex pre {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  background: var(--code-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.76rem; line-height: 1.55;
}
.copy-btn {
  position: absolute; top: 7px; right: 7px;
  padding: 4px 9px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--muted);
  font-family: inherit; font-size: 0.72rem; font-weight: 500; line-height: 1.2; cursor: pointer;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
html:not(.js) .copy-btn { display: none; }

.pub.compact { grid-template-columns: 1fr; padding-block: 16px; }
.pub.compact .pub-title { font-weight: 500; }

.footnote { margin: 14px 0 0; color: var(--faint); font-size: 0.84rem; }

.archive-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 26px; padding: 16px 20px;
  border: 1px dashed var(--border); border-radius: 12px;
  color: var(--text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.archive-link:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.archive-link small { display: block; color: var(--muted); font-size: 0.88rem; }
.archive-link .arrow { color: var(--accent); font-size: 1.2rem; transition: transform 0.15s ease; }
.archive-link:hover .arrow { transform: translateX(3px); }

/* Experience */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding-block: 14px; border-bottom: 1px solid var(--border); }
.timeline li:last-child { border-bottom: 0; }
.org { font-weight: 600; }
.position { color: var(--muted); font-size: 0.93rem; }
.when { color: var(--faint); font-size: 0.8rem; white-space: nowrap; text-align: right; padding-top: 0.2em; }
.timeline .desc { grid-column: 1 / -1; margin: 6px 0 0; font-size: 0.93rem; }

/* Teaching, service, honors */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 36px; }
.cols .subhead { margin-top: 4px; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 5px 0; font-size: 0.93rem; line-height: 1.5; }
.plain .sub { display: block; color: var(--muted); font-size: 0.84rem; }

/* Footer */
.site-footer { margin-top: 56px; padding-block: 28px 40px; border-top: 1px solid var(--border); color: var(--faint); font-size: 0.85rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* ------------------------------------------------------------------
   Scroll reveal (only when JS is on and motion is welcome)
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   Archive page
   ------------------------------------------------------------------ */
.page-intro { padding-block: 56px 4px; }
.page-intro h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 2.5rem); font-weight: 600; letter-spacing: -0.015em; }
.page-intro p { margin: 12px 0 0; max-width: 62ch; color: var(--muted); }

/* ------------------------------------------------------------------
   Backdrop scene (built by scene.js) and the frosted panel over it
   ------------------------------------------------------------------ */
main#main {
  max-width: 928px;
  margin-top: 28px;
  padding-inline: 48px;
  padding-bottom: 36px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  box-shadow: var(--panel-shadow);
}
.site-footer {
  margin-top: 0;
  border-top: 0;
  background: transparent;
}
.site-footer .footer-inner {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--panel-bg);
}

.scene {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease;
}
.scene.is-ready { opacity: 1; }
.scene > * { position: absolute; }
.scene canvas { inset: 0; width: 100%; height: 100%; }

.scene-sky {
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 12%, var(--scene-glow), transparent 46%),
    linear-gradient(180deg, var(--scene-sky-top) 0%, var(--scene-sky-bottom) 72%);
}

.ridge { left: 0; bottom: 0; width: 100%; will-change: transform; }
.ridge-far { height: 64vh; }
.ridge-mid { height: 54vh; }
.ridge-far .rock { fill: var(--scene-far); }
.ridge-far .snow { fill: var(--scene-far-snow); }
.ridge-mid .rock { fill: var(--scene-mid); }
.ridge-mid .snow { fill: var(--scene-mid-snow); }
.ridge path { transition: fill 0.4s ease; }

/* Masser (large, reddish) and Secunda (small, white) */
.moon { border-radius: 50%; opacity: var(--scene-moon); transition: opacity 0.4s ease; }
.moon-masser {
  top: 14vh; right: 4.5vw;
  width: 12vmin; height: 12vmin;
  background:
    radial-gradient(circle at 63% 60%, rgba(120, 74, 66, 0.26), transparent 15%),
    radial-gradient(circle at 30% 66%, rgba(120, 74, 66, 0.18), transparent 11%),
    radial-gradient(circle at 52% 27%, rgba(120, 74, 66, 0.15), transparent 10%),
    radial-gradient(ellipse at 44% 46%, rgba(150, 96, 86, 0.16), transparent 38%),
    radial-gradient(circle at 38% 34%, #fbe4d8 0%, #e2b3a2 40%, #b8837a 72%, #8b625b 100%);
  box-shadow: 0 0 60px 12px rgba(240, 190, 170, 0.16);
}
.moon-secunda {
  top: 9vh; right: calc(4.5vw + 9vmin);
  width: 4.2vmin; height: 4.2vmin;
  background: radial-gradient(circle at 38% 34%, #ffffff 0%, #e2e7ef 55%, #b6bfcc 100%);
  box-shadow: 0 0 24px 5px rgba(220, 230, 255, 0.18);
}

/* Soft-edged gradients rather than a blur filter, so animating the aurora is cheap */
.aurora {
  display: var(--scene-aurora);
  top: 0; left: -10%; width: 120%; height: 56vh;
}
.aurora span { position: absolute; left: 0; right: 0; height: 34%; will-change: transform, opacity; }
.aurora span:nth-child(1) {
  --tilt: -7deg; top: 8%;
  background:
    radial-gradient(ellipse 22% 50% at 30% 50%, rgba(64, 224, 160, 0.42), transparent),
    radial-gradient(ellipse 22% 46% at 50% 52%, rgba(52, 211, 200, 0.34), transparent),
    radial-gradient(ellipse 18% 40% at 70% 48%, rgba(120, 100, 240, 0.22), transparent);
}
.aurora span:nth-child(2) {
  --tilt: 4deg; top: 28%;
  background:
    radial-gradient(ellipse 20% 46% at 34% 50%, rgba(46, 200, 190, 0.26), transparent),
    radial-gradient(ellipse 22% 50% at 52% 50%, rgba(80, 230, 150, 0.34), transparent);
}
.aurora span:nth-child(3) {
  --tilt: -2deg; top: 0; height: 22%;
  background:
    radial-gradient(ellipse 20% 45% at 56% 50%, rgba(150, 110, 250, 0.24), transparent),
    radial-gradient(ellipse 16% 40% at 74% 50%, rgba(64, 224, 160, 0.2), transparent);
}

.mist {
  left: -20%; bottom: 25vh; width: 140%; height: 16vh;
  background: radial-gradient(ellipse at center, var(--scene-mist), transparent 70%);
}

.aurora span { transform: rotate(var(--tilt)); }

@media (prefers-reduced-motion: no-preference) {
  .aurora span { animation: aurora 24s ease-in-out infinite alternate; }
  .aurora span:nth-child(2) { animation-duration: 31s; animation-delay: -9s; }
  .aurora span:nth-child(3) { animation-duration: 19s; animation-delay: -4s; }
  .mist { animation: drift 70s ease-in-out infinite alternate; }
  .moon-masser { animation: bob 16s ease-in-out infinite alternate; }
  .moon-secunda { animation: bob 12s ease-in-out infinite alternate-reverse; }
}
@keyframes aurora {
  from { transform: rotate(var(--tilt)) translateX(-5%) skewX(-10deg) scaleY(0.8); opacity: 0.55; }
  to   { transform: rotate(var(--tilt)) translateX(5%) skewX(8deg) scaleY(1.15); opacity: 1; }
}
@keyframes drift {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}
@keyframes bob {
  from { transform: translateY(-5px); }
  to   { transform: translateY(5px); }
}

@media (max-width: 640px) {
  main#main { margin: 12px 8px 0; padding-inline: 18px; border-radius: 18px; }
  .site-footer .footer-inner { margin-inline: 8px; }
}

/* Whiterun Hold in front of the mountains (built by scene.js): the city on its rock,
   tundra hills, the river past Riverwood's mill, and the road along the bottom, where a
   traveller walks toward Whiterun. The plains pan past him while he stays in the left margin. */
.scene {
  --v-city-rock: #8f8a7a;
  --v-city: #6c7682;
  --v-window: #ffd27a;
  --v-window-on: 0;
  --v-hills: #b3aa6a;
  --v-pine: #4f6047;
  --v-water: #77a9c8;
  --v-water-hi: #eaf5fb;
  --v-mill: #7b6046;
  --v-roof: #5a4636;
  --v-grass: #92994f;
  --v-grass-dark: #6d7638;
  --v-road: #bba27a;
  --v-road-dark: #9c8360;
  --v-flower: #b58bd8;
  --v-rock: #9a9a92;
  --v-ink: #2a292e;
  --v-ink-2: #1c1b20;
  --v-metal: #9aa1aa;
  --v-horn: #e6dcc6;
  --v-fur: #7a5f45;
  --v-shield: #8a6238;
  --v-shield-rim: #5e5f66;
  --v-skin: #d9a98a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene {
    --v-city-rock: #1e2a38; --v-city: #182333; --v-window-on: 1;
    --v-hills: #22301f; --v-pine: #121c16;
    --v-water: #1d3a57; --v-water-hi: #7ea5c8;
    --v-mill: #2a2219; --v-roof: #1f1912;
    --v-grass: #1b261b; --v-grass-dark: #111a12; --v-road: #36352f; --v-road-dark: #282722;
    --v-flower: #5d4f7a; --v-rock: #3a3d40;
    --v-ink: #0c0d11; --v-ink-2: #08090c; --v-metal: #5a6575; --v-horn: #8d8576;
    --v-fur: #3a2e22; --v-shield: #3b2b1b; --v-shield-rim: #2a2d33; --v-skin: #8a6b58;
  }
}
:root[data-theme="dark"] .scene {
  --v-city-rock: #1e2a38; --v-city: #182333; --v-window-on: 1;
  --v-hills: #22301f; --v-pine: #121c16;
  --v-water: #1d3a57; --v-water-hi: #7ea5c8;
  --v-mill: #2a2219; --v-roof: #1f1912;
  --v-grass: #1b261b; --v-grass-dark: #111a12; --v-road: #36352f; --v-road-dark: #282722;
  --v-flower: #5d4f7a; --v-rock: #3a3d40;
  --v-ink: #0c0d11; --v-ink-2: #08090c; --v-metal: #5a6575; --v-horn: #8d8576;
  --v-fur: #3a2e22; --v-shield: #3b2b1b; --v-shield-rim: #2a2d33; --v-skin: #8a6b58;
}

/* Sizes are in vh so the layers stack the same way on any screen: the road sits in the
   bottom 14vh, the river's near edge just above it, and the hills behind with the city
   on top of them. scene.js reads these heights to scale and pan each layer. */
.whiterun { right: 3vw; bottom: 18.8vh; height: 19.2vh; width: 21.44vh; }
.plain { left: 0; right: 0; }
.plain svg { position: absolute; left: 0; bottom: 0; will-change: transform; }
.plain-hills { bottom: 8vh; height: 24vh; }
.plain-river { bottom: 12.1vh; height: 11vh; }
.plain-ground { bottom: 0; height: 14vh; }
/* Feet on the middle of the road, centred in the margin left of the panel */
.walker {
  left: max(3vw, calc((100vw - 928px) / 4 - 2.9vh));
  bottom: 7.3vh;
  height: 11vh; width: 5.81vh;
  overflow: visible;
}

.v-city-rock { fill: var(--v-city-rock); }
.v-city { fill: var(--v-city); }
.v-window { fill: var(--v-window); opacity: var(--v-window-on); }
.v-hills { fill: var(--v-hills); }
.v-pine { fill: var(--v-pine); }
.v-mill { fill: var(--v-mill); }
.v-roof { fill: var(--v-roof); }
.v-wheel-rim { fill: none; stroke: var(--v-roof); stroke-width: 1.5; }
.v-wheel-spokes { fill: none; stroke: var(--v-roof); stroke-width: 1; }
.v-water { fill: var(--v-water); }
.v-water-hi { fill: none; stroke: var(--v-water-hi); stroke-width: 0.8; stroke-linecap: round; opacity: 0.8; }
.v-grass { fill: var(--v-grass); }
.v-tuft { fill: none; stroke: var(--v-grass-dark); stroke-width: 0.9; stroke-linecap: round; }
.v-road { fill: var(--v-road); }
.v-rut { fill: none; stroke: var(--v-road-dark); stroke-width: 0.8; stroke-dasharray: 14 6; }
.v-flower { fill: var(--v-flower); }
.v-rock { fill: var(--v-rock); }
.w-shadow { fill: rgba(0, 0, 0, 0.2); }
.w-ink { fill: var(--v-ink); }
.w-ink2 { fill: var(--v-ink-2); }
.w-fur, .w-belt { fill: var(--v-fur); }
.w-metal { fill: var(--v-metal); }
.w-horn { fill: var(--v-horn); }
.w-skin { fill: var(--v-skin); }
.w-shield { fill: var(--v-shield); stroke: var(--v-shield-rim); stroke-width: 1.2; }
.w-sword { fill: none; stroke: var(--v-metal); stroke-width: 1.5; stroke-linecap: round; }

/* The walk cycle: 0.9s per leg sweep (LEG, SWING and SWEEP in scene.js must match) */
@media (prefers-reduced-motion: no-preference) {
  .w-leg, .w-arm { animation: 0.9s ease-in-out infinite alternate; }
  .w-leg { animation-name: w-leg; }
  .w-arm { animation-name: w-arm; }
  .w-leg-back, .w-arm-back { animation-delay: -0.9s; }
  .w-body { animation: w-bob 0.45s ease-in-out infinite alternate; }
  .w-cloak { animation: w-cloak 1.8s ease-in-out infinite alternate; }
}
@keyframes w-leg { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } }
@keyframes w-arm { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes w-bob { from { transform: translateY(0); } to { transform: translateY(-0.9px); } }
@keyframes w-cloak { from { transform: skewX(4deg); } to { transform: skewX(-6deg); } }

/* On phones the panel covers almost all of the scene, so leave it still (scene.js also
   skips the snow loop and the panning there) */
@media (max-width: 760px) {
  .aurora span, .mist, .moon, .w-leg, .w-arm, .w-body, .w-cloak { animation: none; }
}

@media print {
  .scene { display: none; }
  main#main { background: none; border: 0; box-shadow: none; }
}

/* ------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .nav-links { display: none; }
}

@media (max-width: 640px) {
  .container { padding-inline: 18px; }
  /* Flatten the two hero columns so the order reads photo, name, links, bio */
  .hero { display: flex; flex-direction: column; gap: 0; padding-block: 32px 20px; }
  .hero-side, .hero-main { display: contents; }
  .portrait { order: 1; width: 140px; border-radius: 14px; margin-bottom: 20px; }
  .hero-head { order: 2; }
  .links { order: 3; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .links a {
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text); font-size: 0.85rem; gap: 7px;
  }
  .links svg { width: 15px; height: 15px; }
  .callout { order: 4; margin-top: 20px; }
  .bio { order: 5; }
  .pub { grid-template-columns: 1fr; gap: 14px; }
  .pub-thumb { max-width: 360px; }
  .timeline li { grid-template-columns: 1fr; }
  .when { text-align: left; order: -1; padding-top: 0; }
  .callout { padding: 16px; }
}

@media print {
  .site-header, .theme-toggle, .pub-links, .archive-link { display: none; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .js .panel:not(.is-open) { display: none; }
}