:root{
  --bg:#f7f7f4;
  --text:#171816;
  --muted:#71736e;
  --line:#dedfd9;
  --accent:#4f554d;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.01em;
}
a{color:inherit;text-decoration:none}
canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
  opacity:.52;
}
.container{
  width:min(calc(100% - 48px),var(--max));
  margin-inline:auto;
}
.site-header{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;gap:10px;align-items:center;font-weight:600}
.brand-mark{
  width:25px;height:25px;border:1px solid #b9bbb4;
  display:grid;place-items:center;font-size:12px;
  border-radius:50%;
}
.brand-name{font-size:14px}
.nav{display:flex;gap:24px;font-size:13px}
.nav a{color:#565952;transition:color .2s ease}
.nav a:hover{color:var(--text)}
.hero{
  min-height:590px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  align-items:end;
  padding:150px 0 84px;
  position:relative;
}
.hero-copy{max-width:760px}
.eyebrow{
  margin:0 0 16px;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#656860;
}
.hero h1{
  margin:0;
  font-size:clamp(52px,7.4vw,104px);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.055em;
}
.lede{
  max-width:520px;
  margin:30px 0 0;
  color:#656760;
  font-size:17px;
}
.hero-meta{
  align-self:end;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#868881;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mono{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.section{
  padding:86px 0 92px;
  border-top:1px solid var(--line);
}
.section-heading{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:8px;
  margin-bottom:52px;
}
.section-index{font-size:11px;color:#93958f;padding-top:3px}
.section-note{margin:0;color:#73756f;font-size:14px}
.entries{border-top:1px solid var(--line)}
.entry{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 90px 22px;
  gap:20px;
  align-items:center;
  padding:25px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .22s ease,background .22s ease;
}
.entry:hover{padding-left:8px}
.entry-number,.entry-meta{color:#92948e;font-size:11px}
.entry-main h2{
  margin:0 0 6px;
  font-size:21px;
  font-weight:500;
  letter-spacing:-.03em;
}
.entry-main p{margin:0;color:#777a73;font-size:14px}
.entry-arrow{color:#8d8f89;transition:transform .2s ease}
.entry:hover .entry-arrow{transform:translate(3px,-3px)}
.split{display:grid;grid-template-columns:1fr 1.6fr;gap:60px}
.lab-list{border-top:1px solid var(--line)}
.lab-item{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:22px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.lab-status{font-size:10px;letter-spacing:.09em;color:#858780;padding-top:3px}
.lab-item h3,.note h3{
  margin:0 0 6px;
  font-size:17px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.02em;
}
.lab-item p,.note p{margin:0;color:#767971;font-size:14px}
.notes-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.note{padding:22px 22px 24px;border-right:1px solid var(--line)}
.note:first-child{padding-left:0}
.note:last-child{border-right:0;padding-right:0}
.note-date{display:block;margin-bottom:36px;color:#90928c;font-size:10px}
.about-section{display:grid;grid-template-columns:1fr 1.6fr;gap:60px}
.about-copy{max-width:660px}
.about-lede{margin:0 0 28px;font-size:27px;line-height:1.28;letter-spacing:-.03em}
.about-copy p{color:#6f726b}
.detail{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:30px;
  padding:105px 0;
  border-top:1px solid var(--line);
}
.detail-label{font-size:10px;color:#92948e;letter-spacing:.08em}
.detail-content{max-width:820px}
.detail-content h2{
  margin:0 0 40px;
  font-size:clamp(34px,4vw,58px);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:500;
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:38px 52px;
}
.detail-key{
  display:block;
  margin-bottom:8px;
  color:#8a8c86;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.detail-grid p{margin:0;color:#6f726b}
.site-footer{
  padding:30px 0 44px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#83857e;
  font-size:12px;
}
.footer-left,.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{transition:color .2s ease}
.footer-links a:hover{color:var(--text)}

@media (max-width:820px){
  .container{width:min(calc(100% - 32px),var(--max))}
  .site-header{min-height:72px}
  .nav{gap:14px}
  .hero{
    min-height:510px;
    grid-template-columns:1fr;
    padding:110px 0 64px;
  }
  .hero-meta{margin-top:42px;flex-direction:row;gap:18px}
  .hero h1{font-size:clamp(46px,14vw,78px)}
  .split,.about-section{grid-template-columns:1fr;gap:38px}
  .section-heading{grid-template-columns:56px minmax(0,1fr);margin-bottom:38px}
  .notes-grid{grid-template-columns:1fr}
  .note,.note:first-child,.note:last-child{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:22px 0;
  }
  .note:last-child{border-bottom:0}
  .note-date{margin-bottom:22px}
  .entry{
    grid-template-columns:34px minmax(0,1fr) 22px;
    gap:12px;
  }
  .entry-meta{display:none}
  .detail{grid-template-columns:1fr;gap:14px;padding:82px 0}
  .detail-grid{grid-template-columns:1fr;gap:28px}
  .site-footer{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entry,.entry-arrow,.nav a,.footer-links a{transition:none}
}