/* ═══════════════════════════════════════════════
   DR. KONXHE KULAJ — QUIET LUXURY · LANDSCAPE EDITION
   Palette: warm parchment · deep charcoal · brushed gold
   Fonts:   Cormorant Garamond (display) · Switzer (body) · JetBrains Mono (meta)
   Layout:  Wide containers, 3-col About, compact pub table, 3-col Experience
═══════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────── */
:root,
[data-theme='light'] {
  /* Surfaces */
  --color-bg:               #f9f6ef;
  --color-surface:          #fdfcf8;
  --color-surface-2:        #ffffff;
  --color-surface-offset:   #f2ede3;
  --color-surface-dynamic:  #e8e1d4;
  --color-divider:          #ddd6c8;
  --color-border:           #cfc7b8;

  /* Text */
  --color-text:             #1c1914;
  --color-text-muted:       #5a5346;
  --color-text-faint:       #a89e8e;
  --color-text-inverse:     #f9f6ef;

  /* Gold accent */
  --color-primary:          #9a7b3f;
  --color-primary-hover:    #7d6230;
  --color-primary-active:   #5e4920;
  --color-primary-highlight:#f0e8d4;
  --color-primary-subtle:   #f7f1e4;

  --color-ink:              #1c1914;
  --color-ink-soft:         #2e2a22;

  /* Shadows — warm-toned */
  --shadow-xs: 0 1px 2px rgba(28,25,20,0.05);
  --shadow-sm: 0 2px 6px rgba(28,25,20,0.07), 0 1px 2px rgba(28,25,20,0.04);
  --shadow-md: 0 6px 20px rgba(28,25,20,0.09), 0 2px 6px rgba(28,25,20,0.05);
  --shadow-lg: 0 20px 56px rgba(28,25,20,0.11), 0 4px 12px rgba(28,25,20,0.06);

  /* Radii */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.875rem;
  --radius-xl:  1.25rem;
  --radius-2xl: 2rem;
  --radius-full:9999px;

  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5.5rem);

  /* Spacing */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.25rem;--space-6: 1.5rem;
  --space-8: 2rem;   --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem;   --space-20:5rem;   --space-24:6rem;

  /* Widths */
  --w-narrow:  680px;
  --w-default: 960px;
  --w-wide:    1280px;

  /* Fonts */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Switzer', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Transitions */
  --t:      200ms cubic-bezier(0.16,1,0.3,1);
  --t-slow: 420ms cubic-bezier(0.16,1,0.3,1);

  --header-h: 68px;
}

/* DARK MODE */
[data-theme='dark'] {
  --color-bg:               #110f0b;
  --color-surface:          #19160f;
  --color-surface-2:        #201c14;
  --color-surface-offset:   #171410;
  --color-surface-dynamic:  #2a2519;
  --color-divider:          #2e2820;
  --color-border:           #3d3628;
  --color-text:             #e8e0d0;
  --color-text-muted:       #9a9080;
  --color-text-faint:       #4a4438;
  --color-text-inverse:     #110f0b;
  --color-primary:          #d4a84b;
  --color-primary-hover:    #c4973a;
  --color-primary-active:   #a87c28;
  --color-primary-highlight:#2a2011;
  --color-primary-subtle:   #221a0d;
  --color-ink:              #e8e0d0;
  --color-ink-soft:         #c8bfac;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 56px rgba(0,0,0,0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#110f0b; --color-surface:#19160f; --color-surface-2:#201c14;
    --color-surface-offset:#171410; --color-surface-dynamic:#2a2519;
    --color-divider:#2e2820; --color-border:#3d3628;
    --color-text:#e8e0d0; --color-text-muted:#9a9080; --color-text-faint:#4a4438;
    --color-text-inverse:#110f0b;
    --color-primary:#d4a84b; --color-primary-hover:#c4973a;
    --color-primary-active:#a87c28; --color-primary-highlight:#2a2011;
    --color-primary-subtle:#221a0d;
  }
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--space-6));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body{
  min-height:100dvh;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.68;
  transition:background var(--t),color var(--t);
}

img,svg{display:block;max-width:100%;height:auto;}
ul[role='list'],ol[role='list']{list-style:none;}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  text-wrap:balance;
  line-height:1.1;
  font-weight:400;
}
p,li,figcaption{text-wrap:pretty;}
a{color:var(--color-primary);text-decoration:none;transition:color var(--t);}
a:hover{color:var(--color-primary-hover);}
a:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
::selection{background:color-mix(in oklab,var(--color-primary) 18%,transparent);color:var(--color-text);}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ─── LAYOUT CONTAINERS ───────────────────────── */
/* Narrow default container — still used internally */
.container{
  width:100%;max-width:var(--w-default);
  margin-inline:auto;
  padding-inline:clamp(var(--space-6),5vw,var(--space-16));
}
.container--narrow{max-width:var(--w-narrow);}
.container--wide{max-width:var(--w-wide);}

/* Wide container — used by all landscape sections */
.wide-container{
  width:100%;max-width:var(--w-wide);
  margin-inline:auto;
  padding-inline:clamp(var(--space-6),4vw,var(--space-16));
}

/* ─── SECTION ─────────────────────────────────── */
.section{padding-block:clamp(var(--space-12),6vw,var(--space-20));}
.section--alt{background:var(--color-surface);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);}

.section-label{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-primary);
  margin-bottom:var(--space-4);
  display:flex;align-items:center;gap:var(--space-3);
}
.section-label::before{content:'';display:inline-block;width:20px;height:1px;background:var(--color-primary);}

.section-title{
  font-size:var(--text-2xl);
  font-weight:400;
  color:var(--color-text);
  margin-bottom:var(--space-6);
  letter-spacing:-.02em;
}

.section-intro{
  font-size:var(--text-base);
  color:var(--color-text-muted);
  max-width:60ch;
  line-height:1.78;
  margin-bottom:var(--space-12);
}

/* ─── HEADER ──────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  background:color-mix(in oklab,var(--color-bg) 90%,transparent);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--color-divider);
  transition:box-shadow var(--t),background var(--t);
}
.site-header.scrolled{box-shadow:var(--shadow-sm);}

.header-inner{
  max-width:var(--w-wide);margin-inline:auto;
  padding-inline:clamp(var(--space-6),5vw,var(--space-16));
  height:100%;display:flex;align-items:center;gap:var(--space-8);
}

.site-logo{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text);text-decoration:none;flex-shrink:0;}
.site-logo:hover{color:var(--color-primary);}
.logo-text{font-family:var(--font-display);font-size:1.1rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;}

.site-nav{margin-left:auto;}
.site-nav ul{display:flex;gap:var(--space-8);list-style:none;}
.site-nav a{
  font-size:var(--text-sm);font-weight:450;
  color:var(--color-text-muted);letter-spacing:.025em;
  text-decoration:none;position:relative;padding-bottom:2px;
  transition:color var(--t);
}
.site-nav a::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:1px;background:var(--color-primary);
  transition:width var(--t);
}
.site-nav a:hover{color:var(--color-text);}
.site-nav a:hover::after,.site-nav a.active::after{width:100%;}
.site-nav a.active{color:var(--color-text);}

.header-actions{display:flex;align-items:center;gap:var(--space-3);}

.theme-toggle{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);color:var(--color-text-muted);
  cursor:pointer;background:none;border:none;
  transition:color var(--t),background var(--t);
}
.theme-toggle:hover{color:var(--color-primary);background:var(--color-primary-highlight);}

.mobile-menu-toggle{
  display:none;flex-direction:column;gap:5px;
  width:36px;height:36px;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:var(--space-2);
}
.mobile-menu-toggle span{
  display:block;width:20px;height:1.5px;
  background:var(--color-text);
  transition:transform var(--t),opacity var(--t);border-radius:2px;
}

.mobile-nav{
  background:var(--color-bg);border-top:1px solid var(--color-divider);
  padding:var(--space-6) clamp(var(--space-6),5vw,var(--space-16));
}
.mobile-nav ul{list-style:none;}
.mobile-nav li{border-bottom:1px solid var(--color-divider);}
.mobile-nav a{display:block;padding:var(--space-4) 0;font-size:var(--text-base);color:var(--color-text);text-decoration:none;}

/* ─── HERO ────────────────────────────────────── */
.hero{
  /* Reduced min-height for landscape feel */
  min-height:clamp(420px, 70vh, 680px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(var(--space-12),7vw,var(--space-20));
  position:relative;overflow:hidden;
}

/* Delicate grain texture overlay */
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events:none;opacity:.4;
}

/* Gold gradient bloom */
.hero::after{
  content:'';position:absolute;
  top:-30%;left:50%;transform:translateX(-50%);
  width:80vw;max-width:900px;height:60vw;max-height:600px;
  background:radial-gradient(ellipse at 50% 0%,
    color-mix(in oklab,var(--color-primary) 12%,transparent) 0%,
    color-mix(in oklab,var(--color-primary)  4%,transparent) 45%,
    transparent 70%);
  pointer-events:none;z-index:0;
}

/* Hero inner — side by side: left content | right portrait */
.hero-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(var(--space-12),6vw,var(--space-20));
  align-items:center;
  max-width:var(--w-wide);margin-inline:auto;
  padding-inline:clamp(var(--space-6),5vw,var(--space-16));
  width:100%;
}

.hero-left{min-width:0;}
.hero-right{flex-shrink:0;}

.hero-eyebrow{
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-primary);margin-bottom:var(--space-5);
  display:flex;align-items:center;gap:var(--space-3);
}
.hero-eyebrow::before{content:'';display:inline-block;width:24px;height:1px;background:var(--color-primary);}

.hero-name{
  font-family:var(--font-display);font-size:var(--text-3xl);
  font-weight:400;letter-spacing:-.025em;line-height:1.0;
  color:var(--color-text);margin-bottom:var(--space-6);
}
.hero-phd{color:var(--color-primary);font-style:italic;font-weight:300;}

.hero-statement{
  font-size:clamp(1rem,.9rem + .5vw,1.2rem);
  color:var(--color-text-muted);max-width:52ch;
  line-height:1.75;margin-bottom:var(--space-5);
}

/* .hero-affil replaces old .hero-affiliation */
.hero-affil,
.hero-affiliation{
  font-family:var(--font-mono);font-size:.68rem;
  color:var(--color-text-faint);margin-bottom:var(--space-10);
  display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;
  letter-spacing:.04em;
}
.hero-affil .sep,
.hero-affiliation .sep{color:var(--color-divider);}

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

.hero-link{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-xs);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-text-muted);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface);
  transition:all var(--t);text-decoration:none;
}
.hero-link:hover{
  color:var(--color-primary);
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.hero-link--cv{
  background:var(--color-primary);color:var(--color-text-inverse);
  border-color:var(--color-primary);
}
.hero-link--cv:hover{
  background:var(--color-primary-hover);
  color:var(--color-text-inverse);
  border-color:var(--color-primary-hover);
}

/* ── CIRCULAR PORTRAIT ────────────────────────── */
/* .hero-right wraps the portrait — no flex-shrink */
.portrait-ring{
  position:relative;
  width:clamp(200px,22vw,300px);
  aspect-ratio:1/1;
}

/* Decorative gold ring behind the circle */
.portrait-ring::before{
  content:'';position:absolute;
  inset:-8px;border-radius:50%;
  border:1px solid color-mix(in oklab,var(--color-primary) 30%,transparent);
  pointer-events:none;
}
/* Second ring, dashed, slightly larger */
.portrait-ring::after{
  content:'';position:absolute;
  inset:-16px;border-radius:50%;
  border:1px dashed color-mix(in oklab,var(--color-primary) 16%,transparent);
  pointer-events:none;
  animation:ring-rotate 30s linear infinite;
}
@keyframes ring-rotate{to{transform:rotate(360deg);}}

.portrait-circle{
  width:100%;height:100%;border-radius:50%;
  overflow:hidden;
  border:2px solid color-mix(in oklab,var(--color-primary) 35%,var(--color-border));
  box-shadow:var(--shadow-md);
  background:var(--color-surface-offset);
}
.portrait-circle img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;border-radius:50%;
}

/* ─── ABOUT — 3-COLUMN LANDSCAPE ─────────────── */
/* photo+facts | biography | keywords+languages   */
.about-layout{
  display:grid;
  grid-template-columns:220px 1fr 240px;
  gap:clamp(var(--space-8),3.5vw,var(--space-16));
  align-items:start;
  margin-top:var(--space-6);
}

/* Left column: photo + quick facts */
.about-aside{
  display:flex;flex-direction:column;gap:var(--space-5);
}

.about-photo{
  border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-md);
  aspect-ratio:1/1;
}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.about-photo figcaption{
  padding:var(--space-3) var(--space-4);
  font-family:var(--font-mono);font-size:.63rem;
  color:var(--color-text-faint);letter-spacing:.05em;
  background:var(--color-surface-offset);
  text-align:center;line-height:1.5;
}

.quick-facts{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-5);
  display:flex;flex-direction:column;gap:0;
  overflow:hidden;
  position:relative;
}
.quick-facts::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--color-primary),transparent);
}

.qf-row{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-divider);
}
.qf-row:last-child{border-bottom:none;padding-bottom:0;}
.qf-row:first-child{padding-top:0;}

.qf-label{
  font-family:var(--font-mono);font-size:.62rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-text-faint);
}
.qf-val{
  font-size:var(--text-sm);color:var(--color-text);font-weight:450;line-height:1.4;
}
.qf-link{
  font-family:var(--font-mono);font-size:.7rem;
  color:var(--color-primary);
}
.qf-link:hover{text-decoration:underline;}

/* Centre column: biography */
.about-bio{min-width:0;}
.about-bio p{
  color:var(--color-text-muted);line-height:1.82;
  margin-bottom:var(--space-5);
}
.about-bio .about-lead{
  font-family:var(--font-display);
  font-size:clamp(1rem,.9rem + .5vw,1.18rem);
  font-weight:400;color:var(--color-text);letter-spacing:.01em;line-height:1.65;
}
.about-bio em{font-style:italic;}

/* Right column: keywords + languages */
.about-meta{
  display:flex;flex-direction:column;gap:var(--space-5);
  position:sticky;top:calc(var(--header-h) + var(--space-6));
}

/* Sidebar card — shared between about-meta and elsewhere */
.sidebar-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-5) var(--space-5);
  position:relative;overflow:hidden;
}
.sidebar-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--color-primary),transparent);
}
.sidebar-card h3{
  font-family:var(--font-mono);font-size:.65rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-text-faint);margin-bottom:var(--space-4);
}

.keyword-list{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;}
.keyword-list li{
  font-family:var(--font-mono);font-size:.65rem;
  background:var(--color-primary-highlight);color:var(--color-primary);
  padding:3px var(--space-3);border-radius:var(--radius-sm);
  border:1px solid color-mix(in oklab,var(--color-primary) 18%,transparent);
}
.lang-list{list-style:none;}
.lang-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-2) 0;font-size:var(--text-sm);
  border-bottom:1px solid var(--color-divider);
}
.lang-list li:last-child{border-bottom:none;}
.lang-level{font-family:var(--font-mono);font-size:.65rem;color:var(--color-text-faint);}

/* ─── RESEARCH ────────────────────────────────── */
.research-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-5);
  margin-top:var(--space-4);
}

.research-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:clamp(var(--space-6),3vw,var(--space-8));
  transition:box-shadow var(--t),transform var(--t),border-color var(--t);
  position:relative;
}
.research-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--color-primary),transparent 60%);
  opacity:0;transition:opacity var(--t-slow);
}
.research-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:color-mix(in oklab,var(--color-primary) 28%,var(--color-border));}
.research-card:hover::before{opacity:1;}
.research-card--featured{
  border-color:color-mix(in oklab,var(--color-primary) 22%,var(--color-border));
  background:color-mix(in oklab,var(--color-primary-highlight) 25%,var(--color-surface));
}
.research-card__num{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;
  color:var(--color-primary);margin-bottom:var(--space-4);
}
.research-card__title{
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:500;color:var(--color-text);margin-bottom:var(--space-4);line-height:1.32;
}
.research-card__body{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.8;margin-bottom:var(--space-5);}
.research-card__body em{font-style:italic;}
.research-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.research-card__tags span{
  font-family:var(--font-mono);font-size:.65rem;
  color:var(--color-primary);background:var(--color-primary-highlight);
  padding:3px var(--space-3);border-radius:var(--radius-sm);
  border:1px solid color-mix(in oklab,var(--color-primary) 15%,transparent);
}

/* ─── PUBLICATIONS ────────────────────────────── */

/* Header row: title left, inline metrics right */
.pub-header{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-4);
  margin-bottom:var(--space-6);
}
.pub-header .section-title{margin-bottom:0;}

.pub-metrics-inline{
  display:flex;align-items:center;
  gap:var(--space-5);
  flex-shrink:0;
}
.pmi{
  display:flex;flex-direction:column;align-items:center;
  gap:1px;text-align:center;
}
.pmi-num{
  font-family:var(--font-display);font-size:clamp(1.2rem,1rem + 1vw,1.75rem);
  font-weight:400;color:var(--color-text);letter-spacing:-.02em;line-height:1;
}
.pmi-label{
  font-family:var(--font-mono);font-size:.6rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-text-faint);
}
.pmi-link{
  font-family:var(--font-mono);font-size:.7rem;
  color:var(--color-primary);letter-spacing:.04em;
  white-space:nowrap;
}
.pmi-link:hover{text-decoration:underline;}

/* Featured publication — 2-col */
.pub-featured{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(var(--space-8),4vw,var(--space-12));
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:clamp(var(--space-6),3vw,var(--space-8));
  margin-bottom:var(--space-8);
  position:relative;overflow:hidden;
}
.pub-featured::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--color-primary),color-mix(in oklab,var(--color-primary) 25%,transparent));
}

.pub-featured__badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-mono);font-size:.65rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-primary);background:var(--color-primary-highlight);
  padding:4px var(--space-3);border-radius:var(--radius-sm);
  margin-bottom:var(--space-4);
  border:1px solid color-mix(in oklab,var(--color-primary) 18%,transparent);
}
.pub-featured__badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--color-primary);}

.pub-featured__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);}

.pub-journal{font-family:var(--font-mono);font-size:.67rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);}
.pub-year{font-family:var(--font-mono);font-size:.67rem;color:var(--color-text-faint);}
.pub-role{
  font-family:var(--font-mono);font-size:.65rem;
  padding:2px var(--space-3);border-radius:var(--radius-sm);
  background:var(--color-surface-dynamic);color:var(--color-text-muted);
}

.pub-featured__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;color:var(--color-text);margin-bottom:var(--space-3);line-height:1.32;}
.pub-featured__authors{font-family:var(--font-mono);font-size:.63rem;color:var(--color-text-faint);margin-bottom:var(--space-4);line-height:1.72;}
.pub-featured__authors sup{font-size:.6em;}
.pub-featured__abstract{
  font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.82;
  border-left:2px solid var(--color-divider);padding-left:var(--space-5);
}
.pub-featured__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-5);}

/* Publication links — shared */
.pub-link{
  font-family:var(--font-mono);font-size:.67rem;font-weight:500;
  color:var(--color-text-muted);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:var(--space-1) var(--space-3);
  text-decoration:none;transition:all var(--t);letter-spacing:.04em;
}
.pub-link:hover{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-highlight);}
.pub-link--doi{color:var(--color-text-faint);}
.pub-cite{font-family:var(--font-mono);font-size:.65rem;color:var(--color-text-faint);}

/* Compact pub table — year | body rows */
.pub-table{
  display:flex;flex-direction:column;
  border-top:1px solid var(--color-divider);
  margin-bottom:var(--space-8);
}

.pub-row{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:var(--space-5);
  padding-block:var(--space-6);
  border-bottom:1px solid var(--color-divider);
  transition:background var(--t);
}
.pub-row:hover{background:var(--color-primary-subtle);}

.pub-row__year{
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:300;color:var(--color-text-faint);
  letter-spacing:-.01em;padding-top:var(--space-1);
  line-height:1.1;
}

.pub-row__body{min-width:0;}

.pub-row__meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-3);margin-bottom:var(--space-2);
}

.pub-row__title{
  font-family:var(--font-display);
  font-size:clamp(1rem,.9rem + .4vw,1.15rem);
  font-weight:500;color:var(--color-text);
  line-height:1.32;margin-bottom:var(--space-2);
}

.pub-row__authors{
  font-family:var(--font-mono);font-size:.63rem;
  color:var(--color-text-faint);margin-bottom:var(--space-3);
  line-height:1.68;
}

.pub-row__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);}

/* Thesis block — 2-col image | content */
.thesis-block{
  margin-top:var(--space-8);
  display:grid;
  grid-template-columns:280px 1fr;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);overflow:hidden;
  gap:0;
}

.thesis-block__image{
  overflow:hidden;position:relative;min-height:240px;
}
.thesis-block__image img{
  width:100%;height:100%;object-fit:cover;
  object-position:center 20%;
  display:block;
  filter:saturate(0.85);
  transition:transform var(--t-slow),filter var(--t-slow);
}
.thesis-block:hover .thesis-block__image img{transform:scale(1.02);filter:saturate(1);}

.thesis-block__image::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,transparent 60%,color-mix(in oklab,var(--color-surface) 80%,transparent));
}

.thesis-block__content{
  padding:clamp(var(--space-6),3vw,var(--space-8));
  display:flex;flex-direction:column;
}

.thesis-block__label{
  font-family:var(--font-mono);font-size:.65rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--color-text-faint);margin-bottom:var(--space-3);
}
.thesis-block__title{
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:500;color:var(--color-text);line-height:1.32;margin-bottom:var(--space-3);
}
.thesis-block__meta-line{
  font-family:var(--font-mono);font-size:.65rem;
  color:var(--color-text-faint);letter-spacing:.03em;
  margin-bottom:var(--space-5);
  line-height:1.6;
}
.thesis-block__abstract{
  font-size:var(--text-sm);color:var(--color-text-muted);
  line-height:1.8;margin-bottom:var(--space-6);
  flex:1;
}

/* ─── EXPERIENCE — 3-COLUMN GRID ─────────────── */
.exp-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--space-6),3.5vw,var(--space-12));
  align-items:start;
  margin-top:var(--space-4);
}

.exp-col{}

.exp-col__heading{
  font-family:var(--font-mono);font-size:.65rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-text-faint);margin-bottom:var(--space-6);
  padding-bottom:var(--space-3);border-bottom:1px solid var(--color-divider);
}

/* ─── TIMELINE (inside exp-col) ──────────────── */
.timeline{
  position:relative;
  display:flex;flex-direction:column;
}

.timeline-item{
  position:relative;display:grid;
  grid-template-columns:16px 1fr;
  gap:var(--space-4);
  padding-bottom:var(--space-7);
}
.timeline-item:last-child{padding-bottom:0;}

/* New tl-* class names mapping to same styles */
.tl-marker{
  position:relative;display:flex;
  justify-content:center;padding-top:6px;
}
.tl-marker::before{
  content:'';width:9px;height:9px;border-radius:50%;
  background:var(--color-surface-dynamic);border:2px solid var(--color-border);
  flex-shrink:0;position:relative;z-index:1;
}
.tl-marker::after{
  content:'';position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:1px;height:calc(100% + var(--space-7) - 16px);
  background:var(--color-divider);
}
.timeline-item:last-child .tl-marker::after{display:none;}

.timeline-item--current .tl-marker::before,
.timeline-item--current .timeline-item__marker::before{
  background:var(--color-primary);border-color:var(--color-primary);
  box-shadow:0 0 0 4px var(--color-primary-highlight);
}

.tl-marker--edu::before{border-radius:var(--radius-sm);}
.tl-marker--conf::before{background:var(--color-primary-highlight);border-color:var(--color-primary);}

.tl-body{min-width:0;}
.tl-period{font-family:var(--font-mono);font-size:.63rem;color:var(--color-text-faint);margin-bottom:var(--space-2);letter-spacing:.04em;}
.tl-role{font-family:var(--font-display);font-size:var(--text-base);font-weight:500;color:var(--color-text);margin-bottom:var(--space-2);line-height:1.3;}
.tl-org{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-2);}
.tl-desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.75;margin-bottom:var(--space-2);}
.tl-desc em{font-style:italic;}
.tl-link{font-family:var(--font-mono);font-size:.63rem;font-weight:500;color:var(--color-primary);letter-spacing:.04em;}
.tl-link:hover{text-decoration:underline;}

/* ─── READING STACK (inside exp-col) ─────────── */
.reading-stack{
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--color-divider);
}
.reading-row{
  display:flex;align-items:baseline;gap:var(--space-3);
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-divider);
}
.reading-row:last-child{border-bottom:none;}
.reading-tag{
  font-family:var(--font-mono);font-size:.6rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-primary);background:var(--color-primary-highlight);
  padding:2px var(--space-2);border-radius:var(--radius-sm);
  flex-shrink:0;
  border:1px solid color-mix(in oklab,var(--color-primary) 16%,transparent);
}
.reading-title{
  font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;
}

/* ─── CONTACT — 2-COL ─────────────────────────── */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:clamp(var(--space-8),5vw,var(--space-16));
  align-items:start;
}

.contact-left{
  display:flex;flex-direction:column;
}
.contact-left .section-title{margin-bottom:var(--space-4);}

.contact-intro{
  font-size:var(--text-base);color:var(--color-text-muted);
  max-width:56ch;line-height:1.78;margin-bottom:var(--space-8);
}

.contact-quote{
  font-family:var(--font-display);font-size:clamp(1.05rem,1rem + .5vw,1.32rem);
  font-weight:400;font-style:italic;color:var(--color-text);line-height:1.68;
  border-left:2px solid var(--color-primary);padding-left:var(--space-6);
  margin-top:auto;
}
.contact-quote cite{
  display:block;font-family:var(--font-mono);font-size:.63rem;
  color:var(--color-text-faint);font-style:normal;margin-top:var(--space-4);letter-spacing:.05em;
}

.contact-links{
  display:flex;flex-direction:column;gap:var(--space-3);
  position:sticky;top:calc(var(--header-h) + var(--space-6));
}
.contact-item{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);text-decoration:none;color:var(--color-text);
  transition:all var(--t);
}
.contact-item:hover{
  border-color:color-mix(in oklab,var(--color-primary) 35%,var(--color-border));
  background:var(--color-primary-subtle);
  box-shadow:var(--shadow-sm);transform:translateX(3px);
}
.contact-item--cv:hover{transform:none;}
.contact-item__icon{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--color-surface-offset);border-radius:var(--radius-md);
  color:var(--color-text-muted);flex-shrink:0;border:1px solid var(--color-border);
  transition:background var(--t),color var(--t);
}
.contact-item:hover .contact-item__icon{background:var(--color-primary-highlight);color:var(--color-primary);}
.contact-item__body{display:flex;flex-direction:column;gap:2px;}
.contact-item__label{font-family:var(--font-mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint);}
.contact-item__val{font-size:var(--text-sm);font-weight:500;color:var(--color-text);}

/* ─── FOOTER ──────────────────────────────────── */
.site-footer{
  background:var(--color-ink-soft);color:var(--color-text-inverse);
  padding-block:var(--space-10);position:relative;overflow:hidden;
}
[data-theme='dark'] .site-footer{background:var(--color-surface);color:var(--color-text);}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .site-footer{background:var(--color-surface);color:var(--color-text);}}

.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--color-primary),transparent);
}

.footer-inner{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--space-8);flex-wrap:wrap;
}

.footer-left{}
.footer-name{font-family:var(--font-display);font-size:clamp(1rem,.9rem + .5vw,1.15rem);font-weight:500;margin-bottom:var(--space-1);}
.footer-role{font-family:var(--font-mono);font-size:.65rem;opacity:.5;letter-spacing:.04em;}

.footer-nav{
  display:flex;flex-wrap:wrap;
  gap:var(--space-5);justify-content:flex-end;
  align-items:center;
}
.footer-nav a{
  font-family:var(--font-mono);font-size:.65rem;
  text-decoration:none;opacity:.5;letter-spacing:.05em;
  transition:opacity var(--t);color:inherit;
}
.footer-nav a:hover{opacity:1;}

/* ─── ANIMATIONS ──────────────────────────────── */
.fade-in{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* ─── RESPONSIVE ──────────────────────────────── */

/* Large tablet — 3-col layouts collapse */
@media(max-width:1100px){
  /* About: drop right meta column to below bio */
  .about-layout{
    grid-template-columns:200px 1fr;
    grid-template-rows:auto auto;
  }
  .about-meta{
    grid-column:1 / -1;
    position:static;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:var(--space-5);
  }

  /* Experience: 3→2 columns */
  .exp-grid{grid-template-columns:1fr 1fr;}

  /* Thesis: shrink image */
  .thesis-block{grid-template-columns:220px 1fr;}
}

@media(max-width:900px){
  /* About: single column */
  .about-layout{
    grid-template-columns:1fr;
  }
  .about-aside{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:var(--space-5);
    align-items:start;
  }
  .about-photo{aspect-ratio:auto;max-height:200px;}

  /* Experience: single column */
  .exp-grid{grid-template-columns:1fr;}

  /* Featured pub: single column */
  .pub-featured{grid-template-columns:1fr;}

  /* Thesis: stacked */
  .thesis-block{grid-template-columns:1fr;}
  .thesis-block__image{min-height:200px;max-height:240px;}
  .thesis-block__image::after{
    background:linear-gradient(to bottom,transparent 60%,color-mix(in oklab,var(--color-surface) 80%,transparent));
  }

  /* Contact: single column */
  .contact-layout{grid-template-columns:1fr;}
  .contact-links{position:static;}
}

@media(max-width:768px){
  :root{--header-h:58px;}
  .site-nav{display:none;}
  .mobile-menu-toggle{display:flex;}

  /* Hero: single column, hide portrait */
  .hero-inner{grid-template-columns:1fr;}
  .hero-right{display:none;}

  /* Research: single column */
  .research-grid{grid-template-columns:1fr;}

  /* Pub metrics: wrap tighter */
  .pub-header{flex-direction:column;align-items:flex-start;}
  .pub-metrics-inline{gap:var(--space-4);}

  /* Pub row: tighter */
  .pub-row{grid-template-columns:48px 1fr;gap:var(--space-3);}

  /* Footer */
  .footer-inner{flex-direction:column;align-items:flex-start;}
  .footer-nav{justify-content:flex-start;}
}

@media(max-width:480px){
  .hero-links{gap:var(--space-2);}
  .hero-link{padding:var(--space-2) var(--space-3);}

  .pub-row{grid-template-columns:1fr;}
  .pub-row__year{display:none;}

  .about-aside{grid-template-columns:1fr;}
}

/* ─── PERSONAL PAGE NAV LINK ──────────────────── */
/* Subtle gold tint to signal it's a page, not an anchor */
.nav-personal{
  color:var(--color-primary) !important;
}
.nav-personal::after{
  background:var(--color-primary) !important;
}/* ─── RESPONSIVE ────────────────────────────── */

/* ── LARGE TABLET (1100px) ────────────────────── */
@media(max-width:1100px){
  /* About: drop right meta column to below */
  .about-layout{
    grid-template-columns:200px 1fr;
    grid-template-rows:auto auto;
  }
  .about-meta{
    grid-column:1 / -1;
    position:static;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:var(--space-5);
  }
  /* Experience: 3→2 columns */
  .exp-grid{grid-template-columns:1fr 1fr;}
  /* Thesis: shrink image */
  .thesis-block{grid-template-columns:220px 1fr;}
}

/* ── TABLET (900px) ──────────────────────────── */
@media(max-width:900px){
  /* About: single column */
  .about-layout{grid-template-columns:1fr;}
  .about-aside{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:var(--space-5);
    align-items:start;
  }
  .about-photo{aspect-ratio:1/1;max-height:160px;}

  /* Experience: single column */
  .exp-grid{grid-template-columns:1fr;}

  /* Featured pub: single column */
  .pub-featured{grid-template-columns:1fr;}

  /* Thesis: stacked */
  .thesis-block{grid-template-columns:1fr;}
  .thesis-block__image{min-height:200px;max-height:240px;}
  .thesis-block__image::after{
    background:linear-gradient(to bottom,transparent 60%,color-mix(in oklab,var(--color-surface) 80%,transparent));
  }

  /* Contact: single column */
  .contact-layout{grid-template-columns:1fr;}
  .contact-links{position:static;}
}

/* ── MOBILE (768px) ───────────────────────────── */
@media(max-width:768px){
  :root{--header-h:58px;}

  /* Nav */
  .site-nav{display:none;}
  .mobile-menu-toggle{display:flex;}

  /* Hero: single column, portrait below text, no portrait rings overflow */
  .hero{
    min-height:auto;
    padding-block:var(--space-12) var(--space-10);
  }
  .hero-inner{
    grid-template-columns:1fr;
    gap:var(--space-8);
    text-align:center;
  }
  .hero-left{order:1;}
  .hero-right{
    order:2;
    display:flex;
    justify-content:center;
  }
  .portrait-ring{
    width:clamp(160px,50vw,220px);
  }
  .hero-eyebrow{justify-content:center;}
  .hero-name{font-size:clamp(2.2rem,10vw,3.5rem);}
  .hero-statement{margin-inline:auto;}
  .hero-affil{justify-content:center;}
  .hero-links{justify-content:center;}

  /* Sections: tighter padding */
  .section{padding-block:clamp(var(--space-10),6vw,var(--space-16));}

  /* About: fully stacked */
  .about-layout{grid-template-columns:1fr;gap:var(--space-6);}
  .about-aside{
    grid-template-columns:1fr;
    gap:var(--space-4);
  }
  .about-photo{
    max-height:240px;
    aspect-ratio:16/9;
    border-radius:var(--radius-lg);
  }
  .about-photo img{object-position:center 20%;}
  .about-meta{
    grid-template-columns:1fr;
    gap:var(--space-4);
  }

  /* Research: single column */
  .research-grid{grid-template-columns:1fr;}

  /* Publications */
  .pub-header{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-4);
  }
  .pub-metrics-inline{
    gap:var(--space-5);
    flex-wrap:wrap;
  }
  .pub-featured{
    grid-template-columns:1fr;
    padding:var(--space-5);
  }
  .pub-row{
    grid-template-columns:44px 1fr;
    gap:var(--space-3);
    padding-block:var(--space-5);
  }
  .pub-row__year{
    font-size:var(--text-base);
    padding-top:2px;
  }
  .thesis-block{grid-template-columns:1fr;}
  .thesis-block__image{
    min-height:180px;
    max-height:220px;
  }

  /* Experience: single column, tighter */
  .exp-grid{
    grid-template-columns:1fr;
    gap:var(--space-8);
  }

  /* Contact */
  .contact-layout{grid-template-columns:1fr;gap:var(--space-6);}
  .contact-links{position:static;}

  /* Footer */
  .footer-inner{flex-direction:column;align-items:flex-start;gap:var(--space-5);}
  .footer-nav{justify-content:flex-start;flex-wrap:wrap;gap:var(--space-4);}
}

/* ── SMALL MOBILE (480px) ──────────────────────── */
@media(max-width:480px){
  /* Tighter container padding */
  .wide-container{padding-inline:var(--space-4);}

  /* Hero */
  .hero-links{gap:var(--space-2);}
  .hero-link{padding:var(--space-2) var(--space-3);font-size:.65rem;}
  .hero-name{font-size:clamp(2rem,9vw,2.8rem);}

  /* About photo landscape crop */
  .about-photo{max-height:200px;}

  /* Pub row: hide year, full width */
  .pub-row{grid-template-columns:1fr;}
  .pub-row__year{display:none;}
  .pub-row__meta{margin-top:0;}

  /* Section titles */
  .section-title{font-size:clamp(1.6rem,7vw,2.5rem);}

  /* Research cards: tighter */
  .research-card{padding:var(--space-5);}

  /* Contact items */
  .contact-item{padding:var(--space-3) var(--space-4);}
  .contact-item__icon{width:34px;height:34px;}

  /* Sidebar cards */
  .sidebar-card{padding:var(--space-4);}

  /* Timeline items tighter */
  .timeline-item{gap:var(--space-3);padding-bottom:var(--space-5);}
}

/* ── NAV PERSONAL LINK ─────────────────────────── */
.nav-personal{color:var(--color-primary) !important;}
.nav-personal::after{background:var(--color-primary) !important;}