/* ============================================================================
   NextGen Summit — About
   Composition only: every colour, face and easing comes from site.css.
   The page is paced in single ideas, with whitespace doing the separating.
   ========================================================================= */

.ab{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,10vh,130px) var(--gutter)}
.ab--open{padding-top:calc(var(--nav-h) + clamp(50px,11vh,130px))}
.ab__big{font-size:clamp(84px,17vw,280px);line-height:.84;letter-spacing:-.05em;margin-top:clamp(14px,2.4vh,26px)}
.ab__lede{margin-top:max(clamp(22px,3.4vh,38px),calc(clamp(84px,17vw,280px) * .26));max-width:30ch;font:500 clamp(17px,1.5vw,23px)/1.5 var(--f-sans);color:var(--ink-2)}

/* a section heading is a quiet label; the sentence under it carries the weight */
.ab__k{font:800 11px/1.3 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.ab__p{margin-top:clamp(16px,2.4vh,24px);max-width:46ch;font:500 clamp(17px,1.55vw,24px)/1.5 var(--f-sans);color:var(--ink)}
.ab__p + .ab__p{margin-top:clamp(14px,2vh,20px);color:var(--ink-2)}

/* the one moment the page raises its voice */
.ab--quote{max-width:none;padding-block:clamp(60px,11vh,150px)}
.ab--quote > *{max-width:var(--maxw);margin-inline:auto}
/* the photograph runs to both edges: the page's only picture, and its only moment of people.
   It steps back out through the gutter the section pads it in by. */
.ab--quote > .ab__shot{max-width:none;margin:0 calc(var(--gutter) * -1) clamp(34px,5.5vh,66px)}
.ab__shot img{display:block;width:100%;height:clamp(240px,42vh,480px);object-fit:cover;object-position:42% 45%}
.ab__quote{max-width:17ch;font-size:clamp(38px,6.6vw,104px);line-height:1.06;letter-spacing:-.035em}

.road{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;border-top:1px solid var(--rule);max-width:70ch}
.road li{display:grid;grid-template-columns:minmax(8.5rem,14rem) minmax(0,1fr);gap:6px clamp(20px,3vw,48px);padding:clamp(16px,2.4vh,24px) 0;border-bottom:1px solid var(--rule)}
.road__k{font:800 clamp(13px,1.1vw,15px)/1.3 var(--f-sans);letter-spacing:.14em;text-transform:uppercase}
.road__v{font:500 clamp(15px,1.2vw,17.5px)/1.55 var(--f-sans);color:var(--ink-2)}
@media (max-width:640px){.road li{grid-template-columns:1fr;gap:5px}}

.forwho{list-style:none;margin:clamp(24px,3.6vh,36px) 0 0;padding:0;display:grid;gap:clamp(10px,1.5vh,14px);max-width:60ch}
.forwho li{padding-left:26px;position:relative;font:700 clamp(17px,1.5vw,23px)/1.45 var(--f-sans);color:var(--ink)}
.forwho li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:2px;background:var(--accent)}

/* the invitation, on ink */
.ab--end{max-width:none;background:var(--ink);color:#fff;padding-block:clamp(80px,15vh,180px)}
.ab--end > *{max-width:var(--maxw);margin-inline:auto}
.ab__end-t{font-size:clamp(42px,7.4vw,118px);line-height:1.06;letter-spacing:-.035em}
.ab__end-m{margin-top:clamp(20px,3vh,30px);font:700 clamp(11px,1vw,13px)/1.6 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ab__end-c{margin-top:clamp(26px,4vh,42px)}
@media (max-width:560px){.ab__end-c .btn{width:100%}}