/* =============================================================================
   ASAL MEHRADFAR — ACADEMIC WEBSITE DESIGN SYSTEM
   Shared stylesheet for all pages
   Version: 1.0.0
   =============================================================================

   TABLE OF CONTENTS
   -----------------
   1.  CSS Custom Properties (Design Tokens)
   2.  Dark Mode Overrides
   3.  Reset & Base
   4.  Skip Link (Accessibility)
   5.  Typography Scale
   6.  Layout Utilities
   7.  Navigation
   8.  Hero Section
   9.  Credibility Strip
   10. Section Layouts
   11. Cards (Research, Project, Publication)
   12. Publication List
   13. Publication Filters
   14. BibTeX / Citation Modal
   15. News / Timeline
   16. Experience & Education
   17. Skills Grid
   18. Awards
   19. Service Page
   20. Buttons
   21. Badges & Tags
   22. Footer
   23. Responsive Breakpoints
   24. Motion & Reduced-Motion
   25. Focus States & Accessibility Utilities
   26. Print Styles
   ============================================================================= */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Light mode defaults — cool white + refined academic blue accent
   ============================================================================= */

:root {
  /* --- Color Palette --- */

  /* Backgrounds */
  --color-bg:            #FCFCFE;   /* cool white */
  --color-bg-alt:        #F7F8FF;   /* cool blue-gray for alternating sections */
  --color-bg-card:       #FFFFFF;   /* pure white card surface */
  --color-bg-code:       #E8EEF5;   /* inline code / BibTeX block */
  --color-bg-overlay:    rgba(15, 23, 42, 0.55); /* modal backdrop */

  /* Accent — Academic Blue */
  --color-accent:        #4B6FD6;   /* primary academic blue */
  --color-accent-hover:  #3659B8;   /* deeper blue on hover */
  --color-accent-light:  #EEF2FF;   /* pale blue tint for tag backgrounds */
  --color-accent-muted:  #5F83B5;   /* softer accent for secondary elements */

  /* Text */
  --color-text:          #172033;   /* deep navy-charcoal */
  --color-text-secondary:#475569;   /* slate body text */
  --color-text-muted:    #64748B;   /* captions, metadata */
  --color-text-inverse:  #F8FAFC;   /* text on dark backgrounds */

  /* Borders & Dividers */
  --color-border:        #DCE3EC;   /* subtle cool border */
  --color-border-strong: #C4CEDA;   /* stronger divider */

  /* Semantic */
  --color-link:          #315E9B;
  --color-link-hover:    #244A7C;
  --color-focus-ring:    #315E9B;
  --color-success:       #2D6A4F;
  --color-warning:       #B45309;

  /* --- Typography --- */

  /* Font stack — Inter first, then fallbacks in order of preference */
  --font-sans:
    'Inter', 'Manrope', 'Source Sans 3', 'IBM Plex Sans', 'DM Sans',
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --font-mono:
    'IBM Plex Mono', 'Fira Code', 'Cascadia Code',
    'Courier New', Courier, monospace;

  /* Type scale (fluid between 320px and 1440px) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  1.75;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* --- Spacing Scale --- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* --- Layout --- */
  --container-max:   1280px;
  --container-prose: 720px;
  --container-wide:  1440px;
  --gutter:          clamp(1rem, 4vw, 2rem);
  --max-width-content: 900px;   /* unified content width — matches Service page reference */

  /* --- Borders --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 2px rgba(26, 22, 20, 0.06);
  --shadow-sm:  0 1px 4px rgba(26, 22, 20, 0.08), 0 1px 2px rgba(26, 22, 20, 0.04);
  --shadow-md:  0 4px 12px rgba(26, 22, 20, 0.10), 0 2px 4px rgba(26, 22, 20, 0.06);
  --shadow-lg:  0 8px 24px rgba(26, 22, 20, 0.12), 0 4px 8px rgba(26, 22, 20, 0.06);
  --shadow-xl:  0 16px 40px rgba(26, 22, 20, 0.14), 0 8px 16px rgba(26, 22, 20, 0.08);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-theme:  250ms ease;

  /* --- Navigation --- */
  --nav-height:        64px;
  --nav-height-mobile: 56px;
  --nav-bg:            rgba(248, 250, 252, 0.92);
  --nav-border:        var(--color-border);

  /* --- Z-index layers --- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-skip:     600;
}


/* =============================================================================
   2. DARK MODE OVERRIDES
   Deep navy palette — activated via [data-theme="dark"] on <html>
   ============================================================================= */

[data-theme="dark"] {
  /* Backgrounds */
  --color-bg:            #0F172A;   /* deep charcoal */
  --color-bg-alt:        #162033;   /* slightly lighter charcoal */
  --color-bg-card:       #1B273B;   /* card surface */
  --color-bg-code:       #223047;   /* code block */
  --color-bg-overlay:    rgba(0, 0, 0, 0.70);

  /* Accent — soft blue for dark background contrast */
  --color-accent:        #7FA9E6;   /* soft blue for dark background */
  --color-accent-hover:  #A5C4F2;
  --color-accent-light:  #1E3555;   /* dark tint for tag backgrounds */
  --color-accent-muted:  #5F83B5;

  /* Text */
  --color-text:          #F1F5F9;   /* cool off-white */
  --color-text-secondary:#CBD5E1;
  --color-text-muted:    #94A3B8;
  --color-text-inverse:  #0F172A;

  /* Borders */
  --color-border:        #2A3A52;
  --color-border-strong: #3A4D68;

  /* Semantic */
  --color-link:          #7FA9E6;
  --color-link-hover:    #A5C4F2;
  --color-focus-ring:    #7FA9E6;

  /* Navigation */
  --nav-bg:              rgba(15, 23, 42, 0.92);
  --nav-border:          var(--color-border);

  /* Shadows (lighter on dark) */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.20);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.20);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.40), 0 8px 16px rgba(0, 0, 0, 0.25);
}


/* =============================================================================
   3. RESET & BASE
   ============================================================================= */

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

/* Prevent font size inflation on iOS */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Prevent flash of wrong theme — JS sets data-theme before paint */
  color-scheme: light dark;
}

body {
  background:
    radial-gradient(circle at 10% 10%, rgba(120,180,255,0.16), transparent 35%),
    radial-gradient(circle at 90% 15%, rgba(200,170,255,0.14), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(255,220,180,0.10), transparent 38%),
    var(--color-bg);
  background-attachment: fixed;

  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Smooth theme color transitions */
  transition:
    background-color var(--transition-theme),
    color var(--transition-theme);
  /* Prevent horizontal overflow */
  overflow-x: hidden;
  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Remove list styles on ul/ol with role="list" */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form elements */
input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Remove default anchor styles */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Code elements */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  background: var(--color-bg-code);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  line-height: var(--leading-relaxed);
}

code {
  background: var(--color-bg-code);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

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

/* Strong / bold */
strong, b {
  font-weight: var(--weight-semibold);
}

/* Abbreviations */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* Selection */
::selection {
  background-color: var(--color-accent-light);
  color: var(--color-text);
}

[data-theme="dark"] ::selection {
  background-color: var(--color-accent-light);
  color: var(--color-text);
}


/* =============================================================================
   4. SKIP LINK (ACCESSIBILITY)
   Visually hidden until focused — WCAG 2.4.1
   ============================================================================= */

.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  /* Hidden off-screen by default */
  transform: translateY(calc(-100% - var(--space-8)));
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-lg);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--color-text-inverse);
  outline-offset: 2px;
}


/* =============================================================================
   5. TYPOGRAPHY SCALE
   ============================================================================= */

/* Headings */
h1, .h1 {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h2, .h2 {
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h3, .h3 {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

h4, .h4 {
  font-size: clamp(var(--text-md), 2vw, var(--text-xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

h5, .h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

h6, .h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Body text variants */
.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* Section label / eyebrow */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* Section heading with decorative underline */
.section-heading {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-2);
}

.section-heading::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

/* Author name highlight */
.author-self {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* Equal contribution marker */
.equal-contrib {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  vertical-align: super;
}

/* Prose content */
.prose {
  max-width: var(--container-prose);
}

.prose p {
  margin-bottom: var(--space-4);
}

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

.prose ul,
.prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}


/* =============================================================================
   6. LAYOUT UTILITIES
   ============================================================================= */

/* Main container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--prose {
  max-width: var(--container-prose);
}

/* Main content area — offset for fixed nav */
main {
  padding-top: var(--nav-height);
  min-height: calc(100vh - var(--nav-height));
}

/* Section spacing */
.section {
  padding-block: var(--space-20);
}

.section--sm {
  padding-block: var(--space-12);
}

.section--lg {
  padding-block: var(--space-32);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* Section header */
.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-heading::after {
  left: 50%;
  transform: translateX(-50%);
}

.section-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  max-width: 60ch;
}

.section-header--center .section-subtitle {
  margin-inline: auto;
}

/* Grid layouts */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.grid--auto-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid--auto-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.flex-wrap { flex-wrap: wrap; }

/* Visibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Spacing helpers */
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }


/* =============================================================================
   7. NAVIGATION
   ============================================================================= */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background-color var(--transition-theme),
    border-color var(--transition-theme),
    box-shadow var(--transition-base);
}

/* Add shadow when scrolled (JS adds .is-scrolled) */
.site-nav.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  gap: var(--space-6);
}

/* Logo / wordmark */
.nav-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1.2;
}

.nav-logo__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  transition: color var(--transition-fast);
}

.nav-logo__tagline {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

.nav-logo:hover .nav-logo__name {
  color: var(--color-accent);
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--color-text);
  background-color: var(--color-bg-alt);
}

/* Active page indicator */
.nav-links a[aria-current="page"],
.nav-links a.is-active {
  color: var(--color-accent);
  background-color: var(--color-accent-light);
  font-weight: var(--weight-semibold);
}

/* Nav actions (theme toggle + CV button) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border-color: var(--color-border-strong);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Show/hide sun/moon icons based on theme */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Hamburger menu button (mobile only) */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  flex-shrink: 0;
}

.nav-hamburger:hover {
  background-color: var(--color-bg-alt);
  border-color: var(--color-border-strong);
}

.nav-hamburger svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* Hamburger icon lines */
.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.hamburger-line + .hamburger-line {
  margin-top: 5px;
}

/* Animated X when open */
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: calc(var(--z-sticky) - 1);
  overflow-y: auto;
  padding: var(--space-6) var(--gutter) var(--space-12);
  border-top: 1px solid var(--color-border);
  /* Slide in from top */
  transform: translateY(-8px);
  opacity: 0;
  transition:
    transform var(--transition-slow),
    opacity var(--transition-slow);
}

.nav-mobile.is-open {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

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

.nav-mobile__links li + li {
  border-top: 1px solid var(--color-border);
}

.nav-mobile__links a {
  display: flex;
  align-items: center;
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-mobile__links a:hover,
.nav-mobile__links a[aria-current="page"] {
  color: var(--color-accent);
}

.nav-mobile__actions {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


/* =============================================================================
   8. HERO SECTION
   ============================================================================= */

.hero {
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-20);
  background-color: var(--color-bg);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero-content {
  max-width: 640px;
}

.hero-pronouns {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}

.hero-title {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.hero-position {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.hero-advisor {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.hero-advisor a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-statement {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 55ch;
}

/* Hero action buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* Social icons row */
.hero-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.social-link:hover {
  color: var(--color-accent);
  background-color: var(--color-accent-light);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.social-link svg {
  width: 18px;
  height: 18px;
}

/* Profile photo */
.hero-photo-wrap {
  flex-shrink: 0;
}

.hero-photo {
  width: clamp(180px, 20vw, 260px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--color-bg-card);
}

/* Photo placeholder */
.hero-photo-placeholder {
  width: clamp(180px, 20vw, 260px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  background: var(--color-bg-alt);
  border: 2px dashed var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-4);
}


/* =============================================================================
   9. CREDIBILITY STRIP
   ============================================================================= */

.credibility-strip {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.credibility-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6) var(--space-10);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.credibility-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.credibility-label:hover {
  color: var(--color-text-secondary);
}

.credibility-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border-strong);
  flex-shrink: 0;
}


/* =============================================================================
   10. SECTION LAYOUTS
   ============================================================================= */

/* Two-column layout for about/bio sections */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.two-col--wide-left {
  grid-template-columns: 3fr 2fr;
}

.two-col--wide-right {
  grid-template-columns: 2fr 3fr;
}


/* =============================================================================
   11. CARDS (Research, Project, Publication)
   ============================================================================= */

/* Base card */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

/* Research area card */
.research-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.research-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.research-card__icon {
  width: 44px;
  height: 44px;
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}

.research-card__icon svg {
  width: 22px;
  height: 22px;
}

.research-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.research-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.research-card__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--transition-fast);
}

.research-card__link:hover {
  gap: var(--space-2);
}

.research-card__link svg {
  width: 14px;
  height: 14px;
}

/* Project card */
.project-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.project-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
}

.project-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
}

.project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.project-card:hover .project-card__image {
  transform: scale(1.04);
}

.project-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--space-4);
  border-bottom: 1px dashed var(--color-border);
}

.project-card__category {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.project-card__body {
  padding: var(--space-5) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.project-card__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

.project-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.project-card__venue {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.project-card__summary {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.project-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}


/* =============================================================================
   12. PUBLICATION LIST
   ============================================================================= */

/* Year group */
.pub-year-group {
  margin-bottom: var(--space-12);
}

.pub-year-label {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  letter-spacing: var(--tracking-tight);
}

/* Individual publication entry */
.pub-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.pub-entry:last-child {
  border-bottom: none;
}

/* Publication number */
.pub-number {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  padding-top: 2px;
  min-width: 2ch;
  text-align: right;
}

.pub-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pub-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.pub-title:hover {
  color: var(--color-accent);
}

.pub-authors {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.pub-venue {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.pub-venue strong {
  font-style: normal;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.pub-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Equal contribution footnote */
.pub-footnote {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Individual publication page */
.pub-page-header {
  padding-top: calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-12);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.pub-page-category {
  margin-bottom: var(--space-4);
}

.pub-page-title {
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.pub-page-authors {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.pub-page-venue {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.pub-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Abstract block */
.abstract-block {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6);
  margin-block: var(--space-8);
}

.abstract-block__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.abstract-block__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Key contributions list */
.contributions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contributions-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.contributions-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.55em;
}

/* BibTeX block on pub page */
.bibtex-block {
  background: var(--color-bg-code);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  overflow-x: auto;
  white-space: pre;
  position: relative;
}


/* =============================================================================
   13. PUBLICATION FILTERS
   ============================================================================= */

.pub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.pub-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  white-space: nowrap;
}

.pub-filter-btn:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  background: var(--color-bg-alt);
}

.pub-filter-btn.is-active,
.pub-filter-btn[aria-pressed="true"] {
  color: var(--color-accent);
  background: var(--color-accent-light);
  border-color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

/* Count badge on filter */
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  background: var(--color-bg-alt);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pub-filter-btn.is-active .filter-count {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

/* Hidden publication entries (filtered out) */
.pub-entry[data-hidden="true"],
.pub-year-group[data-hidden="true"] {
  display: none;
}


/* =============================================================================
   14. BIBTEX / CITATION MODAL
   ============================================================================= */

/* Modal backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}

.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Modal dialog */
.modal {
  position: relative;
  z-index: var(--z-modal);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(8px);
  transition: transform var(--transition-base);
}

.modal-backdrop.is-open .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
  flex-shrink: 0;
}

.modal-close:hover {
  color: var(--color-text);
  background: var(--color-bg-alt);
}

.modal-close svg {
  width: 16px;
  height: 16px;
}

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

/* BibTeX content in modal */
.modal-bibtex {
  background: var(--color-bg-code);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  overflow-x: auto;
  white-space: pre;
  margin-bottom: var(--space-4);
  tab-size: 2;
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Copy button states */
.btn-copy {
  position: relative;
}

.btn-copy__label-default { display: inline; }
.btn-copy__label-copied  { display: none; }

.btn-copy.is-copied .btn-copy__label-default { display: none; }
.btn-copy.is-copied .btn-copy__label-copied  { display: inline; }

.btn-copy.is-copied {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}


/* =============================================================================
   15. NEWS / TIMELINE
   ============================================================================= */

/* Timeline layout */
.news-timeline {
  position: relative;
  padding-left: var(--space-8);
}

.news-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.news-item {
  position: relative;
  padding-bottom: var(--space-8);
}

.news-item:last-child {
  padding-bottom: 0;
}

/* Timeline dot */
.news-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-8) - 4px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.news-date {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.news-headline {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.news-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.news-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Compact news card (homepage preview) */
.news-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.news-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-strong);
}

.news-card__date {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 80px;
  padding-top: 2px;
}

.news-card__content {
  flex: 1;
}

.news-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
}

.news-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* =============================================================================
   16. EXPERIENCE & EDUCATION
   ============================================================================= */

/* Experience entry */
.exp-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-6);
  padding-bottom: var(--space-10);
  position: relative;
}

.exp-entry + .exp-entry {
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.exp-date {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  padding-top: 4px;
  min-width: 120px;
}

.exp-content {}

.exp-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.exp-org {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

.exp-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.exp-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.exp-bullets li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.exp-bullets li::before {
  content: '→';
  color: var(--color-accent);
  flex-shrink: 0;
  font-weight: var(--weight-medium);
}

/* Education entry */
.edu-entry {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.edu-entry + .edu-entry {
  margin-top: var(--space-4);
}

.edu-icon {
  width: 44px;
  height: 44px;
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}

.edu-icon svg {
  width: 22px;
  height: 22px;
}

.edu-content {}

.edu-degree {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.edu-school {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-1);
}

.edu-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* =============================================================================
   17. SKILLS GRID
   ============================================================================= */

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.skill-category {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.skill-category__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.skill-category__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skill-category__items li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.skill-category__items li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border-strong);
  flex-shrink: 0;
}


/* =============================================================================
   18. AWARDS
   ============================================================================= */

.awards-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.award-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-accent);
}

.award-year {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  white-space: nowrap;
  min-width: 40px;
  padding-top: 2px;
}

.award-content {}

.award-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.award-org {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* =============================================================================
   19. SERVICE PAGE
   ============================================================================= */

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.service-item:last-child {
  border-bottom: none;
}

.service-role {
  font-size: var(--text-base);
  color: var(--color-text);
  flex: 1;
}

.service-venue {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.service-year {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Workshop organization entry */
.workshop-entry {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.workshop-entry__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.workshop-entry__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.workshop-entry__meta a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =============================================================================
   20. BUTTONS
   ============================================================================= */

/* Base button reset */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  /* Minimum touch target */
  min-height: 40px;
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Primary button — cardinal accent */
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
  box-shadow: 0 4px 12px rgba(155, 27, 48, 0.30);
}

/* Secondary button — outlined */
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* Ghost button — minimal */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

/* Accent ghost */
.btn-accent-ghost {
  background: transparent;
  color: var(--color-accent);
  border-color: transparent;
}

.btn-accent-ghost:hover {
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
}

/* Small button */
.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  min-height: 32px;
  border-radius: var(--radius-sm);
}

.btn-sm svg {
  width: 13px;
  height: 13px;
}

/* Large button */
.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  min-height: 48px;
  border-radius: var(--radius-lg);
}

.btn-lg svg {
  width: 18px;
  height: 18px;
}

/* Resource link buttons (Paper, Code, Dataset, etc.) */
.resource-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  min-height: 28px;
}

.resource-btn:hover {
  color: var(--color-accent);
  background: var(--color-accent-light);
  border-color: var(--color-accent);
}

.resource-btn svg {
  width: 12px;
  height: 12px;
}

/* Specific resource button variants */
.resource-btn--paper   { }
.resource-btn--code    { }
.resource-btn--dataset { }
.resource-btn--doi     { }
.resource-btn--cite    { }


/* =============================================================================
   21. BADGES & TAGS
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
}

/* Category badges */
.badge--circuits {
  background: #EEF2FF;
  color: #3730A3;
}
[data-theme="dark"] .badge--circuits {
  background: #1E1B4B;
  color: #A5B4FC;
}

.badge--drug-delivery {
  background: #F0FDF4;
  color: #166534;
}
[data-theme="dark"] .badge--drug-delivery {
  background: #052E16;
  color: #86EFAC;
}

.badge--generative-ai {
  background: #FFF7ED;
  color: #9A3412;
}
[data-theme="dark"] .badge--generative-ai {
  background: #431407;
  color: #FDBA74;
}

.badge--llms {
  background: #F0F9FF;
  color: #075985;
}
[data-theme="dark"] .badge--llms {
  background: #082F49;
  color: #7DD3FC;
}

.badge--finance {
  background: #FEFCE8;
  color: #854D0E;
}
[data-theme="dark"] .badge--finance {
  background: #422006;
  color: #FDE047;
}

.badge--default {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

/* Status badge */
.badge--status {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Placeholder badge */
.badge--placeholder {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
  font-style: italic;
}


/* =============================================================================
   22. FOOTER
   ============================================================================= */

.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-12) var(--space-8);
  transition:
    background-color var(--transition-theme),
    border-color var(--transition-theme);
}

.footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: start;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}

.footer-brand {}

.footer-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.footer-email {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}

.footer-email:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-email svg {
  width: 14px;
  height: 14px;
}

/* Footer social icons */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.footer-social .social-link {
  width: 34px;
  height: 34px;
}

/* Footer bottom row */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-copyright {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav a {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--color-text-secondary);
}


/* =============================================================================
   23. RESPONSIVE BREAKPOINTS
   Mobile-first: base styles apply to 320px+, then progressively enhance
   ============================================================================= */

/* ---- 320px — smallest supported (base styles above already handle this) ---- */

/* ---- 375px — standard small phone ---- */
@media (min-width: 375px) {
  :root {
    --gutter: 1.25rem;
  }
}

/* ---- 390px — iPhone 14 Pro ---- */
@media (min-width: 390px) {
  .hero-actions {
    gap: var(--space-3);
  }
}

/* ---- 430px — iPhone 14 Plus / large phones ---- */
@media (min-width: 430px) {
  :root {
    --gutter: 1.5rem;
  }

  .hero-title {
    font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl));
  }
}

/* ---- 768px — tablet portrait ---- */
@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
  }

  /* Show desktop nav, hide hamburger */
  .nav-links { display: flex; }
  .nav-hamburger { display: none; }
  .nav-mobile { display: none !important; }

  /* Hero two-column */
  .hero-inner {
    grid-template-columns: 1fr auto;
  }

  /* Two-column layouts */
  .two-col {
    grid-template-columns: 1fr 1fr;
  }

  /* Grid layouts */
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* Footer top */
  .footer-top {
    grid-template-columns: 1fr auto;
  }

  /* Experience entries */
  .exp-entry {
    grid-template-columns: 140px 1fr;
  }

  /* Publication entries */
  .pub-entry {
    grid-template-columns: 2ch 1fr;
  }
}

/* ---- 1024px — tablet landscape / small desktop ---- */
@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
  }

  /* Three-column grids */
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* Wide left two-column */
  .two-col--wide-left {
    grid-template-columns: 3fr 2fr;
  }

  .two-col--wide-right {
    grid-template-columns: 2fr 3fr;
  }

  /* Hero photo larger */
  .hero-photo {
    width: clamp(200px, 18vw, 260px);
  }
}

/* ---- 1280px — standard desktop ---- */
@media (min-width: 1280px) {
  :root {
    --gutter: 2.5rem;
  }

  /* Four-column grid */
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  /* Larger section spacing */
  .section {
    padding-block: var(--space-24);
  }
}

/* ---- 1440px+ — large desktop ---- */
@media (min-width: 1440px) {
  :root {
    --gutter: 3rem;
  }

  .hero-title {
    font-size: var(--text-5xl);
  }
}

/* ---- Mobile-only overrides (max-width) ---- */
@media (max-width: 767px) {
  /* Hide desktop nav links, show hamburger */
  .nav-links { display: none; }
  .nav-hamburger { display: inline-flex; }

  /* Stack hero vertically */
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* Center hero photo */
  .hero-photo-wrap {
    order: -1;
    display: flex;
    justify-content: center;
  }

  .hero-photo,
  .hero-photo-placeholder {
    width: clamp(140px, 45vw, 200px);
  }

  /* Center hero actions */
  .hero-actions {
    justify-content: center;
  }

  .hero-social {
    justify-content: center;
  }

  /* Stack section heading underline */
  .section-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Single column grids */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Stack two-col */
  .two-col,
  .two-col--wide-left,
  .two-col--wide-right {
    grid-template-columns: 1fr;
  }

  /* Stack footer */
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Stack experience entries */
  .exp-entry {
    grid-template-columns: 1fr;
  }

  .exp-date {
    min-width: unset;
  }

  /* Stack pub entries */
  .pub-entry {
    grid-template-columns: 1fr;
  }

  .pub-number {
    display: none;
  }

  /* Credibility strip wraps */
  .credibility-divider {
    display: none;
  }

  /* Modal full-width on mobile */
  .modal {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
  }

  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  /* News card stack */
  .news-card {
    flex-direction: column;
    gap: var(--space-2);
  }

  .news-card__date {
    min-width: unset;
  }

  /* Education entry stack */
  .edu-entry {
    flex-direction: column;
  }

  /* Award item stack */
  .award-item {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ---- Tablet-only (768px–1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-photo,
  .hero-photo-placeholder {
    width: clamp(160px, 22vw, 220px);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================================
   24. MOTION & REDUCED-MOTION
   ============================================================================= */

/* Gentle section reveal (JS adds .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; }

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Disable all non-essential motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .project-card:hover .project-card__image {
    transform: none;
  }

  .social-link:hover {
    transform: none;
  }

  .card:hover,
  .project-card:hover,
  .research-card:hover {
    transform: none;
  }
}


/* =============================================================================
   25. FOCUS STATES & ACCESSIBILITY UTILITIES
   WCAG 2.1 AA — visible focus for all interactive elements
   ============================================================================= */

/* Universal focus ring */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove outline for mouse users (only show for keyboard) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure buttons and links always show focus */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* High-contrast mode support */
@media (forced-colors: active) {
  .btn-primary {
    border: 2px solid ButtonText;
  }

  .badge {
    border: 1px solid ButtonText;
  }

  .card,
  .research-card,
  .project-card {
    border: 1px solid ButtonText;
  }
}

/* Ensure sufficient contrast for placeholder text */
::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Accessible hidden content */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ensure no information is conveyed by color alone */
.required-indicator::after {
  content: ' *';
  color: var(--color-accent);
  aria-hidden: true;
}

/* Loading state */
.is-loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}

/* Lazy-loaded images — prevent layout shift */
img[loading="lazy"] {
  /* Reserve space before image loads */
}

img.is-lazy {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

img.is-lazy.is-loaded {
  opacity: 1;
}

/* Placeholder for missing images */
.img-placeholder {
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-md);
}


/* =============================================================================
   26. PRINT STYLES
   ============================================================================= */

@media print {
  /* Reset colors for print */
  :root {
    --color-bg: #fff;
    --color-bg-alt: #f8f8f8;
    --color-bg-card: #fff;
    --color-text: #000;
    --color-text-secondary: #333;
    --color-text-muted: #666;
    --color-accent: #315E9B;
    --color-border: #ccc;
  }

  /* Hide interactive elements */
  .site-nav,
  .nav-hamburger,
  .nav-mobile,
  .theme-toggle,
  .skip-link,
  .pub-filters,
  .modal-backdrop,
  .hero-actions,
  .hero-social {
    display: none !important;
  }

  /* Remove fixed positioning */
  .site-nav {
    position: static;
  }

  main {
    padding-top: 0;
  }

  /* Ensure links are visible */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }

  /* Avoid page breaks inside cards */
  .card,
  .pub-entry,
  .edu-entry,
  .award-item {
    break-inside: avoid;
  }

  /* Remove shadows */
  * {
    box-shadow: none !important;
  }
}


/* =============================================================================
   27. PUBLICATION DETAIL PAGES
   Shared styles for all individual publication pages (publications/*.html)
   ============================================================================= */

/* Publication page layout */
.pub-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

/* Breadcrumb navigation */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}
.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb-sep { opacity: 0.4; }

/* Publication header */
.pub-header {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}
.pub-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.pub-title {
  font-size: clamp(1.375rem, 3.5vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.pub-authors {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.pub-authors strong { color: var(--color-text); font-weight: 600; }
.pub-venue {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}
.pub-venue em { font-style: italic; }

/* Resource buttons on pub pages */
.pub-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.resource-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.resource-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}
.resource-btn svg { flex-shrink: 0; }

/* Publication image area */
.pub-image-wrap {
  margin-bottom: 2.5rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.pub-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.pub-image-placeholder {
  aspect-ratio: 16/7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.pub-image-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

/* Publication sections */
.pub-section {
  margin-bottom: 2.5rem;
}
.pub-section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
}
.pub-section p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* Key contributions */
.pub-contributions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pub-contributions li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.pub-contributions li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.55em;
}

/* BibTeX block on pub pages */
.pub-bibtex {
  background: var(--color-bg-code, #E8EEF5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  overflow-x: auto;
  white-space: pre;
  position: relative;
}

/* Copy BibTeX button */
.pub-bibtex-copy {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.pub-bibtex-copy:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Related publications on pub pages */
.pub-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.pub-related-card {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-card);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  display: block;
}
.pub-related-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px var(--color-shadow);
}
.pub-related-card .pub-category-badge {
  margin-bottom: 0.5rem;
}
.pub-related-card h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 0.25rem;
}
.pub-related-card p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Equal contribution marker */
.equal-star {
  color: var(--color-accent);
  font-size: 0.75em;
  vertical-align: super;
}

/* Responsive for pub pages */
@media (max-width: 640px) {
  .pub-page { padding: 2rem 1rem 4rem; }
  .pub-title { font-size: 1.375rem; }
  .pub-resource-links { gap: 0.5rem; }
  .pub-related-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   PUBLICATION PAGE NAV ALIASES
   Publication pages use .nav / .hamburger / .mobile-nav class names.
   These aliases map them to the shared nav design system.
   ============================================================================= */

/* .nav is an alias for .site-nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--transition-theme), border-color var(--transition-theme), box-shadow var(--transition-base);
}

/* Nav logo span child (publication pages use <a class="nav-logo">Name<span>tagline</span></a>) */
.nav-logo span {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-regular);
}

/* CV link in nav */
.nav-cv a,
.nav-links .nav-cv a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.nav-cv a:hover,
.nav-links .nav-cv a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: transparent;
}

/* .hamburger is an alias for .nav-hamburger */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.hamburger:hover {
  background-color: var(--color-bg-alt);
  border-color: var(--color-border-strong);
}
.hamburger svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* .mobile-nav is an alias for .nav-mobile */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-overlay);
  z-index: calc(var(--z-sticky) + 100);
  overflow-y: auto;
}
.mobile-nav.open {
  display: block;
}
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.mobile-nav a {
  display: block;
  padding: 0.875rem 1.5rem;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
  color: var(--color-accent);
  background: var(--color-accent-light);
}

/* Responsive: show hamburger on mobile for pub pages */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav .nav-links { display: none; }
}

/* =============================================================================
   PUBLICATION PAGE — MISSING COMPONENT STYLES
   All classes used in publications/*.html that were absent from this stylesheet.
   ============================================================================= */

/* Footer alias (.footer = .site-footer for publication pages) */
.footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 1.5rem;
  margin-top: auto;
  text-align: center;
}
.footer .footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.footer .footer-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.footer .footer-tagline {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}
.footer .footer-social {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer .footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--transition-base);
}
.footer .footer-social a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.footer .footer-social svg {
  width: 18px;
  height: 18px;
}
.footer .footer-copy {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  margin-top: 2.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border);
  width: 100%;
  transition: color var(--transition-fast);
}
.back-link:hover {
  color: var(--color-accent);
}
.back-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Related publications list */
.related-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.related-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.related-item:first-child {
  border-top: 1px solid var(--color-border);
}
.related-item-cat {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}
.related-item-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 0.25rem;
}
.related-item-title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.related-item-title a:hover {
  color: var(--color-accent);
}
.related-item-venue {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Publication category badge (used as .pub-category.cat-*) */
.pub-category {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.pub-category.cat-circuits { color: #315E9B; background: #E8F0FA; }
.pub-category.cat-bio      { color: #2D6A4F; background: #D8F3DC; }
.pub-category.cat-ai       { color: #1D4E89; background: #D6E4F0; }
.pub-category.cat-finance  { color: #7B5E00; background: #FFF3CD; }
[data-theme="dark"] .pub-category.cat-circuits { color: #7FA9E6; background: #1E3555; }
[data-theme="dark"] .pub-category.cat-bio      { color: #52B788; background: #1B3A2D; }
[data-theme="dark"] .pub-category.cat-ai       { color: #5B9BD5; background: #1A2D40; }
[data-theme="dark"] .pub-category.cat-finance  { color: #D4A017; background: #2D2500; }

/* Publication venue and year */
.pub-venue-name {
  font-weight: 600;
  color: var(--color-text-secondary);
}
.pub-year {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.pub-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* Resource buttons */
.pub-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.btn-resource {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.btn-resource:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}
.btn-resource.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn-resource.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}
.btn-resource svg { flex-shrink: 0; }

/* Contributions list */
.contributions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contributions-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.contrib-bullet {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.55em;
}

/* BibTeX section */
.bibtex-section {
  margin-bottom: 2.5rem;
}
.bibtex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.bibtex-label {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
}
.bibtex-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.bibtex-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.bibtex-block {
  display: none;
  position: relative;
  background: var(--color-bg-code, #E8EEF5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
}
.bibtex-block.open {
  display: block;
}
.bibtex-code {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  white-space: pre;
  display: block;
}
.bibtex-copy {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.bibtex-copy:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Responsive for pub pages — extended */
@media (max-width: 640px) {
  .pub-resources { gap: 0.5rem; }
  .back-link { margin-top: 2rem; }
}