/* ──────────────────────────────────────────────────────────────────────────
   Portfolio — Ioannis D. Leonidas
   Quantum / experimental aesthetic, dual theme, multi-page
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --accent-h: 150;
  --accent: var(--fg);
  --accent-soft: color-mix(in oklab, var(--fg) 18%, transparent);
  --density: 1;
  --motion: 0.6;

  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --f-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

:root {
  --bg: #0a0b0d;
  --bg-2: #101216;
  --fg: #ece9e1;
  --fg-2: #d4cfc1;
  --fg-3: #8a8779;
  --line: oklch(0.32 0.01 80);
  --line-2: oklch(0.24 0.01 80);
  --paper: #0f1115;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f4f1ea;
  --bg-2: #ebe7dd;
  --fg: #14161a;
  --fg-2: #2a2c30;
  --fg-3: #5a5b5e;
  --line: oklch(0.72 0.01 80);
  --line-2: oklch(0.82 0.01 80);
  --paper: #efebe1;
  --accent: var(--fg);
  --accent-soft: color-mix(in oklab, var(--fg) 16%, transparent);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.app { position: relative; min-height: 100vh; isolation: isolate; overflow-x: clip; }

.shell { max-width: 1440px; margin: 0 auto; padding: 0 calc(32px * var(--density)); width: 100%; }

/* ── topbar ────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-2);
}
.tb-brand { display: flex; align-items: center; gap: 10px; color: var(--fg); cursor: pointer; }
.tb-brand .glyph-mini {
  width: 22px; height: 22px;
  display: grid; place-items: center; position: relative;
  color: var(--accent);
}
.tb-brand .glyph-mini::before {
  /* triple-slit / ket symbol — quantum nod, not a square */
  content: "|ψ⟩";
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: -0.04em;
  color: currentColor;
  line-height: 1;
}
.tb-nav { display: flex; gap: 22px; color: var(--fg-3); }
.tb-nav button { padding: 4px 0; position: relative; transition: color .2s; }
.tb-nav button:hover { color: var(--fg); }
.tb-nav button.active { color: var(--fg); }
.tb-nav button.active::after {
  content: ""; position: absolute; bottom: -19px; left: 0; right: 0;
  height: 2px; background: var(--accent);
}
.tb-side { display: flex; gap: 18px; align-items: center; color: var(--fg-2); }
.tb-side .clock { color: var(--fg); }
.theme-toggle {
  width: 28px; height: 18px; border: 1px solid var(--line);
  border-radius: 999px; position: relative; display: inline-block;
}
.theme-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fg); transition: transform 0.3s;
}
[data-theme="light"] .theme-toggle::after { transform: translateX(10px); }

/* ── ambient bg ─────────────────────────────────────────────────────── */
.qbg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  color: var(--fg-3); overflow: hidden;
}
.qbg > div { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
:root[data-bg="mono"]     .qbg-mono     { opacity: 1; }
:root[data-bg="spectrum"] .qbg-spectrum { opacity: 1; }
:root[data-bg="aurora"]   .qbg-aurora   { opacity: 1; }
:root[data-bg="confetti"] .qbg-confetti { opacity: 1; }
:root[data-bg="quest"]    .qbg-quest-wrap { opacity: 1; }
:root:not([data-bg]) .qbg-mono { opacity: 1; }
.qbg-lattice { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.6; }

/* MONO — playful colorful Memphis-style scene */
.qbg-play {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 66.666%;
  pointer-events: none;
  overflow: hidden;
}
.pp { position: absolute; }

/* color tokens — readable on light, slightly desaturated on dark */
.pp-blue   { --c: #2f6bd6; }
.pp-red    { --c: #e0463a; }
.pp-green  { --c: #2ea96b; }
.pp-purple { --c: #7a4ed1; }
.pp-black  { --c: #0a0a0a; }
[data-theme="dark"] .pp-blue   { --c: #6ea2ff; }
[data-theme="dark"] .pp-red    { --c: #ff8a7c; }
[data-theme="dark"] .pp-green  { --c: #6ee0a3; }
[data-theme="dark"] .pp-purple { --c: #b69cff; }
[data-theme="dark"] .pp-black  { --c: #fafafa; }

.pp-stroke-purple { color: #7a4ed1; }
.pp-stroke-green  { color: #2ea96b; }
[data-theme="dark"] .pp-stroke-purple { color: #b69cff; }
[data-theme="dark"] .pp-stroke-green  { color: #6ee0a3; }

/* big circle */
.pp-circle {
  width: 180px; height: 180px; border-radius: 50%;
  background: var(--c); opacity: 0.85;
  top: 6%; right: 8%;
  animation: pp-float-a 18s ease-in-out infinite;
}
/* solid square (rotated) */
.pp-square {
  width: 90px; height: 90px;
  background: var(--c); opacity: 0.9;
  top: 60%; left: 12%;
  animation: pp-float-b 22s ease-in-out infinite;
}
/* triangle */
.pp-triangle {
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid var(--c);
  opacity: 0.9;
  top: 30%; left: 6%;
  animation: pp-float-c 26s ease-in-out infinite;
}
/* hollow ring */
.pp-ring {
  width: 130px; height: 130px; border-radius: 50%;
  border: 11px solid var(--c); opacity: 0.85;
  bottom: 12%; right: 14%;
  animation: pp-float-a 24s ease-in-out infinite reverse;
}
/* organic blob */
.pp-blob {
  width: 130px; height: 130px;
  background: var(--c); opacity: 0.92;
  top: 42%; right: 6%;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  animation: pp-float-b 30s ease-in-out infinite;
}
/* dots scattered */
.pp-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); opacity: 0.9; }
.pp-dot:nth-of-type(6) { top: 24%; left: 50%; animation: pp-pulse 5s ease-in-out infinite; }
.pp-dot:nth-of-type(7) { top: 78%; left: 40%; animation: pp-pulse 6s ease-in-out infinite -2s; }
.pp-dot:nth-of-type(8) { top: 88%; right: 14%; animation: pp-pulse 4.5s ease-in-out infinite -1s; }
.pp-dot:nth-of-type(9) { top: 18%; left: 30%; animation: pp-pulse 7s ease-in-out infinite -3s; }

/* squiggles */
.pp-squiggle {
  width: 160px; height: 32px; opacity: 0.9;
}
.pp-squiggle:nth-of-type(10) { top: 52%; left: 8%; animation: pp-float-c 28s ease-in-out infinite; }
.pp-squiggle:nth-of-type(11) { bottom: 28%; right: 4%; animation: pp-float-c 32s ease-in-out infinite -8s; }

/* plus / cross marks */
.pp-cross {
  width: 28px; height: 28px;
  background:
    linear-gradient(var(--c), var(--c)) center/100% 4px no-repeat,
    linear-gradient(var(--c), var(--c)) center/4px 100% no-repeat;
  opacity: 0.85;
}
.pp-cross:nth-of-type(12) { top: 14%; left: 56%; animation: pp-spin 24s linear infinite; }
.pp-cross:nth-of-type(13) { bottom: 36%; left: 42%; animation: pp-spin 30s linear infinite reverse; }

/* bars */
.pp-bar { width: 70px; height: 12px; background: var(--c); opacity: 0.9; border-radius: 2px; }
.pp-bar:nth-of-type(14) { top: 70%; right: 22%; transform: rotate(-12deg); animation: pp-float-a 20s ease-in-out infinite; }
.pp-bar:nth-of-type(15) { top: 8%; left: 26%;  transform: rotate(28deg); animation: pp-float-b 26s ease-in-out infinite -6s; }

.pp-triangle, .pp-square, .pp-bar, .pp-cross, .pp-squiggle { display: none; }

@keyframes pp-float-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-18px, 22px); }
}
@keyframes pp-float-b {
  0%, 100% { transform: translate(0, 0) rotate(8deg); }
  50%      { transform: translate(20px, -16px) rotate(-6deg); }
}
@keyframes pp-float-c {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50%      { transform: translate(-14px, -18px) rotate(6deg); }
}
@keyframes pp-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.6); opacity: 0.5; }
}
@keyframes pp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pp { animation: none !important; }
}
@media (max-width: 900px) {
  .qbg-play { width: 50%; opacity: 0.5; }
  .pp-circle, .pp-blob { width: 110px; height: 110px; }
  .pp-triangle { border-left-width: 38px; border-right-width: 38px; border-bottom-width: 66px; }
  .pp-ring { width: 90px; height: 90px; border-width: 8px; }
}

/* QUEST — Greek beach scene */
.qbg-quest-wrap { position: absolute; inset: 0; }
.qbg-beach { position: absolute; inset: 0; overflow: hidden; }

.bch-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #6cb1d9 0%, #9ecde6 35%, #cfe7f0 60%,
    #f5e9c2 70%, #f5e9c2 72%, transparent 72%);
}
[data-theme="dark"] .bch-sky {
  background: linear-gradient(180deg,
    #1d3454 0%, #2c5078 40%, #4a7299 65%,
    #d49a6a 70%, #d49a6a 72%, transparent 72%);
}

.bch-sun { position: absolute; top: 14%; right: 18%; width: 90px; height: 90px; pointer-events: none; }
.bch-sun-halo {
  position: absolute; inset: -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,224,140,0.55), transparent 60%);
  animation: bch-pulse 4s ease-in-out infinite;
}
.bch-sun-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7c8, #ffd76a 60%, #f4a83a 100%);
}
[data-theme="dark"] .bch-sun-disc {
  background: radial-gradient(circle at 35% 35%, #fff2d4, #f3a563 60%, #d97a2e 100%);
}
@keyframes bch-pulse { 50% { transform: scale(1.06); opacity: 0.85; } }

.bch-gull {
  position: absolute; width: 22px; height: 8px;
  background:
    radial-gradient(ellipse 11px 4px at 25% 100%, transparent 49%, rgba(40,50,70,0.85) 50%, rgba(40,50,70,0.85) 55%, transparent 56%) no-repeat 0 0 / 50% 100%,
    radial-gradient(ellipse 11px 4px at 75% 100%, transparent 49%, rgba(40,50,70,0.85) 50%, rgba(40,50,70,0.85) 55%, transparent 56%) no-repeat 100% 0 / 50% 100%;
  animation: bch-gull-fly 90s linear infinite;
}
[data-theme="dark"] .bch-gull {
  background:
    radial-gradient(ellipse 11px 4px at 25% 100%, transparent 49%, rgba(220,220,230,0.7) 50%, rgba(220,220,230,0.7) 55%, transparent 56%) no-repeat 0 0 / 50% 100%,
    radial-gradient(ellipse 11px 4px at 75% 100%, transparent 49%, rgba(220,220,230,0.7) 50%, rgba(220,220,230,0.7) 55%, transparent 56%) no-repeat 100% 0 / 50% 100%;
}
.bch-g1 { top: 16%; animation-duration: 90s; }
.bch-g2 { top: 22%; animation-duration: 110s; animation-delay: -40s; }
.bch-g3 { top: 12%; animation-duration: 130s; animation-delay: -70s; transform: scale(0.7); }
@keyframes bch-gull-fly {
  0%   { left: -5%;  transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { left: 105%; transform: translateY(0); }
}

.bch-island {
  position: absolute; bottom: 32%; left: 6%;
  width: 240px; height: 60px;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4));
}

.bch-sea {
  position: absolute; left: 0; right: 0; top: 60%; bottom: 14%;
  background: linear-gradient(180deg, #4a8db5 0%, #2e6f9e 60%, #1f5784 100%);
  overflow: hidden;
}
[data-theme="dark"] .bch-sea {
  background: linear-gradient(180deg, #1a3a5e 0%, #0f2542 60%, #08172e 100%);
}
.bch-wave {
  position: absolute; left: -10%; right: -10%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 14px, transparent 14px 32px);
  animation: bch-wave-drift 12s linear infinite;
}
[data-theme="dark"] .bch-wave {
  background: repeating-linear-gradient(90deg, rgba(180,210,235,0.35) 0 14px, transparent 14px 32px);
}
.bch-wave.w1 { top: 18%; opacity: 0.55; }
.bch-wave.w2 { top: 38%; opacity: 0.7;  animation-duration: 9s;  animation-direction: reverse; }
.bch-wave.w3 { top: 58%; opacity: 0.6;  animation-duration: 11s; }
.bch-wave.w4 { top: 78%; opacity: 0.4;  animation-duration: 14s; animation-direction: reverse; }
@keyframes bch-wave-drift { to { transform: translateX(46px); } }

.bch-boat {
  position: absolute; bottom: 22%; left: -8%;
  animation: bch-boat-sail 60s linear infinite;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.12));
}
.bch-boat-bob { animation: bch-boat-bob 3.5s ease-in-out infinite; }
@keyframes bch-boat-sail { to { left: 108%; } }
@keyframes bch-boat-bob { 50% { transform: translateY(-2px) rotate(-1.2deg); } }

.bch-house {
  position: absolute; bottom: 14%; right: 4%;
  width: 110px; height: 86px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.10));
}

.bch-sand {
  position: absolute; bottom: 0; left: 0; right: 0; height: 14%;
  background: radial-gradient(ellipse at 50% 0%, #f3d99c 0%, #e8c075 60%, #c89854 100%);
}
[data-theme="dark"] .bch-sand {
  background: radial-gradient(ellipse at 50% 0%, #6b5230 0%, #553f23 60%, #38291a 100%);
}
.bch-pebble { position: absolute; border-radius: 50%; background: rgba(80,60,40,0.4); }
[data-theme="dark"] .bch-pebble { background: rgba(20,14,10,0.6); }
.bch-pebble.p1 { left: 12%; bottom: 30%; width: 8px; height: 4px; }
.bch-pebble.p2 { left: 40%; bottom: 50%; width: 5px; height: 3px; }
.bch-pebble.p3 { left: 75%; bottom: 25%; width: 7px; height: 4px; }

.bch-foam {
  position: absolute; left: 0; right: 0; bottom: 13.5%; height: 4px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.85) 0 18px, rgba(255,255,255,0.3) 18px 38px);
  animation: bch-wave-drift 7s linear infinite;
  opacity: 0.7;
}
[data-theme="dark"] .bch-foam { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .bch-sun-halo, .bch-gull, .bch-wave, .bch-foam, .bch-boat, .bch-boat-bob { animation: none !important; }
}

/* Background unified across all pages.
   For the beach scene, blend topbar/footer into sky/sand on every page.
   For mono (playful), keep the topbar/footer translucent so the colorful
   shapes can drift behind them without being clipped. */
[data-bg="quest"] .topbar,
[data-bg="mono"]  .topbar {
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: transparent;
}
[data-bg="quest"] .app-footer,
[data-bg="mono"]  .app-footer {
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top-color: transparent;
}
[data-bg="quest"] .topbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-bg="quest"] .app-footer { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* SPECTRUM */
.qbg-spectrum .blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  animation-name: blob-drift; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out;
}
[data-theme="light"] .qbg-spectrum .blob { mix-blend-mode: multiply; opacity: 0.55; filter: blur(90px); }
.qbg-spectrum .b1 { width: 520px; height: 520px; left: -8%;  top: -10%; background: oklch(0.72 0.18 25);  }
.qbg-spectrum .b2 { width: 600px; height: 600px; right: -10%; top: 10%; background: oklch(0.72 0.18 220); }
.qbg-spectrum .b3 { width: 480px; height: 480px; left: 20%;  bottom: -15%; background: oklch(0.78 0.16 145); }
.qbg-spectrum .b4 { width: 380px; height: 380px; right: 15%; bottom: -10%; background: oklch(0.74 0.18 320); }
@keyframes blob-drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-30px, 40px) scale(0.95); }
}

/* AURORA */
.qbg-aurora { overflow: hidden; }
.qbg-aurora .ribbon {
  position: absolute; left: -20%; right: -20%;
  height: 380px; border-radius: 50%;
  filter: blur(70px); opacity: 0.7;
  mix-blend-mode: screen;
  animation-name: aurora-flow; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out;
}
[data-theme="light"] .qbg-aurora .ribbon { mix-blend-mode: multiply; opacity: 0.5; }
.qbg-aurora .r1 { top: 8%;  background: linear-gradient(90deg, transparent, oklch(0.78 0.20 320) 30%, oklch(0.80 0.18 200) 70%, transparent); transform: rotate(-6deg); }
.qbg-aurora .r2 { top: 38%; background: linear-gradient(90deg, transparent, oklch(0.80 0.18 180) 25%, oklch(0.78 0.20 280) 75%, transparent); transform: rotate(4deg); }
.qbg-aurora .r3 { top: 65%; background: linear-gradient(90deg, transparent, oklch(0.82 0.16 80) 30%, oklch(0.78 0.20 330) 70%, transparent); transform: rotate(-3deg); }
@keyframes aurora-flow {
  0%   { transform: translate3d(-4%, 0, 0) rotate(-6deg) scaleY(1); }
  100% { transform: translate3d(4%, 0, 0)  rotate(-3deg) scaleY(1.15); }
}

/* CONFETTI */
.qbg-confetti .dot {
  position: absolute; border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
  animation-name: dot-float; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate;
}
@keyframes dot-float {
  0%   { transform: translate(0,0) scale(1); opacity: 0.8; }
  100% { transform: translate(20px, -30px) scale(1.2); opacity: 0.4; }
}
@keyframes qbgSpin { to { transform: rotate(360deg); } }
@keyframes qbgSpinR { to { transform: rotate(-360deg); } }
@keyframes qbgPulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.4); }
}

.app > main { position: relative; z-index: 1; }

/* ── page transitions ──────────────────────────────────────────────── */
.page {
  padding: calc(60px * var(--density)) 0 calc(80px * var(--density));
  animation: pageIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-head { margin-bottom: 56px; max-width: 70ch; }

/* ── Terminal-styled page title ───────────────────────────────────── */
.term {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg-2) 92%, transparent);
  font-family: var(--f-mono);
  margin-bottom: 28px;
  width: fit-content;
  max-width: 100%;
  flex: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  border-radius: 4px;
  overflow: hidden;
}
.term-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-2);
  background: color-mix(in oklab, var(--bg-2) 60%, transparent);
}
.term-dots { display: inline-flex; gap: 6px; }
.term-dot { width: 9px; height: 9px; border-radius: 50%; opacity: 0.65; }
.term-dot.r { background: #ff5f56; }
.term-dot.y { background: #ffbd2e; }
.term-dot.g { background: #27c93f; }
.term-body {
  padding: 10px 14px;
  display: flex; flex-direction: column;
}
.term-line {
  font-size: 12.5px; color: var(--fg-2);
  letter-spacing: 0.02em;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0;
  white-space: nowrap;
}
.term-prompt { color: var(--accent); }
.term-sep { color: var(--fg-3); margin: 0 1px; }
.term-cwd { color: var(--fg); }
.term-cmd { color: var(--fg); margin-left: 8px; }
.term-cursor {
  display: inline-block;
  width: 0.55ch; height: 1em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: -0.14em;
  animation: term-blink 1.05s steps(2, start) infinite;
}
@keyframes term-blink {
  to { visibility: hidden; }
}
.ph-kicker {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--fg-3); margin-bottom: 24px;
}
.ph-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 68px); line-height: 1.18;
  letter-spacing: -0.025em; margin: 0 0 36px; color: var(--fg);
  padding-bottom: 0.18em;
  text-wrap: balance;
}
.ph-title em { font-style: italic; color: var(--accent); }
.ph-sub {
  font-size: 17px; line-height: 1.55; color: var(--fg-2);
  margin: 0; max-width: 60ch; text-wrap: pretty;
}

/* ── section labels ────────────────────────────────────────────────── */
.section-label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--fg-3);
  margin-bottom: 28px;
}
.sl-mark { color: var(--accent); font-size: 14px; line-height: 1; }
.sl-divider { flex: 0 0 48px; height: 1px; background: var(--line); }
.sl-name { color: var(--fg-2); }

.section-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 5vw, 64px); line-height: 1.06;
  letter-spacing: -0.02em; margin: 0 0 40px;
  max-width: 14ch; color: var(--fg);
}
.section-title em { font-style: italic; color: var(--accent); }
.sub-title {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-2); margin: 0 0 20px; font-weight: 500;
}

.pill {
  display: inline-flex; align-items: center;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em;
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--fg-2);
  background: color-mix(in oklab, var(--bg) 50%, transparent);
}

/* ── HOME ──────────────────────────────────────────────────────────── */
.page-home { padding-top: calc(40px * var(--density)); }
.hero-coords {
  display: flex; gap: 10px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--fg-3); margin-bottom: 60px;
}
.hero-stack {
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 880px; margin-bottom: 120px;
}

/* Threads — what I think about, replaces the experience block on home */
.threads {
  margin-top: 32px; padding-top: 36px;
  border-top: 1px solid var(--line-2);
}
.threads-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.threads-head .th-mark { color: var(--accent); }
.thread-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2);
}
.thread {
  background: var(--paper);
  padding: 24px 26px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background .25s ease;
}
.thread:hover { background: var(--bg-2); }
.thread-tag {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.10em; color: var(--accent);
  text-transform: uppercase;
}
.thread-body {
  font-size: 15px; line-height: 1.5; color: var(--fg-2);
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .thread-list { grid-template-columns: 1fr; }
}

/* Tag list — research interests */
.tag-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag-chip {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--fg-2);
  padding: 6px 11px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper);
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--fg-2);
  padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 999px; margin-bottom: 32px;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

.hero-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.3;
  letter-spacing: -0.02em; margin: 0 0 28px; color: var(--fg);
  padding-bottom: 4px;
  width: 100%;
}
.hero-line { display: block; }
.hero-line.italic { font-style: italic; color: var(--accent); }
.hero-title em { font-style: italic; color: var(--fg-2); font-size: 0.85em; }

.hero-sub {
  max-width: 60ch; font-size: 17px; line-height: 1.55;
  color: var(--fg-2); margin: 0 0 44px; text-wrap: pretty;
}

.hero-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2); margin-bottom: 32px;
}
.hero-meta > div { display: flex; flex-direction: column; gap: 4px; }
.hm-label {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
}
.hm-value { font-size: 14px; color: var(--fg); }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 18px; border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all 0.2s ease;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.primary:hover { transform: translateX(2px); }
.btn.primary .btn-arrow { transition: transform 0.2s; }
.btn.primary:hover .btn-arrow { transform: translateX(4px); }
.btn.ghost:hover { border-color: var(--fg); color: var(--fg); }

.home-now, .home-jump { margin-top: 100px; }
.now-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.now-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.now-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start;
  padding-bottom: 18px; border-bottom: 1px dashed var(--line-2);
  font-size: 17px; line-height: 1.5; color: var(--fg);
}
.now-bullet { color: var(--accent); margin-top: 6px; }

.jump-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2);
}
.jump-card {
  padding: 28px 24px; background: var(--bg); text-align: left;
  display: flex; flex-direction: column; gap: 8px; transition: background .2s;
}
.jump-card:hover { background: var(--bg-2); }
.jc-name {
  font-family: var(--f-display); font-size: 24px;
  color: var(--fg); display: flex; justify-content: space-between;
}
.jc-arrow { color: var(--accent); transition: transform .2s; }
.jump-card:hover .jc-arrow { transform: translateX(4px); }
.jc-desc {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--fg-3);
}

/* ── EXPERIENCE ────────────────────────────────────────────────────── */
.xp-list { display: flex; flex-direction: column; }
.xp-row {
  display: grid; grid-template-columns: 100px 120px 1fr 40px;
  gap: 28px; padding: 28px 0;
  border-top: 1px solid var(--line-2);
  cursor: pointer; transition: background 0.3s; align-items: start;
}
.xp-logo {
  width: 110px; height: 84px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--fg-2); background: var(--bg);
  transition: color .2s, border-color .2s;
}
.xp-row:hover .xp-logo, .xp-row.open .xp-logo {
  color: var(--fg); border-color: var(--fg-2);
}
.org-logo { width: 100%; height: 100%; display: block; padding: 6px; }
.org-chip {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: 6px;
  border-radius: 2px;
  background: #0c0d10;
  transition: background .25s;
}
.org-chip--light {
  background: #f4f4f0;
}
.org-logo-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.xp-row:hover { background: color-mix(in oklab, var(--accent) 4%, transparent); }
.xp-row:last-of-type { border-bottom: 1px solid var(--line-2); }
.xp-year {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.08em; color: var(--fg-3); padding-top: 8px;
}
.xp-row.open .xp-year { color: var(--accent); }
.xp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.xp-role {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.01em;
  margin: 0; color: var(--fg);
}
.xp-org {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2);
  transition: color .2s;
}
a.xp-org:hover { color: var(--accent); }
.xp-ext { color: var(--accent); font-size: 10px; }
.xp-sep { margin: 0 6px; color: var(--fg-3); }
.xp-where { color: var(--fg-3); }
.xp-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease;
  opacity: 0;
}
.xp-row.open .xp-body { max-height: 400px; opacity: 1; margin-top: 14px; }
.xp-body p {
  margin: 0 0 16px; font-size: 15px; line-height: 1.6;
  color: var(--fg-2); max-width: 70ch;
}
.xp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-marker {
  font-family: var(--f-mono); font-size: 22px; color: var(--fg-3);
  text-align: right; padding-top: 6px; transition: color 0.2s;
}
.xp-row.open .xp-marker { color: var(--accent); }

/* ── WORK ──────────────────────────────────────────────────────────── */
.work-layout {
  display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start;
}
.work-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.filter {
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  align-self: flex-start;
}
.filter-btn {
  padding: 7px 12px; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3); border-radius: 999px; transition: all 0.2s;
}
.filter-btn:hover { color: var(--fg); }
.filter-btn.active { background: var(--fg); color: var(--bg); }

.work-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.work-item {
  width: 100%; display: grid;
  grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center;
  padding: 16px 14px; border-top: 1px solid var(--line-2);
  text-align: left; transition: background .2s, padding .2s;
}
.work-list li:last-child .work-item { border-bottom: 1px solid var(--line-2); }
.work-item:hover { background: var(--bg-2); padding-left: 18px; }
.work-item.active { background: var(--bg-2); }
.work-item.active .wi-name { color: var(--accent); }
.wi-year { font-family: var(--f-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.08em; }
.wi-name { font-family: var(--f-display); font-size: 18px; color: var(--fg); }
.wi-access {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-3);
}
.wi-access.open { color: var(--accent); }

.work-detail {
  border: 1px solid var(--line-2); background: var(--bg);
  display: flex; flex-direction: column;
}
.wd-figure {
  background: var(--bg-2); border-bottom: 1px solid var(--line-2);
  color: var(--fg-2); padding: 0; overflow: hidden;
}
.wd-figure .fig { width: 100%; height: auto; display: block; }
.fig-image-wrap {
  background: #fff;
  padding: 16px; display: grid; place-items: center;
}
.fig-image { width: 100%; max-width: 720px; height: auto; display: block; }
.wd-body { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.wd-top {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
}
.wd-kind { color: var(--accent); }
.wd-access.open { color: var(--accent); }
.wd-name {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -0.015em;
  margin: 0; color: var(--fg);
}
.wd-tag {
  font-family: var(--f-mono); font-size: 12px; color: var(--accent);
  margin: 0; letter-spacing: 0.04em;
}
.wd-desc { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 60ch; }
.wd-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-link {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--fg-2);
  padding-top: 16px; border-top: 1px dashed var(--line-2);
}
.wd-link:hover { color: var(--accent); }
.wd-link.disabled { color: var(--fg-3); cursor: default; }
.wd-link span:first-child { color: var(--accent); }

/* ── WRITING ───────────────────────────────────────────────────────── */
.writing-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; }
.pub-list, .talk-list, .link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pub {
  display: grid; grid-template-columns: 70px 1fr; gap: 20px;
  align-items: start;
  border-top: 1px solid var(--line-2); padding: 20px 0;
}
.talk {
  display: grid; grid-template-columns: 70px 1fr; gap: 20px;
  align-items: start;
  padding: 18px 0; border-top: 1px solid var(--line-2);
}
.pub:last-child, .talk:last-child { border-bottom: 1px solid var(--line-2); }
.pub-year, .talk-year {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--fg-3); padding-top: 4px;
}
.pub-authors {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--fg-3); margin-bottom: 4px;
}
.pub-title {
  display: block;
  font-family: var(--f-display); font-size: 20px; line-height: 1.3;
  color: var(--fg); margin-bottom: 10px; transition: color .2s;
}
.pub-title:hover, .talk-what:hover { color: var(--accent); }
.ext { font-size: 12px; color: var(--accent); }
.pub-venue { font-size: 13px; color: var(--fg-2); }
.talk-what {
  display: block;
  font-family: var(--f-display); font-size: 18px;
  color: var(--fg); margin-bottom: 2px; transition: color .2s;
}
.talk-detail { font-size: 13px; color: var(--fg-2); line-height: 1.5; }

.link-list li { border-top: 1px solid var(--line-2); }
.link-list li:last-child { border-bottom: 1px solid var(--line-2); }
.link-row {
  display: grid; grid-template-columns: 24px 1fr auto;
  gap: 12px; align-items: center; padding: 14px 0;
  font-size: 14px; color: var(--fg); transition: padding .2s, color .2s;
}
.link-row:hover { padding-left: 8px; color: var(--accent); }
.lr-arrow { color: var(--accent); }
.lr-host {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--fg-3);
}

/* ── READING ───────────────────────────────────────────────────────── */
.reading-list { display: flex; flex-direction: column; gap: 64px; }
.read-month {}
.rm-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 24px;
}
.rm-month {
  font-family: var(--f-display); font-style: italic;
  font-weight: 400; font-size: clamp(28px, 3.5vw, 40px);
  margin: 0; color: var(--fg); letter-spacing: -0.01em;
}
.rm-count {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3);
}
.rm-papers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.rp {
  display: grid; grid-template-columns: 100px 1fr; gap: 24px;
  padding: 20px 0; border-bottom: 1px dashed var(--line-2);
}
.rp:last-child { border-bottom: 0; }
.rp-tag { padding-top: 4px; }
.rp-title {
  font-family: var(--f-display); font-size: 22px;
  line-height: 1.3; color: var(--fg); margin-bottom: 6px;
}
.rp-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--fg-3); margin-bottom: 10px;
  font-family: var(--f-mono); letter-spacing: 0.04em;
}
.rp-meta em { font-style: italic; color: var(--fg-2); }
.dot-sep { color: var(--fg-3); }
.rp-note {
  font-size: 14px; line-height: 1.55; color: var(--fg-2);
  font-style: italic; max-width: 70ch;
  border-left: 2px solid var(--accent); padding-left: 14px;
}
.reading-foot {
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--line-2);
  display: flex; gap: 14px; align-items: center;
  font-family: var(--f-mono); font-size: 12px; color: var(--fg-2);
}
.rf-mark { color: var(--accent); }
.reading-foot a { color: var(--accent); border-bottom: 1px solid var(--accent); }

/* ── EDUCATION ─────────────────────────────────────────────────────── */
.edu-list { display: flex; flex-direction: column; }
.edu-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 40px;
  padding: 28px 0; border-top: 1px solid var(--line-2);
}
.edu-row:last-child { border-bottom: 1px solid var(--line-2); }
.edu-year { font-family: var(--f-mono); font-size: 12px; color: var(--fg-3); }
.edu-body h3 {
  font-family: var(--f-display); font-weight: 400; font-size: 28px;
  margin: 0 0 6px; letter-spacing: -0.01em; color: var(--fg);
}
.edu-org {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 12px;
}
.edu-thesis { font-size: 15px; color: var(--fg); margin-bottom: 14px; line-height: 1.5; }
.edu-thesis em { font-style: italic; color: var(--fg-2); }
.et-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.edu-links { list-style: none; margin: 0; padding: 0; }
.edu-links .link-row { padding: 10px 0; border-top: 1px dashed var(--line-2); font-size: 13px; }

.interests-block { margin-top: 80px; }
.interest-cloud { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.interest {
  font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 28px);
  font-style: italic; color: var(--fg);
  position: relative; padding-bottom: 2px;
  border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s;
}
.interest:nth-child(3n) { color: var(--accent); border-color: var(--accent); }
.interest:hover { color: var(--accent); border-color: var(--accent); }

/* ── CONTACT ───────────────────────────────────────────────────────── */
.contact-meta { display: flex; flex-direction: column; max-width: 720px; margin-bottom: 60px; }
.contact-row {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 16px; align-items: center; padding: 18px 0;
  border-top: 1px solid var(--line-2); text-align: left; width: 100%;
  font-family: var(--f-mono); font-size: 14px; color: var(--fg);
  transition: padding 0.2s, color 0.2s;
}
.contact-row:last-child { border-bottom: 1px solid var(--line-2); }
.contact-row:not(.static):hover { padding-left: 8px; color: var(--accent); }
.cr-label {
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3);
}
.cr-action {
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-3);
}
.contact-row:not(.static):hover .cr-action { color: var(--accent); }

.contact-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding-top: 32px; border-top: 1px solid var(--line-2);
}
.cf-label {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 10px; font-weight: 500;
}
.cf-line { font-size: 14px; color: var(--fg); display: flex; gap: 16px; flex-wrap: wrap; }
.muted { color: var(--fg-3); }

/* ── code window (project figure) ──────────────────────────────────── */
.code-window {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  font-family: var(--f-mono);
  color: var(--fg);
  width: 100%;
}
.cw-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em;
}
.cw-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; opacity: 0.6; }
.cw-dot--r { background: #ff5f56; }
.cw-dot--y { background: #ffbd2e; }
.cw-dot--g { background: #27c93f; }
.cw-title { flex: 1; text-align: center; font-size: 11px; color: var(--fg-3); }
.cw-lang {
  font-size: 9px; letter-spacing: 0.16em;
  padding: 2px 6px; border: 1px solid var(--line);
  color: var(--fg-2); border-radius: 2px;
}
.cw-body {
  margin: 0; padding: 18px 16px 14px;
  font-size: 13px; line-height: 1.65;
  overflow-x: auto;
}
.cw-body code { font-family: inherit; }
.cw-line { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.cw-ln { color: var(--fg-3); opacity: 0.5; text-align: right; user-select: none; }
.cw-code { color: var(--fg); white-space: pre; }
.tk-kw  { color: var(--accent); font-weight: 500; }
.tk-mod { color: var(--fg); }
.tk-cls { color: var(--fg); font-weight: 500; }
.tk-fn  { color: var(--fg-2); }
.tk-var { color: var(--fg); }
.tk-str { color: oklch(0.78 0.10 140); }
.tk-op  { color: var(--fg-3); }
[data-theme="light"] .tk-str { color: oklch(0.45 0.13 140); }
.cw-output {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line-2);
  font-size: 12px;
}
.cw-prompt { color: var(--accent); font-weight: 600; }
.cw-out-text { color: var(--fg-2); white-space: nowrap; overflow-x: auto; }

/* ── open source page ──────────────────────────────────────────────── */
.os-block { margin-bottom: 56px; }
.repo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2);
}
.repo {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px; background: var(--bg);
  transition: background .2s; cursor: pointer;
  color: var(--fg);
}
.repo:hover { background: var(--bg-2); }
.repo-head { display: flex; align-items: center; gap: 10px; }
.repo-icon { color: var(--fg-2); display: inline-flex; }
.repo-name {
  font-family: var(--f-mono); font-size: 13px; color: var(--fg);
  letter-spacing: 0.02em;
}
.repo:hover .repo-name { color: var(--accent); }
.repo-lang {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.08em;
}
.repo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.repo-tag {
  font-family: var(--f-display); font-size: 17px; font-style: italic;
  color: var(--fg-2);
}
.repo-body { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.repo-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.repo-topic {
  font-family: var(--f-mono); font-size: 10px; color: var(--fg-3);
  padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 999px;
  letter-spacing: 0.04em;
}
.repo-foot {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--fg-3);
  letter-spacing: 0.04em; margin-top: auto;
}
.repo:hover .repo-foot { color: var(--accent); }

/* ── single-viewport layout (fit-in-window) ─────────────────────────── */
.app {
  display: flex; flex-direction: column;
  min-height: 100vh; height: 100vh;
}
.app > main.shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.topbar { padding: 12px 32px; }
.tb-nav button.active::after { bottom: -15px; }
.app-footer {
  border-top: 1px solid var(--line-2);
  padding: 10px 32px;
  flex-shrink: 0;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--fg-3);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.fb-mid {
  font-style: italic; letter-spacing: 0.04em;
  color: var(--fg-3);
  max-width: 50ch;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) { .fb-mid { display: none; } }

/* Pages fill available space */
.page {
  padding: 28px 0 18px;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  width: 100%;
  animation: pageIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.page-fit { overflow: hidden; }
.page-center {
  justify-content: center;
  align-items: flex-start;
  padding-top: 16px;
}
.page-home { padding-top: 16px; }
.page-home .hero-coords { margin-bottom: 24px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-items: stretch;
}
.hero-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 24px 0 32px;
}
.hero-spacer { display: block; }
.hero-prose {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 60ch;
}
.hero-prose .para {
  position: relative;
  padding: 14px 0;
  isolation: isolate;
  opacity: 0;
  transform: translateY(8px);
  animation: para-in 0.7s cubic-bezier(0.2,0.8,0.2,1) forwards;
}
.hero-prose .para:nth-child(1) { animation-delay: 0.05s; }
.hero-prose .para:nth-child(2) { animation-delay: 0.30s; }
.hero-prose .para:nth-child(3) { animation-delay: 0.55s; }
.hero-prose .para:nth-child(4) { animation-delay: 0.80s; }
@keyframes para-in {
  to { opacity: 1; transform: translateY(0); }
}
.hero-prose .para .hero-sub,
.hero-prose .para .hero-lead {
  position: relative;
  z-index: 1;
}
.hero-lead {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-2);
  margin: 0 0 18px;
  font-weight: 400;
  text-wrap: balance;
}
.hero-lead em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 400;
  color: var(--fg);
}
.hero-lead .amp {
  font-family: inherit;
  font-style: inherit;
  color: inherit;
  font-weight: inherit;
  margin: 0;
}
/* moved below to bold */
.hero-prose .hl {
  color: var(--fg);
  font-weight: 600;
  background: none;
  padding: 0;
  border-bottom: 0;
}
.hero-prose .hl-strong {
  font-style: normal;
  font-weight: 700;
  color: var(--fg);
  font-size: inherit;
  letter-spacing: inherit;
}
.hero-prose .hero-sub em {
  font-style: normal;
  font-weight: 600;
  color: var(--fg);
}

/* Name treatment on home — matches .hero-lead */
.hero-name-lead {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0 0 4px;
  font-weight: 400;
  font-style: normal;
  text-wrap: balance;
}
/* per-para delays handled by nth-child above */

/* Open-source: stack chips fill space between description and repo link */
.wd-stack {
  display: flex; align-items: baseline; gap: 14px;
  margin: 22px 0 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-2);
}
.wd-stack-label {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3);
  flex-shrink: 0;
}
.wd-stack-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wd-chip {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--fg-2);
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* Background style variants handled inline in .qbg above */
.type-cursor {
  display: inline-block;
  width: 0.5ch;
  height: 0.95em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: -0.12em;
  animation: term-blink 1.05s steps(2, start) infinite;
}
.para-glyph {
  position: absolute;
  z-index: 0;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  color: var(--accent);
  opacity: 0.45;
  pointer-events: none;
}
.para-glyph * {
  animation: glyph-draw 1.2s cubic-bezier(0.2,0.8,0.2,1) backwards;
}
.para-bloch .para-glyph * { animation-delay: 0.25s; }
.para-forge .para-glyph * { animation-delay: 0.55s; }
.para-network .para-glyph * { animation-delay: 0.85s; }
@keyframes glyph-draw {
  from { opacity: 0; transform: scale(0.92); transform-origin: center; }
  to   { opacity: var(--g-op, 1); transform: scale(1); }
}
[data-theme="light"] .para-glyph { opacity: 0.38; }
.para-forge .para-glyph { width: 240px; right: -56px; }
.para-network .para-glyph { width: 200px; right: -28px; }
@media (max-width: 860px) {
  .para-glyph { display: none; }
}
.hero-prose .hero-sub {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}
.hero-stack { margin-bottom: 0; }
.hero-title {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.22;
  margin-bottom: 18px;
  max-width: none;
  width: 100%;
}
.hero-sub { font-size: 15px; margin-bottom: 0; max-width: 60ch; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hero-spacer { display: none; }
}

.page-head.compact { margin-bottom: 20px; max-width: none; }
.ph-title.sm {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
  margin-bottom: 8px;
}

/* Projects — fill horizontal space */
.work-layout.compact {
  grid-template-columns: 280px 1fr;
  gap: 28px;
  flex: 1 1 auto; min-height: 0;
  align-items: stretch;
}
.work-layout.compact.no-filter .filter { display: none; }
.work-layout.compact .work-sidebar {
  position: static; gap: 14px;
  min-height: 0;
}
.work-layout.compact .work-list {
  overflow: visible; min-height: 0;
  border-top: 1px solid var(--line-2);
}
.work-layout.compact .work-item {
  grid-template-columns: 50px 1fr;
  padding: 12px 14px;
  gap: 10px;
}
.work-layout.compact .work-item:hover { padding-left: 16px; }
.work-layout.compact .wi-name {
  font-size: 15px;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}
.work-layout.compact .wi-year { font-size: 9.5px; }
.work-layout.compact .work-detail {
  overflow: hidden; min-height: 0;
  display: flex; flex-direction: column;
}
.work-layout.compact .wd-body {
  padding: 22px 26px; gap: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  column-gap: 26px;
  row-gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.work-layout.compact .wd-top { grid-column: 1 / -1; grid-row: 1; }
.work-layout.compact .wd-name { grid-column: 1; grid-row: 2; }
.work-layout.compact .wd-tag  { grid-column: 1; grid-row: 3; }
.work-layout.compact .wd-desc {
  grid-column: 1; grid-row: 4;
  align-self: stretch;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  padding-right: 6px;
}
.work-layout.compact .wd-stack { grid-column: 1; grid-row: 5; align-self: end; }
.work-layout.compact .wd-link { grid-column: 1; grid-row: 6; align-self: end; margin-top: 0; }
.work-layout.compact .wd-figure {
  grid-column: 2;
  grid-row: 2 / -1;
  margin-top: 0;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.wd-figure.compact {
  margin-top: 0;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  padding: 8px;
  color: var(--fg-2);
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid; place-items: stretch;
  overflow: hidden;
}
.wd-figure.compact .fig {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}
.work-layout.compact .wd-name {
  font-size: clamp(26px, 2.4vw, 34px);
  text-transform: lowercase;
  letter-spacing: -0.005em;
}
.work-layout.compact .wd-desc { font-size: 14px; line-height: 1.55; max-width: none; }
.wd-figure.compact {
  margin-top: 0;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  padding: 12px;
  color: var(--fg-2);
  width: 100%;
  height: 100%;
  display: grid; place-items: center;
}
.wd-figure.compact .fig {
  width: 100%; height: auto; display: block;
  max-height: 100%;
}

/* Publications — grouped sidebar, distinction footer, author line */
.work-layout.compact .pubs-sidebar {
  gap: 18px;
  overflow-y: auto;
  scrollbar-width: none;
}
.work-layout.compact .pubs-sidebar::-webkit-scrollbar { display: none; }
.work-group { display: flex; flex-direction: column; }
.work-group-title {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 0 0 6px 14px;
}
.dist-group .link-list li { border-top: 1px dashed var(--line-2); }
.dist-group .link-list li:last-child { border-bottom: 1px dashed var(--line-2); }
.dist-group .link-row {
  grid-template-columns: 16px 1fr;
  padding: 9px 14px;
  font-size: 12px;
}
.wd-authors-inline {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

/* Writing — full-width scroll area, three sections */
.writing-scroll::-webkit-scrollbar,
.work-layout.compact .wd-body::-webkit-scrollbar { display: none; }
.writing-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding-right: 8px;
  display: flex; flex-direction: column; gap: 28px;
  width: 66.666%;
  max-width: 66.666%;
}
@media (max-width: 1100px) {
  .writing-scroll { width: 100%; max-width: 100%; }
}
.writing-section {
  background: var(--bg);
  border: 1px solid var(--line-2);
  padding: 24px 28px;
  border-radius: 2px;
}
.writing-section .pub { padding: 16px 0; }
.writing-section .pub-title { font-size: 18px; line-height: 1.4; }
.writing-section .link-list .link-row { padding: 12px 0; }

/* Expandable abstract */
.expandable { margin-top: 8px; }
.ex-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-2);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all .2s ease;
}
.ex-toggle:hover { color: var(--fg); border-color: var(--fg-2); background: var(--bg-2); }
.ex-mark {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
  color: var(--accent); font-size: 14px; line-height: 1;
}
.expandable.open .ex-toggle { background: var(--bg-2); color: var(--fg); }
.ex-body {
  margin-top: 12px;
  padding: 16px 18px;
  border-left: 2px solid var(--accent);
  background: color-mix(in oklab, var(--bg-2) 60%, transparent);
  font-size: 14px; line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
  animation: pageIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ex-body p { margin: 0; }

/* Contact */
.page-fit .contact-meta { max-width: 820px; }

@media (max-height: 720px) {
  .hero-title { font-size: clamp(26px, 3vw, 40px); }
  .hero-sub { font-size: 15px; }
  .page-head.compact { margin-bottom: 14px; }
  .ph-title.sm { font-size: clamp(24px, 2.4vw, 32px); }
}

@media (max-height: 720px) {
  .hero-title { font-size: clamp(24px, 2.6vw, 36px); }
  .hero-sub { font-size: 14px; margin-bottom: 18px; }
  .page-head.compact { margin-bottom: 16px; }
  .ph-title.sm { font-size: clamp(22px, 2.2vw, 30px); }
}

/* Publications: keep titles in their original (sentence-case) form */
.work-layout.compact.pubs .wi-name,
.work-layout.compact.pubs .wd-name {
  text-transform: none;
}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .work-layout { grid-template-columns: 1fr; }
  .work-sidebar { position: static; }
}
@media (max-width: 900px) {
  .topbar { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
  .tb-nav { width: 100%; order: 3; gap: 14px; overflow-x: auto; }
  .shell { padding: 0 20px; }
  .hero-stack { margin-bottom: 60px; }
  .hero-meta { grid-template-columns: 1fr; gap: 12px; }
  .now-body, .writing-grid, .edu-row, .contact-foot {
    grid-template-columns: 1fr; gap: 32px;
  }
  .xp-row { grid-template-columns: 56px 1fr; gap: 16px; }
  .xp-row .xp-year { grid-column: 1 / -1; }
  .xp-marker { display: none; }
  .jump-grid { grid-template-columns: 1fr; }
  .rp { grid-template-columns: 1fr; gap: 12px; }
  .repo-grid { grid-template-columns: 1fr; }
  .qbg-spectrum .blob, .qbg-aurora .ribbon { filter: blur(60px); }
  .app-footer { flex-direction: column; gap: 8px; align-items: start; }
}

/* ── phone (≤760px): allow page to scroll, stack the work layout ──── */
@media (max-width: 760px) {
  /* Release the locked-viewport shell so content can scroll naturally */
  .app { height: auto; min-height: 100vh; }
  .app > main.shell { overflow: visible; }
  .page { padding: 18px 0 24px; }
  .page-fit { overflow: visible; }

  .shell { padding: 0 16px; }
  .topbar { padding: 12px 16px; }

  /* Stack project / publication layout into one column */
  .work-layout.compact {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
  .work-layout.compact .work-sidebar {
    position: static;
    overflow: visible;
    gap: 14px;
  }
  .work-layout.compact .work-detail { overflow: visible; }
  .work-layout.compact .wd-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto auto;
    padding: 18px;
    column-gap: 0;
    row-gap: 10px;
    overflow: visible;
  }
  .work-layout.compact .wd-name {
    grid-column: 1; grid-row: 2;
    font-size: clamp(22px, 5.6vw, 30px);
  }
  .work-layout.compact .wd-tag  { grid-column: 1; grid-row: 3; }
  .work-layout.compact .wd-desc {
    grid-column: 1; grid-row: 4;
    overflow: visible;
    max-height: none;
  }
  .work-layout.compact .wd-stack { grid-column: 1; grid-row: 5; }
  .work-layout.compact .wd-link  { grid-column: 1; grid-row: 6; }
  .work-layout.compact .wd-figure {
    grid-column: 1; grid-row: 7;
    height: auto;
    min-height: 200px;
  }
  .wd-figure.compact .fig { height: auto; }

  .work-layout.compact .wi-name { font-size: 14.5px; }
  .pubs-sidebar { gap: 14px; }

  /* Headings */
  .ph-title.sm { font-size: clamp(28px, 7vw, 36px); }
  .page-head.compact { margin-bottom: 14px; }

  /* Hero */
  .hero-grid { gap: 12px; }
  .hero-col { padding: 12px 0 16px; height: auto; min-height: 0; overflow: visible; }
  .hero-prose .hero-name-lead { font-size: clamp(28px, 8vw, 40px) !important; }
  .hero-prose .hero-lead { font-size: clamp(20px, 5.5vw, 28px); }
  .hero-prose .hero-sub { font-size: 14.5px; line-height: 1.55; }

  /* Contact rows: smaller */
  .contact-row { font-size: 13px; }
  .cr-value { word-break: break-all; }

  /* Footer compact */
  .app-footer { padding: 12px 16px; font-size: 9px; gap: 4px; }
  .fb-mid { display: none; }

  /* Tweaks floating panel out of the way */
  .twk-panel { display: none !important; }

  /* Tone down decorative glyphs that clutter on small screens */
  .para-glyph { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qbg-spectrum .blob, .qbg-aurora .ribbon, .qbg-confetti .dot, .hero-eyebrow .dot, .page { animation: none !important; }
}