/* =========================================================================
   Yun-Yen Chuang — "Research Instrument" design system
   Light graph-paper canvas · hairline rules · emerald signal accent
   ========================================================================= */

:root {
  /* paper + ink */
  --paper:     oklch(0.992 0.002 230);
  --paper-2:   oklch(0.975 0.003 235);
  --paper-3:   oklch(0.962 0.004 235);
  --ink:       oklch(0.235 0.014 255);
  --ink-2:     oklch(0.405 0.013 255);
  --muted:     oklch(0.575 0.012 255);
  --faint:     oklch(0.62 0.01 255 / 0.30);
  --hair:      oklch(0.55 0.01 255 / 0.18);
  --hair-soft: oklch(0.55 0.01 255 / 0.10);

  /* grid */
  --grid-fine: oklch(0.55 0.01 255 / 0.055);
  --grid-bold: oklch(0.55 0.01 255 / 0.085);

  /* emerald signal */
  --accent:      oklch(0.66 0.145 164);
  --accent-ink:  oklch(0.50 0.125 164);
  --accent-deep: oklch(0.42 0.105 164);
  --accent-soft: oklch(0.66 0.145 164 / 0.14);
  --accent-line: oklch(0.66 0.145 164 / 0.55);
  --accent-glow: oklch(0.66 0.145 164 / 0.30);

  /* type */
  --sans:    "IBM Plex Sans", system-ui, sans-serif;
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --max: 1180px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(0.22, 0.65, 0.18, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- graph-paper backdrop ---------- */
.paper-grid {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px, 150px 150px, 150px 150px;
}
.paper-vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, transparent 55%, oklch(0.55 0.01 255 / 0.05) 100%);
}

/* ---------- instrument chrome: corner registration marks ---------- */
.reg { position: fixed; z-index: 40; width: 26px; height: 26px; pointer-events: none; color: var(--faint); }
.reg::before, .reg::after { content: ""; position: absolute; background: currentColor; }
.reg::before { width: 100%; height: 1px; top: 50%; }
.reg::after  { width: 1px; height: 100%; left: 50%; }
.reg.tl { top: 16px; left: 16px; } .reg.tr { top: 16px; right: 16px; }
.reg.bl { bottom: 16px; left: 16px; } .reg.br { bottom: 16px; right: 16px; }
@media (max-width: 680px) { .reg { display: none; } }

/* ---------- top scroll progress ---------- */
.scan { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 60;
  background: linear-gradient(90deg, var(--accent-ink), var(--accent)); box-shadow: 0 0 10px var(--accent-glow); }

/* ---------- fixed instrument readout (bottom-left) ---------- */
.readout {
  position: fixed; bottom: 20px; left: 20px; z-index: 45;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--muted); line-height: 1.5; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
}
.readout b { color: var(--ink-2); font-weight: 600; }
.readout .dot { color: var(--accent-ink); }
@media (max-width: 680px) { .readout { display: none; } }

/* ---------- nav ---------- */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--gut);
  background: linear-gradient(to bottom, oklch(0.992 0.002 230 / 0.86), oklch(0.992 0.002 230 / 0));
  backdrop-filter: blur(6px);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none;
}
.brand .mark {
  width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: 5px;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 0.72rem;
}
.navlinks { display: flex; gap: 1.5rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; }
.navlinks a { color: var(--muted); text-decoration: none; transition: color 0.2s; position: relative; }
.navlinks a::before { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: var(--accent); transition: width 0.25s var(--ease); }
.navlinks a:hover { color: var(--ink); }
.navlinks a:hover::before { width: 100%; }

/* hamburger toggle (mobile only) */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 34px; padding: 0 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--hair); border-radius: 8px;
}
.nav-toggle .bar { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); }

@media (max-width: 620px) {
  .nav-toggle { display: inline-flex; }
  .navlinks {
    position: absolute; top: calc(100% + 8px); right: var(--gut);
    flex-direction: column; align-items: stretch; gap: 0;
    min-width: 188px; padding: 0.4rem; font-size: 0.86rem;
    background: var(--paper); border: 1px solid var(--hair); border-radius: 12px;
    box-shadow: 0 14px 34px oklch(0.235 0.014 255 / 0.14);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  }
  .navlinks .hide-sm { display: block; }
  .navlinks a { padding: 0.62rem 0.7rem; border-radius: 7px; color: var(--ink-2); }
  .navlinks a::before { display: none; }
  .navlinks a:hover, .navlinks a:focus { background: var(--accent-soft); color: var(--accent-ink); }
  .topnav.nav-open .navlinks { opacity: 1; visibility: visible; transform: translateY(0); }
  .topnav.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .topnav.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
  .topnav.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------- layout ---------- */
main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); position: relative; z-index: 1; }
.sect { padding: clamp(4.5rem, 12vh, 8rem) 0; position: relative; }

.sect-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 2.6rem; }
.sect-head .idx {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--accent-ink); border: 1px solid var(--accent-line); border-radius: 5px;
  padding: 0.18rem 0.5rem; flex-shrink: 0;
}
.sect-head h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--ink); line-height: 1.05;
}
.sect-head .rule { flex: 1; height: 1px; background: var(--hair); align-self: center; margin-left: 0.5rem; }

a { color: var(--ink); text-decoration: none; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: normal; color: var(--accent-ink); font-weight: 500; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 4rem; }
.eyebrow {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.05em; color: var(--muted);
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.6rem; flex-wrap: wrap;
}
.eyebrow .live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent-ink); }
.eyebrow .live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.eyebrow a { color: var(--accent-ink); }

.hero h1 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.035em;
  font-size: clamp(3rem, 11vw, 7.5rem); line-height: 0.92; color: var(--ink); margin-bottom: 1.5rem;
}
.hero h1 .ln2 { color: var(--ink-2); }
.lede { max-width: 52ch; font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--ink-2); line-height: 1.6; margin-bottom: 2rem; }

.hero-meta { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: end; }
@media (max-width: 820px) { .hero-meta { grid-template-columns: 1fr; gap: 2rem; } }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags span {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-2);
  border: 1px solid var(--hair); border-radius: 999px; padding: 0.35rem 0.8rem; background: var(--paper-2);
}

/* hero live β-schedule instrument panel */
.scope {
  border: 1px solid var(--hair); border-radius: 12px; background: var(--paper-2);
  padding: 0.85rem 0.95rem 0.7rem; position: relative; overflow: hidden;
}
.scope-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.scope-top .ttl { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-2); text-transform: uppercase; }
.scope-top .val { font-family: var(--mono); font-size: 0.68rem; color: var(--accent-ink); }
.scope svg { width: 100%; height: 92px; display: block; }
.scope .axis { stroke: var(--hair); stroke-width: 1; }
.scope .tick { stroke: var(--hair-soft); stroke-width: 1; }
.scope .sqrt { fill: none; stroke: var(--faint); stroke-width: 1.4; stroke-dasharray: 3 4; }
.scope .beta { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--accent-glow)); }
.scope .lbl { font-family: var(--mono); font-size: 8px; fill: var(--muted); }

.scroll-cue { margin-top: 3rem; display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.scroll-cue .bar { width: 34px; height: 1px; background: var(--ink-2); position: relative; overflow: hidden; }
.scroll-cue .bar::after { content: ""; position: absolute; left: -10px; top: 0; width: 10px; height: 1px; background: var(--accent); animation: slide 2s var(--ease) infinite; }
@keyframes slide { to { left: 34px; } }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.about-grid p { color: var(--ink-2); font-size: 1.05rem; }

/* identity card */
.id-card { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2.2rem; }
.id-photo {
  width: 132px; height: 132px; flex: none; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent-line);
  box-shadow: 0 0 0 6px var(--accent-soft); transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.id-photo:hover { box-shadow: 0 0 0 7px var(--accent-soft); transform: scale(1.03); }
.id-meta { display: flex; flex-direction: column; gap: 0.3rem; }
.id-eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.id-name { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; color: var(--ink); font-weight: 600; }
.id-roles { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.02em; color: var(--muted); }
@media (max-width: 760px) { .id-card { flex-direction: column; align-items: flex-start; gap: 1rem; } }
.thread {
  margin-top: 2.4rem; border: 1px solid var(--hair); border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0;
  background: var(--paper-2); padding: 1.3rem 1.5rem; position: relative;
}
.thread .tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.5rem; display: block; }
.thread p { color: var(--ink); font-size: 1.05rem; line-height: 1.6; }

/* ========================================================================
   SCROLLYTELLING — research walkthroughs
   ======================================================================== */
.paper-block { margin-bottom: clamp(3rem, 8vh, 6rem); }

.paper-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 1rem;
  border: 1px solid var(--hair); border-radius: 14px 14px 0 0; background: var(--paper-2);
  padding: clamp(1.2rem, 3vw, 1.8rem); border-bottom: none;
}
.paper-head .venue {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; padding: 0.3rem 0.6rem; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-line); white-space: nowrap;
}
.paper-head .htext h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.paper-head .htext p { color: var(--muted); font-size: 0.95rem; max-width: 60ch; }
.paper-head .htext p .auth { color: var(--ink-2); }
.ghbtn {
  font-family: var(--mono); font-size: 0.74rem; white-space: nowrap;
  border: 1px solid var(--hair); border-radius: 8px; padding: 0.5rem 0.85rem; color: var(--ink-2);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.ghbtn:hover { color: var(--accent-deep); border-color: var(--accent-line); box-shadow: 0 0 14px var(--accent-glow); }
@media (max-width: 720px) { .paper-head { grid-template-columns: 1fr; } .paper-head .ghbtn { justify-self: start; } }

.scrolly {
  border: 1px solid var(--hair); border-radius: 0 0 14px 14px;
  display: grid; grid-template-columns: 1.08fr 0.92fr;
}
/* mobile: single column — the viz column itself becomes the sticky element,
   so it can pin against the full height of .scrolly (its own row in the old
   grid was only as tall as the viz, leaving sticky no room to work). */
@media (max-width: 880px) { .scrolly { display: block; } }

.viz-col { border-right: 1px solid var(--hair); }
@media (max-width: 880px) {
  .viz-col {
    border-right: none; border-bottom: 1px solid var(--hair);
    position: sticky; top: 0; z-index: 4;
  }
}

.viz-sticky {
  position: sticky; top: 9vh; height: 82vh; min-height: 460px;
  display: flex; flex-direction: column;
  background:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px), var(--paper-2);
  background-size: 24px 24px, 24px 24px, 100% 100%;
}
@media (max-width: 880px) { .viz-sticky { position: static; height: 56vh; min-height: 340px; } }

.viz-hud {
  display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--muted);
}
.viz-hud .stage-id { color: var(--accent-ink); }
.viz-hud .stage-bars { display: flex; gap: 4px; }
.viz-hud .stage-bars i { width: 16px; height: 3px; border-radius: 2px; background: var(--hair); transition: background 0.3s; }
.viz-hud .stage-bars i.on { background: var(--accent); }

.viz-body { flex: 1; position: relative; }
.viz-body svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.viz-cap {
  padding: 0.7rem 1rem; border-top: 1px solid var(--hair); min-height: 3.4rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-2); line-height: 1.5;
}
.viz-cap b { color: var(--accent-deep); }

/* steps */
.steps-col { padding: 0 clamp(1.2rem, 3vw, 2.2rem); }
.step { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; }
.step:first-child { min-height: 70vh; padding-top: 3rem; }
.step:last-child { min-height: 80vh; }
@media (max-width: 880px) { .step { min-height: 64vh; } }
.step .step-n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--accent-ink); margin-bottom: 0.7rem; }
.step h4 { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -0.015em; margin-bottom: 0.8rem; line-height: 1.12; }
.step p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; }
.step p + p { margin-top: 0.8rem; }
.step .eq {
  font-family: var(--mono); font-size: 0.86rem; color: var(--ink); background: var(--paper-3);
  border: 1px solid var(--hair); border-radius: 8px; padding: 0.6rem 0.85rem; margin-top: 1rem; display: inline-block;
}
.step .eq .hl { color: var(--accent-deep); }
.step.is-active .step-n { color: var(--accent-deep); }

/* shared diagram primitives (SVG) */
.node-box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.node-box.dim { stroke: var(--hair); }
.node-box.active { stroke: var(--accent); }
.node-fill-soft { fill: var(--accent-soft); }
.node-lbl { font-family: var(--display); font-weight: 600; fill: var(--ink); }
.node-sub { font-family: var(--mono); fill: var(--muted); }
.flow { fill: none; stroke: var(--hair); stroke-width: 1.6; }
.flow.active { stroke: var(--accent); }
.flow-dash { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.axis-line { stroke: var(--hair); stroke-width: 1.2; }
.tick-line { stroke: var(--hair-soft); stroke-width: 1; }
.ax-lbl { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.mono-svg { font-family: var(--mono); }
.disp-svg { font-family: var(--display); }

/* ---------- maxora / growth loop ---------- */
.loop-card {
  border: 1px solid var(--hair); border-radius: 14px; background: var(--paper-2);
  margin-top: 2.2rem; overflow: hidden;
}
.loop-hud {
  display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--muted);
}
.loop-hud .stage-id { color: var(--accent-ink); }
.loop-live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent-deep); }
.loop-live .pulse-d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 2.2s ease-out infinite; }
.loop-body {
  background:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px), var(--paper-2);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
.loop-body svg { width: 100%; height: auto; max-height: 64vh; display: block; }
.loop-cap {
  padding: 0.8rem 1rem; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: 0.74rem; color: var(--ink-2); line-height: 1.55;
}
.loop-cap b { color: var(--accent-deep); }

.loop-body text { font-family: var(--mono); fill: var(--ink-2); }
.loop-ring-bg { fill: none; stroke: var(--hair); stroke-width: 1.4; }
.loop-ring { fill: none; stroke: var(--accent-line); stroke-width: 2; stroke-dasharray: 6 10; stroke-linecap: round; animation: ringFlow 1.4s linear infinite; }
@keyframes ringFlow { to { stroke-dashoffset: -32; } }
.loop-spark { fill: var(--accent); filter: drop-shadow(0 0 7px var(--accent-glow)); }
.loop-center { fill: var(--ink); letter-spacing: 0.01em; }
.loop-center-sub { fill: var(--muted); }
.loop-node circle { fill: var(--paper); stroke: var(--accent); stroke-width: 1.8; }
.loop-node .ln-t { fill: var(--ink); }
.loop-node .ln-s { fill: var(--muted); }

.cap-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.cap-tags span {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.01em; color: var(--ink-2);
  border: 1px solid var(--hair); border-radius: 999px; padding: 0.35rem 0.8rem; background: var(--paper-2);
}

.notes-link {
  display: grid; gap: 0.3rem; margin-top: 2rem; padding: 1.4rem 1.6rem;
  border: 1px solid var(--hair); border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0;
  background: var(--paper-2); transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}
.notes-link:hover { transform: translateX(3px); box-shadow: 0 12px 34px oklch(0.5 0.05 200 / 0.10); }
.notes-link .nl-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--accent-ink); }
.notes-link .nl-title { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); }
.notes-link .nl-sub { color: var(--muted); font-size: 0.95rem; max-width: 62ch; }
.notes-link .nl-go { font-family: var(--mono); font-size: 0.78rem; color: var(--accent-deep); margin-top: 0.4rem; }

/* ---------- education timeline ---------- */
.timeline { position: relative; padding-left: 1.8rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--hair); }
.tl-item { position: relative; padding-bottom: 2.2rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -1.8rem; top: 6px; width: 11px; height: 11px; border-radius: 2px; background: var(--paper); border: 1.5px solid var(--accent); transform: rotate(45deg); }
.tl-item h4 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin-bottom: 0.15rem; }
.tl-inst { color: var(--ink-2); font-size: 1rem; }
.tl-detail { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; margin-top: 0.25rem; }

/* ---------- publications ---------- */
.pub-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 760px) { .pub-list { grid-template-columns: 1fr; } }
.pub-card {
  display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 12px; padding: 1.5rem;
  background: var(--paper-2); transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s; position: relative; overflow: hidden;
}
.pub-card::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.32s var(--ease); }
.pub-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 14px 40px oklch(0.5 0.05 200 / 0.10); }
.pub-card:hover::after { transform: scaleX(1); }
.pub-card .venue { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--accent-deep); margin-bottom: 0.9rem; }
.pub-card h3 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.pub-card p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.pub-card .go { margin-top: 1.1rem; font-family: var(--mono); font-size: 0.76rem; color: var(--accent-deep); }

/* ---------- contact ---------- */
.contact .lede { margin-bottom: 1.8rem; }
.contact-links { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.contact-links a {
  font-family: var(--mono); font-size: 0.84rem; color: var(--ink-2);
  border: 1px solid var(--hair); border-radius: 9px; padding: 0.65rem 1.05rem;
  display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;
}
.contact-links a .arr { color: var(--muted); transition: transform 0.2s, color 0.2s; }
.contact-links a:hover { color: var(--accent-deep); border-color: var(--accent-line); box-shadow: 0 0 16px var(--accent-glow); }
.contact-links a:hover .arr { transform: translate(2px, -2px); color: var(--accent-deep); }

footer {
  border-top: 1px solid var(--hair); margin-top: 2rem; padding: 2.2rem 0 3.2rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem;
  font-family: var(--mono); font-size: 0.74rem; color: var(--muted);
}

/* ---------- reveal (progressive enhancement: visible without JS) ---------- */
.reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
html.js .reveal:not(.in) { opacity: 0; transform: translateY(22px); }
html.reveal-now .reveal { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal:not(.in) { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}