/* ===========================================================================
   Minimalist variant: monochrome UI, hybrid layout (centered home, readable
   inner pages). No accent colour beyond syntax-highlighted code. Dark/light
   toggle with OS fallback. Native fonts. JS limited to the theme toggle.
   =========================================================================== */

/* ===== Tokens ===== */
:root{
  --bg:        #fcfcfb;
  --ink:       #161616;
  --muted:     #737370;
  --faint:     #9a9a96;
  --rule:      #e3e3e0;
  --code-bg:   #f4f4f2;
  --paper:     #fdfdfb;  /* fixed light surface for diagrams/drawings */

  /* syntax highlighting (light) */
  --c-comment: #8a8a85;
  --c-keyword: #8a4ba3;
  --c-string:  #3f7d52;
  --c-number:  #b06a2c;
  --c-func:    #2f6db0;
  --c-builtin: #b0562c;
  --c-punct:   #6a6a66;

  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;

  --reading: 680px;   /* prose column */
  --wide:    900px;   /* research / lists */

  color-scheme: light;
}

/* Dark theme: an explicit toggle (data-theme) wins; otherwise follow the OS. */
:root[data-theme="dark"]{
  --bg:      #0e0f10;
  --ink:     #efeeec;
  --muted:   #8a8a85;
  --faint:   #6f6f6b;
  --rule:    #242526;
  --code-bg: #17181a;
  --c-comment: #6f6f6b;
  --c-keyword: #c792ea;
  --c-string:  #9ece6a;
  --c-number:  #ff9e64;
  --c-func:    #7aa2f7;
  --c-builtin: #ffb37a;
  --c-punct:   #9a9a95;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:      #0e0f10;
    --ink:     #efeeec;
    --muted:   #8a8a85;
    --faint:   #6f6f6b;
    --rule:    #242526;
    --code-bg: #17181a;
    --c-comment: #6f6f6b;
    --c-keyword: #c792ea;
    --c-string:  #9ece6a;
    --c-number:  #ff9e64;
    --c-func:    #7aa2f7;
    --c-builtin: #ffb37a;
    --c-punct:   #9a9a95;
    color-scheme: dark;
  }
}

/* ===== Reset ===== */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:1px; }

/* Shared monospace meta line (tags, dates, venues) */
.meta{
  font-family:var(--mono); font-size:0.76rem; color:var(--muted);
  letter-spacing:0.02em;
}

/* ===========================================================================
   Homepage (hybrid: centered + airy, mono accents)
   =========================================================================== */
.home-hero{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:3rem 1.5rem;
}
.home-card{ max-width:520px; }
.home-photo{
  width:96px; height:96px; object-fit:cover; border-radius:50%;
  filter:grayscale(100%); margin:0 auto 1.9rem;
}
.home-name{ font-size:2.05rem; font-weight:600; letter-spacing:-0.02em; margin-bottom:0.9rem; }
.home-tagline{
  font-family:var(--mono); font-size:0.82rem; color:var(--muted);
  letter-spacing:0.02em; margin-bottom:1.6rem;
}
.home-bio{ font-size:1rem; max-width:44ch; margin:0 auto; }
.home-nav{
  font-family:var(--mono); margin-top:2.8rem;
  display:flex; flex-wrap:wrap; justify-content:center; font-size:0.85rem;
}
.home-nav a{ padding:0.2rem 0.8rem; }
.home-nav a:not(:last-child){ border-right:1px solid var(--rule); }
.home-contact{
  font-family:var(--mono); margin-top:1.7rem; font-size:0.78rem; color:var(--muted);
}
.home-contact a{ color:var(--muted); padding:0 0.5rem; }
.home-contact a:hover{ color:var(--ink); }

/* ===========================================================================
   Inner-page chrome: top nav + footer
   =========================================================================== */
.site-header{ border-bottom:1px solid var(--rule); }
.nav{
  max-width:var(--wide); margin:0 auto; padding:1.1rem 1.6rem;
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:0.6rem 1.2rem;
}
.nav-logo{ font-size:1.05rem; font-weight:600; letter-spacing:-0.01em; }
.nav-links{
  list-style:none; display:flex; flex-wrap:wrap; gap:0.3rem 0.2rem;
  font-family:var(--mono); font-size:0.8rem;
}
.nav-links a{
  color:var(--muted); padding:0.2rem 0.7rem; text-transform:lowercase;
}
.nav-links a:hover{ color:var(--ink); text-decoration:none; }
.nav-links a.active{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; }

.nav-right{ display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem 0.9rem; }

/* Theme toggle */
.theme-toggle{
  background:none; border:1px solid var(--rule); border-radius:7px;
  color:var(--muted); cursor:pointer; padding:5px; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--muted); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:none; }
}
.home-toggle{ position:fixed; top:1rem; right:1rem; z-index:10; }

.site-footer{ border-top:1px solid var(--rule); margin-top:5rem; }
.footer-links{
  max-width:var(--wide); margin:0 auto; padding:1.6rem; text-align:center;
  font-family:var(--mono); font-size:0.76rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0.2rem 0;
}
.footer-links a{ color:var(--muted); padding:0 0.7rem; }
.footer-links a:not(:last-child){ border-right:1px solid var(--rule); }
.footer-links a:hover{ color:var(--ink); }

/* ===========================================================================
   Page shell
   =========================================================================== */
main{ display:block; }
.page-wrap{ max-width:var(--reading); margin:0 auto; padding:3.5rem 1.6rem 1rem; }
.page-wrap--wide{ max-width:var(--wide); }

.page-head{ text-align:center; max-width:var(--reading); margin:0 auto 2.8rem; }
.page-title{ font-size:2rem; font-weight:600; letter-spacing:-0.02em; line-height:1.2; }
.page-head .page-intro{ color:var(--muted); margin-top:1rem; }
.page-head::after{
  content:""; display:block; width:42px; height:1px; background:var(--rule);
  margin:1.6rem auto 0;
}
.kicker{ color:var(--muted); font-family:var(--mono); font-size:0.78rem; letter-spacing:0.03em; }

.section-heading{
  font-size:0.78rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.12em;
  color:var(--muted); font-weight:500;
  margin:3rem 0 0.5rem; padding-bottom:0.6rem; border-bottom:1px solid var(--rule);
}

/* ===========================================================================
   Prose (About, Notes body)
   =========================================================================== */
.prose{ font-size:1.0625rem; }
.prose > * + *{ margin-top:1.15rem; }
.prose h2{
  font-size:1.3rem; font-weight:600; letter-spacing:-0.01em;
  margin-top:2.6rem; margin-bottom:0.2rem;
}
.prose h3{ font-size:1.1rem; font-weight:600; margin-top:1.8rem; }
.prose p, .prose li{ max-width:68ch; }
.prose ul, .prose ol{ padding-left:1.3rem; }
.prose li + li{ margin-top:0.4rem; }
.prose strong{ font-weight:600; }
.prose hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
.prose blockquote{
  border-left:2px solid var(--rule); padding-left:1rem; color:var(--muted); font-style:italic;
}

/* Inline + block code: monochrome (no syntax-colour runtime) */
.prose code{
  font-family:var(--mono); font-size:0.86em;
  background:var(--code-bg); padding:0.12em 0.36em; border-radius:4px;
}
.prose pre{
  background:var(--code-bg); border:1px solid var(--rule); border-radius:6px;
  padding:0.7rem 0.85rem; overflow-x:auto; margin:1.2rem 0;
}
.prose pre code{
  font-size:0.8rem; line-height:1.45; background:none; padding:0; border-radius:0;
  color:var(--ink);
}

/* Syntax tokens (build-time Prism): the only colour on the site */
.prose .token.comment, .prose .token.prolog,
.prose .token.doctype, .prose .token.cdata{ color:var(--c-comment); font-style:italic; }
.prose .token.punctuation{ color:var(--c-punct); }
.prose .token.operator{ color:var(--c-punct); }
.prose .token.keyword, .prose .token.boolean,
.prose .token.atrule, .prose .token.important{ color:var(--c-keyword); }
.prose .token.string, .prose .token.char,
.prose .token.attr-value, .prose .token.regex{ color:var(--c-string); }
.prose .token.number, .prose .token.constant{ color:var(--c-number); }
.prose .token.function,
.prose .token.decorator, .prose .token.annotation{ color:var(--c-func); }
.prose .token.builtin, .prose .token.class-name,
.prose .token.attr-name{ color:var(--c-builtin); }

/* Figures (note diagrams). Diagrams sit on a fixed light surface so dark-ink
   SVGs stay legible in both themes. */
.prose figure, .fig{ margin:1.8rem 0; }
.fig img{
  background:var(--paper); border:1px solid var(--rule); border-radius:6px;
  padding:0.8rem; margin:0 auto;
}
.fig--narrow img{ max-width:380px; }
.prose figcaption, .fig figcaption{
  font-size:0.85rem; color:var(--muted); text-align:center; margin-top:0.7rem;
  max-width:60ch; margin-left:auto; margin-right:auto;
}

/* KaTeX */
.katex{ color:var(--ink); }
.katex-display{ margin:1.6rem 0; overflow-x:auto; overflow-y:hidden; }

/* ===========================================================================
   Notes
   =========================================================================== */
.note-back{ margin-bottom:1.5rem; font-family:var(--mono); font-size:0.82rem; }
.note-back a{ color:var(--muted); }
.note-back a:hover{ color:var(--ink); }
.note-head .kicker{ margin-bottom:0.9rem; }

.notes-list{ list-style:none; }
.note-entry{ border-top:1px solid var(--rule); padding:1.7rem 0; }
.notes-list li:last-child{ border-bottom:1px solid var(--rule); }
.note-entry-date{ display:block; margin-bottom:0.45rem; }
.note-entry-title{ font-size:1.2rem; font-weight:600; letter-spacing:-0.01em; }
.note-entry-excerpt{ color:var(--muted); margin-top:0.4rem; max-width:68ch; }

/* ===========================================================================
   Research
   =========================================================================== */
.research-feature{ margin-bottom:1rem; }
.feature-meta{ margin-bottom:0.6rem; }
.feature-title{ font-size:1.45rem; font-weight:600; letter-spacing:-0.015em; line-height:1.25; margin-bottom:1.4rem; }
.feature-grid{ display:grid; grid-template-columns:1fr 18rem; gap:2.4rem; align-items:start; }
.feature-text > p + p{ margin-top:1.1rem; }
.feature-links{ margin-top:1.2rem; font-family:var(--mono); font-size:0.85rem; }

.factbox{
  border:1px solid var(--rule); border-radius:8px; padding:1.2rem 1.3rem;
  background:var(--code-bg);
}
.factbox-title{
  font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--muted); font-weight:500; margin-bottom:0.9rem;
}
.factbox dl{ font-size:0.86rem; }
.factbox dt{
  font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); margin-top:0.8rem;
}
.factbox dt:first-child{ margin-top:0; }
.factbox dd{ margin-top:0.15rem; }

.research-list{ list-style:none; }
.research-item{ border-top:1px solid var(--rule); padding:1.7rem 0; }
.research-list li:last-child{ border-bottom:1px solid var(--rule); }
.research-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:0.5rem; }
.research-date{ color:var(--faint); white-space:nowrap; }
.research-title{ font-size:1.2rem; font-weight:600; letter-spacing:-0.01em; }
.research-desc{ color:var(--ink); margin-top:0.5rem; max-width:70ch; }

/* Link rows shared by research + publications */
.links{ margin-top:0.7rem; font-family:var(--mono); font-size:0.82rem; }
.links a{ color:var(--muted); margin-right:1.1rem; }
.links a:hover{ color:var(--ink); }

/* ===========================================================================
   Publications
   =========================================================================== */
.pub-list{ list-style:none; }
.pub-item{ border-top:1px solid var(--rule); padding:1.5rem 0; }
.pub-list li:last-child{ border-bottom:1px solid var(--rule); }
.pub-venue{ margin-bottom:0.45rem; }
.pub-title{ font-size:1.08rem; font-weight:600; letter-spacing:-0.01em; }
.pub-authors{ color:var(--muted); margin-top:0.3rem; font-size:0.95rem; }
.scholar-note{ margin-top:2rem; font-family:var(--mono); font-size:0.85rem; color:var(--muted); }

/* ===========================================================================
   Outside the lab
   =========================================================================== */
.languages{ list-style:none; }
.languages li{ padding:0.35rem 0; max-width:none; }
.gallery-section{ margin-top:3rem; }
.gallery-intro{ color:var(--muted); margin-top:0.2rem; }
.art-gallery{
  margin-top:1.4rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:0.9rem;
}
.art-gallery-item{
  display:block; border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  background:var(--paper); aspect-ratio:1/1;
}
.art-gallery-item img{ width:100%; height:100%; object-fit:contain; padding:0.5rem; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width:680px){
  .feature-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .page-wrap{ padding-top:2.6rem; }
  .nav{ padding:1rem 1.2rem; }
}