:root {
  --toc-bg: #ffffff;
  --toc-border: #eaeaea;
  --accent: #1f2937; /* neutral dark gray */
  --accent-muted: #6b7280; /* gray-500 */
  --read-width: 90ch; /* unified width for TOC and body */
}

html { scroll-behavior: smooth; }

/* Headings shouldn't hide under navbar */
h2, h3 { scroll-margin-top: 32px; }

/* ===== TOC (non-sticky, aesthetic card) ===== */
.toc-bar {
  position: static;
  background: transparent;
  border: 0;
  margin-top: .25rem;
  margin-bottom: 1.25rem;
}

.toc-bar .container {
  max-width: var(--read-width);
  margin: 0 auto;
  background: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0,0,0,.03);
  padding: 1rem 1.25rem;
}

.toc-title {
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-muted);
  margin: .25rem 0 .5rem 0;
}

.toc-list, .toc-list ol {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
}

.toc-list > li {
  margin: .35rem 0;
  line-height: 1.35;
}

.toc-list > li > a {
  color: var(--accent);
  text-decoration: none;
}

.toc-list > li > a:hover { text-decoration: underline; }

/* Nesting: subtle guide line on left, compact spacing */
.toc-list ol {
  border-left: 1px solid var(--toc-border);
  margin-top: .25rem;
  padding-left: 1rem;
}

.toc-list ol > li { margin: .25rem 0; }
.toc-list ol a { color: var(--accent); text-decoration: none; }
.toc-list ol a:hover { text-decoration: underline; }

/* ===== Article look & feel (unified width) ===== */
#article-content .content {
  max-width: var(--read-width);
  margin: 0 auto;
  line-height: 1.75;
  font-size: 1.06rem;
  color: #1f2937;
}

#article-content .content p + p { margin-top: 1rem; }

#article-content .blog-section {
  padding-top: 1rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px dashed #eee;
}

#article-content .blog-section:last-child {
  border-bottom: 0;
}

#article-content h2.title {
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: .5rem;
}

#article-content h3.subtitle {
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: .25rem;
  color: #111827;
}

/* Back-to-top link */
.back-to-top {
  display: inline-block;
  margin-top: .75rem;
  font-size: .95rem;
}

/* ===== Publications: minimal spacing + centered meta line ===== */
.publication-row .title {
  margin-bottom: .25rem;
  font-size: 1.125rem; /* 18px */
}

.pub-meta {
  text-align: center;
  font-style: italic;
  font-size: .95rem;
  margin-top: .125rem;
  margin-bottom: .5rem;
  color: var(--accent-muted);
}

.publication-links { margin-top: .25rem; }
.publication-links .button { margin: .125rem .125rem; }

/* Links inside article */
#article-content .content a { text-decoration: underline; }
#article-content .content a:hover { opacity: .85; }

/* Blockquotes (if you add any) */
#article-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  font-style: italic;
  color: #374151;
}

/* Code snippets minimal styling (if any inline code) */
#article-content code {
  background: #f7f7f8;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: .1rem .35rem;
  font-size: .95em;
}

/* Mobile */
@media (max-width: 1023px) {
  #article-content .content { font-size: 1.0rem; max-width: calc(var(--read-width) + 0ch); }
  .toc-bar .container { padding: .875rem 1rem; }
}


/* ===== TOC active (scroll-spy) ===== */
.toc-list a.toc-active {
  font-weight: 800;
  color: #111827;
}

.toc-list li.toc-active > a {
  background: #f3f4f6;
  border-radius: 6px;
  padding: 0 .375rem;
}


/* ===== Authors grid with circular avatars ===== */
/* ===== Authors grid with circular avatars ===== */
.authors-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.25rem;
  margin-top: .5rem;
  margin-bottom: .25rem;
}

.author-card {
  text-align: center;
  min-width: 110px;
}

/* Make avatar images look/feel clickable and accessible */
.avatar-link {
  display: inline-block;
  border-radius: 50%;
  line-height: 0;            /* removes little inline gap */
  outline: none;
}
.avatar-link:focus-visible {
  outline: 2px solid #111827;   /* visible keyboard focus ring */
  outline-offset: 4px;
}
.avatar-link:hover .author-avatar {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-color: #d1d5db;
  cursor: pointer;
}

.author-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: block;
  margin: 0 auto .375rem auto;
  background: #f3f4f6;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.author-name {
  font-weight: 600;
  line-height: 1.25;
}

.author-name a {
  color: #1f2937;
  text-decoration: none;
}

.author-name a:hover {
  text-decoration: underline;
}

.author-affil {
  font-size: .85rem;
  color: #6b7280;
}


@media (max-width: 480px) {
  .author-card { min-width: 96px; }
  .author-avatar { width: 64px; height: 64px; }
}


/* ===== Figure styling ===== */
.figure {
  max-width: var(--read-width);
  margin: 1.25rem auto;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0,0,0,.03);
}
.figure img, .figure canvas {
  display: block;
  width: 100%;
  height: auto;
}
.figure .fig-body {
  padding: .75rem 1rem;
}
.figure .fig-caption {
  font-size: .92rem;
  color: #6b7280;
  margin-top: .25rem;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .figure,
  .figure img,
  .figure canvas,
  .figure::before,
  .figure::after {
    transition: none;
  }
}

/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 9999;
}
.lightbox.open { display: flex; }

/* Stage that holds the zoomed media */
.lb-stage {
  max-width: 96vw;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  touch-action: none;               /* enables proper pointer panning */
  cursor: grab;
}
.lb-stage:active { cursor: grabbing; }

.lb-zoom { 
  transform: translate(0,0) scale(1);
  transform-origin: center center;
  will-change: transform;
}

.lb-media {
  display: block;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  pointer-events: none;             /* events handled on stage */
}

/* Toolbar */
.lb-toolbar {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  gap: .5rem;
}

.lb-btn {
  background: #1f2937;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: .45rem .65rem;
  font: 600 14px/1 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
.lb-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1);
  filter: brightness(1.02);
}
.lb-btn:active { transform: translateY(0); }
.lb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45), 0 6px 18px rgba(0,0,0,.18);
}
.lb-btn--danger { background: #ef4444; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lb-btn { transition: box-shadow .15s ease; }
}

/* Minimum open size (tweakable) */
.lightbox {
  --lb-min-w: 70vw;   /* at least 70% of viewport width */
  --lb-min-h: 60vh;   /* at least 60% of viewport height */
}

.lb-stage {
  /* keep your existing max-width / max-height */
  min-width:  min(96vw, var(--lb-min-w));
  min-height: min(90vh, var(--lb-min-h));
  /* center the media inside */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: on very small screens, open larger relative to viewport */
@media (max-width: 640px) {
  .lightbox { --lb-min-w: 92vw; --lb-min-h: 70vh; }
}


/* OBJ viewer container */
.obj-figure {
  width: 100%;
  min-height: 420px;
  background: linear-gradient(180deg, #fafafa, #f5f5f5);
  border-bottom: 1px solid #eee;
}

/* ===== Callouts (Bulma .message) refinements ===== */
.message {
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.02);
}
.message .message-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  letter-spacing: .02em;
}
.message .message-body {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* ===== Key takeaways list ===== */
.key-takeaways {
  background: #fcfcfd;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: .75rem 1rem;
  margin-top: .75rem;
}
.key-takeaways .kt-title {
  font-weight: 700;
  margin-bottom: .25rem;
  color: #374151;
}
.key-takeaways ul {
  margin-left: 1.25rem;
  margin-top: .25rem;
  margin-bottom: .25rem;
}
.key-takeaways li {
  margin: .2rem 0;
  list-style: disc;
}

/* ===== Heading serif (optional) ===== */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Source Serif Pro');
}
h1, h2, h3 { font-family: 'Source Serif Pro', Georgia, 'Times New Roman', serif; }

/* ===== Sans-serif across the board (override) ===== */
body, h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol', sans-serif !important;
}

/* ===== Citations (BibTeX) styling ===== */
#BibTeX .bib-intro {
  margin-bottom: .5rem;
  color: #6b7280;
  font-size: .95rem;
}

#BibTeX .bib-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

#BibTeX .bib-entries {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: .5rem;
}

#BibTeX .bib-card {
  border: 1px solid #eaeaea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,.03);
  padding: .75rem 1rem;
}

#BibTeX .bib-title {
  font-weight: 700;
  margin: 0 0 .25rem 0;
  line-height: 1.4;
}

#BibTeX .bib-title a {
  color: #111827;
  text-decoration: none;
}

#BibTeX .bib-title a:hover { text-decoration: underline; }

#BibTeX .bib-meta {
  font-size: .95rem;
  color: #374151;
  margin-bottom: .5rem;
}

#BibTeX .bib-meta .venue {
  color: #6b7280;
}

#BibTeX details {
  margin-top: .25rem;
}

#BibTeX summary {
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: #1f2937;
}

#BibTeX pre {
  background: #f8f9fb;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: .75rem;
  overflow: auto;
  white-space: pre;
}

/* Cite chips in text (optional) */
a.cite {
  display: inline-block;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 0 .4rem;
  font-size: .9em;
  text-decoration: none;
  color: #111827;
}
a.cite:hover { background: #eef2f7; }


/* Hide raw BibTeX by default; cards are the primary view */
#BibTeX pre.bib-raw { display: none; }

#BibTeX details pre { display: block; }


/* === Keep BibTeX section on the same reading width as the article === */
#BibTeX .container,
#BibTeX .content {
  max-width: var(--read-width);
  margin: 0 auto;
}

/* Cards and their contents should never push beyond the read width */
#BibTeX .bib-entries,
#BibTeX .bib-card {
  max-width: 100%;
}

/* When showing BibTeX, wrap long lines to avoid horizontal expansion */
#BibTeX details pre {
  white-space: pre-wrap;      /* keep line breaks but wrap long lines */
  word-break: break-word;     /* break very long tokens if needed */
  overflow: auto;             /* show scrollbars if content is still wider */
}

/* Small screens: just ensure we use the full width of the viewport */
@media (max-width: 1023px) {
  #BibTeX .container, #BibTeX .content { max-width: 100%; }
}

/* ===== Dual Video Grid (Corrected) ===== */
.video-figure {
  /* Reset the main container: remove margin and other figure styles */
  margin: 1.25rem 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: none;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

/* ❗️ THE DEFINITIVE FIX: 
  This rule is more specific than Bulma's and directly targets the video cards,
  removing the unwanted margin that causes the misalignment.
*/
.video-grid figure.video-card {
  margin: 0 !important;
}

.video-card {
  position: relative;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
  aspect-ratio: 4 / 3;
}

.video-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* Add this line to fix the white screen issue */
  background-color: #000; 
}

.video-label {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(255,255,255,.92);
  color: #111827;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  z-index: 2;
}

/* Responsive behavior */
@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

/* Subtle card lede */
:root{
  /* Accent as RGB so we can control opacity cleanly */
  --lede-accent-rgb: 124,77,255; /* #7c4dff */
  --lede-bg-alpha: .035;  /* background tint strength */
  --lede-brd-alpha: .18;  /* border visibility */
  --lede-line-alpha: .45; /* top hairline */
  --lede-shadow: 0 10px 24px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --lede-bg-alpha: .07;
    --lede-brd-alpha: .28;
    --lede-line-alpha: .5;
    --lede-shadow: 0 12px 28px rgba(0,0,0,.34);
  }
}

section#Lede .content{
  position: relative;
  padding: clamp(1rem, 1.2vw + .75rem, 1.5rem);
  border-radius: 12px;
  background: rgba(var(--lede-accent-rgb), var(--lede-bg-alpha));
  border: 1px solid rgba(var(--lede-accent-rgb), var(--lede-brd-alpha));
  box-shadow: var(--lede-shadow);
}

/* very thin, soft accent line */
section#Lede .content::after{
  content:"";
  position:absolute; inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(var(--lede-accent-rgb), var(--lede-line-alpha)),
              rgba(var(--lede-accent-rgb), 0));
  border-top-left-radius: 12px; border-top-right-radius: 12px;
}

/* gentle type nudge */
section#Lede h2.title{
  margin-bottom: .35rem;
  font-weight: 750;
  letter-spacing: .15px;
}
section#Lede p:first-of-type{
  margin-top: 0;
  font-size: clamp(1rem, .95rem + .2vw, 1.15rem);
  line-height: 1.65;
  max-width: 70ch;
}

/* TOC: remove automatic numbers only inside the TOC */
nav#toc ol, 
nav#toc ul{
  list-style: none;       /* hides 1., 2., 3. */
  margin: 0;
  padding-left: 0;
}

/* nuke any theme/plugin counters */
nav#toc li::marker { content: "" !important; }
nav#toc li::before { content: none !important; counter-increment: none !important; }

/* optional: tidy nesting */
nav#toc ol ol{ padding-left: 1rem; opacity: .9; }
nav#toc li{ margin: .25rem 0; }

.bib-permalink { opacity: 0; margin-left: .25rem; font-size: .9em; }
.bib-permalink:hover { opacity: 0; }

/* ===== Abstract block ===== */
/* ===== Abstract (light, subtle) ===== */
:root{
  --read-width: 48rem;
  --card-bg: #ffffff;
  --card-fg: #111827;         /* slate-900-ish */
  --muted:   #6b7280;         /* slate-500 */
  --border:  rgba(17,24,39,.08);
  --shadow:  0 2px 12px rgba(17,24,39,.06);
  --accent:  #e5e7eb;         /* slate-200 for a faint left rule */
}

.abstract{
  max-width: var(--read-width);
  margin: 1.75rem auto 2rem;
  padding: 0 1rem;
}

.abstract-card{
  background: var(--card-bg);
  color: var(--card-fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

/* faint left rule; remove if you want it ultra-minimal */
.abstract-card::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

.abstract-label{
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .75rem 1rem .25rem 1rem;
  margin-left: .25rem; /* balances the left rule */
  user-select: none;
}

.abstract-body{
  padding: 0 1rem 1rem 1rem;
  line-height: 1.7;
  font-size: 1rem;
}

/* keep emphasis gentle */
#abstract em{ font-style: italic; opacity: .95; }

/* responsive tweak */
@media (max-width: 640px){
  .abstract-body{ line-height: 1.68; }
}