:root{
  --text:#111;
  --bg:#fff;
  --muted:#6c757d;
  --link:#1772d0;
  --link-hover:#0f5fb1;
  --hairline:linear-gradient(90deg,rgba(60,60,67,.22),rgba(60,60,67,.10) 40%,rgba(60,60,67,0) 85%);

  --photo:clamp(160px,24vw,210px);
  --thumb:clamp(120px,28vw,150px);

  --nav-h:68px;
  --nav-backdrop:rgba(255,255,255,.75);
  --nav-border:rgba(60,60,67,.14);

  --safe-top: env(safe-area-inset-top, 0px);

  --container-pad: 18px;   /* same as .container side padding */
  --toggle-w: 40px;        /* hamburger/X button width */
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --text:#e7e7e7; --bg:#000; --muted:#9aa0a6;
    --link:#7ab1ff; --link-hover:#a9caff;
    --hairline:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.10) 40%,rgba(255,255,255,0) 85%);
    --nav-backdrop:rgba(0,0,0,.6);
    --nav-border:rgba(255,255,255,.14);
  }
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:hidden; }

html,body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg);
  margin:0; padding:0; font-size:14px; text-rendering:optimizeLegibility;

  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  font-synthesis-weight:auto;
}

a{ color:var(--link); text-decoration:none; text-underline-offset:3px; }
a:hover,a:focus{ color:var(--link-hover); }

.container{ width:100%; max-width:870px; margin:0 auto; padding:0 18px; }

@media (max-width:360px){
  .container{ padding:0 14px; }
  .section > *:not(.section__title){ margin-left:0; }
}

img,video{ max-width:100%; height:auto; }

/* Accessibility helpers */
.skip-link,.visually-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; border:0 !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  overflow:hidden !important; white-space:nowrap !important;
}

/* Anchor offset for fixed nav */
#research,#activities,#teaching{ scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:var(--nav-backdrop);
  border-bottom:1px solid var(--nav-border);
}
.nav__bar{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
body{ padding-top:calc(var(--nav-h) + var(--safe-top)); }

.brand{
  display:inline-flex; align-items:baseline; gap:.55rem;
  font-weight:800; letter-spacing:-0.014em;
  font-size:22px; line-height:1; color:inherit;
  white-space:nowrap;
}
.brand:hover,.brand:focus{ color:inherit; }
.brand__ko{ font-weight:600; font-size:15px; color:var(--muted); }

.nav__links{
  display:flex; align-items:center; gap:18px;
  font-weight:600; font-size:14px;
}
.nav__links a{ color:inherit; opacity:.92; white-space:nowrap; }
.nav__links a:hover,.nav__links a:focus{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* Hamburger toggle (hidden on desktop) */
.nav__toggle{
  display:none;
  width:40px; height:32px; border:0; border-radius:10px;
  background:transparent; padding:0; margin:0; cursor:pointer; line-height:0;
  gap:3px;
}
.nav__toggle-bar{
  display:block; width:20px; height:2px; background:currentColor; border-radius:2px;
}
.nav__toggle-bar + .nav__toggle-bar{ margin-top:0; }

@media (max-width:720px){
  .nav__toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }

  .nav__links{
    position:absolute;
    left:0; right:0;
    top:calc(var(--nav-h) + var(--safe-top));
    display:grid;
    gap:14px; /* spacious gap between items */

    /* translucent backdrop with subtle border */
    background:var(--nav-backdrop);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid color-mix(in srgb, var(--nav-border) 70%, transparent);

    /* safe-area padding for notches etc. */
    padding:
      14px
      calc(var(--container-pad) + 12px)
      16px
      max(var(--container-pad), env(safe-area-inset-left));

    transform:translateY(-12px);
    opacity:0; 
    pointer-events:none;
    transition:
      transform .22s cubic-bezier(.32,.72,0,1),
      opacity   .22s ease;
    will-change:transform, opacity;

    justify-items:end;   /* align menu items to the right */
    text-align:right;    /* right-align link text */
  }

  .nav__links.is-open{
    transform:translateY(0);
    opacity:1; 
    pointer-events:auto;
  }

  .nav__links a{
    display:block;
    padding:18px 0;       /* generous tap target (~50px tall) */
    min-height:44px;      /* ensures accessibility minimum */
    line-height:1.6;      /* comfortable text spacing */
    letter-spacing:.01em; /* subtle refinement like SF fonts */
    font-weight:500;      /* clear but not too bold */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    text-decoration:none;
  }

  /* subtle tactile feedback on tap */
  .nav__links a:active{
    opacity:.72;
    transform:translateY(0.5px);
    transition:opacity .12s ease, transform .12s ease;
  }

  /* clear focus ring for keyboard users */
  .nav__links a:focus-visible{
    outline:2px solid color-mix(in srgb, var(--nav-border) 80%, transparent);
    outline-offset:4px;
    border-radius:6px;
  }

  /* respect user’s reduced motion preference */
  @media (prefers-reduced-motion: reduce){
    .nav__links{ transition:none; }
    .nav__links a:active{ transform:none; }
  }
}

/* ===== Hero ===== */
.site-hero{ padding-top:18px; }

/* Safer grid for Safari */
.hero{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
}

.hero__photo{
  justify-self: end;
  display: flex;
  align-items: flex-end;
  width: auto;
  max-width: var(--photo);
}
.hero__photo img{
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--photo);
}

@media (min-width: 720px){
  .hero{
    grid-template-columns: 1fr minmax(auto, var(--photo));
  }
}

.profile-photo{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover; height:auto;
  border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.08);
}
@supports not (aspect-ratio:1 / 1){ .profile-photo{ height:auto; } }

.hero__text{ display:flex; flex-direction:column; gap:8px; }
.prose p{
  margin:0 0 .7rem;
  line-height:1.6;
  text-align:left;
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
@media (min-width: 1200px){
  .prose p{
    max-width: 45em;
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: break-word;
    text-wrap: normal;
  }
}

/* ===== Quick links (icon-only) ===== */
.links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:6px;
}
.links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  color:var(--text);
  transition: background .18s ease, color .18s ease, transform .15s ease;
}
.links a svg{
  width:20px; height:20px; display:block;
}
.links a svg path{ fill: currentColor; }
.links a svg rect{ fill:none; stroke:currentColor; stroke-width:1.6; }
.links a:hover,
.links a:focus{
  background:rgba(0,0,0,0.06);
  color:var(--link);
  transform:scale(1.1); 
}
@media (prefers-color-scheme: dark){
  .links a:hover,
  .links a:focus{
    background:rgba(255,255,255,0.08);
    color:var(--link-hover);
  }
}

/* ===== Mobile hero layout ===== */
@media (max-width: 860px){
  .hero{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "links"
      "text";
    row-gap: 12px;
  }
  .hero__photo{
    grid-area: photo;
    justify-self:center;
    width:auto; max-width:180px;
    margin-top:2px;
  }
  .hero__text{ display: contents; }
  .links{ grid-area: links; margin-top:8px; }
  .prose{ grid-area: text; }
}

/* ===== Sections ===== */
.section{ padding:24px 0 10px; }
.section__title{ margin:0 0 10px; font-size:17px; font-weight:700; position:relative; }
.section__title::after{ content:""; display:block; height:1px; margin-top:7px; background:var(--hairline); }
.section > *:not(.section__title){ margin-left:8px; }

/* ===== Publications ===== */
.pub-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.pub-card{ display:grid; grid-template-columns:var(--thumb) 1fr; gap:14px; padding:2px 0; align-items:center; }
@media (max-width:740px){
  .pub-card{ grid-template-columns:1fr; align-items:start; }
  .pub-card__media{ justify-self:start; }
}
.pub-card__media{ display:inline-block; }
.pub-card__media .thumb{
  position:relative; width:var(--thumb); max-width:100%;
  border-radius:10px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.08);
  aspect-ratio:1/1;
}
@supports not (aspect-ratio:1 / 1){
  .pub-card__media .thumb::before{ content:""; display:block; padding-top:100%; }
  .pub-card__media img{ position:absolute; inset:0; }
}
.pub-card__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .18s linear; will-change:opacity; display:block;
}
.pub-card__media img.before{ opacity:1; z-index:1; }
.pub-card__media img.after{ opacity:0; z-index:2; }
.pub-card__media:hover img.after{ opacity:1; }

.pub-card__body{ display:grid; row-gap:4px; }
.pub-card__body > *{ margin:0; }
.papertitle{ font-weight:700; font-size:15.5px; line-height:1.35; letter-spacing:-.003em; }
.papertitle a{ color:var(--link); }
.papertitle a:hover{ color:var(--link-hover); }

.authors{ font-size:13.9px; line-height:1.35; color:#222; }
@media (prefers-color-scheme: dark){ .authors{ color:#e5e5e5; } }
.authors a,.authors a:visited,.authors a:active{ color:inherit; text-decoration:none; }
.authors a:hover,.authors a:focus{ color:inherit; text-decoration:underline; }

.venue{ font-size:13.9px; line-height:1.35; color:#222; font-style:italic; }
@media (prefers-color-scheme: dark){ .venue{ color:#e5e5e5; } }
.upright{ font-style:normal; }
.bold{ font-weight:700; }

.links-line{ font-size:13.6px; line-height:1.35; color:#222; }
@media (prefers-color-scheme: dark){ .links-line{ color:#e5e5e5; } }
.summary{ display:none !important; }

.simple-list{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.muted{ color:var(--muted); }

.footer{ padding:20px 0 28px; text-align:center; }
.footer p{ margin:0; color:var(--muted); font-size:11px; }

.pub-card__media.preview img.after{ opacity:1; }

/* Focus ring */
:where(a, button):focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
  border-radius:8px;
}

/* Touch target improvement */
@media (hover:none){
  .nav__links a{ padding:10px 6px; margin:-10px -6px; }
}

/* Print */
@media print{
  .nav, .nav__links, .hero__photo, .pub-card__media, .links span { display:none !important; }
  body{ padding-top:0; font-size:12px; }
  .container{ max-width:none; padding:0; }
  a{ color:inherit; text-decoration:underline; }
}

/* Inline icon alignment */
.inline-icon {
  width:14px;
  height:14px;
  vertical-align:text-bottom;
  margin:0;
  fill: currentColor; 
}

/* Desktop-only line break helper */
.desktop-break { display: none; }
@media (min-width: 1024px){
  .desktop-break { display: inline; }
}

/* Hamburger → X animation */
.nav__toggle {
  position: relative;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav__toggle-bar {
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}