/* ==========================================================================
   Dr. Khalil Iktilat — Academic Portfolio
   Design tokens, layout, and components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ---- Palette ---- */
  --navy: #12233F;
  --navy-deep: #0A1626;
  --navy-soft: #1D3459;
  --teal: #4C8F86;
  --teal-text: #2C5C56;
  --teal-deep: #1F4642;
  --sand: #D8C7A1;
  --sand-light: #F1E9D8;
  --sand-line: #E3D8BE;
  --off-white: #F7F4EC;
  --white: #FFFFFF;
  --charcoal: #26251F;
  --charcoal-soft: #58554C;
  --charcoal-faint: #82806f;
  --border: #E4DCC8;
  --border-dark: rgba(247,244,236,0.14);

  /* ---- Type ---- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.07rem + 0.3vw, 1.3125rem);
  --fs-lg: clamp(1.375rem, 1.28rem + 0.55vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.5rem + 1.3vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.8rem + 2.3vw, 3.5rem);
  --fs-3xl: clamp(2.6rem, 2rem + 3.2vw, 4.75rem);

  /* ---- Spacing (8px rhythm) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: 1220px;
  --shadow-sm: 0 1px 2px rgba(18,35,63,0.06), 0 1px 1px rgba(18,35,63,0.04);
  --shadow-md: 0 12px 32px -12px rgba(18,35,63,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(18,35,63,0.28);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--navy);
}
p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; }
input, select{ font: inherit; }
svg{ display: block; }

:focus-visible{
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px){ .container{ padding-inline: var(--sp-6); } }

.skip-link{
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  background: var(--navy);
  color: var(--white);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top .2s var(--ease);
  font-weight: 600;
}
.skip-link:focus{ top: var(--sp-4); }

/* ---- Eyebrow / labels ---- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-text);
  font-weight: 500;
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
}
.on-dark .eyebrow{ color: var(--sand); }

.section-head{
  max-width: 720px;
  margin-bottom: var(--sp-8);
}
.section-head h2{
  font-size: var(--fs-2xl);
  margin-top: var(--sp-3);
}
.section-head .lede{
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--charcoal-soft);
  max-width: 62ch;
}
.plain-note{
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--sand-light);
  border-inline-start: 3px solid var(--teal);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--charcoal-soft);
  max-width: 62ch;
}
.plain-note strong{ color: var(--navy); font-weight: 600; }

section{ position: relative; }
.section-pad{ padding-block: var(--sp-9); }
.bg-alt{ background: var(--sand-light); }
.bg-navy{ background: var(--navy); color: var(--off-white); }
.bg-navy h2, .bg-navy h3, .bg-navy h4{ color: var(--off-white); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  min-height: 44px;
  white-space: nowrap;
}
.btn svg{ width: 1.05em; height: 1.05em; flex: none; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn-primary{ background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-primary:hover{ background: var(--teal-deep); border-color: var(--teal-deep); box-shadow: var(--shadow-md); }

.btn-outline{ background: transparent; color: var(--off-white); border-color: rgba(247,244,236,0.4); }
.btn-outline:hover{ background: rgba(247,244,236,0.1); border-color: var(--off-white); }

.btn-ghost{ background: transparent; color: var(--navy); border-color: var(--border); }
.btn-ghost:hover{ background: var(--white); border-color: var(--teal); color: var(--teal-deep); }

.btn-sand{ background: var(--sand); color: var(--navy-deep); border-color: var(--sand); }
.btn-sand:hover{ background: var(--sand-line); border-color: var(--sand-line); }

.cta-row{ display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 500;
  padding-block: var(--sp-4);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), padding-block .3s var(--ease);
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.site-header.is-scrolled{
  background: rgba(247,244,236,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--border), 0 8px 24px -16px rgba(18,35,63,0.25);
  padding-block: var(--sp-3);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--off-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1;
  transition: color .3s var(--ease);
}
.brand-mark{
  width: 38px; height: 38px;
  border-radius: 50%;
  flex: none;
}
.brand small{
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(247,244,236,0.7);
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 2px;
  transition: color .3s var(--ease);
}
.site-header.is-scrolled .brand{ color: var(--navy); }
.site-header.is-scrolled .brand small{ color: var(--teal-text); }

.nav-desktop{ display: none; }
@media (min-width: 1080px){
  .nav-desktop{
    display: flex;
    align-items: center;
    gap: var(--sp-5);
  }
  .nav-desktop a{
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 500;
    color: rgba(247,244,236,0.82);
    letter-spacing: 0.01em;
    padding: 0.4em 0;
    position: relative;
    transition: color .2s var(--ease);
    white-space: nowrap;
  }
  .nav-desktop a::after{
    content:"";
    position: absolute;
    left: 0; right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--teal);
    transition: right .25s var(--ease);
  }
  .nav-desktop a:hover, .nav-desktop a.is-active{ color: var(--white); }
  .nav-desktop a:hover::after, .nav-desktop a.is-active::after{ right: 0; }
  .site-header.is-scrolled .nav-desktop a{ color: var(--charcoal-soft); }
  .site-header.is-scrolled .nav-desktop a:hover,
  .site-header.is-scrolled .nav-desktop a.is-active{ color: var(--navy); }
}

.nav-cta{ display: none; }
@media (min-width: 1080px){
  .nav-cta{ display: inline-flex; }
}

.nav-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  cursor: pointer;
}
@media (min-width: 1080px){ .nav-toggle{ display: none; } }
.nav-toggle svg{ width: 20px; height: 20px; color: var(--navy); }

.mobile-menu{
  position: fixed;
  inset: 0;
  background: var(--navy-deep);
  z-index: 600;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  transform: translateY(-100%);
  transition: transform .35s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu-top{ display: flex; justify-content: space-between; align-items: center; }
.mobile-menu-close{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--border-dark);
  background: transparent;
  color: var(--off-white);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mobile-menu-close svg{ width: 20px; height: 20px; }
.mobile-menu nav{
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  overflow-y: auto;
}
.mobile-menu nav a{
  text-decoration: none;
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-dark);
}
.mobile-menu .cta-row{ margin-top: var(--sp-6); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--off-white);
  padding-top: clamp(7rem, 5rem + 6vw, 10rem);
  padding-bottom: var(--sp-9);
  overflow: hidden;
  isolation: isolate;
}
.hero-decor{
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
}
.hero-decor svg{ width: 100%; height: 100%; }
.hero-grid{
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .hero-grid{ grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-7); }
}
.hero-text .eyebrow{ margin-bottom: var(--sp-5); }
.hero h1{
  font-size: var(--fs-3xl);
  color: var(--white);
}
.hero h1 em{
  font-style: italic;
  color: var(--sand);
  font-weight: 500;
}
.hero-role{
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--sand);
  font-weight: 500;
  max-width: 46ch;
}
.hero-position{
  margin-top: var(--sp-5);
  font-size: var(--fs-base);
  color: rgba(247,244,236,0.82);
  max-width: 56ch;
}
.hero .cta-row{ margin-top: var(--sp-7); }

.hero-stats{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-dark);
}
.hero-stat b{
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--white);
}
.hero-stat span{
  font-size: var(--fs-xs);
  color: rgba(247,244,236,0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-portrait{
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
}
.portrait-ring{
  position: absolute;
  inset: -6%;
  z-index: -1;
}
.portrait-frame{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(216,199,161,0.16), rgba(76,143,134,0.14));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.hero-portrait img{
  width: 92%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(6,12,22,0.45));
}
.scroll-cue{
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(247,244,236,0.55);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
@media (min-width: 900px){ .scroll-cue{ display: flex; } }
.scroll-cue svg{ width: 14px; height: 14px; animation: bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

/* ==========================================================================
   Research cards (home)
   ========================================================================== */
.card-grid-4{
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.research-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  text-decoration: none;
}
.research-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
}
.icon-badge{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--sand-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-deep);
}
.icon-badge svg{ width: 26px; height: 26px; }
.research-card h3{ font-size: var(--fs-md); }
.research-card p{ color: var(--charcoal-soft); font-size: var(--fs-sm); }
.card-link{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card-link svg{ width: 14px; height: 14px; transition: transform .2s var(--ease); }
.research-card:hover .card-link svg{ transform: translateX(3px); }

/* ==========================================================================
   Publication cards
   ========================================================================== */
.filter-bar{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}
.filter-chip{
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--charcoal-soft);
  padding: 0.5em 1.1em;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease);
  min-height: 40px;
}
.filter-chip:hover{ border-color: var(--teal); color: var(--teal-deep); }
.filter-chip.is-active{ background: var(--navy); border-color: var(--navy); color: var(--white); }

.pub-grid{
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.pub-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pub-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pub-card.is-hidden{ display: none; }
.pub-meta{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--teal-text);
  letter-spacing: 0.04em;
}
.pub-status{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-faint);
  background: var(--sand-light);
  padding: 0.2em 0.6em;
  border-radius: 999px;
}
.pub-card h3{ font-size: var(--fs-md); line-height: 1.3; }
.pub-authors{ font-size: var(--fs-sm); color: var(--charcoal-soft); }
.pub-authors b{ color: var(--navy); font-weight: 600; }
.pub-journal{ font-size: var(--fs-sm); font-style: italic; color: var(--charcoal-soft); }
.pub-finding{
  font-size: var(--fs-sm);
  color: var(--charcoal);
  background: var(--sand-light);
  border-inline-start: 3px solid var(--teal);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
}
.pub-finding b{ display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-deep); margin-bottom: 0.35em; }
.pub-plain{ font-size: var(--fs-sm); color: var(--charcoal-soft); }
.pub-plain b{ color: var(--navy); }
.pub-tags{ display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--sp-1); }
.tag{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: var(--sand-light);
  color: var(--teal-deep);
  border: 1px solid var(--sand-line);
}
.pub-foot{
  margin-top: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.doi-link{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--teal-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border-bottom: 1px solid transparent;
}
.doi-link:hover{ border-color: currentColor; }
.doi-link svg{ width: 13px; height: 13px; }

/* ==========================================================================
   Projects
   ========================================================================== */
.project-grid{
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.project-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  position: relative;
  overflow: hidden;
}
.project-card .status-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal-deep);
  background: var(--sand-light);
  padding: 0.35em 0.9em;
  border-radius: 999px;
  margin-bottom: var(--sp-4);
}
.status-pill::before{
  content:"";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.project-card h3{ font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.project-card p{ color: var(--charcoal-soft); font-size: var(--fs-sm); }
.project-partners{
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.project-partners span{
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--charcoal-faint);
}
.chip-row{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--sp-3); }
.chip{
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--charcoal-soft);
  background: var(--off-white);
}

.vision-list{
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  counter-reset: vision;
}
.vision-item{
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.vision-num{
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--sand-line);
  -webkit-text-stroke: 1.5px var(--teal-deep);
  color: transparent;
  flex: none;
  width: 2ch;
}
.vision-item p{ color: var(--charcoal-soft); font-size: var(--fs-sm); align-self: center; }
.vision-item strong{ color: var(--navy); display:block; font-size: var(--fs-base); margin-bottom: 0.25em; font-family: var(--font-display); font-weight:600;}

/* ==========================================================================
   Timeline (PhD / Postdoc)
   ========================================================================== */
.timeline{
  position: relative;
  margin-top: var(--sp-7);
  padding-inline-start: var(--sp-7);
}
.timeline::before{
  content: "";
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--teal), var(--sand-line));
}
.timeline-item{
  position: relative;
  padding-bottom: var(--sp-8);
}
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-item::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-7) + 3px);
  top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--off-white);
  border: 3px solid var(--teal);
}
.timeline-item .t-period{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--teal-text);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.timeline-item h3{ font-size: var(--fs-md); margin-top: 0.3em; }
.timeline-item .t-org{ color: var(--charcoal-soft); font-size: var(--fs-sm); margin-top: 0.2em; }
.timeline-item .t-detail{ margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--charcoal-soft); max-width: 60ch; }
.timeline-item .t-detail strong{ color: var(--navy); }

/* ==========================================================================
   Conferences
   ========================================================================== */
.conf-filters{
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: var(--sp-3);
}
.conf-filters .field{ display: flex; flex-direction: column; gap: 0.4rem; }
.conf-filters label{
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--charcoal-faint);
}
.conf-filters select{
  padding: 0.7em 1em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--charcoal);
  min-height: 44px;
  cursor: pointer;
}
.conf-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.conf-count{ font-size: var(--fs-sm); color: var(--charcoal-soft); }
.conf-count b{ color: var(--navy); }
.reset-btn{
  background: none; border: none; cursor: pointer;
  color: var(--teal-text); font-weight: 600; font-size: var(--fs-sm);
  text-decoration: underline; padding: 0.4em;
}

.conf-timeline{ position: relative; padding-inline-start: var(--sp-7); }
.conf-timeline::before{
  content:"";
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border);
}
.conf-item{
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.conf-item::before{
  content:"";
  position: absolute;
  left: calc(-1 * var(--sp-7) + 3px);
  top: var(--sp-5);
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--sand-line);
  background: var(--white);
}
.conf-item[data-role="Lecture"]::before{ border-color: var(--teal); }
.conf-item[data-role="Poster"]::before{ border-color: var(--sand); }
.conf-item[data-role="Symposium"]::before{ border-color: var(--navy); }
.conf-top{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.conf-year{ font-family: var(--font-mono); font-weight: 600; color: var(--navy); font-size: var(--fs-sm); }
.conf-role{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3em 0.8em;
  border-radius: 999px;
}
.conf-role.role-Lecture{ background: rgba(76,143,134,0.14); color: var(--teal-deep); }
.conf-role.role-Poster{ background: rgba(216,199,161,0.3); color: #7a5f2a; }
.conf-role.role-Symposium{ background: rgba(18,35,63,0.1); color: var(--navy); }
.conf-item h3{ font-size: var(--fs-base); margin-top: var(--sp-2); }
.conf-item .conf-loc{ font-size: var(--fs-sm); color: var(--charcoal-soft); margin-top: 0.2em; display: flex; align-items:center; gap: 0.4em;}
.conf-item .conf-loc svg{ width: 14px; height: 14px; flex: none; color: var(--teal-text); }
.conf-item .conf-subject{ font-size: var(--fs-sm); color: var(--charcoal-soft); margin-top: var(--sp-3); }
.upcoming-flag{ font-family: var(--font-mono); font-size: 10px; color: var(--teal-text); letter-spacing: 0.08em; text-transform: uppercase; }
.conf-empty{ text-align: center; padding: var(--sp-8) 0; color: var(--charcoal-faint); display: none; }
.conf-empty.is-visible{ display: block; }

/* ==========================================================================
   Collaborations
   ========================================================================== */
.collab-groups{ display: grid; gap: var(--sp-8); }
.collab-group h3{
  font-size: var(--fs-base);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-text);
  font-weight: 600;
  margin-bottom: var(--sp-5);
}
.collab-list{ display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }
.collab-card{
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.collab-avatar{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--sand-light);
  color: var(--teal-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  flex: none;
  font-size: var(--fs-sm);
}
.collab-card h4{ font-size: var(--fs-sm); font-weight: 600; color: var(--navy); font-family: var(--font-body); }
.collab-card span{ font-size: var(--fs-xs); color: var(--charcoal-soft); display: block; margin-top: 0.2em; }

.community-note{
  margin-top: var(--sp-8);
  padding: var(--sp-6) var(--sp-7);
  background: var(--navy);
  color: var(--off-white);
  border-radius: var(--radius-lg);
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}
.community-note svg{ width: 32px; height: 32px; flex: none; color: var(--sand); }
.community-note p{ font-size: var(--fs-sm); color: rgba(247,244,236,0.85); }
.community-note strong{ color: var(--white); }

/* ==========================================================================
   CV section
   ========================================================================== */
.cv-metrics{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.metric-card{
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.metric-card b{ display: block; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--navy); }
.metric-card span{ font-size: var(--fs-xs); color: var(--charcoal-soft); text-transform: uppercase; letter-spacing: 0.06em; }

.cv-columns{ display: grid; gap: var(--sp-8); }
@media (min-width: 900px){ .cv-columns{ grid-template-columns: 1.3fr 1fr; } }
.cv-block h3{
  font-size: var(--fs-base);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-text);
  margin-bottom: var(--sp-4);
}
.cv-table{ width: 100%; border-collapse: collapse; }
.cv-table tr{ border-bottom: 1px solid var(--border); }
.cv-table tr:last-child{ border-bottom: none; }
.cv-table td{ padding: var(--sp-3) 0; font-size: var(--fs-sm); vertical-align: top; }
.cv-table td:first-child{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--charcoal-faint); white-space: nowrap; padding-inline-end: var(--sp-4); }
.cv-table td strong{ color: var(--navy); font-weight: 600; display:block; }
.cv-table td em{ font-style: normal; color: var(--charcoal-soft); }

.cv-download{
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--navy);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.cv-download h3{ color: var(--white); font-size: var(--fs-md); }
.cv-download p{ color: rgba(247,244,236,0.75); font-size: var(--fs-sm); margin-top: 0.3em; }

/* ==========================================================================
   Teaching & Books
   ========================================================================== */
.teach-table-wrap{ overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); }
.teach-table{ width: 100%; border-collapse: collapse; min-width: 560px; }
.teach-table th, .teach-table td{ padding: var(--sp-4) var(--sp-5); text-align: start; font-size: var(--fs-sm); }
.teach-table th{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--charcoal-faint);
  border-bottom: 2px solid var(--border);
  font-weight: 600;
}
.teach-table td{ border-bottom: 1px solid var(--border); color: var(--charcoal-soft); }
.teach-table tr:last-child td{ border-bottom: none; }
.teach-table td:first-child{ color: var(--navy); font-weight: 600; }

.book-grid{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-5); }
.book-chip{
  padding: 0.6em 1.1em;
  border-radius: var(--radius-sm);
  background: var(--sand-light);
  border: 1px solid var(--sand-line);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{ display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.contact-card{
  padding: var(--sp-6);
  background: rgba(247,244,236,0.05);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.contact-card .icon-badge{ background: rgba(216,199,161,0.14); color: var(--sand); }
.contact-card h3{ color: var(--white); font-size: var(--fs-base); }
.contact-card p{ color: rgba(247,244,236,0.7); font-size: var(--fs-sm); }
.contact-card a.contact-value{
  color: var(--sand);
  text-decoration: none;
  font-weight: 600;
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.contact-card a.contact-value:hover{ text-decoration: underline; }
.copy-btn{
  background: none; border: none; color: rgba(247,244,236,0.5);
  cursor: pointer; padding: 0.2em; display: inline-flex;
}
.copy-btn svg{ width: 14px; height: 14px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--navy-deep);
  color: rgba(247,244,236,0.7);
  padding-block: var(--sp-8) var(--sp-6);
}
.footer-grid{
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand p{ margin-top: var(--sp-3); font-size: var(--fs-sm); max-width: 34ch; color: rgba(247,244,236,0.6); }
.footer-col h4{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sand);
  margin-bottom: var(--sp-4);
}
.footer-col ul{ display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a{ text-decoration: none; font-size: var(--fs-sm); color: rgba(247,244,236,0.7); transition: color .2s; }
.footer-col a:hover{ color: var(--white); }
.footer-bottom{
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
}
.back-to-top{
  display: inline-flex; align-items: center; gap: 0.4em;
  color: rgba(247,244,236,0.7); text-decoration: none; font-size: var(--fs-xs);
  background: none; border: none; cursor: pointer; font-weight: 600;
}
.back-to-top svg{ width: 14px; height: 14px; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
}

/* ==========================================================================
   Misc utility
   ========================================================================== */
.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;
}
.divider-decor{ position: relative; height: 90px; overflow: hidden; }
.divider-decor svg{ width: 100%; height: 100%; }

@media print{
  .site-header, .mobile-menu, .nav-toggle, .hero .cta-row, .filter-bar, .site-footer, .scroll-cue, #contact, #conferences, #collaborations { display: none !important; }
  body{ background: #fff; }
  section{ page-break-inside: avoid; }
}