:root{
  --paper:#FAFAF8;
  --ink:#0A0A0A;
  --grey:#6E6E68;
  --grey-2:#4A4A45;
  --faint:#93938C;
  --rule:#E2E2DC;
  --line:#C9C9C2;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  font-weight:300;
  font-size:clamp(1rem,0.95rem + 0.25vw,1.0625rem);
  line-height:1.6;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
a{color:inherit;}
a:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;}
h1,h2,h3{font-weight:300;letter-spacing:-0.02em;margin:0;line-height:1.1;}

/* ---------- lockup ---------- */
.lockup{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  line-height:1;
}
.lockup .bar{background:var(--ink);}
.lockup .word{letter-spacing:0.055em;}

.lockup--nav .bar{width:15px;height:26px;}
.lockup--nav .word{font-size:1.0625rem;letter-spacing:0.04em;margin-top:3px;}

.lockup--hero .bar{
  width:clamp(64px,8vw,104px);
  height:clamp(92px,11.5vw,150px);
}
.lockup--hero .word{
  font-size:clamp(2.5rem,1.3rem + 5vw,3.75rem);
  line-height:0.82;
  margin-top:0.6rem;
}

/* ---------- nav ---------- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:2.5rem clamp(1.5rem,5vw,5rem);
}
.nav-links{display:flex;gap:clamp(1.25rem,3vw,2.75rem);}
.nav-links a{
  font-size:0.9375rem;
  letter-spacing:0.02em;
  color:var(--grey);
  text-decoration:none;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a[aria-current]{color:var(--ink);font-weight:400;}

main{flex:1;}

/* ---------- landing ---------- */
.landing{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(4rem,12vh,8.25rem) 1.5rem 0;
}
.tagline{
  margin:clamp(0.75rem,1.6vw,1.125rem) 0 0;
  font-size:clamp(0.8125rem,0.75rem + 0.25vw,0.875rem);
  font-weight:300;
  letter-spacing:0.42em;
  text-indent:0.42em;
  color:var(--grey);
}
@media (max-width:30rem){
  .tagline{letter-spacing:0.22em;text-indent:0.22em;}
}
.landing-sub{
  margin:clamp(2.25rem,5vw,3.5rem) 0 0;
  font-size:0.9375rem;
  color:var(--faint);
  max-width:34rem;
}
@media (prefers-reduced-motion:no-preference){
  .landing > *{animation:fade .8s ease-out both;}
  .landing .tagline{animation-delay:.18s;}
  .landing .landing-sub{animation-delay:.28s;}
}
@keyframes fade{from{opacity:0;}to{opacity:1;}}

/* ---------- interior pages ---------- */
.wrap{
  padding:clamp(2.5rem,6vw,4.25rem) clamp(1.5rem,5vw,5rem) 0;
  max-width:64rem;
}
.page-head{
  display:flex;
  align-items:flex-end;
  gap:0.875rem;
  margin-bottom:clamp(2rem,4vw,2.75rem);
}
.page-head .tick{
  width:18px;
  height:52px;
  background:var(--ink);
  flex:none;
}
.page-head h1{font-size:clamp(2rem,1.3rem + 2.4vw,2.75rem);}

.lede{
  font-size:clamp(1.125rem,1rem + 0.6vw,1.25rem);
  line-height:1.75;
  max-width:60ch;
  margin:0 0 2.125rem;
}
.prose{max-width:62ch;line-height:1.75;margin:0 0 1.875rem;}
.prose.muted{color:var(--grey-2);}

.pair{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:2rem 3.5rem;
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:2.75rem;
  border-top:1px solid var(--rule);
}
.pair h2{font-size:1rem;font-weight:500;letter-spacing:0.01em;margin-bottom:0.875rem;}
.pair p{font-size:1rem;color:var(--grey-2);line-height:1.75;margin:0;}

/* ---------- cases ---------- */
.case{
  display:grid;
  grid-template-columns:12.5rem minmax(0,1fr);
  gap:1rem 2.5rem;
  padding:2.375rem 0;
  border-top:1px solid var(--rule);
}
.case:last-of-type{border-bottom:1px solid var(--rule);}
.metric{font-size:clamp(1.625rem,1.2rem + 1.4vw,2.125rem);letter-spacing:-0.02em;line-height:1.15;}
.metric-label{font-size:0.875rem;color:var(--faint);margin:0.5rem 0 0;line-height:1.5;}
.case h2{font-size:1.0625rem;font-weight:500;letter-spacing:0;margin:0 0 0.75rem;}
.case p{font-size:1rem;color:var(--grey-2);line-height:1.75;margin:0;max-width:52ch;}
@media (max-width:40rem){
  .case{grid-template-columns:1fr;}
}

/* ---------- form ---------- */
.form{max-width:35rem;margin-top:0.75rem;}
.form label{
  display:block;
  font-size:0.875rem;
  color:var(--grey);
  margin:1.375rem 0 0.4375rem;
}
.form input,
.form textarea{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  font-family:inherit;
  font-weight:300;
  font-size:1.0625rem;
  color:var(--ink);
  padding:0.625rem 0;
  border-radius:0;
}
.form input{height:2.875rem;}
.form textarea{min-height:6rem;resize:vertical;}
.form input:focus,
.form textarea:focus{outline:0;border-bottom-color:var(--ink);}
.form button{
  margin-top:2.125rem;
  background:var(--ink);
  color:var(--paper);
  border:0;
  font-family:inherit;
  font-size:0.9375rem;
  letter-spacing:0.03em;
  padding:0.9375rem 2.125rem;
  cursor:pointer;
}
.form button:hover{background:#2A2A26;}
.form-note{font-size:0.875rem;color:var(--faint);margin-top:1.5rem;}

/* ---------- placeholder marker ---------- */
.fill{background:rgba(10,10,10,0.07);box-shadow:0 0 0 3px rgba(10,10,10,0.07);}

/* ---------- footer ---------- */
footer{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 2rem;
  justify-content:space-between;
  padding:clamp(3rem,7vw,4rem) clamp(1.5rem,5vw,5rem) 2.5rem;
  font-size:0.8125rem;
  color:var(--faint);
}
footer a{text-decoration:none;}
footer a:hover{color:var(--ink);}