/* ============================================================
   Variables
   ============================================================ */
:root {
  --text-main:       #111111;
  --text-muted:      #555555;
  --text-light:      #888888;
  --bg-main:         #ffffff;
  --bg-secondary:    #f6f8fa;
  --bg-code:         #f6f8fa;
  --border-color:    #e8e8e8;
  --link-color:      #0366d6;
  --link-hover:      #005cc5;
  --accent:          #0366d6;

  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --content-width:   760px;
  --content-pad:     40px;
  --nav-height:      56px;

  /* ── Grid ─────────────────────────────────────────────────────────────────────
     The layout is a 5-column grid:
       [1fr] [--sidebar-width] [--sidebar-gap] [--content-width] [1fr]
     Fixed-cols sum = --sidebar-width + --sidebar-gap + --content-width.
     Changing any of these three also requires updating the @media breakpoints
     in the "Responsive" section below (see the derivation table there).        */
  --sidebar-width:  160px;   /* left nav sidebar width                         */
  --sidebar-gap:     80px;   /* gap between sidebar right edge and content      */
  /* fixed-cols: 160 + 80 + 760 = 1000px                                       */

  /* ── Floating annotations (sidenotes, marginnotes) ───────────────────────────
     At wide viewports each note floats into the right 1fr gutter.
     The note occupies (--note-width + --note-gap) px of that gutter.
     margin-right = −(--note-width + --note-gap) pulls it out of the flow.
     Changing these also changes bp-note-float (see Responsive section).        */
  --note-width:     160px;   /* width of a floating note                       */
  --note-gap:        20px;   /* space between content right edge and note       */
  --note-popup-width: 240px; /* width of the hover-tooltip popup (bp < bp-note-float) */
  /* note reach: 160 + 20 = 180px of right gutter needed                       */

  /* ── Figure breakouts ────────────────────────────────────────────────────────
     How far each figure variant extends beyond --content-pad on each side.
     Wide figure total extra width  = 2 × --breakout-wide  = 120px.
     Full-bleed total extra width   = 2 × --breakout-full  = 240px.             */
  --breakout-wide:   60px;
  --breakout-full:  120px;
}

[data-theme="dark"] {
  --text-main:    #e1e4e8;
  --text-muted:   #959da5;
  --text-light:   #6a737d;
  --bg-main:      #0d1117;
  --bg-secondary: #161b22;
  --bg-code:      #161b22;
  --border-color: #30363d;
  --link-color:   #58a6ff;
  --link-hover:   #79c0ff;
  --accent:       #58a6ff;
}

/* ============================================================
   Base reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-main);
  background-color: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s, color 0.2s;
}

a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--link-hover); }

/* ============================================================
   Top navigation
   ============================================================ */
.top-header {
  height: var(--nav-height);
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.2s, border-color 0.2s;
}

.site-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  text-decoration: none;
  white-space: nowrap;
  margin-right: 28px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.site-title:hover { color: var(--link-color); text-decoration: none; }

.header-nav {
  display: none; /* hidden on desktop — left sidebar has these links */
  gap: 2px;
  flex-grow: 1;
}

.header-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  transition: color 0.15s, background-color 0.15s;
}
.header-link:hover { color: var(--text-main); background-color: var(--bg-secondary); text-decoration: none; }
.header-link.active { color: var(--text-main); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto; /* push search + dark-mode to the far right of the nav bar */
}

.cv-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  transition: all 0.15s;
  white-space: nowrap;
}
.cv-link:hover { color: var(--text-main); border-color: var(--text-muted); text-decoration: none; }

.search-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: all 0.15s;
  white-space: nowrap;
}
.search-trigger:hover { border-color: var(--text-muted); color: var(--text-main); }
.search-kbd {
  background-color: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.72rem;
  color: var(--text-light);
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 7px 7px;
  border-radius: 5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
  line-height: 1;
}
.theme-toggle:hover { background-color: var(--bg-secondary); }

[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] .moon-icon { display: none; }
:root:not([data-theme="dark"]) .sun-icon { display: none; }
:root:not([data-theme="dark"]) .moon-icon { display: block; }

/* ============================================================
   App shell
   ============================================================ */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
   Layout: centered content column with left nav + right gutter for annotations
   ============================================================
   Symmetric 1fr gutters keep content centered at all widths.
   The right 1fr gutter is free for sidenotes/marginnotes at ≥1340px.
   At ≤1000px: left sidebar hides and the grid collapses to a single column.

   Grid: [1fr] [--sidebar-width] [--sidebar-gap] [--content-width] [1fr]
   All column sizes are CSS variables — change them in :root above.
   The media breakpoints in the Responsive section are derived from these values.
   ============================================================ */
.layout-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width) var(--sidebar-gap) var(--content-width) minmax(0, 1fr);
  align-items: start;
  width: 100%;
}

/* Left sidebar */
.sidebar-left {
  grid-column: 2;
  position: sticky;
  top: calc(var(--nav-height) + 28px);
  max-height: calc(100vh - var(--nav-height) - 56px);
  overflow-y: auto;
  overflow-x: hidden;    /* prevent long section names from bleeding into the gap */
  padding-top: 64px;
}

/* Left nav links */
.sidenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidenav-link {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  transition: color 0.15s, background-color 0.15s;
}
.sidenav-link:hover { color: var(--text-main); background-color: var(--bg-secondary); text-decoration: none; }
.sidenav-link.active { color: var(--text-main); font-weight: 600; }

/* Left nav sub-items (page headings, auto-injected by JS when on that page) */
.sidenav-sub {
  list-style: none;
  padding: 4px 0 6px 10px;
  margin: 0;
}
.sidenav-sub-link {
  display: block;
  font-size: 0.78rem;
  color: var(--text-light);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.35;
  transition: color 0.15s;
  /* allow wrapping — overflow-x: hidden on .sidebar-left clips anything that does overflow */
}
.sidenav-sub-link:hover { color: var(--link-color); text-decoration: none; }
.sidenav-sub-link.active-section { color: var(--link-color); background-color: var(--bg-secondary); border-radius: 4px; }
/* Note: no font-weight change on active — bold is physically wider and causes text reflow/jitter. */

/* Main content column */
.main-content {
  grid-column: 4;
  width: 100%;
  padding: 64px var(--content-pad);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Left sidebar — "On this page" ToC section (auto-injected by JS)
   Appears below the site nav links when the page has h2 headings.
   ============================================================ */
.sidenav-toc-container {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.sidenav-toc-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0em;
  color: var(--text-light);
  margin-bottom: 6px;
  padding: 0 10px;
  font-style: italic;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-main);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.5em;
  letter-spacing: -0.015em;
}
h1 { font-size: 1.9rem; margin-top: 0; }
h2 { font-size: 1.35rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.2em; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; font-weight: 600; }

p { margin-top: 0; margin-bottom: 1.25em; }

ul, ol { padding-left: 1.5em; margin-bottom: 1.25em; }
li { margin-bottom: 0.35em; }

blockquote {
  border-left: 3px solid var(--border-color);
  margin: 1.5em 0;
  padding: 0.5em 1.25em;
  color: var(--text-muted);
}
blockquote p { margin-bottom: 0; }

hr { border: none; border-top: 1px solid var(--border-color); margin: 2.5em 0; }

/* ============================================================
   Code
   ============================================================ */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--bg-code);
  padding: 0.15em 0.38em;
  border-radius: 3px;
  border: 1px solid var(--border-color);
}

pre {
  background-color: var(--bg-code);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px 20px;
  overflow: auto;
  font-size: 0.875em;
  line-height: 1.55;
  margin: 1.5em 0;
  position: relative;
}
pre code { background: none; padding: 0; border: none; font-size: 1em; }

/* Copy button (shown on hover, injected by figures.js) */
.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-family: var(--font-body);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
pre:hover .code-copy-btn { opacity: 1; }
.code-copy-btn:hover { color: var(--text-main); border-color: var(--text-muted); }
.code-copy-btn.copied { color: #2ea44f; border-color: #2ea44f; }

/* ============================================================
   Figures and images
   ============================================================ */
img { max-width: 100%; height: auto; display: block; }

figure {
  margin: 2em 0;
}
figure img { border-radius: 4px; width: 100%; }

figcaption {
  margin-top: 0.6em;
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}

/* Wide breakout — extends --breakout-wide past the content-pad on each side.
   At typical laptop widths the extension sits in the gap between content and sidebar.
   Breakout amounts are CSS variables — adjust --breakout-wide / --breakout-full in :root. */
figure.wide,
.wide {
  margin-left:  calc(-1 * var(--content-pad) - var(--breakout-wide));
  margin-right: calc(-1 * var(--content-pad) - var(--breakout-wide));
  width: calc(100% + var(--content-pad) * 2 + var(--breakout-wide) * 2);
  max-width: none;
}
/* Full bleed — significantly wider, good for panoramas */
figure.full-bleed {
  margin-left:  calc(-1 * var(--content-pad) - var(--breakout-full));
  margin-right: calc(-1 * var(--content-pad) - var(--breakout-full));
  width: calc(100% + var(--content-pad) * 2 + var(--breakout-full) * 2);
  max-width: none;
}

/* ============================================================
   Tables
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 1.5em 0;
}
th, td { border: 1px solid var(--border-color); padding: 8px 12px; text-align: left; }
th { background-color: var(--bg-secondary); font-weight: 600; }

/* ============================================================
   Callout boxes (used via _includes/callout.html)
   ============================================================ */
.callout {
  border-left: 3px solid var(--accent);
  background-color: var(--bg-secondary);
  border-radius: 0 6px 6px 0;
  padding: 1em 1.25em;
  margin: 1.5em 0;
  font-size: 0.95em;
}
.callout p:last-child { margin-bottom: 0; }
.callout-title {
  font-weight: 700;
  font-size: 0.88em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
  color: var(--accent);
}
.callout.warning  { border-left-color: #d97706; }
.callout.warning  .callout-title { color: #d97706; }
.callout.danger   { border-left-color: #dc2626; }
.callout.danger   .callout-title { color: #dc2626; }
.callout.success  { border-left-color: #16a34a; }
.callout.success  .callout-title { color: #16a34a; }

/* ============================================================
   Margin notes (used via _includes/marginnote.html)
   Two modes:
   - .margin-note   → simple inline block-quote aside (border-left, indented)
   - .marginnote    → Tufte-style: floats into right gutter at ≥1320px;
                      appears as a hover popup below the † marker at ≤1320px.
   ============================================================ */
.margin-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  border-left: 2px solid var(--border-color);
  padding-left: 0.75em;
  margin: 1em 0;
}

/* Wrapper is a transparent pass-through at ≥1320px */
.marginnote-wrap { display: inline; }

/* The † marker is only shown at ≤1320px as a hover trigger */
.marginnote-marker { display: none; }

/* Tufte-style floating margin note — appears in right gutter at ≥1360px.
   margin-right pulls the note out of the flow by (--note-width + --note-gap).
   Right gutter at 1360px = (1360 − 1000) / 2 = 180px = note-width + note-gap, so it fits exactly.
   (The 1360px breakpoint is derived from these variables — see the Responsive section.) */
.marginnote {
  float: right;
  clear: right;
  margin-right: calc(-1 * (var(--note-width) + var(--note-gap)));
  margin-left: 14px;
  width: var(--note-width);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.2em;
  margin-bottom: 1em;
  padding-left: 0.6em;
  border-left: 2px solid var(--border-color);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  margin-top: auto;
  padding: 60px 0 40px;
  border-top: 1px solid var(--border-color);
  font-size: 0.83rem;
  color: var(--text-light);
  text-align: center;
}
.site-footer p { margin-bottom: 0.4em; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--link-color); text-decoration: none; }

/* ============================================================
   Home page
   ============================================================ */
.profile-section {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 52px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--border-color);
}

.profile-img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
}

.profile-bio { flex: 1; min-width: 0; }

.profile-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.profile-tagline {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 12px;
  line-height: 1.5;
}

.profile-statement {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-main);
  margin-bottom: 20px;
}

.profile-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.profile-links a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  transition: all 0.15s;
}
.profile-links a:hover {
  color: var(--text-main);
  border-color: var(--text-muted);
  text-decoration: none;
}

/* ============================================================
   Shared item list (home highlights + research page)
   ============================================================ */
.item-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em;
}
.item-list > li {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0;
}
.item-list > li:first-child { border-top: 1px solid var(--border-color); }

.item-title {
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 3px;
  color: var(--text-main);
}
.item-meta {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 6px;
}
.item-desc {
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 8px;
}
.item-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.item-tags a {
  font-size: 0.82rem;
  color: var(--link-color);
}

/* ============================================================
   Project cards — thumbnail + text side-by-side (Projects page)
   ============================================================ */
.project-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0;
}
.project-card:first-child { border-top: 1px solid var(--border-color); }

.project-thumb {
  width: 110px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}
.project-card-body { flex: 1; min-width: 0; }

/* ============================================================
   Research page — education block
   ============================================================ */
.edu-block {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
}
.edu-block:first-child { border-top: 1px solid var(--border-color); }

.edu-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}
.edu-school { font-weight: 600; font-size: 0.98rem; }
.edu-dates  { font-size: 0.82rem; color: var(--text-light); }
.edu-degree { font-size: 0.93rem; color: var(--text-muted); margin: 3px 0 10px; }

.course-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.course-tag {
  font-size: 0.76rem;
  background-color: var(--bg-secondary);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-color);
}

/* ============================================================
   Writing / posts feed — clean list
   ============================================================ */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.post-list-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  color: inherit;
}
.post-list-item:first-child { border-top: 1px solid var(--border-color); }
.post-list-item:hover { text-decoration: none; }
.post-list-item:hover .post-list-title { color: var(--link-color); }

.post-list-date {
  font-size: 0.82rem;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
  width: 110px;
  font-variant-numeric: tabular-nums;
}
.post-list-body { flex: 1; min-width: 0; }
.post-list-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-main);
  margin-bottom: 3px;
  transition: color 0.15s;
}
.post-list-excerpt {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ============================================================
   Post layout
   ============================================================ */
.post-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.post-title {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 0.4em;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.post-meta {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* ============================================================
   Search modal
   ============================================================ */
.search-modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.search-modal.active { display: flex; }

.search-modal-content {
  background-color: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  width: 100%;
  max-width: 600px;
  margin: 0 20px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-modal-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.search-modal-icon { font-size: 1rem; margin-right: 12px; color: var(--text-light); }
.search-modal-header input {
  flex-grow: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.05rem;
  color: var(--text-main);
  font-family: var(--font-body);
}
.search-modal-header input::placeholder { color: var(--text-light); }

.search-modal-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 360px;
  overflow-y: auto;
}
.search-modal-content li { border-bottom: 1px solid var(--border-color); }
.search-modal-content li:last-child { border-bottom: none; }
.search-modal-content li a {
  display: block;
  padding: 13px 20px;
  color: var(--text-main);
  text-decoration: none;
  transition: background-color 0.1s;
}
.search-modal-content li a:hover { background-color: var(--bg-secondary); }
.search-result-title { font-size: 0.93rem; font-weight: 600; margin-bottom: 3px; }
.search-result-snippet { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
.no-results { color: var(--text-light); font-size: 0.88rem; }

.search-modal-footer {
  padding: 9px 20px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  display: flex;
  gap: 16px;
  font-size: 0.76rem;
  color: var(--text-light);
}
.search-modal-footer kbd {
  background-color: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-light);
  margin-bottom: 2em;
  margin-top: -8px;
}
.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}
.breadcrumbs a:hover { color: var(--link-color); text-decoration: none; }
.breadcrumb-sep { color: var(--border-color); font-size: 0.9em; }
.breadcrumbs [aria-current="page"] { color: var(--text-light); }

/* ============================================================
   Sidenotes — numbered margin citations (via _includes/sidenote.html)
   Like marginnote but with a superscript counter instead of the † marker.
   Floats right at ≥1320px; appears as hover popup below that breakpoint.
   ============================================================ */

/* Sidenote wrapper — transparent at ≥1320px */
.sidenote-wrap { display: inline; }

.sidenote-ref {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
  color: var(--link-color);
  font-weight: 600;
  margin-left: 1px;
  cursor: default;
}

.sidenote {
  float: right;
  clear: right;
  margin-right: calc(-1 * (var(--note-width) + var(--note-gap)));
  margin-left: 12px;
  width: var(--note-width);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.2em;
  margin-bottom: 1em;
  padding-left: 0.6em;
  border-left: 2px solid var(--border-color);
}
.sidenote .sidenote-ref {
  float: left;
  margin-right: 4px;
  margin-left: 0;
  font-size: 0.75em;
  color: var(--link-color);
}

/* ============================================================
   Responsive
   ============================================================
   CSS custom properties cannot be used inside @media conditions (a CSS spec
   limitation — all browsers reject it). The breakpoints below are therefore
   hardcoded, but every number is derived from the variables in :root.
   When you change a layout variable, find and update the matching breakpoint here.

   ┌──────────────────────────────────────────────────────────────────────────┐
   │  Variable               Value   Role                                     │
   ├──────────────────────────────────────────────────────────────────────────┤
   │  --sidebar-width         160px  left nav sidebar                         │
   │  --sidebar-gap            80px  gap between sidebar and content           │
   │  --content-width         760px  reading column                            │
   │  ─ fixed-cols sum ─     1000px  (sidebar-width + gap + content-width)    │
   │  --note-width            160px  floating sidenote/marginnote width        │
   │  --note-gap               20px  space between content edge and note       │
   │  ─ note reach ─          180px  (note-width + note-gap)                  │
   ├──────────────────────────────────────────────────────────────────────────┤
   │  Breakpoint             Value   Derivation                               │
   ├──────────────────────────────────────────────────────────────────────────┤
   │  bp-note-float          1360px  fixed-cols + 2×note-reach                │
   │                                 = 1000 + 2×180 = 1360                    │
   │                                 Below this, notes → hover popup           │
   │  bp-sidebar-hide        1040px  fixed-cols + 40px buffer = 1000+40       │
   │                                 Below this, sidebar hides, mobile nav on  │
   │  bp-mobile               720px  tighten chrome                           │
   │  bp-xs                   480px  scale down type, stack cards              │
   └──────────────────────────────────────────────────────────────────────────┘
   ============================================================ */

/* bp-note-float — see derivation table above */
@media (max-width: 1360px) {
  /* — Marginnote: show the † trigger, display note as popup on hover — */
  .marginnote-wrap {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
  }
  .marginnote-marker {
    display: inline-block;
    color: var(--link-color);
    font-size: 0.72em;
    line-height: 1;
    cursor: help;
    padding: 0 1px;
    font-weight: 600;
    user-select: none;
    vertical-align: super;
  }
  .marginnote {
    display: none;
    float: none; clear: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 6px);
    width: var(--note-popup-width);
    margin: 0;
    padding: 10px 14px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.55;
    z-index: 500;
    white-space: normal;
  }
  .marginnote-wrap:hover .marginnote,
  .marginnote-wrap:focus-within .marginnote { display: block; }

  /* — Sidenote: display as popup on hover of the superscript ref — */
  .sidenote-wrap {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
  }
  .sidenote {
    display: none;
    float: none; clear: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 6px);
    width: var(--note-popup-width);
    margin: 0;
    padding: 10px 14px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.55;
    z-index: 500;
  }
  .sidenote .sidenote-ref { float: none; margin-right: 4px; margin-left: 0; }
  .sidenote-wrap:hover .sidenote,
  .sidenote-wrap:focus-within .sidenote { display: block; }

  /* Wide figures tamed so they don't bleed into sidebars at this viewport range.
     .wide collapses to content-pad only (no extra breakout).
     .full-bleed keeps a modest 40px-per-side breakout (arbitrary design choice, not derived). */
  figure.wide, .wide {
    margin-left:  calc(-1 * var(--content-pad));
    margin-right: calc(-1 * var(--content-pad));
    width: calc(100% + var(--content-pad) * 2);
  }
  figure.full-bleed {
    margin-left:  calc(-1 * var(--content-pad) - 40px);
    margin-right: calc(-1 * var(--content-pad) - 40px);
    width: calc(100% + var(--content-pad) * 2 + 80px); /* 40px × 2 sides */
  }
}

/* bp-sidebar-hide — see derivation table above */
@media (max-width: 1040px) {
  .layout-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);
  }
  .sidebar-left  { display: none; }
  .main-content  { grid-column: 2; padding: 48px var(--content-pad); }

  .header-nav.mobile-nav { display: flex; flex-grow: 1; }
}

/* bp-mobile — see derivation table above */
@media (max-width: 720px) {
  :root { --content-pad: 20px; }
  .top-header { padding: 0 16px; }
  .search-trigger .search-text { display: none; }
  .search-trigger .search-kbd  { display: none; }
  .search-trigger { padding: 4px 10px; }
  .cv-link { display: none; }

  .profile-section { flex-direction: column; gap: 16px; }
  .post-list-date  { display: none; }

  figure.wide, .wide, figure.full-bleed {
    margin-left: 0; margin-right: 0; width: 100%;
  }
}

/* bp-xs — see derivation table above */
@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.2rem; }
  .project-card { flex-direction: column; gap: 12px; }
  .project-thumb { width: 100%; height: 120px; }
}