.page-home{
  --home-band:#FFFCF5;
  --home-line:rgba(29,29,27,.16);
  --home-shadow:0 18px 44px -28px rgba(18,63,71,.5);
  background-color:var(--mist);
  background-image:repeating-linear-gradient(to bottom, rgba(29,29,27,0) 0 33px, rgba(29,29,27,.045) 33px 34px);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  padding-bottom:clamp(36px,5vw,72px);
  overflow-x:hidden;
}
.page-home *{box-sizing:border-box;}
.page-home .container{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
}
.page-home h1,
.page-home h2,
.page-home h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
  margin:0;
  color:var(--ink);
}
.page-home p{margin:0;}
.page-home a{color:var(--lake);text-decoration:none;}
.page-home a:hover{color:var(--ochre);}
.page-home .mono{font-family:var(--font-mono);font-weight:500;letter-spacing:.02em;}
.page-home .media__img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover;}
.page-home .media__cap{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.6;
  color:rgba(29,29,27,.62);
}

/* ---------- top context ---------- */
.home-topline{border-bottom:1px solid var(--home-line);background:rgba(244,241,234,.86);}
.home-topline__inner{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:center;
  justify-content:space-between;
  padding-block:10px;
}
.home-topline__meta{
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(29,29,27,.55);
}

/* ---------- hero frame ---------- */
.hero{padding-block:clamp(18px,3vw,36px) clamp(26px,4vw,44px);}
.hero__frame{
  position:relative;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(231,225,211,.5) 100%);
  box-shadow:var(--home-shadow);
}
.hero__corner{
  position:absolute;
  width:16px;
  height:16px;
  border:2px solid var(--ochre);
  pointer-events:none;
}
.hero__corner--tl{top:-2px;left:-2px;border-right:0;border-bottom:0;}
.hero__corner--tr{top:-2px;right:-2px;border-left:0;border-bottom:0;}
.hero__corner--bl{bottom:-2px;left:-2px;border-right:0;border-top:0;}
.hero__corner--br{bottom:-2px;right:-2px;border-left:0;border-top:0;}

.hero__bar{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  justify-content:space-between;
  padding:9px clamp(14px,2.4vw,24px);
  background:var(--deep);
  color:var(--mist);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero__bar-note{color:rgba(244,241,234,.62);}
.hero__ruler{
  height:9px;
  border-bottom:1px solid var(--home-line);
  background-image:repeating-linear-gradient(90deg, rgba(29,29,27,.34) 0 1px, rgba(29,29,27,0) 1px 11px);
  background-size:auto 5px;
  background-repeat:repeat-x;
  background-position:left bottom;
}
.hero__body{
  display:grid;
  gap:clamp(20px,3vw,34px);
  padding:clamp(16px,2.8vw,30px);
}
.hero__lead{min-width:0;}
.hero__lead .eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:10px;
}
.hero h1{
  font-size:clamp(2.15rem,6vw,3.9rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:14px;
}
.hero__intro{
  max-width:56ch;
  color:rgba(29,29,27,.78);
  margin-bottom:18px;
}
.hero__search{width:100%;max-width:640px;}

/* quick entries */
.quick{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.quick__link{
  display:grid;
  grid-template-columns:26px 1fr;
  grid-template-areas:"num label" "num note";
  gap:0 10px;
  align-items:baseline;
  padding:9px 12px;
  border:1px solid var(--home-line);
  border-left:3px solid var(--ochre);
  background:rgba(255,255,255,.55);
  color:var(--ink);
  transition:background-color .18s var(--ease), border-color .18s var(--ease);
}
.quick__link:hover,
.quick__link:focus-visible{
  background:#fff;
  border-left-color:var(--ochre-deep);
  color:var(--ink);
}
.quick__num{
  grid-area:num;
  font-size:11.5px;
  color:var(--ochre);
}
.quick__label{
  grid-area:label;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15.5px;
}
.quick__note{
  grid-area:note;
  font-size:12.5px;
  color:rgba(29,29,27,.6);
}

.hero__ver{margin-top:20px;flex-wrap:wrap;gap:6px;}

/* hero media */
.hero__media{
  margin:0;
  min-width:0;
  border:1px solid var(--line-strong);
  background:var(--deep);
  padding:8px;
}
.hero__media .media__img{
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--paper);
}
.hero__media .media__cap{
  color:rgba(244,241,234,.7);
  padding:6px 4px 2px;
}

/* ---------- generic section ---------- */
.hs{
  padding-block:clamp(34px,5vw,68px);
  border-top:1px solid var(--home-line);
}
.hs--tint{background:rgba(231,225,211,.42);}
.hs__head{max-width:64ch;margin-bottom:clamp(20px,3vw,32px);}
.hs__head .eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lake);
  margin-bottom:8px;
}
.hs__head h2{
  font-size:clamp(1.5rem,3.4vw,2.05rem);
  margin-bottom:10px;
}
.hs__lead{color:rgba(29,29,27,.74);}
.hs__split{
  display:grid;
  gap:clamp(20px,3.4vw,40px);
  align-items:start;
}
.hs__figure{
  margin:0;
  min-width:0;
  border:1px solid var(--home-line);
  background:#fff;
  padding:10px;
}
.hs__figure .media__img{aspect-ratio:15/8;background:var(--paper);}
.hs__figure--tall .media__img{aspect-ratio:9/11;}
.hs__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  margin-top:clamp(18px,2.6vw,26px);
  padding-top:16px;
  border-top:1px dashed var(--home-line);
}
.hs__foot-note{font-size:12.5px;color:rgba(29,29,27,.6);}

/* ---------- paths ---------- */
.paths{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.path{
  position:relative;
  padding:14px 14px 14px 22px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--home-line);
  border-left:3px solid var(--lake);
}
.path--ochre{border-left-color:var(--ochre);}
.path--lake{border-left-color:var(--lake);}
.path--tea{border-left-color:var(--tea);}
.path__num{
  display:inline-block;
  font-size:11.5px;
  padding:1px 6px;
  background:var(--deep);
  color:var(--mist);
  margin-bottom:8px;
}
.path--ochre .path__num{background:var(--ochre);}
.path--tea .path__num{background:var(--tea);}
.path__title{font-size:1.05rem;margin-bottom:6px;}
.path__text{
  font-size:14.5px;
  color:rgba(29,29,27,.76);
  margin-bottom:10px;
}
.path__meta{
  font-size:11.5px;
  letter-spacing:.08em;
  color:rgba(29,29,27,.5);
  margin-bottom:2px;
}
.path__next{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:13px;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}

/* ---------- version columns ---------- */
.vergrid{
  display:grid;
  gap:12px;
  grid-auto-flow:column;
  grid-auto-columns:minmax(212px,1fr);
  overflow-x:auto;
  padding-bottom:10px;
  scroll-snap-type:x proximity;
}
.ver{
  scroll-snap-align:start;
  border:1px solid var(--home-line);
  border-top:4px solid var(--lake);
  background:#fff;
  padding:14px;
}
.ver--21{border-top-color:var(--ochre);}
.ver--22{border-top-color:var(--lake);}
.ver--23{border-top-color:var(--tea);}
.ver--24{border-top-color:var(--indigo);}
.ver__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid var(--home-line);
}
.ver__no{font-size:1.35rem;font-weight:500;color:var(--ink);}
.ver__name{font-size:12.5px;color:rgba(29,29,27,.6);}
.ver__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.ver__item{
  position:relative;
  font-size:13.5px;
  line-height:1.65;
  color:rgba(29,29,27,.8);
  padding-left:2px;
}
.ver__key{
  display:block;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lake);
  margin-bottom:2px;
}
.ver__item.is-changed{
  padding-left:14px;
}
.ver__item.is-changed::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:0;
  height:0;
  border-left:5px solid var(--wine);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
}
.ver__item.is-changed .ver__key{color:var(--wine);}

/* ---------- case groups ---------- */
.casegroups{display:grid;gap:12px;min-width:0;}
.casegroup{
  border:1px solid var(--home-line);
  background:rgba(255,255,255,.66);
  padding:14px;
  border-bottom:2px solid var(--home-line);
}
.casegroup__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin-bottom:8px;
}
.casegroup__title{font-size:1rem;flex:1 1 140px;}
.casegroup__count{
  font-size:11.5px;
  color:var(--tea);
}
.casegroup__list{
  margin:0 0 10px;
  padding-left:18px;
  font-size:14px;
  color:rgba(29,29,27,.76);
}
.casegroup__list li{margin-bottom:4px;}
.casegroup__link{
  font-family:var(--font-mono);
  font-size:12.5px;
  border-bottom:1px solid currentColor;
}

/* ---------- library ---------- */
.lib{min-width:0;}
.lib__issue{
  border:1px solid var(--home-line);
  border-left:4px solid var(--indigo);
  background:#fff;
  padding:16px;
  margin-bottom:12px;
}
.lib__issue-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--indigo);
  margin-bottom:6px;
}
.lib__issue-title{font-size:1.15rem;margin-bottom:8px;}
.lib__issue-text{
  font-size:14.5px;
  color:rgba(29,29,27,.76);
  margin-bottom:12px;
}
.lib__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}
.lib__list li{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:8px;
  align-items:baseline;
  font-size:13.5px;
  padding:7px 10px;
  background:rgba(244,241,234,.9);
  border-left:2px solid var(--lake-soft);
  color:rgba(29,29,27,.8);
}
.lib__list .mono{font-size:11.5px;color:var(--lake);}

/* ---------- ops ---------- */
.ops__grid{display:grid;gap:clamp(16px,2.6vw,26px);}
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;
  background:var(--home-line);
  border:1px solid var(--home-line);
}
.stat{
  background:var(--home-band);
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.stat__num{
  font-size:1.7rem;
  font-weight:500;
  color:var(--ochre);
  line-height:1.1;
}
.stat__label{font-size:12.5px;color:rgba(29,29,27,.68);line-height:1.5;}

.support{
  background:var(--deep);
  color:var(--mist);
  padding:18px;
  border-top:4px solid var(--ochre);
}
.support__title{color:var(--mist);font-size:1.1rem;margin-bottom:8px;}
.support__text{
  font-size:14px;
  color:rgba(244,241,234,.78);
  margin-bottom:14px;
}
.support__list{
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:7px;
  font-size:13.5px;
}
.support__list li{display:grid;gap:1px;}
.support__list .mono{
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lake-soft);
}
.support__list a{color:var(--mist);border-bottom:1px solid rgba(244,241,234,.4);}
.support__list a:hover{color:var(--lake-soft);}
.support__meta{
  font-size:11px;
  color:rgba(244,241,234,.55);
  padding-top:10px;
  border-top:1px solid rgba(244,241,234,.18);
  margin-bottom:10px;
}
.support__link{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--lake-soft);
  border-bottom:1px solid currentColor;
}

.creds{
  list-style:none;
  margin:clamp(18px,2.6vw,26px) 0 0;
  padding:0;
  display:grid;
  gap:8px;
  font-size:13.5px;
  color:rgba(29,29,27,.74);
}
.creds li{
  position:relative;
  padding-left:16px;
}
.creds li::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:7px;
  height:1px;
  background:var(--tea);
}

/* ---------- closing ---------- */
.closing{padding-block:clamp(26px,4vw,52px) 0;}
.closing__panel{
  position:relative;
  border:1px solid var(--ochre);
  background:linear-gradient(180deg,#FFFCF5 0%,rgba(231,225,211,.7) 100%);
  padding:clamp(20px,3.4vw,38px);
}
.closing__corner{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:22px;
  height:22px;
  border-right:2px solid var(--ochre-deep);
  border-bottom:2px solid var(--ochre-deep);
  pointer-events:none;
}
.closing__panel .eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:8px;
}
.closing__panel h2{
  font-size:clamp(1.45rem,3.6vw,2rem);
  margin-bottom:10px;
}
.closing__text{
  color:rgba(29,29,27,.76);
  max-width:58ch;
  margin-bottom:16px;
}
.closing__search{width:100%;max-width:660px;}
.closing__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

/* ---------- breakpoints ---------- */
@media (min-width:640px){
  .quick{grid-template-columns:repeat(3,minmax(0,1fr));}
  .quick__link{grid-template-columns:1fr;grid-template-areas:"num" "label" "note";gap:2px;}
  .quick__num{margin-bottom:2px;}
  .creds{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:900px){
  .hero__body{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:start;}
  .hs__split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
  .hs__split--rev{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}
  .ops__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;}
  .vergrid{
    grid-auto-flow:row;
    grid-template-columns:repeat(4,minmax(0,1fr));
    overflow:visible;
    padding-bottom:0;
  }
  .quick{gap:10px;}
}

@media (min-width:1080px){
  .hs__split .hs__figure{align-self:end;}
  .casegroups{gap:14px;}
}

@media (prefers-reduced-motion:reduce){
  .page-home .quick__link{transition:none;}
}
<<<END>>>