:root{
    --ground:#12181f;      /* deep slate */
    --paper:#f7f4ec;       /* warm off-white */
    --ink:#1a2028;         /* near-black text */
    --muted:#5c6773;       /* secondary text */
    --line:#d9d3c6;        /* hairline on paper */
    --signal:#0fb5c4;      /* signal cyan accent */
    --amber:#e0912f;       /* emphasis */
    --card:#fffdf8;
    --maxw:820px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);color:var(--ink);
    font-family:"Newsreader",Georgia,serif;font-size:19px;line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  /* ---- top nav ---- */
  header.site{
    background:var(--ground);color:var(--paper);
    border-bottom:2px solid var(--signal);
  }
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:-.01em;font-size:18px;text-decoration:none;color:var(--paper)}
  .brand span{color:var(--signal)}
  nav.site a{
    font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:500;
    text-decoration:none;color:#c7cfd8;margin-left:22px;padding:4px 0;
    border-bottom:2px solid transparent;transition:.2s;
  }
  nav.site a:hover{color:#fff;border-color:var(--signal)}
  nav.site a[aria-current]{color:#fff;border-color:var(--signal)}
  @media(max-width:620px){nav.site a{margin-left:14px;font-size:13px}.brand{font-size:16px}}

  /* ---- hero with waveform signature ---- */
  .hero{background:var(--ground);color:var(--paper);padding:56px 0 0;position:relative;overflow:hidden}
  .hero .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin-bottom:18px}
  .hero h1{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(34px,6vw,52px);line-height:1.05;letter-spacing:-.02em;margin-bottom:20px}
  .hero p{font-size:20px;color:#c7cfd8;max-width:60ch;margin-bottom:40px}
  .wave{display:block;width:100%;height:70px}
  .wave path{fill:none;stroke:var(--signal);stroke-width:1.5;vector-effect:non-scaling-stroke}
  .wave .trace{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 3.2s ease-out forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @media(prefers-reduced-motion:reduce){.wave .trace{animation:none;stroke-dashoffset:0}}

  /* ---- body sections ---- */
  main{padding:60px 0 80px}
  section{margin-bottom:56px}
  h2{
    font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    padding-bottom:10px;margin-bottom:24px;border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;gap:12px;
  }
  h2::before{content:attr(data-n);font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--signal);font-weight:500}
  .lead{font-size:22px;line-height:1.55;margin-bottom:8px}
  .interests{list-style:none;display:grid;gap:2px}
  .interests li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
  .interests li:last-child{border-bottom:none}
  .interests .k{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:17px;color:var(--ink)}
  .interests .v{color:var(--muted);font-size:17px}
  .projects{display:grid;gap:0}
  .proj{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:92px 1fr;gap:18px}
  .proj:last-child{border-bottom:none}
  .proj .yr{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--amber);padding-top:2px}
  .proj .body strong{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:18px}
  .proj .body p{color:var(--muted);font-size:17px;margin-top:2px}

  /* ---- publications ---- */
  .pub-group{margin-bottom:32px}
  .pub-group h3{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:16px;color:var(--signal);margin-bottom:4px}
  .pub-group h3 .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);margin-left:8px;letter-spacing:.05em}
  ol.pubs{list-style:none;counter-reset:p}
  ol.pubs li{
    padding:16px 0 16px 42px;border-bottom:1px solid var(--line);position:relative;font-size:17px;line-height:1.5;
  }
  ol.pubs li:last-child{border-bottom:none}
  ol.pubs li::before{
    counter-increment:p;content:counter(p,decimal-leading-zero);
    position:absolute;left:0;top:18px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);
  }
  .pubs .title{font-weight:500}
  .pubs .venue{font-style:italic;color:var(--muted)}
  .pubs .meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);display:block;margin-top:3px}
  .pubs a{color:var(--signal);text-decoration:none;border-bottom:1px solid transparent;transition:.15s}
  .pubs a:hover{border-color:var(--signal)}
  .me{color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--amber)}

  footer.site{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:15px;font-family:"Space Grotesk",sans-serif}
  footer.site a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
  footer.site a:hover{color:var(--signal)}

/* helpers used by the njk template */
.muted{color:var(--muted)}
.sig{color:var(--signal)}

/* ---- home hero buttons ---- */
.hero-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.btn{
  font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:500;
  text-decoration:none;padding:11px 20px;border-radius:2px;
  border:1px solid #3a4551;color:var(--paper);transition:.2s;
}
.btn:hover{border-color:var(--signal);color:#fff}
.btn-primary{background:var(--signal);border-color:var(--signal);color:#04252a;font-weight:600}
.btn-primary:hover{background:#2ecad8;color:#04252a}

/* ---- intro block ---- */
.intro{margin-bottom:56px}
.intro .lead{margin-bottom:14px}

/* ---- launchpad cards ---- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--card);padding:26px 24px;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:8px;transition:.18s;position:relative;
}
.card:hover{background:#fff}
.card:hover .card-go{color:var(--signal)}
.card-k{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:20px}
.card p{color:var(--muted);font-size:16px;line-height:1.5;flex:1}
.card-go{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted);transition:.18s}

/* ---- generic prose pages (about / projects / contact) ---- */
.prose{padding-top:8px}
.prose p{margin-bottom:18px;font-size:19px}
.prose h2{
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-bottom:10px;margin:40px 0 20px;border-bottom:1px solid var(--line);
}
.prose h2::before{content:none}
.prose strong{font-family:"Space Grotesk",sans-serif;font-weight:600}
.prose ul{list-style:none;margin:0 0 24px}
.prose ul li{padding:11px 0 11px 22px;border-bottom:1px solid var(--line);position:relative;font-size:18px}
.prose ul li:last-child{border-bottom:none}
.prose ul li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:1.5px;background:var(--signal)}
.prose a{color:var(--ink);border-bottom:1.5px solid var(--signal);text-decoration:none;transition:.15s}
.prose a:hover{color:var(--signal)}
.prose hr{border:none;border-top:1px solid var(--line);margin:36px 0}
.prose .lead{font-size:22px;line-height:1.55;color:var(--ink)}

/* first paragraph of prose = lead-in emphasis */
.prose > p:first-of-type{font-size:22px;line-height:1.55;color:var(--ink)}

/* optional annotation under a publication entry */
.pubs .note{
  display:block;margin-top:8px;padding-left:12px;
  border-left:2px solid var(--line);
  font-size:15px;line-height:1.5;color:var(--muted);
}

/* ---- portrait ---- */
.portrait{
  display:block;border-radius:2px;
  background:var(--card);border:1px solid var(--line);
}
.intro-with-photo{display:flex;gap:28px;align-items:flex-start}
.intro-with-photo .portrait{flex:0 0 180px;width:180px;height:180px}
@media(max-width:640px){
  .intro-with-photo{flex-direction:column;gap:20px}
  .intro-with-photo .portrait{width:140px;height:140px;flex-basis:auto}
}
/* About: float alongside the opening prose */
.portrait-about{
  float:right;width:220px;height:220px;margin:0 0 20px 28px;
}
@media(max-width:640px){
  .portrait-about{float:none;width:160px;height:160px;margin:0 0 20px 0}
}