.hero{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:44px;
  align-items:end;
  padding:56px 0 44px;
  border-bottom:1px solid var(--line);
}

.hero h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(42px,7vw,80px);
  line-height:.92;
  letter-spacing:-.035em;
  margin:0 0 16px;
}

.hero h1 em{font-style:normal;color:var(--accent);}
.hero p{margin:0;color:var(--bone-dim);font-size:15px;}

/* signature: the dilution ladder */

.ladder{border:1px solid var(--line);background:var(--ground-2);padding:14px;}

.ladder-head{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:10px;
}

.ladder-stack{
  background:linear-gradient(90deg,#0E0D0B 0%,#3C3833 34%,#918D85 66%,#DEDAD2 100%);
  display:flex;flex-direction:column;gap:2px;padding:2px;
}

.rung{
  height:34px;display:flex;align-items:center;padding-left:12px;
  transform-origin:left center;
  animation:flow .5s cubic-bezier(.2,.7,.3,1) backwards;
}

.rung span{
  font-family:var(--mono);font-size:11px;font-weight:500;color:var(--bone);
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}

.r1{background:rgba(148,120,214,.92);animation-delay:.05s;}
.r2{background:rgba(148,120,214,.58);animation-delay:.13s;}
.r3{background:rgba(148,120,214,.30);animation-delay:.21s;}
.r4{background:rgba(148,120,214,.13);animation-delay:.29s;}
.r5{background:rgba(148,120,214,.055);animation-delay:.37s;}

@keyframes flow{
  from{transform:scaleX(0);opacity:0;}
  to{transform:scaleX(1);opacity:1;}
}

.ladder-foot{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-dim);margin-top:10px;
}

.ratio{
  font-family:var(--mono);font-weight:600;font-size:26px;
  letter-spacing:-.02em;color:var(--accent);line-height:1;margin-bottom:4px;
}

.ratio small{
  display:block;font-size:10px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-dim);margin-top:7px;
}

.states{list-style:none;margin:0;padding:0;}
.states li{border-top:1px solid var(--line);padding:15px 0;}
.states li:last-child{border-bottom:1px solid var(--line);}

.state-name{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px;
}

.states p{margin:0;font-size:14px;color:var(--bone-dim);line-height:1.5;}
.states p b{color:var(--bone);font-weight:500;}

.vocab{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);margin:0;
}

.vocab > div{background:var(--ground-2);padding:16px;}

.vocab dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px;
}

.vocab dd{margin:0;font-size:13.5px;color:var(--bone-dim);line-height:1.45;}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:30px;align-items:start;padding-top:36px;}
}