@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme: light;
  --paper:#FFFFFF;
  --paper-2:#FAFAF7;
  --paper-3:#F2F1EA;
  --ink:#161613;
  --ink-soft:#54544C;
  --ink-faint:#93938A;
  --line:#EAE7DC;

  --c-pink:#FF4F93;   --c-pink-soft:#FFD8E7;
  --c-green:#5FA83C;  --c-green-soft:#DEEFC9;
  --c-yellow:#E8A400; --c-yellow-soft:#FBE7AE;
  --c-blue:#2D93DE;   --c-blue-soft:#CFE6F8;
  --c-purple:#8D63E8; --c-purple-soft:#E7DCFA;
  --c-orange:#FF7A2E; --c-orange-soft:#FFE0C4;
  --c-coral:#FF5C4D;  --c-coral-soft:#FFDAD2;
}

*{box-sizing:border-box;}
html,body{ margin:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
::selection{ background:var(--c-pink-soft); color:var(--c-pink); }
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:600; letter-spacing:-0.01em; text-wrap:balance; margin:0; }
a{ color:inherit; }
.wrap{ max-width:1040px; margin:0 auto; padding-inline:20px; }

/* topbar */
.topbar{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.topbar .wrap.topbar-inner{ display:flex; align-items:center; justify-content:space-between; min-height:54px; gap:14px; flex-wrap:wrap; padding-block:8px; }
.brand{ font-family:'Fraunces', serif; font-weight:600; font-size:1.02rem; text-decoration:none; white-space:nowrap; }
.brand em{ font-style:italic; color:var(--c-pink); }
nav.top-nav{ display:flex; gap:2px; flex-wrap:wrap; }
nav.top-nav a{
  text-decoration:none; font-size:0.84rem; font-weight:600; color:var(--tint); padding:7px 10px;
  border-radius:6px; white-space:nowrap;
}
nav.top-nav a:hover{ background:var(--tint-soft); }
nav.top-nav a.active{ background:var(--tint-soft); }
nav.top-nav a.nav-pink{ --tint:var(--c-pink); --tint-soft:var(--c-pink-soft); }
nav.top-nav a.nav-blue{ --tint:var(--c-blue); --tint-soft:var(--c-blue-soft); }
nav.top-nav a.nav-purple{ --tint:var(--c-purple); --tint-soft:var(--c-purple-soft); }
nav.top-nav a.nav-coral{ --tint:var(--c-coral); --tint-soft:var(--c-coral-soft); }
nav.top-nav a.nav-green{ --tint:var(--c-green); --tint-soft:var(--c-green-soft); }
.topbar .social-bar{ flex:none; border-left:1px solid var(--line); padding-left:10px; margin-left:2px; }
@media (max-width:640px){ .topbar .social-bar{ border-left:none; padding-left:0; margin-left:0; } }

/* page header (used on every non-home page) */
.page-head{ position:relative; overflow:hidden; padding-block:36px 8px; border-bottom:1px solid var(--line); isolation:isolate; }
.page-head .kicker{ font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--accent); letter-spacing:0.04em; }
.page-head h1{ font-size:clamp(1.7rem,3.4vw,2.3rem); margin-top:6px; }
.page-head p{ margin:10px 0 0; color:var(--ink-soft); max-width:60ch; line-height:1.55; }

main{ padding-block:36px 64px; }

/* home hero */
.home-hero{ padding-block:56px 44px; border-bottom:1px solid var(--line); }
.home-hero .intro{ margin-top:18px; max-width:52ch; line-height:1.6; color:var(--ink-soft); }

/* big greeting headline */
.hero-headline h1{
  font-size:clamp(2.6rem,6vw,4.2rem); line-height:0.98; font-weight:700; letter-spacing:-0.01em;
}

/* contact pill button */
.contact-btn{
  display:inline-block; margin-top:22px; text-decoration:none; color:var(--ink); font-weight:600;
  background:var(--c-blue-soft); border:1px solid color-mix(in srgb, var(--c-blue) 35%, var(--line));
  border-radius:30px; padding:12px 26px; font-size:0.98rem; transition:transform .15s ease, background .15s ease;
}
.contact-btn:hover{ background:var(--c-blue); color:#fff; transform:translateY(-1px); }

/* quick links row (home links to sub-pages, icon + label) */
.quicklinks{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.quicklink{
  --tint:var(--c-pink); --tint-soft:var(--c-pink-soft);
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink);
  background:var(--tint-soft); border:1px solid color-mix(in srgb, var(--tint) 30%, var(--line));
  border-radius:20px; padding:8px 14px; font-size:0.84rem; font-weight:600;
  transition:transform .15s ease;
}
.quicklink:hover{ transform:translateY(-1px); }
.quicklink svg{ width:15px; height:15px; color:var(--tint); }
.quicklink.pink{ --tint:var(--c-pink); --tint-soft:var(--c-pink-soft); }
.quicklink.blue{ --tint:var(--c-blue); --tint-soft:var(--c-blue-soft); }
.quicklink.purple{ --tint:var(--c-purple); --tint-soft:var(--c-purple-soft); }
.quicklink.coral{ --tint:var(--c-coral); --tint-soft:var(--c-coral-soft); }
.quicklink.green{ --tint:var(--c-green); --tint-soft:var(--c-green-soft); }

/* photo collage */
.collage-section{ padding-block:40px 60px; }
.collage-section .col-label{ display:block; margin-bottom:16px; }
.collage{
  columns:5 220px; column-gap:12px;
}
@media (max-width:900px){ .collage{ columns:3 160px; } }
@media (max-width:560px){ .collage{ columns:2 140px; } }
.collage .tile{
  break-inside:avoid; margin-bottom:12px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
}
.collage .tile img{ width:100%; display:block; }
.collage .tile.t1, .collage .tile.t4{ transform:rotate(-1deg); }
.collage .tile.t2, .collage .tile.t5{ transform:rotate(1deg); }

/* about */
.about-grid{ display:grid; grid-template-columns:1fr; max-width:640px; gap:36px; align-items:start; }
.about-grid p{ line-height:1.65; color:var(--ink-soft); margin:0 0 12px; }
.about-grid p strong{ color:var(--ink); font-weight:600; }
.toolkit{ margin-top:16px; display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; padding:4px 9px; border-radius:6px; background:var(--paper-3); color:var(--ink-soft); border:1px solid var(--line); }

/* research cards */
.research-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
@media (max-width:900px){ .research-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .research-grid{ grid-template-columns:1fr; } }
.research-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:10px; position:relative; }
.research-card .index{ position:absolute; top:16px; right:18px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--ink-faint); }
.research-card h3{ font-size:1.08rem; padding-right:28px; }
.card-photo{ width:100%; aspect-ratio:16/10; border-radius:8px; overflow:hidden; }
.card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-photo.placeholder{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, var(--paper-3), var(--paper-3) 8px, var(--paper) 8px, var(--paper) 16px);
  border:1px dashed var(--line); color:var(--ink-faint);
}
.card-photo.placeholder svg{ width:26px; height:26px; }
.research-card p{ margin:0; color:var(--ink-soft); font-size:0.9rem; line-height:1.55; flex:1; }
.research-card .status{ align-self:flex-start; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; padding:3px 8px; border-radius:999px; }
.status.active{ background:var(--c-green-soft); color:color-mix(in srgb, var(--c-green) 70%, black); }
.status.prep{ background:var(--c-yellow-soft); color:color-mix(in srgb, var(--c-yellow) 55%, black); }

/* publications / presentations */
.pub-list{ display:flex; flex-direction:column; margin-top:20px; }
.pub{ display:grid; grid-template-columns:60px 1fr; gap:16px; padding-block:18px; border-top:1px solid var(--line); }
.pub:first-child{ border-top:none; }
.pub .yr{ font-family:'IBM Plex Mono', monospace; color:var(--accent); font-size:0.92rem; padding-top:2px; }
.pub h3{ font-size:1rem; font-weight:600; line-height:1.4; }
.pub .venue{ color:var(--ink-soft); font-size:0.86rem; margin-top:5px; }
.pub .venue a{ color:var(--accent); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset:3px; }
.pub .badge{ display:inline-block; margin-top:7px; font-family:'IBM Plex Mono', monospace; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); border:1px solid var(--line); padding:2px 7px; border-radius:5px; }

/* timeline */
.tl{ display:flex; flex-direction:column; margin-top:20px; }
.tl-row{ display:grid; grid-template-columns:140px 1fr; gap:16px; padding-block:14px; border-top:1px solid var(--line); }
.tl-row:first-child{ border-top:none; }
.tl-row .when{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--ink-faint); padding-top:2px; }
.tl-row .role{ font-weight:600; font-size:0.94rem; }
.tl-row .org{ color:var(--ink-soft); font-size:0.86rem; margin-top:2px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:760px){ .two-col{ grid-template-columns:1fr; gap:4px; } }
.col-label{ font-size:0.72rem; margin-bottom:4px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.06em; font-weight:500; }

/* art */
.art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
@media (max-width:760px){ .art-grid{ grid-template-columns:1fr; } }
.art-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper-2); }
.art-thumb{ height:140px; display:flex; align-items:center; justify-content:center; }
.art-thumb svg{ width:30px; height:30px; opacity:0.55; }
.art-body{ padding:14px 16px 16px; }
.art-body h3{ font-size:1rem; margin-bottom:5px; }
.art-body p{ margin:0; color:var(--ink-soft); font-size:0.86rem; line-height:1.5; }

/* contact */
.contact-intro{ max-width:56ch; line-height:1.6; color:var(--ink-soft); margin:0 0 22px; }
.contact-links{ margin-top:8px; display:flex; flex-direction:column; max-width:420px; }
.contact-links a{ text-decoration:none; display:flex; align-items:center; gap:10px; font-size:0.96rem; padding:11px 4px; border-bottom:1px solid var(--line); justify-content:space-between; }
.contact-links a svg{ width:16px; height:16px; color:var(--accent); }

footer{ padding-block:20px; border-top:1px solid var(--line); }
footer .wrap.foot-wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.foot-text{ display:flex; gap:8px; flex-wrap:wrap; font-size:0.76rem; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace; }
footer .social-bar a{ color:var(--ink-faint); }
footer .social-bar a:hover{ color:var(--ink); }

/* ---------- collage bits (moodboard-inspired) ---------- */
.blob-field{ position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.blob{ position:absolute; }
.blob.b1{ width:340px; height:300px; top:-90px; left:-60px; background:var(--c-pink-soft); border-radius:58% 42% 61% 39%/48% 55% 45% 52%; transform:rotate(-8deg); }
.blob.b2{ width:280px; height:260px; top:-40px; right:6%; background:var(--c-yellow-soft); border-radius:42% 58% 47% 53%/57% 44% 56% 43%; transform:rotate(10deg); }
.blob.b3{ width:220px; height:220px; bottom:-70px; left:18%; background:var(--c-blue-soft); border-radius:50% 50% 42% 58%/55% 45% 55% 45%; transform:rotate(4deg); }
.blob.b4{ width:180px; height:180px; bottom:-40px; right:16%; background:var(--c-green-soft); border-radius:60% 40% 55% 45%/45% 60% 40% 55%; transform:rotate(-6deg); }
.blob.b5{ width:150px; height:150px; top:30%; right:-40px; background:var(--c-purple-soft); border-radius:50%; }
.blob-field.light .blob{ opacity:0.55; }

.name-banner{ display:inline-block; background:var(--c-yellow); padding:10px 22px; border-radius:8px; transform:rotate(-1deg); box-shadow:0 3px 0 rgba(20,20,19,0.08); }
.name-banner h1{ font-family:'Fraunces', Georgia, serif; font-weight:700; text-transform:uppercase; letter-spacing:0.01em; color:#181712; font-size:clamp(1.9rem,4.4vw,2.9rem); margin:0; }

.flag-badge{ display:inline-flex; align-items:center; gap:7px; background:#0B4A34; color:#F3F1E7; padding:6px 12px; border-radius:5px; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; transform:rotate(1.5deg); }
.flag-badge .dot{ width:9px; height:9px; border-radius:50%; background:#D5122B; flex:none; }

.mark{ background:var(--c-coral-soft); padding:0.03em 0.35em; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.mark.blue{ background:var(--c-blue-soft); }
.mark.yellow{ background:var(--c-yellow-soft); }
.mark.green{ background:var(--c-green-soft); }

.ask-box{ margin-top:26px; background:var(--c-yellow-soft); border:1px solid var(--line); border-radius:12px; padding:16px 20px; max-width:64ch; }
.ask-box .label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:6px; }
.ask-box p{ margin:0; color:var(--ink); line-height:1.55; }

.edu-list{ margin-top:14px; display:flex; flex-direction:column; gap:14px; }
.edu-item{ border-top:1px solid var(--line); padding-top:12px; }
.edu-item:first-child{ border-top:none; padding-top:0; }
.edu-item .school{ font-weight:600; font-size:0.94rem; }
.edu-item .deg{ color:var(--ink-soft); font-size:0.86rem; margin-top:2px; }

.section-split{ margin-top:48px; padding-top:36px; border-top:1px solid var(--line); }
.section-split .col-label{ font-size:0.78rem; color:var(--accent); margin-bottom:6px; }
.section-split h2{ font-size:1.3rem; }

/* home hero layout: large portrait left, text right */
.hero-top{ display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:center; }
@media (max-width:820px){ .hero-top{ grid-template-columns:1fr; } }
.hero-photo{ border-radius:16px; overflow:hidden; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:3/4; }
@media (max-width:820px){ .hero-photo{ max-width:280px; margin:0 auto; } }

/* small photo used on every other page */
.page-photo{ width:170px; height:170px; border-radius:14px; overflow:hidden; margin-bottom:22px; }
.page-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* social icon bar */
.social-bar{ display:flex; align-items:center; gap:4px; }
.social-bar a{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:7px; color:var(--ink-soft);
}
.social-bar a:hover{ color:var(--ink); background:var(--paper-3); }
.social-bar svg{ width:16px; height:16px; }

.contact-links + .social-bar{ margin-top:22px; }

/* copy-email button */
.copy-email{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink-soft);
  border-radius:20px; padding:5px 12px 5px 10px; font-size:0.78rem;
  font-family:'IBM Plex Mono', monospace; cursor:pointer;
}
.copy-email svg{ width:14px; height:14px; }
.copy-email:hover{ color:var(--ink); border-color:var(--ink-faint); }
.copy-email.copied{ color:var(--c-green); border-color:var(--c-green); }

/* CV download button */
.cv-btn{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:24px;
  background:var(--c-pink); color:var(--ink); border:1px solid var(--line);
  border-radius:20px; padding:8px 16px; font-size:0.85rem; font-weight:600;
  text-decoration:none;
}
.cv-btn svg{ width:15px; height:15px; }
.cv-btn:hover{ background:var(--c-pink-soft); }

/* contact portrait */