:root{
  --bg:oklch(98% 0.001 250);
  --text-strong:oklch(16% 0.005 250);
  --text-mid:oklch(36% 0.006 250);
  --text-faint:oklch(48% 0.008 250);
  --link:oklch(28% 0.005 250);
  --link-strong:oklch(45% 0.08 235);
  --icon:oklch(30% 0.006 250);
  --divider:oklch(80% 0.006 250);
  --divider-faint:oklch(91% 0.003 250);
  --thumb-a:oklch(90% 0.01 250);
  --thumb-b:oklch(95% 0.005 250);
}
:root[data-theme="dark"]{
  --bg:#12141A;
  --text-strong:#F5F2EA;
  --text-mid:#D6D2C8;
  --text-faint:#A19C8E;
  --link:#9FB6E8;
  --link-strong:#8FB8CC;
  --icon:#D6D2C8;
  --divider:#3A3D45;
  --divider-faint:#2A2D35;
  --thumb-a:oklch(30% 0.01 250);
  --thumb-b:oklch(26% 0.006 250);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-strong);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  transition:background-color 0.2s ease;
}
a{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* nav */
nav.tabs{
  max-width:900px;
  margin:0 auto;
  padding:32px 40px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:32px;
}
.nav-links{
  display:flex;
  gap:40px;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-mid);
}
.nav-links a{color:inherit;text-decoration:none;}
.nav-links a.active{color:var(--text-strong);}

.theme-toggle{
  background:none;
  border:none;
  cursor:pointer;
  color:var(--text-strong);
  display:flex;
  padding:6px;
  line-height:0;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle svg{display:block;}
.theme-toggle .icon-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

/* focus states */
a:focus-visible,
.pub:focus-visible,
.theme-toggle:focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
  border-radius:1px;
}

/* home */
.home-col{
  max-width:640px;
  margin:0 auto;
  padding:40px 40px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.masthead{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:center;
  width:100%;
}
.portrait{
  width:100px;
  height:100px;
  flex-shrink:0;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--divider);
}
.masthead-text{text-align:left;}
.eyebrow{
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-faint);
}
h1{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:34px;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin:6px 0 0;
  color:var(--text-strong);
}

.about-text{width:100%;margin-top:28px;}
.about-text p{
  font-size:16px;
  line-height:1.8;
  color:var(--text-mid);
  text-align:left;
  margin:0 0 20px;
}
.about-text p:last-child{margin-bottom:0;}

.home-divider{
  width:60px;
  height:1px;
  background:var(--divider-faint);
  margin:28px 0 0;
}
.social-row{
  display:flex;
  gap:20px;
  margin-top:28px;
}
.social-row a{color:var(--icon);display:flex;text-decoration:none;}
.social-row svg{width:22px;height:22px;}

.page-footer-line{
  font-size:13px;
  color:var(--text-faint);
  margin-top:28px;
  padding-bottom:60px;
}

/* research */
.research-col{
  max-width:720px;
  margin:0 auto;
  padding:24px 40px 100px;
}
.epigraph{
  margin:0 0 48px;
  padding:0 0 0 20px;
  border-left:2px solid var(--divider-faint);
}
.epigraph p{
  font-size:16px;
  line-height:1.7;
  font-style:italic;
  color:var(--text-faint);
  margin:0;
}
.epigraph cite{
  display:block;
  font-size:12px;
  font-style:normal;
  color:var(--text-faint);
  opacity:0.75;
  margin-top:12px;
}

.section-title{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--text-strong);
  margin:0 0 32px;
  text-align:left;
}
.section-title.full{margin:64px 0 24px;}

.featured-grid{display:flex;flex-direction:column;gap:32px;}
.feature-card{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:24px;
  align-items:center;
}
.feature-card .visual{
  width:180px;
  height:135px;
  border-radius:3px;
  background:repeating-linear-gradient(45deg, var(--thumb-a) 0, var(--thumb-a) 6px, var(--thumb-b) 6px, var(--thumb-b) 12px);
  overflow:hidden;
}
.feature-card .visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.feature-card .visual.hover-video{cursor:pointer;}
.feature-card .title{font-size:18px;color:var(--text-strong);line-height:1.5;margin:0;}
.feature-card .details{font-size:14px;color:var(--text-faint);margin-top:8px;}
.feature-card .details a,
.pub .details a{color:var(--link-strong);font-weight:600;}
.feature-divider{height:1px;background:var(--divider);}

.pub-list{display:flex;flex-direction:column;gap:22px;}
.pub{display:grid;grid-template-columns:28px 1fr;gap:16px;}
.pub .bracket{font-size:14px;color:var(--text-faint);}
.pub .title{font-size:15px;color:var(--text-strong);line-height:1.5;margin:0;}
.pub .details{font-size:13px;color:var(--text-faint);margin-top:4px;}
.pub .details strong{color:var(--text-strong);font-weight:700;}

/* mobile */
@media (max-width:600px){
  nav.tabs{padding:20px 24px;gap:20px;}
  .nav-links{gap:22px;}
  .home-col{padding:32px 24px 0;}
  .research-col{padding:20px 24px 72px;}
  .masthead{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .masthead-text{text-align:center;}
  h1{font-size:28px;}
  .about-text p{text-align:left;}
  .feature-card{grid-template-columns:135px 1fr;gap:16px;}
  .feature-card .visual{width:135px;height:101px;}
}