/* ============================================================
   DR. JOOD AL ASWAD — SITE CSS v3
   Umvvelt-inspired: seafoam white body, dark neumorphic cards,
   glassmorphic hero, Nunito + Cormorant Garamond
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --serif:  'DM Serif Display', Georgia, serif;
  --sans:   'Nunito', system-ui, sans-serif;

  /* Page surface — seafoam white */
  --bg:       #f0f7f8;
  --bg-card:  #f8fcfd;   /* slightly lighter for card-on-bg use */

  /* Light blue neumorphic card */
  --card-bg:   #cfe8ed;
  --card-dark: #aac8d0;
  --card-lt:   #ffffff;

  /* Text on light background */
  --ink:     #111111;
  --ink-mid: #333333;
  --ink-lt:  #666666;

  /* Text on light blue cards */
  --card-text:  #111111;
  --card-muted: #333333;
  --card-label: #2a6070;

  /* Accents — keep your ocean palette */
  --teal:   #3a8baa;
  --teal-d: #2a6070;
  --cyan:   #7ee8ff;
  --gold:   #c8a020;    /* warmer gold on light bg */
  --gold-lt:#fff0a0;    /* light gold for dark cards */
  --coral:  #f5a8c0;

  /* Hero glass */
  --glass-bg:     rgba(255,255,255,0.45);
  --glass-border: rgba(58,139,170,0.22);

  --max-w: 1160px;
  --narrow: 720px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p { line-height:1.82; letter-spacing:0.01em; font-weight:400; }
a { color:inherit; text-decoration:none; }
img { display:block; }

/* ============================================================
   NAVIGATION
   ============================================================ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 3rem;
  background:rgba(240,247,248,0.92);
  backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(58,139,170,0.15);
}
.nav-name {
  font-family:var(--serif);
  font-size:0.95rem;
  color:var(--ink);
  letter-spacing:0.04em;
  font-weight:500;
}
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  font-size:0.66rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mid);
  font-weight:700;
  transition:color 0.22s;
  padding-bottom:2px;
  border-bottom:1.5px solid transparent;
}
.nav-links a:hover,
.nav-links a.active { color:var(--teal); border-bottom-color:var(--teal); }

.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:0.4rem; z-index:310;
}
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:all 0.3s; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:768px) {
  nav { padding:0.85rem 1.25rem; }
  .nav-toggle { display:flex; }
  .nav-links {
    display:none; position:fixed; top:0; left:0; right:0;
    padding:5rem 2rem 2rem;
    background:rgba(240,247,248,0.97);
    backdrop-filter:blur(24px);
    flex-direction:column; gap:0; z-index:299;
    border-bottom:1px solid rgba(58,139,170,0.2);
  }
  .nav-links.open { display:flex; }
  .nav-links li { border-bottom:1px solid rgba(58,139,170,0.12); }
  .nav-links a { display:block; padding:1rem 0.5rem; border-bottom:none; }
}

/* ============================================================
   HERO — LIGHT GLASSMORPHISM
   Bright gradient, bokeh teal orbs, white frosted panel
   ============================================================ */
.page-hero {
  min-height:100vh;
  position:relative;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  align-items:stretch;
  overflow:hidden;
  background:linear-gradient(150deg, #d4eef5 0%, #e8f6f8 35%, #f0f7f8 70%, #e2f0f4 100%);
}

.bokeh { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.bokeh-orb {
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:0;
  animation:bokehFloat ease-in-out infinite alternate;
}
.bokeh-orb:nth-child(1) {
  width:600px; height:600px; top:-10%; left:30%;
  background:radial-gradient(circle,rgba(58,139,170,0.28) 0%,transparent 70%);
  animation-duration:14s; animation-delay:0s;
}
.bokeh-orb:nth-child(2) {
  width:450px; height:450px; top:30%; left:-5%;
  background:radial-gradient(circle,rgba(76,161,175,0.22) 0%,transparent 70%);
  animation-duration:18s; animation-delay:-4s;
}
.bokeh-orb:nth-child(3) {
  width:500px; height:500px; top:35%; right:-8%;
  background:radial-gradient(circle,rgba(126,232,255,0.2) 0%,transparent 70%);
  animation-duration:22s; animation-delay:-8s;
}
.bokeh-orb:nth-child(4) {
  width:280px; height:280px; bottom:10%; left:55%;
  background:radial-gradient(circle,rgba(200,160,32,0.14) 0%,transparent 70%);
  animation-duration:16s; animation-delay:-2s;
}
@keyframes bokehFloat {
  from { opacity:0.7; transform:translate(0,0) scale(1); }
  to   { opacity:1;   transform:translate(var(--tx,30px),var(--ty,-20px)) scale(var(--ts,1.08)); }
}

/* Hero glass panel */
.hero-inner {
  position:relative; z-index:2;
  padding:8rem 4rem 4rem 5rem;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--glass-bg);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-right:1px solid var(--glass-border);
}
.hero-photo-col {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-self:stretch;
}
.portrait-large { flex:1; min-height:0; overflow:hidden; }
.portrait-large img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-affil {
  padding:1.2rem 1.5rem;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--glass-border);
}
.hero-affil-role { font-size:0.88rem; color:var(--teal); font-weight:600; letter-spacing:0.04em; }
.hero-affil-inst { font-size:0.78rem; color:var(--ink-mid); margin-top:0.2rem; }

/* Hero type — dark text on light glass */
.hero-eyebrow {
  font-size:0.66rem; letter-spacing:0.34em; text-transform:uppercase;
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:var(--teal); margin-bottom:1.1rem; display:block;
}
.hero-hi {
  font-family:var(--serif); font-size:1.05rem; font-weight:300;
  color:var(--ink-mid); margin-bottom:0.1rem; font-style:italic;
}
.hero-name {
  font-family:var(--serif);
  font-size:clamp(2.2rem,4.2vw,3.8rem);
  font-weight:300; line-height:0.95;
  color:var(--ink); margin-bottom:1rem;
}
.hero-name em { font-style:italic; color:var(--teal); }
.hero-tagline {
  font-family:var(--serif); font-size:clamp(0.9rem,1.3vw,1.05rem);
  font-style:italic; font-weight:300;
  color:var(--ink-mid); margin-bottom:1rem;
}
.hero-vision {
  font-size:clamp(0.9rem,1.2vw,1.02rem);
  line-height:1.82; color:var(--ink);
  font-weight:400; margin-bottom:1.5rem;
  max-width:680px;
}
.hero-vision strong { color:var(--teal); font-weight:700; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }

.hero-wave { position:absolute; bottom:0; left:0; right:0; pointer-events:none; z-index:3; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:none; }
}

@media (max-width:768px) {
  .page-hero { grid-template-columns:1fr; grid-template-rows:auto auto; min-height:auto; height:auto; }
  .hero-photo-col { order:1; height:55vw; max-height:340px; padding-top:4.5rem; }
  .hero-inner { order:2; padding:2.5rem 1.5rem 3rem; border-right:none; border-top:1px solid var(--glass-border); }
  .hero-name { font-size:clamp(2.2rem,10vw,3.2rem); }
}

/* Fish */
.fish { position:fixed; pointer-events:none; opacity:0; animation:swimRight linear infinite; z-index:1; }
.fish img { width:100%; height:auto; }
@keyframes swimRight {
  from { transform:translateX(-120px); opacity:0; }
  5%   { opacity:0.18; }
  95%  { opacity:0.18; }
  to   { transform:translateX(calc(100vw + 120px)); opacity:0; }
}

/* ============================================================
   SECTION INTRO — inner pages (light version)
   ============================================================ */
.section-intro {
  padding:7rem 3rem 4rem;
  background:linear-gradient(150deg,#c8e8f0 0%,#daf0f5 40%,#f0f7f8 100%);
  position:relative; overflow:hidden;
}
.section-intro .bokeh { position:absolute; inset:0; }
.section-intro-inner { max-width:var(--max-w); margin:0 auto; position:relative; z-index:2; }
.section-intro-inner .eyebrow { color:#1e6070; }
.section-intro h1 {
  font-family:var(--serif);
  font-size:clamp(2.2rem,4vw,3.8rem);
  font-weight:400; line-height:1;
  letter-spacing:-0.02em; color:var(--ink);
  margin-bottom:1.25rem;
}
.section-intro h1 em { font-style:italic; color:var(--teal); }
.section-intro p.lead {
  font-size:clamp(1rem,1.4vw,1.18rem);
  font-weight:400; line-height:1.85;
  color:var(--ink-mid); max-width:640px;
}

/* ============================================================
   CONTENT SECTIONS — light background
   ============================================================ */
.neu-section { background:var(--bg); padding:8rem 3rem; position:relative; }
.neu-inner  { max-width:var(--max-w); margin:0 auto; }
.neu-inner > div + div { margin-top:8rem; }
.neu-narrow { max-width:var(--narrow); margin:0 auto; }

/* Section headers on light background */
.eyebrow {
  font-size:0.66rem; letter-spacing:0.32em; text-transform:uppercase;
  font-weight:700; color:#1e6070;
  margin-bottom:1rem; display:block;
}
.section-headline {
  font-family:var(--serif);
  font-size:clamp(2rem,3.5vw,3.2rem);
  font-weight:400; line-height:1.02;
  letter-spacing:-0.02em; color:var(--ink);
  margin-bottom:1.5rem;
}
.section-headline em { font-style:italic; color:var(--teal); }
.section-lead {
  font-size:clamp(1rem,1.3vw,1.15rem);
  font-weight:400; line-height:1.88;
  color:var(--ink-mid);
  max-width:680px; margin-bottom:3rem;
}

/* ============================================================
   NEUMORPHIC CARDS — dark panels on light page
   Light comes from top-left; dark shadow bottom-right
   ============================================================ */
.neu-card {
  background:var(--card-bg);
  border-radius:20px;
  padding:2rem 2.25rem;
  box-shadow:7px 7px 16px var(--card-dark),-5px -5px 13px var(--card-lt);
  transition:box-shadow 0.32s ease, transform 0.32s ease;
}
.neu-card:hover {
  box-shadow:9px 9px 20px var(--card-dark),-6px -6px 16px var(--card-lt);
  transform:translateY(-2px);
}
.neu-card.accent-pink,.neu-card.accent-cyan,
.neu-card.accent-gold,.neu-card.accent-teal {
  box-shadow:7px 7px 16px var(--card-dark),-5px -5px 13px var(--card-lt);
}

/* Card grids */
.neu-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; }
.neu-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:880px) { .neu-grid-2,.neu-grid-3 { grid-template-columns:1fr; } }

/* Card internals */
.neu-card-num {
  font-family:var(--serif); font-size:2.4rem; font-weight:400;
  color:var(--teal-d); line-height:1; margin-bottom:0.75rem;
}
.neu-card h3,.neu-card h4 {
  font-family:var(--sans); font-size:1.15rem; font-weight:700;
  color:#111111; margin-bottom:0.6rem; line-height:1.25;
}
.neu-card p { font-size:1rem; line-height:1.88; color:#333333; font-weight:400; }
.neu-card p strong { color:#111111; font-weight:700; }
.neu-stat-num {
  font-family:var(--serif); font-size:clamp(2.8rem,4.5vw,4rem);
  font-weight:400; line-height:1; color:var(--teal-d);
  margin-bottom:0.85rem; letter-spacing:-0.02em;
}
.neu-stat-head { font-family:var(--sans); font-size:1.15rem; font-weight:700; color:#111111; margin-bottom:0.5rem; line-height:1.3; }
.neu-stat-body { font-size:1rem; line-height:1.78; color:#333333; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-solid {
  display:inline-block; padding:0.9rem 2.2rem;
  background:var(--teal); color:#ffffff;
  font-family:var(--sans); font-size:0.68rem;
  letter-spacing:0.2em; text-transform:uppercase;
  font-weight:700; border-radius:999px;
  transition:all 0.25s;
  box-shadow:0 4px 14px rgba(58,139,170,0.3);
}
.btn-solid:hover { background:var(--teal-d); transform:translateY(-2px); box-shadow:0 6px 20px rgba(58,139,170,0.4); }

.btn-ghost {
  display:inline-block; padding:0.88rem 2rem;
  background:transparent;
  border:1.5px solid var(--teal);
  color:var(--teal);
  font-family:var(--sans); font-size:0.68rem;
  letter-spacing:0.2em; text-transform:uppercase;
  font-weight:700; border-radius:999px; transition:all 0.25s;
}
.btn-ghost:hover { background:var(--teal); color:#ffffff; }

/* ============================================================
   PUBLICATION CARDS
   ============================================================ */
.pub-card {
  display:grid; grid-template-columns:52px 1fr; gap:1.5rem;
  align-items:start; padding:1.75rem 2rem;
  background:var(--card-bg);
  border-radius:16px;
  box-shadow:7px 7px 16px var(--card-dark),-5px -5px 13px var(--card-lt);
  margin-bottom:1.25rem; transition:box-shadow 0.28s,transform 0.28s;
  position:relative; overflow:hidden;
}
.pub-card::before {
  content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:3px; height:55%;
  border-radius:3px; opacity:0.65; transition:height 0.28s,opacity 0.28s;
}
.pub-card:nth-child(1)::before { background:#c07090; }
.pub-card:nth-child(2)::before { background:var(--teal); }
.pub-card:nth-child(3)::before { background:var(--gold); }
.pub-card:nth-child(4)::before { background:#4ca1af; }
.pub-card:nth-child(5)::before { background:#c07090; }
.pub-card:nth-child(6)::before { background:var(--gold); }
.pub-card:hover { transform:translateX(5px); box-shadow:9px 9px 20px var(--card-dark),-6px -6px 16px var(--card-lt); }
.pub-card:hover::before { height:75%; opacity:1; }
.pub-yr { font-family:var(--sans); font-size:1.05rem; font-weight:700; color:var(--teal-d); line-height:1.3; }
.pub-title { font-family:var(--sans); font-size:1.08rem; color:#111111; margin-bottom:0.3rem; line-height:1.45; font-weight:700; }
.pub-authors { font-size:0.93rem; color:#444444; margin-bottom:0.45rem; }
.pub-summary { font-size:0.97rem; color:#333333; line-height:1.82; font-weight:400; }
.pub-tags { display:flex; gap:0.45rem; flex-wrap:wrap; margin-top:0.75rem; }
.pub-tag {
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  padding:0.28rem 0.75rem;
  background:rgba(46,125,154,0.10); border:1px solid rgba(46,125,154,0.28);
  border-radius:999px; color:var(--teal-d); font-weight:700;
  text-decoration:none; transition:all 0.22s;
}
.pub-tag:hover { background:var(--teal); color:#fff; border-color:var(--teal); }

/* ============================================================
   RESEARCH TIMELINE — inline glowing line, no sticky sidebar
   ============================================================ */
.research-layout {
  display:block;
  position:relative;
  padding-left:3rem;
}

/* The continuous vertical line on the left */
.research-layout::before {
  content:'';
  position:absolute;
  left:0.9rem; top:0; bottom:0; width:3px;
  background:rgba(46,125,154,0.15);
  border-radius:3px;
}

/* Glowing fill — grows via JS as panels enter view */
.tl-fill {
  position:absolute;
  left:0.9rem; top:0; width:3px;
  height:0;
  background:linear-gradient(to bottom, #e87070, #3a8baa);
  border-radius:3px;
  box-shadow:0 0 8px rgba(232,112,112,0.6), 0 0 18px rgba(232,112,112,0.3);
  transition:height 0.4s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}

/* Each panel */
.rp-panel {
  position:relative;
  padding-bottom:5rem; margin-bottom:5rem;
  border-bottom:1px solid rgba(58,139,170,0.15);
}
.rp-panel:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }

/* Node dot on the line */
.rp-panel::before {
  content:'';
  position:absolute;
  left:-2.6rem; top:1.6rem;
  width:14px; height:14px; border-radius:50%;
  background:#daeef2;
  border:2.5px solid rgba(46,125,154,0.3);
  box-shadow:4px 4px 8px rgba(170,200,208,0.6), -3px -3px 6px rgba(255,255,255,0.9);
  transition:all 0.4s cubic-bezier(.4,0,.2,1);
  z-index:2;
}

/* Active panel: coral glow on dot */
.rp-panel.in-view::before {
  background:#e87070;
  border-color:#e87070;
  width:18px; height:18px; left:-2.7rem; top:1.5rem;
  box-shadow:0 0 0 4px rgba(232,112,112,0.15), 0 0 14px rgba(232,112,112,0.8), 0 0 28px rgba(232,112,112,0.4);
}

/* Hide old sticky timeline nav */
.timeline-nav { display:none !important; }

@media (max-width:880px) {
  .research-layout { padding-left:2rem; }
  .research-layout::before { left:0.4rem; }
  .tl-fill { left:0.4rem; }
  .rp-panel::before { left:-1.9rem; top:1.4rem; width:12px; height:12px; }
  .rp-panel.in-view::before { left:-2rem; top:1.3rem; width:16px; height:16px; }
}

/* Research panels */
.rp-era { font-size:0.66rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--ink-lt); font-weight:700; margin-bottom:0.4rem; }
.rp-scale { font-family:var(--serif); font-size:0.92rem; font-style:italic; color:var(--ink-mid); margin-bottom:0.65rem; }
.rp-title { font-family:var(--serif); font-size:1.7rem; font-weight:400; color:var(--ink); margin-bottom:0.9rem; line-height:1.2; }
.rp-body { font-size:1rem; line-height:1.88; color:var(--ink-mid); font-weight:400; max-width:640px; margin-bottom:1.25rem; }
.rp-body strong { color:var(--ink); font-weight:700; }
.rp-panel { padding-bottom:5rem; margin-bottom:5rem; border-bottom:1px solid rgba(58,139,170,0.15); }
.rp-panel:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }

/* ============================================================
   PHOTO GRID
   ============================================================ */
.photo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:2.5rem; }
.photo-cell {
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:16px;
  background:#c8dfe4;
  box-shadow:6px 6px 16px rgba(26,61,74,.18),-3px -3px 10px rgba(255,255,255,.8);
  cursor:pointer; transition:all 0.32s;
}
.photo-cell img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.photo-cell:hover { transform:translateY(-3px); box-shadow:8px 8px 22px rgba(26,61,74,.24),-4px -4px 12px rgba(255,255,255,.88); }
.photo-cell:hover img { transform:scale(1.05); }
.photo-label {
  position:absolute; bottom:0.6rem; left:0.7rem; right:0.7rem;
  font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase;
  color:#ffffff; font-weight:700; text-align:center;
  background:rgba(26,45,58,0.75); backdrop-filter:blur(8px);
  padding:0.38rem 0.7rem; border-radius:999px;
  opacity:0; transform:translateY(5px); transition:all 0.28s;
}
.photo-cell:hover .photo-label { opacity:1; transform:translateY(0); }
@media (max-width:600px) { .photo-grid { grid-template-columns:1fr; } }

/* ============================================================
   SKILLS GRID
   ============================================================ */
.skills-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2.5rem; }
.skill-block {
  background:var(--card-bg);
  border-radius:16px; padding:1.75rem;
  box-shadow:7px 7px 16px var(--card-dark),-5px -5px 13px var(--card-lt);
  transition:box-shadow 0.28s, transform 0.28s;
}
.skill-block:hover { transform:translateY(-2px); box-shadow:9px 9px 20px var(--card-dark),-6px -6px 16px var(--card-lt); }
.skill-cat { font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--teal-d); margin-bottom:0.85rem; font-weight:700; }
.skill-list { list-style:none; font-size:1rem; color:#333333; line-height:2.1; }
@media (max-width:880px) { .skills-grid { grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   EDUCATION
   ============================================================ */
.edu-item { display:flex; gap:2rem; padding:1.4rem 0; border-top:1px solid rgba(58,139,170,0.15); align-items:flex-start; }
.edu-year { font-family:var(--serif); font-size:1.5rem; color:var(--teal); white-space:nowrap; min-width:90px; padding-top:4px; flex-shrink:0; font-weight:400; }
.edu-degree { font-size:0.96rem; color:var(--ink-mid); line-height:1.65; }
.edu-degree strong { display:block; color:var(--ink); font-weight:700; font-size:1rem; margin-bottom:0.2rem; }
.edu-degree em { font-style:italic; color:var(--teal); font-size:0.88rem; display:block; margin-top:0.3rem; }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pull-quote {
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.8vw,2.4rem);
  font-weight:400; line-height:1.15; letter-spacing:-0.015em;
  text-align:center; max-width:880px; margin:0 auto;
  color:var(--ink);
}
.pull-quote em { font-style:italic; color:var(--teal); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-section { background:var(--bg); padding:7rem 3rem; }
.contact-inner { max-width:580px; margin:0 auto; text-align:center; }
.contact-form {
  background:#ffffff; border-radius:22px; padding:2.5rem;
  box-shadow:10px 10px 28px rgba(26,61,74,.14),-6px -6px 18px rgba(255,255,255,.9);
  text-align:left; margin-top:2.5rem;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; }
.form-label { font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mid); font-weight:700; }
.form-input,.form-textarea {
  width:100%; padding:0.9rem 1rem;
  font-family:var(--sans); font-size:0.95rem;
  color:var(--ink); background:#f8fcfd;
  border:1.5px solid rgba(58,139,170,0.22);
  border-radius:10px; outline:none; transition:all 0.28s;
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--ink-lt); }
.form-input:focus,.form-textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(58,139,170,0.12); background:#fff; }
.form-textarea { resize:vertical; min-height:120px; line-height:1.6; }
.form-submit {
  width:100%; margin-top:1.4rem; padding:1.1rem 2rem;
  background:var(--teal); color:#ffffff;
  font-family:var(--sans); font-size:0.72rem;
  letter-spacing:0.22em; text-transform:uppercase;
  border:none; border-radius:999px; cursor:pointer;
  transition:all 0.28s; font-weight:700;
}
.form-submit:hover { background:var(--teal-d); transform:translateY(-2px); box-shadow:0 8px 24px rgba(58,139,170,0.3); }
@media (max-width:600px) { .form-row { grid-template-columns:1fr; } }

/* ============================================================
   DARK BAND — pull quotes, CTAs
   ============================================================ */
.dark-band {
  background:#b8d8e2;
  padding:5rem 3rem;
}
.dark-band .pull-quote { color:#111111; }
.dark-band .pull-quote em { font-style:italic; color:var(--teal-d); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background:#b8d8e2; padding:1.75rem 3rem;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(46,125,154,0.2);
}
footer span { font-size:0.76rem; color:#333333; letter-spacing:0.08em; text-transform:uppercase; }
footer a { font-size:0.76rem; color:var(--teal-d); letter-spacing:0.08em; text-transform:uppercase; transition:color 0.22s; }
footer a:hover { color:var(--teal); }
@media (max-width:600px) { footer { flex-direction:column; gap:0.75rem; text-align:center; padding:1.5rem; } }

/* ============================================================
   WAVE DIVIDERS
   ============================================================ */
.wave-down svg { display:block; width:100%; }
.wave-up svg   { display:block; width:100%; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.sr { opacity:0; transform:translateY(32px); }
.sr.visible { opacity:1; transform:none; transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1); }
.d1{transition-delay:.1s;} .d2{transition-delay:.22s;} .d3{transition-delay:.36s;}
.d4{transition-delay:.5s;} .d5{transition-delay:.64s;}

/* ============================================================
   MISC
   ============================================================ */
.flex-gap { display:flex; gap:1rem; flex-wrap:wrap; }

/* Lightbox */
#lightbox { display:none; position:fixed; inset:0; z-index:9999; background:rgba(2,8,20,.92); backdrop-filter:blur(12px); align-items:center; justify-content:center; cursor:zoom-out; }
#lightbox.open { display:flex !important; }
#lightbox.open #lightbox-img { transform:scale(1) !important; opacity:1 !important; }
#lightbox-img { max-width:90vw; max-height:88vh; border-radius:12px; box-shadow:0 0 60px rgba(126,232,255,.2); transform:scale(.92); opacity:0; transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease; display:none; object-fit:contain; }
#lightbox-video { display:none; max-width:90vw; max-height:88vh; border-radius:12px; }
#lightbox-close { position:absolute; top:1.5rem; right:1.75rem; background:none; border:none; color:rgba(162,235,242,.7); font-size:2rem; cursor:pointer; line-height:1; z-index:2; transition:color .2s; }
#lightbox-close:hover { color:#7ee8ff; }
#lightbox-caption { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.85); font-family:var(--sans); font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; }

/* ============================================================
   MOBILE — comprehensive responsive styles
   ============================================================ */
@media (max-width:768px) {

  /* Hero: stack vertically, photo on top */
  .page-hero {
    grid-template-columns:1fr;
    grid-template-rows:280px auto;
    min-height:auto;
  }
  .hero-photo-col {
    order:1; height:280px;
  }
  .hero-inner {
    order:2;
    padding:2.5rem 1.5rem 3rem;
    border-right:none;
    border-top:1px solid var(--glass-border);
  }
  .hero-vision { max-width:100%; }
  .hero-name { font-size:clamp(2rem,8vw,3rem); }

  /* About: stack photo above text */
  .neu-section { padding:4rem 1.25rem; }
  .neu-inner > div[style*="grid-template-columns:340px"] {
    display:block !important;
  }
  .neu-inner > div[style*="grid-template-columns:340px"] > div:first-child {
    width:100%; max-width:320px; margin:0 auto 2rem; aspect-ratio:4/5;
  }

  /* Sub-section padding */
  .neu-inner > div + div { padding-top:4rem !important; }

  /* Cards: single column */
  .neu-grid-2, .neu-grid-3 { grid-template-columns:1fr !important; }

  /* Publications */
  .pub-card { grid-template-columns:44px 1fr; gap:1rem; padding:1.25rem 1rem; }
  .pub-yr { font-size:0.9rem; }

  /* Skills */
  .skills-grid { grid-template-columns:1fr !important; }

  /* Education */
  .edu-item { grid-template-columns:52px 1fr; gap:1rem; }

  /* Contact form */
  .form-row { grid-template-columns:1fr !important; }
  .contact-grid { grid-template-columns:1fr !important; }

  /* Research panels */
  .rp-panel { padding-bottom:3rem; margin-bottom:3rem; }
  .rp-panel > div[style*="grid-template-columns"] { display:block !important; }
  .rp-panel > div[style*="grid-template-columns"] > div { margin-bottom:1.5rem; }
  .photo-cell { max-width:100% !important; }

  /* Section intro headers */
  .section-intro { padding:4rem 1.25rem 3rem; }
  .section-intro h1 { font-size:clamp(2rem,7vw,2.8rem); }

  /* Section headlines */
  .section-headline { font-size:clamp(1.6rem,6vw,2.2rem); }

  /* Outreach */
  .outreach-grid { grid-template-columns:1fr !important; }

  /* Footer */
  footer { flex-direction:column; gap:0.75rem; text-align:center; padding:1.5rem 1.25rem; }

  /* Art gallery */
  .art-grid { grid-template-columns:1fr !important; }
  .art-item.span2 { grid-column:auto !important; }
}

/* Slightly larger phones / small tablets */
@media (max-width:480px) {
  .hero-name { font-size:2rem; }
  .section-headline { font-size:1.6rem; }
  .neu-section { padding:3rem 1rem; }
  .btn-solid, .btn-ghost { padding:0.65rem 1.2rem; font-size:0.72rem; }
}