.bg-trace{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;
  opacity:var(--trace-opacity);
}

.flag-gradient{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(var(--accent-1-rgb),.18) 0%,rgba(var(--accent-1-rgb),.06) 23%,transparent 40%,transparent 60%,rgba(var(--accent-2-rgb),.06) 77%,rgba(var(--accent-2-rgb),.18) 100%),
    radial-gradient(circle at 50% 18%,rgba(var(--accent-3-rgb),.08),transparent 18%);
  background-size:220% 220%;
  animation:flag-drift 26s var(--ease) infinite alternate;
}

.dot-field{
  position:fixed;inset:0;z-index:-4;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.65),transparent 90%);
  opacity:.4;
}

.petal-bg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-5;pointer-events:none;
  opacity:.5;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 60%,transparent 97%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 60%,transparent 97%);
}
@media (prefers-reduced-motion:reduce){
  .petal-bg{display:none}
}

@keyframes flag-drift{
  0%{background-position:0% 28%,50% 10%}
  50%{background-position:62% 70%,46% 18%}
  100%{background-position:100% 22%,52% 12%}
}

.nav__brand{display:inline-flex;align-items:center;gap:.6em}
.nav__flag{
  width:16px;height:16px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--saffron) 0 30%,#fff 30% 62%,var(--green) 62% 100%);
  border:1px solid rgba(var(--accent-3-rgb),.18);
  box-shadow:0 0 0 4px rgba(var(--accent-1-rgb),.08);
  flex:0 0 auto;
}

.site-header{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:var(--glass);
  border-bottom:1px solid var(--border);
}

.nav{
  max-width:var(--content-w);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-5);
  gap:var(--space-4);
}

.nav__brand{
  font-family:var(--serif);font-size:1.15rem;font-weight:600;letter-spacing:-.01em;
}

.nav__links{display:flex;gap:var(--space-5);flex-wrap:nowrap}
.nav__links a{
  font-size:.86rem;font-weight:600;color:var(--text-2);
  position:relative;padding:.3em 0;
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease);
}
.nav__links a:hover{color:var(--text)}

.nav__toggle{display:none;flex-direction:column;gap:5px;width:24px}
.nav__toggle span{height:2px;width:100%;background:var(--text);border-radius:2px}

@media (max-width:1240px){
  .nav__toggle{display:flex}
  .nav__links{
    position:fixed;top:60px;left:0;right:0;
    flex-direction:column;gap:0;flex-wrap:wrap;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    max-height:0;overflow:hidden;
    transition:max-height var(--dur-med) var(--ease);
  }
  .nav__links.is-open{max-height:calc(100vh - 60px);overflow-y:auto}
  .nav__links li{width:100%}
  .nav__links a{display:block;padding:1em var(--space-5);border-bottom:1px solid var(--border);white-space:normal}
}

.hero{
  max-width:var(--content-w);margin:0 auto;
  padding:calc(var(--space-9) + 1rem) var(--space-5) var(--space-8);
  position:relative;
}
.hero__inner{
  display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:var(--space-8);align-items:center;
  position:relative;z-index:1;
}
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;text-align:center;gap:var(--space-6)}
  .hero__photo-wrap{margin:0 auto}
  .hero__links,.stats-strip{justify-content:center}
  .hero__summary,.hero__quote{margin-left:auto;margin-right:auto}
}
@media (max-width:480px){
  .hero__photo-wrap{width:170px;height:170px}
  .hero__photo{width:170px;height:170px}
  .stats-strip{gap:var(--space-3)}
  .stats-strip__item{min-width:0;flex:1 1 100px;padding:var(--space-3) var(--space-4);text-align:center}
  .stats-strip__item dd{justify-content:center}
}

.hero__photo-wrap{position:relative;width:240px;height:240px}
.hero__halo{
  position:absolute;inset:-26px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-1-rgb),.18),rgba(var(--accent-3-rgb),.04) 55%,transparent 72%);
  filter:blur(10px);
}
.hero__flag-badge{
  position:absolute;right:-10px;bottom:10px;z-index:3;
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);
  box-shadow:var(--shadow-m);
}
.hero__flag-badge svg{width:72px;height:72px;display:block;border-radius:50%}
.hero__ring{
  position:absolute;inset:-16px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--accent-1),rgba(var(--accent-1-rgb),.35),var(--accent-3),rgba(var(--accent-2-rgb),.45),var(--accent-2),rgba(var(--accent-1-rgb),.35),var(--accent-1));
  padding:2px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:spin-slow 24s linear infinite;
}
.hero__photo{
  width:240px;height:240px;border-radius:50%;object-fit:cover;
  box-shadow:var(--shadow-m);position:relative;z-index:1;
  border:6px solid var(--surface);
  background:var(--surface);
}

.hero__tagline{color:var(--text-2);font-size:1.08rem;margin-top:.5em;max-width:62ch}
.hero__summary{
  max-width:60ch;color:var(--text-2);margin-top:var(--space-4);font-size:1rem;
}
.hero__quote{
  margin-top:var(--space-4);
  max-width:58ch;
  color:var(--text);
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.55;
}

.hero__links{
  display:flex;flex-wrap:wrap;gap:.7em;margin:var(--space-5) 0;
}

.stats-strip{display:flex;gap:var(--space-4);flex-wrap:wrap}
.stats-strip__item{
  background:var(--badge-surface);border:1px solid var(--border);
  border-radius:18px;padding:var(--space-3) var(--space-5);
  min-width:118px;box-shadow:var(--shadow-s);
}
.stats-strip__item dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.stats-strip__item dd{font-family:var(--mono);font-size:1.7rem;font-weight:600;color:var(--accent-1);display:flex;align-items:center;gap:.4em}
.stats-strip__item dd::after{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 0 0 rgba(var(--accent-2-rgb),.6);
  animation:pulse-dot 2.4s ease-out infinite;
}

.about__intro{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);
  gap:var(--space-7);align-items:start;margin-top:var(--space-4);
}
@media (max-width:980px){.about__intro{grid-template-columns:1fr}}
.about__intro--single{grid-template-columns:1fr}

/* Research banner: 16:9 photo that fades smoothly into the page background,
   with the publications deck overlapping its lower edge. */
.research-banner{
  position:relative;
  margin-top:var(--space-6);
  border-radius:var(--radius-xl);
  overflow:hidden;
  aspect-ratio:16/9;
  box-shadow:var(--shadow-l);
  isolation:isolate;
  opacity:0;transform:translateX(-32px) scale(.98);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
  will-change:opacity,transform;
}
.research-banner.in-view{opacity:1;transform:none}
.research-banner__img{
  width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 55%,transparent 97%);
}
.research-banner__fade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,var(--bg) 97%);
}
.research-banner__caption{
  position:absolute;left:var(--space-5);right:var(--space-5);bottom:var(--space-5);z-index:2;
}
.research-banner__caption .eyebrow{color:#fff}
.research-banner__caption p:not(.eyebrow){color:var(--text);max-width:52ch;font-size:.92rem;line-height:1.6}
#research .deck#research-deck{position:relative;z-index:3}

/* Music section: promoted out of About into its own animated block */
.music-section{
  display:grid;grid-template-columns:240px 1fr;gap:var(--space-7);align-items:center;
  margin-top:var(--space-5);padding:var(--space-6);border-radius:var(--radius-xl);
  background:var(--soft-panel);border:1px solid rgba(var(--accent-3-rgb),.16);
  box-shadow:var(--shadow-l);position:relative;overflow:hidden;
}
.music-section__art{position:relative;width:220px;height:220px;justify-self:center}
.music-section__art img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  box-shadow:var(--shadow-m);border:6px solid var(--surface);position:relative;z-index:1;
}
.music-section__ring{
  position:absolute;inset:-14px;border-radius:50%;
  background:conic-gradient(from 90deg,var(--accent-2),rgba(var(--accent-2-rgb),.3),var(--accent-3),rgba(var(--accent-1-rgb),.4),var(--accent-1),rgba(var(--accent-2-rgb),.3),var(--accent-2));
  padding:2px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:spin-slow 30s linear infinite reverse;
}
.music-section__copy p{color:var(--text-2);font-size:1.02rem;line-height:1.85;margin-bottom:var(--space-4)}
@media (max-width:1200px){
  .music-section{grid-template-columns:1fr;text-align:center}
  .music-section__art{justify-self:center}
}

.about__highlights{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);
  margin-top:var(--space-5);
}
@media (max-width:768px){.about__highlights{grid-template-columns:1fr}}

.about__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-6);
}
@media (max-width:980px){.about__grid{grid-template-columns:1fr}}

.filter-bar{display:flex;gap:.6em;flex-wrap:wrap;margin:var(--space-5) 0 var(--space-4)}
.search-bar{margin-bottom:var(--space-5)}
.search-bar input{
  width:100%;max-width:440px;padding:.9em 1.1em;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--surface);
}

.literature__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);
  margin-top:var(--space-6);
}
@media (max-width:980px){.literature__grid{grid-template-columns:1fr}}

.contact__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-6);
}
@media (max-width:980px){.contact__grid{grid-template-columns:1fr}}
.contact__actions{display:flex;flex-wrap:wrap;gap:.7em;margin-top:var(--space-4)}

.site-footer{
  border-top:1px solid var(--border);
  padding:var(--space-6) var(--space-5);
  text-align:center;color:var(--text-3);font-size:.85rem;
}

@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-2-rgb),.55)}
  100%{box-shadow:0 0 0 8px rgba(var(--accent-2-rgb),0)}
}

/* Hero campus background image: full-bleed (breaks out of the centered
   .hero max-width) so it fills the whole viewport width behind the hero
   content, fades in smoothly on load, and fades+drifts up on scroll
   (handled together with scrollMotion.js). */
.hero__campus-bg{
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  height:100%;
  min-height:100vh;
  transform:translate3d(-50%,0,0);
  will-change:opacity;
  backface-visibility:hidden;
  background-image:url('../assets/img/hero-campus-bg.jpg');
  background-size:cover;
  background-position:center 35%;
  opacity:0;
  animation:hero-bg-fade-in 2.8s var(--ease) .15s forwards;
  mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%);
  pointer-events:none;
  z-index:0;
}
@keyframes hero-bg-fade-in{
  from{opacity:0}
  to{opacity:.1}
}
@media (prefers-reduced-motion:reduce){
  .hero__campus-bg{animation:none;opacity:.09}
}
.hero__campus-bg::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,transparent 78%,var(--bg) 100%);
  pointer-events:none;
}
.hero__campus-bg::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 0%,transparent 30%,var(--bg) 78%,var(--bg) 100%);
  opacity:.85;
  pointer-events:none;
}
@media (max-width:860px){
  .hero__campus-bg::before{
    background:linear-gradient(180deg,transparent 0%,transparent 34%,var(--bg) 80%,var(--bg) 100%);
    opacity:.9;
  }
  .hero__campus-bg{background-position:center 22%}
}

@media (max-width:560px){
  .nav__brand{max-width:60vw}
  .nav__brand span:last-child{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:inline-block;max-width:100%;font-size:.92rem;
  }
}

@media (max-width:420px){
  .nav__brand span:last-child{font-size:.8rem}
}

@media (max-width:640px){
  .research-banner{aspect-ratio:3/4}
  .research-banner__img{
    -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 98%);
    mask-image:linear-gradient(180deg,#000 66%,transparent 98%);
  }
  .research-banner__caption{left:var(--space-4);right:var(--space-4);bottom:var(--space-4)}
  .research-banner__caption p:not(.eyebrow){font-size:.86rem;line-height:1.55}
}