/* ============================================================
   MATERIAL DESIGN 3 — DESIGN TOKENS
   ============================================================ */
:root{
  /* Color roles — light scheme (seeded: instrument blue + amber) */
  --primary:#38608f; --on-primary:#ffffff;
  --primary-container:#d3e3ff; --on-primary-container:#001c38;
  --secondary:#545f70; --on-secondary:#ffffff;
  --secondary-container:#d8e3f8; --on-secondary-container:#111c2b;
  /* Neutral "accent" — quiet slate-gray so the blue primary is the only real accent */
  --tertiary:#5b5e66; --on-tertiary:#ffffff;
  --tertiary-container:#e0e2e9; --on-tertiary-container:#181c22;
  --error:#ba1a1a; --on-error:#ffffff;
  --error-container:#ffdad6; --on-error-container:#410002;
  --background:#f8f9ff; --on-background:#191c20;
  --surface:#f8f9ff; --on-surface:#191c20;
  --surface-variant:#dfe2eb; --on-surface-variant:#43474e;
  --outline:#73777f; --outline-variant:#c3c6cf;
  --surface-dim:#d8dae0; --surface-bright:#f8f9ff;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#f2f3fa;
  --surface-container:#eceef4;
  --surface-container-high:#e6e8ee;
  --surface-container-highest:#e1e2e9;
  --inverse-surface:#2e3035; --inverse-on-surface:#eff0f7;
  --shadow:0,0,0;

  /* Spacing (8dp layout grid scale) */
  --m3-spacing-xs:4px;
  --m3-spacing-sm:8px;
  --m3-spacing-md:16px;
  --m3-spacing-lg:24px;
  --m3-spacing-xl:32px;
  --m3-spacing-xxl:56px;

  /* Layout Grid System */
  --m3-grid-columns:12;
  --m3-grid-gutter:var(--m3-spacing-lg);
  --m3-grid-margin:var(--m3-spacing-xl);

  /* Shape scale */
  --shape-xs:4px; --shape-sm:8px; --shape-md:12px;
  --shape-lg:16px; --shape-xl:28px; --shape-full:999px;

  /* Elevation */
  --elev-1:0 1px 2px rgba(var(--shadow),.30), 0 1px 3px 1px rgba(var(--shadow),.15);
  --elev-2:0 1px 2px rgba(var(--shadow),.30), 0 2px 6px 2px rgba(var(--shadow),.15);
  --elev-3:0 1px 3px rgba(var(--shadow),.30), 0 4px 8px 3px rgba(var(--shadow),.15);
  --elev-4:0 2px 3px rgba(var(--shadow),.30), 0 6px 10px 4px rgba(var(--shadow),.15);
  --state-hover:.08;
  --state-focus:.12;
  --state-pressed:.12;

  /* Motion */
  --ease-standard:cubic-bezier(0.2, 0, 0, 1.0);
  --ease-emphasized:cubic-bezier(0.2, 0, 0, 1.0);
  --ease-decelerated:cubic-bezier(0, 0, 0, 1);
  --ease-accelerated:cubic-bezier(0.3, 0, 1, 1);
  --dur-short:150ms;
  --dur-med:300ms;
  --dur-long:500ms;

  /* Material Web system token bridge */
  --md-ref-typeface-brand:"Roboto Flex";
  --md-ref-typeface-plain:"Roboto";
  --md-icon-font:"Material Symbols Rounded";
  --md-sys-color-primary:var(--primary);
  --md-sys-color-on-primary:var(--on-primary);
  --md-sys-color-primary-container:var(--primary-container);
  --md-sys-color-on-primary-container:var(--on-primary-container);
  --md-sys-color-secondary:var(--secondary);
  --md-sys-color-on-secondary:var(--on-secondary);
  --md-sys-color-secondary-container:var(--secondary-container);
  --md-sys-color-on-secondary-container:var(--on-secondary-container);
  --md-sys-color-tertiary:var(--tertiary);
  --md-sys-color-on-tertiary:var(--on-tertiary);
  --md-sys-color-tertiary-container:var(--tertiary-container);
  --md-sys-color-on-tertiary-container:var(--on-tertiary-container);
  --md-sys-color-error:var(--error);
  --md-sys-color-on-error:var(--on-error);
  --md-sys-color-error-container:var(--error-container);
  --md-sys-color-on-error-container:var(--on-error-container);
  --md-sys-color-background:var(--background);
  --md-sys-color-on-background:var(--on-background);
  --md-sys-color-surface:var(--surface);
  --md-sys-color-on-surface:var(--on-surface);
  --md-sys-color-surface-variant:var(--surface-variant);
  --md-sys-color-on-surface-variant:var(--on-surface-variant);
  --md-sys-color-outline:var(--outline);
  --md-sys-color-outline-variant:var(--outline-variant);
  --md-sys-color-surface-container-lowest:var(--surface-container-lowest);
  --md-sys-color-surface-container-low:var(--surface-container-low);
  --md-sys-color-surface-container:var(--surface-container);
  --md-sys-color-surface-container-high:var(--surface-container-high);
  --md-sys-color-surface-container-highest:var(--surface-container-highest);
  --md-sys-shape-corner-full:var(--shape-full);
}
[data-theme="dark"]{
  --primary:#a1c9ff; --on-primary:#00315c;
  --primary-container:#1d4875; --on-primary-container:#d3e3ff;
  --secondary:#bcc7dc; --on-secondary:#263141;
  --secondary-container:#3c4858; --on-secondary-container:#d8e3f8;
  --tertiary:#c4c6d0; --on-tertiary:#2d3038;
  --tertiary-container:#44474e; --on-tertiary-container:#e0e2e9;
  --error:#ffb4ab; --on-error:#690005;
  --error-container:#93000a; --on-error-container:#ffdad6;
  --background:#111318; --on-background:#e1e2e9;
  --surface:#111318; --on-surface:#e1e2e9;
  --surface-variant:#43474e; --on-surface-variant:#c3c6cf;
  --outline:#8d9199; --outline-variant:#43474e;
  --surface-dim:#111318; --surface-bright:#37393e;
  --surface-container-lowest:#0c0e13;
  --surface-container-low:#191c20;
  --surface-container:#1d2024;
  --surface-container-high:#282a2f;
  --surface-container-highest:#33353a;
  --inverse-surface:#e1e2e9; --inverse-on-surface:#2e3035;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
/* Reset margins on native elements — but NOT on slotted content (Material Web
   manages that, e.g. the chip icon→label gap). Padding is reset only on lists,
   never universally: a universal padding reset clobbers the internal padding of
   Material Web button/chip hosts and makes labels touch the edge. */
:where(:not([slot])){margin:0}
:where(ul,ol){padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  font-family:"Roboto",system-ui,sans-serif;
  background:var(--background); color:var(--on-background);
  line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background var(--dur-med) var(--ease-standard), color var(--dur-med) var(--ease-standard);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* Material Web components have their own (correctly-shaped) focus rings, so the
   global outline is scoped to native focusable elements to avoid a square box
   around round components like the theme toggle. */
:focus-visible{outline:none}
a:focus-visible,.skip:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--shape-xs)}
::selection{background:var(--tertiary-container);color:var(--on-tertiary-container)}

/* Icons are sized by their context: navbar rules set explicit sizes, and icons
   inside Material Web components (icon-buttons, buttons, chips, lists, fab) are
   sized by the component. Don't set a global font-size — it would override the
   component's own ::slotted sizing and shrink icon-button glyphs. */
.m3-icon{--md-icon-font:"Material Symbols Rounded"}

/* ============================================================
   MATERIAL 3 CARDS
   ============================================================ */
.m3-card{
  border-radius:var(--shape-md);
  overflow:hidden;
  transition:background var(--dur-short) var(--ease-standard),
             border-color var(--dur-short) var(--ease-standard),
             box-shadow var(--dur-short) var(--ease-standard),
             transform var(--dur-short) var(--ease-standard);
}
.m3-card--outlined{
  background:var(--surface);
  border:1px solid var(--outline-variant);
  color:var(--on-surface);
}
.m3-card--filled{
  background:var(--surface-container-highest);
  color:var(--on-surface);
  border:none;
}
.m3-card--elevated{
  background:var(--surface-container-low);
  box-shadow:var(--elev-1);
  color:var(--on-surface);
  border:none;
}

/* ============================================================
   TYPE SCALE
   Sizes come from Material Web's md-typescale-* classes
   (imported + adopted in head.html). Only custom styles live here.
   ============================================================ */
.eyebrow{font-family:"Roboto Mono",monospace;font-size:.75rem;font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--tertiary)}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--m3-grid-margin)}
section{padding-block:56px}
.section-head{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;max-width:720px}
.section-copy{color:var(--on-surface-variant)}
.text-link{color:var(--primary);font-weight:500}
.author-mark{font-style:normal;border-bottom:2px solid var(--tertiary)}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--primary);
  color:var(--on-primary);padding:10px 18px;border-radius:var(--shape-full)}
.skip:focus{left:16px}

/* ============================================================
   NAVIGATION RAIL / TOP APP BAR
   ============================================================ */
.appbar{
  position:sticky;top:0;z-index:100;height:64px;
  background:var(--surface);
  border-bottom:1px solid var(--outline-variant);
  display:flex;align-items:center;
  transition:box-shadow var(--dur-short),background var(--dur-med),border-color var(--dur-short);
}
.appbar.scrolled{box-shadow:var(--elev-2);background:var(--surface-container)}
.appbar .wrap{display:flex;align-items:center;gap:16px;width:100%}
.brand{display:flex;align-items:center;gap:12px;font-weight:500;margin-right:auto}
.brand b{font-family:"Roboto Flex";font-weight:600;letter-spacing:0}
.brand small{display:block;color:var(--on-surface-variant);font-weight:400}
.nav{display:flex;align-items:center;gap:2px}
.nav a{
  position:relative;padding:12px 16px;border-radius:var(--shape-full);
  font-size:.875rem;font-weight:500;letter-spacing:.1px;color:var(--on-surface-variant);
  min-height:48px;display:inline-flex;align-items:center;
  transition:color var(--dur-short),background var(--dur-short);
}
.nav a::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--on-surface);opacity:0;transition:opacity var(--dur-short)}
.nav a:hover::before{opacity:.08}
.nav a.active{color:var(--on-secondary-container);background:var(--secondary-container)}
.nav a .m3-icon{display:none}
@media (max-width:1080px){
  .nav a{padding-inline:10px}
}

@media (min-width:1021px){
  body{padding-left:80px}
  .skip:focus{left:96px}
  .appbar{
    position:fixed;inset:0 auto 0 0;
    width:80px;height:100dvh;
    background:var(--surface-container);
    border-right:1px solid var(--outline-variant);
    border-bottom:none;
    align-items:stretch;
    box-shadow:none;
  }
  .appbar.scrolled{box-shadow:none;background:var(--surface-container)}
  .appbar .wrap{
    max-width:none;width:100%;height:100%;
    padding:12px 4px;
    flex-direction:column;align-items:center;gap:12px;
  }
  .brand{display:none}
  .nav{
    width:100%;
    flex:1;
    flex-direction:column;
    align-items:center;
    gap:6px;
    overflow-y:auto;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{
    width:72px;min-height:64px;
    padding:6px 4px;
    border-radius:var(--shape-md);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
    font-size:.72rem;
    line-height:1.2;
    letter-spacing:.1px;
  }
  .nav a::before{inset:2px;border-radius:22px}
  .nav a .m3-icon{
    display:block;
    width:56px;height:32px;
    border-radius:var(--shape-full);
    display:grid;
    place-items:center;
    font-size:22px;
    transition:background var(--dur-short),color var(--dur-short);
  }
  .nav a.active{
    background:transparent;
    color:var(--on-surface);
  }
  .nav a.active .m3-icon{
    background:var(--secondary-container);
    color:var(--on-secondary-container);
  }
  .appbar md-icon-button{
    margin-top:auto;
  }
}

/* Icon button + state layer */
.menu-btn{display:none}

/* ============================================================
   MATERIAL WEB COMPONENTS
   ============================================================ */
.link-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ============================================================
   RESEARCH CARDS
   ============================================================ */
.profile-section{background:var(--surface-container-low);padding-block-start:28px}
.section-head p{color:var(--on-surface-variant)}
.resource-grid{display:grid;gap:10px}
.profile-card,.resource-card{
  background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant);
  border-radius:var(--shape-md);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  transition:background var(--dur-short),border-color var(--dur-short);
}
.profile-card:hover,.resource-card:hover{
  background:var(--surface-container);
  border-color:var(--outline);
}
.profile-card--intro{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  align-items:start;
  gap:28px;
  padding:20px;
}
.media-placeholder{
  position:relative;
  display:grid;
  place-items:center;
  gap:6px;
  overflow:hidden;
  border:1px solid var(--outline-variant);
  background:var(--surface-container-high);
  color:var(--primary);
}
.placeholder-label{
  position:relative;
  z-index:1;
  font-family:"Roboto Mono",monospace;
  font-size:.68rem;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--on-surface-variant);
}
.media-placeholder--headshot{aspect-ratio:4/5;border-radius:var(--shape-md)}
.media-placeholder--figure,.media-placeholder--video{aspect-ratio:16/9;border-radius:var(--shape-md)}
.avatar-placeholder{width:100%}
.profile-headshot{
  display:block;
  aspect-ratio:4/5;
  height:auto;
  object-fit:cover;
  border-radius:var(--shape-md);
  border:1px solid var(--outline-variant);
}
.profile-media{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
}
.profile-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.profile-name{font-family:"Roboto Flex";font-size:3rem;line-height:1.05;font-weight:600;letter-spacing:-.5px;margin:0}
.profile-role{color:var(--primary);font-weight:500;margin:0}
.profile-summary{color:var(--on-surface-variant);margin:0}
.profile-availability{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  padding:6px 14px;border-radius:var(--shape-full);
  background:var(--secondary-container);color:var(--on-secondary-container);
}
.profile-actions{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:4px;
  margin-top:8px;
}
.profile-actions md-outlined-icon-button{
  width:36px;
  height:36px;
}
.resource-card p{color:var(--on-surface-variant)}

/* Awards & Media coverage — single-card lists */
/* ---- Awards & recognition ---- */
#awards{background:var(--surface-container-low)}
.awards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--m3-spacing-md)}
.award-card{
  display:flex;flex-direction:column;gap:var(--m3-spacing-xs);padding:var(--m3-spacing-md);
}
.award-card:hover{background:var(--surface-container-high)}
.award-year{font-family:"Roboto Mono",monospace;font-size:1.6rem;font-weight:500;
  line-height:1;color:var(--primary);margin-bottom:var(--m3-spacing-xs)}
.award-title{color:var(--on-surface)}
.award-org{color:var(--on-surface-variant)}

/* ---- Media coverage ---- */
#media{background:var(--surface)}
.media-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;max-width:none}
.media-nav{display:flex;gap:4px;flex-shrink:0}
.media-nav md-icon-button[disabled]{opacity:.35}
.media-carousel{list-style:none;display:flex;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 4px 12px;margin:0 -4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.media-carousel::-webkit-scrollbar{display:none}
.media-slide{flex:0 0 min(340px,85%);scroll-snap-align:start;display:flex}
.media-card{
  display:flex;flex-direction:column;gap:var(--m3-spacing-sm);color:inherit;padding:var(--m3-spacing-md);width:100%;
}
.media-card:hover{background:var(--surface-container-high)}
.media-meta{font-family:"Roboto Mono",monospace;font-size:.7rem;letter-spacing:.4px;
  text-transform:uppercase;color:var(--on-surface-variant)}
.media-title{color:var(--on-surface);flex:1}
.media-cta{font-size:.82rem;font-weight:500;color:var(--primary)}
.media-card:hover .media-cta{text-decoration:underline}

.teaching-section{background:var(--surface)}
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m3-spacing-md)}
.resource-card{display:flex;flex-direction:column;gap:var(--m3-spacing-sm);padding:var(--m3-spacing-md);min-height:200px}
.resource-card p{flex:1}
.feature-list{display:flex;flex-direction:column;gap:var(--m3-spacing-sm);padding-left:18px;color:var(--on-surface-variant)}
.feature-list li::marker{color:var(--tertiary)}

.grid-research{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m3-spacing-sm)}
.r-card{
  position:relative;
  display:flex;flex-direction:column;
  color:inherit;
  text-decoration:none;
}
.r-card:hover{
  background:var(--surface-container-low);
  border-color:var(--outline);
  box-shadow:var(--elev-2);
  transform:translateY(-2px);
}
.r-card h3{color:var(--on-surface)}
.r-card p{color:var(--on-surface-variant)}
/* full-bleed media: spans the card edges, top corners clipped by the card radius */
.r-media{width:100%;border:none;border-radius:0}
video.r-media{aspect-ratio:16/9;object-fit:cover;display:block;background:var(--surface-container)}
.r-body{padding:14px;display:flex;flex-direction:column;gap:8px}

/* ============================================================
   PUBLICATIONS
   ============================================================ */
#publications{background:var(--surface-container-low)}
.pub-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;align-items:center}
.chipset{display:flex;flex-wrap:wrap;gap:8px;flex:1}

.pub-list{display:flex;flex-direction:column;gap:var(--m3-spacing-md)}
.pub{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--m3-spacing-lg);align-items:start;
  padding:var(--m3-spacing-md);
}
.pub:hover{
  background:var(--surface-container-low);
  border-color:var(--outline);
  box-shadow:var(--elev-2);
  transform:translateY(-2px);
}
.pub.hide{display:none}
.pub-thumb-ph{
  width:120px;height:120px;border-radius:var(--shape-md);object-fit:cover;display:block;
  background:var(--surface-container-high);border:1px solid var(--outline-variant);
}
.pub-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.pub-title{color:var(--on-surface);margin:0}
.pub-title a{color:inherit;text-decoration:none}
.pub-title a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.pub-authors{color:var(--on-surface-variant);margin:0}
.pub-authors em{color:var(--primary);font-style:normal;font-weight:700;border-bottom:1.5px solid var(--primary)}
.pub-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.pub-venue-pill{
  display:inline-flex;align-items:center;gap:8px;padding:4px 12px;
  border-radius:var(--shape-full);border:1px solid var(--outline-variant);
  background:var(--surface-container-high);
  font-family:"Roboto Mono",monospace;font-size:.78rem;color:var(--on-surface);
  white-space:nowrap;
  font-weight:500;
}
.pub-award-pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 14px;
  border-radius:var(--shape-full);
  background:var(--error-container);color:var(--on-error-container);
  font-size:.85rem;font-weight:600;
  border:1px solid var(--error-container);
}
.pub-award-pill .m3-icon{font-size:20px}

/* ============================================================
   PROJECTS
   ============================================================ */
.grid-proj{display:grid;grid-template-columns:1fr 1fr;gap:var(--m3-spacing-md)}
.proj{
  position:relative;
  display:flex;flex-direction:column;min-height:300px;
}
.proj:hover{
  background:var(--surface-container-low);
  border-color:var(--outline);
  box-shadow:var(--elev-2);
  transform:translateY(-2px);
}
.proj-media{height:160px;position:relative;overflow:hidden;
  background:var(--surface-container-high)}
.proj:nth-child(2) .proj-media{background:var(--surface-container-high)}
.proj-media.media-placeholder{height:auto;min-height:160px;border:none;border-radius:0}
.proj-body{padding:var(--m3-spacing-md);display:flex;flex-direction:column;gap:var(--m3-spacing-xs);flex:1}
.proj-body .eyebrow{color:var(--primary)}
.proj-body p{color:var(--on-surface-variant);flex:1}
.proj-body md-filled-tonal-button,.proj-body md-filled-button,.proj-body md-outlined-button{margin-top:4px}
.proj-stats{display:flex;flex-wrap:wrap;gap:20px;margin:2px 0}
.proj-stat b{display:block;font-family:"Roboto Flex";font-weight:600;font-size:1.35rem;
  line-height:1.1;color:var(--primary)}
.proj-stat span{font-family:"Roboto Mono",monospace;font-size:.64rem;letter-spacing:.5px;
  text-transform:uppercase;color:var(--on-surface-variant)}

/* ============================================================
   NEWS CAROUSEL
   ============================================================ */
#news{background:var(--surface-container-low)}
.news-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;max-width:none}
.news-nav{display:flex;gap:4px;flex-shrink:0}
.news-nav md-icon-button[disabled]{opacity:.35}
.news-carousel{list-style:none;display:flex;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 4px 12px;margin:0 -4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.news-carousel::-webkit-scrollbar{display:none}
.news-slide{flex:0 0 min(340px,85%);scroll-snap-align:start;display:flex}
.news-date{font-family:"Roboto Mono",monospace;font-size:.72rem;letter-spacing:.5px;
  text-transform:uppercase;color:var(--on-surface-variant)}
.is-new .news-date{color:var(--primary)}
.news-card{
  padding:var(--m3-spacing-md);
  display:flex;flex-direction:column;gap:6px;width:100%;
}
.news-card:hover{background:var(--surface-container-high)}
.news-title{color:var(--on-surface);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.news-badge{font-family:"Roboto Mono",monospace;font-size:.6rem;letter-spacing:1px;
  text-transform:uppercase;font-weight:500;padding:2px 8px;border-radius:var(--shape-full);
  background:var(--primary);color:var(--on-primary)}
.news-body{color:var(--on-surface-variant);margin-top:4px}


/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:28px 0 24px;border-top:1px solid var(--outline-variant);
  color:var(--on-surface-variant)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer a{color:var(--primary);font-weight:500}

/* Nav drawer (mobile) */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:150;opacity:0;
  pointer-events:none;transition:opacity var(--dur-med)}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;bottom:0;width:360px;max-width:80vw;z-index:160;
  background:var(--surface-container-low);padding:24px 12px;
  transform:translateX(-100%);transition:transform var(--dur-med) var(--ease-emphasized);
  display:flex;flex-direction:column;gap:4px;box-shadow:var(--elev-3)}
.drawer.open{transform:translateX(0)}
.drawer .d-head{display:flex;align-items:center;gap:12px;padding:8px 16px 20px}
.drawer-list{background:transparent}
.drawer-list md-list-item{border-radius:var(--shape-full);margin-block:2px}
.drawer-list md-list-item.active{
  background:var(--secondary-container);
  color:var(--on-secondary-container);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  :root {
    --m3-grid-columns: 8;
    --m3-grid-gutter: var(--m3-spacing-lg);
    --m3-grid-margin: var(--m3-spacing-lg);
  }
  section{padding-block:44px}
  .section-head{margin-bottom:20px}
  .profile-card--intro{grid-template-columns:156px minmax(0,1fr)}
  .profile-name{font-size:2.5rem}
  .avatar-placeholder{width:156px}
  .resource-grid,.grid-research{grid-template-columns:1fr 1fr}
}
@media (max-width:1020px){
  .nav{display:none}
  .menu-btn{display:grid}
}
@media (max-width:680px){
  :root {
    --m3-grid-columns: 4;
    --m3-grid-gutter: var(--m3-spacing-md);
    --m3-grid-margin: var(--m3-spacing-md);
  }
  section{padding-block:36px}
  .profile-name{font-size:2rem}
  .profile-card,.resource-card{padding:12px;gap:8px}
  .profile-card--intro{grid-template-columns:1fr;justify-items:center;text-align:left;gap:16px;align-items:start}
  .profile-media{width:clamp(190px,58vw,220px);justify-self:center}
  .avatar-placeholder{width:100%}
  .profile-copy{align-items:stretch;width:100%;gap:12px}
  .profile-name,.profile-role{text-align:center}
  .profile-role{max-width:32rem;margin-inline:auto}
  .profile-summary{
    max-width:38rem;
    margin-inline:auto;
    text-align:left;
    line-height:1.55;
  }
  .profile-availability{align-self:center;justify-content:center;text-align:center;max-width:100%}
  .profile-actions{justify-content:center}
  .r-card{padding:12px}
  .proj-body{padding:12px}
  .resource-grid,.grid-research,.grid-proj{grid-template-columns:1fr}
  .pub{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:12px}
  .pub-thumb-ph{width:84px;height:84px}
  .pub-title{font-size:1.15rem}
  .news-slide{flex-basis:min(300px,85%)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}