/* ── Self-hosted fonts (preloaded → no FOUT glitch) ── */
/* IBM Plex superfamily — Serif (body) + Sans (UI/headings) + Mono (accents), OFL. */
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:block; src:url(/fonts/plex-serif-regular.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:700; font-display:block; src:url(/fonts/plex-serif-bold.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Serif'; font-style:italic; font-weight:400; font-display:block; src:url(/fonts/plex-serif-italic.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:block; src:url(/fonts/plex-sans-regular.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:block; src:url(/fonts/plex-sans-medium.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:block; src:url(/fonts/plex-sans-semibold.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:block; src:url(/fonts/plex-sans-bold.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:block; src:url(/fonts/plex-mono-regular.woff2) format('woff2'); }
/* Spectral — serif designed for screens (OFL). */
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:block; src:url(/fonts/spectral-regular.woff2) format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:700; font-display:block; src:url(/fonts/spectral-bold.woff2) format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:block; src:url(/fonts/spectral-italic.woff2) format('woff2'); }
/* Newsreader — editorial serif (OFL). */
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:block; src:url(/fonts/newsreader-regular.woff2) format('woff2'); }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:700; font-display:block; src:url(/fonts/newsreader-bold.woff2) format('woff2'); }
@font-face { font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:block; src:url(/fonts/newsreader-italic.woff2) format('woff2'); }
/* EB Garamond — the Sophie Wang serif (OFL); current body + headings. */
@font-face { font-family:'EB Garamond'; font-style:normal; font-weight:400; font-display:block; src:url(/fonts/garamond-regular.woff2) format('woff2'); }
@font-face { font-family:'EB Garamond'; font-style:normal; font-weight:700; font-display:block; src:url(/fonts/garamond-bold.woff2) format('woff2'); }
@font-face { font-family:'EB Garamond'; font-style:italic; font-weight:400; font-display:block; src:url(/fonts/garamond-italic.woff2) format('woff2'); }

/* ───── Reset ───── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Smooth cross-fade between pages (Chromium, served over http) */

/* ───── Theme (light only) ───── */
:root {
  color-scheme: light;
  /* EB Garamond (the Sophie Wang serif) for body + headings + nav; Plex Mono accents */
  --font-display: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --font-body:    'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', Courier, monospace;
  --t:            0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width:    760px;
  --bg:         #f0eee6;
  --bg-card:    #faf9f5;
  --bg-alt:     #e8e6dc;
  --text:       #1f1e1d;
  --text-2:     #3d3d3a;
  --text-3:     #87867f;
  --accent:     #d14424;
  --accent-soft:rgba(209,68,36,0.08);
  --accent-glow:rgba(209,68,36,0.16);
  --border:     #d1cfc5;
  --hover:      rgba(31,30,29,0.04);
  --card-shadow: 0 2px 12px rgba(31,30,29,0.015), 0 18px 44px rgba(31,30,29,0.025);
  --link:       #c0432a;
  --link-hover: #953521;
  --text-soft:  var(--text-2);
  --text-faint: var(--text-3);
  --accent-bg:  var(--accent-soft);
}

/* ───── Base ───── */
html { scroll-behavior: auto; font-size: 19px; overscroll-behavior-y: none; }

body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  transition: background var(--t), color var(--t);
  display: flex;
  align-items: flex-start;
}

/* Headings share optical sizing + balanced wrapping */
h1, h2, h3, h4 {
  font-optical-sizing: auto;
  text-wrap: balance;
}

::selection { background: var(--accent-glow); }

/* ───── Theme Toggle (text) ───── */

/* ───── Layout ───── */

.main-col {
  width: 100%;
  max-width: 760px;
  min-width: 0;
  padding: 2.75rem 2rem 0;
  margin-left: auto;
  margin-right: auto;
}

/* When panel is open, lock layout to viewport and give each side its own scroll */

/* Subtle dim on left when panel is open */

/* Hide left scroll when expanded */

/* ───── Detail Panel ───── */

/* Expanded — takes full width */

/* Expand/collapse icon toggle */

.panel-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0;
  margin-bottom: 1.25rem;
  display: block;
}

.panel-muted {
  color: var(--text-3);
  font-style: italic;
}

.panel-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--t);
}
.panel-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.panel-screenshots {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1.5rem 0;
}

.panel-screenshots img {
  width: 100%;
  max-width: 380px;
  border-radius: 0;
  border: 1px solid var(--border);
  transition: transform var(--t), box-shadow var(--t);
}
.panel-screenshots img:hover {
  transform: scale(1.015);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.panel-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 1.5rem 0;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.video-grid .panel-video { margin: 0; }
.panel-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ───── Hero ───── */
.hero {
  padding: 2.25rem 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.hero-text { flex: 1; min-width: 0; }

.hero-photo {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  order: 2;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 0;
  border: 1px solid var(--border);
}

.hero h1 { margin-bottom: 0.85rem; }


.hero-links { justify-content: flex-start; }

.hero h1 {
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin-bottom: 1rem;
  padding-bottom: 0.1em;
  color: var(--text);
}

.hero-bio {
  font-size: 1.05rem;
  color: var(--text-2);
  line-height: 1.75;
  font-weight: 400;
}

.hero-links {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.25rem;
}

/* ───── Sections ───── */

/* ───── Item Rows ───── */
.item-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}

/* ───── Resume download ───── */

/* ───── Footer ───── */
footer {
  padding: 1.25rem 0;
  font-size: 0.75rem;
  color: var(--text-3);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 3rem;
}

/* ───── Concert View Toggle ───── */

/* ───── Calendar ───── */

/* Tooltip for calendar events */

/* ───── Terminal Overlay ───── */

/* Expanded — full screen */

/* Minimized — collapse to a small bar at bottom */

/* Scrollbar for terminal */

/* ───── Sidebar ───── */
.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 232px;
  min-width: 232px;
  height: 100dvh;
  padding: 1.75rem 1.6rem 1.5rem;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.sidebar .site-name {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-bottom: 1.7rem;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 0.55rem; }
.sidebar-nav a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: color var(--t);
}
.sidebar-nav a:hover { color: var(--text); }
.sidebar-nav a.active { color: var(--text); font-weight: 700; }

main { flex: 1; min-width: 0; }

.nav-toggle { display: none; align-items: center; gap: 0.5rem; background: none; border: 0; color: var(--text); font-family: var(--font-body); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0; }
@media (max-width: 820px) {
  body { flex-direction: column; align-items: stretch; }
  .sidebar {
    position: static; width: 100%; min-width: 0; height: auto;
    flex-direction: column; overflow: visible;
    padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border);
  }
  .nav-toggle { display: inline-flex; }
  .sidebar .tree, .sidebar .theme-switch { display: none; }
  .sidebar.nav-open .tree { display: block; margin-top: 0.75rem; }
  .sidebar.nav-open .theme-switch { display: flex; margin-top: 0.75rem; }
}

/* Icon theme toggle */

/* ───── Content Pages ───── */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.75rem 2rem 4rem;
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--text-3);
}
.breadcrumb a { color: var(--text-3); text-decoration: none; transition: color var(--t); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--text-2); }
.breadcrumb svg { display: block; }
.breadcrumb .bc-home { display: inline-flex; align-items: center; }
.main-col > .breadcrumb { margin: 0; }

/* Prettier ampersand — Fraunces' italic & is far more graceful */
.amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-feature-settings: "liga";
  padding: 0 0.02em;
}

.page-header {
  margin-bottom: 2.25rem;
}
main .page-header p { margin-bottom: 0; }

.page-header h1 {
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin-bottom: 0.5rem;
}

.page-header p {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* Prose blocks reuse the panel typography */
.prose h2 {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1.6rem 0 0.4rem;
}
.prose h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  margin: 1.15rem 0 0.35rem;
  color: var(--text);
}
.prose p {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 0.6rem;
}
.prose ul, .prose ol {
  margin: 0.5rem 0 1.25rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.8;
}
.prose li { margin-bottom: 0.45rem; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--bg-alt);
  padding: 0.15rem 0.45rem;
  border-radius: 0;
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.75rem 0 0.75rem 1.25rem;
  margin: 1.25rem 0;
  font-style: italic;
  color: var(--text-3);
  background: var(--accent-soft);
  border-radius: 0;
}
.prose blockquote p { margin: 0; }
.prose pre {
  background: var(--bg-alt);
  padding: 1.1rem 1.4rem;
  border-radius: 0;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
}
.prose pre code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  background: none;
  padding: 0;
}

/* Stacked content entries (publications, posts, resume blocks) */

/* Notes index — subjects styled like the homepage section labels */
.notes-subject {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 0.4rem;
}
.notes-group + .notes-group { margin-top: 1.5rem; }

/* Make a section heading on the homepage clickable */

/* ───── Responsive ───── */
@media (max-width: 768px) {
  .main-col { max-width: 100%; padding: 2.25rem 1.25rem 3rem; }
  .hero { padding: 1.5rem 0; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .hero-photo { order: -1; }
  .hero h1 { font-size: 1.9rem; }
  
  
  
  
  .page { padding: 2.25rem 1.25rem 3rem; }
  .page-header h1 { font-size: 1.55rem; }
  .hero-photo { width: 140px; height: 140px; }
}

/* ── Static site: motion stripped (Barron-style). Theme toggle retained. ── */
*, *::before, *::after { transition: none !important; animation: none !important; }

.item-row:hover .item-arrow,
.panel-screenshots img:hover,
.hero-links a.icon-link:hover { transform: none; }

/* ── Packed single-column density (Barron-style), applied site-wide ── */
:root { --max-width: 720px; }
html { font-size: 19.5px; } /* EB Garamond has a small x-height — set generously */
body { line-height: 1.6; }

.main-col { max-width: 720px; padding-top: 1.6rem; }
.page { max-width: 720px; padding: 1.6rem 2rem 3rem; }
.breadcrumb { margin-bottom: 0.9rem; }

.hero { padding: 0 0 1rem; gap: 1.6rem; }
.hero h1 { font-size: 1.7rem; margin-bottom: 0.45rem; }
.hero-bio { font-size: 1rem; line-height: 1.55; }
.hero-photo { width: 118px; height: 118px; }

/* content pages: tighten prose + project/notes rhythm */
.page-header { margin-bottom: 0.85rem; }
.page-header h1 { margin-bottom: 0.3rem; }
.prose p, .project-desc, .page p { line-height: 1.55; }
.notes-group { padding: 0; }

/* ── Contact links — icons for GitHub/LinkedIn/Email, text for Resume/CV ── */
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }
.hero-links a { font-family: var(--font-display); font-size: 1rem; display: inline-flex; align-items: center; }
.hero-links a svg { display: block; width: 1.05em; height: 1.05em; }
.hero-links .sep { color: var(--text-3); }

/* ── Compact publication entries (Barron): tight stack, whitespace only, NO dividing lines ── */

.panel-tag { margin-bottom: 0.05rem; font-size: 0.9rem; }

/* ══════════════════════════════════════════════════════════════
   .block — the single content unit used throughout the site.
   title → meta → description → links, stacked compact, no lines.
   ══════════════════════════════════════════════════════════════ */
.block { margin: 0 0 0.8rem; }
.block:last-child { margin-bottom: 0; }
.block-title,
.block h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.08rem;
  color: var(--text);
}
.block-title a,
.block h2 a,
.block h3 a { color: var(--text); }
.block-title a:hover,
.block h2 a:hover,
.block h3 a:hover { color: var(--link); }
.block-meta {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-3);
  margin: 0 0 0.05rem;
  line-height: 1.35;
}
.block-desc,
.block > p {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0.4rem 0 0.2rem;
}
.block-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

/* ══════════════════════════════════════════════════════════════
   Boxes — each block is a sized layout unit (consistent structure
   + spacing), NOT a visually bordered card. No border/background.
   ══════════════════════════════════════════════════════════════ */
.block, .box {
  margin: 0 0 1.1rem;
}
.block:last-child, .box:last-child { margin-bottom: 0; }
.box > :last-child, .block > :last-child { margin-bottom: 0; }
.box p { font-size: 0.97rem; color: var(--text-2); line-height: 1.55; margin: 0 0 0.6rem; }
.box h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.35rem; color: var(--text); }

/* ── Project pages: screenshots inside boxes ── */
.project-page h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; margin: 0.6rem 0 0.7rem; color: var(--text); }
.project-page .box img { width: 100%; max-width: 540px; height: auto; display: block; border: 0; border-radius: 0; }
.project-page .box .block-meta { margin-top: 0.35rem; }

/* Project pages: use the same container as every other content page (fixes offset position) */
.project-page { max-width: 720px; margin: 0 auto; padding: 1.6rem 2rem 3rem; }

/* Home About — flowing paragraphs */

/* Base link color — teal highlight for all otherwise-unstyled links (inline prose, contact, action links) */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
/* Inline content links: academic-blue, underline only on hover (Barron style) */
.block-desc a, .box a, .prose p a, .prose li a, .page-header p a, .hero-bio a, .news-text a {
  text-decoration: none; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.block-desc a:hover, .box a:hover, .prose p a:hover, .prose li a:hover, .page-header p a:hover, .hero-bio a:hover, .news-text a:hover { text-decoration: underline; }

/* ── Animated quantum circuit (research header) — pure CSS/SVG, monochrome ── */
.qcircuit { max-width: 620px; margin: 0.25rem 0 1.9rem; }
.qcircuit svg { display: block; overflow: visible; }
.qcircuit .wire, .qcircuit .link, .qcircuit .tgtplus,
.qcircuit .meas path, .qcircuit .meas line { stroke: var(--text); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.qcircuit .ctrl { fill: var(--text); }
.qcircuit .tgt,
.qcircuit .gate rect, .qcircuit .meas rect { fill: var(--bg); stroke: var(--text); stroke-width: 1.4; }
.qcircuit .gate text { font-family: var(--font-body); font-size: 18px; font-weight: 700; fill: var(--text); text-anchor: middle; }
.qcircuit .qlabel { font-family: var(--font-mono); font-size: 12px; fill: var(--text-3); }
.qcircuit .pulse { fill: var(--text); }
.qcircuit .p0 { animation: qtravel 3.4s linear infinite; }
.qcircuit .p1 { animation: qtravel 3.4s linear infinite 0.55s; }
.qcircuit .p2 { animation: qtravel 3.4s linear infinite 1.1s; }
@keyframes qtravel {
  0%   { transform: translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(576px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .qcircuit .pulse { animation: none; opacity: 0; } }

/* Normalize footer copyright size everywhere (beat .prose p / .page p) */
footer p, .page footer p, .project-page footer p, .prose footer p { font-size: 0.75rem; line-height: 1.4; margin: 0; color: var(--text); }

/* ── Hero: name+links row on top; bio + photo below, photo aligned to the bio ── */
.hero { display: block; }
.hero-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-bottom: 0.85rem; }
.hero-top h1 { margin-bottom: 0; }
.hero-top .hero-links { margin-top: 0; }
.hero-bio::after { content: ""; display: block; clear: both; }
.hero-bio p { font-size: 1rem; color: var(--text-2); line-height: 1.55; margin-bottom: 0.6rem; }
.hero-bio p:last-child { margin-bottom: 0; }
.hero-photo { float: right; width: 175px; height: 175px; margin: 0.25rem 0 0.6rem 1.75rem; }
@media (max-width: 768px) {
  .hero-photo { float: none; display: block; width: 150px; height: 150px; margin: 0 0 0.8rem 0; }
}

/* ── Carnatic music: concert schedule + floated bio photo ── */
.music-photo { float: right; width: 300px; max-width: 42%; margin: 0.2rem 0 0.9rem 1.6rem; border-radius: 0; border: 1px solid var(--border); }
.music-bio::after { content: ""; display: block; clear: both; }

.concert-list { margin: 0.3rem 0 0.2rem; }
.concert { display: grid; grid-template-columns: 4rem 6.4rem 1fr; column-gap: 0.85rem; padding: 0.38rem 0 0.38rem 0.7rem; align-items: baseline; border-left: 2px solid var(--border); }
.concert.solo { border-left-color: var(--accent); }
.concert.duet { border-left-color: var(--accent); }
.c-date { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-3); white-space: nowrap; letter-spacing: 0.01em; }
.c-info { font-size: 1rem; line-height: 1.4; }
.c-type { justify-self: start; text-align: center; min-width: 5.6rem; box-sizing: border-box; display: inline-block; font-family: var(--font-body); font-size: 0.64rem; font-weight: 600; text-transform: lowercase; letter-spacing: 0.02em; line-height: 1; padding: 0.3em 0.45em; border-radius: 0; white-space: nowrap; border: 1px solid var(--border); color: var(--text-3); }
.solo .c-type { color: #fff; background: var(--accent); border-color: var(--accent); }
.duet .c-type { color: var(--accent); border-color: var(--accent); }
.c-artist { display: block; font-weight: 700; color: var(--text); }
.c-support { display: block; font-size: 0.9rem; line-height: 1.35; color: var(--text-2); }
.c-meta { display: block; font-size: 0.9rem; line-height: 1.35; color: var(--text-3); }
.c-with { color: var(--text-2); }
.c-link { font-weight: 600; white-space: nowrap; }
@media (max-width: 768px) {
  .music-photo { float: none; display: block; width: 100%; max-width: 380px; margin: 0 0 1rem; }
  .concert { grid-template-columns: 4rem 1fr; column-gap: 0.75rem; }
}

/* ── Publications as bordered boxes (research page) ── */
#publications .block h3 { margin-bottom: 0.3rem; }

.doc-links { margin: 0.3rem 0 0.3rem; }

/* heading with a links group pushed to the right */
.header-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem 1.5rem; flex-wrap: wrap; }
.header-row > :first-child { margin-top: 0; }
.header-row .hero-links, .header-row .doc-links { margin: 0; }


/* ── News list (homepage + full news page) ── */
.news { margin-top: 2.6rem; }
.news-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }
.news-head h2 { font-family: var(--font-body); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0; }
.news-full { font-size: 0.85rem; color: var(--text-3); }
.news-full:hover { color: var(--text); }
.news-scroll { max-height: 15.5rem; overflow-y: auto; padding-right: 0.5rem; }
.news-item { display: grid; grid-template-columns: 6.5rem 1fr; column-gap: 1rem; padding: 0.42rem 0; align-items: baseline; }
.news-date { font-size: 0.82rem; color: var(--text-3); white-space: nowrap; letter-spacing: 0.01em; }
.news-text { font-size: 0.95rem; line-height: 1.5; color: var(--text-2); }
@media (max-width: 768px) { .news-item { grid-template-columns: 4.6rem 1fr; column-gap: 0.75rem; } }

/* ── Contents: on-page TOC rail, used on long blog posts only.
   Fixed overlay in the right gutter, so it never pushes/reflows the main content. ── */
.toc {
  position: fixed; top: 0; right: 0;
  width: 14rem; box-sizing: border-box; height: 100dvh;
  display: flex; flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  overflow: hidden;
}
.toc-empty { display: none; }
.toc-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.toc-head h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; color: var(--text); margin: 0; }
.toc-toggle { background: none; border: 0; color: var(--text-3); cursor: pointer; line-height: 1; padding: 0; display: inline-flex; align-items: center; }
.toc-toggle:hover { color: var(--accent); }
.toc-toggle svg { display: none; }
.toc-toggle .ut-close { display: block; }
html.toc-collapsed .toc-toggle .ut-close { display: none; }
html.toc-collapsed .toc-toggle .ut-open { display: block; }
html.toc-collapsed .toc-body { display: none; }
html.toc-collapsed .toc-head { margin-bottom: 0; justify-content: flex-end; }
html.toc-collapsed .toc-head h2 { display: none; }
.toc-body { flex: 1; min-height: 0; overflow-y: auto; }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin: 0 0 0.15rem; }
.toc-list a { display: block; font-size: 0.9rem; line-height: 1.35; color: var(--text-3); text-decoration: none; padding: 0.15rem 0 0.15rem 0.7rem; border-left: 2px solid transparent; transition: color var(--t), border-color var(--t); }
.toc-list a:hover { color: var(--text); }
.toc-list a.active { color: var(--text); border-left-color: var(--accent); }
/* only show when the viewport is wide enough that the gutter clears the centered sheet */
@media (max-width: 1440px) { .toc { display: none; } }

/* ── Research page: unified body text size ── */
body.p-research .prose ul, body.p-research .prose li,
body.p-research .block-desc, body.p-research .block > p,
body.p-research .pub-authors, body.p-research .block-meta,
body.p-research .block-title, body.p-research .block h3 { font-size: 1rem; }
body.p-research #interests { margin-top: 0; }
body.p-research #interests h2 { margin-top: 0.8rem; }
.pub-authors { font-size: 0.92rem; color: var(--text-2); margin: 0.2rem 0; line-height: 1.35; }
.pub-authors strong { font-weight: 700; color: var(--text); }

/* ═══════════════ Dark mode + more color ═══════════════ */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:         #1f1e1d;
  --bg-card:    #2a2926;
  --bg-alt:     #33322f;
  --text:       #f0eee6;
  --text-2:     #d1cfc5;
  --text-3:     #b0aea5;
  --border:     #3d3d3a;
  --link:       #e8734f;
  --link-hover: #f0a07a;
  --accent:     #e8734f;
  --accent-soft: rgba(232,115,79,0.14);
  --accent-glow: rgba(232,115,79,0.22);
  --hover:      rgba(240,238,230,0.05);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.16), 0 18px 44px rgba(0,0,0,0.18);
}

/* smooth theme switch */
body, .sidebar, .block, .box, .hero-photo, .music-photo, .panel-video {
  transition: background-color var(--t), border-color var(--t), color var(--t);
}

/* ── Theme switch: "light / dark" text toggle, bottom of the sidebar ── */
.theme-switch {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0;
}
.ts-opt {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--t);
}
.ts-opt:hover { color: var(--text); }
.ts-sep { color: var(--text-3); }
[data-theme="light"] .ts-light { color: var(--text); font-weight: 700; }
[data-theme="dark"]  .ts-dark  { color: var(--text); font-weight: 700; }
@media (max-width: 820px) {
  .theme-switch { margin-top: 0; padding-top: 0; margin-left: auto; }
}


/* ── Whole page content in a single card/sheet ── */
main.page, main.project-page {
  background: var(--bg);
  box-shadow: var(--card-shadow);
  padding: 2rem 2.25rem 2.5rem;
  min-height: 100dvh;
}

/* ── Sidebar directory tree ── */
.sidebar { overflow-y: auto; }
.tree { font-family: var(--font-body); width: 100%; }
.tree ul { list-style: none; }
.tree > ul { margin: 0; padding: 0; }
.tree-children { display: none; margin: 0 0 0 1.25rem; padding: 0; }
.tree-node.open > .tree-children { display: block; }
.tree-row { display: flex; align-items: center; gap: 0.3rem; padding: 0.14rem 0; }
.tree-toggle {
  flex: none; width: 0.95rem; height: 0.95rem; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.tree-toggle::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--t);
}
.tree-node.open > .tree-row > .tree-toggle::before { transform: rotate(90deg); }
.tree-toggle:hover { color: var(--accent); }
.tree-spacer { flex: none; width: 0.95rem; }
.tree-link { color: var(--text); text-decoration: none; font-size: 1rem; line-height: 1.3; transition: color var(--t); }
.tree-link:hover { color: var(--accent); }
.tree-link.active { font-weight: 700; }
.tree-children .tree-link { color: var(--text-2); }
.tree-children .tree-link:hover { color: var(--accent); }
.tree-children .tree-link.active { color: var(--text); }