.crumbs{font-size:13px;margin:2px 0 10px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.side .cats a[aria-current]{font-weight:400;text-decoration:underline;text-underline-offset:4px}

/* Hero */
.shero{aspect-ratio:4/5}
.shero img{object-position:50% 18%}
.shero .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%)}
.shero .body{position:absolute;left:0;right:0;bottom:0;padding:22px 16px;display:flex;flex-direction:column;gap:12px;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.shero .kicker{margin:0;font:400 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.shero .lead{margin:0;font:300 clamp(40px,11vw,84px)/.98 var(--serif);letter-spacing:-.025em}
.shero p{margin:0;font-size:15px;line-height:1.55;max-width:520px}
.shero .btn{align-self:flex-start;color:#fff;border-color:#fff;background:rgba(0,0,0,.2);text-shadow:none}

/* Jump links */
.occ{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:14px 12px 4px;margin:0 -12px;position:sticky;top:96px;z-index:3;background:var(--bg)}
.occ::-webkit-scrollbar{display:none}
.occ a{flex:none;border:1px solid rgba(20,18,16,.3);padding:9px 14px;font-size:13px;letter-spacing:.02em;white-space:nowrap;text-decoration:none}
.occ a:hover{background:#141210;color:#fff;border-color:#141210}

/* Groups and weave tiles */
.vgroup{padding-top:30px;scroll-margin-top:150px}
.vgroup h2{margin:0 0 14px;font:300 clamp(26px,6vw,40px)/1.05 var(--serif);letter-spacing:-.015em;display:flex;align-items:baseline;gap:10px}
.vgroup h2 span{font:400 12px var(--sans);letter-spacing:.14em;opacity:.7}
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.vt{aspect-ratio:3/4;scroll-margin-top:150px}
.vt .ph{position:absolute;inset:0}
.vt .cap{padding:12px}
.vt .cap h3{font:300 20px/1.08 var(--serif);margin:0}
.vt .cap p{font-size:12px;line-height:1.4;margin:3px 0 0}

/* A to Z */
.az,.why,.faq{padding:40px 2px 8px}
.az h2,.why h2,.faq h2{margin:0 0 18px;font:300 clamp(28px,6vw,42px)/1.05 var(--serif);letter-spacing:-.015em}
.az ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px;font-size:15px;line-height:2}
.az a{text-decoration:none;border-bottom:1px solid rgba(20,18,16,.2)}
.az a:hover{border-color:currentColor}
.az .note{font-size:14px;margin:18px 0 0}

/* Why */
.why ol{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:w}
.why li{counter-increment:w;font-size:15px;line-height:1.55;padding-top:14px;border-top:1px solid rgba(20,18,16,.18)}
.why li::before{content:"0" counter(w);display:block;font-size:11px;letter-spacing:.14em;margin-bottom:6px}
.why strong{font-weight:400;display:block;font-family:var(--serif);font-size:21px;margin-bottom:2px}

/* FAQ */
.faq details{border-top:1px solid rgba(20,18,16,.18);padding:14px 0}
.faq details:last-child{border-bottom:1px solid rgba(20,18,16,.18)}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:20px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;font-size:15px;line-height:1.6;max-width:680px}
.faq+.visit{margin-top:32px}

@media (min-width:640px){
 .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .az ul{columns:3}
 .why ol{grid-template-columns:repeat(2,minmax(0,1fr))}
 .shero .body{padding:32px}
}
@media (min-width:960px){
 .shero{aspect-ratio:auto;height:clamp(520px,calc(100svh - 90px),720px)}
 .shero .shade{background:linear-gradient(to right,rgba(0,0,0,.7),rgba(0,0,0,.3) 50%,rgba(0,0,0,0) 75%),linear-gradient(to top,rgba(0,0,0,.4),rgba(0,0,0,0) 40%)}
 .shero .body{top:0;right:auto;width:min(55%,620px);padding:44px;justify-content:flex-end;gap:18px}
 .shero .lead{font-size:clamp(52px,5vw,84px)}
 .shero p{font-size:17px}
 .occ{margin:0;padding:16px 0 10px;flex-wrap:wrap;top:0}
 .vgroup,.vt{scroll-margin-top:90px}
 .vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .vt .cap{padding:18px}
 .vt .cap h3{font-size:24px}
 .vt .cap p{font-size:13px}
 .az ul{columns:4}
 .why ol{grid-template-columns:repeat(4,minmax(0,1fr))}
}