:root{
    --ink:#111318;
    --ink-soft:#32353D;
    --muted:#666A73;
    --line:#E5E3DE;
    --line-soft:#EFEDE9;
    --paper:#FFFFFF;
    --sand:#F7F6F3;
    --accent:#1F4E5A;
    --accent-2:#3C7F8C;
    --wrap:1080px;
    --r:16px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:17.5px;line-height:1.72;-webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:inherit}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}

  h1,h2,h3{margin:0;font-family:"Poppins","Inter",sans-serif;letter-spacing:-.022em;line-height:1.14;font-weight:600}
  h1{font-size:clamp(2.4rem,5.6vw,4rem);font-weight:700}
  h2{font-size:clamp(1.6rem,3.2vw,2.35rem)}
  h3{font-size:1.1rem;line-height:1.4;letter-spacing:-.01em}
  p{margin:0 0 1.15em}
  .lead{font-size:clamp(1.08rem,2vw,1.32rem);color:var(--ink-soft);line-height:1.6}

  .eyebrow{
    font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent);margin:0 0 18px
  }
  .eyebrow.on-dark{color:#8FC4CE}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
    backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)
  }
  .bar{display:flex;align-items:center;justify-content:space-between;gap:22px;height:70px}
  .mark{
    display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;
    font-family:"Poppins","Inter",sans-serif;font-weight:600;font-size:1.06rem;letter-spacing:-.02em
  }
  .mark span{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
  nav.main{display:flex;gap:28px;align-items:center}
  nav.main a{
    text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink-soft);
    padding:3px 0;border-bottom:1.5px solid transparent;transition:.18s
  }
  nav.main a:hover{color:var(--ink);border-bottom-color:var(--accent)}

  .lang{display:flex;gap:2px;align-items:center;font-size:.8rem;font-weight:600;letter-spacing:.04em}
  .lang a{text-decoration:none;color:var(--muted);padding:5px 8px;border-radius:7px;transition:.18s}
  .lang a:hover{color:var(--ink);background:var(--sand)}
  .lang a[aria-current="true"]{color:var(--ink);background:var(--sand)}

  .btn{
    display:inline-flex;align-items:center;gap:9px;text-decoration:none;
    font-size:.95rem;font-weight:600;padding:13px 24px;border-radius:999px;
    border:1.5px solid transparent;transition:.2s;white-space:nowrap;cursor:pointer
  }
  .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px -12px rgba(31,78,90,.85)}
  .btn-primary:hover{background:#193F49;transform:translateY(-1px)}
  .btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
  .btn-ghost:hover{border-color:var(--ink);background:var(--sand)}
  .btn-light{background:#fff;color:var(--ink)}
  .btn-light:hover{transform:translateY(-1px)}
  .btn-outline-light{border-color:rgba(255,255,255,.34);color:#fff}
  .btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.09)}
  .btn-sm{padding:10px 19px;font-size:.89rem}
  a:focus-visible,button:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

  .menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
  .menu-btn svg{display:block}

  /* ---------- hero ---------- */
  .hero{padding:88px 0 76px;border-bottom:1px solid var(--line-soft)}
  .hero-grid{display:grid;grid-template-columns:1.32fr .88fr;gap:64px;align-items:center}
  .hero h1{margin-bottom:20px}
  .hero .role{
    font-family:"Poppins",sans-serif;font-weight:500;
    font-size:clamp(1.1rem,2.1vw,1.4rem);color:var(--accent);
    margin:0 0 22px;letter-spacing:-.01em;line-height:1.35
  }
  .hero p.intro{color:var(--ink-soft);font-size:1.06rem;max-width:34em}
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
  .portrait{position:relative;justify-self:end;width:100%;max-width:360px}
  .portrait img{
    width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
    border-radius:var(--r);box-shadow:0 30px 60px -34px rgba(17,19,24,.5)
  }

  /* ---------- generic sections ---------- */
  section{padding:82px 0}
  .sand{background:var(--sand);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
  .sec-head{max-width:44em;margin-bottom:44px}
  .sec-head h2{margin-bottom:16px}
  .sec-head p{color:var(--muted);margin:0}

  .prose{max-width:38em}
  .prose p{color:var(--ink-soft)}

  /* ---------- cards ---------- */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .card{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
    padding:30px 28px;display:flex;flex-direction:column;transition:.2s
  }
  .card:hover{border-color:#CFCCC6;transform:translateY(-2px);box-shadow:0 18px 40px -30px rgba(17,19,24,.45)}
  .card .tag{
    font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
    color:var(--muted);margin-bottom:13px
  }
  .card h3{margin-bottom:11px}
  .card p{color:var(--ink-soft);font-size:.98rem;margin-bottom:18px}
  .card .go{
    margin-top:auto;font-size:.9rem;font-weight:600;color:var(--accent);
    text-decoration:none;display:inline-flex;align-items:center;gap:7px
  }
  .card .go:hover{gap:11px}
  .card .go svg{transition:.2s}
  .card .still{margin-top:auto;font-size:.88rem;color:var(--muted);font-weight:500}

  /* ---------- credentials ---------- */
  .creds{display:grid;grid-template-columns:repeat(2,1fr);gap:0 46px;list-style:none;padding:0;margin:0}
  .creds li{
    padding:17px 0;border-bottom:1px solid var(--line);
    display:flex;gap:14px;align-items:flex-start;font-size:1rem
  }
  .creds li b{font-weight:600;color:var(--ink)}
  .creds li span{color:var(--muted);display:block;font-size:.92rem;line-height:1.5}
  .creds .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2);margin-top:11px;flex:none}

  /* ---------- research / dark ---------- */
  .dark{background:var(--ink);color:#fff}
  .dark h2{color:#fff}
  .dark p{color:rgba(255,255,255,.78)}
  .dark .sec-head p{color:rgba(255,255,255,.66)}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .facts{list-style:none;padding:0;margin:0}
  .facts li{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.82);font-size:.99rem}
  .facts li:last-child{border-bottom:0}
  .pub-lbl{
    font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
    color:rgba(255,255,255,.5);margin:36px 0 6px
  }
  .pubs{list-style:none;padding:0;margin:0}
  .pubs li{padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
  .pubs a{
    color:#fff;font-weight:600;text-decoration:none;font-size:1rem;line-height:1.4;
    display:inline-flex;align-items:baseline;gap:8px
  }
  .pubs a:hover{color:#8FC4CE}
  .pubs span{display:block;color:rgba(255,255,255,.58);font-size:.9rem;margin-top:6px}

  /* ---------- talks ---------- */
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
  .chip{
    border:1px solid var(--line);border-radius:999px;padding:9px 18px;
    font-size:.92rem;font-weight:500;color:var(--ink-soft);background:var(--paper)
  }

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .contact-list{list-style:none;padding:0;margin:0}
  .contact-list li{padding:15px 0;border-bottom:1px solid var(--line)}
  .contact-list a,.contact-list span.val{
    text-decoration:none;font-weight:600;font-size:1.02rem;color:var(--ink);
    display:inline-flex;align-items:center;gap:9px
  }
  .contact-list a:hover{color:var(--accent)}
  .contact-list .lbl{
    display:block;font-size:.72rem;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;color:var(--muted);margin-bottom:5px
  }
  .socials{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
  .soc{
    width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--ink-soft);transition:.2s;text-decoration:none
  }
  .soc:hover{border-color:var(--accent);color:var(--accent);background:var(--sand);transform:translateY(-2px)}
  .soc svg{width:19px;height:19px;fill:currentColor}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:rgba(255,255,255,.6);padding:44px 0;font-size:.9rem}
  .foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
  footer a{color:rgba(255,255,255,.82);text-decoration:none}
  footer a:hover{color:#fff}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:30px}
    .portrait{max-width:220px;order:-1;justify-self:start}
    .split,.contact-grid{grid-template-columns:1fr;gap:38px}
    .cards{grid-template-columns:1fr}
    .creds{grid-template-columns:1fr}
    nav.main{
      display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);
      flex-direction:column;gap:0;padding:10px 26px 22px;border-bottom:1px solid var(--line);
      box-shadow:0 20px 34px -26px rgba(17,19,24,.5)
    }
    nav.main.open{display:flex}
    nav.main a{padding:13px 0;border-bottom:1px solid var(--line-soft);width:100%}
    .menu-btn{display:block}
    header{position:sticky}
    .hero{padding:56px 0 54px}
    section{padding:62px 0}
  }
  @media (max-width:560px){
    body{font-size:16.5px}
    .hero-cta .btn{width:100%;justify-content:center}
  }