.hero .name{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-size:17px;color:rgba(255,255,255,.85);margin-bottom:18px}

/* why it exists: text and the published report */
.why2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
.why2 .prose{font-size:var(--fs-lg);font-weight:300;line-height:1.55;max-width:56ch;margin-top:20px}
.why2 .prose + .prose{margin-top:16px}
.why2 .fr{display:block;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 24px 48px rgba(6,46,55,.14);transform:rotate(1.2deg)}
.why2 .fr img{width:100%;height:auto}
.why2 .cap{margin-top:14px;font-size:14px;color:var(--muted)}
@media (max-width:900px){.why2{grid-template-columns:1fr}}

/* people beside the why: four photos */
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mosaic img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.mosaic img:nth-child(2n){margin-top:28px}
/* what we do: three activity cards */
.acts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.acts3>*{padding:30px 28px;border-radius:22px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.acts3 b{display:block;color:var(--ink);display:block;font-weight:500;font-size:clamp(20px,1.5vw,24px)}
.acts3 p{flex:1;margin-top:12px;color:var(--muted);font-size:16px;line-height:1.55}
@media (max-width:900px){.acts3{grid-template-columns:1fr;max-width:560px}}

/* events held: newest first */
.evgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
.ev{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:transform .2s ease}
.ev:hover{transform:translateY(-3px)}
.ev .im{aspect-ratio:4/3;overflow:hidden;background:var(--tint);display:grid;place-items:center;color:var(--petrol)}
.ev .im img{width:100%;height:100%;object-fit:cover;object-position:top}
.ev .im span{font:700 44px/1 var(--stamp);opacity:.9}
.ev .im span small{display:block;margin-top:8px;font:700 11px/1 var(--stamp);letter-spacing:.16em;text-transform:uppercase;opacity:.7;text-align:center}
.ev .tx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.ev .d{font:700 11px/1.3 var(--stamp);letter-spacing:.14em;text-transform:uppercase;color:var(--petrol)}
.ev strong{font-weight:500;font-size:17px;line-height:1.3}
.ev .c{margin-top:auto;padding-top:6px;font-size:14px;color:var(--muted)}
@media (max-width:1000px){.evgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.evgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ev .tx{padding:12px 14px 14px}.ev strong{font-size:15px}}

.earlier{margin-top:40px;border-top:1px solid var(--line)}
.earlier h3{font:700 12px/1.3 var(--stamp);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:20px 0 6px}
.earlier ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 20px}
.earlier li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.earlier li span{display:block;font:700 11px/1.3 var(--stamp);letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);margin-bottom:4px}
@media (max-width:900px){.earlier ul{grid-template-columns:1fr 1fr}}
/* report shelf: same height, each page at its own width */
.shelf .shot{flex:0 0 auto}
.shelf .shot .fr{height:clamp(260px,30vw,420px)}
.shelf .shot img{height:100%;width:auto}
.shelf .shot figcaption{max-width:280px}
/* in figures */
.figs3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px;border-top:1px solid var(--line)}
.figs3 div{padding:28px 24px 8px 0}
.figs3 div+div{padding-right:24px;border-right:1px solid var(--line)}
.figs3 strong{display:block;font-size:clamp(40px,4vw,64px);font-weight:400;letter-spacing:-.02em;line-height:1}
.figs3 span{display:block;margin-top:10px;color:var(--muted);font-size:16px}
@media (max-width:700px){.figs3{grid-template-columns:1fr}.figs3 div+div{padding-right:0;border-right:0;border-top:1px solid var(--line)}}

/* join: its own action */
.joinband{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.joinband .acts{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}
@media (max-width:900px){.joinband{grid-template-columns:1fr}}