/* Night-sky layer: calm editorial type, moonlit blue, one warm star accent.
 * Loaded last on every page. The Sarazond star fields stay untouched; this only
 * adds a faint nebula and a rare shooting star around them.
 * Fonts are self-hosted under the SIL OFL 1.1 (assets/fonts/LICENSE-*.txt):
 * Newsreader (headings) and Inter (text and small caps labels).
 */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("./assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations"), url("./assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("./assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }

:root {
  --display: "Newsreader", "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  --sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  --label: "Inter", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif;
  --moon: #c4dbea;
  --star: #d9c79f;
  --surface: rgba(255, 255, 255, .028);
  --surface-hover: rgba(255, 255, 255, .045);
  --hairline: rgba(214, 228, 240, .09);
  --hairline-strong: rgba(214, 228, 240, .2);
  --radius: 12px;
}

/* ---------- Sky ---------- */
.parallax-sky::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(36% 28% at 80% 10%, rgba(120, 165, 205, .11), transparent 70%),
    radial-gradient(30% 24% at 10% 62%, rgba(120, 150, 200, .06), transparent 70%);
  animation: nebula-drift 60s ease-in-out infinite alternate;
}
.parallax-sky::after {
  content: ""; position: absolute; top: 10%; left: 74%; width: 110px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .8), rgba(196, 219, 234, .25) 40%, transparent);
  transform-origin: left center; opacity: 0;
  animation: shooting-star 19s ease-in 6s infinite;
}
@keyframes nebula-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2%, 1.5%, 0); } }
@keyframes shooting-star {
  0% { opacity: 0; transform: rotate(-30deg) translateX(0); }
  1% { opacity: .9; }
  5% { opacity: 0; transform: rotate(-30deg) translateX(-380px); }
  100% { opacity: 0; transform: rotate(-30deg) translateX(-380px); }
}

/* ---------- Type ---------- */
body { font-family: var(--sans); font-size: 16px; line-height: 1.72; letter-spacing: -.003em; font-feature-settings: "cv05", "cv08"; text-rendering: optimizeLegibility; }
h1, h2, .fish-intro h2, .blog-date span, .manifesto blockquote, .prose blockquote { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; }
h1 { letter-spacing: -.022em; }
h2 { letter-spacing: -.012em; }
h3 { font-weight: 560; letter-spacing: -.006em; }
strong, b { font-weight: 600; }
::selection { background: rgba(196, 219, 234, .28); color: #fff; }
html { scrollbar-color: #2a3646 #090a0f; }
.eyebrow, .mono, .section-label { font-family: var(--label); font-weight: 500; font-size: 11px; letter-spacing: .12em; }
.eyebrow::before { content: "✦"; margin-right: 10px; color: var(--star); letter-spacing: 0; }
.fish-index, .fish-footer > span, .fish-annotations text { font-family: var(--label); font-weight: 500; }
/* Long-form Chinese reading keeps a sans face; Inter covers Latin, CJK falls back. */
.latent-prose, .latent-article h1, .article-page:lang(zh-CN) h1, .article-page:lang(zh-CN) h2 { font-family: var(--sans); }
.latent-prose h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }

/* ---------- Navigation ---------- */
.nav-shell {
  position: sticky; top: 14px; z-index: 5; margin-top: 18px; padding: 8px 10px 8px 20px;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: rgba(10, 15, 24, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body > header.nav-shell { position: sticky; z-index: 5; }
.wordmark { font-family: var(--display); font-size: 21px; font-weight: 450; letter-spacing: -.01em; }
nav { gap: 2px; }
nav a { min-height: 36px; padding: 0 14px; border-radius: 999px; transition: color .2s, background-color .2s; }
nav a:hover { color: var(--ink); text-decoration: none; }
nav a.active { color: var(--ink); background: rgba(255, 255, 255, .06); text-decoration: none; }
nav { position: relative; isolation: isolate; }
nav.has-glider a.active { background: transparent; }
.nav-glider {
  position: absolute; top: 0; left: 0; z-index: -1; height: 36px; border-radius: 999px; pointer-events: none;
  background: rgba(255, 255, 255, .065); box-shadow: inset 0 0 0 1px rgba(214, 228, 240, .06);
  transition: transform .45s cubic-bezier(.3, .8, .2, 1), width .45s cubic-bezier(.3, .8, .2, 1), opacity .3s;
}
.nav-shell { transition: background-color .4s, box-shadow .4s, border-color .4s; }
.nav-shell.is-scrolled { background: rgba(8, 12, 20, .82); border-color: rgba(214, 228, 240, .12); box-shadow: 0 12px 40px -20px rgba(0, 0, 0, .9); }

/* ---------- Home hero ---------- */
.home-main { padding-top: 84px; }
.profile { grid-template-columns: minmax(0, 1fr) 168px; gap: 64px; padding-bottom: 68px; }
.profile .eyebrow { margin-bottom: 18px; }
.profile h1 { font-size: clamp(52px, 7vw, 76px); font-weight: 350; line-height: 1.02; letter-spacing: -.03em; margin-bottom: 26px; color: #eef2f7; }
.profile-lead { font-size: 18px; line-height: 1.72; letter-spacing: -.008em; }
.profile-copy > p:not(.eyebrow):not(.profile-lead) { font-size: 15.5px; }

.pill-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--hairline-strong); border-radius: 999px; background: transparent;
  color: var(--ink); font-size: 14px; text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.pill svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.pill:hover { text-decoration: none; border-color: rgba(214, 228, 240, .42); background: rgba(255, 255, 255, .04); }
.pill--primary { color: #0b111b; border-color: transparent; background: #e6ebf2; font-weight: 550; }
.pill--primary svg { opacity: 1; }
.pill--primary:hover { background: #fff; border-color: transparent; }

/* Avatar: hairline orbit with one small travelling star */
.avatar-orbit { position: relative; width: 168px; height: 168px; margin-top: 6px; }
.avatar-orbit::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--hairline-strong); }
.avatar-orbit::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle at 50% 0, #fff 0 1.5px, rgba(196, 219, 234, .55) 2.5px, transparent 6px);
  animation: orbit 40s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }
.avatar-orbit .avatar { width: 100%; height: 100%; margin: 0; border-radius: 50%; box-shadow: none; }
.profile-aside { display: flex; flex-direction: column; align-items: center; }
.pet-dock { margin: 26px 0 -16px; }

/* ---------- Sections ---------- */
.home-block { border-top: 0; padding-block: 44px 46px; }
.section-heading {
  align-items: flex-end; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 0;
  background: linear-gradient(90deg, rgba(214, 228, 240, .24), rgba(214, 228, 240, .05) 70%, transparent) left bottom / 100% 1px no-repeat;
  transition: background-size 1.4s cubic-bezier(.2, .7, .2, 1) .15s;
}
.section-heading h2 { font-size: clamp(30px, 3.6vw, 36px); line-height: 1.1; }
.section-index { display: block; margin-bottom: 10px; color: var(--muted); font: 500 11px/1.4 var(--label); letter-spacing: .16em; }
.section-index b { color: var(--star); font-weight: 400; margin-right: 8px; }
.section-heading > a { color: var(--muted); transition: color .2s; }
.section-heading > a:hover { color: var(--ink); text-decoration: none; }

/* ---------- Surfaces ---------- */
.card {
  position: relative; padding: 26px 28px; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  transition: border-color .3s, background-color .3s, opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(360px 200px at var(--mx, 80%) var(--my, 0%), rgba(196, 219, 234, .06), transparent 70%);
}
.card:hover { border-color: var(--hairline-strong); background: var(--surface-hover); }
.card:hover::before { opacity: 1; }
.card h3, .card h3 a { color: var(--ink); }
.card h3 a:hover { text-decoration: none; }
.card .stretched::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.card .card-actions, .card .card-actions a { position: relative; z-index: 1; }

.badges { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font: 500 11px/1.6 var(--label); letter-spacing: .1em; }
.badge { color: var(--muted); font: 500 11px/1.6 var(--label); letter-spacing: .1em; }
.badges { font-size: 11px; }
.badge--accent { color: var(--star); }

/* Paper */
.paper-card { padding: 30px 32px; }
.paper-card h3 { font: 400 clamp(23px, 2.5vw, 27px)/1.3 var(--display); margin: 12px 0 14px; max-width: 780px; }
.paper-card .authors { color: var(--muted); font-size: 14px; margin-bottom: 0; }
.paper-card .authors strong { color: var(--ink); font-weight: 600; }
.paper-card .summary { color: var(--muted); font-size: 15px; margin: 12px 0 0; max-width: 760px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.card-actions .pill { min-height: 34px; padding: 0 13px; font-size: 13px; }

/* Research directions */
.interest-list { gap: 14px; }
.interest-list .card { padding: 24px 24px 26px; }
.glyph { display: block; width: 22px; height: 22px; margin-bottom: 22px; color: var(--moon); opacity: .85; }
.glyph svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.interest-list h3 { font: 400 23px/1.2 var(--display); margin-bottom: 10px; }

/* Projects */
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.project-grid .card { display: flex; flex-direction: column; gap: 12px; }
.project-grid h3 { font: 400 27px/1.15 var(--display); margin: 0; }
.project-grid h3 .arrow { display: inline-block; font-family: system-ui, sans-serif; font-size: .55em; margin-left: 8px; color: var(--muted); vertical-align: .2em; transition: transform .3s, color .3s; }
.project-grid .card:hover .arrow { transform: translate(2px, -2px); color: var(--ink); }
.project-grid p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 6px 0 0; padding: 0; }
.tags li { color: #8d9bb0; font: 500 11px/1.7 var(--label); letter-spacing: .04em; }

/* Notes */
.note-card { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 20px 26px; }
.note-card time { color: var(--muted); font: 500 12px/1.4 var(--label); letter-spacing: .08em; }
.note-card a { color: var(--ink); font-size: 16px; font-weight: 550; text-decoration: none; }
.note-card p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.note-card .arrow { color: var(--muted); transition: transform .3s, color .3s; }
.note-card:hover .arrow { transform: translateX(3px); color: var(--ink); }

.particle-study { border: 1px solid var(--hairline); border-radius: 16px; margin-bottom: 30px; }

/* ---------- Inner pages ---------- */
.page-hero { padding: 76px 0 46px; }
.page-hero h1 { font-size: clamp(46px, 6vw, 68px); font-weight: 350; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 22px; }
.page-lead { font-size: 17px; line-height: 1.85; }
.research-list, .project-catalog, .blog-list { border-top: 0; }

.project-catalog { display: grid; gap: 18px; }
.project-row.project-case {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 34px 32px; background: var(--surface);
  transition: border-color .3s;
}
.project-row.project-case:hover { border-color: var(--hairline-strong); }
.project-case .project-number { font: 400 26px/1 var(--display); color: var(--muted); }
.project-case h2 { font-size: 34px; }
.project-case .mono { color: var(--star); }
.project-case .project-side { gap: 4px; }
.project-case .project-side span { white-space: nowrap; color: #8d9bb0; font: 500 11px/1.8 var(--label); }
.project-features li::marker { color: var(--star); content: "✦   "; font-size: 9px; }
.project-links a { padding: 4px 12px; border: 1px solid var(--hairline-strong); border-radius: 999px; }
.project-links a:hover { text-decoration: none; border-color: rgba(214, 228, 240, .42); }

.inner-page .home-block .project-summary { display: block; padding: 30px 32px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.inner-page .home-block .project-summary h3 { font: 400 27px/1.3 var(--display); margin-bottom: 14px; }
.inner-page .home-block .project-summary h3 a { color: var(--ink); }
.inner-page .profile-links { margin-top: 20px; }
.inner-page .profile-links a { padding: 0 14px; border: 1px solid var(--hairline-strong); border-radius: 999px; }
.inner-page .profile-links a:hover { text-decoration: none; border-color: rgba(214, 228, 240, .42); }

.blog-list { display: grid; gap: 14px; }
.blog-row { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px 30px; background: var(--surface); transition: border-color .3s, background-color .3s; }
.blog-row:hover { border-color: var(--hairline-strong); background: var(--surface-hover); }
.blog-row:hover h2 { text-decoration: none; }
.blog-row .mono { color: var(--star); font-size: 11px; }
.blog-row h2 { color: var(--ink); }
.blog-date span { font: 400 44px/1 var(--display); color: var(--ink); }
.blog-date small { font-family: var(--label); font-weight: 500; letter-spacing: .1em; }

.about-grid { grid-template-columns: 190px minmax(0, 1fr); gap: 56px; border-top: 0; padding-top: 10px; }
.about-photo img { width: 168px; height: 168px; border-radius: 50%; box-shadow: 0 0 0 9px #0c121c, 0 0 0 10px var(--hairline-strong); }
.about-big { font: 400 clamp(23px, 2.8vw, 28px)/1.4 var(--display); color: var(--ink); margin-bottom: 22px; }
.about-copy h2 { font-size: 32px; }
.about-copy address { padding: 18px 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.small-note { padding-top: 56px; }

/* ---------- Footer ---------- */
.footer { margin-top: 30px; padding: 28px 0 40px; align-items: center; border-top-color: var(--hairline); }
.footer p { display: flex; align-items: center; gap: 10px; }
.footer p::before { content: "✦"; color: var(--star); }
.footer a:hover { color: var(--ink); }

/* ---------- Scroll reveal (only when JS opts in) ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .project-grid, .interest-list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body > header.nav-shell { position: relative; }
  .nav-shell { display: flex; flex-direction: column; align-items: stretch; gap: 4px; top: 0; margin-top: 12px; padding: 10px 8px 6px; border-radius: 18px; }
  .wordmark { padding-left: 10px; font-size: 20px; }
  nav { margin-top: 0; justify-content: space-between; gap: 0; }
  nav a { padding: 0 10px; min-height: 36px; font-size: 13px; }
  .home-main { padding-top: 44px; }
  .profile { grid-template-columns: minmax(0, 1fr) 92px; gap: 18px; padding-bottom: 44px; }
  .profile h1 { font-size: 52px; margin-bottom: 20px; }
  .profile-lead { font-size: 16px; }
  .avatar-orbit { width: 84px; height: 84px; }
  .avatar-orbit::before, .avatar-orbit::after { inset: -7px; }
  .pill-links { gap: 8px; margin-top: 26px; }
  .pill { min-height: 38px; padding: 0 13px; font-size: 13px; }
  .card, .paper-card { padding: 22px 20px; }
  .note-card { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .note-card time { grid-column: 1 / -1; }
  .page-hero { padding: 48px 0 30px; }
  .page-hero h1 { font-size: 48px; }
  .project-row.project-case { grid-template-columns: 26px minmax(0, 1fr); padding: 26px 20px; }
  .project-case .project-number { font-size: 22px; }
  .project-case h2 { font-size: 29px; }
  .blog-row { padding: 22px 18px; }
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-photo img { width: 116px; height: 116px; }
}
@media (max-width: 420px) {
  .profile { grid-template-columns: 1fr; }
  .profile-aside { flex-direction: row; justify-content: space-between; align-items: center; }
  .pet-dock { margin: -10px 0; }
}
@media (min-width: 1420px) { .pet-dock { margin: 0; } }
@media (prefers-reduced-motion: reduce) {
  .parallax-sky::before, .parallax-sky::after, .avatar-orbit::after { animation: none; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .nav-shell { display: none; }
  .card, .project-row.project-case, .blog-row { background: none; border-color: #ccc; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* Chinese titles read better in a sans than a Latin serif's CJK fallback. */
h1:lang(zh-CN), h2:lang(zh-CN) { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }

/* Anchor jumps land below the floating navigation. */
html { scroll-padding-top: 96px; }
.latent-prose h2, .references li { scroll-margin-top: 96px; }
@media (max-width: 680px) { html { scroll-padding-top: 20px; } .latent-prose h2, .references li { scroll-margin-top: 20px; } }

/* ---------- Polish: texture, links, rhythm ---------- */
/* Fine film grain above the sky, below content. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
time, .badges, .note-card time, .blog-date { font-variant-numeric: tabular-nums; }
a { text-decoration-color: rgba(155, 197, 225, .35); transition: color .2s, text-decoration-color .2s; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 1.5px solid var(--moon); outline-offset: 4px; border-radius: 6px; }
.pill:focus-visible, nav a:focus-visible { border-radius: 999px; outline-offset: 3px; }

/* Card index in the corner */
.card-index { position: absolute; top: 22px; right: 24px; color: rgba(167, 180, 198, .55); font: 500 11px/1 var(--label); letter-spacing: .1em; transition: color .3s; }
.card:hover .card-index { color: var(--star); }

/* Spotlight border that follows the pointer */
.card::after, .blog-row::after, .project-row.project-case::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(214, 228, 240, .5), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.blog-row, .project-row.project-case { position: relative; }
.card:hover::after, .blog-row:hover::after, .project-row.project-case:hover::after { opacity: 1; }

/* Avatar: the orbiting star quickens under the pointer */
.avatar-orbit::before { transition: border-color .5s; }
.avatar-orbit:hover::before { border-color: rgba(214, 228, 240, .34); }
.avatar-orbit .avatar { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.avatar-orbit:hover .avatar { transform: scale(1.025); }

/* Footer details */
.footer { flex-wrap: wrap; }
.footer-meta { display: flex; align-items: center; gap: 18px; color: var(--muted); font: 500 11px/1.5 var(--label); letter-spacing: .08em; }
.footer-meta [data-clock]:empty { display: none; }
.footer .to-top { display: inline-flex; align-items: center; gap: 6px; }
.footer .to-top span { transition: transform .3s; }
.footer .to-top:hover span { transform: translateY(-2px); }

/* Reading progress on long articles */
.read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 2px; pointer-events: none; transform-origin: left; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, rgba(196, 219, 234, .2), var(--moon) 70%, #fff); }

/* ---------- Motion (all opt-out under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* First paint: the hero settles in, line by line. */
  .profile-copy > *, .avatar-orbit, .page-hero > *, .article-head > *, .about-photo, .about-copy {
    animation: settle 1s cubic-bezier(.2, .7, .2, 1) both;
  }
  .profile-copy > :nth-child(2), .page-hero > :nth-child(2), .article-head > :nth-child(2) { animation-delay: .08s; }
  .profile-copy > :nth-child(3), .page-hero > :nth-child(3), .article-head > :nth-child(3), .about-photo { animation-delay: .16s; }
  .profile-copy > :nth-child(4), .article-head > :nth-child(4), .about-copy { animation-delay: .24s; }
  .profile-copy > :nth-child(5), .avatar-orbit { animation-delay: .32s; }

  /* Sections: heading line draws in, cards follow one after another. */
  .js-reveal .reveal:not(.is-visible) .section-heading { background-size: 0% 1px; }
  .js-reveal .reveal:not(.is-visible) .card { opacity: 0; transform: translateY(12px); }
  .js-reveal .reveal .card:nth-child(2) { transition-delay: 0s, 0s, .09s, .09s; }
  .js-reveal .reveal .card:nth-child(3) { transition-delay: 0s, 0s, .18s, .18s; }

  /* Cross-page fade where the browser supports it; the nav stays in place. */
  @view-transition { navigation: auto; }
  .nav-shell { view-transition-name: site-nav; }
  .parallax-sky { view-transition-name: site-sky; }
  ::view-transition-old(root) { animation: .22s ease both vt-out; }
  ::view-transition-new(root) { animation: .38s cubic-bezier(.2, .7, .2, 1) both vt-in; }
}
@keyframes settle { from { opacity: .01; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .nav-glider, .nav-shell, .avatar-orbit .avatar { transition: none; }
  .read-progress { display: none; }
}
@media print { body::after, .read-progress, .footer-meta { display: none; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Content scrolling past the floating bar dissolves into the sky instead of peeking above it. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 4; height: 92px; pointer-events: none;
  background: linear-gradient(#0b0e15 0, rgba(11, 14, 21, .86) 30%, rgba(11, 14, 21, 0));
  opacity: 0; transition: opacity .4s;
}
html.is-scrolled body::before { opacity: 1; }
@media (max-width: 680px) { body::before { display: none; } }
@media print { body::before { display: none; } }

/* Experience */
.experience-card { padding: 30px 32px; }
.exp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.experience-card h3 { font: 400 clamp(24px, 2.6vw, 28px)/1.2 var(--display); margin: 12px 0 6px; }
.experience-card h3 .arrow { display: inline-block; font-family: system-ui, sans-serif; font-size: .55em; margin-left: 8px; color: var(--muted); vertical-align: .2em; transition: transform .3s, color .3s; }
.experience-card h3 a:hover .arrow { transform: translate(2px, -2px); color: var(--ink); }
.exp-role { color: var(--muted); font-size: 14px; margin: 0; }
.exp-date { flex: none; margin: 4px 0 0; color: var(--muted); font: 500 11px/1.6 var(--label); letter-spacing: .1em; }
.exp-points { margin: 20px 0 16px; padding-left: 18px; color: var(--muted); font-size: 14.5px; line-height: 1.75; max-width: 780px; }
.exp-points li { margin-bottom: 8px; padding-left: 4px; }
.exp-points li::marker { color: var(--star); content: "✦  "; font-size: 9px; }
.project-catalog + .home-block { padding-top: 64px; }
.about-copy .facts { margin-top: 0; border-top: 0; }
.about-copy .facts > div { grid-template-columns: 110px minmax(0, 1fr); border-bottom-color: var(--hairline); padding: 14px 0; }
.about-copy .facts span { font: 500 11px/1.9 var(--label); letter-spacing: .06em; }
.about-copy .facts p { margin: 0; color: var(--muted); font-size: 14.5px; }
.about-copy .facts strong a { color: var(--ink); }
@media (max-width: 680px) {
  .exp-head { flex-direction: column-reverse; gap: 4px; }
  .experience-card { padding: 22px 20px; }
  .about-copy .facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Several papers stack with the same rhythm as other card lists. */
.paper-list { display: grid; gap: 14px; }
.inner-page .home-block .project-summary + .project-summary { margin-top: 14px; }

/* News: a quiet dated list on the home page */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--hairline);
}
.news-list li:first-child { padding-top: 4px; }
.news-list time { color: var(--muted); font: 500 11px/1.6 var(--label); letter-spacing: .1em; }
.news-list li:first-child time { color: var(--star); }
.news-list p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.news-list a { color: var(--ink); text-decoration-color: rgba(214, 228, 240, .25); }
.news-list a:hover { text-decoration-color: currentColor; }
.news-list cite { font-style: normal; }

/* Explore: one card per page */
.explore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.explore-card { display: flex; flex-direction: column; gap: 10px; min-height: 196px; }
.explore-card h3 { font: 400 30px/1.1 var(--display); margin: 0 0 4px; }
.explore-card h3 .arrow { display: inline-block; margin-left: 10px; font-family: var(--sans); font-size: .55em; color: var(--muted); vertical-align: .18em; transition: transform .3s, color .3s; }
.explore-card:hover h3 .arrow { transform: translateX(4px); color: var(--ink); }
.explore-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 420px; }
.explore-card .explore-meta { margin-top: auto; padding-top: 10px; color: rgba(167, 180, 198, .7); font: 500 11px/1.6 var(--label); letter-spacing: .1em; }
.js-reveal .reveal .card:nth-child(4) { transition-delay: 0s, 0s, .27s, .27s; }

/* About: richer fact rows */
.about-copy .facts .fact-body { min-width: 0; }
.about-copy .facts .fact-body .exp-points { margin: 10px 0 2px; font-size: 14px; }
.about-copy .facts strong { color: var(--ink); font-weight: 600; }
.about-copy h2 { scroll-margin-top: 96px; }
.about-cv { margin: 20px 0 0; }
.about-cv .pill { color: var(--ink); text-decoration: none; }

@media (max-width: 680px) {
  .news-list li { grid-template-columns: 1fr; gap: 2px; }
  .explore-grid { grid-template-columns: 1fr; }
  .explore-card { min-height: 0; }
}

/* Experience page */
.hero-actions { margin: 24px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions .pill { text-decoration: none; }
.hero-actions .pill:not(.pill--primary) { color: var(--ink); }
.edu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.edu-card .exp-date { margin: 0 0 12px; }
.edu-card h3 { font: 400 26px/1.2 var(--display); margin: 0 0 6px; }
.edu-card .edu-detail { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.cross-note { margin: 0; color: var(--muted); font-size: 14px; }
.about-cv { display: flex; flex-wrap: wrap; gap: 10px; }

/* Explore: three across, then two */
.explore-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.explore-card { grid-column: span 2; }
.explore-card:nth-child(n + 4) { grid-column: span 3; }
.js-reveal .reveal .card:nth-child(5) { transition-delay: 0s, 0s, .36s, .36s; }
@media (max-width: 860px) {
  .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore-card, .explore-card:nth-child(n + 4) { grid-column: auto; }
  .explore-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .edu-list, .explore-grid { grid-template-columns: 1fr; }
  .explore-card:last-child { grid-column: auto; }
  /* Six links: one swipeable row instead of wrapping. */
  nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav::-webkit-scrollbar { display: none; }
  nav { -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  nav a { flex: none; padding: 0 11px; }
}

/* ---------- Theme switch ---------- */
.nav-shell { justify-content: flex-start; }
.nav-shell nav { margin-left: auto; }
.theme-toggle {
  position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: 6px; padding: 0;
  border: 1px solid var(--hairline); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--ink); border-color: var(--hairline-strong); background: rgba(255, 255, 255, .05); }
.theme-toggle:focus-visible { outline-offset: 3px; border-radius: 50%; }
.theme-toggle svg { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s, transform .5s cubic-bezier(.3, .8, .2, 1); }
.theme-toggle .icon-moon { fill: currentColor; fill-opacity: .14; }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
html[data-theme="day"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
html[data-theme="day"] .theme-toggle .icon-sun { opacity: 1; transform: none; }
/* During the switch the whole page is one snapshot, revealed as a circle. */
html.theme-switching .nav-shell, html.theme-switching .parallax-sky { view-transition-name: none; }
html.theme-switching::view-transition-old(root), html.theme-switching::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (max-width: 680px) {
  .nav-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .nav-shell nav { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
  .theme-toggle { grid-column: 2; grid-row: 1; margin: 0 4px 0 0; width: 34px; height: 34px; }
}

/* ---------- Day: warm paper under a pale sky ---------- */
html[data-theme="day"] {
  --paper: #f4f1ea; --ink: #1c2430; --muted: #5a6572; --accent: #2b5a7d; --line: rgba(28, 40, 56, .12);
  --moon: #2b5a7d; --star: #2b5a7d;
  --surface: rgba(255, 255, 255, .55); --surface-hover: rgba(255, 255, 255, .82);
  --hairline: rgba(28, 40, 56, .1); --hairline-strong: rgba(28, 40, 56, .2);
  color-scheme: light; scrollbar-color: #cdc6b8 #f4f1ea;
}
html[data-theme="night"] { color-scheme: dark; }
html[data-theme="day"] body { background: #f4f1ea; color: var(--ink); }
html[data-theme="day"] ::selection { background: rgba(43, 90, 125, .16); color: var(--ink); }
html[data-theme="day"] a { text-decoration-color: rgba(43, 90, 125, .32); }
html[data-theme="day"] a:hover { text-decoration-color: currentColor; }
html[data-theme="day"] .skip-link { background: #fff; }

/* Sky: daylight wash, a low sun, and a faint star chart where the stars were. */
html[data-theme="day"] .parallax-sky { background: linear-gradient(180deg, #e7eef3 0%, #eff0ec 34%, #f4f1ea 70%); }
html[data-theme="day"] .star-tile { display: none; }
html[data-theme="day"] .parallax-sky::before {
  background:
    radial-gradient(38% 30% at 86% 2%, rgba(255, 204, 148, .42), transparent 70%),
    radial-gradient(34% 28% at 4% 16%, rgba(158, 194, 224, .34), transparent 70%),
    radial-gradient(42% 30% at 64% 100%, rgba(232, 210, 184, .34), transparent 72%);
}
html[data-theme="day"] .parallax-sky::after {
  top: 0; left: 0; width: auto; height: auto; inset: 0; border-radius: 0; opacity: 1; transform: none; animation: none;
  background: radial-gradient(circle, rgba(28, 40, 56, .14) 1px, transparent 1.4px) 0 0 / 28px 28px;
  -webkit-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, .45) 45%, transparent 90%); mask: linear-gradient(180deg, #000, rgba(0, 0, 0, .45) 45%, transparent 90%);
}
/* Paper grain darkens instead of glowing. */
html[data-theme="day"] body::after {
  opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .12 0 0 0 0 .16 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="day"] body::before { background: linear-gradient(#f1f0eb 0, rgba(241, 240, 235, .86) 30%, rgba(241, 240, 235, 0)); }

/* Navigation and controls */
html[data-theme="day"] .nav-shell { background: rgba(251, 249, 245, .72); box-shadow: 0 10px 30px -24px rgba(28, 40, 56, .45); }
html[data-theme="day"] .nav-shell.is-scrolled { background: rgba(251, 249, 245, .9); border-color: rgba(28, 40, 56, .12); box-shadow: 0 14px 40px -26px rgba(28, 40, 56, .5); }
html[data-theme="day"] nav a.active, html[data-theme="day"] .nav-glider { background: rgba(28, 40, 56, .065); box-shadow: inset 0 0 0 1px rgba(28, 40, 56, .05); }
html[data-theme="day"] nav.has-glider a.active { background: transparent; box-shadow: none; }
html[data-theme="day"] .theme-toggle:hover { background: rgba(255, 255, 255, .7); }
html[data-theme="day"] .profile h1 { color: #141b24; }
html[data-theme="day"] .pill:hover { background: rgba(255, 255, 255, .75); border-color: rgba(28, 40, 56, .32); }
html[data-theme="day"] .pill--primary { background: #1c2430; color: #f6f3ec; }
html[data-theme="day"] .pill--primary:hover { background: #0f151d; }

/* Surfaces: paper cards with a soft lift */
html[data-theme="day"] .card, html[data-theme="day"] .project-row.project-case, html[data-theme="day"] .blog-row,
html[data-theme="day"] .inner-page .home-block .project-summary, html[data-theme="day"] .about-copy address {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 34px -28px rgba(28, 40, 56, .35);
}
html[data-theme="day"] .card::before { background: radial-gradient(360px 200px at var(--mx, 80%) var(--my, 0%), rgba(43, 90, 125, .06), transparent 70%); }
html[data-theme="day"] .card::after, html[data-theme="day"] .blog-row::after, html[data-theme="day"] .project-row.project-case::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(43, 90, 125, .42), transparent 65%);
}
html[data-theme="day"] .section-heading { background-image: linear-gradient(90deg, rgba(28, 40, 56, .2), rgba(28, 40, 56, .05) 70%, transparent); }
html[data-theme="day"] .card-index { color: rgba(90, 101, 114, .6); }
html[data-theme="day"] .tags li, html[data-theme="day"] .project-case .project-side span { color: #6a7583; }
html[data-theme="day"] .explore-card .explore-meta { color: rgba(90, 101, 114, .8); }
html[data-theme="day"] .news-list a { text-decoration-color: rgba(28, 40, 56, .22); }
html[data-theme="day"] .about-photo img { box-shadow: 0 0 0 9px #f4f1ea, 0 0 0 10px var(--hairline-strong); }
html[data-theme="day"] .read-progress { background: linear-gradient(90deg, rgba(43, 90, 125, .15), var(--moon) 70%, #1c2430); }

/* Particle study and Pearlfin return to their original light palette. */
html[data-theme="day"] .particle-study { background: linear-gradient(115deg, rgba(255, 255, 255, .8), rgba(251, 249, 243, .62)); border-color: var(--hairline); }
html[data-theme="day"] .particle-study::before { background: #c8e0e8; opacity: .55; }
html[data-theme="day"] .fish-intro h2 { color: #2c3c44; }
html[data-theme="day"] .fish-intro h2 span { color: #2489bd; }
html[data-theme="day"] .fish-index, html[data-theme="day"] .fish-intro > p:last-child, html[data-theme="day"] .fish-footer > span { color: #6d787c; }
html[data-theme="day"] .fish-annotations path { stroke: #6b9fb9; opacity: .6; }
html[data-theme="day"] .fish-annotations circle { fill: #298cc1; }
html[data-theme="day"] .fish-annotations text { fill: #536b77; }
html[data-theme="day"] .fish-annotations .fish-note { fill: #7a878b; }
html[data-theme="day"] .fish-motion { background: rgba(251, 249, 243, .9); border-color: #d9e1df; color: #516c78; }
html[data-theme="day"] .fish-motion:hover { border-color: #799fac; color: #285d73; }
html[data-theme="day"] .fish-art canvas { filter: none; }
html[data-theme="day"] .fish-static { mix-blend-mode: normal; opacity: 1; }
html[data-theme="day"] .pet-motion, html[data-theme="day"] .pet-hide, html[data-theme="day"] .pet-show { background: #fbf9f4; color: #4b5560; border-color: rgba(28, 40, 56, .15); }

/* Long-form reading surfaces */
html[data-theme="day"] .equation, html[data-theme="day"] .article-toc, html[data-theme="day"] .math-block,
html[data-theme="day"] .table-scroll caption, html[data-theme="day"] .table-scroll th, html[data-theme="day"] .latent-prose code,
html[data-theme="day"] .article-tags li { background: rgba(255, 255, 255, .62); }
html[data-theme="day"] .math-block { border-left-color: rgba(43, 90, 125, .35); }
html[data-theme="day"] .latent-prose a { text-decoration-color: rgba(43, 90, 125, .35); }


/* ---------- Projects: one picture, a few lines ---------- */
.showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-bottom: 8px; }
.showcase-card { display: flex; flex-direction: column; padding: 0; }
.showcase-media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--hairline); background: #f6f6f3; }
.showcase-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.showcase-card:hover .showcase-media img { transform: scale(1.025); }
.showcase-media figcaption {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; width: fit-content; max-width: calc(100% - 20px);
  padding: 4px 10px; border-radius: 8px; background: rgba(10, 15, 24, .72); color: #dfe7ef; font-size: 11px; line-height: 1.5;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.showcase-media figcaption a { color: #fff; }
.showcase-body { position: relative; display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 26px 24px; }
.showcase-body .card-index { top: 24px; }
.showcase-body .badge { align-self: flex-start; }
.showcase-body h2 { margin: 0; font-size: 30px; line-height: 1.15; }
.showcase-body h2 a { color: var(--ink); text-decoration: none; }
.showcase-body p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.showcase-body .tags { margin-top: 2px; }
.showcase-body .card-actions { margin-top: auto; padding-top: 6px; }

/* ---------- Papers with their representative figure ---------- */
.paper-figure { margin: 0 0 22px; padding: 18px; border-radius: 10px; background: #fff; border: 1px solid var(--hairline); }
.paper-figure img { display: block; width: 100%; max-height: 300px; object-fit: contain; margin: 0 auto; }
.paper-figure figcaption { margin-top: 12px; color: #5a6572; font: 500 11px/1.5 var(--label); letter-spacing: .04em; text-align: center; }
.paper-card--figure .card-actions { position: relative; z-index: 1; }
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .showcase-body { padding: 18px 20px 22px; }
  .showcase-body h2 { font-size: 27px; }
  .paper-figure { padding: 12px; margin-bottom: 18px; }
}
.showcase-media--figure { padding: 14px; background: #fff; }
.showcase-media--figure img { object-fit: contain; }
.showcase-card:hover .showcase-media--figure img { transform: none; }
.showcase-credit { font-size: 12px !important; line-height: 1.6 !important; color: var(--muted); opacity: .85; }
.showcase-credit a { position: relative; z-index: 1; }
.paper-figure img { height: auto; }

/* Experience: organization logos in the card's right column */
.org-card { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 32px; align-items: start; }
.org-card > :not(.org-aside) { grid-column: 1; }
.org-aside { grid-column: 2; grid-row: 1 / span 6; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 14px; padding-left: 28px; border-left: 1px solid var(--hairline); }
.org-aside .exp-date { margin: 0; }
.org-logo img { display: block; width: auto; max-width: 190px; height: auto; max-height: 40px; }
#noetix .org-logo img { max-height: 30px; }
.org-logo .logo-day { display: none; }
html[data-theme="day"] .org-logo .logo-night { display: none; }
html[data-theme="day"] .org-logo .logo-day { display: block; }
.org-card .edu-detail { margin: 12px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
@media (max-width: 680px) {
  .org-card { grid-template-columns: 1fr; }
  .org-aside { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 0 16px; margin-bottom: 16px; border-left: 0; border-bottom: 1px solid var(--hairline); }
  .org-logo img { max-height: 28px; max-width: 150px; }
  #noetix .org-logo img { max-height: 22px; }
}

/* Small caps labels: Inter with case-sensitive punctuation and even figures. */
.eyebrow, .mono, .section-label, .section-index, .badge, .badges, .exp-date, .card-index, .explore-meta,
.news-list time, .footer-meta, .note-card time, .blog-date small, .tags li, .project-side span, .paper-figure figcaption,
.fish-index, .fish-footer > span {
  font-feature-settings: "case", "tnum", "cv05";
}
.badges, .badge, .exp-date, .section-index, .explore-meta, .news-list time, .card-index, .footer-meta { letter-spacing: .085em; }
.eyebrow { letter-spacing: .1em; }
.tags li { letter-spacing: .01em; font-size: 12px; }
.paper-figure figcaption { letter-spacing: .01em; font-size: 12px; }

/* ---------- Home hero: a quiet personal constellation ---------- */
.profile { position: relative; }
.profile > :not(.constellation) { position: relative; z-index: 1; }
.constellation { position: absolute; top: -40px; right: -140px; z-index: 0; width: 460px; height: 400px; pointer-events: none; overflow: visible; }
.constellation line { stroke: rgba(196, 219, 234, .26); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.constellation .orbit-trace { fill: none; stroke: rgba(196, 219, 234, .07); stroke-width: .8; stroke-dasharray: .004 .012; }
.constellation .star circle { fill: #eef3f8; }
.constellation .star .halo { fill: rgba(196, 219, 234, .14); }
.constellation .star:nth-child(3) circle:not(.halo) { fill: var(--star); }
.constellation .star:nth-child(3) .halo { fill: rgba(217, 199, 159, .2); }
.constellation text { fill: rgba(167, 180, 198, .7); font: 500 9px/1 var(--label); letter-spacing: .14em; font-feature-settings: "case", "tnum"; }
html[data-theme="day"] .constellation line { stroke: rgba(28, 40, 56, .24); }
html[data-theme="day"] .constellation .orbit-trace { stroke: rgba(28, 40, 56, .1); }
html[data-theme="day"] .constellation .star circle { fill: #1c2430; }
html[data-theme="day"] .constellation .star .halo { fill: rgba(28, 40, 56, .07); }
html[data-theme="day"] .constellation .star:nth-child(3) circle:not(.halo) { fill: var(--star); }
html[data-theme="day"] .constellation text { fill: rgba(90, 101, 114, .8); }
@media (prefers-reduced-motion: no-preference) {
  .constellation line { stroke-dashoffset: 1; animation: draw-line 1.4s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.45s + var(--i) * .14s); }
  .constellation .star { opacity: 0; animation: star-in .8s ease-out forwards, twinkle-star 6s ease-in-out infinite; animation-delay: calc(.35s + var(--i) * .14s), calc(1.6s + var(--i) * .9s); }
  .constellation text { opacity: 0; animation: star-in 1s ease-out 1.6s forwards; }
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes star-in { to { opacity: 1; } }
@keyframes twinkle-star { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 1180px) { .constellation { display: none; } }

/* A horizon between the hero and the particle study */
.profile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong) 30%, var(--hairline-strong) 70%, transparent);
}
.profile::before {
  content: "✦"; position: absolute; left: 50%; bottom: 13px; z-index: 1; transform: translateX(-50%);
  padding: 0 12px; background: transparent; color: var(--star); font-size: 12px; line-height: 18px;
  text-shadow: 0 0 12px rgba(217, 199, 159, .55);
}
.profile { padding-bottom: 76px; }

/* ---------- Recently: a timeline of small stars ---------- */
.news-list { position: relative; }
.news-list::before { content: ""; position: absolute; top: 10px; bottom: 12px; left: 126px; width: 1px; background: linear-gradient(var(--hairline-strong), var(--hairline) 80%, transparent); }
.news-list li { grid-template-columns: 112px minmax(0, 1fr); gap: 40px; padding: 13px 0; border-bottom: 0; position: relative; }
.news-list li::before {
  content: ""; position: absolute; left: 123px; top: 22px; width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--paper, #0e1623); border: 1px solid var(--hairline-strong);
}
.news-list li:first-child::before { top: 13px; background: var(--star); border-color: var(--star); box-shadow: 0 0 0 4px rgba(217, 199, 159, .12), 0 0 14px rgba(217, 199, 159, .5); }
.news-list li:first-child { padding-top: 4px; }
html[data-theme="day"] .news-list li::before { background: #f4f1ea; }
html[data-theme="day"] .news-list li:first-child::before { background: var(--star); box-shadow: 0 0 0 4px rgba(43, 90, 125, .1); animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .news-list li:first-child::before { animation: pulse-star 3.2s ease-in-out infinite; }
}
@keyframes pulse-star { 0%, 100% { box-shadow: 0 0 0 4px rgba(217, 199, 159, .12), 0 0 14px rgba(217, 199, 159, .5); } 50% { box-shadow: 0 0 0 6px rgba(217, 199, 159, .05), 0 0 20px rgba(217, 199, 159, .25); } }
@media (max-width: 680px) {
  .news-list::before { left: 3px; }
  .news-list li { grid-template-columns: 1fr; gap: 2px; padding: 11px 0 11px 22px; }
  .news-list li::before { left: 0; top: 17px; }
  .news-list li:first-child::before { top: 9px; }
}

/* ---------- Page headers: each page has its own small constellation ---------- */
.page-hero { position: relative; }
.page-hero > :not(.page-constellation) { position: relative; z-index: 1; }
.page-constellation { position: absolute; top: 40px; right: 0; width: 290px; height: 200px; pointer-events: none; overflow: visible; }
.page-constellation line { stroke: rgba(196, 219, 234, .26); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.page-constellation .star circle { fill: #eef3f8; }
.page-constellation .star .halo { fill: rgba(196, 219, 234, .12); }
.page-constellation .star--gold circle:not(.halo) { fill: var(--star); }
.page-constellation .star--gold .halo { fill: rgba(217, 199, 159, .2); }
html[data-theme="day"] .page-constellation line { stroke: rgba(28, 40, 56, .24); }
html[data-theme="day"] .page-constellation .star circle { fill: #1c2430; }
html[data-theme="day"] .page-constellation .star .halo { fill: rgba(28, 40, 56, .06); }
html[data-theme="day"] .page-constellation .star--gold circle:not(.halo) { fill: var(--star); }
@media (prefers-reduced-motion: no-preference) {
  .page-constellation line { stroke-dashoffset: 1; animation: draw-line 1.3s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.35s + var(--i) * .14s); }
  .page-constellation .star { opacity: 0; animation: star-in .8s ease-out forwards, twinkle-star 6s ease-in-out infinite; animation-delay: calc(.25s + var(--i) * .14s), calc(1.5s + var(--i) * .9s); }
}
@media (max-width: 1000px) { .page-constellation { display: none; } }

/* ---------- Research: Abstract and BibTeX drawers ---------- */
.paper-toggle { cursor: pointer; font: inherit; font-size: 13px; }
.paper-toggle[aria-expanded="true"] { border-color: var(--hairline-strong); background: rgba(255, 255, 255, .06); color: var(--ink); }
html[data-theme="day"] .paper-toggle[aria-expanded="true"] { background: rgba(28, 40, 56, .06); }
.paper-drawer { position: relative; z-index: 1; margin-top: 14px; padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 10px; background: rgba(255, 255, 255, .025); }
html[data-theme="day"] .paper-drawer { background: rgba(255, 255, 255, .6); }
.paper-drawer p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 820px; }
.paper-drawer--bib pre { margin: 0; overflow-x: auto; }
.paper-drawer--bib code { font: 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); white-space: pre; background: none; }
.copy-bib {
  position: absolute; top: 12px; right: 12px; padding: 4px 12px; border: 1px solid var(--hairline-strong); border-radius: 999px;
  background: transparent; color: var(--muted); font: 500 11px/1.6 var(--label); letter-spacing: .06em; cursor: pointer;
}
.copy-bib:hover { color: var(--ink); border-color: rgba(214, 228, 240, .42); }
@media (prefers-reduced-motion: no-preference) { .paper-drawer:not([hidden]) { animation: drawer-in .35s cubic-bezier(.2, .7, .2, 1); } }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Experience: cards on a timeline rail ---------- */
.rail { position: relative; padding-left: 38px; }
.rail::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--hairline-strong), var(--hairline) 70%, transparent); }
.rail::after {
  content: ""; position: absolute; left: 2px; top: 34px; width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--star); box-shadow: 0 0 0 4px rgba(217, 199, 159, .12), 0 0 14px rgba(217, 199, 159, .45);
}
html[data-theme="day"] .rail::after { box-shadow: 0 0 0 4px rgba(43, 90, 125, .1); }
@media (max-width: 680px) { .rail { padding-left: 24px; } .rail::before { left: 4px; } .rail::after { left: 0; top: 26px; width: 8px; height: 8px; } }

/* ---------- Long article: contents in the left margin, following the reader ---------- */
.article-toc a.is-current { color: var(--ink); }
@media (min-width: 1380px) {
  .latent-article .article-toc {
    position: fixed; top: 112px; left: calc(50% - 400px - 276px); z-index: 2; width: 236px; max-height: calc(100vh - 150px); overflow: auto;
    margin: 0; padding: 4px 0 4px 2px; background: none !important; border: 0; border-radius: 0; font-size: 12.5px;
    scrollbar-width: none; transition: opacity .3s;
  }
  .latent-article .article-toc::-webkit-scrollbar { display: none; }
  .latent-article .article-toc.is-away { opacity: 0; pointer-events: none; }
  .latent-article .article-toc summary { list-style: none; pointer-events: none; margin-bottom: 10px; color: var(--muted); font: 500 11px/1.6 var(--label); letter-spacing: .1em; text-transform: uppercase; min-height: 0; }
  .latent-article .article-toc summary::-webkit-details-marker { display: none; }
  .latent-article .article-toc ol { display: block; margin: 0; padding: 0; list-style: none; }
  .latent-article .article-toc li { position: relative; padding: 5px 0 5px 14px; line-height: 1.5; border-left: 1px solid var(--hairline); }
  .latent-article .article-toc a { color: var(--muted); }
  .latent-article .article-toc a:hover, .latent-article .article-toc a.is-current { color: var(--ink); }
  .latent-article .article-toc li:has(a.is-current) { border-left-color: var(--star); }
}

/* ---------- Day: sunlight through leaves instead of stars ---------- */
/* Constellations belong to the night; by day the hero shows the sun's path over Nagoya. */
.sunpath { display: none; }
html[data-theme="day"] .constellation, html[data-theme="day"] .page-constellation { display: none; }
html[data-theme="day"] .sunpath { display: block; position: absolute; top: -40px; right: -140px; z-index: 0; width: 460px; height: 400px; pointer-events: none; overflow: visible; }
.sunpath .arc { fill: none; stroke: rgba(43, 90, 125, .26); stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sunpath .hours text, .sunpath .note { fill: rgba(90, 101, 114, .75); font: 500 9px/1 var(--label); letter-spacing: .14em; font-feature-settings: "case", "tnum"; }
/* By day the sun is drawn in ink, like a figure in a field notebook. */
.sunpath .sun circle { fill: #f4f1ea; stroke: #2b5a7d; stroke-width: 1.2; }
.sunpath .sun .halo { fill: rgba(43, 90, 125, .07); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="day"] .sunpath .arc { stroke-dashoffset: 1; animation: draw-line 1.8s cubic-bezier(.4, 0, .2, 1) .3s forwards; }
  html[data-theme="day"] .sunpath .sun .halo { animation: sun-breathe 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes sun-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .6; } }
@media (max-width: 1180px) { html[data-theme="day"] .sunpath { display: none; } }

/* Daylight through glass: two soft beams fall across the paper, their edges
   split into a faint prism fringe, and they drift slowly. */
html[data-theme="day"] .parallax-sky::after {
  inset: auto; top: -30vh; right: -8vw; left: auto; width: min(980px, 82vw); height: 160vh; border-radius: 0;
  background: linear-gradient(90deg,
    transparent 0,
    rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, .78) 24%, rgba(255, 255, 255, .78) 31%,
    rgba(255, 190, 196, .34) 34%, rgba(255, 228, 168, .34) 37%, rgba(184, 232, 202, .3) 40%,
    rgba(172, 206, 255, .34) 43%, rgba(212, 186, 255, .24) 46%, transparent 52%,
    transparent 62%, rgba(255, 255, 255, .5) 68%, rgba(255, 255, 255, .5) 72%,
    rgba(196, 220, 255, .22) 75%, transparent 80%);
  filter: blur(16px); -webkit-mask: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, .6) 55%, transparent 85%);
  mask: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, .6) 55%, transparent 85%);
  opacity: .85; mix-blend-mode: normal; transform-origin: 50% 0; transform: rotate(28deg); animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="day"] .parallax-sky::after { animation: light-drift 16s ease-in-out infinite alternate; }
}
@keyframes light-drift {
  from { transform: rotate(28deg) translate3d(0, 0, 0); opacity: .85; }
  to { transform: rotate(26.5deg) translate3d(-36px, 0, 0); opacity: .6; }
}
@media (max-width: 680px) { html[data-theme="day"] .parallax-sky::after { width: 150vw; right: -40vw; } }

/* Day keeps to ink and paper: no gold, no glow. */
html[data-theme="day"] .profile::before { text-shadow: none; }

/* About: email above the postal address */
.contact-email { margin: 0 0 14px; }
.contact-email .pill { color: var(--ink); text-decoration: none; }
/* The email is stored reversed so scrapers miss it; this shows it the right way round without script. */
.mail-text { unicode-bidi: bidi-override; direction: rtl; }
.mail-text.is-plain { unicode-bidi: normal; direction: ltr; }

/* 404: one star has left its constellation */
.lost h1 { max-width: 760px; }
.lost .star--drift { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .lost .star--drift { animation: star-in .8s ease-out forwards, drift-away 9s ease-in-out 1.2s infinite alternate; }
}
@keyframes drift-away { to { transform: translate(10px, -8px); } }

/* About: the portrait stays beside the text while it scrolls */
@media (min-width: 681px) { .about-photo { position: sticky; top: 112px; align-self: start; } }

/* =====================================================================
   Editorial layer: on Research, Experience, Blog and About, text sits on
   hairlines and whitespace instead of boxes. Home and Projects keep cards.
   ===================================================================== */
.interest-list .card, .paper-card--figure, .org-card, .blog-row {
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
.interest-list .card::before, .interest-list .card::after, .paper-card--figure::before, .paper-card--figure::after,
.org-card::before, .org-card::after, .blog-row::after { display: none; }
.interest-list .card:hover, .paper-card--figure:hover, .org-card:hover, .blog-row:hover { background: none; border-color: transparent; transform: none; }
html[data-theme="day"] .interest-list .card, html[data-theme="day"] .paper-card--figure,
html[data-theme="day"] .org-card, html[data-theme="day"] .blog-row { box-shadow: none; }


/* ---- Research directions: three columns divided by hairlines ---- */
.interest-list { gap: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.interest-list .card { padding: 26px 28px 30px; }
.interest-list .card + .card { border-left: 1px solid var(--hairline); }
.interest-list .card:first-child { padding-left: 4px; }
.interest-list .card .card-index { top: 26px; right: 24px; }

/* ---- Papers: figure beside the text, papers divided by a rule ---- */
.paper-list { gap: 0; }
.paper-card--figure {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: start;
  padding: 36px 0; border-top: 1px solid var(--hairline);
}
.paper-card--figure:last-child { border-bottom: 1px solid var(--hairline); }
.paper-card--figure > .paper-figure { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
.paper-card--figure > :not(.paper-figure) { grid-column: 2; }
.paper-card--figure > .paper-drawer { grid-column: 1 / -1; }
.paper-card--figure h3 { margin-top: 10px; }
.paper-card--figure .paper-figure img { max-height: 240px; }

/* ---- Experience: entries on the rail without boxes ---- */
.org-card { padding: 6px 0 10px; }
.rail { padding-bottom: 6px; }
.rail::after { top: 16px; }
.org-aside { border-left-color: var(--hairline); }

/* ---- Blog: one rule per post ---- */
.blog-list { display: block; border-bottom: 1px solid var(--hairline); }
.blog-row { padding: 30px 4px; border-top: 1px solid var(--hairline); }
.blog-row h2 { transition: color .25s; }
.blog-row:hover h2 { color: #fff; }
html[data-theme="day"] .blog-row:hover h2 { color: #0f151d; }

/* ---- About: the address reads as a quiet block ---- */
.about-copy address { border: 0; border-left: 1px solid var(--hairline-strong); border-radius: 0; background: none; padding: 4px 0 4px 18px; }

/* Responsive */
@media (max-width: 980px) {
  .paper-card--figure { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .paper-card--figure > .paper-figure, .paper-card--figure > :not(.paper-figure) { grid-column: 1; grid-row: auto; }
  .paper-card--figure > .paper-figure { margin-bottom: 12px; }
}
@media (max-width: 860px) {
  .interest-list .card, .interest-list .card:first-child { padding: 22px 4px 24px; }
  .interest-list .card + .card { border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (max-width: 680px) {
  .blog-row { padding: 22px 2px; }
}
/* The section rule already opens each list, so the first row needs no top line. */
.paper-card--figure:first-child { border-top: 0; }
.interest-list { border-top: 0; }
.paper-card--figure:first-child { padding-top: 12px; }