/* Layout 6 · Side menu — the menu and the next outreach card stay on the left the whole time */
.d6{--sw:clamp(280px,22vw,340px);--fd:'Sora',system-ui,sans-serif;--dw:700;--tt:none;--ls:-.05em;--r:18px;padding-left:var(--sw)}
.d6 h2{font-size:clamp(38px,4.2vw,72px);line-height:1}
.d6 .nav{display:none}
.d6 .side{position:fixed;left:0;top:0;bottom:0;z-index:55;width:var(--sw);background:var(--ink);color:#fff;display:flex;flex-direction:column;gap:clamp(18px,2.6vh,30px);padding:28px 24px;overflow-y:auto}
.d6 .side-brand{display:flex;align-items:center;gap:12px;font:700 15px/1.05 var(--f)}
.d6 .side-brand img{width:46px;height:46px}
.d6 .side-links{display:grid;gap:2px}
.d6 .side-links a{position:relative;padding:9px 0 9px 18px;font:600 clamp(17px,1.3vw,20px) var(--fd);letter-spacing:-.03em;color:rgba(255,255,255,.65);transition:color .3s,padding .4s}
.d6 .side-links a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--z);transform:scale(0);transition:transform .3s}
.d6 .side-links a:hover,.d6 .side-links a.on{color:#fff;padding-left:24px}
.d6 .side-links a:hover::before,.d6 .side-links a.on::before{transform:scale(1)}
.d6 .side-next{position:relative;inset:auto;width:auto;margin-top:auto;background:rgba(255,255,255,.06);padding:20px}
.d6 .side-next h3{font:700 24px/1.1 var(--fd);letter-spacing:-.04em;text-transform:none}
.d6 .side-next .mini b{font:700 30px/1 var(--fd);letter-spacing:-.04em}
.d6 .side-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.d6 .side-btns .btn{color:#fff}
.d6 .announce{justify-content:flex-start}

/* hero: framed photo with the words over it */
.d6 .hero{height:calc(100svh - 41px);min-height:640px;background:var(--paper);padding:12px}
.d6 .h6{position:relative;height:100%;border-radius:var(--r);overflow:hidden;background:#000}
.d6 .h6-photos{position:absolute;inset:0}
.d6 .h6-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.d6 .h6-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.25) 100%)}
.d6 .h6-copy{position:absolute;left:clamp(24px,3.4vw,56px);bottom:clamp(24px,3.4vw,56px);right:38%;z-index:3;display:grid;gap:20px}
.d6 .ttl{font-size:clamp(46px,5.6vw,100px);line-height:.98}
.d6 .ttl .ln{display:block;overflow:hidden;padding-bottom:.06em}
.d6 .ttl .ln>span{display:inline-block}
.d6 .lede{max-width:50ch}
.d6 .hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.d6 .h6-thumbs{position:absolute;right:clamp(24px,3.4vw,56px);bottom:clamp(24px,3.4vw,56px);z-index:3;display:flex;gap:10px}
.d6 .h6-thumbs button{position:relative;width:clamp(70px,6vw,96px);aspect-ratio:3/4;border-radius:12px;overflow:hidden;opacity:.55;transition:opacity .4s,transform .4s}
.d6 .h6-thumbs button.on{opacity:1;transform:translateY(-8px)}
.d6 .h6-thumbs img{width:100%;height:100%;object-fit:cover}
.d6 .h6-thumbs i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--z);transform-origin:left;transform:scaleX(0)}

/* the content column is narrower, so some grids drop a column */
.d6 .prog-grid{grid-template-columns:repeat(2,1fr)}
.d6 .help-grid{grid-template-columns:repeat(2,1fr)}
.d6 .hcard{min-height:260px}
.d6 .steps h3,.d6 .hcard h3{font-weight:700}
.d6 .stats b,.d6 .need-num{font-weight:700;letter-spacing:-.06em}
.d6 .pn,.d6 .sn,.d6 .hn{font:700 15px var(--fd)}
@media (min-width:1500px){.d6 .prog-grid{grid-template-columns:repeat(3,1fr)}.d6 .help-grid{grid-template-columns:repeat(4,1fr)}}

@media (max-width:1000px){
  .d6{padding-left:0}
  .d6 .side{display:none}
  .d6 .nav{display:flex;color:#fff}
  .d6 .h6-copy{right:clamp(24px,3.4vw,56px);bottom:150px}
  .d6 .prog-grid,.d6 .help-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .d6 .hero{height:auto;min-height:100svh;padding:0}
  .d6 .h6{min-height:100svh;border-radius:0}
  .d6 .h6-copy{left:var(--g);right:var(--g);bottom:140px}
  .d6 .h6-thumbs{left:var(--g);right:auto;bottom:30px}
}
.d6 .side-brand img{width:100%;max-width:240px;height:auto}