/* ════════════════════════════════════════════════════════
   AYUSHMAN MALLICK — Personal Research Portfolio
   Inspired by: hamishw.com (Three.js / dark-cyan) +
                shivamkgw.github.io (researcher structure)
   Stack: Vanilla HTML/CSS/JS · Three.js · GSAP
════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────── */
:root {
  --f-display : 'Syne',    sans-serif;
  --f-mono    : 'Inter',   sans-serif;
  --f-body    : 'Inter',   sans-serif;

  --t-hero : clamp(3.4rem, 9vw,  9.2rem);
  --t-h2   : clamp(2rem,   4vw,  3.4rem);
  --t-h3   : clamp(1.05rem, 2vw, 1.32rem);

  --sp-xs  : 4px;
  --sp-sm  : 8px;
  --sp-md  : 16px;
  --sp-lg  : 24px;
  --sp-xl  : 40px;
  --sp-2xl : 64px;
  --sp-3xl : 96px;
  --gutter : clamp(20px, 5vw, 80px);

  --r-sm  : 6px;
  --r-md  : 12px;
  --r-lg  : 20px;
  --r-pill: 999px;

  --ease-out    : cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out : cubic-bezier(0.4,  0, 0.2,  1);
  --dur-fast : 180ms;
  --dur-med  : 380ms;
  --dur-slow : 700ms;
}

/* ── 2. COLOUR THEMES ─────────────────────────────────── */
[data-theme="dark"] {
  --bg          : #080d14;
  --bg-surf     : #0f1623;
  --bg-surf-2   : #172031;
  --text        : #e2e8f0;
  --text-2      : rgba(226,232,240,.62);
  --text-3      : rgba(226,232,240,.38);
  --accent      : #5eead4;
  --accent-dim  : #2dd4bf;
  --accent-glow : rgba(94,234,212,.14);
  --accent-glow2: rgba(94,234,212,.06);
  --border      : rgba(226,232,240,.09);
  --border-2    : rgba(226,232,240,.05);
  --shadow      : rgba(0,0,0,.55);
  --nav-blur-bg : rgba(8,13,20,.82);
}

[data-theme="light"] {
  --bg          : #f5f7fa;
  --bg-surf     : #ffffff;
  --bg-surf-2   : #edf2f7;
  --text        : #0d1117;
  --text-2      : rgba(13,17,23,.62);
  --text-3      : rgba(13,17,23,.38);
  --accent      : #0d9488;
  --accent-dim  : #0f766e;
  --accent-glow : rgba(13,148,136,.12);
  --accent-glow2: rgba(13,148,136,.05);
  --border      : rgba(13,17,23,.1);
  --border-2    : rgba(13,17,23,.05);
  --shadow      : rgba(0,0,0,.08);
  --nav-blur-bg : rgba(245,247,250,.84);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background : var(--bg);
  color      : var(--text);
  font-family: var(--f-body);
  line-height: 1.65;
  overflow-x : hidden;
  cursor     : none;
  transition :
    background var(--dur-med) var(--ease-in-out),
    color      var(--dur-med) var(--ease-in-out);
}

a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul  { list-style: none; }
em  { font-style: italic; }

.mono {
  font-family   : var(--f-mono);
  letter-spacing: .02em;
  font-size     : .88em;
}

.container {
  max-width: 1200px;
  margin   : 0 auto;
  padding  : 0 var(--gutter);
}

section { padding: var(--sp-3xl) 0; }

/* ── 4. CURSOR — Glowing blob + chain ─────────────────── */

/* The blob and chain nodes are created by cursor.js —
   mixBlendMode:screen means the glow lights up content
   underneath rather than covering it.                    */
#cursorBlob {
  /* Base style set in JS; transitions defined here */
  transition: width .22s var(--ease-out),
              height .22s var(--ease-out),
              opacity .18s ease !important;
}

/* Disable custom cursor on touch devices */
@media (hover: none) {
  #cursorBlob { display: none !important; }
  body { cursor: auto; }
}

/* ── 5. SCROLL PROGRESS ───────────────────────────────── */
.scroll-progress {
  position      : fixed;
  top: 0; left: 0;
  height        : 2px;
  background    : var(--accent);
  z-index       : 9998;
  width         : 0%;
  transition    : width .08s linear;
  pointer-events: none;
}

/* ── 6. NAVIGATION ───────────────────────────────────── */
.nav {
  position  : fixed;
  top: 0; left: 0; right: 0;
  z-index   : 900;
  padding   : 22px var(--gutter);
  transition:
    background   var(--dur-med),
    padding      var(--dur-med) var(--ease-in-out),
    border-color var(--dur-med);
}

.nav.scrolled {
  background            : var(--nav-blur-bg);
  backdrop-filter       : blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding               : 12px var(--gutter);
  border-bottom         : 1px solid var(--border);
}

.nav-inner {
  display    : flex;
  align-items: center;
  max-width  : 1200px;
  margin     : 0 auto;
  gap        : var(--sp-xl);
}

.nav-logo {
  font-family   : var(--f-display);
  font-weight   : 800;
  font-size     : 1.35rem;
  color         : var(--accent);
  letter-spacing: -.02em;
  flex-shrink   : 0;
}

.nav-links {
  display        : flex;
  gap            : var(--sp-xl);
  flex           : 1;
  justify-content: center;
}

.nav-link {
  font-family   : var(--f-mono);
  font-size     : .8rem;
  color         : var(--text-2);
  letter-spacing: .06em;
  position      : relative;
  transition    : color var(--dur-fast);
}

.nav-link::after {
  content    : '';
  position   : absolute;
  bottom     : -3px;
  left       : 0;
  width      : 0;
  height     : 1px;
  background : var(--accent);
  transition : width var(--dur-med) var(--ease-out);
}

.nav-link:hover           { color: var(--accent); }
.nav-link:hover::after    { width: 100%; }

.nav-actions {
  display    : flex;
  align-items: center;
  gap        : var(--sp-md);
  flex-shrink: 0;
}

.theme-toggle {
  background    : none;
  border        : 1px solid var(--border);
  color         : var(--text-2);
  padding       : 6px 14px;
  border-radius : var(--r-pill);
  cursor        : none;
  font-family   : var(--f-mono);
  font-size     : .72rem;
  letter-spacing: .06em;
  transition    : all var(--dur-fast);
  white-space   : nowrap;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color       : var(--accent);
}

[data-theme="dark"]  .theme-toggle::before { content: '◐  light'; }
[data-theme="light"] .theme-toggle::before { content: '◑  dark';  }

.nav-hamburger {
  display       : none;
  flex-direction: column;
  gap           : 5px;
  background    : none;
  border        : none;
  cursor        : none;
  padding       : 6px;
}

.nav-hamburger span {
  display      : block;
  width        : 22px;
  height       : 2px;
  background   : var(--text);
  border-radius: 2px;
  transition   : all var(--dur-med) var(--ease-out);
}

@media (max-width: 820px) {
  .nav-links     { display: none; }
  .theme-toggle  { display: none; }
  .nav-hamburger { display: flex; }
}

/* Mobile menu overlay */
.nav-mobile {
  display        : none;
  position       : fixed;
  inset          : 0;
  background     : var(--bg-surf);
  z-index        : 950;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  opacity        : 0;
  pointer-events : none;
  transition     : opacity var(--dur-med) var(--ease-in-out);
}

.nav-mobile.open {
  display       : flex;
  opacity       : 1;
  pointer-events: all;
}

.nav-mobile-close {
  position  : absolute;
  top: 28px; right: var(--gutter);
  background: none;
  border    : none;
  color     : var(--text-2);
  font-size : 1.4rem;
  cursor    : none;
  transition: color var(--dur-fast);
}

.nav-mobile-close:hover { color: var(--accent); }

.nav-mobile ul   { text-align: center; }
.nav-mobile ul li + li { margin-top: 28px; }

.nav-mobile ul li a {
  font-family: var(--f-display);
  font-size  : clamp(1.8rem, 6vw, 3rem);
  font-weight: 700;
  color      : var(--text-2);
  transition : color var(--dur-fast);
}

.nav-mobile ul li a:hover { color: var(--accent); }

.nav-mobile-backdrop {
  display   : none;
  position  : fixed;
  inset     : 0;
  z-index   : 940;
  background: rgba(0,0,0,.5);
}

.nav-mobile-backdrop.open { display: block; }

/* ── 7. HERO ─────────────────────────────────────────── */
/* ── Background fade slideshow (hero + journey) ── */
.bg-slideshow {
  position: absolute;
  inset   : 0;
  z-index : 0;
  overflow: hidden;
}

.bg-slide {
  position           : absolute;
  inset              : 0;
  background-size    : cover;
  background-position: center;
  background-repeat  : no-repeat;
  opacity            : 0;
  transition         : opacity 1s ease;
}

[data-theme="dark"]  .bg-slide--active { opacity: 0.38; }
[data-theme="light"] .bg-slide--active { opacity: 0.50; }

.hero {
  position  : relative;
  min-height: 100dvh;
  display   : flex;
  align-items: center;
  overflow  : hidden;
}

.sphere-canvas {
  position      : absolute;
  z-index       : 1;
  inset         : 0;
  width         : 100%;
  height        : 100%;
  pointer-events: none;
}

.hero-content {
  position   : relative;
  z-index    : 2;
  padding    : 0 var(--gutter);
  padding-top: 120px;
  max-width  : 1200px;
  width      : 100%;
  margin     : 0 auto;
}

.hero-label {
  color        : var(--accent);
  margin-bottom: var(--sp-lg);
  font-size    : .95rem;
  letter-spacing: .10em;
}

.hero-name {
  font-family   : var(--f-display);
  font-size     : var(--t-hero);
  font-weight   : 800;
  line-height   : .92;
  letter-spacing: -.03em;
  margin-bottom : var(--sp-xl);
  display       : flex;
  flex-direction: column;
  cursor        : default;
}

/* Prevent word-break on name spans */
.hero-name-first,
.hero-name-last {
  white-space  : nowrap;
  display      : block;
  overflow     : visible;
}

/* Shimmer sweep — each word is a gradient container */
.hero-name-first,
.hero-name-last {
  position     : relative;
}
.hero-name-first::after,
.hero-name-last::after {
  content      : '';
  position     : absolute;
  inset        : 0;
  background   : linear-gradient(
    105deg,
    transparent 30%,
    rgba(94,234,212,.55) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  pointer-events: none;
  opacity      : 0;
  transition   : opacity .1s;
  mix-blend-mode: screen;
}
.hero-name:hover .hero-name-first::after,
.hero-name:hover .hero-name-last::after {
  opacity      : 1;
  animation    : nm-shimmer 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
.hero-name:hover .hero-name-last::after {
  animation-delay: .13s;
}

@keyframes nm-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -60% 0; }
}

[data-theme="dark"]  .hero-name-first {
  color              : transparent;
  -webkit-text-stroke: 1.5px rgba(226,232,240,.22);
}
[data-theme="dark"]  .hero-name-last  { color: var(--accent); }
[data-theme="light"] .hero-name-first { color: var(--text); }
[data-theme="light"] .hero-name-last  { color: var(--accent); }

.hero-role {
  font-size    : clamp(1rem, 1.5vw, 1.18rem);
  color        : var(--text-2);
  line-height  : 1.75;
  margin-bottom: var(--sp-xl);
  max-width    : 560px;
}

.hero-inst { font-size: .92rem; color: var(--text-3); }

.hero-tags {
  display      : flex;
  flex-wrap    : wrap;
  gap          : var(--sp-sm);
  margin-bottom: var(--sp-xl);
}

.tag {
  font-family  : var(--f-mono);
  font-size    : .82rem;
  padding      : 6px 16px;
  border       : 1px solid var(--border);
  border-radius: var(--r-pill);
  color        : var(--text-2);
  letter-spacing: .04em;
  transition   : all var(--dur-fast);
}

.tag:hover { border-color: var(--accent); color: var(--accent); }

.hero-cta {
  display  : flex;
  gap      : var(--sp-md);
  flex-wrap: wrap;
}

/* ── Buttons ── */
.btn {
  display      : inline-block;
  font-family  : var(--f-mono);
  font-size    : .8rem;
  letter-spacing: .07em;
  padding      : 12px 28px;
  border-radius: var(--r-pill);
  border       : none;
  cursor       : none;
  transition   : all var(--dur-med) var(--ease-out);
}

.btn--primary {
  background : var(--accent);
  color      : var(--bg);
  font-weight: 500;
}

.btn--primary:hover {
  transform : translateY(-2px);
  box-shadow: 0 8px 28px var(--accent-glow);
}

.btn--outline {
  border    : 1px solid var(--border);
  color     : var(--text);
  background: transparent;
}

.btn--outline:hover {
  border-color: var(--accent);
  color       : var(--accent);
  transform   : translateY(-2px);
}

.btn--ghost {
  color     : var(--text-2);
  background: transparent;
  border    : 1px solid var(--border-2);
  padding   : 12px 20px;
}

.btn--ghost:hover { color: var(--accent); border-color: var(--accent); }

/* Scroll indicator */
.scroll-indicator {
  position : absolute;
  bottom   : 40px;
  left     : var(--gutter);
  display  : flex;
  align-items: center;
  gap      : 14px;
  color    : var(--text-3);
  z-index  : 2;
}

.scroll-line {
  width     : 40px;
  height    : 1px;
  background: var(--accent);
  animation : scrollPulse 2.2s var(--ease-in-out) infinite;
}

@keyframes scrollPulse {
  0%,100% { opacity: 1;  transform: scaleX(1);   }
  50%     { opacity: .4; transform: scaleX(.5);  }
}

.scroll-text { font-size: .68rem; letter-spacing: .14em; }

/* ── 8. SECTION COMMON ────────────────────────────────── */
.section-label {
  color         : var(--accent);
  font-size     : .72rem;
  letter-spacing: .14em;
  margin-bottom : var(--sp-lg);
  text-transform: uppercase;
}

.section-heading {
  font-family   : var(--f-display);
  font-size     : var(--t-h2);
  font-weight   : 700;
  line-height   : 1.1;
  letter-spacing: -.02em;
  margin-bottom : var(--sp-2xl);
  color         : var(--text);
}

.section-heading em { font-style: normal; color: var(--accent); }

/* ── 9. ABOUT ─────────────────────────────────────────── */
.about { background: var(--bg-surf); }

.about-grid {
  display              : grid;
  grid-template-columns: 340px 1fr;
  gap                  : var(--sp-3xl);
  align-items          : start;
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
}

.about-photo-col {
  display       : flex;
  flex-direction: column;
  gap           : var(--sp-lg);
  align-items   : flex-start;
}

.about-photo-wrap {
  position     : relative;
  width        : 360px;
  height       : 440px;
  border-radius: var(--r-lg);
  overflow     : hidden;
  border       : 1px solid var(--border);
  background   : var(--bg-surf-2);
  flex-shrink  : 0;
}

.about-photo {
  position        : absolute;
  inset           : 0;
  width           : 100%;
  height          : 100%;
  object-fit      : cover;
  object-position : center top;
  transition      : opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

/* profile2 sits on top, hidden until hovered */
.about-photo--alt {
  opacity : 0;
  z-index : 1;
}
.about-photo--alt.visible {
  opacity  : 1;
  transform: scale(1.03);
}

/* Subtle scale on primary when alt is not shown */
.about-photo-wrap:hover .about-photo:not(.about-photo--alt) {
  transform: scale(1.03);
}

.about-photo-fallback {
  display        : none;
  width          : 100%;
  height         : 100%;
  align-items    : center;
  justify-content: center;
  font-family    : var(--f-display);
  font-size      : 4.5rem;
  font-weight    : 800;
  color          : var(--accent);
  background     : var(--bg-surf-2);
}

.about-badge {
  background   : var(--accent);
  color        : var(--bg);
  padding      : 6px 14px;
  border-radius: var(--r-md);
  font-size    : .7rem;
  letter-spacing: .1em;
  font-weight  : 500;
  align-self   : flex-start;
}
.about-badge-link {
  color      : var(--bg);
  text-decoration: none;
  font-size  : .78rem;
  transition : color var(--dur-fast);
}
.about-badge-link:hover { color: var(--bg); opacity: .8; }

.about-quals {
  display  : flex;
  flex-wrap: wrap;
  gap      : var(--sp-sm);
  margin   : var(--sp-md) 0 var(--sp-lg);
}

.about-qual-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 6px;
  padding       : 5px 12px;
  border-radius : var(--r-pill);
  border        : 1px solid var(--accent);
  color         : var(--accent);
  font-size     : .72rem;
  font-weight   : 500;
  letter-spacing: .04em;
  white-space   : nowrap;
}

.about-socials {
  display  : flex;
  flex-wrap: wrap;
  gap      : var(--sp-sm);
}

.social-chip {
  display     : inline-flex;
  align-items : center;
  gap         : 6px;
  font-family : var(--f-mono);
  font-size   : .72rem;
  padding     : 5px 12px;
  border      : 1px solid var(--border);
  border-radius: var(--r-pill);
  color       : var(--text-2);
  letter-spacing: .04em;
  transition  : all var(--dur-fast);
}

.social-chip:hover { border-color: var(--accent); color: var(--accent); }

.bio-text {
  color        : var(--text-2);
  font-size    : 1.01rem;
  line-height  : 1.82;
  margin-bottom: var(--sp-lg);
}

.bio-text strong { color: var(--text); font-weight: 600; }

.skills-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : var(--sp-xl);
  margin-top           : var(--sp-xl);
  padding-top          : var(--sp-xl);
  border-top           : 1px solid var(--border);
}

@media (max-width: 540px) {
  .skills-grid { grid-template-columns: 1fr; }
}

.skill-heading {
  color        : var(--accent);
  font-size    : .76rem;
  letter-spacing: .08em;
  margin-bottom: var(--sp-md);
}

.skill-list li {
  font-size   : .88rem;
  color       : var(--text-2);
  padding     : 7px 0;
  border-bottom: 1px solid var(--border-2);
  transition  : color var(--dur-fast), padding-left var(--dur-fast);
}

.skill-list li:hover        { color: var(--accent); padding-left: 4px; }
.skill-list li:last-child   { border-bottom: none; }

/* ── 10. RESEARCH ─────────────────────────────────────── */
.research { position: relative; overflow: hidden; }
.research > .container { position: relative; z-index: 1; }

/* Grid: featured card spans full width, then 2-col below */
.research-grid {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : var(--sp-xl);
}

.r-card--featured {
  grid-column: 1 / -1;           /* full width */
  display    : grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

@media (max-width: 900px) {
  .r-card--featured { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .research-grid     { grid-template-columns: 1fr; }
  .r-card--featured  { grid-column: auto; }
}

/* Base card */
.r-card {
  background   : var(--bg-surf);
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow     : hidden;
  display      : flex;
  flex-direction: column;
  transition   :
    transform    var(--dur-med) var(--ease-out),
    box-shadow   var(--dur-med) var(--ease-out),
    border-color var(--dur-med);
}

.r-card:hover {
  transform   : translateY(-6px);
  box-shadow  : 0 24px 64px var(--shadow);
  border-color: var(--accent);
}

/* Featured card doesn't lift — it glows */
.r-card--featured:hover {
  transform   : none;
  box-shadow  : 0 0 0 1px var(--accent), 0 32px 80px var(--shadow);
  border-color: var(--accent);
}

/* ── Video (featured card left panel) ── */
.r-card-video-wrap {
  position  : relative;
  min-height: 320px;
  background: #000;
  overflow  : hidden;
  flex-shrink: 0;
}

.r-video {
  width    : 100%;
  height   : 100%;
  object-fit: cover;
  display  : block;
  opacity  : .9;
  transition: opacity .4s;
}

.r-card--featured:hover .r-video { opacity: 1; }

/* "● Live" badge overlay */
.r-video-overlay {
  position  : absolute;
  bottom    : 14px;
  left      : 14px;
  background: rgba(0,0,0,.62);
  border    : 1px solid var(--accent);
  border-radius: var(--r-pill);
  padding   : 4px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.r-video-label {
  color        : var(--accent);
  font-size    : .7rem;
  letter-spacing: .1em;
}

/* ── Standard image panel ── */
.r-card-img {
  height    : 210px;
  overflow  : hidden;
  background: var(--bg-surf-2);
  flex-shrink: 0;
  position  : relative;
}

.r-img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  transition: transform .55s var(--ease-out);
}

.r-card:hover .r-img { transform: scale(1.06); }

/* ── Styled placeholder (for cards without images) ── */
.r-img-placeholder {
  width          : 100%;
  height         : 100%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : var(--text-3);
  font-size      : .72rem;
  letter-spacing : .12em;
  border-bottom  : 1px solid var(--border);
}

.r-img-placeholder--styled {
  flex-direction: column;
  gap           : var(--sp-md);
  background    : linear-gradient(135deg, var(--bg-surf-2) 0%, var(--accent-glow2) 100%);
}

.r-placeholder-icon {
  color  : var(--accent);
  opacity: .6;
}

/* ══════════════════════════════════════
   MICROSCOPY SLIDESHOW (RNS card)
══════════════════════════════════════ */
.r-slideshow {
  position  : relative;
  height    : 210px;
  overflow  : hidden;
  background: #000;
}

/* Each slide stacks absolutely, fades in/out */
.r-slide {
  position  : absolute;
  inset     : 0;
  opacity   : 0;
  transition: opacity 1s ease-in-out;
}

.r-slide--active { opacity: 1; }

.r-slide img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
}

/* Caption bar at bottom of each slide */
.r-slide-caption {
  position  : absolute;
  bottom    : 0;
  left      : 0;
  right     : 0;
  padding   : 6px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color     : rgba(255,255,255,.82);
  font-size : .68rem;
  letter-spacing: .1em;
}

/* Dot indicators */
.r-slide-dots {
  position       : absolute;
  bottom         : 10px;
  right          : 12px;
  display        : flex;
  gap            : 5px;
  z-index        : 2;
}

.r-slide-dot {
  width        : 6px; height: 6px;
  border-radius: 50%;
  background   : rgba(255,255,255,.35);
  transition   : background .4s, transform .4s;
}

.r-slide-dot--active {
  background: var(--accent);
  transform : scale(1.3);
}

/* ── Card body ── */
.r-card-body { padding: var(--sp-xl); display: flex; flex-direction: column; flex: 1; }

.r-tags {
  display      : flex;
  flex-wrap    : wrap;
  gap          : var(--sp-xs);
  margin-bottom: var(--sp-md);
}

.r-tag {
  font-family  : var(--f-mono);
  font-size    : .68rem;
  padding      : 3px 10px;
  border-radius: var(--r-pill);
  background   : var(--accent-glow2);
  color        : var(--accent);
  border       : 1px solid rgba(94,234,212,.18);
  letter-spacing: .05em;
}

/* "Current Work" primary tag */
.r-tag--primary {
  background: var(--accent);
  color     : var(--bg);
  border-color: var(--accent);
  font-weight : 500;
}

[data-theme="light"] .r-tag { border-color: rgba(13,148,136,.2); }

.r-title {
  font-family  : var(--f-display);
  font-size    : var(--t-h3);
  font-weight  : 700;
  line-height  : 1.3;
  margin-bottom: var(--sp-md);
  color        : var(--text);
}

.r-desc {
  font-size    : .88rem;
  color        : var(--text-2);
  line-height  : 1.75;
  margin-bottom: var(--sp-lg);
  flex         : 1;
}

.r-meta { font-size: .72rem; color: var(--text-3); margin-top: auto; }

/* ── 11. PUBLICATIONS ─────────────────────────────────── */
.publications { background: var(--bg-surf); }

.orcid-block {
  display      : flex;
  gap          : var(--sp-xl);
  align-items  : center;
  padding      : var(--sp-xl) var(--sp-2xl);
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  background   : var(--bg-surf-2);
  margin-bottom: var(--sp-2xl);
}

@media (max-width: 600px) {
  .orcid-block { flex-direction: column; padding: var(--sp-xl); }
}

.orcid-icon { flex-shrink: 0; }

.orcid-text p {
  color        : var(--text-2);
  margin-bottom: var(--sp-md);
  font-size    : .96rem;
  line-height  : 1.7;
}

.orcid-text strong { color: var(--text); }

.pub-notice {
  color        : var(--text-3);
  font-size    : .76rem;
  letter-spacing: .06em;
  padding      : var(--sp-xl);
  border       : 1px dashed var(--border);
  border-radius: var(--r-md);
}

/* ── Publication entries ── */
.pub-entry {
  display      : flex;
  gap          : var(--sp-xl);
  align-items  : flex-start;
  padding      : var(--sp-xl);
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  background   : var(--bg-surf);
  margin-bottom: var(--sp-md);
  transition   : border-color var(--dur-fast), background var(--dur-fast);
}
.pub-entry:hover {
  border-color : var(--accent);
  background   : var(--bg-surf-2);
}
.pub-number {
  font-size    : 1.6rem;
  font-weight  : 700;
  color        : var(--accent);
  opacity      : 0.5;
  flex-shrink  : 0;
  line-height  : 1;
  padding-top  : 2px;
  min-width    : 2.2rem;
}
.pub-content { flex: 1; }
.pub-authors {
  font-size    : .88rem;
  color        : var(--text-2);
  line-height  : 1.6;
  margin-bottom: var(--sp-sm);
}
.pub-authors strong { color: var(--text); }
.pub-title {
  font-size    : 1rem;
  font-weight  : 600;
  color        : var(--text);
  line-height  : 1.55;
  margin-bottom: var(--sp-sm);
}
.pub-journal {
  font-size    : .88rem;
  color        : var(--text-2);
}
.pub-status {
  color        : var(--accent);
  font-size    : .82rem;
  font-family  : var(--f-mono);
}
.pub-status--software {
  color        : #a78bfa;
}
.pub-doi {
  color        : var(--accent);
  font-size    : .82rem;
  font-family  : var(--f-mono);
  text-decoration: none;
  transition   : opacity var(--dur-fast);
}
.pub-doi:hover { opacity: 0.75; text-decoration: underline; }

@media (max-width: 600px) {
  .pub-entry  { flex-direction: column; gap: var(--sp-sm); }
  .pub-number { font-size: 1.2rem; }
}

/* ── 12. JOURNEY / TIMELINE ───────────────────────────── */

/* Section gets its height set dynamically by JS (viewport + scroll travel) */
/* ── Timeline / Journey — vertical alternating ── */
.journey { padding: var(--sp-3xl) 0; position: relative; overflow: hidden; }

.tl-track {
  position  : relative;
  z-index   : 1;
  max-width : 960px;
  margin    : var(--sp-2xl) auto 0;
  padding   : 0 var(--gutter) var(--sp-3xl);
}

.journey > .container {
  position: relative;
  z-index : 1;
}

/* Vertical center line */
.tl-track::before {
  content   : '';
  position  : absolute;
  top       : 0;
  bottom    : 0;
  left      : 50%;
  width     : 1px;
  transform : translateX(-50%);
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--border) 4%,
    var(--border) 96%,
    transparent 100%);
}

/* 3-column grid per entry: card | dot+year | card */
.tl-item {
  display              : grid;
  grid-template-columns: 1fr 80px 1fr;
  grid-template-rows   : auto auto;
  align-items          : start;
  margin-bottom        : var(--sp-2xl);
  min-width            : unset;
  max-width            : unset;
  padding              : 0;
  position             : relative;
}

/* Dot: centre column, row 1 */
.tl-dot {
  grid-column  : 2;
  grid-row     : 1;
  justify-self : center;
  align-self   : start;
  margin-top   : 1rem;
  position     : relative;
  top          : auto;
  left         : auto;
  width        : 14px;
  height       : 14px;
  background   : var(--bg-surf);
  border       : 2px solid var(--border);
  border-radius: 50%;
  z-index      : 1;
  transition   : border-color var(--dur-med), background var(--dur-med);
}

.tl-item:hover .tl-dot { border-color: var(--accent); }

.tl-dot--active {
  border-color: var(--accent) !important;
  background  : var(--accent) !important;
  box-shadow  : 0 0 0 4px var(--accent-glow);
  animation   : dotPulse 2.4s var(--ease-in-out) infinite;
}

@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 4px var(--accent-glow); }
  50%     { box-shadow: 0 0 0 12px rgba(94,234,212,0); }
}

/* Year: centre column, row 2 */
.tl-year {
  grid-column   : 2;
  grid-row      : 2;
  justify-self  : center;
  text-align    : center;
  font-size     : .9rem;
  font-weight   : 700;
  font-family   : var(--f-display);
  color         : var(--accent);
  letter-spacing: .06em;
  margin-top    : 8px;
  position      : relative;
  top           : auto;
  left          : auto;
}

/* Animated center line fill */
.tl-line-fill {
  position        : fixed;
  top             : 0;
  width           : 2px;
  height          : 50vh;
  background      : linear-gradient(to bottom, transparent 0%, var(--accent) 70%, var(--accent) 100%);
  pointer-events  : none;
  z-index         : 10;
  opacity         : 0;
  transition      : opacity 0.3s ease, left 0.05s linear;
  box-shadow      : 0 0 8px var(--accent);
}

/* Odd items: card in left column */
.tl-item:nth-child(odd) > .tl-card {
  grid-column : 1;
  grid-row    : 1 / span 2;
  margin-right: 2rem;
  margin-left : 0;
}

/* Even items: card in right column */
.tl-item:nth-child(even) > .tl-card {
  grid-column : 3;
  grid-row    : 1 / span 2;
  margin-left : 2rem;
  margin-right: 0;
}

.tl-card {
  padding      : var(--sp-lg);
  border       : 1px solid var(--border);
  border-radius: var(--r-md);
  background   : var(--bg-surf);
  opacity      : 0;
  transition   : border-color var(--dur-fast), opacity 0.55s ease, transform 0.55s ease;
}

.tl-item:nth-child(odd)  > .tl-card { transform: translateX(-30px); }
.tl-item:nth-child(even) > .tl-card { transform: translateX( 30px); }
.tl-item.tl-visible > .tl-card      { opacity: 1; transform: translateX(0); }

.tl-card--active {
  border-color: var(--accent) !important;
  background  : var(--accent-glow2) !important;
}

.tl-card--achievement {
  border-color: var(--accent);
  border-width : 1px;
  border-style : dashed;
  background   : var(--accent-glow2);
}

.tl-card h3 {
  font-family  : var(--f-display);
  font-size    : .95rem;
  font-weight  : 700;
  margin-bottom: var(--sp-sm);
  color        : var(--text);
}

.tl-card p { font-size: .82rem; color: var(--text-2); line-height: 1.65; }

.tl-badge {
  display      : inline-block;
  margin-top   : var(--sp-sm);
  font-size    : .68rem;
  color        : var(--accent);
  letter-spacing: .08em;
  padding      : 3px 10px;
  border       : 1px solid var(--accent);
  border-radius: var(--r-pill);
}

/* Mobile — single column, dots on left edge */
@media (max-width: 768px) {
  /* Line runs through dot centre (col-1 is 44px, centre = 22px) */
  .tl-track::before {
    left     : 22px;
    transform: none;
  }

  .tl-item {
    grid-template-columns: 44px 1fr;
    grid-template-rows   : auto auto 1fr;
    margin-bottom        : var(--sp-xl);
  }

  /* Dot centred inside its 44px column */
  .tl-dot {
    grid-column : 1;
    grid-row    : 1;
    margin-top  : 0;
    justify-self: center;
  }

  /* Year below dot, centred */
  .tl-year {
    grid-column : 1;
    grid-row    : 2;
    writing-mode: vertical-rl;
    transform   : rotate(180deg);
    font-size   : .6rem;
    margin-top  : 4px;
    justify-self: center;
  }

  .tl-item:nth-child(odd)  > .tl-card,
  .tl-item:nth-child(even) > .tl-card {
    grid-column: 2;
    grid-row   : 1 / span 3;
    margin-left: 1rem;
    margin-right: 0;
  }

  .tl-item:nth-child(odd)  > .tl-card { transform: translateX(20px); }
  .tl-item:nth-child(even) > .tl-card { transform: translateX(20px); }
}

/* ── 13. CONTACT ──────────────────────────────────────── */
.contact { background: var(--bg-surf); }

.contact-intro {
  max-width    : 580px;
  color        : var(--text-2);
  font-size    : 1rem;
  line-height  : 1.82;
  margin-bottom: var(--sp-2xl);
}

.contact-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap                  : var(--sp-lg);
  margin-bottom        : var(--sp-2xl);
}

.c-card {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : var(--sp-sm);
  padding        : var(--sp-xl) var(--sp-lg);
  border         : 1px solid var(--border);
  border-radius  : var(--r-lg);
  background     : var(--bg-surf-2);
  transition     : all var(--dur-med) var(--ease-out);
  text-align     : center;
}

.c-card:hover {
  border-color: var(--accent);
  transform   : translateY(-5px);
  box-shadow  : 0 16px 40px var(--shadow);
}

.c-card-icon {
  width        : 48px; height: 48px;
  border-radius: 50%;
  background   : var(--accent-glow2);
  border       : 1px solid var(--accent-glow);
  display      : flex;
  align-items  : center;
  justify-content: center;
  color        : var(--accent);
  transition   : background var(--dur-fast), color var(--dur-fast);
}

.c-card:hover .c-card-icon { background: var(--accent); color: var(--bg); }

.c-card-label {
  font-family: var(--f-display);
  font-size  : .9rem;
  font-weight: 600;
  color      : var(--text);
  transition : color var(--dur-fast);
}

.c-card:hover .c-card-label { color: var(--accent); }

.c-card-sub { font-size: .68rem; color: var(--text-3); letter-spacing: .04em; }

.contact-affil {
  color        : var(--text-3);
  font-size    : .76rem;
  letter-spacing: .06em;
  padding-top  : var(--sp-xl);
  border-top   : 1px solid var(--border);
}

/* ── 14. WHERE CAN YOU FIND ME ────────────────────────── */
.reach-section { padding: var(--sp-3xl) 0; }

.reach-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : var(--sp-lg);
  margin-top           : var(--sp-2xl);
}

.reach-card {
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow     : hidden;
  background   : var(--bg-surf);
  cursor       : pointer;
  transition   :
    border-color var(--dur-med),
    box-shadow   var(--dur-med),
    transform    var(--dur-med);
}

.reach-card:hover {
  border-color: var(--accent);
  box-shadow  : 0 8px 32px var(--accent-glow);
  transform   : translateY(-5px);
}

.reach-map-wrap {
  position: relative;
  height  : 215px;
  overflow: hidden;
}

.reach-map { width: 100%; height: 100%; }

/* Leaflet attribution cleanup */
.reach-map .leaflet-control-attribution { display: none; }

/* Gradient fade at bottom of map into card */
.reach-map-overlay {
  position      : absolute;
  inset         : 0;
  background    : linear-gradient(to bottom, transparent 50%, var(--bg-surf) 100%);
  pointer-events: none;
  z-index       : 400;
}

.reach-card-body {
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
}

.reach-location-row {
  display      : flex;
  align-items  : center;
  gap          : var(--sp-sm);
  margin-bottom: 10px;
}

/* Glowing teal dot */
.reach-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : var(--accent);
  box-shadow   : 0 0 8px var(--accent);
  flex-shrink  : 0;
}

.reach-city-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size  : 1rem;
  color      : var(--text);
}

.reach-reveal-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  background   : none;
  border       : 1px solid var(--border);
  color        : var(--text-2);
  padding      : 6px 14px;
  border-radius: var(--r-pill);
  font-size    : .76rem;
  cursor       : pointer;
  font-family  : var(--f-body);
  margin-bottom: var(--sp-sm);
  transition   :
    border-color var(--dur-fast),
    color        var(--dur-fast),
    background   var(--dur-fast);
}

.reach-reveal-btn:hover,
.reach-card.is-open .reach-reveal-btn {
  border-color: var(--accent);
  color       : var(--accent);
  background  : var(--accent-glow);
}

.reach-arrow {
  display   : inline-block;
  transition: transform var(--dur-fast);
}
.reach-card.is-open .reach-arrow { transform: rotate(90deg); }

.reach-details-panel {
  max-height: 0;
  overflow  : hidden;
  opacity   : 0;
  transition:
    max-height .42s var(--ease-out),
    opacity    .35s ease;
}
.reach-card.is-open .reach-details-panel {
  max-height: 280px;
  opacity   : 1;
}

.reach-inst-name {
  font-family  : var(--f-display);
  font-weight  : 700;
  font-size    : .92rem;
  color        : var(--accent);
  margin-bottom: 2px;
}

.reach-inst-sub {
  font-size  : .76rem;
  color      : var(--text-2);
  line-height: 1.75;
}

.reach-directions {
  display        : inline-flex;
  align-items    : center;
  gap            : 4px;
  font-size      : .72rem;
  color          : var(--text-3);
  text-decoration: none;
  margin-top     : var(--sp-xs);
  transition     : color var(--dur-fast);
}
.reach-directions:hover { color: var(--accent); }

/* ── "Here now" badge on current card ── */
.reach-now-badge {
  margin-left  : auto;
  font-size    : .65rem;
  font-weight  : 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color        : #22c55e;
  border       : 1px solid #22c55e55;
  padding      : 2px 8px;
  border-radius: var(--r-pill);
  background   : rgba(34,197,94,.08);
}

/* ── Green glow — present ── */
.reach-card.is-present {
  border-color: #22c55e !important;
  box-shadow  : 0 0 0 1px #22c55e44, 0 12px 36px rgba(34,197,94,.25) !important;
}
.reach-card.is-present .reach-dot--present {
  background : #22c55e;
  box-shadow : 0 0 10px #22c55e;
}

/* ── Red glow — absent ── */
.reach-card.is-absent {
  border-color: #ef4444 !important;
  box-shadow  : 0 0 0 1px #ef444444, 0 12px 36px rgba(239,68,68,.2) !important;
}

/* ── Status line inside panel ── */
.reach-status {
  font-weight  : 600;
  font-size    : .82rem;
  margin-bottom: 6px;
}
.reach-status--present { color: #22c55e; }
.reach-status--absent  { color: #ef4444; }

/* ── Hint line under heading ── */
.reach-hint {
  font-size  : .88rem;
  color      : var(--text-3);
  margin-top : -.8rem;
  margin-bottom: 0;
}

/* Pulsing marker animation */
@keyframes reach-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(94,234,212,.25), 0 0 16px rgba(94,234,212,.5); }
  50%       { box-shadow: 0 0 0 8px rgba(94,234,212,.1),  0 0 24px rgba(94,234,212,.8); }
}

@media (max-width: 900px) {
  .reach-grid { grid-template-columns: 1fr; }
}

/* ── 15. FOOTER ───────────────────────────────────────── */
.footer {
  padding   : var(--sp-xl) 0;
  border-top: 1px solid var(--border);
}

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

.footer-copy,
.footer-stack { font-size: .72rem; color: var(--text-3); letter-spacing: .05em; }

/* ── 15. REVEAL ANIMATIONS ────────────────────────────── */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity   : 0;
  will-change: opacity, transform;
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal-up    { transform: translateY(44px);  }
.reveal-left  { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px);  }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity  : 1;
  transform: translate(0, 0);
}

/* ── 16. UTILITIES ────────────────────────────────────── */
::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline       : 2px solid var(--accent);
  outline-offset: 3px;
  border-radius : var(--r-sm);
}

@media (max-width: 480px) {
  .about-photo-wrap { width: 100%; max-width: 360px; }
  .orcid-block      { gap: var(--sp-md); }

}

/* ── 17. DEGREE CARD — hover preview + click popup ─────── */

/* Small hint label inside the card */
.tl-degree-hint {
  display    : block;
  font-size  : 0.68rem;
  color      : var(--accent);
  opacity    : 0.55;
  margin-top : var(--sp-sm);
  letter-spacing: 0.04em;
  transition : opacity var(--dur-fast);
}
.tl-card--degree:hover .tl-degree-hint { opacity: 0.9; }

/* Hover-preview image strip — slides down from bottom of card */
.tl-degree-preview {
  overflow   : hidden;
  max-height : 0;
  opacity    : 0;
  margin-top : 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition : max-height 0.4s var(--ease-out),
               opacity    0.35s ease,
               margin-top 0.4s var(--ease-out);
  pointer-events: none;
}
.tl-degree-preview img {
  width        : 100%;
  display      : block;
  border-radius: var(--r-sm);
  opacity      : 0.6;            /* 60% transparent */
  object-fit   : cover;
}
.tl-card--degree:hover .tl-degree-preview {
  max-height    : 260px;
  opacity       : 1;
  margin-top    : var(--sp-md);
  pointer-events: auto;
}

/* Make the degree card look interactive */
.tl-card--degree {
  cursor  : pointer;
  position: relative;
}
.tl-card--degree::after {
  content       : '';
  position      : absolute;
  inset         : 0;
  border-radius : var(--r-md);
  border        : 1px solid var(--accent);
  opacity       : 0;
  transition    : opacity var(--dur-fast);
  pointer-events: none;
}
.tl-card--degree:hover::after { opacity: 0.45; }

/* ── Degree modal (popup) ── */
.degree-modal {
  position  : fixed;
  inset     : 0;
  z-index   : 20000;
  display   : flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity   : 0;
  transition: opacity 0.28s ease;
}
.degree-modal.is-open {
  pointer-events: auto;
  opacity       : 1;
}

.degree-modal__backdrop {
  position  : absolute;
  inset     : 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  cursor    : pointer;
}

.degree-modal__box {
  position     : relative;
  z-index      : 1;
  max-width    : min(90vw, 680px);
  max-height   : 90vh;
  border-radius: var(--r-lg);
  overflow     : hidden;
  box-shadow   : 0 24px 80px rgba(0,0,0,0.6),
                 0 0 0 1px var(--accent-glow);
  transform    : scale(0.88);
  transition   : transform 0.3s var(--ease-out);
}
.degree-modal.is-open .degree-modal__box {
  transform: scale(1);
}

.degree-modal__img {
  display : block;
  width   : 100%;
  height  : auto;
  max-height: 88vh;
  object-fit: contain;
}

.degree-modal__close {
  position  : absolute;
  top       : 10px;
  right     : 12px;
  background: rgba(0,0,0,0.55);
  border    : 1px solid rgba(255,255,255,0.18);
  color     : #fff;
  font-size : 1.4rem;
  line-height: 1;
  padding   : 4px 10px 6px;
  border-radius: var(--r-pill);
  cursor    : pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  z-index   : 2;
}
.degree-modal__close:hover {
  background: var(--accent);
  color     : var(--bg);
  transform : scale(1.1);
}

/* ── 18. TIMELINE GALLERY CARDS — hover preview ────────── */

/* The preview image strip below card content */
.tl-img-preview {
  overflow     : hidden;
  max-height   : 0;
  opacity      : 0;
  margin-top   : 0;
  border-radius: var(--r-sm);
  transition   : max-height 0.42s var(--ease-out),
                 opacity    0.35s ease,
                 margin-top 0.42s var(--ease-out);
  pointer-events: none;
}
.tl-img-preview img {
  width        : 100%;
  height       : 200px;
  display      : block;
  object-fit   : cover;
  aspect-ratio : 3 / 2;
  opacity      : 0;
  border-radius: var(--r-sm);
  transition   : opacity 0.5s ease 0.1s;
}
.tl-card--gallery:hover .tl-img-preview img { opacity: 0.85; }
.tl-card--gallery {
  cursor  : pointer;
  position: relative;
}
.tl-card--gallery:hover .tl-img-preview {
  max-height    : 220px;
  opacity       : 1;
  margin-top    : var(--sp-md);
  pointer-events: auto;
}
/* Subtle accent glow on hover */
.tl-card--gallery::after {
  content       : '';
  position      : absolute;
  inset         : 0;
  border-radius : var(--r-md);
  border        : 1px solid var(--accent);
  opacity       : 0;
  transition    : opacity var(--dur-fast);
  pointer-events: none;
}
.tl-card--gallery:hover::after { opacity: 0.35; }

/* Gallery modal box */
.degree-modal__box--gallery {
  max-width    : min(94vw, 900px);
  width        : min(94vw, 900px);
  background   : #000;
  padding      : 0;
  overflow     : hidden;
  display      : flex;
  flex-direction: column;
  align-items  : center;
}
.gallery-modal__img-wrap {
  width     : 100%;
  max-height: 82vh;
  display   : flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow  : hidden;
}
.gallery-modal__img {
  max-width : 100%;
  max-height: 82vh;
  object-fit: contain;
  display   : block;
}
.gallery-modal__nav {
  display    : flex;
  align-items: center;
  gap        : var(--sp-md);
  padding    : var(--sp-sm) var(--sp-lg);
  background : rgba(0,0,0,0.7);
  width      : 100%;
  justify-content: center;
}
.gallery-modal__nav.hidden { display: none; }
.gallery-modal__arrow {
  background   : rgba(255,255,255,0.12);
  border       : 1px solid rgba(255,255,255,0.22);
  color        : #fff;
  font-size    : 1.1rem;
  padding      : 4px 14px;
  border-radius: var(--r-pill);
  cursor       : pointer;
  transition   : background var(--dur-fast);
}
.gallery-modal__arrow:hover { background: var(--accent); color: var(--bg); }
.gallery-modal__count {
  font-size: 0.78rem;
  color    : rgba(255,255,255,0.7);
  min-width: 48px;
  text-align: center;
}

/* ── RESEARCH CARD — image with hover overlay ────────────── */
.r-card-img--hoverable {
  position  : relative;
  overflow  : hidden;
  cursor    : pointer;
}
.r-card-photo {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
  transition: transform 0.5s var(--ease-out), opacity 0.3s ease;
}
.r-card-img--hoverable:hover .r-card-photo {
  transform: scale(1.04);
  opacity  : 0.75;
}
.r-card-img-overlay {
  position  : absolute;
  inset     : 0;
  background: rgba(0,0,0,0);
  transition: background var(--dur-med);
  pointer-events: none;
}
.r-card-img--hoverable:hover .r-card-img-overlay {
  background: rgba(0,0,0,0.18);
}

/* ── 19. VIDEO EXPAND OVERLAY ─────────────────────────── */
.r-video-overlay--expand {
  position  : absolute;
  inset     : 0;
  z-index   : 5;
  display   : flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding   : var(--sp-md);
  background: transparent;
  cursor    : pointer;
  transition: background var(--dur-fast);
}
.r-video-overlay--expand:hover {
  background: rgba(0,0,0,0.25);
}
.r-video-expand-hint {
  font-size : 0.7rem;
  color     : #fff;
  background: rgba(0,0,0,0.55);
  border    : 1px solid rgba(255,255,255,0.25);
  padding   : 3px 10px;
  border-radius: var(--r-pill);
  opacity   : 0;
  transform : translateY(4px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  pointer-events: none;
}
.r-video-overlay--expand:hover .r-video-expand-hint {
  opacity  : 1;
  transform: translateY(0);
}

/* Video modal iframe box */
.degree-modal__box--video {
  max-width : min(92vw, 960px);
  aspect-ratio: 16/9;
  background: #000;
  padding   : 0;
  overflow  : hidden;
}
.video-modal__iframe {
  width : 100%;
  height: 100%;
  display: block;
  border : 0;
}

/* ── 19. LAB MODAL ─────────────────────────────────────── */
.tl-lab-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  margin-top   : var(--sp-sm);
  font-family  : var(--f-mono);
  font-size    : 0.7rem;
  color        : var(--accent);
  background   : transparent;
  border       : 1px solid var(--accent);
  border-radius: var(--r-pill);
  padding      : 3px 10px;
  cursor       : pointer;
  transition   : background var(--dur-fast), color var(--dur-fast);
}
.tl-lab-btn:hover {
  background: var(--accent);
  color     : var(--bg);
}

.tl-advisor {
  font-size  : 0.78rem;
  color      : var(--text-2);
  margin-top : var(--sp-xs);
  font-style : italic;
}

/* Institution logo strip */
.tl-inst-logo {
  margin     : var(--sp-sm) 0 var(--sp-xs);
  display    : flex;
  align-items: center;
}
.tl-logo-img {
  height    : 28px;
  width     : auto;
  max-width : 120px;
  object-fit: contain;
  opacity   : 0.75;
  filter    : grayscale(20%);
  transition: opacity var(--dur-fast), filter var(--dur-fast);
}
.tl-card:hover .tl-logo-img {
  opacity: 1;
  filter : none;
}

/* "Coming Soon" research tag */
.r-tag--soon {
  background: rgba(234,179,8,.15);
  color     : #eab308;
  border    : 1px solid rgba(234,179,8,.3);
}

/* ── BoltzYML card ── */
.boltzy-slideshow { background: #fff; }
.boltzy-slide-bg  { background: #fff; }
.boltzy-slide-bg img {
  width           : 100%;
  height          : 100%;
  object-fit      : cover;
  object-position : center top;
  display         : block;
}
.boltzy-header {
  margin-bottom: var(--sp-sm);
}
.boltzy-logo {
  height    : 38px;
  width     : auto;
  object-fit: contain;
  display   : block;
}
[data-theme="dark"] .boltzy-logo,
[data-theme="dark"] .boltzy-banner-wrap {
  filter: none;
}
.cisgs-logo {
  height    : 56px;
}
.boltzy-links {
  display    : flex;
  flex-wrap  : wrap;
  gap        : var(--sp-sm);
  margin-top : var(--sp-md);
}
.boltzy-link {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  font-family    : var(--f-mono);
  font-size      : .72rem;
  font-weight    : 600;
  letter-spacing : .03em;
  padding        : 5px 12px;
  border-radius  : var(--r-pill);
  border         : 1px solid transparent;
  text-decoration: none;
  transition     : background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.boltzy-link--webapp {
  background  : rgba(94,234,212,.12);
  color       : var(--accent);
  border-color: rgba(94,234,212,.3);
}
.boltzy-link--webapp:hover {
  background  : rgba(94,234,212,.22);
  border-color: var(--accent);
}
.boltzy-link--github {
  background  : rgba(226,232,240,.08);
  color       : var(--text);
  border-color: var(--border);
}
.boltzy-link--github:hover {
  background  : rgba(226,232,240,.15);
  border-color: var(--text-2);
}
.boltzy-link--pypi {
  background  : rgba(37,99,235,.12);
  color       : #60a5fa;
  border-color: rgba(37,99,235,.3);
}
.boltzy-link--pypi:hover {
  background  : rgba(37,99,235,.22);
  border-color: #60a5fa;
}
.boltzy-link--doi {
  background  : rgba(60,126,188,.12);
  color       : #93c5fd;
  border-color: rgba(60,126,188,.3);
}
.boltzy-link--doi:hover {
  background  : rgba(60,126,188,.22);
  border-color: #93c5fd;
}
.tl-inst {
  font-family: var(--f-mono);
  font-size  : 0.7rem;
  color      : var(--accent);
  opacity    : 0.7;
  margin-bottom: var(--sp-xs);
}

/* Lab modal box */
.degree-modal__box--lab {
  max-width   : min(92vw, 860px);
  width       : min(92vw, 860px);
  display     : flex;
  flex-direction: column;
  gap         : var(--sp-md);
  padding     : var(--sp-xl) var(--sp-xl) var(--sp-lg);
  background  : var(--bg-surf);
  max-height  : 88vh;
  overflow    : hidden;
}
.lab-modal__header {
  flex-shrink : 0;
  display     : flex;
  align-items : center;
  gap         : var(--sp-md);
}

.lab-modal__logo {
  height      : 52px;
  width       : auto;
  max-width   : 100px;
  object-fit  : contain;
  flex-shrink : 0;
  border-radius: var(--r-sm);
  background  : var(--bg-surf-2);
  padding     : 4px;
  animation   : fadeIn 0.35s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1);   }
}
.lab-modal__name   {
  font-size  : 1.1rem;
  font-weight: 600;
  color      : var(--text);
  margin     : 0 0 4px;
}
.lab-modal__advisor {
  font-size : 0.75rem;
  color     : var(--text-2);
  margin    : 0;
}
.lab-modal__frame-wrap {
  position   : relative;
  flex       : 1;
  min-height : 0;
  border-radius: var(--r-md);
  overflow   : hidden;
  background : var(--bg);
  border     : 1px solid var(--bg-surf-2);
}
.lab-modal__iframe {
  width  : 100%;
  height : 100%;
  min-height: 380px;
  border : 0;
  display: block;
}
.lab-modal__fallback {
  position    : absolute;
  inset       : 0;
  display     : none;
  align-items : center;
  justify-content: center;
  background  : var(--bg);
  color       : var(--text-3);
  font-size   : 0.8rem;
  text-align  : center;
  padding     : var(--sp-xl);
}
.lab-modal__fallback.visible {
  display: flex;
}
.lab-modal__link {
  flex-shrink: 0;
  align-self : flex-start;
  margin-top : 0;
}

/* ── 20. SKILLS SECTION ────────────────────────────────── */
.skills-section {
  padding: var(--sp-3xl) 0;
  background: var(--bg-surf);
}
[data-theme="light"] .skills-section { background: #f0faf9; }

.sk-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap                  : var(--sp-xl);
  margin-top           : var(--sp-2xl);
}

.sk-category {
  background   : var(--bg);
  border       : 1px solid var(--bg-surf-2);
  border-radius: var(--r-lg);
  padding      : var(--sp-xl);
  transition   : border-color var(--dur-med);
}
[data-theme="light"] .sk-category {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}
.sk-category:hover {
  border-color: var(--accent);
}

.sk-cat-header {
  display    : flex;
  align-items: center;
  gap        : var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.sk-cat-header--mt { margin-top: var(--sp-xl); }
.sk-cat-icon {
  font-size  : 1.1rem;
  line-height: 1;
}
.sk-cat-title {
  font-size   : 0.78rem;
  font-weight : 500;
  color       : var(--accent);
  letter-spacing: 0.06em;
  margin      : 0;
}

.sk-tags {
  display  : flex;
  flex-wrap: wrap;
  gap      : var(--sp-sm);
}

.sk-tag {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  font-size    : 0.72rem;
  font-family  : var(--f-body);
  color        : var(--text-2);
  background   : var(--bg-surf);
  border       : 1px solid var(--bg-surf-2);
  border-radius: var(--r-pill);
  padding      : 3px 10px 4px;
  transition   : border-color var(--dur-fast), color var(--dur-fast);
}
[data-theme="light"] .sk-tag {
  background  : #f0faf9;
  border-color: rgba(0,0,0,0.1);
  color       : #334155;
}
.sk-tag:hover {
  border-color: var(--accent);
  color       : var(--accent);
}
.sk-tag--accent {
  border-color: var(--accent);
  color       : var(--accent);
  background  : var(--accent-glow);
}
.sk-tag--lang {
  gap         : 6px;
  padding-right: 8px;
}
.sk-tag-sub {
  font-size   : 0.62rem;
  opacity     : 0.6;
  font-family : var(--f-mono);
  border-left : 1px solid currentColor;
  padding-left: 6px;
}