:root{
    --accent:#1F4E79; --accent-soft:#2e5e96;
    --ink:#22272e; --muted:#6b7280; --hair:#e5e7eb; --bg:#ffffff; --tint:#f6f8fa;
    --serif:'EB Garamond', Georgia, serif;
    --sans:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif);
       font-size:19px; line-height:1.5; -webkit-font-smoothing:antialiased}
  a{color:inherit}
  .wrap{max-width:1080px; margin:0 auto; padding:0 28px}

  /* ---------- sticky top nav ---------- */
  .topnav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
    backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--hair)}
  .topnav .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
  .brand{font-weight:600; font-size:19px; color:var(--accent); text-decoration:none; letter-spacing:.2px}
  .navlinks{display:flex; gap:26px; font-family:var(--sans); font-size:14px}
  .navlinks a{color:var(--muted); text-decoration:none; transition:color .2s ease}
  .navlinks a:hover{color:var(--accent)}
  @media (max-width:640px){.navlinks{display:none}}

  /* ---------- hero ---------- */
  .hero{padding:74px 0 18px}
  .hero h1{font-weight:600; font-size:46px; line-height:1.05; margin:0; color:var(--accent)}
  .hero .tagline{font-size:21px; color:var(--ink); margin:14px 0 0; max-width:46ch}
  .hero .intro{font-size:18px; color:var(--muted); margin:14px 0 0; max-width:66ch}
  .hero .social{margin:20px 0 0; display:flex; gap:18px; font-family:var(--sans); font-size:14px}
  .hero .social a{color:var(--accent); text-decoration:none; font-weight:600}

  /* ---------- section heading ---------- */
  .section-head{display:flex; align-items:baseline; gap:14px; margin:64px 0 24px}
  .section-head h2{font-weight:600; font-size:28px; margin:0}
  .section-head .bar{flex:1; height:2px; background:var(--accent); opacity:.16}
  .section-head .more{font-family:var(--sans); font-size:13px; color:var(--muted)}

  /* ---------- featured cards ---------- */
  .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:26px}
  .card{background:#fff; border:1px solid var(--hair); border-radius:10px; overflow:hidden;
    display:flex; flex-direction:column;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease}
  .card:hover{transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(31,78,121,.45); border-color:#d3dae3}
  .thumb{position:relative; aspect-ratio:3/2; overflow:hidden; background:#eef1f4}
  .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .card:hover .thumb img{transform:scale(1.06)}
  .thumb.ph{display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#eef2f7,#e2e8f1)}
  .thumb.ph span{font-family:var(--sans); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#9aa6b2}
  .card .body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
  .venue{font-family:var(--sans); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 8px}
  .card .title{font-size:21px; font-weight:600; line-height:1.25; margin:0 0 8px}
  .card .title a{color:var(--ink); text-decoration:none; transition:color .25s ease}
  .card:hover .title a{color:var(--accent)}
  .authors{font-size:16px; color:var(--muted); margin:0}
  .authors .me{color:var(--ink); font-weight:600}
  .card .links{margin-top:14px; display:flex; gap:16px; font-family:var(--sans); font-size:13px}
  .card .links a{color:var(--accent); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:5px}
  .arrow{transition:transform .2s ease}
  .links a:hover .arrow{transform:translateX(3px)}

  /* ---------- full list rows ---------- */
  .rows{border-top:1px solid var(--hair)}
  .prow{display:flex; gap:20px; align-items:center; padding:16px 14px; margin:0 -14px;
    border-bottom:1px solid var(--hair); border-radius:8px; transition:background .25s ease}
  .prow:hover{background:var(--tint)}
  .rthumb{width:118px; height:78px; flex:none; border-radius:6px; overflow:hidden; background:#eef1f4}
  .rthumb img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .prow:hover .rthumb img{transform:scale(1.07)}
  .rthumb.ph{display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#eef2f7,#e2e8f1)}
  .rthumb.ph span{font-family:var(--sans); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#aab4bf}
  .rbody{flex:1; min-width:0}
  .rtitle{font-size:19px; font-weight:600; line-height:1.25; margin:0}
  .rtitle a{text-decoration:none; color:var(--ink); transition:color .2s ease}
  .prow:hover .rtitle a{color:var(--accent)}
  .rmeta{font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--accent); margin:2px 0 4px; text-transform:uppercase}
  .rauth{font-size:15px; color:var(--muted); margin:0}
  .rauth .me{color:var(--ink); font-weight:600}
  .rlink{flex:none; font-family:var(--sans); font-size:13px}
  .rlink a{color:var(--accent); text-decoration:none; font-weight:600}
  @media (max-width:560px){.rthumb{display:none} .rlink{display:none}}

  /* ---------- reveal ---------- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none} .card,.thumb img,.rthumb img{transition:none}}

  footer{margin-top:70px; border-top:1px solid var(--hair); color:var(--muted);
    font-family:var(--sans); font-size:13px; padding:30px 0 60px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
  footer a{color:var(--accent); text-decoration:none}

/* ---------- about page ---------- */
.about{font-size:19px; max-width:70ch; margin-top:6px}
.about p{margin:0 0 16px}
.about a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease}
.about a:hover{border-color:var(--accent)}
.about .social{margin-top:26px; display:flex; gap:18px; font-family:var(--sans); font-size:14px}
.about .social a{font-weight:600; border:0}
.navlinks a.active{color:var(--accent)}
.hero{padding-bottom:8px}
/* papers page: breathing room under the sticky nav when there is no hero */
.papers-top{padding-top:42px}

/* ---------- portrait on the About page ---------- */
.portrait{width:170px; height:170px; border-radius:50%; object-fit:cover;
  float:right; margin:6px 0 14px 30px; border:1px solid var(--hair);
  box-shadow:0 10px 30px -16px rgba(31,78,121,.5)}
@media (max-width:560px){.portrait{float:none; display:block; margin:0 0 20px}}

/* text-only rows (talks / teaching) reuse .prow without a thumbnail */
.prow.text-only{padding-left:14px}

/* =========================================================
   Two-column layout with a persistent profile sidebar
   ========================================================= */
.layout{display:grid; grid-template-columns:212px minmax(0,1fr); gap:48px; align-items:start; padding-top:30px}
@media (max-width:760px){.layout{grid-template-columns:1fr; gap:22px; padding-top:18px}}

.profile{position:sticky; top:84px}
@media (max-width:760px){.profile{position:static; text-align:center}}
.profile .portrait{width:172px; height:172px; border-radius:50%; object-fit:cover; display:block;
  margin:0 0 16px; float:none; border:1px solid var(--hair); box-shadow:0 12px 30px -16px rgba(31,78,121,.5)}
@media (max-width:760px){.profile .portrait{margin:0 auto 14px}}
.profile .pname{font-size:22px; font-weight:600; margin:0 0 4px; line-height:1.15}
.profile .pname a{color:var(--accent); text-decoration:none}
.profile .ptitle{font-style:italic; font-size:14.5px; color:var(--muted); margin:0 0 16px; line-height:1.4}
.profile .psocial{display:flex; flex-direction:column; gap:9px; font-family:var(--sans); font-size:14px}
@media (max-width:760px){.profile .psocial{align-items:center}}
.profile .psocial a{display:flex; align-items:center; gap:9px; color:var(--ink); opacity:.72;
  text-decoration:none; font-weight:500; transition:color .2s ease, opacity .2s ease}
.profile .psocial a:hover{color:var(--accent); opacity:1; text-decoration:none}
.profile .psocial .ic{width:16px; height:16px; flex:0 0 16px; fill:currentColor; display:block}

/* page title in the content column (replaces the old big hero) */
.page-title{font-size:30px; font-weight:600; color:var(--accent); margin:0 0 4px}
.content .lead{color:var(--muted); font-size:18px; margin:2px 0 8px}
.content > section:first-of-type, .content > .section-head:first-of-type{margin-top:18px}

/* =========================================================
   Per-publication link buttons + BibTeX popup
   ========================================================= */
.publinks{margin-top:9px; display:flex; flex-wrap:wrap; gap:7px; font-family:var(--sans); font-size:12px}
.plink{display:inline-block; padding:2px 9px; border:1px solid var(--hair); border-radius:5px; color:var(--accent);
  text-decoration:none; font-weight:600; background:#fff; cursor:pointer; transition:background .2s ease, border-color .2s ease}
.plink:hover{background:var(--tint); border-color:#cdd6df}
.bibtex{position:relative; margin:10px 0 2px; padding:13px 15px; background:#10202f; color:#e6edf5; border-radius:8px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; line-height:1.55; overflow-x:auto; white-space:pre}
.bibtex[hidden]{display:none}
.bibtex .copy{position:absolute; top:8px; right:10px; cursor:pointer; color:#9ec5ff; font-family:var(--sans); font-size:11px; font-weight:600}
.bibtex .copy:hover{color:#fff}

/* =========================================================
   Warmer palette — soft off-white page, white surfaces
   (tweak --bg below to taste, or comment this block out)
   ========================================================= */
:root{ --bg:#f7f6f2; }                 /* warm off-white page */
body{ background:var(--bg); }
.topnav{ background:rgba(247,246,242,.82); }

/* profile becomes a white card that anchors the left column */
.profile{ background:#fff; border:1px solid var(--hair); border-radius:14px;
  padding:22px 20px 24px; box-shadow:0 14px 38px -26px rgba(31,78,121,.45); top:84px; }
.profile .portrait{ width:100%; max-width:180px; height:auto; aspect-ratio:1/1; margin:0 auto 16px; }
.profile .pname{ text-align:center; }
.profile .ptitle{ text-align:center; }

/* list rows lift onto a white surface on hover */
.prow:hover{ background:#fff; box-shadow:0 12px 30px -24px rgba(31,78,121,.45); }
.plink:hover{ background:#eef1f5; }

/* =========================================================
   Media page — grayscale logo / name tiles (ivia style)
   ========================================================= */
.media-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(158px,1fr)); gap:16px; margin:4px 0 14px}
.media-item{display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none;
  background:#fff; border:1px solid var(--hair); border-radius:11px; padding:20px 14px 16px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease}
.media-item:hover{transform:translateY(-5px); box-shadow:0 16px 36px -22px rgba(31,78,121,.45); border-color:#cdd6df}
.media-logo{height:52px; display:flex; align-items:center; justify-content:center; margin-bottom:10px}
.media-logo img{max-height:52px; max-width:100%; filter:grayscale(100%); opacity:.78; transition:filter .3s ease, opacity .3s ease}
.media-item:hover .media-logo img{filter:none; opacity:1}
.media-name{font-weight:600; color:var(--ink); font-size:17px; line-height:1.15; transition:color .25s ease}
.media-item:hover .media-name{color:var(--accent)}
.media-cap{font-family:var(--sans); font-size:12px; color:var(--muted); line-height:1.35}

/* ---- Media marquee (continuous slow auto-scroll, ivia style) ---- */
.marquee{position:relative; overflow:hidden; margin:4px 0 22px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
.marquee-track{display:flex; gap:18px; width:max-content; will-change:transform;
  animation:marquee-rtl 55s linear infinite;}
.marquee[data-dir="right"] .marquee-track{animation-name:marquee-ltr;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee .media-item{flex:0 0 auto; width:174px;}
@keyframes marquee-rtl{from{transform:translateX(0)}      to{transform:translateX(-50%)}}
@keyframes marquee-ltr{from{transform:translateX(-50%)}   to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---- Contact form ---- */
.contact-form{max-width:580px; margin-top:6px}
.contact-form .field{display:flex; flex-direction:column; margin-bottom:15px}
.contact-form label{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--muted); margin-bottom:6px}
.contact-form input, .contact-form textarea{font-family:var(--serif); font-size:17px; color:var(--ink);
  background:#fff; border:1px solid var(--hair); border-radius:9px; padding:11px 13px;
  transition:border-color .2s ease, box-shadow .2s ease}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(31,78,121,.13)}
.contact-form textarea{resize:vertical; min-height:120px; line-height:1.5}
.btn-send{font-family:var(--sans); font-size:15px; font-weight:600; color:#fff; background:var(--accent);
  border:0; border-radius:9px; padding:11px 30px; cursor:pointer; margin-top:4px;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease}
.btn-send:hover{background:#163a5c; transform:translateY(-1px); box-shadow:0 10px 24px -14px rgba(31,78,121,.7)}
.sent-banner{font-family:var(--sans); font-size:14px; color:#1d6b2f; background:#e9f6ec;
  border:1px solid #b7e0c0; border-radius:9px; padding:12px 16px; margin-bottom:18px; max-width:580px}

/* ---- Projects page ---- */
.projects .card .title{font-size:19px}
.ploc{font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--muted); margin:0 0 10px}
.pdesc{font-size:15.5px; line-height:1.5; color:var(--ink); opacity:.82; margin:0}
.projects .thumb{aspect-ratio:4/3}

/* ---- Wide figure (e.g. HIMASS group photo) ---- */
.wfig{margin:2px 0 26px; max-width:560px}
.wfig img{width:100%; border-radius:10px; border:1px solid var(--hair); display:block}
.wfig figcaption{font-family:var(--sans); font-size:12.5px; color:var(--muted); margin-top:9px; line-height:1.4}

/* ---- Wide figure (single image + caption) ---- */
.wfig{margin:2px 0 26px; max-width:560px}
.wfig img{width:100%; border-radius:10px; border:1px solid var(--hair); display:block}
.wfig figcaption{font-family:var(--sans); font-size:12.5px; color:var(--muted); margin-top:9px; line-height:1.4}

/* ---- Scrolling photo strip (top of Outreach) ---- */
.photostrip{margin:8px 0 30px}
.photostrip .marquee-track{gap:14px; animation-duration:60s}
.photostrip .pitem{flex:0 0 auto; margin:0; height:240px; border-radius:11px; overflow:hidden;
  border:1px solid var(--hair); position:relative; background:#eef1f4}
.photostrip .pitem img{height:240px; width:auto; max-width:none; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.photostrip .pitem:hover img{transform:scale(1.05)}
.photostrip .pitem figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 13px 9px;
  font-family:var(--sans); font-size:12px; color:#fff; line-height:1.3;
  background:linear-gradient(transparent, rgba(20,30,45,.72)); opacity:0; transition:opacity .3s ease}
.photostrip .pitem:hover figcaption{opacity:1}