:root{
    --paper:   #F7F4EC;
    --paper-2: #F1EDE1;
    --ink:     #1C2430;
    --ink-60:  #1C243099;
    --cobalt:  #2B5876;
    --patina:  #5C7A63;
    --rule:    #D9D3C2;
    --max: 1100px;
  }

  *{ box-sizing: border-box; }
  html{
    scroll-behavior: smooth;
    /* --header-h is measured by script; scroll-padding-top is set further down. */
  }

  body{
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "IBM Plex Sans", -apple-system, Segoe UI, sans-serif;
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3{
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
  }

  a{ color: inherit; }

  .skip-link{
    position: absolute; left: -999px; top: 0;
    background: var(--ink); color: var(--paper);
    padding: 0.6em 1em; z-index: 100;
  }
  .skip-link:focus{ left: 1em; top: 1em; }

  :focus-visible{
    outline: 2px solid var(--cobalt);
    outline-offset: 3px;
  }

  .wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  /* ---------- header ---------- */
  header.site-header{
    position: sticky; top: 0; z-index: 10;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .site-header .wrap{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 1rem; padding-bottom: 1rem;
    gap: 1rem; flex-wrap: wrap;
  }
  .monogram{
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--ink);
    font-family: "Fraunces", serif;
    font-size: 1rem;
    text-decoration: none;
    flex-shrink: 0;
  }
  nav.primary-nav ul{
    list-style: none; display: flex; gap: 1.6rem;
    margin: 0; padding: 0; flex-wrap: wrap;
  }
  nav.primary-nav a{
    text-decoration: none;
    font-size: 0.95rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
  }
  nav.primary-nav a:hover{ border-color: var(--ink); }

  main{ display: block; }
  section{ padding: 4.5rem 0; }
  section + section{ border-top: 1px solid var(--rule); }

  .section-head{
    max-width: 60ch;
    margin-bottom: 2.25rem;
  }
  .section-head h2{ font-size: clamp(1.6rem, 2.5vw, 2.1rem); }

  /* ---------- hero ---------- */
  .hero .wrap{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
  .hero h1{
    font-size: clamp(2.4rem, 4.2vw + 1rem, 4rem);
  }
  .hero .role{
    margin-top: 0.9rem;
    font-size: 1.15rem;
    max-width: 42ch;
  }
  .hero .statement{
    margin-top: 1.1rem;
    max-width: 46ch;
    color: var(--ink-60);
  }
  .hero .cta-row{
    display: flex; gap: 1rem; flex-wrap: wrap;
    margin-top: 2rem;
  }
  .btn{
    display: inline-block;
    padding: 0.65em 1.3em;
    text-decoration: none;
    border: 1px solid var(--ink);
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .btn.solid{
    background: var(--ink); color: var(--paper);
  }
  .btn.solid:hover{ background: var(--cobalt); border-color: var(--cobalt); }
  .btn.outline:hover{ background: var(--paper-2); }

  .hero-graphic svg{ width: 100%; height: auto; display: block; }

  @media (prefers-reduced-motion: no-preference){
    .wave-in{
      stroke-dasharray: 210; animation: draw-wave 0.9s ease-out both;
    }
    .hex-ring{
      stroke-dasharray: 380; animation: draw-ring 1.0s ease-out 0.55s both;
    }
    .wave-out{
      stroke-dasharray: 210; animation: draw-wave 0.9s ease-out 1.55s both;
    }
    .kekule, .stub{ animation: fade 0.6s ease-out 1.15s both; }
    .phonon{ animation: fade 0.6s ease-out 1.6s both; }
    .vertex{ animation: pop 0.45s ease-out both; }
    .vertex-in{ animation-delay: 0.5s; }
    .vertex-out{ animation-delay: 1.5s; }
    .vertex-el{ animation-delay: 1.4s; }
    .flow{ animation: fade 0.5s ease-out 1.3s both; }
    .tip-out{ animation-delay: 2.3s; }

    @keyframes draw-wave{
      from{ stroke-dashoffset: 210; }
      to{ stroke-dashoffset: 0; }
    }
    @keyframes draw-ring{
      from{ stroke-dashoffset: 380; }
      to{ stroke-dashoffset: 0; }
    }
    @keyframes fade{
      from{ opacity: 0; }
      to{ opacity: 1; }
    }
    @keyframes pop{
      from{ opacity: 0; transform: scale(0.3); }
      to{ opacity: 1; transform: scale(1); }
    }
  }

  /* ---------- about ---------- */
  .about-grid{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  .portrait{
    aspect-ratio: 1 / 1;
    border: 1px dashed var(--rule);
    display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: 0.85rem; color: var(--ink-60);
    padding: 1rem;
  }
  .about-grid p{ max-width: 62ch; }

  /* ---------- research ---------- */
  .threads{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  .thread h3{
    font-size: 1.05rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
  }
  .thread.physics h3{ color: var(--cobalt); }
  .thread.chemistry h3{ color: var(--patina); }
  .thread ul{ margin: 0.9rem 0 0; padding: 0; list-style: none; }
  .thread li{
    padding: 0.6rem 0;
    border-top: 1px solid var(--rule);
  }
  .thread li:last-child{ border-bottom: 1px solid var(--rule); }
  .join-rule{
    width: 1px;
    background: linear-gradient(var(--cobalt), var(--patina));
    justify-self: center;
    align-self: stretch;
  }
  .interface-note{
    margin-top: 2.25rem;
    max-width: 62ch;
    color: var(--ink-60);
  }

  /* ---------- publications ---------- */
  .pub-list{ list-style: none; margin: 0; padding: 0; }
  .pub{
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.2rem;
    padding: 1.3rem 0;
    border-top: 1px solid var(--rule);
  }
  .pub:last-child{ border-bottom: 1px solid var(--rule); }
  .pub .year{
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.9rem;
    color: var(--ink-60);
    padding-top: 0.15rem;
  }
  .pub h3{
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
  }
  .pub .authors{ color: var(--ink-60); font-size: 0.95rem; margin-top: 0.3rem; }
  .pub .venue{ font-style: italic; font-size: 0.95rem; }
  .pub a.pub-link{
    display: inline-block; margin-top: 0.4rem;
    font-size: 0.9rem; text-decoration: underline;
  }

  /* ---------- code ---------- */
  .proj-list{ list-style: none; margin: 0; padding: 0; }
  .proj{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: start;
    padding: 1.3rem 0;
    border-top: 1px solid var(--rule);
  }
  .proj:last-child{ border-bottom: 1px solid var(--rule); }
  .proj h3{
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
  }
  .proj p{
    margin: 0.35rem 0 0;
    color: var(--ink-60);
    font-size: 0.95rem;
    max-width: 58ch;
  }
  .proj .tags{ display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.65rem; }
  .proj .tag{
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.75rem;
    border: 1px solid var(--rule);
    padding: 0.1rem 0.5rem;
    color: var(--ink-60);
  }
  .proj .repo-link{
    font-size: 0.9rem;
    text-decoration: underline;
    white-space: nowrap;
    padding-top: 0.2rem;
  }

  /* ---------- diatribes ---------- */
  .post-list{ list-style: none; margin: 0; padding: 0; }
  .post{
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1.2rem;
    padding: 1.35rem 0;
    border-top: 1px solid var(--rule);
  }
  .post:last-child{ border-bottom: 1px solid var(--rule); }
  .post .date{
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.85rem;
    color: var(--ink-60);
    padding-top: 0.2rem;
  }
  .post h3{
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-size: 1.2rem;
  }
  .post h3 a{ text-decoration: none; border-bottom: 1px solid var(--rule); }
  .post h3 a:hover{ border-color: var(--ink); }
  .post .standfirst{
    margin: 0.4rem 0 0;
    color: var(--ink-60);
    font-size: 0.97rem;
    max-width: 62ch;
  }

  /* ---------- contact ---------- */
  .contact-list{ list-style: none; margin: 0; padding: 0; max-width: 40ch; }
  .contact-list li{ padding: 0.65rem 0; border-top: 1px solid var(--rule); }
  .contact-list li:last-child{ border-bottom: 1px solid var(--rule); }
  .contact-list a{ text-decoration: underline; }

  footer{
    padding: 2.5rem 0 3rem;
    font-size: 0.85rem;
    color: var(--ink-60);
  }

  @media (max-width: 800px){
    .hero .wrap{ grid-template-columns: 1fr; padding-top: 2.5rem; }
    .hero-graphic{ order: -1; }
    .about-grid{ grid-template-columns: 1fr; }
    .portrait{ max-width: 180px; }
    .threads{ grid-template-columns: 1fr; }
    .join-rule{ display: none; }
    .pub{ grid-template-columns: 1fr; }
    .proj{ grid-template-columns: 1fr; gap: 0.6rem; }
    .post{ grid-template-columns: 1fr; gap: 0.35rem; }
  }

  /* ---------- article pages (diatribes) ---------- */
  .article{ padding: 4rem 0 3rem; }
  .article-wrap{ max-width: 42rem; margin: 0 auto; padding: 0 1.5rem; }
  .article .kicker{
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.85rem;
    color: var(--ink-60);
  }
  .article h1{
    font-size: clamp(1.9rem, 3vw + 1rem, 2.9rem);
    margin-top: 0.6rem;
  }
  .article .standfirst-lead{
    margin-top: 1rem;
    font-size: 1.12rem;
    color: var(--ink-60);
  }
  .article-body{ margin-top: 2.5rem; }
  .article-body p{ margin: 0 0 1.35rem; }
  .article-body h2{
    font-size: 1.45rem;
    margin: 2.5rem 0 0.9rem;
  }
  .article-body blockquote{
    margin: 1.8rem 0;
    padding-left: 1.2rem;
    border-left: 2px solid var(--patina);
    color: var(--ink-60);
    font-style: italic;
  }
  .article-body figure{ margin: 2rem 0; }
  .article-body img{ max-width: 100%; height: auto; display: block; }
  .article-body figcaption{
    margin-top: 0.6rem;
    font-size: 0.88rem;
    color: var(--ink-60);
  }
  .article-body code{
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.9em;
    background: var(--paper-2);
    padding: 0.1em 0.35em;
  }
  .back-link{
    display: inline-block;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-size: 0.95rem;
    text-decoration: underline;
    width: 100%;
  }

  /* ---------- ORCID ---------- */
  .orcid-line{ font-size: 0.97rem; }
  .orcid-link{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    transition: border-color 0.15s ease;
  }
  .orcid-link:hover{ border-color: #A6CE39; }
  .orcid-mark{
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.12em;
  }
  .orcid-id{
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.92em;
    letter-spacing: -0.01em;
  }

  /* About CTA row spacing */
  .about-grid .cta-row{ margin-top: 1.9rem; }

  /* ---------- publication detail ---------- */
  .pub .authors strong{ color: var(--ink); font-weight: 600; }
  .pub .status{
    font-family: "IBM Plex Mono", monospace;
    font-style: normal;
    font-size: 0.72rem;
    border: 1px solid var(--rule);
    padding: 0.08rem 0.42rem;
    margin-left: 0.4rem;
    color: var(--ink-60);
    white-space: nowrap;
  }
  .pub-link{
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.82rem;
  }
  .pub-note{
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--ink-60);
  }

  /* ---------- research prose + keywords ---------- */
  .section-head.narrow{ margin-bottom: 1.9rem; }
  .prose{ max-width: 66ch; }
  .prose p{ margin: 0 0 1.25rem; }
  .prose p:last-child{ margin-bottom: 0; }

  .keywords{ margin-top: 3rem; }
  .keywords h3{
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
  }
  .keyword-cols{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    max-width: 44rem;
  }
  .keyword-cols ul{ list-style: none; margin: 0; padding: 0; }
  .keyword-cols li{
    padding: 0.55rem 0;
    border-top: 1px solid var(--rule);
  }
  .keyword-cols ul li:last-child{ border-bottom: 1px solid var(--rule); }

  /* ---------- under construction ---------- */
  .under-construction{
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.92rem;
    color: var(--ink-60);
    border: 1px dashed var(--rule);
    padding: 2.4rem 1.5rem;
    text-align: center;
    margin: 0;
    max-width: 44rem;
  }

  /* ---------- contact icons ---------- */
  .contact-list li{
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
  }
  .ico{
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    position: relative;
    top: 0.12em;
  }
  .ico-mail{ color: var(--cobalt); }
  .ico-pin{ color: var(--patina); }

  @media (max-width: 800px){
    .keyword-cols{ grid-template-columns: 1fr; gap: 0; }
    .keyword-cols ul:first-child li:last-child{ border-bottom: none; }
  }

  /* keep the lab address on a single line */
  .contact-list{ max-width: 34rem; }
  @media (max-width: 560px){
    .contact-list{ max-width: 100%; }
  }

  /* ---------- portrait photo ---------- */
  .portrait{
    margin: 0;
    aspect-ratio: 4 / 5;
    border: none;
    display: block;
    padding: 0;
    background: var(--paper-2);
    overflow: hidden;
  }
  .portrait img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0);
  }

  /* ---------- tighten the space above the hero ---------- */
  .hero{ padding-top: 1rem; }
  .hero .wrap{ padding-top: 1.5rem; }

  /* ---------- land anchors on the heading, not the divider ----------
     Sections carry a border-top plus 4.5rem of padding, so offsetting to the
     section's top edge leaves that rule visible. Subtracting the padding puts
     the divider up behind the sticky header and the heading just below it. */
  html{
    scroll-padding-top: calc(var(--header-h, 8.5rem) - 3.25rem);
  }

  @media (max-width: 800px){
    .hero .wrap{ padding-top: 1rem; }
  }

  /* ---------- give the hero diagram more room ----------
     Scoped to wide screens only. Unscoped, this sits after the max-width:800px
     block above and overrides the single-column mobile layout. */
  @media (min-width: 801px){
    .hero .wrap{
      grid-template-columns: 1fr 1.25fr;
      gap: 2.5rem;
    }
  }