/* sidebar-expand-btn hidden on all screen sizes — replaced by mobile drawer */

/* Drawer close button hidden on desktop */
.drawer-close-btn {
  display: none;
}

/* ── Dark mode color overrides ── */
html.dark-mode {
  --color-background: #1a1a1a;
  --color-text: #e0e0e0;
  --color-link: #6ab0f5;
  --color-link-hover: #91c7ff;
  --color-nav-bg: #1e1e1e;
  --color-border: #383838;
  --color-header-bg: #252525;
  --color-muted: #999999;
  --color-code-bg: #2d2d2d;
}

html.dark-mode body {
  background-color: var(--color-background);
  color: var(--color-text);
}

html.dark-mode .academic-intro,
html.dark-mode .publication-item,
html.dark-mode .research-note,
html.dark-mode .research-area {
  background-color: var(--color-header-bg);
  border-color: var(--color-border);
}

html.dark-mode .publication-abstract p {
  background-color: #2a2a2a;
}

html.dark-mode th {
  background-color: var(--color-header-bg);
}

/* ── Dark mode toggle button ── */
.dark-mode-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.dark-mode-toggle:hover {
  background: var(--color-header-bg);
  border-color: var(--color-link);
}

.dark-mode-section {
  margin-top: auto;
}

/* Mobile topbar dark toggle — icon only, no border pill */
.mobile-topbar .dark-mode-toggle {
  border: none;
  padding: 4px 6px;
  font-size: 18px;
  border-radius: 6px;
}
/* Font Options - Easy to switch between */

/* Option 1: Original Google Fonts (serif) - Uncomment to revert */
/* @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap'); */

/* Option 2: Aptos System Font (currently active) */
/* No import needed for system fonts */

/* Academic jemdoc-style CSS Variables */
:root {
  /* Colors - Academic/jemdoc palette */
  --color-background: #ffffff;
  --color-text: #222222;
  --color-link: #0066cc;
  --color-link-hover: #0052a3;
  --color-nav-bg: #f0f0f0;
  --color-border: #cccccc;
  --color-header-bg: #fafafa;
  --color-muted: #666666;
  --color-code-bg: #f8f8f8;

  /* =====================================================
     BOX COLOR — change these two lines to restyle all
     boxes across the entire site at once.
     ===================================================== */
  --color-box-bg: #f0f0f0;   /* box fill — matches nav sidebar column */
  --color-box-hover: #f0f0f0; /* box hover */
  
  /* Typography Options - Easy font switching */
  
  /* CURRENTLY ACTIVE: Aptos system font with excellent fallbacks */
  --font-family-base: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-family-title: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-family-sans: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "Cascadia Code", "SF Mono", Consolas, "Courier New", monospace;
  
  /* BACKUP OPTION: Original serif fonts - uncomment to revert back
  --font-family-base: "Source Serif Pro", "Times New Roman", Times, serif;
  --font-family-title: "Crimson Text", "Times New Roman", Times, serif;
  --font-family-sans: Arial, Helvetica, sans-serif;
  --font-family-mono: "Courier New", Courier, monospace;
  */
  
  /* Spacing - Compact academic layout */
  --spacing-xs: 0.3rem;
  --spacing-sm: 0.6rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Layout - Academic proportions with wider content */
  --nav-width: 300px;
  --content-padding: 30px;
  --content-max-width: 900px;
  --line-height: 1.5;
}

/* Reset and Base Styles - Academic */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family-base);
  font-size: 16px;  /* Increased from 14px */
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-background);
  margin: 0;
}

/* Academic Layout - Side navigation + content */
.site-layout {
  display: flex;
  min-height: 100vh;
}

/* Navigation Sidebar */
.site-nav {
  width: var(--nav-width);
  background-color: var(--color-nav-bg);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-lg);
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Profile section in sidebar */
.nav-profile {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.nav-profile-image {
  width: 160px;
  height: 160px;
  border-radius: 4px;
  object-fit: cover;
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--color-border);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nav-profile-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 4px;
  border: 2px dashed var(--color-border);
  margin-bottom: var(--spacing-md);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  color: var(--color-muted);
  font-size: 12px;
  text-align: center;
  padding: var(--spacing-sm);
}

.nav-title {
  font-size: 18px;  /* Reduced from 20px for better fit */
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  text-decoration: none;
  display: block;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: var(--font-family-title);
}

.nav-subtitle {
  font-size: 13px;  /* Reduced from 15px for better fit */
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: var(--spacing-lg);
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.nav-menu {
  list-style: none;
}

.nav-menu li {
  margin-bottom: var(--spacing-xs);
}

.nav-menu a {
  color: var(--color-link);
  text-decoration: none;
  font-size: 17px;  /* Increased from 15px for better visibility */
  display: block;
  padding: var(--spacing-xs) 0;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--color-link-hover);
}

/* Navigation section separators */
.nav-separator {
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-lg) 0;
}

.nav-section {
  margin-bottom: var(--spacing-lg);
}

.nav-section-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-section li {
  margin-bottom: var(--spacing-xs);
}

.nav-section a {
  font-size: 16px;  /* Increased from 14px for better visibility */
  color: var(--color-link);
  text-decoration: none;
  display: block;
  padding: var(--spacing-xs) 0;
}

.nav-section a:hover {
  color: var(--color-link-hover);
}

/* Email styling in navigation */
.nav-section .email-link {
  font-size: 16px;
  color: var(--color-link);
  font-family: var(--font-family-mono);
  font-weight: 500;
  display: block;
  padding: var(--spacing-xs) 0;
  word-break: break-all;
}

/* Social Icons in navigation */
.social-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-xs);
  align-items: center;
  justify-items: center;
  width: 100%;
}

.social-icons a {
  display: inline-flex !important; /* Override nav-section a block display */
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: var(--color-link);
  background-color: transparent;
  padding: 0 !important; /* Override nav-section a padding */
  margin: 0 !important; /* Override any margin */
}

.social-icons a:hover {
  background-color: var(--color-header-bg);
  color: var(--color-link-hover);
  transform: translateY(-1px);
  text-decoration: none;
}

.social-icons i {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.social-icons svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.social-icons a:hover i,
.social-icons a:hover svg {
  transform: scale(1.1);
}

/* Main Content Area - Extended width */
.site-main {
  margin-left: var(--nav-width);
  flex: 1;
  padding: var(--content-padding);
  max-width: calc(100vw - var(--nav-width) - 40px); /* Use almost full width */
  width: calc(100vw - var(--nav-width));
}

/* Typography - Academic style */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-title);
  font-weight: bold;
  color: var(--color-text);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

h1 { 
  font-size: 28px;  /* Increased from 24px */
  margin-top: 0;
}
h2 { 
  font-size: 22px;  /* Increased from 20px */
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-xs);
}
h3 { font-size: 20px; }  /* Increased from 18px */
h4 { font-size: 18px; }  /* Increased from 16px */
h5 { font-size: 16px; }  /* Increased from 14px */
h6 { font-size: 15px; font-weight: normal; font-style: italic; }  /* Increased from 14px */

p {
  margin: var(--spacing-md) 0;
  text-align: justify;
}

/* Links - Academic style */
a {
  color: var(--color-link);
  text-decoration: none;
}

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

/* Lists */
ul, ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

li {
  margin: var(--spacing-xs) 0;
}

/* About page boxes */
.about-box {
  background-color: var(--color-box-bg); /* old: #F5F5DB */
  border: 1px solid #d5d0cb;
  border-radius: 10px;
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.about-box h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.about-box p {
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

.about-box p:last-child {
  margin-bottom: 0;
}

.about-box ul {
  padding-left: 1.2em;
  margin: 0;
}

.about-box li {
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.about-wide {
  width: 100%;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

html.dark-mode .about-box {
  background-color: var(--color-header-bg);
  border-color: #444;
}

/* Academic-style sections */
.academic-intro {
  margin-bottom: var(--spacing-xxl);
  /* old: background-color: #fafafa; border: 1px solid var(--color-border); */
  background-color: var(--color-box-bg); /* old: #f5f3ef */
  padding: var(--spacing-xl);
  border: none;
  border-radius: 10px;
}

/* Research Note boxes for Research Notes section */
.research-note {
  margin: var(--spacing-lg) 0;
  /* old: background-color: #fafafa; border: 1px solid var(--color-border); */
  background-color: var(--color-box-bg); /* old: #f5f3ef */
  padding: var(--spacing-lg);
  border: none;
  border-radius: 10px;
  border-left: 4px solid var(--color-link);
}

.research-note h3,
.research-note h4 {
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  color: var(--color-link);
}

.research-note p:last-child {
  margin-bottom: 0;
}

/* Research note variants */
.research-note.hypothesis {
  border-left-color: #28a745;
  background-color: #f8fff9;
}

.research-note.hypothesis h3,
.research-note.hypothesis h4 {
  color: #28a745;
}

.research-note.finding {
  border-left-color: #ffc107;
  background-color: #fffef5;
}

.research-note.finding h3,
.research-note.finding h4 {
  color: #d39e00;
}

.research-note.question {
  border-left-color: #dc3545;
  background-color: #fff5f5;
}

.research-note.question h3,
.research-note.question h4 {
  color: #dc3545;
}

.academic-intro h1 {
  font-size: 32px;  /* Increased from 28px */
  margin-bottom: var(--spacing-sm);
}

.subtitle {
  font-size: 18px;  /* Increased from 16px */
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: var(--spacing-xs);
}

.institution {
  font-size: 16px;  /* Increased from 14px */
  color: var(--color-muted);
  margin-bottom: var(--spacing-xs);
}

.email {
  font-size: 17px;
  color: var(--color-link);
  font-family: var(--font-family-mono);
  margin-bottom: var(--spacing-lg);
  font-weight: 500;
}

.description {
  text-align: justify;
  line-height: 1.6;  /* Increased from 1.5 */
  margin: var(--spacing-lg) 0;
  font-size: 16px;  /* Added explicit size */
}

/* News/Updates section */
.news-section h2 {
  font-size: 20px;  /* Increased from 18px */
  margin-bottom: var(--spacing-md);
}

.news-item {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
  position: relative;
  font-size: 15px;  /* Added explicit size */
}

.news-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-link);
  font-weight: bold;
}

.news-date {
  font-weight: bold;
  color: var(--color-muted);
  font-size: 14px;  /* Increased from 13px */
}

details.news-older {
  margin-top: var(--spacing-md);
}

details.news-older > summary {
  cursor: pointer;
  color: var(--color-link);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  user-select: none;
}

details.news-older > summary::-webkit-details-marker { display: none; }

details.news-older[open] > summary {
  margin-bottom: var(--spacing-sm);
}

/* Publications - Academic list style */
.publication-list {
  margin: var(--spacing-lg) 0;
}

.publication-item {
  margin: var(--spacing-sm) 0;  /* Reduced from --spacing-md for tighter spacing between publications */
  padding: var(--spacing-md);
  /* old: border-left: 3px solid var(--color-border); background-color: #fafafa; */
  border-left: 3px solid #e0d5c0;
  background-color: var(--color-box-bg); /* old: #f5f3ef */
}

.publication-title {
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
}

.pub-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  font-style: normal;
  flex-shrink: 0;
  font-family: var(--font-family-mono);
}

.publication-authors {
  font-style: italic;
  margin-bottom: var(--spacing-xs);
  font-size: 15px;
  font-family: var(--font-family-base);
}

.publication-authors strong {
  color: var(--color-link);  /* Adapts automatically in dark mode */
  font-weight: bold;
  font-style: normal;  /* Remove italic for your name */
}

.publication-status {
  color: #007700;  /* Green color for submission status */
  font-style: italic;
  font-size: 14px;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.publication-venue {
  color: var(--color-muted);
  font-size: 15px;
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-family-base);
}

.publication-links {
  font-size: 15px;
}

.publication-links a {
  margin-right: var(--spacing-md);
  font-weight: bold;
}

/* Publication badges */
.badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 3px;
  margin-left: var(--spacing-sm);
}

.badge.preprint {
  background-color: #E4E4E4;  /* Light Grey */
  color: #1c1c1c;  /* Black */
}

.badge.journal {
  background-color: #E4E4E4;  /* Light Grey */
  color: #1c1c1c;  /* Black */
}

.badge.conference {
  background-color: #E4E4E4;  /* Light Grey */
  color: #1c1c1c;  /* Black */
}

.badge.presentation {
  background-color: #E4E4E4;  /* Light Grey */
  color: #1c1c1c;  /* Black */
}

/* Publication abstracts */
.publication-abstract {
  margin-top: var(--spacing-sm);
}

.publication-abstract details {
  margin-top: var(--spacing-xs);
}

.publication-abstract summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--color-link);
  font-size: 13px;
  padding: 3px 0;
}

.publication-abstract summary:hover {
  color: var(--color-link-hover);
}

.publication-abstract p {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--color-box-bg);
  border-left: 3px solid var(--color-link);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  font-family: var(--font-family-base);
}

/* Research areas - Simple academic boxes */
.research-grid {
  margin: var(--spacing-lg) 0;
}

/* Resource Boxes — collapsible cards */
.resource-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  align-items: start;
}

.resource-box {
  background-color: var(--color-box-bg); /* old: #E7E5E4 */
  border: none;
  border-radius: 10px;
  padding: var(--spacing-lg) var(--spacing-xl);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.resource-box h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 0;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.resource-box h3::after {
  content: "+";
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
}

.resource-box.expanded h3 {
  margin-bottom: var(--spacing-md);
}

.resource-box.expanded h3::after {
  content: "−";
}

/* Collapsed state: show ~2 items as preview with bottom fade */
.resource-box ul {
  max-height: 3.8em;
  overflow: hidden;
  opacity: 1;
  margin: var(--spacing-sm) 0 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.resource-box p,
.resource-box > p {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease;
}

.resource-box.expanded ul,
.resource-box.expanded p,
.resource-box.expanded > p {
  max-height: 2000px;
  opacity: 1;
}

.resource-box.expanded ul {
  margin-top: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.resource-box.expanded p {
  margin-top: var(--spacing-sm);
}

.resource-box ul {
  list-style: disc;
  padding-left: 1.2em;
}

.resource-box li {
  margin-bottom: 0.4em;
  font-size: 0.92rem;
  line-height: 1.5;
}

.resource-box.wide-box {
  grid-column: 1 / -1;
  margin: var(--spacing-xs) 0;
}

.resource-box.wide-box .page-list {
  margin-top: var(--spacing-md);
}

.resource-box.wide-box .page-item h4 {
  margin: 0;
  font-size: 1.05rem;
}

.resource-box.wide-box .page-item h4 a {
  color: var(--color-link);
  text-decoration: none;
}

.resource-box.wide-box .page-item h4 a:hover {
  text-decoration: underline;
}

.resource-box.wide-box .page-item .item-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.2em;
}

.resource-box.wide-box .page-item p {
  max-height: none;
  opacity: 1;
  margin-top: 0.4em;
  font-size: 0.92rem;
}

.resource-box:hover {
  background-color: var(--color-box-hover); /* old: #d8d5d3 */
}

html.dark-mode .resource-box {
  background-color: var(--color-header-bg);
}

html.dark-mode .resource-box:hover {
  background-color: #2a2a2a;
}

@media (max-width: 768px) {
  .resource-boxes {
    grid-template-columns: 1fr;
  }
}

/* Research Focus Grid Layout */
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.research-area {
  /* old: background-color: #fafafa; border: 1px solid var(--color-border); */
  background-color: var(--color-box-bg); /* old: #f5f3ef */
  border: none;
  border-radius: 10px;
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  aspect-ratio: 1.2;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.research-area:hover {
  /* old: background-color: #f0f0f0; border-color: var(--color-link); */
  background-color: var(--color-box-hover); /* old: #eee9e0 */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.research-area h3 {
  font-size: 18px;
  margin-bottom: var(--spacing-sm);
  margin-top: 0;
  color: var(--color-text);
}

.research-area .description {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--color-muted);
  flex: 1;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin: 0 !important;
  text-align: left !important;
}

.research-area.expanded .description {
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  overflow: visible !important;
  display: block !important;
}

.research-area .expand-indicator {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.research-area.expanded .expand-indicator {
  transform: rotate(45deg);
}

.research-area:hover .expand-indicator {
  transform: scale(1.1);
}

.research-area.expanded:hover .expand-indicator {
  transform: rotate(45deg) scale(1.1);
}

.research-area.expanded {
  aspect-ratio: unset;
  height: auto;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .research-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .research-area {
    aspect-ratio: auto;
    min-height: 120px;
  }
}

/* Teaching/Course styling */
.course-number {
  font-weight: bold;
  color: var(--color-link);
  font-family: var(--font-family-mono);
}

.course-info {
  margin: var(--spacing-sm) 0;
  font-style: italic;
  color: var(--color-muted);
}

.teaching-section {
  margin: var(--spacing-xl) 0;
}

.teaching-section h3 {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
}

/* Code and preformatted text */
code {
  font-family: var(--font-family-mono);
  font-size: 13px;
  background-color: var(--color-code-bg);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
}

pre {
  font-family: var(--font-family-mono);
  font-size: 13px;
  background-color: var(--color-code-bg);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  margin: var(--spacing-lg) 0;
}

pre code {
  background: none;
  border: none;
  padding: 0;
}

/* Tables - Academic style */
table {
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  font-size: 13px;
}

th, td {
  border: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
}

th {
  background-color: var(--color-header-bg);
  font-weight: bold;
}

/* Footer - Minimal academic */
.site-footer {
  margin-top: var(--spacing-xxl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-muted);
  text-align: center;
}

/* CC license link matches the muted footer text — no blue */
.footer-cc-link {
  color: var(--color-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
}

.footer-cc-link:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-muted);
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: var(--color-muted);
  background-color: transparent;
}

.social-links a:hover {
  background-color: var(--color-header-bg);
  color: var(--color-link);
  transform: translateY(-2px);
  text-decoration: none;
}

.social-links i {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.social-links svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.social-links a:hover i,
.social-links a:hover svg {
  transform: scale(1.1);
}

/* ── Mobile top bar (hidden on desktop) ── */
.mobile-topbar {
  display: none;
}

/* Hide elements that don't fit academic style */
.navbar, .navbar-burger, .navbar-menu-mobile {
  display: none;
}

/* ── Tablet (≤768px): stack layout ── */
@media (max-width: 768px) {
  /* Show top bar */
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--color-nav-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--spacing-md);
    z-index: 200;
    gap: var(--spacing-sm);
  }

  .mobile-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--color-text);
  }

  .mobile-topbar-image {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .mobile-topbar-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
  }

  .mobile-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all 0.25s ease;
  }

  /* Sidebar becomes a slide-in drawer */
  .site-nav {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100vh;
    background: var(--color-nav-bg);
    border-right: 1px solid var(--color-border);
    padding: var(--spacing-lg) var(--spacing-md);
    overflow-y: auto;
    z-index: 300;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
  }

  .site-nav.drawer-open {
    left: 0;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }

  /* Overlay behind drawer */
  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 250;
  }

  .mobile-overlay.active {
    display: block;
  }

  /* Close (×) button inside drawer */
  .drawer-close-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: var(--spacing-md);
  }

  .drawer-close-btn button {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-muted);
    padding: 4px 6px;
  }

  .drawer-close-btn button:hover {
    color: var(--color-text);
  }

  /* Center nav links inside drawer */
  .site-nav .nav-profile {
    text-align: center;
    margin-bottom: var(--spacing-lg);
  }

  .site-nav .nav-menu a,
  .site-nav .nav-section a {
    padding: var(--spacing-sm) 0;
    font-size: 17px;
  }

  /* Offset main content below fixed top bar */
  .site-main {
    margin-left: 0;
    margin-top: 56px;
    max-width: 100%;
    width: 100%;
    padding: var(--spacing-md);
  }

  .academic-intro h1 {
    font-size: 26px;
  }

  p, .description {
    text-align: left;
  }

  /* Hide the old expand button — replaced by hamburger */
  #sidebar-expand-btn {
    display: none !important;
  }
}