:root{--accent:var(--soft)}
.hub-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));min-height:calc(100svh - 80px)}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:clamp(28px,5vw,64px);min-height:min(560px,80svh);text-decoration:none;overflow:hidden;isolation:isolate}
.door.photo{--accent:var(--photo)}
.door.leather{--accent:var(--leather);--ground:var(--leather-ground);background:var(--ground)}
/* text sits on these images, so they fill the panel and may be trimmed at the edges */
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s ease;border:0}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,color-mix(in srgb,var(--ground) 92%,transparent) 10%,color-mix(in srgb,var(--ground) 25%,transparent) 60%,color-mix(in srgb,var(--ground) 10%,transparent))}
@supports not (color:color-mix(in srgb,red,blue)){.door::after{background:linear-gradient(to top,rgba(0,0,0,.9) 10%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.1))}}
.door:hover img{transform:scale(1.04)}
.door .go{align-self:flex-start;margin-top:10px;font-size:14px;font-family:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid currentColor;color:var(--accent)}
.door + .door{border-left:1px solid var(--line)}
.door-title{font-size:clamp(40px,6vw,88px);line-height:1}
@media (max-width:679px){.door + .door{border-left:0;border-top:1px solid var(--line)}}
/* the hub has no buttons on the right of the header, so its links take that place */
.bar-nav{justify-content:flex-end}