:root{
  --paper:#FFFFFF;
  --paper-alt:#F6F8FA;
  --paper-line:#DDE1E5;
  --ink:#15171A;
  --ink-soft:#3D4148;
  --steel:#767C84;
  --blueprint:#1F4E79;
  --blueprint-tint:#EBF2F8;

  --display: 'Space Grotesk', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 720px;
  --edge: 28px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
::selection{ background:var(--blueprint); color:#fff; }

.reg-mark{
  position:fixed;
  width:14px; height:14px;
  z-index:40;
  pointer-events:none;
  opacity:.35;
}
.reg-mark::before, .reg-mark::after{
  content:"";
  position:absolute;
  background:var(--steel);
}
.reg-mark::before{ width:100%; height:1px; top:50%; }
.reg-mark::after{ height:100%; width:1px; left:50%; }
.reg-tl{ top:20px; left:20px; }
.reg-tr{ top:20px; right:20px; }
.reg-bl{ bottom:20px; left:20px; }
.reg-br{ bottom:20px; right:20px; }
@media (max-width:640px){ .reg-mark{ display:none; } }

header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px);
}
.header-inner{
  max-width:calc(var(--max) + 260px);
  margin:0 auto;
  padding:28px var(--edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--ink);
}
nav.primary-nav{ display:flex; gap:36px; }
nav.primary-nav a{
  font-family:var(--body);
  font-weight:400;
  font-size:14.5px;
  text-decoration:none;
  color:var(--ink-soft);
  transition:color .15s ease;
}
nav.primary-nav a:hover, nav.primary-nav a:focus-visible{ color:var(--blueprint); }
nav.primary-nav a[aria-current="page"]{ color:var(--ink); }
@media (max-width:640px){ nav.primary-nav{ display:none; } }

main{
  max-width:calc(var(--max) + 260px);
  margin:0 auto;
  padding:0 var(--edge);
}

.sheet-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--steel);
  text-transform:uppercase;
  margin-bottom:20px;
}

section{ padding:100px 0; }
section + section{ border-top:1px solid var(--paper-line); }

#hero{ padding-top:80px; padding-bottom:120px; }
.page-header{ padding-top:70px; padding-bottom:0; }

.eyebrow{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.05em;
  color:var(--blueprint);
  text-transform:uppercase;
  margin-bottom:28px;
}
h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.2rem, 5.5vw, 3.6rem);
  line-height:1.14;
  letter-spacing:-0.015em;
  margin:0 0 32px;
  max-width:18ch;
}
.hero-sub{
  font-size:1.15rem;
  font-weight:400;
  color:var(--ink-soft);
  max-width:52ch;
  margin:0 0 72px;
  line-height:1.75;
}
.hero-sub b{ color:var(--ink); font-weight:500; }

.spec-row{
  display:flex;
  flex-wrap:wrap;
  gap:56px;
  padding-top:36px;
  border-top:1px solid var(--paper-line);
}
.spec-field .label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:10px;
}
.spec-field .value{
  font-family:var(--display);
  font-weight:500;
  font-size:2rem;
  color:var(--ink);
}

h2{
  font-family:var(--display);
  font-weight:500;
  font-size:2rem;
  margin:0 0 28px;
  letter-spacing:-0.01em;
}

.lede{
  font-size:1.05rem;
  font-weight:400;
  color:var(--ink-soft);
  max-width:58ch;
  margin-bottom:56px;
  line-height:1.75;
}

.about-grid{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:56px;
  align-items:start;
}
.portrait-slot{
  aspect-ratio:3/4;
  background:var(--blueprint-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:11px;
  color:var(--blueprint);
  text-align:center;
  padding:10px;
  line-height:1.5;
}
@media (max-width:640px){
  .about-grid{ grid-template-columns:1fr; }
  .portrait-slot{ width:130px; }
}

.research-list{ display:flex; flex-direction:column; gap:64px; }
.research-item{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:28px;
}
.research-num{
  font-family:var(--mono);
  font-size:13px;
  color:var(--blueprint);
  padding-top:6px;
}
.research-item h3{
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:500;
  margin:0 0 14px;
}
.research-item p{
  color:var(--ink-soft);
  font-weight:400;
  margin:0 0 18px;
  max-width:58ch;
}
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--blueprint);
  text-transform:uppercase;
}
.tag:not(:last-child)::after{ content:"·"; margin-left:10px; color:var(--steel); }
@media (max-width:640px){
  .research-item{ grid-template-columns:1fr; gap:10px; }
}

.pub-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:48px;
}
.pub-filter .tag{ cursor:default; }

.pub-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pub-item{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:24px;
  padding:28px 0;
}
.pub-item + .pub-item{ border-top:1px solid var(--paper-line); }
.pub-year{
  font-family:var(--mono);
  font-size:14px;
  color:var(--steel);
  padding-top:2px;
}
.pub-title{ font-weight:500; margin:0 0 6px; }
.pub-meta{ font-size:.95rem; font-weight:400; color:var(--ink-soft); }
@media (max-width:640px){
  .pub-item{ grid-template-columns:1fr; gap:6px; }
}

.course-group{ margin-bottom:56px; }
.course-group:last-child{ margin-bottom:0; }
.course-group-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blueprint);
  margin-bottom:8px;
}
.course-list{ list-style:none; margin:0; padding:0; }
.course-item{
  display:grid;
  grid-template-columns:130px 1fr auto;
  gap:20px;
  align-items:baseline;
  padding:24px 0;
}
.course-item + .course-item{ border-top:1px solid var(--paper-line); }
.course-code{ font-family:var(--mono); font-size:13px; color:var(--blueprint); }
.course-name{ font-weight:400; }
.course-level{
  font-family:var(--mono);
  font-size:11px;
  color:var(--steel);
  text-transform:uppercase;
  white-space:nowrap;
}
@media (max-width:640px){
  .course-item{ grid-template-columns:1fr; gap:6px; }
}

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.contact-links{ list-style:none; margin:0; padding:0; }
.contact-links li{ margin-bottom:20px; font-weight:400; }
.contact-links a{
  text-decoration:none;
  border-bottom:1px solid var(--paper-line);
  padding-bottom:2px;
  transition:border-color .15s ease, color .15s ease;
}
.contact-links a:hover{ border-color:var(--blueprint); color:var(--blueprint); }
.cv-button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--blueprint);
  border:1px solid var(--blueprint);
  padding:16px 28px;
  transition:background .15s ease, color .15s ease;
}
.cv-button:hover{ background:var(--blueprint); color:#fff; }
@media (max-width:640px){
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
}

.next-page{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:32px 0 100px;
}
.next-page a{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--blueprint);
}
.next-page a:hover{ text-decoration:underline; }

footer{ padding:64px var(--edge) 80px; }
.title-block{
  max-width:calc(var(--max) + 260px);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  padding-top:32px;
  border-top:1px solid var(--paper-line);
}
.tb-cell .tb-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:6px;
}
.tb-cell .tb-value{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink-soft);
}

.blog-list{ list-style:none; margin:0; padding:0; }
.blog-item{
  padding:36px 0;
  display:block;
  text-decoration:none;
  color:inherit;
}
.blog-item + .blog-item{ border-top:1px solid var(--paper-line); }
.blog-date{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:10px;
}
.blog-title{
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:500;
  margin:0 0 10px;
  transition:color .15s ease;
}
.blog-item:hover .blog-title{ color:var(--blueprint); }
.blog-excerpt{
  color:var(--ink-soft);
  font-weight:400;
  margin:0;
  max-width:60ch;
}
.post-body p{
  font-size:1.05rem;
  font-weight:400;
  color:var(--ink-soft);
  max-width:64ch;
  margin:0 0 28px;
  line-height:1.8;
}
.back-link{
  display:inline-block;
  font-family:var(--mono);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--blueprint);
  margin-bottom:36px;
}
.back-link:hover{ text-decoration:underline; }

.research-item:nth-child(even),
.pub-item:nth-child(even),
.course-item:nth-child(even){
  background:var(--paper-alt);
  margin-left:calc(var(--edge) * -1);
  margin-right:calc(var(--edge) * -1);
  padding-left:var(--edge);
  padding-right:var(--edge);
}

/* Mobile nav menu */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  color:var(--ink);
}
.menu-toggle svg{ width:24px; height:24px; display:block; }

@media (max-width:640px){
  .menu-toggle{ display:block; }
  nav.primary-nav{
    display:none;
  }
  nav.primary-nav.mobile-open{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:64px;
    left:0;
    right:0;
    background:var(--paper);
    padding:8px var(--edge) 20px;
    gap:0;
    border-bottom:1px solid var(--paper-line);
    box-shadow:0 12px 24px rgba(0,0,0,0.08);
    z-index:35;
  }
  nav.primary-nav.mobile-open a{
    padding:14px 0;
    border-bottom:1px solid var(--paper-line);
    font-size:16px;
  }
  nav.primary-nav.mobile-open a:last-child{ border-bottom:none; }
}

/* Course/seminar photo blocks */
.course-photo{
  margin:24px 0 8px;
}
.course-photo img{
  width:100%;
  display:block;
  border:1px solid var(--paper-line);
}
.course-photo figcaption{
  font-family:var(--mono);
  font-size:11px;
  color:var(--steel);
  margin-top:8px;
}