/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

/* ===== Chapters · tokens =====
   Shared scale lives on :root. Colour + display-font tokens live in html[data-room] blocks (§1); :root doubles as
   the cryo block so a page without the attribute still renders. Derived tokens (surface, soft/line accents) are
   declared once and follow the room through the *-rgb triplets. */
:root {
  --radius: 12px; --radius-sm: 6px; --ease: cubic-bezier(.22,1,.36,1); --d-fast: 150ms; --d: 400ms; --d-room: 480ms; --d-fade: 520ms;
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-7: 56px;
  --s-8: 64px; --s-9: 72px; --s-10: 80px; --s-12: 96px; --s-14: 112px;
  --header-h: 72px; --max: 1280px; --prose: 68ch; --gutter: 40px; --section: var(--s-14);
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-body: 17px; --fs-small: 15px; --fs-label: 12px;
  --hs: 1;
  --fs-h1: calc(clamp(56px, 9vw, 144px) * var(--hs)); --fs-h2: calc(clamp(36px, 5vw, 80px) * var(--hs)); --fs-h3: clamp(20px, 1.6vw, 24px);
  --ls-h1: -0.04em; --ls-h2: -0.035em;
  --blur: blur(14px); --z-bg: 0; --z-hud: 1; --z-grain: 1; --z-page: 2; --z-header: 20; --z-menu: 19; --z-skip: 50;
  /* fixed per-room constants (dots, strip posters, chapter markers use a room's own colours whatever room is active) */
  --c-cryo: #6FD3FF; --c-grid: #7CFFB2; --c-micro: #3DF5A8; --c-reach: #B69CFF;
  --c2-cryo: #FFFFFF; --c2-grid: #FFD166; --c2-micro: #FF5A5F; --c2-reach: #FFC857;
  --c-cryo-rgb: 111,211,255; --c-grid-rgb: 124,255,178; --c-micro-rgb: 61,245,168; --c-reach-rgb: 182,156,255;
  --c2-cryo-rgb: 255,255,255; --c2-grid-rgb: 255,209,102; --c2-micro-rgb: 255,90,95; --c2-reach-rgb: 255,200,87;
  --bg-cryo: #05070B; --bg-grid: #050807; --bg-micro: #06080A; --bg-reach: #070612;
  --fd-cryo: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --fd-grid: 'Barlow Condensed', 'Arial Narrow', 'Manrope', system-ui, sans-serif;
  --fd-micro: 'Archivo', 'Manrope', system-ui, sans-serif;
  --fd-reach: 'Sora', 'Manrope', system-ui, sans-serif;
  /* derived, room-following */
  --surface: rgba(var(--surface-rgb), .82);
  --accent-soft: rgba(var(--accent-rgb), .12); --accent-line: rgba(var(--accent-rgb), .45);
}
:root, html[data-room="cryo"] {
  --bg: #05070B; --text: #EAF2FF; --muted: #9FB3CC; --accent: #6FD3FF; --accent2: #FFFFFF; --hairline: #1B2633;
  --bg-rgb: 5,7,11; --surface-rgb: 9,13,20; --accent-rgb: 111,211,255; --accent2-rgb: 255,255,255;
  --surface-solid: #0B1017; --cover-ground: var(--cover-ground); --prose-text: var(--prose-text); --code-text: var(--code-text); --strong: #FFFFFF; --grad2: #FFFFFF;
  --f-display: var(--fd-cryo);
}
html[data-room="grid"] {
  --bg: #050807; --text: #EEF3EE; --muted: #93A39A; --accent: #7CFFB2; --accent2: #FFD166; --hairline: #1B2A22;
  --bg-rgb: 5,8,7; --surface-rgb: 8,13,11; --accent-rgb: 124,255,178; --accent2-rgb: 255,209,102;
  --surface-solid: #0B1410; --cover-ground: #070C0A; --prose-text: #D5DED7; --code-text: #C9FFE0; --strong: #FFFFFF; --grad2: #FFD166;
  --f-display: var(--fd-grid);
  /* Barlow Condensed is narrow: headings about 12% larger, no negative tracking */
  --hs: 1.12; --ls-h1: 0; --ls-h2: 0;
}
html[data-room="micro"] {
  --bg: #06080A; --text: #E8EDF1; --muted: #8E9AA6; --accent: #3DF5A8; --accent2: #FF5A5F; --hairline: #1A2128;
  --bg-rgb: 6,8,10; --surface-rgb: 10,13,16; --accent-rgb: 61,245,168; --accent2-rgb: 255,90,95;
  --surface-solid: #0C1014; --cover-ground: #080B0E; --prose-text: #D2D9DF; --code-text: #BDFCE2; --strong: #FFFFFF; --grad2: #E8EDF1;
  --f-display: var(--fd-micro);
  --ls-h1: -0.03em; --ls-h2: -0.025em;
}
html[data-room="reach"] {
  --bg: #070612; --text: #F1EEFF; --muted: #A9A3C7; --accent: #B69CFF; --accent2: #FFC857; --hairline: #221D3A;
  --bg-rgb: 7,6,18; --surface-rgb: 12,10,26; --accent-rgb: 182,156,255; --accent2-rgb: 255,200,87;
  --surface-solid: #0E0B20; --cover-ground: #0A0818; --prose-text: #DCD8F0; --code-text: #E1D7FF; --strong: #FFFFFF; --grad2: #FFC857;
  --f-display: var(--fd-reach);
  --ls-h1: -0.035em; --ls-h2: -0.03em;
}
@media (max-width: 1023px) { :root { --section: var(--s-9); --gutter: 32px; } }
@media (max-width: 767px) { :root { --header-h: 64px; --section: var(--s-6); --gutter: 20px; --fs-body: 16px; } }

/* ===== base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-2)); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; margin: 0; color: var(--text); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--ls-h1); overflow-wrap: break-word; line-height: .92; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-h2); overflow-wrap: break-word; line-height: 1; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--bg); }
main:focus { outline: none; }
.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.label { font: 500 var(--fs-label)/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.muted { color: var(--muted); }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; top: var(--s-1); left: var(--s-1); z-index: var(--z-skip); padding: 12px 16px; background: var(--accent); color: var(--bg);
  font-weight: 600; border-radius: var(--radius-sm); transform: translateY(-160%); transition: transform var(--d-fast) var(--ease); }
.skip:focus { transform: none; }

/* ===== background layers ===== */
/* canvases live in .bg-stack (chapters.js creates them); a swap inserts the new canvas BELOW the fading one */
.bg-stack { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; overflow: hidden;
  background: radial-gradient(60% 50% at 70% 45%, rgba(var(--accent-rgb),.06), transparent 70%), var(--bg); }
.bg-stack canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  background: radial-gradient(60% 50% at 70% 45%, rgba(var(--accent-rgb),.06), transparent 70%), var(--bg); opacity: 1; }
.bg-stack canvas.is-fading { opacity: 0; transition: opacity 520ms ease; }
.grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px; }
.page-root { position: relative; z-index: var(--z-page); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; padding-top: var(--header-h); }

/* ===== header ===== */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); height: var(--header-h);
  background: linear-gradient(to bottom, rgba(var(--bg-rgb),.86), rgba(var(--bg-rgb),.55)); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 600 17px/1 var(--f-display); letter-spacing: -0.01em; white-space: nowrap; }
.brand__mark { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1.5px solid var(--accent);
  background: radial-gradient(circle at 50% 50%, var(--accent2) 0 2px, transparent 3px), radial-gradient(circle, transparent 5px, var(--accent-soft) 6px);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.35); transition: transform var(--d) var(--ease); }
.brand:hover .brand__mark { transform: rotate(180deg) scale(1.1); }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500; color: var(--muted); transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.nav__link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--d) var(--ease); }
.nav__link:hover { color: var(--text); background: var(--accent-soft); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--accent); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline); font: 500 var(--fs-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em;
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.menu-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.menu-btn__bars { display: grid; gap: 5px; width: 18px; }
.menu-btn__bars span { display: block; height: 1.5px; background: currentColor; transition: transform var(--d) var(--ease); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu-panel { position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu); padding: var(--s-4) var(--gutter);
  background: rgba(var(--bg-rgb),.94); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); overflow-y: auto;
  opacity: 0; transition: opacity 300ms var(--ease); }
.menu-panel.is-open { opacity: 1; }
.menu-panel__list { display: grid; gap: 4px; }
.menu-panel__link { display: flex; align-items: center; min-height: 56px; font: 600 clamp(32px, 9vw, 48px)/1.1 var(--f-display); letter-spacing: -0.03em;
  color: var(--text); border-bottom: 1px solid var(--hairline); opacity: 0; transform: translateY(16px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease), color var(--d-fast) var(--ease); transition-delay: calc(var(--i, 0) * 50ms); }
.menu-panel.is-open .menu-panel__link { opacity: 1; transform: none; }
.menu-panel__link:hover, .menu-panel__link[aria-current="page"] { color: var(--accent); }
html.menu-open { overflow: hidden; }
@media (max-width: 1023px) { .nav { display: none; } .menu-btn { display: inline-flex; } }
@media (min-width: 1024px) { .menu-panel { display: none; } }

/* ===== footer ===== */
.site-footer { border-top: 1px solid var(--hairline); background: rgba(var(--bg-rgb),.7); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-4);
  font: 400 var(--fs-label)/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--d-fast) var(--ease); }
.site-footer a:hover { color: var(--accent); }

/* ===== sections + panels ===== */
.section { padding-block: var(--section); }
.section--tight { padding-top: 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-6); }
.section__head .od-stack { --od-gap: 12px; }
.page-head { padding-top: calc(var(--s-12) + var(--s-2)); padding-bottom: var(--s-8); }
.page-head .od-stack { --od-gap: var(--s-3); max-width: 900px; }
.page-head__intro { max-width: 60ch; color: var(--muted); font-size: 19px; line-height: 1.55; }
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.panel--pad { padding: var(--s-5); }
@media (max-width: 767px) { .panel--pad { padding: var(--s-3); } .page-head { padding-top: var(--s-8); padding-bottom: var(--s-5); } }
.rule { height: 1px; background: linear-gradient(90deg, var(--accent-line), var(--hairline) 40%, transparent); transform-origin: left; }

/* ===== buttons + links ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font: 600 16px/1 var(--f-body); letter-spacing: .01em; border: 1px solid transparent; cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), box-shadow var(--d) var(--ease); }
.btn .icon { transition: transform var(--d) var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn--primary { background: var(--accent); color: var(--bg); box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
.btn--primary:hover { background: var(--accent2); box-shadow: 0 0 32px rgba(var(--accent-rgb),.45); }
.btn--ghost { background: rgba(var(--surface-rgb),.5); color: var(--text); border-color: var(--hairline); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.link-btn, .arrow-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--hairline); background: rgba(var(--surface-rgb),.6); color: var(--text); font: 500 14px/1 var(--f-body); cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), transform var(--d) var(--ease); }
.link-btn:hover, .arrow-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.link-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.link-btn .icon { transition: transform var(--d) var(--ease); }
.ext { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); border-bottom: 1px solid var(--accent-line); transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.ext:hover { color: var(--accent2); border-color: var(--accent2); }
.text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--accent); font-weight: 600; }
.text-link .icon { transition: transform var(--d) var(--ease); }
.text-link:hover { color: var(--accent2); }
.text-link:hover .icon { transform: translateX(6px); }
.social { --od-gap: 10px; }
.social-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(var(--surface-rgb),.55); color: var(--text); font-size: 15px; font-weight: 500; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.social-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ===== hero ===== */
.hero { min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); display: flex; align-items: center; }
.hero__inner { padding-block: var(--s-10); }
.hero__copy { --od-gap: var(--s-3); max-width: 780px; }
.hero__title { font-size: calc(clamp(56px, 10vw, 160px) * var(--hs)); letter-spacing: var(--ls-h1); }
.hero__line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__line > span { display: block; }
.js .hero__line > span { transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: var(--t, 0ms); }
.js .is-intro .hero__line > span { transform: none; }
.hero__line--accent > span { color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.hero__role { font: 500 clamp(17px, 1.6vw, 21px)/1.4 var(--f-display); color: var(--text); letter-spacing: -0.005em; }
.hero__bio { max-width: 58ch; color: var(--muted); font-size: 18px; }
.hero__ctas { --od-gap: 12px; padding-top: var(--s-1); }
.hero__scroll { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-6); }
.hero__scroll::before { content: ''; width: 40px; height: 1px; background: var(--accent); }

/* ===== stats ===== */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; }
.stat { --od-gap: 6px; padding: var(--s-4) var(--s-3); border-left: 1px solid var(--hairline); }
.stat:first-child { border-left: 0; }
.stat__num { font: 600 clamp(40px, 4.4vw, 64px)/1 var(--f-display); letter-spacing: -0.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.stat__num span.is-counted { color: var(--accent); transition: color 600ms var(--ease); }
.stat__cap { font: 500 var(--fs-label)/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
@media (max-width: 1023px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat:nth-child(4) { border-left: 0; } .stat:nth-child(n+4) { border-top: 1px solid var(--hairline); } }
@media (max-width: 767px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { border-left: 0; border-top: 1px solid var(--hairline); } .stat:nth-child(even) { border-left: 1px solid var(--hairline); } .stat:nth-child(-n+2) { border-top: 0; } }

/* ===== chips ===== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(var(--accent-rgb),.05); font: 500 12px/1.3 var(--f-mono); color: var(--muted); letter-spacing: .02em; }
.chip small { font-size: 11px; color: var(--accent); }

/* ===== project grid + cards ===== */
.pgrid { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 1023px) { .pgrid, .pgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pgrid, .pgrid--4 { grid-template-columns: minmax(0, 1fr); } }
.pcard { position: relative; min-width: 0; }
.pcard.is-hidden { display: none; }
.pcard__link { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--hairline); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transform-style: preserve-3d;
  transition: border-color var(--d) var(--ease), box-shadow var(--d) var(--ease), --lift var(--d) var(--ease); will-change: transform; }
.pcard__link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.pcard__link::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--d) var(--ease);
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--accent-rgb),.16), transparent 60%); }
.pcard__link:hover { --lift: -6px; border-color: var(--accent-line); box-shadow: 0 24px 60px -30px rgba(var(--accent-rgb),.45); }
.pcard__link:hover::before { transform: scaleX(1); }
.pcard__link:hover::after { opacity: 1; }
.pcard__cover { position: relative; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--hairline); overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, rgba(var(--accent-rgb),.10), transparent 60%), var(--cover-ground); }
.pcard__cover .cover { display: block; width: 100%; height: 100%; transition: transform 700ms var(--ease); }
.pcard__link:hover .cover { transform: scale(1.05); }
.pcard__body { --od-gap: 10px; padding: var(--s-3); flex: 1; }
.pcard__meta { --od-gap: 12px; justify-content: space-between; }
.pcard__idx { color: var(--accent); }
.pcard__title { font-size: 20px; line-height: 1.2; transition: color var(--d-fast) var(--ease); }
.pcard__link:hover .pcard__title { color: var(--accent); }
.pcard__sum { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }
.pgrid--4 .pcard__body { padding: 20px; }
.pgrid--4 .pcard__title { font-size: 18px; }
@property --lift { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ===== filters ===== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; width: fit-content; max-width: 100%; border-radius: 999px; }
.filter-btn { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted);
  font: 500 14px/1 var(--f-body); transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.filter-btn:hover { color: var(--text); border-color: var(--accent-line); }
.filter-btn[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-4); }
.empty { padding: var(--s-6); text-align: center; color: var(--muted); }

/* ===== latest + teaser ===== */
.latest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 767px) { .latest { grid-template-columns: minmax(0, 1fr); } }
.latest__item { position: relative; display: flex; flex-direction: column; gap: 14px; padding: var(--s-4); height: 100%; overflow: hidden;
  transition: border-color var(--d) var(--ease), transform var(--d) var(--ease); }
.latest__item:hover { border-color: var(--accent-line); transform: translateY(-4px); }
.latest__item h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; transition: color var(--d-fast) var(--ease); }
.latest__item:hover h3 { color: var(--accent); }
.latest__meta { color: var(--muted); font-size: var(--fs-small); }
.latest__item .text-link { margin-top: auto; }
.teaser { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: var(--s-5); padding: var(--s-8) var(--s-6); }
@media (max-width: 1023px) { .teaser { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) var(--s-3); } }
.teaser__mail { font: 600 clamp(24px, 3.6vw, 52px)/1.1 var(--f-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.teaser .od-stack { --od-gap: var(--s-3); }

/* ===== big mail (contact) ===== */
.mail-big { position: relative; display: inline-block; font: 600 clamp(24px, 4.5vw, 64px)/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--text);
  overflow-wrap: anywhere; padding-bottom: 6px; transition: color var(--d) var(--ease); }
.mail-big::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); }
.mail-big:hover { color: var(--accent); }
.mail-big:hover::after { transform: scaleX(1); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: var(--s-8) var(--s-6); }
@media (max-width: 767px) { .contact-grid { padding: var(--s-5) var(--s-3); } }
.contact-loc { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; color: var(--text); }
.contact-loc .icon { color: var(--accent); width: 20px; height: 20px; }
.social--big { --od-gap: 12px; }
.social--big .social-link { min-height: 64px; padding: 0 28px; font: 600 18px/1 var(--f-display); }
.social--big .social-link .icon { width: 22px; height: 22px; }

/* ===== about ===== */
.about-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); }
@media (max-width: 767px) { .about-head { grid-template-columns: minmax(0, 1fr); } }
.avatar-panel { padding: 12px; width: fit-content; transform: rotate(-2deg); transition: transform var(--d) var(--ease); }
.avatar-panel:hover { transform: rotate(0deg) translateY(-4px); }
.avatar { display: block; border-radius: 8px; object-fit: cover; filter: saturate(.85) contrast(1.05); max-width: 100%; }
.avatar-panel figcaption { padding: 10px 4px 2px; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-6); align-items: start; }
@media (max-width: 1023px) { .about-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }
.prose-col { display: grid; gap: var(--s-3); max-width: var(--prose); font-size: 18px; color: var(--text); }
.prose-col p:first-child { font: 500 clamp(20px, 1.8vw, 24px)/1.5 var(--f-display); letter-spacing: -0.01em; }
.side-sticky { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.timeline { position: relative; display: grid; gap: var(--s-4); padding-left: var(--s-4); }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(to bottom, var(--accent), var(--hairline)); }
.timeline__item { position: relative; }
.timeline__item .od-stack { --od-gap: 4px; }
.timeline__node { position: absolute; left: calc(-1 * var(--s-4) + 1px); top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg);
  border: 1.5px solid var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb),.5); }
.timeline__org { font-size: 22px; }
.timeline__role { color: var(--accent); font: 500 14px/1.4 var(--f-mono); }
.timeline__note { color: var(--muted); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 767px) { .duo { grid-template-columns: minmax(0, 1fr); } }
.duo .panel { display: grid; gap: var(--s-3); align-content: start; }
.interest-list { display: grid; gap: 0; }
.interest { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline); font: 500 19px/1.3 var(--f-display); }
.interest::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }
.interest:last-child { border-bottom: 0; }
.edu { display: grid; gap: 0; }
.edu__item { --od-gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.edu__item:last-child { border-bottom: 0; }
.edu__course { font: 600 18px/1.3 var(--f-display); }
.edu__inst { color: var(--muted); font-size: var(--fs-small); }
.edu__year { font: 500 var(--fs-label)/1.4 var(--f-mono); color: var(--accent); letter-spacing: .1em; }
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 1023px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .skills { grid-template-columns: minmax(0, 1fr); } }
.skill-group { display: grid; gap: 14px; align-content: start; padding: var(--s-3); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.skill-group h3.label { color: var(--accent); }
.chip--mono { color: var(--text); }
.acc-list { display: grid; }
.acc { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--hairline); transition: background var(--d-fast) var(--ease); }
.acc:last-child { border-bottom: 0; }
.acc:hover { background: var(--accent-soft); }
.acc__idx { color: var(--accent); }
.acc__main { --od-gap: 4px; }
.acc__title { font-size: 19px; }
.acc__org { color: var(--muted); font-size: var(--fs-small); }
.acc__date { font: 500 13px/1.4 var(--f-mono); color: var(--muted); }
@media (max-width: 767px) { .acc { grid-template-columns: 36px minmax(0, 1fr); } .acc__date, .acc__cta { grid-column: 2; } .acc__cta:empty { display: none; } }

/* ===== talks, publications, posts ===== */
.stack-list { display: grid; gap: var(--s-3); }
.tcard, .pubcard, .postcard { position: relative; padding: var(--s-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: border-color var(--d) var(--ease), transform var(--d) var(--ease); overflow: hidden; }
.tcard::before, .pubcard::before, .postcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform 500ms var(--ease); }
.tcard:hover, .pubcard:hover, .postcard:hover { border-color: var(--accent-line); }
.tcard:hover::before, .pubcard:hover::before, .postcard:hover::before { transform: scaleY(1); }
.tcard, .postcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); }
@media (max-width: 767px) { .tcard, .postcard { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } .tcard, .pubcard, .postcard { padding: var(--s-3); } }
.tcard__idx { color: var(--accent); font-size: 14px; }
.tcard__main, .postcard__main { --od-gap: 14px; align-items: flex-start; }
.tcard__title, .pubcard__title, .postcard__title { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.pubcard__title a, .postcard__title a { transition: color var(--d-fast) var(--ease); }
.pubcard__title a:hover, .postcard__title a:hover { color: var(--accent); }
.tcard__facts { --od-gap: 2px; font: 500 13px/1.5 var(--f-mono); color: var(--accent); letter-spacing: .02em; }
.tcard__sum, .pubcard__sum, .postcard__sum { color: var(--muted); max-width: 72ch; }
.tcard__abs, .pubcard__abs { color: var(--text); max-width: 72ch; padding: var(--s-2) 0 var(--s-1); border-top: 1px solid var(--hairline); }
.pubcard { display: grid; gap: 14px; justify-items: start; }
.pubcard__authors { font-size: var(--fs-small); color: var(--text); }
.links { --od-gap: 8px; }
.disclosure { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease); width: 100%; }
.disclosure.is-open { grid-template-rows: 1fr; }
.disclosure__inner { overflow: hidden; min-height: 0; }

/* ===== detail pages ===== */
.detail { display: grid; gap: var(--s-6); padding-block: var(--s-12) var(--section); }
.detail__head { display: grid; gap: var(--s-3); max-width: 980px; }
.detail__title { font-size: calc(clamp(44px, 7vw, 112px) * var(--hs)); overflow-wrap: break-word; }
.detail__lede { font: 500 clamp(19px, 1.8vw, 24px)/1.5 var(--f-display); color: var(--muted); max-width: 60ch; }
.detail__cover { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); aspect-ratio: 16 / 7;
  background: radial-gradient(80% 120% at 80% 0%, rgba(var(--accent-rgb),.12), transparent 60%), var(--surface-solid); }
.detail__cover .cover { display: block; width: 100%; height: 100%; }
.detail__figure { margin: 0; }
.detail__figure img { width: 100%; height: auto; max-width: 720px; border-radius: var(--radius); border: 1px solid var(--hairline); }
.detail__body, .detail__links { max-width: calc(var(--prose) + 2 * var(--s-5)); }
.detail__body { padding: var(--s-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
@media (max-width: 767px) { .detail { padding-top: var(--s-8); gap: var(--s-4); } .detail__body { padding: var(--s-3); } .detail__cover { aspect-ratio: 16 / 10; } }
.detail__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.detail__prev, .detail__next { display: grid; gap: 6px; align-content: center; min-height: 72px; padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--surface); transition: border-color var(--d-fast) var(--ease), transform var(--d) var(--ease); }
.detail__next { text-align: right; }
.detail__prev:hover, .detail__next:hover { border-color: var(--accent); transform: translateY(-3px); }
.detail__nav-title { font: 600 17px/1.3 var(--f-display); transition: color var(--d-fast) var(--ease); }
.detail__prev:hover .detail__nav-title, .detail__next:hover .detail__nav-title { color: var(--accent); }
.detail__all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; align-self: center;
  border-radius: 999px; border: 1px solid var(--hairline); font-weight: 600; font-size: 15px; transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.detail__all:hover { border-color: var(--accent); color: var(--accent); }
article .detail__nav:has(.detail__all:first-child) { display: flex; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 767px) { .detail__nav { grid-template-columns: minmax(0, 1fr); } .detail__next { text-align: left; } .detail__all { justify-self: start; } }

/* ===== prose ===== */
.prose { color: var(--text); font-size: 17px; line-height: 1.7; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; line-height: 1.2; margin-top: 1.8em; }
.prose h3 { font-size: clamp(20px, 1.9vw, 24px); margin-top: 1.6em; }
.prose h4 { font-size: 18px; margin-top: 1.4em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--prose-text); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .45em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ''; position: absolute; left: -1.05em; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--accent); font-family: var(--f-mono); font-size: .85em; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; transition: color var(--d-fast) var(--ease), text-decoration-color var(--d-fast) var(--ease); }
.prose a:hover { color: var(--accent2); text-decoration-color: var(--accent2); }
.prose strong { color: var(--strong); font-weight: 600; }
.prose code { font: 400 .88em/1.5 var(--f-mono); padding: .12em .4em; border-radius: 4px; background: rgba(var(--accent-rgb),.08); border: 1px solid var(--hairline); color: var(--code-text); }
.prose pre { overflow-x: auto; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--cover-ground); border: 1px solid var(--hairline); }
.prose pre code { padding: 0; border: 0; background: none; }
.prose blockquote { margin-left: 0; padding-left: var(--s-3); border-left: 2px solid var(--accent); color: var(--muted); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose hr { border: 0; height: 1px; background: var(--hairline); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 8px 12px; border-bottom: 1px solid var(--hairline); text-align: left; }

/* ===== not found ===== */
.notfound { display: grid; gap: var(--s-3); justify-items: start; padding-block: var(--s-14); max-width: 900px; }
.notfound h1 { font-size: calc(clamp(44px, 7vw, 104px) * var(--hs)); }
.notfound p:not(.label) { color: var(--muted); font-size: 19px; }

/* ===== motion hooks (od-motion.js) ===== */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--d) var(--ease), transform var(--d) var(--ease); transition-delay: calc(var(--rd, 0) * 60ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .pcard.reveal.is-visible { transition-delay: 0ms; }
.js .draw { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease); }
.js .draw.is-visible { transform: scaleX(1); }
.mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mask__in { display: inline-block; }
.js .split .mask__in { transform: translateY(110%); transition: transform 800ms var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
.js .split.is-visible .mask__in { transform: none; }
.js .intro { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .is-intro .intro { opacity: 1; transform: none; transition-delay: var(--t, 0ms); }
.js .page-root { opacity: 0; transform: translateY(12px); }
html.is-entered .page-root { opacity: 1; transform: none; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
html.is-leaving .page-root { opacity: 0; transform: translateY(-12px); transition: opacity 240ms ease-in, transform 240ms ease-in; }
[data-magnetic] { will-change: transform; }

/* reduced motion: keyed on the visitor's "Reduce motion" toggle (od-motion sets html.reduce-motion), not the OS setting */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
html.reduce-motion.js .reveal, html.reduce-motion.js .draw, html.reduce-motion.js .intro, html.reduce-motion.js .split .mask__in, html.reduce-motion.js .hero__line > span, html.reduce-motion.js .page-root, html.reduce-motion.is-leaving .page-root, html.reduce-motion .menu-panel__link { opacity: 1 !important; transform: none !important; }
html.reduce-motion .pcard__link, html.reduce-motion [data-tilt] { transform: none !important; }
html.reduce-motion .pcard__link::after { display: none; }
html.reduce-motion .avatar-panel { transform: none; }
html.reduce-motion .marquee { -webkit-mask-image: none; mask-image: none; }
html.reduce-motion .marquee__track { width: auto; transform: none !important; }
html.reduce-motion .marquee__set { flex-wrap: wrap; flex: 1 1 auto; padding-right: 0; }
html.reduce-motion .marquee__set[aria-hidden="true"] { display: none; }

/* ===== refinements ===== */
.hero__line--accent > span { -webkit-text-stroke: 0; background: linear-gradient(100deg, var(--accent) 0%, var(--grad2) 55%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero { position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--bg-rgb),.78) 0%, rgba(var(--bg-rgb),.45) 45%, transparent 75%); }
@media (max-width: 767px) { .hero::before { background: linear-gradient(180deg, rgba(var(--bg-rgb),.35), rgba(var(--bg-rgb),.7)); } }
.site-header { transition: background var(--d) var(--ease), border-color var(--d) var(--ease); border-bottom-color: transparent; }
.site-header.is-scrolled { border-bottom-color: var(--hairline); background: rgba(var(--bg-rgb),.88); }
.section__more { margin-top: var(--s-4); display: flex; justify-content: flex-start; }
.stack-list + .section__more { margin-top: var(--s-5); }
@keyframes cryo-failsafe { to { opacity: 1; transform: none; } }
html.js:not(.is-entered) .page-root { animation: cryo-failsafe 1ms 2.5s forwards; }
.js body:not(.is-intro) .intro, .js body:not(.is-intro) .hero__line > span { animation: cryo-failsafe 1ms 3s forwards; }
.teaser__mail { align-self: flex-start; max-width: 100%; }
.contact-grid h2.label { font-size: var(--fs-label); letter-spacing: .12em; line-height: 1.4; }
.avatar-panel { transform: none; }

/* ===== motion layer (bp-09-cryo-rev) ===== */
.motion-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: transparent; color: var(--muted); font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; cursor: pointer;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.motion-toggle:hover, .motion-toggle:focus-visible { color: var(--accent); border-color: var(--accent); }
.motion-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.motion-toggle__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1px solid currentColor; background: transparent; }
.motion-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.motion-toggle[aria-pressed="true"] .motion-toggle__dot { background: currentColor; }
.marquee-band { display: grid; gap: var(--s-2); padding-block: var(--s-4); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__set { display: flex; flex: none; gap: var(--s-2); padding-right: var(--s-2); }
.marquee .chip { min-height: 44px; padding: 8px 18px; font-size: 16px; letter-spacing: .01em; white-space: nowrap; }
.marquee .chip--mono { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }
.hero__role { min-height: 1.6em; }
.btn--primary { position: relative; }
.btn--primary.od-pulse::after { border-color: var(--accent); }
@media (max-width: 767px) { .marquee .chip { font-size: 16px; padding: 6px 14px; } }

/* ===== Round 4 · header search control ===== */
.site-header__inner > .brand { margin-right: auto; }
.site-header__search { display: inline-flex; flex: none; }
.search-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 16px 0 14px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--hairline); color: var(--text);
  font: 500 var(--fs-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.search-btn .icon { width: 18px; height: 18px; transition: transform 200ms var(--ease); }
.search-btn:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.search-btn:hover .icon { transform: scale(1.1) rotate(-8deg); }
.search-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.search-btn[aria-current="page"] { color: var(--accent); border-color: var(--accent-line); }
@media (max-width: 639px) {
  .search-btn { width: 44px; padding: 0; }
  .search-btn span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 419px) { .site-header__inner { gap: var(--s-1); } }
/* very narrow phones: the Menu word hides visually (still the button's accessible name) so brand + search + menu fit */
@media (max-width: 379px) {
  .menu-btn { padding: 0 13px; }
  .menu-btn > span:last-child { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ===== Round 4 · active tag bar (projects ?tag=, search ?tag=) ===== */
.tagbar-host { margin-bottom: var(--s-3); }
.tagbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--accent-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.tagbar .label { color: var(--accent); }
.tagbar .chip { min-height: 32px; padding: 4px 12px; font-size: 13px; color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }
.tagbar .link-btn .icon { transition: transform 200ms var(--ease); }
.tagbar .link-btn:hover .icon { transform: rotate(90deg); }
@media (max-width: 479px) { .tagbar { border-radius: var(--radius); padding: 10px 10px 10px 16px; } }

/* ===== Round 4 · media: real cover tiles (uniform 16/10 crop) and full-frame detail images ===== */
.media { position: relative; overflow: hidden; }
.media--tile { background: transparent; transform-origin: 50% 50%; transition: transform 300ms var(--ease); }
.media--tile img { transform-origin: 50% 50%; transition: transform .4s ease-out; animation: od-tile-drift 14s ease-in-out infinite alternate; }
@keyframes od-tile-drift { from { transform: scale(1); } to { transform: scale(1.04); } }

/* project cards: image covers sit in the same 16/10 slot as the SVG cover, neutral ground (no ice gradient, no glow over the photo) */
.pcard__cover > .media { position: absolute; inset: 0; }
.pcard__cover > .media--cover { background: transparent; }
.pcard__cover--img { z-index: 2; background: transparent; }
.pcard__cover--img .od-media { width: 100%; height: 100%; object-fit: cover; }
.pcard__link::before { z-index: 3; }
.pcard__link:hover .media--tile { transform: scale(1.05); }

/* detail pages: the SVG fallback keeps the 16/7 band; real images show full frame, capped at 60vh, on a neutral panel */
.detail__cover > .media { height: 100%; }
.detail__cover.detail__cover--img { aspect-ratio: auto; padding: var(--s-2); background: transparent; }
.detail__cover--img > .media--full { height: auto; display: flex; justify-content: center; align-items: center; border-radius: var(--radius-sm); }
.detail__cover--img .od-media { width: auto; max-width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: var(--radius-sm); }
@media (max-width: 767px) { .detail__cover.detail__cover--img { padding: var(--s-1); } }

/* ===== Round 4 · talk + publication cards with media tiles ===== */
.tcard, .pubcard { --tile-w: 300px; }
@media (min-width: 1280px) { .tcard, .pubcard { --tile-w: 340px; } }
.tcard__media, .pubcard__media { align-self: start; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: transparent; }
.tcard__media .od-media, .pubcard__media .od-media { width: 100%; }
.tcard:hover .media--tile, .pubcard:hover .media--tile { transform: scale(1.05); }
/* talk card: index | main | tile on wide screens, tile above the text on tablet, stacked on mobile */
.tcard { grid-template-areas: "idx main"; }
.tcard__idx { grid-area: idx; }
.tcard__main { grid-area: main; }
.tcard__media { grid-area: media; }
.tcard:has(> .tcard__media) { grid-template-columns: 120px minmax(0, 1fr) var(--tile-w); grid-template-areas: "idx main media"; }
@media (max-width: 1023px) {
  .tcard:has(> .tcard__media) { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "idx media" "idx main"; }
  .tcard__media { width: 100%; max-width: 480px; }
}
@media (max-width: 767px) {
  .tcard { grid-template-areas: "idx" "main"; }
  .tcard:has(> .tcard__media) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "idx" "main"; }
  .tcard__media { max-width: none; }
}
.tcard__title a { transition: color var(--d-fast) var(--ease); }
.tcard__title a:hover { color: var(--accent); }
.tcard .arrow-link .icon, .pubcard .arrow-link .icon { transition: transform 200ms var(--ease); }
.tcard .arrow-link:hover .icon, .pubcard .arrow-link:hover .icon { transform: translateX(4px); }
/* publication card: single text column; the tile is pinned top-right on wide screens (card reserves its width + height) */
@media (min-width: 1024px) {
  .pubcard:has(> .pubcard__media) { padding-right: calc(var(--tile-w) + 2 * var(--s-5)); min-height: calc(var(--tile-w) * 10 / 16 + 2 * var(--s-5) + 4px); }
  .pubcard__media { position: absolute; top: var(--s-5); right: var(--s-5); width: var(--tile-w); }
}
@media (max-width: 1023px) { .pubcard__media { width: 100%; max-width: 480px; } }
@media (max-width: 767px) { .pubcard__media { max-width: none; } }
.links .link-btn[data-doc] .icon { color: var(--accent); }

/* index "Latest" teasers: full-bleed tile across the top of the panel */
.latest__media { margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-1); border-bottom: 1px solid var(--hairline); overflow: hidden; background: var(--surface-solid); }
.latest__media .od-media { width: 100%; }
.latest__item:hover .media--tile { transform: scale(1.05); }

/* ===== Round 4 · detail additions (talk / publication share .detail) ===== */
.tlist { display: grid; gap: var(--s-3); }
.detail__head .chips { gap: 8px; padding-top: var(--s-1); }
.detail__authors { font: 500 16px/1.5 var(--f-mono); letter-spacing: .02em; color: var(--text); }
.detail__links .links { --od-gap: 10px; }
.detail__related { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.detail__related-title, .detail__cite-title { font-size: clamp(28px, 3.2vw, 48px); letter-spacing: -0.03em; line-height: 1.05; }
.detail__related-title::before, .detail__cite-title::before { content: ''; display: block; width: 40px; height: 1px; margin-bottom: var(--s-2); background: var(--accent); }
.detail--talk .detail__body, .detail--publication .detail__body { font-size: 18px; }
.detail__cite { display: grid; gap: var(--s-3); justify-items: start; max-width: calc(var(--prose) + 2 * var(--s-5)); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.detail__cite .bib { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; overflow-x: auto; padding: var(--s-2) var(--s-3); white-space: pre; tab-size: 2;
  background: var(--cover-ground); border: 1px solid var(--hairline); border-radius: var(--radius-sm); font: 400 16px/1.7 var(--f-mono); color: var(--code-text);
  scrollbar-color: var(--accent-line) transparent; transition: border-color var(--d-fast) var(--ease); }
.detail__cite .bib:hover { border-color: var(--accent-line); }
.detail__cite .bib:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-color: var(--accent); border-radius: var(--radius-sm); }
.detail__cite [data-copy] { transition: border-color 200ms var(--ease), color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease); }
.detail__cite [data-copy].is-copied, .detail__cite [data-copy].is-copied:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); transform: none; }
@media (max-width: 767px) { .detail__cite { padding: var(--s-3); } .detail__cite .bib { padding: var(--s-2); } }

/* ===== Round 4 · tag links (outside card links) ===== */
a.chip--link { min-height: 36px; padding: 6px 12px; color: var(--text); cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease); }
a.chip--link:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-2px); }
a.chip--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; color: var(--accent); }
@media (max-width: 1023px), (pointer: coarse) { a.chip--link { min-height: 44px; padding: 8px 14px; } }

/* ===== Round 4 · search page ===== */
.search { display: grid; gap: 12px; padding: var(--s-3); margin-bottom: var(--s-3); }
.search__label { font: 500 13px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text); }
.search__row { position: relative; display: flex; align-items: stretch; gap: 12px; }
.search__icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--accent); pointer-events: none; }
.search__input { flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 0 20px 0 54px; border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(var(--bg-rgb),.7); color: var(--text); font: 500 clamp(18px, 1.6vw, 22px)/1.2 var(--f-display); letter-spacing: -0.01em;
  -webkit-appearance: none; appearance: none; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.search__input::placeholder { color: var(--muted); opacity: 1; }
.search__input:hover { border-color: var(--accent-line); }
.search__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.search__submit { flex: none; min-height: 56px; }
@media (max-width: 639px) { .search__row { flex-direction: column; } .search__icon { top: 28px; } .search__submit { width: 100%; } }
.search__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); min-height: 44px; }
.search__meta .tagbar-host { margin: 0; }
.search__status { font: 500 14px/1.5 var(--f-mono); letter-spacing: .02em; color: var(--muted); }
.srows { display: grid; gap: var(--s-2); }
.srows:empty { display: none; }
.srow { position: relative; display: grid; gap: 10px; justify-items: start; padding: var(--s-3) var(--s-4); overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: border-color 200ms var(--ease); }
.srow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 250ms var(--ease); }
.srow:hover, .srow:focus-within { border-color: var(--accent-line); }
.srow:hover::before, .srow:focus-within::before { transform: scaleY(1); }
.srow__kind { color: var(--accent); }
.srow__title { font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.015em; }
.srow__title a { transition: color var(--d-fast) var(--ease); }
.srow__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.srow__title a:hover { color: var(--accent); }
.srow__sum { color: var(--muted); max-width: 72ch; }
/* query highlight: ice fill with near-black text (about 11.9:1), same pairing as ::selection */
.srows mark { background: var(--accent); color: var(--bg); border-radius: 3px; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 767px) { .srow { padding: var(--s-3); } }
.search ~ .empty p + p { margin-top: var(--s-2); }
.tagcloud-host { padding: var(--s-4); }
@media (max-width: 767px) { .tagcloud-host { padding: var(--s-3); } }
.tagcloud { --od-gap: 10px; }
/* chip size follows the tag's count (site.js maps data-n to --tc, 0..1 on a log scale) */
.tagcloud a.chip--link { font-size: calc(13px + var(--tc, 0) * 7px); min-height: calc(36px + var(--tc, 0) * 10px); padding-inline: calc(12px + var(--tc, 0) * 6px); }
.tagcloud a.chip--link small { font-size: .78em; }
.tagcloud a.chip--link.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tagcloud a.chip--link.is-active small { color: var(--bg); }
@media (max-width: 1023px), (pointer: coarse) { .tagcloud a.chip--link { min-height: 44px; } }

/* ===== Round 4 · contact composer (mailto form) ===== */
.compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; gap: var(--s-6); padding: var(--s-8) var(--s-6); }
@media (max-width: 1023px) { .compose { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) var(--s-3); } }
.compose__intro { --od-gap: var(--s-3); }
.compose__intro h2 { font-size: clamp(36px, 4.2vw, 64px); }
.compose__lede { color: var(--muted); font-size: 18px; max-width: 46ch; }
.cform { --od-gap: var(--s-3); --danger: #FF8F8F; }
.cform__field { display: grid; gap: 8px; }
.cform__label { font: 500 13px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text); }
.cform__opt { color: var(--muted); text-transform: none; letter-spacing: .02em; }
.cform__hint { color: var(--muted); font-size: 16px; }
.cform__input { display: block; width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--hairline);
  background: rgba(var(--bg-rgb),.7); color: var(--text); font: 400 17px/1.5 var(--f-body); -webkit-appearance: none; appearance: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.cform__textarea { min-height: 176px; resize: vertical; }
.cform__input:hover { border-color: var(--accent-line); }
.cform__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); border-radius: var(--radius-sm); box-shadow: 0 0 0 5px var(--accent-soft); }
.cform__input[aria-invalid="true"] { border-color: var(--danger); }
/* errors: soft red (about 8:1 on the panel) plus a drawn "!" badge so colour is not the only cue */
.cform__error { display: flex; align-items: flex-start; gap: 8px; color: var(--danger); font-size: 16px; font-weight: 500; line-height: 1.45; }
.cform__error[hidden], .cform__status[hidden] { display: none; }
.cform__error::before { content: '!'; content: '!' / ''; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; border: 1.5px solid currentColor; font: 700 12px/1 var(--f-mono); }
.cform .btn--primary { align-self: flex-start; }
.cform .btn--primary[disabled], .cform .btn--primary[disabled]:hover { opacity: .55; cursor: not-allowed; background: var(--accent); box-shadow: none; }
.cform__status { padding: var(--s-2) var(--s-3); border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--accent-soft); color: var(--text); font-size: 16px; }
.cform__status a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ===== Round 4 · reduced motion (visitor toggle) ===== */
html.reduce-motion .media--tile, html.reduce-motion .media--tile img { animation: none !important; transform: none !important; }
html.reduce-motion a.chip--link, html.reduce-motion .search-btn .icon, html.reduce-motion .tagbar .link-btn .icon { transform: none !important; }
html.reduce-motion .tcard .arrow-link .icon, html.reduce-motion .pubcard .arrow-link .icon { transform: none !important; }

/* =====================================================================
   Chapters · shell additions (rooms, HUD, dots, strip, filter, markers)
   ===================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* procedural covers follow the room: fg = currentColor (accent), fg2 = var(--accent2) enforced here */
.cover { color: var(--accent); }
.cover [fill="var(--accent2)"] { fill: var(--accent2); }
.cover [stroke="var(--accent2)"] { stroke: var(--accent2); }

/* ---- token transitions: when the room changes chapters.js opens a 480ms window (html.room-shift) in which these
   surfaces cross-fade their colour properties. Transforms are never listed, so magnetic / tilt / parallax stay direct;
   outside the window every element keeps its own (fast) hover transitions. ---- */
html.room-shift :is(body, h1, h2, h3, h4, .label, .muted, .panel, .site-header, .site-footer, .menu-panel, .menu-panel__link,
  .btn, .link-btn, .arrow-link, .filter-btn, .chip, .search-btn, .menu-btn, .social-link, .motion-toggle, .nav__link, .text-link, .ext,
  .pcard__link, .pcard__cover, .pcard__idx, .pcard__title, .tcard, .pubcard, .postcard, .srow, .skill-group, .stat, .stat__num span,
  .detail__body, .detail__cite, .detail__cover, .detail__prev, .detail__next, .detail__all, .tagbar, .search__input, .cform__input,
  .timeline__node, .timeline__role, .edu__year, .acc, .acc__idx, .marquee-band, .brand__mark, .hud__cell, .room-dot, .chapter-filter,
  .chapter-filter__btn, .chapter-dot, .chapter-tile, .prose p, .prose li, .prose code, .prose pre) {
  transition-property: background-color, color, border-color, box-shadow, opacity !important;
  transition-duration: 480ms, 480ms, 480ms, 480ms, var(--d) !important;
  transition-timing-function: var(--ease) !important;
  transition-delay: 0ms !important;
}
html.room-shift .cover rect, html.room-shift .cover ellipse, html.room-shift .cover line { transition: fill 480ms var(--ease), stroke 480ms var(--ease); }

/* ---- HUD (engines micro + grid write cells into [data-hud]; tokenised from Microstructure / Grid) ---- */
.hud { position: fixed; inset: 0; z-index: var(--z-hud); pointer-events: none; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .06em;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.hud:empty { display: none; }
.hud__cell { position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 10px; white-space: nowrap;
  background: rgba(var(--bg-rgb), .55); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.hud__cell b { font-weight: 500; color: var(--text); }
.hud__cell i { font-style: normal; color: var(--accent); }
.hud__cell .up { color: var(--accent); }
.hud__cell .dn { color: var(--accent2); }
.hud__cell.is-alert i, .hud__cell.is-alert b { color: var(--accent2); }
.hud__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.hud__cell.is-alert .hud__dot { background: var(--accent2); box-shadow: 0 0 10px var(--accent2); }
html[data-room="micro"] .hud__dot { animation: hud-pulse 1.6s ease-in-out infinite; }
html[data-room="grid"] .hud { font-size: 11px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.hud__tl { top: calc(var(--header-h) + var(--s-2)); left: var(--s-2); }
.hud__tr { top: calc(var(--header-h) + var(--s-2)); right: var(--s-2); }
.hud__bl { bottom: var(--s-2); left: var(--s-2); }
.hud__br { bottom: var(--s-2); right: var(--s-2); }
@keyframes hud-pulse { 50% { opacity: .35; } }
@media (max-width: 1279px) { .hud__tl, .hud__tr { top: calc(var(--header-h) + 10px); } }
@media (max-width: 767px) { .hud { display: none; } }
html.reduce-motion .hud__dot { animation: none !important; }

/* ---- header: room dots (4 targets, 26 x 44 px hit area each; the dot uses its own room's accent via --dot) ---- */
.room-dots { display: inline-flex; align-items: center; flex: none; padding: 0 4px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface); }
.room-dot { position: relative; display: inline-grid; place-items: center; width: 26px; min-width: 24px; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--text); cursor: pointer; border-radius: 999px; }
.room-dot__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--accent)); opacity: .55;
  box-shadow: 0 0 0 0 transparent; transition: opacity var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), transform var(--d) var(--ease); }
.room-dot:hover .room-dot__dot { opacity: 1; transform: scale(1.2); }
.room-dot[aria-pressed="true"] .room-dot__dot { opacity: 1; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--dot, var(--accent)); }
.room-dot.is-locked::after { content: ''; position: absolute; left: 50%; bottom: 7px; width: 10px; height: 2px; margin-left: -5px; border-radius: 2px;
  background: var(--dot, var(--accent)); }
.room-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 999px; }
html.reduce-motion .room-dot:hover .room-dot__dot { transform: none; }
/* header fit: nav + search + dots at 1024–1279 (search collapses to its icon), phones (brand word hides, still named) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header__inner { gap: var(--s-2); }
  .search-btn { width: 44px; padding: 0; }
  .search-btn span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 639px) { .site-header__inner { gap: 12px; } }
@media (max-width: 519px) {
  .brand > span:last-child { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .brand { min-width: 44px; justify-content: center; }
}
@media (max-width: 419px) { .site-header__inner { gap: var(--s-1); } }

/* ---- per-chapter colour sets (a tile, marker or button carries its own room's colours) ---- */
[data-chapter="cryo"], [data-chapter-tile="cryo"] { --t-accent: var(--c-cryo); --t-accent2: var(--c2-cryo); --t-rgb: var(--c-cryo-rgb); --t2-rgb: var(--c2-cryo-rgb); --t-bg: var(--bg-cryo); --t-font: var(--fd-cryo); }
[data-chapter="grid"], [data-chapter-tile="grid"] { --t-accent: var(--c-grid); --t-accent2: var(--c2-grid); --t-rgb: var(--c-grid-rgb); --t2-rgb: var(--c2-grid-rgb); --t-bg: var(--bg-grid); --t-font: var(--fd-grid); }
[data-chapter="micro"], [data-chapter-tile="micro"] { --t-accent: var(--c-micro); --t-accent2: var(--c2-micro); --t-rgb: var(--c-micro-rgb); --t2-rgb: var(--c2-micro-rgb); --t-bg: var(--bg-micro); --t-font: var(--fd-micro); }
[data-chapter="reach"], [data-chapter-tile="reach"] { --t-accent: var(--c-reach); --t-accent2: var(--c2-reach); --t-rgb: var(--c-reach-rgb); --t2-rgb: var(--c2-reach-rgb); --t-bg: var(--bg-reach); --t-font: var(--fd-reach); }

/* ---- home: chapter strip (CSS posters, no engines) ---- */
.chapter-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 1023px) { .chapter-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .chapter-strip { grid-template-columns: minmax(0, 1fr); } }
.chapter-strip > li { min-width: 0; }
.chapter-tile { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--text); transition: transform var(--d) var(--ease), border-color var(--d-fast) var(--ease), box-shadow var(--d) var(--ease); }
.chapter-tile:hover, .chapter-tile:focus-visible { transform: translateY(-6px); border-color: rgba(var(--t-rgb), .6); box-shadow: 0 24px 60px -32px rgba(var(--t-rgb), .55); }
.chapter-tile:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; }
.chapter-tile.is-current { border-color: rgba(var(--t-rgb), .6); }
.chapter-tile__poster { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid rgba(var(--t-rgb), .25); background-color: var(--t-bg); }
.chapter-tile__poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); }
.chapter-tile__body { display: grid; gap: 6px; align-content: start; padding: var(--s-3); }
.chapter-tile__label { font: 700 clamp(26px, 2.4vw, 34px)/1 var(--t-font); letter-spacing: -0.01em; color: var(--text); }
[data-chapter-tile="grid"] .chapter-tile__label { font-size: clamp(30px, 2.7vw, 38px); letter-spacing: 0; }
.chapter-tile__theme { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.chapter-tile__count { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-1); font: 500 var(--fs-label)/1.4 var(--f-mono);
  text-transform: uppercase; letter-spacing: .12em; color: var(--text); }
.chapter-tile__count::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--t-accent); flex: none; }
.chapter-tile__break { font: 400 12px/1.4 var(--f-mono); color: var(--muted); letter-spacing: .02em; }
/* posters: cryo = frost rings + ice glow; grid = lattice + amber nodes; micro = depth ladder bid/ask; reach = nested ellipses */
[data-chapter-tile="cryo"] .chapter-tile__poster { background:
  radial-gradient(circle at 72% 38%, rgba(var(--t2-rgb), .9) 0 1.5px, transparent 2.5px),
  repeating-radial-gradient(circle at 72% 38%, transparent 0 13px, rgba(var(--t-rgb), .28) 13px 14px),
  radial-gradient(70% 90% at 72% 38%, rgba(var(--t-rgb), .30), transparent 70%), var(--t-bg); }
[data-chapter-tile="grid"] .chapter-tile__poster { background:
  radial-gradient(circle, rgba(var(--t2-rgb), .95) 0 2px, transparent 2.6px) 12px 12px / 48px 48px,
  repeating-linear-gradient(0deg, rgba(var(--t-rgb), .22) 0 1px, transparent 1px 24px),
  repeating-linear-gradient(90deg, rgba(var(--t-rgb), .22) 0 1px, transparent 1px 24px),
  radial-gradient(90% 80% at 30% 100%, rgba(var(--t-rgb), .22), transparent 70%), var(--t-bg); }
[data-chapter-tile="micro"] .chapter-tile__poster { background:
  linear-gradient(90deg, transparent 49.6%, rgba(var(--t-rgb), .9) 49.6% 50.4%, transparent 50.4%),
  repeating-linear-gradient(90deg, rgba(var(--t-rgb), .55) 0 3px, transparent 3px 9px) left bottom / 50% 62% no-repeat,
  repeating-linear-gradient(90deg, rgba(var(--t2-rgb), .55) 0 3px, transparent 3px 9px) right bottom / 50% 44% no-repeat,
  repeating-linear-gradient(0deg, rgba(var(--t-rgb), .10) 0 1px, transparent 1px 12px), var(--t-bg); }
[data-chapter-tile="reach"] .chapter-tile__poster { background:
  radial-gradient(circle at 34% 58%, rgba(var(--t2-rgb), .95) 0 2px, transparent 3px),
  repeating-radial-gradient(ellipse 150% 90% at 34% 58%, transparent 0 11px, rgba(var(--t-rgb), .34) 11px 12px),
  radial-gradient(60% 80% at 34% 58%, rgba(var(--t-rgb), .26), transparent 70%), var(--t-bg); }
.chapter-strip__head { margin-bottom: var(--s-4); }
html.reduce-motion .chapter-tile:hover, html.reduce-motion .chapter-tile:focus-visible { transform: none; }

/* ---- projects: chapter filter (segmented control, room order) ---- */
.chapter-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; width: fit-content; max-width: 100%; margin-bottom: var(--s-2);
  border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.chapter-filter__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent; background: transparent; color: var(--muted); font: 500 14px/1 var(--f-body);
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.chapter-filter__btn small { font: 500 12px/1 var(--f-mono); color: inherit; opacity: .8; }
.chapter-filter__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--t-accent, var(--accent)); }
.chapter-filter__btn:hover { color: var(--text); border-color: rgba(var(--t-rgb, var(--accent-rgb)), .5); }
.chapter-filter__btn[aria-pressed="true"] { color: var(--text); border-color: var(--t-accent, var(--accent)); background: rgba(var(--t-rgb, var(--accent-rgb)), .12); }
.chapter-filter__btn[data-chapter="all"][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.chapter-filter__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 639px) { .chapter-filter { width: 100%; } .chapter-filter__btn { flex: 1 1 auto; justify-content: center; padding: 0 12px; } }

/* ---- chapter marker: 8px dot in the chapter's own accent + mono label (cards, detail heads, About) ---- */
.chapter-dot { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-label)/1.4 var(--f-mono); text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.chapter-dot__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--t-accent, var(--accent)); box-shadow: 0 0 8px rgba(var(--t-rgb, var(--accent-rgb)), .6); }
.pcard__meta .chapter-dot { margin-right: auto; }
.srow__kind .chapter-dot, .latest__item .label .chapter-dot { margin-left: 12px; vertical-align: middle; }
a.chapter-dot { min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); color: var(--text);
  justify-self: start; align-self: flex-start; width: fit-content; transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
a.chapter-dot:hover { border-color: var(--t-accent, var(--accent)); color: var(--t-accent, var(--accent)); }
a.chapter-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.chapter-dot__theme { color: var(--muted); text-transform: none; letter-spacing: .02em; white-space: normal; }
@media (max-width: 479px) { .chapter-dot__theme { display: none; } }

/* ---- About: career markers (each row belongs to a chapter; the row at the viewport middle is active) ---- */
.timeline__item[data-chapter] .timeline__node { border-color: var(--t-accent); box-shadow: 0 0 12px rgba(var(--t-rgb), .5); }
.timeline__item .chapter-dot { margin-top: 2px; }
.timeline__item.is-active .timeline__node { background: var(--t-accent); }
.timeline__item.is-active .timeline__org { color: var(--t-accent); }
.timeline__item .timeline__org { transition: color var(--d) var(--ease); }
[data-room-zone="reach"].is-active { border-color: rgba(var(--c-reach-rgb), .5); }

/* ===== performance switches (perf.js writes html.perf-<id>; the head script sets them before first paint) =====
   Every rule here is an experiment the visitor can turn on from the footer; nothing applies by default. */
html.perf-nograin .grain { display: none; }
/* flat cards: no backdrop blur on cards and panels (header, menu and footer keep theirs); surfaces go a little more opaque
   so the moving background does not show through unblurred */
html.perf-noblur { --surface: rgba(var(--surface-rgb), .94); }
html.perf-noblur :is(.panel, .pcard__link, .tcard, .pubcard, .postcard, .skill-group, .detail__body, .detail__cite, .srow, .tagbar,
  .chapter-tile, .chapter-filter, .social-link, .btn--ghost) { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.perf-noblur .btn--ghost, html.perf-noblur .social-link { background: rgba(var(--surface-rgb), .85); }
/* still covers: procedural cover and media-tile animations run only on the hovered card */
html.perf-stillcovers :is(.pcard, .tcard, .pubcard, .postcard, .latest__item, .detail__cover):not(:hover) :is(.cover rect, .cover ellipse, .media--tile img) { animation-play-state: paused !important; }
/* footer control */
.perf { position: relative; }
.perf__summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--muted); -webkit-user-select: none; user-select: none;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.perf__summary::-webkit-details-marker { display: none; }
.perf__summary:hover, .perf__summary:focus-visible, .perf[open] .perf__summary { color: var(--accent); border-color: var(--accent); }
.perf__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.perf__list { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; display: grid; gap: 2px; width: 340px; max-width: calc(100vw - 2 * var(--gutter));
  padding: 8px; background: var(--surface-solid); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,.45);
  text-transform: none; letter-spacing: 0; }
.perf__switch { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 12px; align-items: start; width: 100%; padding: 10px 12px; border: 0;
  border-radius: var(--radius-sm); background: transparent; color: var(--text); text-align: left; font: 500 14px/1.35 var(--f-body); }
.perf__switch:hover, .perf__switch:focus-visible { background: var(--accent-soft); }
.perf__dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; }
.perf__switch[aria-checked="true"] { color: var(--accent); }
.perf__switch[aria-checked="true"] .perf__dot { background: currentColor; border-color: currentColor; }
.perf__hint { grid-column: 2; font-size: 12px; line-height: 1.4; color: var(--muted); }
@media (max-width: 639px) { .perf__list { right: auto; left: 0; } }

/* ---- contact form: honeypot, Turnstile, sent state ---- */
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform .cf-turnstile { min-height: 65px; }
.cform__done { font-size: 18px; color: var(--text); }
.cform.is-sent { --od-gap: 0; }
.cform > [hidden] { display: none !important; }