:root {
  /* ===== Brand accent ===== */
  --gold: #fec157;
  --gold-bright: #ffc25d;        /* mobile "Dr." */
  --gold-deep: #cfa742;          /* featured project card */
  --gold-muted: #ae8f65;         /* CV arrow hover */
  --c-gold: 254, 193, 87;        /* use as rgba(var(--c-gold), .35) */

  /* ===== Status ===== */
  --green: #5fbf7e;
  --c-green: 95, 191, 126;

  /* ===== Navy surfaces (dark -> light) ===== */
  --navy: #232532;               /* page background */
  --surface: #2A2D3A;            /* section panels */
  --navy-card: #1c1e2b;          /* project cards */
  --navy-line: #1f212f;          /* card hover border */
  --navy-menu: #15161e;          /* mobile menu overlay */
  --c-ink: 35, 37, 50;           /* navbar-scrolled / seamless fade */
  --c-panel: 31, 33, 47;         /* course & student cards */

  /* ===== Hero gradients ===== */
  --hero-a: #23262f;
  --hero-b: #2a2e3d;
  --hero-c: #30354a;
  --hero-grad-a: #2e3142;
  --hero-grad-b: #3c4160;
  --hero-webkit-a: #2a2c3a;
  --hero-webkit-b: #292b39;
  --hero-fallback: #F0F2F0;
  --c-hero-glow: 90, 110, 170;

  /* ===== Whitespace band gradient ===== */
  --grad-slate: #536976;
  --grad-indigo: #292E49;

  /* ===== Text ===== */
  --white: #fff;
  --text: #f2f3f8;               /* primary near-white */
  --text-strong: #e7e9f2;
  --text-rail: #dfe1ea;
  --light: #c9ccda;              /* pill / tag text */
  --light-2: #c7cad6;            /* mobile pills */
  --muted: #9297aa;              /* labels */
  --muted-2: #8b90a3;            /* dim gray */
  --muted-3: #7c7d8b;            /* about grays */
  --hover-gray: #888da5;         /* link hover */

  /* ===== rgba() bases (use as rgba(var(--c-white), .5)) ===== */
  --c-white: 255, 255, 255;
  --c-black: 0, 0, 0;

  /* ===== Misc ===== */
  --black: #000;
  --blue: #0074D9;               /* legacy nav underline */
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-v30-latin-regular.woff2') format('woff2'),
       url('fonts/montserrat/montserrat-v30-latin-regular.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-v30-latin-500.woff2') format('woff2'),
       url('fonts/montserrat/montserrat-v30-latin-500.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-v30-latin-600.woff2') format('woff2'),
       url('fonts/montserrat/montserrat-v30-latin-600.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-v30-latin-700.woff2') format('woff2'),
       url('fonts/montserrat/montserrat-v30-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlowCondensed/barlow-condensed-v12-latin-regular.woff2') format('woff2'),
       url('fonts/barlowCondensed/barlow-condensed-v12-latin-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Barlow Condensed Semi-Bold (600) */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlowCondensed/barlow-condensed-v12-latin-600.woff2') format('woff2'),
       url('fonts/barlowCondensed/barlow-condensed-v12-latin-600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sora';
  src:  /* check local system first */
       url('fonts/sora/noto-sans-sora-sompeng-v25-latin-regular.woff2') format('woff2'),
       url('fonts/sora/noto-sans-sora-sompeng-v25-latin-regular.woff') format('woff'); 
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sora';
  src: 
       url('fonts/sora/noto-sans-sora-sompeng-v25-latin-500.woff2') format('woff2'),
       url('fonts/sora/noto-sans-sora-sompeng-v25-latin-500.woff') format('woff'); 
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   Scroll reveal — gentle fade-up.
   Only hides while JS is active (.js-reveal on <html>) so content is
   never stuck invisible if scripts fail; and only when the visitor
   hasn't asked to reduce motion.
   ============================================================ */
.fade { }

@media (prefers-reduced-motion: no-preference){
  /* Hidden state only touches opacity — never `transform` — so it can't
     clobber the elements' own hover transforms. */
  .js-reveal .fade-up,
  .js-reveal .fade-left,
  .js-reveal .fade-right,
  .js-reveal .fade-zoom{ opacity: 0; }

  /* Reveal via a keyframe animation, which hands transform control back to
     the element once it finishes (default fill-mode) — so hover still works. */
  .js-reveal .fade-up.visible{ opacity: 1; animation: rvUp .6s cubic-bezier(.16, 1, .3, 1); }
  .js-reveal .fade-left.visible{ opacity: 1; animation: rvLeft .6s cubic-bezier(.16, 1, .3, 1); }
  .js-reveal .fade-right.visible{ opacity: 1; animation: rvRight .6s cubic-bezier(.16, 1, .3, 1); }
  .js-reveal .fade-zoom.visible{ opacity: 1; animation: rvZoom .6s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes rvUp{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes rvLeft{ from{ opacity: 0; transform: translateX(-16px); } to{ opacity: 1; transform: none; } }
@keyframes rvRight{ from{ opacity: 0; transform: translateX(16px); } to{ opacity: 1; transform: none; } }
@keyframes rvZoom{ from{ opacity: 0; transform: scale(.96); } to{ opacity: 1; transform: none; } }

/* Mobile (<=1200px): reveals RE-TRIGGER — animate in on the way down and back
   out on the way up, every pass. Driven by transitions (not the one-shot
   keyframes) with the JS observer toggling `.visible` in and out on this
   breakpoint, so it works in every browser. Mobile cards have no hover
   transforms, so owning `transform` here is safe. Every mobile fader uses
   `fade-up`, but all four directions are handled for completeness. */
@media (max-width: 1200px) and (prefers-reduced-motion: no-preference){
  .js-reveal .fade-up,
  .js-reveal .fade-left,
  .js-reveal .fade-right,
  .js-reveal .fade-zoom{
    opacity: 0;
    animation: none;
    /* the state an element transitions TO when it UN-loads (leaving the bottom):
       longer + eased-in so the drop-away is clearly noticeable */
    transition: opacity .6s cubic-bezier(.4,0,.2,1),
                transform .6s cubic-bezier(.4,0,.2,1);
  }
  .js-reveal .fade-up{ transform: translateY(44px) scale(.94); }
  .js-reveal .fade-left{ transform: translateX(-44px) scale(.94); }
  .js-reveal .fade-right{ transform: translateX(44px) scale(.94); }
  .js-reveal .fade-zoom{ transform: scale(.9); }

  .js-reveal .fade-up.visible,
  .js-reveal .fade-left.visible,
  .js-reveal .fade-right.visible,
  .js-reveal .fade-zoom.visible{
    opacity: 1;
    transform: none;
    animation: none;
    /* the state an element transitions TO when it LOADS in: a touch snappier
       than the un-load so entering still feels crisp */
    transition: opacity .5s cubic-bezier(.22,1,.36,1),
                transform .5s cubic-bezier(.22,1,.36,1);
  }
}


a, button {
  -webkit-tap-highlight-color: transparent;
   user-select: none;
  -webkit-user-select: none;
}
html{
  scroll-behavior: smooth;
}
html, body{
  /* `clip` prevents horizontal overflow WITHOUT making html/body scroll
     containers. Using `hidden` on both forced overflow-y:auto on each, which
     ate the first scroll at the very top/bottom (scroll stuck on first try).
     `hidden` stays as a fallback for browsers without `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  background-color: var(--navy);
  min-height: 100%;
  transition: background-color 0.4s ease;
}
html.at-bottom,
body {
  background-color: var(--surface);
  transition: background-color 0.3s ease;
}

body {
  padding-bottom:
env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
main{
flex: 1; /* Pushes content to fill remaining space */
display: flex;
flex-direction: column;
}

/*Navbar*/
.tableOfContents p {
  display: inline-block;       /* so transforms work cleanly */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tableOfContents p.updating {
  opacity: 0;
  transform: translateY(-0.5em); /* slide upward a bit while fading */
}
.navLinks{
  list-style: none;
  margin-left: 0;
  padding-top: 10px;
}
.underline{
  position: relative;
}

.underline::before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: var(--blue);
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) and (pointer: fine) {
  .underline:hover::before{
    left: 0;
    right: auto;
    width: 100%;
  }
}
header a{
  text-decoration: none;
  color: white;
  font-size: 1rem;
  font-family: montserrat;
  
}

header{
  position: relative;
  padding: 0 2rem;
  
}
.navbar{
  width: 100vw !important;
  height: 60px;
  max-width: 95vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;

}
.navbar_wrapper{
  width: 10000000px;
  height: 60px;
  position: relative;
  position: fixed;
  background-color: transparent;
  color: white;
  z-index: 11;
  transition: background-color 0.5s ease;
}

.navbar_wrapper.scrolled{
  background-color: rgba(var(--c-ink), 0.75);
  backdrop-filter: blur(6px);
}

.navbar .logo p{
  font-size: 1.3rem;
  font-weight: 600;

  color: white;
  margin-left: auto;
  font-family: "montserrat";
}
@media(max-width: 510px){
  .navbar .logo p{
    margin-left: -3vw;
  }
}
@media(max-width: 400px){
  .navbar .logo p{
    margin-left: -5vw;
  }
}
.navbar .links{
  display: flex;
  gap: 5vw;
}
.navLinks{
  display: flex;
}
.navLinks a{
  align-items: center;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
  opacity: 0;
  margin-top: 6px;
  transition: opacity 0.3s ease;
  margin-right: 5px;
}
.navLinks a {
  font-weight: normal;
  transition: font-weight 0.3s ease, opacity 0.3s ease;
}
.navLinks.active a {
  font-weight: 600;
}
.navLinks {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.navLinks.active {
  opacity: 1;
}
.navLinks:hover .dot,
.navLinks.active .dot {
 
  opacity: 1;
}

.tableOfContents{
  color: white;
  margin-right: 30px;
}
.tableOfContents p{
  font-family: Dm sans;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 0.8rem;
}


.navLogo{
  padding-top: 10px;
  height: 40px;
}

.dropdown_menu.open{
  height: 180px;
}
.tableOfContents{
  display: none;
}
@media(max-width: 1200px){
  .tableOfContents{
    display: block !important; 
  }
  
  .navbar .links {
    display: none;
  }
  .dropdown_menu{
    display: block;
  }
  .navbar_wrapper{
    height: 55px;
  }
}
@media(max-width: 600px){
  .dropdown_menu{
    left: 2rem;
    width: unset;
  }
@media(max-width: 500px){
  .navLogo{
    padding-top: 0;
    height: 30px;
    margin-top: -5px;
    margin-left: -15px;
  }
}
}
.whitespace{
  height:8vh;
  width: 100vw;

  background: var(--grad-slate);  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, var(--grad-indigo), var(--grad-slate));  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, var(--grad-indigo), var(--grad-slate)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}





/*hero*/

.heroSection{
  display: flex;
  height: calc(100vh - 6rem);
  background: var(--hero-fallback);  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, var(--hero-webkit-a), var(--hero-webkit-b));  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, var(--hero-grad-a), var(--hero-grad-b)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  

  border-radius: 30px;
  margin: 3.7rem 2.5rem 3.7rem 2.5rem;
  padding: 0;
}

.heroText{
  height: 92vh;
  width: calc(50vw - 3.7rem);
  display: flex;
  flex-direction: column;     /* 👈 stack vertically */
  justify-content: center;    /* center vertically */       /* center horizontally */
  text-align: left;
  margin-left: 4rem;
}
.heroText h1{
  font-family: montserrat;
  font-size: 3rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0;
}
.heroText hr{
  border: none;
  border-top: 5px solid var(--gold-bright);
  width: 100%;
  display: none;
}
.heroText h2{
  font-family: montserrat;
  font-size: 1.2rem;
  font-weight: 500;
  color: white;
  margin-bottom: 0;
  margin-top: 0;
}
#desktopHeading{
  display: block;
  font-family: inter;
  font-weight: 600;
}
#mobileHeading{
  display: none;
}
.heroText p{
  font-family: montserrat;
  font-size: 1.1rem;
  
  font-weight: 400;
  color: white;
}


.heroButtons{
  cursor: pointer;
  width: max-content;
}
.heroText a{
  color: var(--gold);
  font-family: montserrat;
  font-weight: bold;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: padding 0.4s ease, color 0.4s ease;
}
.heroButtons svg{
  transition: padding 0.4s ease, color 0.4s ease;
}
.heroButtons:hover a{
  padding-right: 5px;
  color: 	var(--hover-gray);
}
.heroButtons:hover svg{
  color: var(--hover-gray);
}
.view-CV-Arrow{
  display: inline; 
  color: var(--gold); 
  vertical-align: middle; 
  padding-left: 20px; 
  margin-bottom: 5px;
}
.heroText a:hover .view-CV-Arrow{
  color: var(--gold-muted);
}
.heroHeadshot{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100;
  background-color: transparent;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
width: calc(50vw - 3.7rem);
}
.heroHeadshot img{
  max-height: 100%;
  height: 40vw;
width: 40vw;
object-fit: contain; 
border-radius: 100%;
box-shadow: 0 10px 25px rgba(var(--c-black),0.8);

object-fit: cover;
}
.lottieScroll{
  margin-left: -10px; width: 7vh; height: 7vh; display: inline-block;  vertical-align: middle;
}
.aalokLogo{
  display: none;
}
 .mobileHeroButtons{
    display: none;
  }

  
@media(max-width: 1200px){
  .lottieScroll{
    display: none;
  }
  .aalokLogo{
    display: block;
    width: 80vw;
    margin-left: auto;
    
    margin-top: 10vh; 
    padding: 0;
    height: auto;
    border-radius: 30px;
    display: none; 
  }
  .heroSection {
    display: flex;        /* keep flex! */
    margin: 0;
    flex-direction: column-reverse;  /* headshot first, text below */
    align-items: center;
    justify-content: center;
    
    height: auto;
    background: 	var(--navy);;
    background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 60px;
    border-radius: 0;
  }
  .heroSection::before{
    
  }

  .heroText {
    width: 100%;
    margin: 0;
    margin-top: 70px;
    
    padding: 0;
    text-align: left;
    height: auto;
  }
  #desktopHeading{
    display: none;
  }
  #mobileHeading{
    font-size: clamp(2.5rem, 11vw, 3.8rem);
    display: block;
    font-family: montserrat;
    padding-bottom: 0.1rem;
    margin-bottom: 0;
    
  }
  .heroText h2{
    
    padding-top: 0;
    font-size: 1.2rem;
    
    padding-bottom: 1.3rem;
    font-weight: 600;
    margin-right: 0;
  }
  .heroText p{
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    margin-top: 30px;
    padding-bottom: 10px;
    color: rgba(var(--c-white),0.6)
  }

  .heroText h1,
  .heroText h2,
  .heroText p {
    margin: 0 auto;
    
    width: 90%;
  }

  .mobileHeroButtons{
    padding-top: 0.5rem;
    box-sizing: border-box;
    
    display: block;
    width: 100vw;
    justify-content: space-between;
    display: flex;

  }
  #mobileDownloadCV span{
    font-weight: 500;
    margin-top: 1px;
    color: white;
    font-size: 15px;
    font-family: montserrat;
    text-decoration: underline;
    text-decoration-color: var(--gold);
  }
  #mobileDownloadCV svg{
    color: white;
    padding-left: 5px;
  }
  #mobileViewLinkedIn span{
    font-weight: 500;
    color: white;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    
    font-family: montserrat;
  }
  #mobileViewLinkedIn svg{
    color: white;
    padding-left: 5px;
    
  }
  .mobileHeroButtons img{
    border-radius: 50%;
  }
  .heroHeadshot {
    width: 100%;
    padding: 2rem 0;
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 5vh;
    display: none;
  }
  .heroButtons{
    display: none;
  }

  .heroHeadshot img {
    width: 75vw;
    height: 75vw;
    border-radius: 100%;
    margin: 0 auto;
    display: block;
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }
}
@media (max-width: 3000px){
  #desktopHeading{
    font-size: 7rem;
    margin-bottom: 0;
  }
  .heroText h2{
    font-size: 2.1rem;
    margin-top: -10px;
    margin-left: 4px;
    font-family: "nunito sans";
  }
  .heroButtons a{
    font-size: 1.2rem;
  }
}
@media (max-width: 2000px){
  #desktopHeading{
    font-size: 5rem;
    margin-bottom: 0;
  }
  .heroText h2{
    font-size: 1.7rem;
    margin-top: -10px;
    margin-left: 4px;
    font-family: "nunito sans";
  }
  .heroButtons a{
    font-size: 1.2rem;
  }
}
@media (max-width: 1750px){
  #desktopHeading{
    font-size: 4rem;
    margin-bottom: 0;
  }
  .heroButtons a{
    font-size: 1.1rem;
  }
}
@media (max-width: 1600px){
  #desktopHeading{
    font-size: 3rem;
  }
  .heroText h2{
    font-size: 1.35rem;
    font-family: "nunito sans";
    margin-left: 0;
    margin-top: -4px;
  }
  .heroButtons a{
    font-size: 1rem;
  }
}
@media (max-width: 1200px) {
  .mobileHeroButtons {
    padding-left: 3rem !important;
    padding-right: 60vw !important;
    
  }
  .heroText h2{
    display: none;
  }
}
@media (max-width: 950px) {
  .mobileHeroButtons {
    padding-right: 50vw !important;
    padding-left: 2.5rem !important;
    
    
  }
}
@media (max-width: 800px) {
  .mobileHeroButtons {
    padding-left: 2rem !important;
    padding-right: 45vw !important;
  }
}
@media (max-width: 700px) {
  .mobileHeroButtons {
    padding-left: 2rem !important;
    padding-right: 40vw !important;
  }
}

@media (max-width: 600px) {
  .mobileHeroButtons {
    padding-left: 1.5rem !important;
    padding-right: 30vw !important;
  }
}

@media (max-width: 500px) {
  .mobileHeroButtons {
    padding-left: 1rem !important;
    padding-right: 2rem !important;
  }
}



/*about*/

.aboutSection{
  background-color: var(--surface);
  padding-bottom: 2vh;
  
  display: flex;
  position: relative;
}
.right-column{
  margin-top: 8rem;
  flex: 1;
}
.left-column{
  flex: 1;
  margin-top: 8rem;
}
.left-column small{
  font-family: montserrat;
  font-size: 0.9rem;
  margin-left: 10px;
  color: var(--muted-3);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.left-column h1{
  margin-top: 0;
  font-family: montserrat;
  font-weight: 500;
  font-size: 2rem;
  color: white;
  padding-bottom: 1rem;
  margin-bottom: 0;
  margin-left: 10px;
}

.left-column p{
  margin-left: 10px;
  margin-top: 5px;
  font-family: montserrat;
  color: var(--muted-3);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.5;
}

.getInTouchLink{
  cursor: pointer;
  max-width: fit-content;
}
.getInTouchLink svg{
  transition: padding 0.3s ease, color 0.3s ease;
}
.getInTouchLink a{
  transition: padding 0.3s ease, color 0.3s ease;
}
.getInTouchLink svg{
  display: inline; 
  color: var(--gold); 
  vertical-align: middle; 
  padding-left: 20px; 
  margin-bottom: 5px;
}
.getInTouchLink:hover a{
  padding-right: 5px;
  color: 	var(--hover-gray);
}
.getInTouchLink:hover svg{
  color: 	var(--hover-gray);
}
.left-column a{
  color: var(--gold);
  font-family: montserrat;
  font-weight: 600;
  border: none;
  margin-left: 10px;
  font-size: 1rem;
  
}
.left-column,
.right-column{
  
  padding: 1rem;
  display: flex;
  flex-direction: column;
  
  padding-left: 20px;
  margin-bottom: 13vh;
}
.right-column h1{
  
  margin-top: 0;
  font-family: montserrat;
  font-weight: 500;
  font-size: 2rem;
  color: white;
  padding-bottom: 1rem;
  margin-bottom: 0;
  margin-left: 10px;
}
.researchDropdownContent{
  margin-left: 10px;
  margin-top: 5px;
  font-family: montserrat;
  color: var(--muted-3);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  
  transition: max-height 0.4s ease, opacity 0.4s ease;
}
.researchDropdownContent.show{
  max-height: 500px;
  opacity: 1;

}
.plusSign{
  transition: transform 0.5s ease;
}
.plusSign.rotate{
  transform: rotate(45deg);
}
.right-column{
  flex: 1;
}
.right-column button{
  cursor: pointer;
}
.right-column hr{
  border: none;
height: 1px;
background-color: white; /* Or #FF6F3C or any visible color */
margin: 0.2rem 0.2rem;
}
.researchDropdownToggle {
  height: 1rem;
  border: none;
  margin-top: 13px;
  margin-bottom: 0px;
  cursor: pointer;
  display: flex;
  justify-content: space-between; 
  text-align: left;
  background-color: transparent;
}
.researchDropdownToggle span{
  font-size: 0.9rem;
  font-family: montserrat;
  color: var(--muted-3);
  font-weight: 400;
}

.right-column hr{
  height: 1px;
  background-color: var(--muted-3);
}

@media(max-width: 1200px){
  .aboutSection{
    display: none;
    background: var(--navy);
  }
  .left-column{
    display: none;
  }
}
@media (max-width: 2000px){
  .right-column, 
  .left-column{
    padding: 4rem;
  }
  
  
}
@media (max-width: 1750px){
  .right-column, 
  .left-column{
    padding: 3rem;
  }
}
@media (max-width: 1600px){
  .right-column, 
  .left-column{
    padding: 2rem;
  }
}



.mobileEducationTitle{
  color: white;
  
  font-family: dm sans;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 0.8rem;
  margin-left: 2rem;
}
#mobileEducation{
  display: none;
}
@media(max-width: 1200px){
  #mobileEducation{
    display: block;
  }
}



.publicationsTitle{
  color: white;
  font-family: montserrat;
  font-size: 2.5rem;
  font-weight: 700;
  margin-left: 2rem;
}

.pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem;
  
}
.fullCardMeta{
  display: flex;
  float: right;

}
.pub-meta{
  display: block;
  display: flex;
  flex-direction: column;
}
.icon-meta{
  margin-right: 4px;
  color: rgba(var(--c-white),1);
}
.pub-card{
  background: var(--navy-card);
  border: 1px solid rgba(var(--c-white), 0.05);
  padding: 2rem;
  transition: transform 0.3s ease, z-index 0.3s ease, box-shadow 0.4s ease, border 0.4s ease;
  position: relative;
  z-index: 1;
  
}
.pub-card:hover {
  transform: scale(1.05);
  z-index: 10;
  border: 1px solid var(--navy-line);
  box-shadow: 0 12px 30px rgba(var(--c-black), 0.3);
}
.pub-card:first-of-type{
  background: var(--gold-deep);
}
.venue{
  font-family: barlow condensed;
  color: white;
  font-weight: 600;
}
.location{
  font-family: montserrat;
  color: rgba(var(--c-white),0.5);
}
.date{
  font-family: montserrat;
  color: rgba(var(--c-white),0.5);
}
.pub-title{
  font-family: montserrat;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.more {
  display: none;
}

.read-more-btn {
  background-color: transparent;
  padding: 8px 12px;  /* adds tap area */
  margin: -8px -0px;
  border: none;
  color: white;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 500;
  padding: 0;
  font-size:0.8rem;
  margin-top: 8px;
}
.read-less-btn {
  background-color: transparent;
  padding: 8px 12px;  /* adds tap area */
  margin: -8px -0px;
  border: none;
  color: white;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 500;
  padding: 0;
  font-size:0.8rem;
  margin-top: 8px;
  display: none;
}


.pub-links a{
  color: white;
  text-align: none;
  font-size: 0.9rem;
  font-family: montserrat;
  padding-right: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.material-symbols-outlined {
   /* match the text size */
  line-height: 1;   /* prevent weird vertical padding */
  vertical-align: middle; /* helps in non-flex layouts */
  padding-left: 5px;
  color: rgba(var(--c-white),0.5);
}
.material-symbols-outlined svg{
  width: 17px;
  height: 17px;
  margin-bottom: 4px;
}
.researchDescription{
  font-family: montserrat;
  color: rgba(var(--c-white),0.5);
}
.courseDescription{
  font-family: montserrat;
  color: rgba(var(--c-white),0.5);
  font-size: 0.8rem;
  margin-top: 0;
}
.mobileEducationTitle{
  display: none;
}
/* @media(hover: hover) and (pointer: fine){
  
} */

@media(max-width: 1200px){

  .pub-card:hover {
    transform: none;
    z-index: auto;
    border: none;       /* or match your default .pub-card border */
    box-shadow: none;
    
  }
  .pub-card{
    margin-bottom: 1rem;
  }
  .pub-card:first-of-type{
    background: var(--navy-card);
  }
  .pub-grid{
    display: block;

  }
 
}

@media(max-width: 1200px){
  
  .mobileEducationTitle{
  display: block;
}
  .publicationsTitle{
    display: none;
  }


}


#mentorship{
  background: var(--surface);
  padding-bottom: 3rem;
  
  
}
#mentorship h1{
  margin-top: 2.5rem;
  font-family: montserrat;
  font-weight: 700;
  color: white;
  font-size: 2.5rem;
  padding-left: 1.5rem;
  margin-bottom: 20px;
}
.mentorshipDescription{
  font-family: barlow condensed;
  color: rgba(var(--c-white),0.5);
  padding-left: 1.5rem;
}
.flexContainerMentorship{
  
}

.courses{
  flex: 1.2;
}
.courseCard{
  background: rgba(var(--c-panel), 0.5);
  border: 1px solid rgba(var(--c-white), 0.05);
  padding: 1.5rem;
  margin: 0.75rem;
  transition: transform 0.3s ease, z-index 0.3s ease, box-shadow 0.4s ease, border 0.4s ease;
}
.courseCard:hover {
  transform: scale(1.005);
  z-index: 10;
  border: 1px solid var(--navy-line);
  box-shadow: 0 12px 30px rgba(var(--c-black), 0.3);
}
.courseCard small{
  float: right;
  color: white;
  font-family: barlow condensed;
  font-weight: 500;
  font-size: 0.8rem;
}
.courseCard h3{
  font-family: montserrat;
  color: white;
  font-size: 1.2rem;
  margin-bottom: 0;
  font-weight: 500;
}
.courseCard p{
  font-family: montserrat;
  color: rgba(var(--c-white),0.5);
  font-size: 0.9rem;
  
}
.courseCard .tag{
  color: white;
  font-family: barlow condensed;
  font-weight: 400;
  font-size: 0.8rem;
  margin-right: 20px;
  padding-top: 1rem;
  background: rgba(var(--c-white),0.2);
  padding: 1px 3px;
  border-radius: 5px;
}
.students{
  flex: 0.8;
}

.featured-student-card{
  background: rgba(var(--c-panel), 0.5);
  padding: 1.5rem;
  margin: 0.75rem;
  border: 1px solid rgba(var(--c-white), 0.05);
  transition: transform 0.3s ease, z-index 0.3s ease, box-shadow 0.4s ease, border 0.4s ease;
}
.featured-student-card:hover {
  transform: scale(1.005);
  z-index: 10;
  border: 1px solid var(--navy-line);
  box-shadow: 0 12px 30px rgba(var(--c-black), 0.3);
}
.featured-student-card h3{
   font-family: montserrat;
  color: white;
  font-size: 1.5rem;
  margin-bottom: 0;
  font-weight: 600;
  margin-top: 5px;
}
.featured-student-card small{
  display: block;
  
  color: white;
  font-family: barlow condensed;
  font-weight: 500;
  
  text-align: right;
  margin-bottom: 0px;
  
}
.featured-student-card p{ 
  color: rgba(var(--c-white),0.5);
  font-family: montserrat;
  font-size: 0.8rem;

}
.student-status{
  background-color: rgba(var(--c-white),0.2);
  border-radius: 4px;
  display: inline-block;
  padding: 2px;
}
.student-contribution{
  color: rgba(var(--c-white),0.5);
  font-family: montserrat;
  font-size: 0.8rem;
  font-size: 0.9rem !important;
  margin-bottom: 0.1rem;
}

@media(max-width: 1200px){
  
#mentorship{
  display: none;
}

}

/* ============================================================
   Contact — closing "bookend" section that mirrors the hero
   (portrait + label/value rail, hairline top, AK watermark).
   Desktop only; the mobile footer carries contact on small screens.
   ============================================================ */
.contact-section {
  position: relative;
  overflow: hidden;
  background-color: var(--navy);
  border-top: 1px solid rgba(var(--c-white),.12);
  display: flex;
  justify-content: center;
  font-family: montserrat;
}
.contact-wrap {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  width: 100%;
  padding: clamp(2.25rem, 3vw, 3rem) clamp(40px, 5.5vw, 88px);
}
.contact-grid { display: flex; gap: 0; align-items: flex-start; }

.contact-main { flex: 1; min-width: 0; }
.contact-kicker {
  display: flex; align-items: center; gap: 12px;
  text-transform: uppercase; letter-spacing: .22em;
  font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: 26px;
}
.contact-kicker::before { content: ""; width: 24px; height: 1px; background: var(--gold); }

.contact-headrow { display: flex; align-items: center; gap: clamp(20px, 2vw, 34px); margin: 0 0 1.4rem; }
.contact-headrow h2 {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1; letter-spacing: -.02em;
  margin: 0; white-space: nowrap; color: var(--text); font-weight: 700;
}
.contact-rule { flex: 1; height: 1px; background: rgba(var(--c-white),.12); }

.contact-lead {
  font-size: .92rem; color: rgba(var(--c-white),.42);
  max-width: 34ch; line-height: 1.65; margin: 0 0 2rem;
}
.contact-availability { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }
.contact-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(var(--c-green),.15); }

.contact-rail {
  flex: 0 0 auto; width: clamp(200px, 22vw, 275px);
  border-left: 1px solid rgba(var(--c-white),.12);
  padding-left: clamp(32px, 3.2vw, 56px);
  display: flex; flex-direction: column; gap: 22px;
}
.contact-avatar {
  height: 52px; width: 52px; border-radius: 50%; object-fit: cover;
  filter: grayscale(1); border: 1px solid rgba(var(--c-white),.14); opacity: .9;
}
.contact-label { text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.contact-val { font-size: .92rem; font-weight: 500; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
a.contact-val { transition: color .25s, gap .25s; }
a.contact-val:hover { color: var(--gold); gap: 11px; }
a.contact-val svg { transition: transform .25s; opacity: .7; }
a.contact-val:hover svg { transform: translateX(2px); opacity: 1; }
.contact-email {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 3px; transition: background-size .35s ease, color .25s;
}
.contact-email:hover { background-size: 100% 1.5px; color: var(--text); gap: 8px; }

@media(max-width: 1200px){
  .contact-section{
    display: none;
  }
}





/*footer*/

footer{
  background-color: var(--surface);
  width: 100vw;
  padding-top: 2rem;
}
.footerFlexContainer{
  display: flex;
  flex-wrap: wrap;
justify-content: space-between;
}
.left-footer-column{
  
  display: flex;
  
  gap:3.5rem; 
  margin: 1rem 9rem 1rem 4rem;
}
.left-footer-column div h3{
  font-family: montserrat;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  display: block;
  margin: 0 0 12px;
}
.left-footer-column div p{
  color: rgba(var(--c-white),0.7);
  font-family: montserrat;
  
  font-size: 0.8rem;
}
.left-footer-column div a{
  color: rgba(var(--c-white),0.6);
  font-family: montserrat;
  display: block;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.8rem;
  transition: color .25s ease;
}
.left-footer-column div a:hover{
  opacity: 1;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.underlined {
  text-decoration: underline;
}
/* email: hover-underline to match the other footer links */
.left-footer-column .underlined{ text-decoration: none; }
.left-footer-column #emailText:hover{ opacity: 1; }
.left-footer-column #emailText:hover .underlined{ text-decoration: underline; text-underline-offset: 2px; color: var(--text); }
.changeColorOnHover{
  transition: opacity 0.2s ease;
}
.changeColorOnHover:hover{
  opacity: 0.5;
}
#copiedMsg {
  color: var(--gold); /* your highlight yellow */
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: none; /* ensure no underline */
}
.creditsAndCopyright{
  margin-left: 3vw;
  margin-right: 3vw;
}
.creditsAndCopyright hr{
  border: none;
  height: 1px;
  background: rgba(var(--c-white),.1);
  margin: 0;
}
.creditsAndCopyrightFlex{
  display: flex; justify-content: space-between; align-items: flex-start;
}
.creditsAndCopyright p{
  color: var(--muted);
  font-family: montserrat;
  font-size: 0.78rem;
  line-height: 1.5;
  padding-top: 14px;
  white-space: pre;
}
.creditsAndCopyright p strong{
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--light);
}
.siteCredit{
  color: var(--muted);
}
.mobileFooter{
  display: none;
  background-color: var(--surface);
}
.mobileFooter div{
  padding-top: 0.3rem;
  margin-left: 2rem;
  margin-bottom: 10px;
}
.mobileFooter h3{
  color: white;
  font-family: sora;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 0.8rem;
  
  text-transform: uppercase;
}
.mobileFooter div p{
  color: rgba(var(--c-white),0.7);
  font-family: montserrat;
  
  font-size: 0.8rem;
}
.mobileFooter div a{
  color: rgba(var(--c-white),0.7);
  font-family: montserrat;
  display: block;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.8rem;
  padding-bottom: 6px;
}



#copyright{
  color: white; 
  font-family: montserrat;
  font-weight: bold;
  font-size: 1rem;
}
#credits{
  color: white; 
  font-family: montserrat;
  font-weight: bold;
  font-size: 1rem;
  
}
@media(max-width: 1200px){
  footer{
    width: 100%;
    display: none;
  }
  .mobileFooter{
    display: block;
  }
  
}
.SeamlessBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px; /* how tall the fade is */
  background: linear-gradient(to bottom, rgba(var(--c-ink), 0), var(--navy));
  pointer-events: none; /* don't block clicks */
  z-index: 1000;
  transition: opacity 0.3s ease;
}
.SeamlessBottom.hidden {
  opacity: 0;
}
#bottom-sentinel{
  /* tiny, harmless element at the end of the document */
  width: 1px;
  height: 1px;
}

/* ============================================================
   Desktop typographic hero — applies ONLY above 1200px.
   The mobile/stacked hero (<=1200px) is intentionally untouched.
   New hero elements default to display:none so they never
   appear in the mobile layout.
   ============================================================ */
.heroKicker,
.heroRail,
.heroWatermark{
  display: none;
}

@media (min-width: 1201px){
  .heroSection{
    position: relative;
    overflow: hidden;                 /* clip watermark to rounded corners */
    /* grow the card with the viewport on wide screens (floor keeps normal
       desktop identical; upper bound stops it on super-ultra-wide) */
    max-width: min(2400px, max(1500px, 86vw));
    margin: 3.7rem auto;              /* cap width + center on large screens */
    align-items: center;
    justify-content: flex-start;      /* keep text + rail grouped together */
    gap: clamp(40px, 4vw, 150px);
    padding: 0 clamp(48px, 6vw, 120px);
    background: radial-gradient(1000px 720px at 82% 60%, rgba(var(--c-hero-glow),.09), transparent 62%),
                linear-gradient(120deg, var(--hero-a) 0%, var(--hero-b) 60%, var(--hero-c) 100%);
  }

  /* ---- left main type block ---- */
  .heroText{
    width: auto;
    /* left block widens on wider screens (floor = current 46ch at ~1440) */
    max-width: max(46ch, 26vw);
    flex: 0 1 auto;                    /* size to content so the rail sits close */
    height: auto;
    margin-left: 0;
    position: relative;
    z-index: 2;
  }
  .heroText hr{ display: none; }
  .heroText h2{ display: none; }        /* role now lives in the rail */

  .heroKicker{
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: montserrat;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: clamp(.72rem, .6vw, .95rem);
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 30px;
  }
  .heroKicker::before{
    content: "";
    width: 24px;
    height: 1px;
    background: var(--gold);
    display: inline-block;
  }

  #desktopHeading{
    font-family: montserrat;
    font-size: clamp(3rem, 4vw, 7.5rem);
    line-height: 1.02;
    letter-spacing: -.015em;
    color: var(--text);
    margin-bottom: 26px;
  }
  .heroText p{
    font-size: clamp(0.95rem, 1.25vw, 1.55rem);
    line-height: 1.55;
    font-weight: 400;
    color: rgba(var(--c-white),.5);
    max-width: 30ch;
    margin: 0 0 36px 0;
  }
  .heroButtons a{ color: var(--gold); }

  /* ---- right info rail ---- */
  .heroHeadshot{ display: none; }        /* big portrait removed on desktop */

  .heroRail{
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 2vw, 46px);
    flex: 0 0 auto;
    /* right rail widens on wider screens (floor ~= current 300px at ~1440);
       higher vw term gives laptops noticeably more room, still capped on ultra-wide */
    width: clamp(240px, 25vw, 480px);
    border-left: 1px solid rgba(var(--c-white),.12);
    padding-left: clamp(28px, 2.6vw, 64px);
    position: relative;
    z-index: 2;
  }
  .railAvatar{
    height: clamp(64px, 3.6vw, 92px);
    width: clamp(64px, 3.6vw, 92px);
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1);
    border: 1px solid rgba(var(--c-white),.14);
    opacity: .9;
  }
  .railItem .railLabel{
    font-family: montserrat;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: clamp(.66rem, .55vw, .9rem);
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .railItem .railValue{
    font-family: montserrat;
    font-size: clamp(.98rem, .82vw, 1.32rem);
    font-weight: 500;
    color: var(--text-rail);
    line-height: 1.45;
  }
  .railTags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .railTags span{
    font-family: montserrat;
    font-size: clamp(.8rem, .68vw, 1.05rem);
    color: var(--light);
    border: 1px solid rgba(var(--c-white),.12);
    padding: 5px 11px;
    border-radius: 999px;
  }

  /* ---- faint typographic watermark ---- */
  .heroWatermark{
    display: block;
    position: absolute;
    right: -2vw;
    bottom: -12vh;
    z-index: 0;
    font-family: montserrat;
    font-weight: 700;
    font-size: 34vw;
    line-height: .8;
    letter-spacing: -.04em;
    color: rgba(var(--c-white),.022);
    pointer-events: none;
    user-select: none;
  }
}

/* ============================================================
   Mentorship — Teaching History & Notable Students (desktop only;
   #mentorship is display:none below 1200px, so these are safe).
   Refreshed to match the typographic hero: two columns, bordered
   pill tags, accent chips, subtle card lift.
   ============================================================ */
.flexContainerMentorship{
  display: flex;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: flex-start;
  padding: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 6vw, 5.75rem) 2.5rem;
}
.courses-col{ flex: 1.35; min-width: 0; }
.students-col{ flex: 1; min-width: 0; }

.mentorColTitle{
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: montserrat;
  font-weight: 700;
  color: var(--white);
  font-size: 1.7rem;
  margin: .5rem 0 1.3rem .75rem;
}
.mentorColTitle::before{
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  display: inline-block;
}

/* ---- course cards ---- */
.courseCard{
  background: rgba(var(--c-white),0.025);
  border: 1px solid rgba(var(--c-white),0.07);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  margin: 0 0.75rem 1rem;
  position: relative;
  transition: transform .3s ease, border-color .3s ease, box-shadow .4s ease;
}
.courseCard:hover{
  transform: translateY(-3px);
  border-color: rgba(var(--c-gold),.35);
  box-shadow: 0 14px 34px rgba(var(--c-black),.35);
}
.courseCard .fullCardMeta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .7rem;
}
.courseCard .icon-meta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--c-gold),.12);
  color: var(--gold);
  margin-top: 0 !important;
}
.courseCard small{
  float: none;
  color: rgba(var(--c-white),.55);
  font-family: 'barlow condensed', sans-serif;
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .02em;
}
.courseCard h3{
  font-family: montserrat;
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 600;
  margin: .1rem 0 .45rem;
}
.courseCard p{
  font-family: montserrat;
  color: rgba(var(--c-white),.55);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}
.courseCard .metadata{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.courseCard .tag{
  color: var(--light);
  font-family: montserrat;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .02em;
  background: transparent;
  border: 1px solid rgba(var(--c-white),.14);
  padding: 4px 11px;
  border-radius: 999px;
  margin: 0;
}

/* ---- student cards ---- */
.featured-student-card{
  background: rgba(var(--c-white),0.025);
  border: 1px solid rgba(var(--c-white),0.07);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  margin: 0 0.75rem 1rem;
  transition: transform .3s ease, border-color .3s ease, box-shadow .4s ease;
}
.featured-student-card:hover{
  transform: translateY(-3px);
  border-color: rgba(var(--c-gold),.35);
  box-shadow: 0 14px 34px rgba(var(--c-black),.35);
}
.featured-student-card .student-role{
  display: block;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: montserrat;
  font-weight: 600;
  font-size: .66rem;
  color: var(--gold);
  margin-bottom: .35rem;
}
.featured-student-card .student-name{
  font-family: montserrat;
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  margin: .1rem 0 .6rem;
}
.featured-student-card .student-contribution{
  color: rgba(var(--c-white),.6);
  font-family: montserrat;
  font-size: .88rem !important;
  line-height: 1.55;
  margin-bottom: .7rem;
}
.featured-student-card .student-contribution strong{
  color: var(--text-strong);
  font-weight: 600;
}
.featured-student-card .student-status{
  background: rgba(var(--c-gold),.12);
  color: var(--gold);
  border-radius: 999px;
  display: inline-block;
  padding: 5px 12px;
  font-size: .78rem;
  font-family: montserrat;
}

/* ---- Teaching History timeline ---- */
.timeline{ position: relative; padding-left: 30px; }
.timeline::before{
  content: "";
  position: absolute;
  left: 5px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(rgba(var(--c-white),.16), rgba(var(--c-white),.04));
}
.tl-item{ position: relative; padding-bottom: 32px; }
.tl-item:last-child{ padding-bottom: 0; }
.tl-item::before{
  content: "";
  position: absolute;
  left: -29.5px; top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(var(--c-gold),.35);
  z-index: 2;
}
.tl-head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.tl-year{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  color: var(--light);
  font-size: 1.3rem;
  line-height: 1;
}
.tl-format{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: rgba(var(--c-white),.55);
}
.tl-content h3{
  font-family: montserrat;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 .4rem;
}
.tl-content p{
  font-family: montserrat;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(var(--c-white),.55);
  margin: 0 0 .8rem;
  max-width: 44ch;
}
.tl-tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.tl-tags span{
  font-family: montserrat;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--light);
  border: 1px solid rgba(var(--c-white),.12);
  padding: 4px 11px;
  border-radius: 999px;
}
.tl-content{ transition: transform .25s ease; }
.tl-item:hover .tl-content{ transform: translateX(3px); }

/* Education timeline entries that link out to the institution */
.tl-link{
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.tl-link h3,
.tl-link .tl-format{ transition: color .25s ease; }
.tl-link:hover h3{ color: var(--gold); }
.tl-link:hover .tl-format{ color: rgba(var(--c-gold), .85); }

/* ---- Notable Students compact list ---- */
.student-list{ border-top: 1px solid rgba(var(--c-white),.12); }
.sl-item{
  display: flex;
  gap: 16px;
  padding: 18px 6px;
  border-bottom: 1px solid rgba(var(--c-white),.12);
  border-radius: 8px;
  transition: background .25s ease, padding-left .25s ease;
}
.sl-item:hover{ background: rgba(var(--c-white),.03); padding-left: 12px; }
.sl-avatar{
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: rgba(var(--c-white),.05);
  color: var(--light);
  border: 1px solid rgba(var(--c-white),.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: montserrat;
  font-weight: 600;
  font-size: .95rem;
}
.sl-role{
  font-family: montserrat;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .62rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 3px;
}
.sl-name{
  font-family: montserrat;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 5px;
}
.sl-contribution{
  font-family: montserrat;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(var(--c-white),.55);
}
.sl-status{
  display: inline-block;
  margin-top: 7px;
  font-family: montserrat;
  font-size: .74rem;
  color: var(--muted-2);
}

/* ============================================================
   About — unified accent-tick headings, Education as a mini
   timeline (reusing .timeline / .tl-*), and a polished accordion.
   Desktop only (#about is display:none below 1200px).
   ============================================================ */
.about-kicker{
  display: flex; align-items: center; gap: 12px;
  font-family: montserrat;
  text-transform: uppercase; letter-spacing: .22em;
  font-size: .72rem; font-weight: 600; color: var(--muted);
  margin: 0 0 18px 10px;
}
.about-kicker::before { content: ""; width: 24px; height: 1px; background: var(--gold); display: inline-block; }

.aboutSection .about-title{
  font-family: montserrat; font-weight: 600;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  color: var(--text); letter-spacing: -.01em;
  margin: 0 0 1.1rem 10px; padding-bottom: 0;
}

/* Education timeline: the degree title with a muted field */
#eduTimeline { margin-left: 10px; }
#eduTimeline .tl-content h3 { font-size: 1.05rem; }
.edu-field { color: var(--muted); font-weight: 500; }

/* Research accordion — polished + slick open animation */
.right-column hr{
  height: 1px; border: none; margin: 0;
  background: rgba(var(--c-white),.12);
}
.researchDropdownToggle{
  height: auto; margin: 0; padding: 26px 8px;
  align-items: center;
  border-radius: 8px;
  transition: padding-left .3s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.researchDropdownToggle:hover{ padding-left: 14px; background: rgba(var(--c-white),.03); }
.right-column .pill-text{
  font-size: 1.05rem; font-weight: 500; color: var(--muted);
  transition: color .3s ease;
}
.researchDropdownToggle:hover .pill-text,
.researchDropdownToggle:has(.plusSign.rotate) .pill-text{ color: var(--text); }

/* the +  ->  x, with a springy overshoot spin */
.plusSign{ color: var(--gold); flex: none; transition: transform .5s cubic-bezier(.34,1.56,.64,1), color .25s ease; }
.plusSign.rotate{ transform: rotate(135deg); }

/* content: springy height, slide + un-blur, and a gold accent line that draws down */
.researchDropdownContent{
  position: relative;
  margin: 0 0 0 8px;
  padding: 0 6px 0 16px;
  max-height: 0; overflow: hidden; opacity: 0;
  transform: translateY(-6px);
  filter: blur(3px);
  transition:
    max-height .55s cubic-bezier(.16,1,.3,1),
    opacity .4s ease,
    transform .55s cubic-bezier(.16,1,.3,1),
    filter .4s ease,
    padding .55s cubic-bezier(.16,1,.3,1);
}
.researchDropdownContent::before{
  content: ""; position: absolute; left: 0; top: 2px; bottom: 12px; width: 2px;
  background: var(--gold); border-radius: 2px;
  transform: scaleY(0); transform-origin: top;
  transition: transform .55s cubic-bezier(.16,1,.3,1) .08s;
}
.researchDropdownContent.show{
  max-height: 460px; opacity: 1; transform: none; filter: none;
  padding: 4px 6px 20px 16px; max-width: 52ch;
}
.researchDropdownContent.show::before{ transform: scaleY(1); }

/* Inline links inside research descriptions (desktop + mobile) */
.researchDropdownContent a,
.m-rrow-d p a{
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--c-gold), .4);
  transition: color .2s ease, border-color .2s ease;
}
.researchDropdownContent a:hover,
.m-rrow-d p a:hover{
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}


/* Hamburger + mobile menu are mobile-only; hidden on desktop. */
.menuToggle{ display: none; }
.mobileMenu{ display: none; }

/* ============================================================
   MOBILE REFINEMENT (<=1200px only) — hamburger menu + refined,
   less-monotonic minimalist cards. Desktop is untouched.
   ============================================================ */
@media(max-width: 1200px){
  /* the scroll-spy OVERVIEW label is replaced by the hamburger */
  .tableOfContents{ display: none !important; }

  /* Pin the fixed navbar to the full viewport so the hamburger can't be
     pushed off the right edge as the window narrows. */
  header{ padding: 0; }
  .navbar{
    left: 0; right: 0;
    width: 100% !important; max-width: 100%;
    margin: 0; padding: 0 18px;
    box-sizing: border-box;
  }
  /* clear an old negative margin that pulled the logo into the left wall */
  .navLogo{ margin-left: 0; }

  /* ---- hamburger + fullscreen menu ---- */
  .menuToggle{
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: none; background: none; cursor: pointer;
    z-index: 10001; margin-left: auto; margin-right: 2px; flex: none; padding: 0;
  }
  .hamburger{ width: 28px; height: 24px; overflow: visible; }
  .hamburger line{
    stroke: var(--text); stroke-width: 2.4; stroke-linecap: round;
    transform-box: fill-box; transform-origin: center;
    transition: transform .4s cubic-bezier(.6,.05,.2,1), opacity .3s ease, stroke .3s ease;
  }
  .hamburger .h-mid{ stroke: var(--gold); }         /* gold accent bar */
  body.menu-open .hamburger .h-top{ transform: translateY(7px) rotate(45deg); }
  body.menu-open .hamburger .h-mid{ opacity: 0; transform: scaleX(0); }
  body.menu-open .hamburger .h-bot{ transform: translateY(-7px) rotate(-45deg); }

  .mobileMenu{
    position: fixed; inset: 0; z-index: 10000; background:var(--navy-menu);
    display: flex; flex-direction: column; justify-content: center; padding: 30px 26px;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1), visibility .35s;
  }
  body.menu-open .mobileMenu{ opacity:1; visibility:visible; transform:none; }
  .mobileMenu a{
    display:flex; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px solid rgba(var(--c-white),.09);
    font-family:montserrat; font-size:2rem; font-weight:700; letter-spacing:-.01em; color:var(--text);
    opacity:0; transform:translateY(14px);
    transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), color .25s;
  }
  .mobileMenu a .num{ font-family:'Barlow Condensed',sans-serif; font-size:.9rem; color:var(--gold); font-weight:600; }
  body.menu-open .mobileMenu a{ opacity:1; transform:none; }
  body.menu-open .mobileMenu a:nth-child(1){ transition-delay:.10s; }
  body.menu-open .mobileMenu a:nth-child(2){ transition-delay:.16s; }
  body.menu-open .mobileMenu a:nth-child(3){ transition-delay:.22s; }
  body.menu-open .mobileMenu a:nth-child(4){ transition-delay:.28s; }
  body.menu-open .mobileMenu a:nth-child(5){ transition-delay:.34s; }
  .mobileMenu .mm-foot{ margin-top:32px; display:flex; flex-direction:column; gap:6px; color:var(--muted-2); font-size:.85rem; font-family:montserrat; }
  .mobileMenu .mm-foot a{ all:unset; color:var(--gold); font-size:.85rem; cursor:pointer; }

  /* ---- Education: hairline list ---- */
  .m-edu{ border-top:1px solid rgba(var(--c-white),.09); }
  .m-edu-row{ display:flex; gap:16px; padding:16px 2px; border-bottom:1px solid rgba(var(--c-white),.09); }
  .m-edu-yr{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1.35rem; color:var(--gold); min-width:40px; line-height:1; padding-top:2px; }
  .m-edu-deg{ font-family:montserrat; font-size:1rem; font-weight:600; color:var(--text); }
  .m-edu-deg span{ color:var(--muted-2); font-weight:500; }
  .m-edu-inst{ font-family:montserrat; font-size:.8rem; color:var(--muted-2); margin-top:3px; }

  /* ---- Research: quiet expandable rows ---- */
  .m-rrow{ border-top:1px solid rgba(var(--c-white),.09); }
  .m-rrow:last-child{ border-bottom:1px solid rgba(var(--c-white),.09); }
  .m-rrow-h{ width:100%; background:none; border:none; color:inherit; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 2px; text-align:left; cursor:pointer; font-family:montserrat; }
  .m-rrow-h span{ font-size:.98rem; font-weight:600; color:var(--light-2); }
  .m-plus{ color:var(--gold); flex:none; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
  .m-rrow.open .m-plus{ transform:rotate(135deg); }
  .m-rrow-d{ max-height:0; overflow:hidden; opacity:0; padding:0 2px; transition:max-height .5s cubic-bezier(.16,1,.3,1), opacity .35s ease, padding .5s; }
  .m-rrow.open .m-rrow-d{ max-height:520px; opacity:1; padding:0 2px 16px; }
  .m-rrow-d p{ font-family:montserrat; font-size:.85rem; line-height:1.55; color:var(--muted-2); }

  /* ---- Courses: compact tag cards ---- */
  .m-course{ background:rgba(var(--c-white),.022); border:1px solid rgba(var(--c-white),.09); border-radius:14px; padding:16px 18px; margin-bottom:12px; }
  .m-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
  .m-tags span{ font-family:montserrat; font-size:.66rem; color:var(--light-2); border:1px solid rgba(var(--c-white),.09); padding:3px 9px; border-radius:999px; }
  .m-course h3{ font-family:montserrat; font-size:1rem; font-weight:600; color:var(--text); margin-bottom:6px; }
  .m-course p{ font-family:montserrat; font-size:.82rem; line-height:1.5; color:var(--muted-2); }

  /* ---- Students: avatar rows ---- */
  .m-srow{ display:flex; gap:14px; padding:16px 2px; border-top:1px solid rgba(var(--c-white),.09); }
  .m-srow:first-child{ border-top:none; }
  .m-av{ width:42px; height:42px; flex:none; border-radius:50%; background:rgba(var(--c-white),.05); border:1px solid rgba(var(--c-white),.09); color:var(--light-2); display:flex; align-items:center; justify-content:center; font-family:montserrat; font-weight:600; font-size:.82rem; }
  .m-srole{ font-family:montserrat; text-transform:uppercase; letter-spacing:.1em; font-size:.58rem; font-weight:600; color:var(--muted-2); margin-bottom:3px; }
  .m-sname{ font-family:montserrat; font-size:1rem; font-weight:600; color:var(--text); margin-bottom:4px; }
  .m-scon{ font-family:montserrat; font-size:.82rem; line-height:1.5; color:var(--muted-2); }
  .m-sstatus{ font-family:montserrat; display:inline-block; margin-top:6px; font-size:.72rem; color:rgba(var(--c-gold),.85); }

  /* ---- Projects: refined minimalist cards (shared grid, mobile only) ---- */
  #project-cards .pub-card{ background:rgba(var(--c-white),.028); border:1px solid rgba(var(--c-white),.09); border-radius:14px; padding:18px; margin-bottom:12px; }
  #project-cards .pub-meta{ flex-direction:row; align-items:center; gap:10px; margin-bottom:11px; }
  #project-cards .venue{ font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:var(--gold); border:1px solid rgba(var(--c-gold),.32); padding:2px 8px; border-radius:5px; }
  #project-cards .location, #project-cards .date{ font-size:.75rem; color:var(--muted-2); }
  #project-cards .pub-title{ font-size:.9rem; margin-bottom:12px; }
}






/* ============================================================
   Hero intro — staggered load-in on first paint (desktop only).
   Gated on .js-reveal (added before paint) so there's no flash,
   and skipped entirely for reduced-motion. Mobile hero untouched.
   ============================================================ */
@media (min-width: 1201px) and (prefers-reduced-motion: no-preference){
  @keyframes heroIn{
    from{ opacity: 0; transform: translateY(22px); }
    to{ opacity: 1; transform: none; }
  }
  .js-reveal .heroKicker,
  .js-reveal #desktopHeading,
  .js-reveal .heroText p,
  .js-reveal .heroButtons,
  .js-reveal .heroRail{ opacity: 0; }

  .js-reveal .heroKicker{ animation: heroIn .7s cubic-bezier(.16,1,.3,1) .05s both; }
  .js-reveal #desktopHeading{ animation: heroIn .8s cubic-bezier(.16,1,.3,1) .16s both; }
  .js-reveal .heroText p{ animation: heroIn .7s cubic-bezier(.16,1,.3,1) .34s both; }
  .js-reveal .heroButtons{ animation: heroIn .7s cubic-bezier(.16,1,.3,1) .46s both; }
  /* rail slides in as a unit, then its children cascade */
  .js-reveal .heroRail{ animation: heroIn .8s cubic-bezier(.16,1,.3,1) .54s both; }
  .js-reveal .heroRail > *{ opacity: 0; animation: heroIn .6s cubic-bezier(.16,1,.3,1) both; }
  .js-reveal .heroRail > *:nth-child(1){ animation-delay: .62s; }
  .js-reveal .heroRail > *:nth-child(2){ animation-delay: .70s; }
  .js-reveal .heroRail > *:nth-child(3){ animation-delay: .78s; }
  .js-reveal .heroRail > *:nth-child(4){ animation-delay: .86s; }
  .js-reveal .heroRail > *:nth-child(5){ animation-delay: .94s; }
}

/* ============================================================
   Copy-email affordance — "✔ Copied!" slides in from zero width
   (no reserved gap) and the address flashes gold. Both footers.
   ============================================================ */
.email-copy .copiedMsg{
  display: inline-block;
  vertical-align: bottom;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--gold);
  font-weight: 600;
  transition: max-width .38s cubic-bezier(.16,1,.3,1),
              opacity .25s ease,
              margin-left .38s cubic-bezier(.16,1,.3,1);
}
.email-copy.copied .copiedMsg{ max-width: 140px; margin-left: 8px; opacity: 1; }
.email-copy .underlined{ transition: color .25s ease; }
.email-copy.copied .underlined{ color: var(--gold); }


/* ============================================================
   Contact "bookend" reveal (desktop only) — a small choreography:
   1) the left column fades up,
   2) the hairline draws left -> right toward the rail,
   3) on reaching it, the right rail animates in.
   Driven by .visible (added to .contact-section by the scroll observer
   via its `fade-contact` class). Gated on .js-reveal + reduced-motion.
   ============================================================ */
@media (min-width: 1201px) and (prefers-reduced-motion: no-preference){
  /* 1) left column — starts down + hidden */
  .js-reveal .contact-section .contact-kicker,
  .js-reveal .contact-section .contact-headrow h2,
  .js-reveal .contact-section .contact-lead,
  .js-reveal .contact-section .contact-availability{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .54s cubic-bezier(.16,1,.3,1),
                transform .54s cubic-bezier(.16,1,.3,1);
  }
  .js-reveal .contact-section .contact-headrow h2{ transition-delay: .06s; }
  .js-reveal .contact-section .contact-lead{ transition-delay: .12s; }
  .js-reveal .contact-section .contact-availability{ transition-delay: .17s; }

  /* 2) hairline — draws out to the right (gold while growing), then once it
        reaches the rail its color cools to the neutral hairline. */
  .js-reveal .contact-section .contact-rule{
    transform: scaleX(0);
    transform-origin: left center;
    background-color: var(--gold);
    transition: transform .38s cubic-bezier(.16,1,.3,1) .32s,
                background-color .55s ease .70s;
  }

  /* 3) right rail — animates in once the hairline reaches it */
  .js-reveal .contact-section .contact-rail{
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .48s ease .70s,
                transform .56s cubic-bezier(.16,1,.3,1) .70s;
  }

  /* revealed states */
  .js-reveal .contact-section.visible .contact-kicker,
  .js-reveal .contact-section.visible .contact-headrow h2,
  .js-reveal .contact-section.visible .contact-lead,
  .js-reveal .contact-section.visible .contact-availability{
    opacity: 1;
    transform: none;
  }
  .js-reveal .contact-section.visible .contact-rule{ transform: scaleX(1); background-color: rgba(var(--c-white),.12); }
  .js-reveal .contact-section.visible .contact-rail{ opacity: 1; transform: none; }
}


/* ============================================================
   Accessibility — skip link + visible keyboard focus ring.
   (Mouse users are unaffected: :focus-visible only shows for
   keyboard/AT focus, not clicks.)
   ============================================================ */
.skip-link{
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  background: var(--gold);
  color: var(--navy-card);
  padding: 10px 16px;
  border-radius: 6px;
  font-family: montserrat, sans-serif;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus{ transform: none; outline: none; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
/* the main landmark is only focusable as a skip-link target — no ring */
#main:focus,
#main:focus-visible{ outline: none; }


/* ============================================================
   Dual appointment in the hero rail (two lines, 2nd muted).
   ============================================================ */
.railAppt{ display: block; }
.railAppt-sec{ margin-top: 7px; color: var(--muted); font-size: .9rem; }

/* Student Supervision intro blurb (desktop column + mobile section). */
/* Supervision blurb: a quiet, recessive intro line — smaller and dimmer
   than the student cards so it introduces them without competing. */
.mentorColLead{
  font-family: montserrat, sans-serif;
  color: rgba(var(--c-white),.38);
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 44ch;
  margin: -0.1rem 0 1.5rem .75rem;
}
.m-supervision-lead{
  font-family: montserrat, sans-serif;
  color: rgba(var(--c-white),.38);
  font-size: .74rem;
  line-height: 1.55;
  max-width: 46ch;
  margin: .3rem 2rem 1.1rem;
}


/* Courses (desktop) reuse the .timeline / .tl-* styles, but the render
   omits the date head so each item leads with the course title. Nudge the
   dot to sit against the title's first line (no year row above it now). */
#courseList.timeline .tl-item::before{ top: 7px; }


/* ============================================================
   Student Supervision — "spotlight wheel" scroll (desktop).
   Fixed-height snap-scroller with masked (faded) top/bottom edges;
   the student nearest the vertical center is emphasized (brighter +
   scaled up, gold avatar) via a per-item --spot set by script.js.
   ============================================================ */
.spotlight-scroll{
  box-sizing: border-box;           /* desktop defaults to content-box; pin it so padding is inside the height */
  border-top: none;
  height: 392px;                    /* tuned so this column matches the Courses column height */
  overflow-y: auto;
  padding: 0;                       /* infinite loop supplies content above/below — no spacers needed */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--black) 22%, var(--black) 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, var(--black) 22%, var(--black) 78%, transparent 100%);
  scrollbar-width: none;            /* Firefox — hide scrollbar */
}
.spotlight-scroll::-webkit-scrollbar{ width: 0; height: 0; }

.spotlight-scroll .sl-item{
  border-bottom: none;
  opacity: calc(.26 + .74 * var(--spot, 1));
  transform: scale(calc(.9 + .1 * var(--spot, 1)));
  transform-origin: left center;
  will-change: opacity, transform;
  /* NB: no `transition` here on purpose — spotlight opacity/scale are
     JS-driven per frame; the base .sl-item transition (background,
     padding-left) still applies so hover keeps its ease. */
}
.spotlight-scroll .sl-item.is-active .sl-name{ color: var(--white); }
.spotlight-scroll .sl-item.is-active .sl-avatar{
  border-color: rgba(var(--c-gold),.55);
  color: var(--gold);
  background: rgba(var(--c-gold),.08);
}


/* Highlighted scroll cue at the end of the supervision blurb (desktop). */
.scroll-hint{
  display: block;
  margin-top: .7em;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: .01em;
}
.scroll-hint-arrow{
  display: inline-block;
  margin-left: 6px;
  animation: hintBob 1.6s ease-in-out infinite;
}
@keyframes hintBob{
  0%, 100%{ transform: translateY(0); opacity: .65; }
  50%{ transform: translateY(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-hint-arrow{ animation: none; }
}
/* the mobile list is a plain stack — no spotlight scroll, so no cue */
.m-supervision-lead .scroll-hint{ display: none; }


/* Give the footer link lists room to breathe (desktop footer). */
.left-footer-column .js-important-links,
.left-footer-column .js-education-links,
.left-footer-column .js-affiliations{
  display: flex;
  flex-direction: column;
  gap: 7px;
}


/* Contact note (replaces the availability line) — neutral line with a
   tiny, gently pulsing mail icon. */
.contact-note{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  color: var(--muted);
}
.contact-note-dot{
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.contact-note-dot::after{        /* radar-ping pulse */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: dotPulse 2s ease-out infinite;
}
@keyframes dotPulse{
  0%  { transform: scale(1);   opacity: .55; }
  100%{ transform: scale(2.6); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce){
  .contact-note-dot::after{ animation: none; }
}


/* Mobile footer: the rendered links live in a <div>, which was picking up
   the generic `.mobileFooter div { margin-left: 2rem }` indent. Cancel it. */
.mobileFooter .js-important-links,
.mobileFooter .js-education-links{
  margin-left: 0;
  padding-top: 0;
  margin-bottom: 0;
}


/* ============================================================
   Ultra-wide screens (>=1600px): keep section backgrounds full-width
   but cap their CONTENT to ~1500px and center it, so columns don't
   spread edge-to-edge. Hero + Contact are already capped elsewhere.
   ============================================================ */
@media (min-width: 1600px){
  .aboutSection,
  #mentorship,
  #projects{
    padding-inline: max(0px, calc(50% - 750px));
  }
  .footerFlexContainer,
  .creditsAndCopyright{
    max-width: 1500px;
    margin-inline: auto;
  }
}


/* Publication author line (his own name is bolded in render.js). */
.pub-authors{
  font-family: montserrat, sans-serif;
  font-size: .8rem;
  line-height: 1.55;
  color: rgba(var(--c-white), .5);
  margin: .55rem 0 1rem;
}
.pub-authors strong{ font-weight: 600; color: rgba(var(--c-white), .72); }


/* Publications "Show more / Show less" toggle. */
.show-more-btn{
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: .25rem 1.5rem 3rem auto;   /* right-align with the card grid's right edge */
  padding: 11px 24px;
  background: transparent;
  border: 1px solid rgba(var(--c-gold), .45);
  border-radius: 999px;
  color: var(--gold);
  font-family: montserrat, sans-serif;
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .15s ease;
}
.show-more-btn:hover{
  background: rgba(var(--c-gold), .1);
  border-color: var(--gold);
}
.show-more-btn:active{ transform: translateY(1px); }
.show-more-chev{ transition: transform .3s ease; }
.show-more-btn.is-open .show-more-chev{ transform: rotate(180deg); }