/* ========= Proxima Nova (self-hosted, regular + bold only) ========= */
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/proxima_nova_regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/proxima_nova_bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ========= Reset / base ========= */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
img{max-width:100%;display:block;height:auto}

/* All links are black and always underlined (continuous under descenders) */
:root { --link: #111111; }

a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: .1em;
  text-decoration-skip-ink: none;
  -webkit-text-decoration-skip: none;
}

/* ========= Design tokens ========= */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#5c5f67;
  --line:#e8e8ec;

  --radius: 14px;
  --maxw: 1160px;
  --gap: clamp(22px, 3.8vw, 40px);
  --lh: 1.75;

  /* fluid type – switch to fixed px if preferred */
  --fs-0: clamp(15px, 1.35vw, 17px);
  --fs-1: clamp(20px, 2.2vw, 24px);
  --fs-2: clamp(26px, 3.2vw, 32px);
  --fs-3: clamp(32px, 4.4vw, 40px);

  /* portrait width (slightly bigger than before) */
  --intro-photo: clamp(180px, 19vw, 220px);
}

body{
  background:var(--bg); color:var(--text);
  font-family:"Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif;
  font-size:var(--fs-0); line-height:var(--lh);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
p + p { margin-top: 0.7rem; }

/* Focus & a11y */
a:focus-visible, button:focus-visible { outline:2px solid #000; outline-offset:3px; }
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--bg); color:#000;
  padding:.55rem .8rem; border:1px solid var(--line); border-radius:8px;
}
.skip-link:focus{ left:.5rem; top:.5rem; z-index:1000 }

/* ========= Layout ========= */
.page{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  gap:var(--gap);
  padding:clamp(20px, 3.5vw, 44px);
}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:.25rem; /* no border */
}
.site-title{ font-size:var(--fs-3); font-weight:700; line-height:1.1; letter-spacing:.2px; }

/* Main and intro */
main{ display:grid; gap:calc(var(--gap)*1.5); } /* slightly closer to Research */

.intro{
  display:grid;
  grid-template-columns: var(--intro-photo) minmax(0, 1fr);
  gap:var(--gap);
  align-items:start; /* we'll center the photo only */
}
.intro > .card{
  grid-column: 1 / 2;
  inline-size: var(--intro-photo);
  justify-self: start;
  align-self: center;     /* vertically center photo vs. text block */
}
.intro > .summary{
  grid-column: 2 / 3;
  min-inline-size: 0;
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fafafa;
}
.card img{
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.summary p{ color:var(--muted); max-width:70ch; }
.contact .line{ margin-top:.7rem; color:var(--muted); }
.contact .email { white-space: nowrap; }
@media (max-width: 420px){ .contact .email { white-space: normal; } }

/* Section titles */
.section-title{ font-size:var(--fs-2); font-weight:700; margin-bottom:.6rem; }
.note{ color:var(--muted); font-size: .98em; margin-bottom: calc(var(--gap) * 0.6); }

/* Publications (no horizontal separator lines) */
.pubs{ display:grid; gap:calc(var(--gap) * 1.25); }
.pub{
  display:grid;
  grid-template-columns:minmax(220px, 300px) 1fr;
  gap:calc(var(--gap) * 1.1);
  align-items:start;
  padding-bottom:calc(var(--gap)*.6);
  border-bottom: none; /* removed lines */
}
.pub h3{ font-size:var(--fs-1); line-height:1.28; }
.pub .authors, .pub .venue{ color:var(--muted); }
.thumb{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff1; text-decoration: none; }
.pub .title{ font-weight:700; }

.paper-links { margin-top:.55rem; }
.paper-links a{ color: var(--link); }
.paper-links .dot { color: var(--muted); margin: 0 .35rem; }

/* Footer */
footer{ border-top:1px solid var(--line); padding-top:1rem; color:var(--muted); font-size:.98em; }

/* Responsive tweaks */
@media (max-width: 900px){
  .intro{
    grid-template-columns: 1fr;
  }
  .intro > .card{
    grid-column: 1 / 2;
    inline-size: clamp(180px, 54vw, 230px); /* centered, slightly larger than before */
    justify-self: center;
    align-self: start;
  }
  .intro > .summary{
    grid-column: 1 / 2;
  }
  .pub{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }