:root {
  --text: #1f2933;
  --muted: #66717d;
  --faint: #8e98a2;
  --line: #e6e9ec;
  --soft: #f6f8fa;
  --blue: #2563a9;
  --blue-dark: #174d83;
  --container: 960px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 50; top: 10px; left: 10px; padding: 8px 12px; color: #fff; background: var(--blue); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { background: rgb(255 255 255 / 94%); border-bottom: 1px solid var(--line); }
.nav { height: 68px; display: flex; align-items: center; justify-content: flex-end; }
.nav-links { display: flex; gap: 27px; }
.nav-links a { color: var(--muted); font-size: .79rem; font-weight: 500; }
.nav-links a:hover { color: var(--text); }

.hero { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:72px; align-items:center; min-height:390px; padding:76px 0 72px; border-bottom:1px solid var(--line); }
.hero-copy { max-width: 720px; }
h1 { margin: 0; color: #17212b; font-size: clamp(2rem, 3.5vw, 2.55rem); font-weight: 650; line-height: 1.15; letter-spacing: -.045em; }
.intro { max-width: 620px; margin: 24px 0 12px; color: #46515c; font-size: 1.14rem; line-height: 1.75; }
.intro strong { color: var(--text); font-weight: 600; }
.intro a { font-weight:500; }
.social-links { display: flex; flex-wrap: wrap; gap: 7px 22px; margin-top: 27px; }
.social-links a { font-size: .83rem; font-weight: 500; }
.portrait-placeholder { width:180px; aspect-ratio:4/5; display:grid; place-items:center; color:#7b8791; background:linear-gradient(145deg,#f1f4f6,#e7ecef); border:1px solid #dfe4e8; }
.portrait-placeholder span { font-size:.68rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }

.section { display: grid; grid-template-columns: 170px 1fr; gap: 55px; padding: 38px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 30px; }
.section-title h2 { margin: 0; color: #303b45; font-size: .94rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.section-title p { margin: 4px 0 0; color: var(--faint); font-size: .72rem; }
.section-body > p:first-child { margin-top: 0; }
.publication { max-width:700px; }
.pub-labels { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.pub-labels span { color: var(--blue); font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pub-labels span + span { color: var(--faint); }
.pub-info h3 { margin: 0 0 9px -2px; color: #25313b; font-size: .94rem; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; }
.authors { margin: 0; color: #65717b; font-size: .78rem; }
.authors strong { color: #36434e; font-weight: 600; }
.pub-links { display: flex; gap: 18px; margin-top: 13px; }
.pub-links a { font-size: .75rem; font-weight: 500; }

.education-item { display: flex; justify-content: space-between; gap: 30px; }
.education-item h3 { margin: 0; color: #28343e; font-size: .94rem; font-weight: 600; }
.education-item h3 .degree { display: inline-block; width: 2.7em; }
.education-item p { margin: 3px 0 0; color: var(--muted); font-size: .83rem; }
.education-item > span { flex: 0 0 auto; color: var(--faint); font-size: .75rem; }

footer { display: flex; justify-content: space-between; padding-top: 28px; padding-bottom: 55px; color: var(--faint); font-size: .72rem; }
footer p { margin: 0; }
footer a { color: var(--muted); }

@media (max-width: 720px) {
  .container { width: min(calc(100% - 36px), var(--container)); }
  .nav-links { gap: 16px; }
  .hero { grid-template-columns:minmax(0,1fr) 135px; gap:38px; min-height:0; padding:58px 0; }
  .portrait-placeholder { width:135px; }
  .section { grid-template-columns: 1fr; gap: 30px; padding: 29px 0; }
}

@media (max-width: 510px) {
  .nav-links { gap: 15px; }
  h1 { font-size: 2rem; }
  .intro { font-size: 1rem; }
  .hero { grid-template-columns:1fr; }
  .portrait-placeholder { grid-row:1; width:112px; }
  .education-item { flex-direction: column; gap: 8px; }
}