:root{
  --paper:#f2f1ed;
  --ink:#191918;
  --text:#45443f;
  --secondary:#74726b;
  --quiet:#9a9891;
  --hairline:rgba(25,25,24,.14);
  --content:1320px;
  --gutter:clamp(22px,4vw,58px);
  --serif:"Newsreader", Georgia, serif;
  --sans:"Instrument Sans", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.shell{width:min(var(--content),calc(100% - (2 * var(--gutter))));margin-inline:auto}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(242,241,237,.92);
  backdrop-filter:blur(12px);
}

.header-inner{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--hairline);
}

.isotype{
  width:30px;
  height:30px;
  display:block;
  flex:0 0 auto;
}

.isotype img{width:100%;height:100%;object-fit:contain}
.isotype-fallback{
  width:30px;height:30px;display:none;place-items:center;
  border:1px solid var(--secondary);border-radius:50%;
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.04em;
  color:var(--secondary);
}

.nav{
  display:flex;
  gap:clamp(14px,2vw,30px);
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.015em;
  color:var(--secondary);
}
.nav a{transition:color .18s ease}
.nav a:hover{color:var(--ink)}

.hero{
  min-height:68vh;
  padding-top:clamp(70px,9vw,128px);
  padding-bottom:clamp(64px,8vw,112px);
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  column-gap:clamp(40px,7vw,110px);
  align-content:end;
}

.kicker,.section-label{
  margin:0;
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--quiet);
}

.kicker{grid-column:1 / -1;margin-bottom:18px}

.hero h1{
  margin:0;
  max-width:900px;
  font-size:clamp(52px,7vw,108px);
  line-height:.91;
  letter-spacing:-.05em;
  font-weight:400;
}

.hero-intro{
  margin:0;
  max-width:430px;
  align-self:end;
  font-size:clamp(17px,1.55vw,22px);
  line-height:1.24;
  font-weight:350;
  color:var(--text);
}

.manifesto,.principles,.curriculum,.contact{
  padding-top:clamp(64px,7vw,96px);
  padding-bottom:clamp(74px,8vw,118px);
  border-top:1px solid var(--hairline);
}

.manifesto-copy{
  margin-top:clamp(34px,4.5vw,62px);
  margin-left:auto;
  width:min(820px,72%);
}

.manifesto-copy p{
  margin:0 0 .95em;
  font-size:clamp(26px,3.25vw,45px);
  line-height:1.07;
  letter-spacing:-.027em;
  font-weight:350;
  color:var(--text);
}
.manifesto-copy p:first-child{color:var(--ink)}
.manifesto-copy p:last-child{margin-bottom:0}

.principles-list{margin-top:clamp(30px,4vw,54px)}
.principle{
  display:grid;
  grid-template-columns:minmax(150px,.65fr) 1.65fr;
  gap:clamp(30px,6vw,90px);
  padding:20px 0 24px;
  border-top:1px solid var(--hairline);
}
.principle:first-child{border-top:0}
.principle h2{
  margin:0;
  font-size:clamp(22px,2.15vw,31px);
  line-height:1.02;
  letter-spacing:-.025em;
  font-weight:400;
  color:var(--ink);
}
.principle p{
  margin:0;
  max-width:650px;
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.38;
  font-weight:350;
  color:var(--text);
}

.curriculum-head{
  display:grid;
  grid-template-columns:minmax(150px,.65fr) 1.65fr;
  gap:clamp(30px,6vw,90px);
  align-items:start;
}
.curriculum-intro{
  margin:0;
  max-width:690px;
  font-size:clamp(20px,2.25vw,31px);
  line-height:1.12;
  letter-spacing:-.018em;
  color:var(--text);
}
.cv-list{margin-top:clamp(44px,5vw,70px)}
.cv-item{
  display:grid;
  grid-template-columns:145px 1fr;
  gap:clamp(24px,4vw,60px);
  padding:14px 0 16px;
  border-top:1px solid var(--hairline);
}
.cv-period{
  font-family:var(--sans);
  font-size:10px;
  line-height:1.35;
  color:var(--quiet);
  padding-top:3px;
}
.cv-role{
  display:grid;
  grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);
  gap:clamp(26px,4vw,60px);
}
.cv-role h3{
  margin:0;
  font-size:clamp(17px,1.45vw,21px);
  font-weight:400;
  line-height:1.16;
  color:var(--ink);
}
.cv-role p{
  margin:0;
  max-width:680px;
  font-size:14px;
  line-height:1.42;
  color:var(--secondary);
}

.contact-main{
  margin-top:clamp(34px,4.5vw,62px);
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:clamp(50px,8vw,130px);
}
.contact-statement{
  margin:0;
  max-width:800px;
  font-size:clamp(30px,3.8vw,54px);
  line-height:1.02;
  letter-spacing:-.032em;
  color:var(--text);
}
.contact-links{
  display:grid;
  align-content:end;
  gap:8px;
  font-family:var(--sans);
  font-size:11px;
  color:var(--secondary);
}
.contact-links a{width:max-content;border-bottom:1px solid var(--hairline)}
.contact-links a:hover{color:var(--ink)}

.site-footer{padding:0 0 22px}
.footer-inner{
  padding-top:14px;
  border-top:1px solid var(--hairline);
  display:flex;
  justify-content:space-between;
  font-family:var(--sans);
  font-size:10px;
  color:var(--quiet);
}

@media(max-width:760px){
  .header-inner{min-height:58px}
  .isotype,.isotype-fallback{width:28px;height:28px}
  .nav{gap:11px;font-size:9px}
  .nav a:nth-child(2){display:none}
  .hero{
    min-height:62vh;
    grid-template-columns:1fr;
    row-gap:24px;
  }
  .hero-intro{max-width:520px}
  .manifesto-copy{width:100%;margin-left:0}
  .principle,.curriculum-head,.cv-item,.contact-main{grid-template-columns:1fr}
  .principle{gap:10px;padding:17px 0 20px}
  .curriculum-head{gap:24px}
  .cv-item{gap:8px;padding:13px 0 15px}
  .cv-role{grid-template-columns:1fr;gap:5px}
  .contact-main{gap:34px}
}