/* =========================================================
   Kavin R V — personal academic website
   LIGHT = frosted GLASS: cool mint/sage pigment (aligned with
   the dark palette's blue-green cast), translucent panels,
   prismatic reflections. DARK = brushed METAL: gunmetal with
   the bright-red glint. The theme toggle
   dusk falls to dark, dawn rises to light, transforming the page
   element by element (View Transitions). Palettes:
   C0E1D2-E5EEE4-F6F4E8-DC9B9B + FFB6A6-FFEBD3-9BCEC1-67A2C5.
   ========================================================= */

:root{
  --bg:        #B4D6CD;
  --bg-light:  #DDE6DF;
  --text:      #2A4741;
  --muted:     #52706C;
  --line:      #BCCFC6;

  --accent:    #E63946;
  --accent-2:  #C42F3B;
  --glint:     #FFE3DF;

  --steel:     #67A2C5;
  --teal:      #9BCEC1;
  --tealdeep:  #74B3A4;
  --rosewood:  #DC9B9B;
  --peach:     #FFB6A6;
  --lavender:  #9F86D8;
  --cherry:    #D6336C;

  --m1:#4A4A48; --m2:#8B8A85; --m3:#333331;
  --sheen:rgba(255,255,255,.9);
  --pmul:1;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html[data-theme="dark"]{
  --bg:#343433; --bg-light:#262625;
  --text:#EFEEEA; --muted:#ADABA5; --line:#44443F;
  --accent:#FF5A63; --accent-2:#FF8A90; --glint:#FFD6D3;
  /* supporting palette = titanium temper spectrum (straw -> bronze -> violet -> blue) */
  --steel:#7E9CD8; --teal:#9AA6B2; --tealdeep:#D9BE86;
  --rosewood:#C79070; --peach:#E0B98A; --lavender:#A98CDD; --cherry:#D9BE86;
  --heat:#FF7A45;   /* incandescent glow used by dark-mode hovers */
  --sheen:rgba(255,255,255,.32);
  --pmul:.6;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{font-family:var(--sans);background:var(--bg-light);color:var(--text);line-height:1.65;
     -webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
html[data-theme="dark"] body{background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.022) 1px 2px,transparent 2px 3px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.028) 0 1px,transparent 1px 11px),
    linear-gradient(90deg,rgba(0,0,0,.17),transparent 9%,transparent 91%,rgba(0,0,0,.17))}
img{max-width:100%}
main{position:relative;z-index:1}
.no-anim,.no-anim *{transition:none!important}

/* Theme toggle choreography (View Transitions API):
   -> DARK  "dusk": a soft curtain of darkness falls down the page while the
      glass dims beneath it; navbar, ring, headings and footer temper in turn.
   -> LIGHT "dawn": a soft curtain of light washes down the page while the
      metal dissolves into brightness beneath it; each element crystallises. */
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.45,0,.2,1)}
::view-transition-old(vt-nav),::view-transition-old(vt-ring),::view-transition-old(vt-foot),
::view-transition-old(vt-t1),::view-transition-old(vt-t2),
::view-transition-old(vt-t3),::view-transition-old(vt-t4){animation-duration:.28s}

html[data-vt="to-dark"]::view-transition-old(root){animation:vt-dim .75s ease both}
@keyframes vt-dim{           /* the glass world cools and darkens into metal */
  55% {filter:brightness(.9) sepia(.35) saturate(1.4) blur(3px)}
  to  {filter:brightness(.72) sepia(.2) saturate(.9) blur(6px)}}
html[data-vt="to-dark"]::view-transition-new(root){
  animation:vt-dusk .8s cubic-bezier(.3,0,.15,1) both;
  -webkit-mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 72%);
          mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 72%);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@keyframes vt-dusk{
  from{-webkit-mask-position:0 100%;mask-position:0 100%;filter:brightness(.85) blur(4px)}
  55% {filter:brightness(.95) blur(1.5px)}
  to  {-webkit-mask-position:0 0;mask-position:0 0;filter:none}}
html[data-vt="to-dark"]::view-transition-new(vt-nav){animation:quench .45s .04s both}
html[data-vt="to-dark"]::view-transition-new(vt-ring){animation:quench .45s .10s both}
html[data-vt="to-dark"]::view-transition-new(vt-t1){animation:quench .45s .14s both}
html[data-vt="to-dark"]::view-transition-new(vt-t2){animation:quench .45s .18s both}
html[data-vt="to-dark"]::view-transition-new(vt-t3){animation:quench .45s .22s both}
html[data-vt="to-dark"]::view-transition-new(vt-t4){animation:quench .45s .18s both}
html[data-vt="to-dark"]::view-transition-new(vt-foot){animation:quench .45s .26s both}
@keyframes quench{           /* metal heats, tempers through straw gold, then settles */
  from{opacity:.3;filter:brightness(.75) blur(4px);transform:translateY(3px)}
  45% {opacity:.9;filter:sepia(.55) saturate(1.9) brightness(1.12) blur(1px)}
  75% {filter:sepia(.22) saturate(1.3) brightness(1.04)}
  to  {opacity:1;filter:none;transform:none}}

html[data-vt="to-light"]::view-transition-old(root){animation:vt-melt .75s ease both}
@keyframes vt-melt{          /* the metal brightens and loses its temper into light */
  55% {filter:brightness(1.2) saturate(1.15) blur(3px)}
  to  {filter:brightness(1.5) saturate(.85) blur(6px)}}
html[data-vt="to-light"]::view-transition-new(root){
  animation:vt-dawn .8s cubic-bezier(.3,0,.15,1) both;
  -webkit-mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 72%);
          mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 72%);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@keyframes vt-dawn{
  from{-webkit-mask-position:0 100%;mask-position:0 100%;filter:brightness(1.25) blur(4px)}
  55% {filter:brightness(1.08) blur(1.5px)}
  to  {-webkit-mask-position:0 0;mask-position:0 0;filter:none}}
html[data-vt="to-light"]::view-transition-new(vt-nav){animation:crystal .5s .06s both}
html[data-vt="to-light"]::view-transition-new(vt-ring){animation:crystal .5s .12s both}
html[data-vt="to-light"]::view-transition-new(vt-t1){animation:crystal .5s .16s both}
html[data-vt="to-light"]::view-transition-new(vt-t2){animation:crystal .5s .20s both}
html[data-vt="to-light"]::view-transition-new(vt-t3){animation:crystal .5s .24s both}
html[data-vt="to-light"]::view-transition-new(vt-t4){animation:crystal .5s .20s both}
html[data-vt="to-light"]::view-transition-new(vt-foot){animation:crystal .5s .28s both}
@keyframes crystal{          /* glass clears: refraction settles out of the blur */
  from{opacity:.25;filter:blur(6px) brightness(1.5) saturate(1.35) hue-rotate(-8deg);transform:scale(.985)}
  55% {filter:blur(1.6px) brightness(1.12) saturate(1.12) hue-rotate(4deg)}
  to  {opacity:1;filter:none;transform:none}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-new(*),::view-transition-old(*){animation:none!important}}

/* Links */
a{color:inherit;text-decoration:underline;text-decoration-color:var(--teal);
  text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:color .15s,text-decoration-color .15s}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
::selection{background:#A5D2C2;color:#1F3A34}
html[data-theme="dark"] ::selection{background:#5A5240;color:#F7F2E6}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;font-weight:600}
.serif{font-family:var(--serif)}
.container{max-width:1150px;margin:0 auto;padding:0 1.4rem}

/* Major section titles: readable deep glass (light) / chrome (dark); reflection travels on scroll */
.section-title,.news-head h2,.pub-heading,.page-title{color:#1F4258}
html[data-theme="dark"] .section-title,html[data-theme="dark"] .news-head h2,
html[data-theme="dark"] .pub-heading,html[data-theme="dark"] .page-title{color:var(--steel)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .section-title,.news-head h2,.pub-heading,.page-title{
    background-image:linear-gradient(100deg,#1F4258 0%,#3A6E8F 28%,#9FC6D8 47%,#87BBA6 53%,#2F6153 76%,#1F4258 100%);
    background-size:220% 100%;background-position:calc(var(--sp,0)*100%) 0;
    -webkit-background-clip:text;background-clip:text;color:transparent}
  html[data-theme="dark"] .section-title,html[data-theme="dark"] .news-head h2,
  html[data-theme="dark"] .pub-heading,html[data-theme="dark"] .page-title{
    background-image:linear-gradient(100deg,#98A1AB 0%,#D9C89C 26%,#F7F5EE 47%,#BCA9E4 58%,#7E9CD8 70%,#98A1AB 100%)}
}

/* ---------- Sticky navbar ---------- */
.navbar{position:sticky;top:0;z-index:1000;
  background:
    linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.78) 10%,rgba(255,255,255,.08) 16%,rgba(255,255,255,.45) 21%,rgba(255,255,255,0) 30%),
    linear-gradient(180deg,rgba(252,254,253,.5),rgba(238,246,242,.22));
  background-size:250% 100%,100% 100%;
  background-position:calc(var(--sp,0)*100%) 0,0 0;
  background-repeat:no-repeat;
  -webkit-backdrop-filter:blur(24px) saturate(1.65);backdrop-filter:blur(24px) saturate(1.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 0 rgba(42,71,65,.10),0 8px 30px rgba(42,71,65,.08)}
html[data-theme="dark"] .navbar{
  background:
    linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(170,200,212,.18) 12%,rgba(255,255,255,0) 26%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.022) 1px 2px,transparent 2px 3px),
    linear-gradient(180deg,rgba(58,58,56,.96),rgba(45,45,43,.9) 55%,rgba(30,30,29,.95));
  background-size:250% 100%,auto,100% 100%;
  background-position:calc(var(--sp,0)*100%) 0,0 0,0 0;
  background-repeat:no-repeat;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 14px rgba(0,0,0,.42)}
.navbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.95) 28%,rgba(148,178,168,.55) 55%,rgba(255,255,255,.85) 80%,rgba(255,255,255,.1))}
html[data-theme="dark"] .navbar::after{height:2px;
  background:linear-gradient(90deg,var(--m1),rgba(214,176,116,.4) 20%,var(--m2) 34%,var(--m3) 55%,rgba(146,126,214,.35) 70%,var(--m2) 82%,var(--m1))}
/* the travelling reflection: prismatic glass (light) / bright-red metal (dark) */
.navbar::before{content:"";position:absolute;bottom:0;height:3px;width:22%;
  left:calc(var(--sp,0) * 78%);pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,
    rgba(255,150,150,.25) 14%,rgba(255,214,150,.3) 23%,
    rgba(255,255,255,.98) 34%,
    rgba(160,230,205,.32) 44%,rgba(150,185,255,.34) 52%,rgba(200,160,255,.22) 58%,
    rgba(255,255,255,.72) 66%,rgba(150,185,255,.2) 74%,transparent);
  box-shadow:0 0 12px rgba(255,255,255,.8)}
/* Dark reflections = tempered titanium: thin-film interference fringes
   (straw gold -> violet -> deep blue) around a warm-white specular */
html[data-theme="dark"] .navbar::before{
  background:linear-gradient(90deg,transparent,
    rgba(228,186,116,.55) 18%,rgba(206,142,96,.4) 28%,
    rgba(250,250,255,.96) 42%,
    rgba(168,136,228,.5) 56%,rgba(96,132,214,.5) 68%,rgba(70,105,190,.35) 78%,transparent);
  box-shadow:0 0 12px rgba(150,180,255,.45)}
.nav-inner{max-width:1150px;margin:0 auto;padding:.8rem 1.4rem;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem}
.brand{display:flex;align-items:center;gap:.5rem;font-size:1.4rem;font-weight:600;color:var(--text);text-decoration:none}
.brand:hover{color:var(--text)}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:1.7rem}
.nav-links a{position:relative;color:var(--text);font-weight:500;text-decoration:none}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--accent),var(--glint),var(--accent));background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links a:hover{color:var(--accent)}
.nav-links a:hover::after{transform:scaleX(1);animation:sheen-x 1.1s linear infinite}
#theme-toggle{background:none;border:none;color:var(--text);font-size:1.15rem;cursor:pointer;padding:.2rem .3rem}
#theme-toggle:hover{color:var(--accent)}
@keyframes sheen-x{to{background-position:-200% 0}}

/* ---------- Colour bands ---------- */
.band-mint,.band-cream{position:relative;overflow:hidden}
.band-mint > .container,.band-cream > .container{position:relative;z-index:1}
.band-mint{background:
  radial-gradient(820px 400px at 10% -10%,rgba(103,162,197,.38),transparent 60%),
  radial-gradient(760px 360px at 92% 6%,rgba(255,182,166,.22),transparent 55%),
  linear-gradient(180deg,#BFDED3 0%,#B4D6CD 66%,#BDD8CE 100%)}
.band-cream{background:
  radial-gradient(700px 340px at 88% 12%,rgba(103,162,197,.16),transparent 60%),
  linear-gradient(180deg,#BDD8CE 0%,#CFDDD2 18%,var(--bg-light) 38%,#E4EBE3 100%)}
/* Dark bands = a tempered titanium plate: brushed grain over warm neutral
   metal, lit by temper bloom (straw gold above, violet-blue below). */
/* Dark bands = brushed Ti-6Al-4V (Grade 5): fine two-frequency grain over a
   warm-neutral grey, plus a broad soft specular that drifts with scroll —
   titanium is subtly, diffusely reflective, never a mirror. */
/* Dark bands = a brushed titanium phone rail (iPhone Pro / Galaxy Ultra):
   hairline grain running the length of the surface, a soft satin highlight that
   glides along it as you scroll, and darkened chamfers at the outer edges. */
html[data-theme="dark"] .band-mint{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.022) 1px 2px,transparent 2px 3px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.028) 0 1px,transparent 1px 11px),
    linear-gradient(180deg,transparent 0,rgba(255,255,255,.055) 14%,rgba(255,255,255,.02) 24%,transparent 38%),
    linear-gradient(90deg,rgba(0,0,0,.17),transparent 9%,transparent 91%,rgba(0,0,0,.17)),
    radial-gradient(900px 420px at 12% -12%,rgba(214,180,132,.07),transparent 62%),
    radial-gradient(780px 380px at 92% 8%,rgba(146,132,186,.055),transparent 58%),
    linear-gradient(180deg,#3A3A38 0%,#333331 66%,#2E2E2C 100%);
  background-size:auto,auto,auto,100% 280%,auto,auto,auto,auto;
  background-position:0 0,0 0,0 0,0 calc(var(--sp,0)*100%),0 0,0 0,0 0,0 0;
  background-repeat:repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat}
html[data-theme="dark"] .band-cream{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.022) 1px 2px,transparent 2px 3px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.028) 0 1px,transparent 1px 11px),
    linear-gradient(180deg,transparent 0,rgba(255,255,255,.045) 16%,transparent 34%),
    linear-gradient(90deg,rgba(0,0,0,.17),transparent 9%,transparent 91%,rgba(0,0,0,.17)),
    radial-gradient(760px 360px at 86% 14%,rgba(132,146,186,.06),transparent 60%),
    radial-gradient(620px 300px at 8% 78%,rgba(214,180,132,.04),transparent 62%),
    linear-gradient(180deg,#2E2E2C 0%,#2A2A29 20%,var(--bg-light) 40%,#222221 100%);
  background-size:auto,auto,auto,100% 280%,auto,auto,auto,auto;
  background-position:0 0,0 0,0 0,0 calc(var(--sp,0)*100%),0 0,0 0,0 0,0 0;
  background-repeat:repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat}

/* Drifting leaves & petals */
.petals{position:absolute;inset:0;pointer-events:none}
.page-petals{position:fixed;z-index:0}
.petal{position:absolute;width:18px;fill:var(--cherry);opacity:calc(var(--po,.16)*var(--pmul));
       animation:drift 11s ease-in-out infinite alternate}
.petal.lav{fill:var(--lavender)} .petal.teal{fill:var(--tealdeep)} .petal.peach{fill:var(--peach)}
@keyframes drift{
  from{transform:translateY(0) rotate(var(--r))}
  to  {transform:translateY(15px) rotate(calc(var(--r) + 8deg))}
}
@media (prefers-reduced-motion: reduce){
  .petal{animation:none;transform:rotate(var(--r))}
  .nav-links a:hover::after,.btn-sm:hover{animation:none}
}
/* generated petal positions */
.t1{top:7%;left:94.0%;width:30px;--po:.22;--r:25deg;animation-duration:11.5s}
.t2{top:10%;left:2.5%;width:26px;--po:.20;--r:-55deg;animation-duration:12.6s}
.t3{top:85%;left:71.6%;width:13px;--po:0.12;--r:109deg;animation-duration:13.2s}
.t4{top:51%;left:90.9%;width:20px;--po:0.21;--r:-75deg;animation-duration:9.9s}
.t5{top:43%;left:88.2%;width:20px;--po:0.20;--r:22deg;animation-duration:11.7s}
.t6{top:23%;left:82.4%;width:16px;--po:0.22;--r:92deg;animation-duration:14.3s}
.t7{top:54%;left:72.7%;width:10px;--po:0.13;--r:63deg;animation-duration:11.6s}
.t8{top:82%;left:87.8%;width:20px;--po:0.18;--r:35deg;animation-duration:11.8s}
.t9{top:77%;left:26.0%;width:15px;--po:0.10;--r:46deg;animation-duration:9.0s}
.t10{top:53%;left:50.1%;width:14px;--po:0.11;--r:-52deg;animation-duration:10.0s}
.t11{top:33%;left:88.1%;width:18px;--po:0.20;--r:-18deg;animation-duration:9.6s}
.t12{top:36%;left:74.0%;width:15px;--po:0.12;--r:53deg;animation-duration:13.9s}
.t13{top:89%;left:94.0%;width:20px;--po:0.20;--r:45deg;animation-duration:11.8s}
.t14{top:53%;left:24.1%;width:13px;--po:0.11;--r:109deg;animation-duration:11.7s}
.t15{top:28%;left:25.2%;width:11px;--po:0.11;--r:20deg;animation-duration:9.4s}
.t16{top:69%;left:93.4%;width:18px;--po:0.19;--r:-45deg;animation-duration:14.3s}
.t17{top:21%;left:3.7%;width:15px;--po:0.22;--r:14deg;animation-duration:12.3s}
.t18{top:30%;left:80.8%;width:18px;--po:0.19;--r:-45deg;animation-duration:13.2s}
.t19{top:4%;left:90.7%;width:16px;--po:0.20;--r:69deg;animation-duration:11.3s}
.t20{top:14%;left:77.3%;width:13px;--po:0.10;--r:-56deg;animation-duration:10.0s}
.t21{top:13%;left:7.8%;width:18px;--po:0.17;--r:57deg;animation-duration:14.2s}
.t22{top:18%;left:59.4%;width:11px;--po:0.13;--r:101deg;animation-duration:13.1s}
.t23{top:69%;left:48.5%;width:10px;--po:0.09;--r:19deg;animation-duration:11.6s}
.t24{top:66%;left:17.5%;width:15px;--po:0.10;--r:74deg;animation-duration:10.7s}
.t25{top:83%;left:30.1%;width:14px;--po:0.10;--r:60deg;animation-duration:11.7s}
.t26{top:56%;left:6.6%;width:26px;--po:0.17;--r:-1deg;animation-duration:10.6s}
.c1{top:57%;left:18.8%;width:11px;--po:0.11;--r:10deg;animation-duration:9.4s}
.c2{top:61%;left:82.6%;width:24px;--po:0.20;--r:49deg;animation-duration:12.4s}
.c3{top:49%;left:42.6%;width:13px;--po:0.11;--r:-62deg;animation-duration:10.2s}
.c4{top:65%;left:24.2%;width:15px;--po:0.13;--r:29deg;animation-duration:11.5s}
.c5{top:59%;left:46.8%;width:10px;--po:0.14;--r:-71deg;animation-duration:11.6s}
.c6{top:72%;left:84.7%;width:18px;--po:0.20;--r:-18deg;animation-duration:11.6s}
.c7{top:49%;left:36.9%;width:10px;--po:0.13;--r:-39deg;animation-duration:10.7s}
.c8{top:52%;left:14.7%;width:18px;--po:0.15;--r:78deg;animation-duration:14.2s}
.c9{top:88%;left:11.2%;width:16px;--po:0.21;--r:93deg;animation-duration:10.8s}
.c10{top:88%;left:25.5%;width:12px;--po:0.11;--r:-41deg;animation-duration:13.9s}
.c11{top:66%;left:65.7%;width:13px;--po:0.10;--r:39deg;animation-duration:11.2s}
.c12{top:62%;left:63.9%;width:10px;--po:0.12;--r:-32deg;animation-duration:14.4s}
.c13{top:80%;left:60.2%;width:10px;--po:0.11;--r:48deg;animation-duration:12.2s}
.u1{top:83%;left:8.9%;width:14px;--po:0.07;--r:-32deg;animation-duration:11.5s}
.u2{top:73%;left:7.3%;width:12px;--po:0.09;--r:-1deg;animation-duration:10.0s}
.u3{top:75%;left:7.4%;width:20px;--po:0.11;--r:-76deg;animation-duration:12.6s}
.u4{top:60%;left:95.9%;width:15px;--po:0.07;--r:54deg;animation-duration:12.3s}
.u5{top:27%;left:91.4%;width:14px;--po:0.08;--r:83deg;animation-duration:12.4s}
.u6{top:61%;left:5.1%;width:14px;--po:0.07;--r:10deg;animation-duration:9.3s}
.u7{top:18%;left:93.6%;width:14px;--po:0.07;--r:57deg;animation-duration:10.4s}
.u8{top:32%;left:92.0%;width:16px;--po:0.07;--r:-70deg;animation-duration:13.0s}
.u9{top:36%;left:89.1%;width:20px;--po:0.08;--r:33deg;animation-duration:13.4s}

/* ---------- Section heading chips ---------- */
.section-title::before,.pub-heading::before,.news-head h2::before,
.paper h2::before,.news-year::before,.page-title::before{
  content:"";display:block;width:34px;height:6px;border-radius:3px;margin-bottom:.55rem;
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 2px rgba(42,71,65,.16),inset 0 1px 0 rgba(255,255,255,.7);
  background:linear-gradient(105deg,rgba(255,255,255,.1) 20%,rgba(255,255,255,.85) 46%,rgba(255,255,255,.12) 64%),var(--bar,var(--steel));
  background:linear-gradient(105deg,rgba(255,255,255,.1) 20%,rgba(255,255,255,.85) 46%,rgba(255,255,255,.12) 64%),
             color-mix(in srgb,var(--bar,var(--steel)) 45%,transparent)}
html[data-theme="dark"] .section-title::before,html[data-theme="dark"] .pub-heading::before,
html[data-theme="dark"] .news-head h2::before,html[data-theme="dark"] .paper h2::before,
html[data-theme="dark"] .news-year::before,html[data-theme="dark"] .page-title::before{
  border-color:rgba(255,255,255,.12);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.5);
  background:linear-gradient(105deg,rgba(255,255,255,0) 22%,var(--sheen) 46%,rgba(255,255,255,0) 64%),var(--bar,var(--steel))}
.news-head h2::before,.page-title::before{--bar:var(--rosewood)}
.pub-heading::before{--bar:var(--tealdeep)}
.paper h2:nth-of-type(2)::before{--bar:var(--tealdeep)}
.news-year:nth-of-type(2)::before{--bar:var(--rosewood)}
.news-year:nth-of-type(3)::before{--bar:var(--tealdeep)}
.news-year:nth-of-type(4)::before{--bar:var(--lavender)}

/* ---------- About section ---------- */
.about-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:3rem;
            padding-top:3rem;padding-bottom:3.2rem;scroll-margin-top:95px}
.profile-card{text-align:center;align-self:start;padding-top:.6rem}
/* Portrait ring: glass halo (light) / chrome (dark) — the red glint sweeps around it as you scroll */
.avatar-frame{display:inline-block;padding:4px;border-radius:50%;
  background:conic-gradient(from calc(var(--sp,0)*2turn + 210deg),
    rgba(255,255,255,.26) 0deg,
    rgba(255,170,160,.3) 34deg,rgba(255,222,160,.34) 44deg,
    rgba(255,255,255,.98) 54deg,
    rgba(165,232,205,.36) 64deg,rgba(155,190,255,.36) 74deg,rgba(205,165,255,.24) 84deg,
    rgba(255,255,255,.2) 120deg,rgba(255,255,255,.15) 180deg,
    rgba(255,210,170,.2) 214deg,rgba(255,255,255,.7) 232deg,rgba(160,200,255,.22) 250deg,
    rgba(255,255,255,.2) 300deg,rgba(255,255,255,.26) 360deg);
  box-shadow:0 10px 26px rgba(44,74,68,.18),inset 0 0 0 1px rgba(255,255,255,.65)}
html[data-theme="dark"] .avatar-frame{
  background:conic-gradient(from calc(var(--sp,0)*2turn + 210deg),
    #4F4E4C 0deg,#918F8A 34deg,
    rgba(226,186,120,.85) 96deg,rgba(210,150,105,.7) 106deg,
    #F5F3EC 116deg,
    rgba(172,140,230,.8) 126deg,rgba(104,138,216,.75) 138deg,rgba(78,110,190,.5) 150deg,
    #3A3937 190deg,#84827D 246deg,#4A4947 306deg,#4F4E4C 360deg);
  box-shadow:0 10px 28px rgba(0,0,0,.5)}
.avatar{display:block;width:184px;height:184px;border-radius:50%;object-fit:cover}
.profile-name{font-family:var(--serif);font-size:1.9rem;font-weight:600;margin-top:.2rem}
.affiliation{color:var(--muted);margin-top:.35rem}
.socials{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.1rem;margin-top:1.3rem;font-size:1.35rem}
.socials a{color:var(--text);text-decoration:none;transition:color .15s,transform .15s}
.socials a:hover{color:var(--accent);transform:translateY(-2px) scale(1.1)}
.cv-link{font-weight:700;font-size:1rem;letter-spacing:.5px}

.section-title{font-family:var(--serif);font-size:1.85rem;font-weight:600;margin-bottom:.9rem}
.bio{max-width:72ch;margin-bottom:2rem}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2rem;margin-bottom:2.1rem}
.info-grid h3{font-family:var(--serif);font-size:1.2rem;margin-bottom:.65rem}
.interests{list-style:none}
.interests li{margin:.32rem 0}
.interests li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
                      background:var(--teal);margin-right:.6rem;vertical-align:2px}
.interests li:nth-child(4n+1)::before{background:var(--steel)}
.interests li:nth-child(4n+2)::before{background:var(--tealdeep)}
.interests li:nth-child(4n+3)::before{background:var(--rosewood)}
.interests li:nth-child(4n)::before{background:var(--lavender)}
.edu{list-style:none}
.edu li{display:flex;gap:.75rem;margin-bottom:1rem}
.edu i{color:var(--rosewood);margin-top:.35rem;flex-shrink:0}
.info-grid > div:nth-child(2) .edu i{color:var(--steel)}
.exp-block{margin-bottom:2.1rem}
.exp-block h3{font-family:var(--serif);font-size:1.2rem;margin-bottom:.65rem}
.exp-block .edu i{color:var(--tealdeep)}
.edu .school{display:block;color:var(--muted);font-size:.92rem}

/* ---------- News ---------- */
.news-box{margin-top:.4rem}
.news-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.news-head h2{font-family:var(--serif);font-size:1.45rem;font-weight:600}
.see-all{font-size:.92rem;white-space:nowrap;font-weight:600;color:var(--accent);text-decoration:none}
.see-all:hover{color:var(--accent-2)}
.news-scroll{max-height:235px;overflow-y:auto;padding-right:.8rem;
             scrollbar-width:thin;scrollbar-color:var(--teal) transparent;
             -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);
             mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)}
.news-scroll::after{content:"";display:block;height:32px}
.news-item{margin:.5rem 0}
.news-date{font-weight:600}
.data-missing{color:var(--accent-2);font-weight:500}
.news-scroll::-webkit-scrollbar{width:6px}
.news-scroll::-webkit-scrollbar-track{background:transparent}
.news-scroll::-webkit-scrollbar-thumb{background:var(--teal);border-radius:3px}

/* ---------- Publications ---------- */
.pub-section{display:grid;grid-template-columns:270px minmax(0,1fr);gap:2.2rem;
             padding:3.4rem 0 2.2rem;scroll-margin-top:95px}
.pub-heading{font-size:2.7rem;font-weight:500;line-height:1.1}
.pub{position:relative;padding:1.05rem 0 1.05rem 1.15rem;
     border-bottom:1px solid;
     border-image:linear-gradient(90deg,transparent,rgba(196,220,232,.55) 25%,rgba(255,255,255,.95) 50%,rgba(196,220,232,.55) 75%,transparent) 1}
html[data-theme="dark"] .pub{
     border-image:linear-gradient(90deg,transparent,var(--m3) 18%,var(--m2) 50%,var(--m3) 82%,transparent) 1}
.pub:last-child{border-bottom:none}
.pub::before{content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:3px;border-radius:2px;
     box-shadow:0 1px 3px rgba(42,71,65,.20),inset 0 0 0 .75px rgba(255,255,255,.55);
     background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.2) 26%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.12) 76%,rgba(42,71,65,.2)),var(--edge,var(--steel));
     background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.2) 26%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.12) 76%,rgba(42,71,65,.2)),
                color-mix(in srgb,var(--edge,var(--steel)) 44%,transparent)}
html[data-theme="dark"] .pub::before{box-shadow:none;
     background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 24%,var(--sheen) 50%,rgba(255,255,255,0) 74%,rgba(0,0,0,.22)),var(--edge,var(--steel))}
.pub:nth-of-type(3n+2){--edge:var(--tealdeep)}
.pub:nth-of-type(3n){--edge:var(--rosewood)}
.pub:hover{--edge:var(--accent)}
.pub:hover::before{box-shadow:0 0 10px rgba(230,57,70,.45)}
html[data-theme="dark"] .pub:hover::before{box-shadow:0 0 10px rgba(255,90,99,.5)}
.pub-cite i{color:var(--teal);margin-right:.3rem}
.pub-title{font-weight:500}
.pub-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.btn-sm{position:relative;display:inline-block;border:1px solid rgba(255,255,255,.9);border-radius:999px;
        padding:.14rem .8rem;font-size:.83rem;color:var(--text);text-decoration:none;
        background-color:rgba(255,255,255,.36);
        -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(42,71,65,.14);
        transition:border-color .15s,color .15s,transform .15s,background-color .15s,box-shadow .15s}
html[data-theme="dark"] .btn-sm{background-color:#2B2C2E;border:1px solid #46464A;
        background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 45%,rgba(0,0,0,.22));
        box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.4);
        -webkit-backdrop-filter:none;backdrop-filter:none}
/* Hover lives on the rim only: a ring drawn as a gradient and masked hollow, so
   nothing can bleed into the button body. A single bright segment travels around
   it — the same moving glint as the navbar edge. */
.btn-sm::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  pointer-events:none;opacity:0;transition:opacity .25s ease;
  background-image:var(--rim,none);background-size:320% 100%;background-position:0 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude}
.btn-sm:hover::after{opacity:1;animation:rim-sheen 1.6s linear infinite}
.btn-sm:hover{transform:translateY(-1px);text-decoration:none}
@keyframes rim-sheen{to{background-position:-320% 0}}

/* ---------- Publication detail pages ---------- */
.paper{max-width:840px;padding-top:2.8rem;padding-bottom:2.5rem}
.paper-title{font-size:2.3rem;font-weight:600;line-height:1.22;margin-bottom:1.1rem}
.paper-authors{margin-bottom:.15rem}
.paper-date{color:var(--muted);margin-bottom:1.1rem}
.paper h2{font-family:var(--serif);font-size:1.4rem;margin:2.2rem 0 .7rem}
.abstract{text-align:justify}
.meta{border-collapse:collapse;margin-top:1.7rem}
.meta th{text-align:left;vertical-align:top;padding:.3rem 2.4rem .3rem 0;font-weight:600;white-space:nowrap}
.meta td{padding:.3rem 0;color:var(--muted)}
.share{display:flex;justify-content:center;gap:1.5rem;font-size:1.2rem;margin:2.2rem 0 .4rem;
       padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.share a{color:var(--muted);text-decoration:none;transition:color .15s,transform .15s}
.share a:hover{color:var(--accent);transform:translateY(-2px)}
.related-list{list-style:none}
.related-list li{margin:.55rem 0}
.related-list li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
                         background:var(--teal);margin-right:.6rem;vertical-align:2px}
.related-list li:nth-child(2n)::before{background:var(--lavender)}

/* ---------- News page ---------- */
.news-page{max-width:840px;padding-top:2.8rem;padding-bottom:2.5rem}
.page-title{font-size:2.5rem;font-weight:500;margin-bottom:1.1rem}
.news-year{font-family:var(--serif);font-size:1.45rem;margin:2rem 0 .5rem}
.news-page .news-item{margin:.6rem 0}

/* ---------- Footer ---------- */
footer{position:relative;margin-top:2.2rem;padding:2rem 1rem;text-align:center;color:var(--muted);font-size:.9rem}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
  background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.95) 28%,rgba(148,178,168,.55) 55%,rgba(255,255,255,.85) 80%,rgba(255,255,255,.1))}
html[data-theme="dark"] footer::before{height:2px;
  background:linear-gradient(90deg,var(--m1),rgba(214,176,116,.4) 20%,var(--m2) 34%,var(--m3) 55%,rgba(146,126,214,.35) 70%,var(--m2) 82%,var(--m1))}
footer::after{content:"";position:absolute;top:0;left:7%;width:150px;height:3px;
  background:linear-gradient(90deg,transparent,
    rgba(255,150,150,.22) 18%,rgba(255,214,150,.28) 28%,
    rgba(255,255,255,.95) 42%,
    rgba(160,230,205,.3) 52%,rgba(150,185,255,.3) 60%,
    rgba(255,255,255,.65) 70%,rgba(200,160,255,.2) 80%,transparent)}
html[data-theme="dark"] footer::after{
  background:linear-gradient(90deg,transparent,
    rgba(228,186,116,.5) 22%,rgba(206,142,96,.35) 32%,
    rgba(250,250,255,.92) 46%,
    rgba(168,136,228,.45) 60%,rgba(96,132,214,.45) 72%,transparent)}

/* ---------- Responsive ---------- */
@media (max-width:940px){
  .about-grid{grid-template-columns:1fr;gap:2.1rem;padding-top:2.4rem}
  .profile-card{max-width:430px;width:100%;margin:0 auto}
  .pub-section{grid-template-columns:1fr;gap:1rem;padding-top:2.6rem}
  .pub-heading{font-size:2.1rem}
}
@media (max-width:640px){
  .brand{font-size:1.22rem}
  .nav-links{gap:1.05rem;font-size:.98rem}
  .section-title{font-size:1.55rem}
  .paper-title{font-size:1.8rem}
  .pub-heading{font-size:1.85rem}
  .page-title{font-size:2rem}
  .petal{width:14px}
}


/* =========================================================
   TWO WORLDS
   LIGHT — a serene green garden seen through a glass window:
     everything frosted, refracting, dew-bright; hovering makes
     the glass "wet" and throws a prismatic edge.
   DARK  — a tempered titanium plate:
     brushed grain, temper-bloom light, leaves etched into the
     metal; hovering heats the spot until it glows and tempers.
   ========================================================= */

/* ---- LIGHT: glass mechanics ---- */
html:not([data-theme="dark"]) a:hover{text-shadow:0 0 14px rgba(255,255,255,.9)}
html:not([data-theme="dark"]) .nav-links a::after{
  background:linear-gradient(90deg,rgba(255,150,150,.5),rgba(255,255,255,.98) 35%,rgba(160,230,205,.6) 55%,rgba(150,185,255,.7));
  background-size:200% 100%}
html:not([data-theme="dark"]) .socials a:hover,
html:not([data-theme="dark"]) .share a:hover{
  text-shadow:0 0 16px rgba(255,255,255,.95),0 0 26px rgba(150,185,255,.5)}
/* light: a prismatic glint slides around the glass rim */
html:not([data-theme="dark"]) .btn-sm{
  --rim:linear-gradient(100deg,transparent 0 30%,rgba(255,150,150,.75) 37%,rgba(255,214,150,.85) 42%,
    rgba(255,255,255,1) 50%,rgba(160,230,205,.85) 58%,rgba(150,185,255,.9) 64%,transparent 71% 100%)}
html:not([data-theme="dark"]) .btn-sm:hover{
  color:var(--text);border-color:rgba(255,255,255,1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 2px 12px rgba(150,185,255,.24)}
/* publication rods: the glass tube lights up and disperses */
html:not([data-theme="dark"]) .pub:hover::before{
  box-shadow:0 0 12px rgba(255,255,255,.9),0 0 20px rgba(150,185,255,.45);
  background:linear-gradient(180deg,rgba(255,180,170,.7),rgba(255,255,255,.95) 30%,
    rgba(160,230,205,.7) 60%,rgba(150,185,255,.8));}
html:not([data-theme="dark"]) .avatar-frame:hover{box-shadow:0 12px 34px rgba(44,74,68,.24),
  inset 0 0 0 1px rgba(255,255,255,.85),0 0 26px rgba(180,215,235,.6)}

/* ---- DARK: metal mechanics ---- */
/* leaves are etched into the plate rather than floating over it */
html[data-theme="dark"] .petal{fill:none;stroke:rgba(226,186,120,.85);stroke-width:1.4;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
html[data-theme="dark"] .petal.lav{stroke:rgba(169,140,221,.8)}
html[data-theme="dark"] .petal.teal{stroke:rgba(154,166,178,.8)}
html[data-theme="dark"] .petal.peach{stroke:rgba(199,144,112,.8)}
html[data-theme="dark"]{--pmul:.85}

/* hover = local heat: the metal glows, tempers, and cools back */
html[data-theme="dark"] a:hover{color:var(--heat);text-decoration-color:var(--heat);
  text-shadow:0 0 12px rgba(255,122,69,.45)}
html[data-theme="dark"] .nav-links a:hover{color:var(--heat)}
html[data-theme="dark"] .nav-links a::after{
  background:linear-gradient(90deg,var(--heat),#FFD9A0 40%,#F7F3EA 55%,#B79BE8 78%,#7E9CD8);
  background-size:200% 100%;box-shadow:0 0 8px rgba(255,122,69,.5)}
html[data-theme="dark"] .socials a:hover,
html[data-theme="dark"] .share a:hover{color:var(--heat);
  text-shadow:0 0 14px rgba(255,122,69,.6),0 0 24px rgba(226,186,120,.35)}
html[data-theme="dark"] .see-all:hover{color:var(--heat)}
/* dark: a heated segment tempers its way around the rim */
html[data-theme="dark"] .btn-sm{
  --rim:linear-gradient(100deg,transparent 0 30%,var(--heat) 37%,#FFC07A 43%,
    #F7F3EA 50%,#C9AEE8 58%,#7E9CD8 64%,transparent 71% 100%)}
html[data-theme="dark"] .btn-sm:hover{
  color:#F6EFE4;border-color:#5A5952;
  box-shadow:0 0 12px rgba(255,122,69,.28)}
/* publication rods: the bar heats from red through straw gold to violet */
html[data-theme="dark"] .pub:hover::before{
  background:linear-gradient(180deg,var(--heat),#FFC07A 26%,#F7F1E4 50%,#C0A4E6 74%,#7E9CD8);
  box-shadow:0 0 12px rgba(255,122,69,.6),0 0 22px rgba(226,186,120,.3)}
html[data-theme="dark"] .avatar-frame:hover{
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 26px rgba(226,186,120,.28)}
html[data-theme="dark"] .news-scroll{scrollbar-color:#7C838B transparent}
html[data-theme="dark"] .news-scroll::-webkit-scrollbar-thumb{background:#7C838B}
html[data-theme="dark"] .pub-cite i{color:#9AA6B2}
html[data-theme="dark"] #theme-toggle:hover{color:var(--heat)}
html[data-theme="dark"] :focus-visible{outline-color:var(--heat)}

/* shared easing so every hover feels like the same material reacting */
.btn-sm,.pub::before,.socials a,.share a,.avatar-frame,.nav-links a{
  transition-duration:.28s;transition-timing-function:cubic-bezier(.3,0,.2,1)}
@media (prefers-reduced-motion: reduce){
  .btn-sm:hover::after{animation:none}}