/* ==========================================================================
   Portfolio theme
   Warm "lab notebook" paper in light mode, deep ink in dark mode.
   Category colors come from _data/categories.yml via the --hue custom property.
   ========================================================================== */

:root {
  --container-wide: var(--container); /* header, home hero and page content all share one width so their edges line up */
  --bg: #f6f4ef;
  --bg-alt: #efece4;
  --surface: #fffefb;
  --ink: #16181d;
  --ink-soft: #3a3e48;
  --muted: #6a6f7c;
  --line: #e2ddd2;
  --line-strong: #cfc8b9;
  --accent: #d4462e;          /* "laser red" */
  --accent-ink: #b0351f;
  --grid: rgba(22, 24, 29, 0.045);
  --shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 8px 24px -12px rgba(22, 24, 29, .12);
  --shadow-hover: 0 2px 4px rgba(22, 24, 29, .05), 0 18px 40px -16px rgba(22, 24, 29, .22);

  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1312px;
  --gutter: clamp(16px, 4vw, 32px);
  --hue: var(--accent);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1117;
    --bg-alt: #131721;
    --surface: #161b26;
    --ink: #eceae4;
    --ink-soft: #c4c6cc;
    --muted: #9198a8;
    --line: #242b39;
    --line-strong: #323b4d;
    --accent: #f0674e;
    --accent-ink: #ff8a73;
    --grid: rgba(236, 234, 228, 0.035);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1117;
  --bg-alt: #131721;
  --surface: #161b26;
  --ink: #eceae4;
  --ink-soft: #c4c6cc;
  --muted: #9198a8;
  --line: #242b39;
  --line-strong: #323b4d;
  --accent: #f0674e;
  --accent-ink: #ff8a73;
  --grid: rgba(236, 234, 228, 0.035);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.15em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 8px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .9em;
  display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
}
.eyebrow .sep { opacity: .5; }
.dot { width: .55em; height: .55em; border-radius: 50%; background: var(--hue); display: inline-block; flex: none; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { max-width: var(--container-wide); display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.brand-mark { font-family: var(--font-mono); font-weight: 500; font-size: .85rem; color: var(--accent); border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 6px; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: .95rem; color: var(--ink-soft); }
.site-nav a:hover { background: var(--bg-alt); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--bg-alt); }
.theme-toggle { background: none; border: 1px solid var(--line); color: var(--ink-soft); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; margin-left: 6px; }
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.theme-toggle .icon-moon { display: none; }
[data-theme-resolved="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme-resolved="dark"] .theme-toggle .icon-moon { display: block; }

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.1em; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font: 500 .92rem var(--font-sans); color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s, background .15s;
}
.btn:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font: 400 .72rem var(--font-mono); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }

.chip {
  display: inline-flex; align-items: center; gap: .5em;
  font: 500 .88rem var(--font-sans); color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: .45em 1em; cursor: pointer; transition: all .15s;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip .count { font: .75rem var(--font-mono); opacity: .6; }

/* ---------- Social ---------- */
.social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.social a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--muted); font-size: .92rem; }
.social a:hover { color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(48px, 9vw, 110px) 0 clamp(40px, 7vw, 80px);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  border-bottom: 1px solid var(--line);
}
.hero::after { /* fade the grid at the bottom */
  content: ""; position: absolute; inset: auto 0 0 0; height: 120px;
  background: linear-gradient(transparent, var(--bg)); pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero-title { font-size: clamp(2.8rem, 7vw, 4.6rem); margin-bottom: .15em; }
.hero-tagline { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink-soft); margin-bottom: 1.2em; }
.hero-intro { max-width: 58ch; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6em 0 1.8em; }

/* Bloch sphere */
.bloch { margin: 0; max-width: 420px; justify-self: center; width: 100%; }
.bloch svg { width: 100%; height: auto; overflow: visible; }
.bloch figcaption { text-align: center; font-size: .78rem; color: var(--muted); margin-top: 8px; }
.b-sphere { fill: color-mix(in srgb, var(--surface) 70%, transparent); stroke: var(--line-strong); stroke-width: .012; }
.b-ring { fill: none; stroke: var(--line-strong); stroke-width: .01; }
.b-back { stroke-dasharray: .03 .03; opacity: .7; }
.b-axis { stroke: var(--line-strong); stroke-width: .008; stroke-dasharray: .02 .025; }
.b-label { font: 400 .13px var(--font-serif); fill: var(--muted); }
.b-trail { fill: none; stroke: var(--accent); stroke-width: .014; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
.b-drop { stroke: var(--accent); stroke-width: .008; stroke-dasharray: .02 .02; opacity: .55; }
.b-vec { stroke: var(--accent); stroke-width: .026; stroke-linecap: round; }
.b-tip { fill: var(--accent); }
.b-origin { fill: var(--ink); }

/* Cinematic hero: full-height photo fading into an always-dark band */
.hero-cinematic {
  /* The band is dark in both themes, so re-scope the colour tokens */
  --bg: #0b0e15; --bg-alt: #121722; --surface: #161b26;
  --ink: #eceae4; --ink-soft: #c4c6cc; --muted: #9198a8;
  --line: #242b39; --line-strong: #3a4458; --accent: #f0674e; --accent-ink: #ff8a73;
  color-scheme: dark;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg); color: var(--ink);
  min-height: min(86vh, 760px); display: flex; align-items: center;
  padding: clamp(56px, 8vw, 96px) 0; border-bottom: 1px solid var(--line);
  background-image: none;
}
.hero-cinematic::after { content: none; }
.hero-media { position: absolute; inset: 0 0 0 auto; width: min(60%, 980px); z-index: -1; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 38%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 22%);
  animation: hero-settle 2.4s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-cinematic .hero-inner { display: block; max-width: var(--container-wide); }
.hero-cinematic .hero-text { max-width: 580px; }

/* Hero type rhythm: tight label -> name, then steadily larger steps down the column */
.hero-text .eyebrow { margin-bottom: 14px; }
.hero-text .hero-title { line-height: 1.02; margin-bottom: 18px; }
.hero-text .hero-tagline { line-height: 1.35; margin-bottom: 26px; text-wrap: balance; }
.hero-text .hero-intro p { margin: 0; }
.hero-text .hero-actions { margin: 30px 0 22px; }
.hero-cinematic .hero-text > * { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-cinematic .hero-text > :nth-child(2) { animation-delay: .08s; }
.hero-cinematic .hero-text > :nth-child(3) { animation-delay: .16s; }
.hero-cinematic .hero-text > :nth-child(4) { animation-delay: .24s; }
.hero-cinematic .hero-text > :nth-child(n+5) { animation-delay: .32s; }
.hero-cinematic .btn-primary:hover { color: #fff; }

.hero-bloch {
  position: absolute; z-index: 0; width: 170px;
  left: calc(100% - min(60%, 980px) + 24px); bottom: 5%;
  animation: hero-rise 1.2s .5s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-bloch .bloch { max-width: none; }
.hero-bloch figcaption { display: none; }
.hero-bloch .b-sphere { fill: rgba(11, 14, 21, .6); stroke: rgba(236, 234, 228, .35); }
.hero-bloch .b-ring, .hero-bloch .b-axis { stroke: rgba(236, 234, 228, .3); }
.hero-bloch .b-label { fill: rgba(236, 234, 228, .6); }

.hero-caption { position: absolute; right: var(--gutter); bottom: 18px; margin: 0; font-size: .72rem; z-index: 1; }
.hero-caption a { color: rgba(236, 234, 228, .7); text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.hero-caption a:hover { color: #fff; }

@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

@media (max-width: 1150px) {
  .hero-bloch { display: none; }
}
@media (max-width: 900px) {
  .hero-cinematic { display: block; min-height: 0; padding-top: 0; }
  .hero-media { position: relative; inset: auto; width: 100%; height: 62vw; max-height: 460px; }
  .hero-media img {
    object-position: 70% 35%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%); mask-image: linear-gradient(to top, transparent 0%, #000 45%);
  }
  .hero-cinematic .hero-inner { margin-top: -48px; }
  .hero-caption { position: static; padding: 18px var(--gutter) 0; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-header { margin-bottom: 36px; }
.section-header h2 { margin-bottom: .25em; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.card-grid-featured { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--hue) 45%, var(--line)); }
.card[hidden] { display: none; }
.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.card-link:hover { color: inherit; }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.03); }

/* Generated placeholder: interference fringes tinted by the category color */
.card-placeholder {
  width: 100%; height: 100%; position: relative; display: grid; place-items: center;
  background:
    repeating-radial-gradient(circle at 30% 120%, color-mix(in srgb, var(--hue) 22%, transparent) 0 2px, transparent 2px 14px),
    repeating-radial-gradient(circle at 75% 120%, color-mix(in srgb, var(--hue) 18%, transparent) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, color-mix(in srgb, var(--hue) 10%, var(--surface)), color-mix(in srgb, var(--hue) 22%, var(--bg-alt)));
}
.card-placeholder span {
  font: italic 400 4.5rem/1 var(--font-serif);
  color: color-mix(in srgb, var(--hue) 70%, var(--ink));
  opacity: .8;
}
.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-body .eyebrow { margin-bottom: .4em; }
.card-title { font-size: 1.4rem; margin: 0 0 .3em; }
.card-summary { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1em; flex: 1; }
.card-large .card-title { font-size: 1.75rem; }
.card-large .card-summary { font-size: 1.02rem; }

/* ---------- Work index (home) ---------- */
.work-index { display: grid; gap: 48px; }
.wi-group-title { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); }
.wi-cat + .wi-cat { margin-top: 26px; }
.wi-cat-title { display: flex; align-items: center; gap: .55em; font-weight: 600; font-size: .95rem; margin: 0 0 6px; }
.wi-list { list-style: none; margin: 0; padding: 0; counter-reset: wi; }
.wi-list li { counter-increment: wi; border-bottom: 1px solid var(--line); }
.wi-list a {
  display: grid; grid-template-columns: 2.4em minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 18px; align-items: baseline;
  padding: 14px 6px; text-decoration: none; border-radius: 6px; transition: background .15s;
}
.wi-list a::before { content: counter(wi, decimal-leading-zero); font: .75rem var(--font-mono); color: var(--muted); }
.wi-list a:hover { background: var(--surface); color: inherit; }
.wi-list a:hover .wi-title { color: var(--hue); }
.wi-title { font-family: var(--font-serif); font-size: 1.2rem; transition: color .15s; }
.wi-summary { color: var(--muted); font-size: .92rem; }
.wi-year { font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* compact variant (project sidebar) */
.work-index-compact { gap: 22px; }
.work-index-compact .wi-group-title { font-size: .7rem; margin-bottom: 10px; padding-bottom: 6px; border-bottom-color: var(--line); }
.work-index-compact .wi-cat + .wi-cat { margin-top: 14px; }
.work-index-compact .wi-cat-title { font-size: .8rem; color: var(--muted); font-weight: 500; }
.work-index-compact .wi-list li { border: 0; }
.work-index-compact .wi-list a { display: block; padding: 5px 10px 5px 14px; font-size: .9rem; border-left: 2px solid var(--line); border-radius: 0; color: var(--ink-soft); }
.work-index-compact .wi-list a::before { content: none; }
.work-index-compact .wi-list a:hover { background: none; color: var(--ink); border-left-color: var(--line-strong); }
.work-index-compact .wi-title { font-family: var(--font-sans); font-size: inherit; }
.work-index-compact a[aria-current="page"] { border-left-color: var(--hue); color: var(--ink); font-weight: 600; }

/* ---------- Work carousel (home) ---------- */
.carousel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.carousel-controls { display: flex; gap: 10px; flex: none; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.carousel-btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel {
  --gap: 22px; --per-view: 3;
  list-style: none; margin: 0; padding: 6px 2px 22px;
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.carousel-item { scroll-snap-align: start; display: flex; }
.carousel-item .card { width: 100%; }
.carousel .card-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .carousel { --per-view: 2; } }
@media (max-width: 560px) {
  .carousel { --per-view: 1.15; }
  .carousel-header { align-items: flex-start; flex-direction: column; }
}

/* ---------- Generic pages ---------- */
.page { padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(56px, 8vw, 96px); }
.page-header { margin-bottom: 40px; max-width: 760px; }
/* Page header with a photo (set `photo:` in a page's front matter) */
.page-header-photo { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(24px, 5vw, 64px); align-items: center; }
.page-photo { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 70% 50%; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-hover); }
@media (max-width: 700px) {
  .page-header-photo { grid-template-columns: 1fr; }
  .page-photo { order: -1; max-width: 240px; }
}
/* 404: fills the space between header and footer, content centered vertically */
.page-404 { min-height: calc(100vh - 64px - 150px); display: flex; align-items: center; padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 96px); }
.page-404-inner { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: clamp(40px, 8vw, 120px); align-items: center; }
.page-404 .eyebrow { margin-bottom: 14px; }
.page-404 h1 { margin-bottom: 20px; }
.page-404 .lede { margin: 0; max-width: 46ch; text-wrap: balance; }
.page-404 .bloch { max-width: 380px; width: 100%; justify-self: end; }
.page-404 .bloch figcaption { margin-top: 18px; }
@media (max-width: 900px) {
  .page-404 { min-height: 0; }
  .page-404-inner { grid-template-columns: 1fr; gap: 32px; }
  .page-404 .bloch { order: -1; max-width: 260px; justify-self: start; }
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }

/* ---------- Prose (Markdown content) ---------- */
.prose { max-width: 70ch; color: var(--ink-soft); }
.prose > :first-child { margin-top: 0; }
.prose h2 { color: var(--ink); font-size: 1.8rem; margin-top: 1.8em; }
.prose h3 { color: var(--ink); margin-top: 1.5em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--muted); }
.prose img { border-radius: var(--radius-sm); border: 1px solid var(--line); margin: 1.5em 0 .5em; }
.prose figure { margin: 2em 0; }
/* Side-by-side figures: <div class="figure-row"><figure>…</figure><figure>…</figure></div> */
.prose .figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; align-items: start; margin: 2em 0; }
.prose .figure-row figure { margin: 0; }
.prose .figure-row img { margin: 0; width: 100%; }
.prose .figure-row + .figure-caption { margin-top: -1.4em; font-size: .85rem; color: var(--muted); }
/* Small figure with the caption beside it (for low-resolution images): <figure class="figure-inset">…</figure> */
.prose .figure-inset { display: flex; align-items: center; gap: 20px; margin: 2em 0; }
.prose .figure-inset img { margin: 0; width: min(100%, 420px); flex: none; }
.prose .figure-inset figcaption { margin: 0; }
.prose video { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #000; }
.prose .figure-inset video { width: min(100%, 280px); flex: none; }
@media (max-width: 640px) { .prose .figure-inset { flex-direction: column; align-items: flex-start; } }
/* Tall figure floated right so the surrounding paragraphs wrap around it:
   <figure class="figure-float">…</figure>, placed *before* the text it sits beside. */
.prose::after { content: ""; display: block; clear: both; } /* keep floats inside the article */
.prose .figure-float { float: right; width: min(42%, 280px); margin: .3em 0 1.2em 28px; }
.prose .figure-float img, .prose .figure-float video { margin: 0; width: 100%; }
.prose .figure-float figcaption { margin-top: .5em; }
.prose h2, .prose h3, .prose .figure-row, .prose pre, .prose table,
.prose p:has(> img), .prose p:has(> a > img), .prose .clear { clear: both; }
@media (max-width: 640px) { .prose .figure-float { float: none; width: min(100%, 320px); margin: 1.5em 0; } }
.prose figcaption, .project-hero figcaption, .embed figcaption { font-size: .85rem; color: var(--muted); margin-top: .6em; }
.prose blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--hue); font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; }
.prose code { font: .86em var(--font-mono); background: var(--bg-alt); border: 1px solid var(--line); padding: .1em .35em; border-radius: 5px; }
.prose pre { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; overflow-x: auto; font-size: .88rem; line-height: 1.55; }
.prose pre code { background: none; border: 0; padding: 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 1.5em 0; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; color: var(--ink); border-bottom-color: var(--line-strong); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.prose dl dt { color: var(--ink); margin-top: 1em; }
.prose dl dd { margin: .2em 0 0; color: var(--muted); }
.prose mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: .3em 0; }

/* ---------- Résumé (About page) ---------- */
.cv-header { margin-bottom: 56px; }
/* Wide screens: name, intro and buttons in a sticky left column; résumé on the right.
   The page uses the full site width so its edges line up with the header. */
@media (min-width: 1100px) {
  .cv { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .cv-header { position: sticky; top: 104px; margin-bottom: 0; }
  .cv-header h1 { font-size: clamp(2.4rem, 3.4vw, 3rem); }
  .cv-header .lede { font-size: 1.08rem; }
  .cv-actions { flex-direction: column; align-items: flex-start; }
  .cv-main > .cv-section:first-child { border-top: 0; padding-top: 0; }
}
.cv-header .lede { margin-bottom: 1.4em; }
.cv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-section { padding: 28px 0 8px; border-top: 1px solid var(--line-strong); }
.cv-heading { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.cv-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 24px; padding: 0 0 26px; }
.cv-row-tight, .cv-row-skill { padding-bottom: 14px; }
.cv-dates { margin: 0; padding-top: .25em; font-size: .8rem; color: var(--muted); }
.cv-title { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; line-height: 1.4; margin: 0; color: var(--ink); }
.cv-title a { text-decoration-color: var(--line-strong); }
.cv-org { font-weight: 400; color: var(--ink-soft); }
.cv-meta { margin: .2em 0 0; font-size: .92rem; color: var(--muted); }
.cv-meta strong { color: var(--ink-soft); font-weight: 600; }
.cv-detail { margin-top: .45em; color: var(--ink-soft); font-size: .97rem; }
.cv-detail p, .cv-prose p { margin: 0; }
.cv-detail a, .cv-prose a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.cv-prose { color: var(--ink-soft); padding-bottom: 20px; max-width: 70ch; }
.cv-prose p + p { margin-top: 1em; }
.cv-bullets { margin: .45em 0 0; padding-left: 1.15em; color: var(--ink-soft); font-size: .97rem; }
.cv-bullets li { margin: .25em 0; }
.cv-bullets li::marker { color: var(--muted); }
.cv-bullets a, .cv-skill a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.cv-title a { color: inherit; }
.cv-title a:hover { color: var(--accent-ink); }
.cv-skill { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.cv-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-left: 6px; font-style: normal; }
@media (max-width: 640px) {
  .cv-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Publications list (About) */
.pubs { list-style: none; padding: 0 !important; }
.pubs li { display: grid; grid-template-columns: 5.5em 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.pub-type { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: .35em; }

/* ---------- Project page ---------- */
.project-layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(56px, 8vw, 96px);
}
.project-sidebar { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 4px; }
.jump summary { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); cursor: pointer; list-style: none; margin-bottom: 16px; }
.jump summary::-webkit-details-marker { display: none; }

.project-header { margin-bottom: 36px; }
.project-header h1 { margin-bottom: .3em; }
.project-header .lede { margin-bottom: 1.4em; }
.breadcrumb { font-size: .78rem; color: var(--muted); margin-bottom: 1.2em; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:last-child { color: var(--hue); }
.breadcrumb span { margin: 0 .35em; opacity: .5; }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  margin: 0 0 1.4em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.facts > div { padding: 12px 16px 12px 0; }
.facts dt { font: .7rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }
.facts dd { margin: 0; font-size: .95rem; }
.project-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4em; }

.project-hero { margin: 0 0 40px; }
.project-hero img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }

.embed { margin: 0 0 40px; }
.embed iframe { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); display: block; }
.embed figcaption a { display: inline-flex; align-items: center; gap: .4em; }
/* Fixed-size embeds (embed_size) render at native size and are scaled down to fit by main.js */
.embed-scaler { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #000; }
.embed-scaler iframe { position: absolute; top: 0; left: 0; border: 0; border-radius: 0; aspect-ratio: auto; transform-origin: 0 0; }

/* Project pages: a wider reading column that uses the space beside the sidebar */
.project .prose, .project .pager { max-width: 820px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); max-width: 70ch; }
.pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; background: var(--surface); transition: border-color .15s, transform .15s; }
.pager a:hover { border-color: var(--line-strong); transform: translateY(-2px); color: inherit; }
.pager span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: .4em; }
.pager strong { font-family: var(--font-serif); font-weight: 400; font-size: 1.1rem; }
.pager-next { text-align: right; align-items: flex-end; grid-column: 2; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 28px; background: var(--bg); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.footer-name { font-family: var(--font-serif); font-size: 1.3rem; margin: 0; }
.footer-inner .muted { margin: 0; font-size: .9rem; }
.footer-meta { font-size: .72rem; color: var(--muted); margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.decohere-btn {
  font: inherit; letter-spacing: .06em; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 12px;
  transition: color .2s, border-color .2s, box-shadow .2s, letter-spacing .3s;
}
.decohere-btn:hover { color: var(--accent-ink); border-color: var(--accent); letter-spacing: .14em; box-shadow: 0 0 12px -2px color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .bloch { max-width: 240px; }
  .project-layout { grid-template-columns: 1fr; }
  .project-sidebar { position: static; max-height: none; overflow: visible; order: 2; border-top: 1px solid var(--line); padding-top: 24px; }
  .wi-list a { grid-template-columns: 2.2em 1fr auto; }
  .wi-summary { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand-name { display: none; }
  .site-nav a { padding: 6px 9px; }
  .card-grid, .card-grid-featured { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: 1; }
  .pubs li { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}