/* SUMMIT homepage. One grid, one type scale, three moves: scenes open from a framed
   plate to full screen and carry one line; text rises line by line; one ink
   curtain carries every change of state (the opening, page changes, giving). */
.opening{position:relative;height:125svh;min-height:740px;background:#b6a294}.opening-stage{height:100svh;min-height:590px;position:sticky;top:0;overflow:hidden;background:#aab9b9}.scene-wrap{position:absolute;inset:0;overflow:hidden}.hero-photo{position:absolute;max-width:none;display:block;will-change:transform}.scene-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.mountain-type{position:absolute;inset:0;z-index:2;mask-image:linear-gradient(#fff,#fff),url('assets/mountain-cutout.png');mask-repeat:no-repeat;mask-composite:exclude;mask-mode:alpha;pointer-events:none}.mountain-word{position:absolute;top:12%;left:3.3%;right:3.3%;line-height:0;will-change:transform}.mountain-word img{width:100%;height:auto;display:block}.hero-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,#152e3077,transparent 60%);pointer-events:none}.opening-copy{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);bottom:7%;color:#fff8ed}.opening-copy h1{font-size:clamp(50px,6vw,112px);letter-spacing:-.065em;line-height:1.04}.intro-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}.intro-line>span{display:block}.terrain-atmosphere{z-index:1;pointer-events:none}.loader{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:auto}.intro-cloud-volume{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}html.intro-loading .intro-line>span{transform:translate3d(0,calc((1 - var(--intro-lift,0))*110%),0)}html.intro-loading .site-header{transform:translateY(calc((1 - var(--intro-lift,0))* -110%))}
/* The opening: a flight down through the cloud onto the mountain. */
.intro-cloud-cover{position:absolute;inset:0;background:#b6a294;opacity:var(--cover,1)}
.intro-cloud-volume{opacity:var(--cloud-opacity,0)}
html.intro-loading .mountain-word img{transform:translate3d(0,calc((1 - var(--intro-lift,0))*40svh),0)}

/* ---- Paper chapters ----------------------------------------------------------- */
/* Every chapter is set the same way: the heading on the left of the grid, its one
   paragraph and link beginning at the seventh column. */
.chapter{position:relative;z-index:5;background:var(--paper);padding:180px var(--gutter) 170px}
.chapter h2{font-size:clamp(52px,6.6vw,124px);line-height:1;letter-spacing:-.066em;max-width:13ch;text-wrap:balance}
.manifesto .word{color:#b3b8ad;transition:color .5s ease}
.manifesto .word.is-read{color:var(--ink)}

/* Who we are: the statement, then what SUMMIT is, said plainly and at size. */
.who-copy{display:grid;grid-template-columns:6fr 5fr;column-gap:7%;align-items:center;margin-top:90px}
.who-text p+p{margin-top:30px}
.who-lead{font:450 clamp(30px,2.8vw,48px)/1.15 Manrope,sans-serif;letter-spacing:-.045em}
.who-copy p:not(.who-lead){font-size:19px;line-height:1.7;color:#3f564d;max-width:40ch}

/* What guides us: the heading and the value in hand stay put while you scroll
   through the eight; each lights in turn, its sentence beneath the heading.
   Without motion the list simply shows every sentence. */
.chapter-values{padding-top:0;padding-bottom:0}
.chapter-values.is-pinned{height:calc(100svh + 8 * 34svh)}
.values-stage{display:grid;grid-template-columns:5fr 7fr;column-gap:6%;align-items:center;padding:150px 0}
.chapter-values.is-pinned .values-stage{position:sticky;top:0;height:100svh;min-height:640px;padding:0}
.values-now{min-height:7.5em;margin-top:44px;max-width:30ch;font:450 clamp(21px,1.7vw,28px)/1.45 Manrope,sans-serif;letter-spacing:-.025em;color:#3f564d}
.values-now span{display:block;animation:value-in .8s cubic-bezier(.2,.75,.15,1) both}
@keyframes value-in{from{opacity:0;transform:translate3d(0,22px,0)}}
.chapter-values:not(.is-pinned) .values-now{display:none}
.value-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.value-list li{border-bottom:1px solid var(--line)}
.value-name{display:flex;align-items:center;gap:0;width:100%;padding:18px 0;text-align:left;font:450 clamp(24px,2.3vw,42px)/1.1 Manrope,sans-serif;letter-spacing:-.05em;color:#a9b1a9;transition:color .5s ease,transform .7s cubic-bezier(.2,.75,.15,1)}
.value-name:before{content:'';width:0;height:2px;margin-right:0;background:currentColor;transition:width .7s cubic-bezier(.65,0,.15,1),margin .7s cubic-bezier(.65,0,.15,1)}
.value-list li.is-open .value-name{color:var(--ink)}
.value-list li.is-open .value-name:before{width:.9em;margin-right:.45em}
.value-name:hover,.value-name:focus-visible{color:#5d6d63}
.value-text{max-width:42ch;padding-bottom:26px;font-size:18px;line-height:1.7;color:#3f564d}
.chapter-values.is-pinned .value-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}

/* Our work: three programs side by side, each a column on the same baseline. */
.work-intro{max-width:46ch;margin-top:40px;font-size:19px;line-height:1.7;color:#3f564d}
.work-columns{list-style:none;margin:100px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:4vw}
.work-columns li{padding-top:0}
.work-columns h3{font-size:clamp(30px,2.8vw,50px);line-height:1.05;letter-spacing:-.05em}
.work-columns p{margin-top:22px;font-size:18px;line-height:1.7;color:#3f564d;max-width:34ch}

/* Plates: framed views of the mountain inside the paper chapters. Each opens
   upward as it arrives and its picture drifts inside the frame as you scroll
   (motion.js sets --reveal and --drift). */
.plate{position:relative;margin:0;overflow:hidden;border-radius:24px;background:#d9d3c6;clip-path:inset(calc((1 - var(--reveal,1)) * 100%) 0 0 0 round 24px)}
.plate img{position:relative;top:-9%;display:block;width:100%;height:118%;object-fit:cover;transform:translate3d(0,calc(max(-1,min(1,var(--drift,0))) * -6.5%),0) scale(calc(1.16 - var(--reveal,1) * .16));will-change:transform}
.who-plate{aspect-ratio:4/5}
.work-plate{aspect-ratio:4/3;margin-bottom:30px}

/* The people: one centred statement, the four schools beneath it, one way in. */
.chapter-people{text-align:center}
.chapter-people h2{max-width:none;margin:0 auto}
.chapter-people h2>span{display:block}
.chapter-people h2>span+span{color:#7d8a82}
.faces{list-style:none;margin:64px auto 0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;max-width:1100px}
.faces li{aspect-ratio:3/4;overflow:hidden;border-radius:18px;background:#d9d3c6;transform:translate3d(0,calc((1 - var(--reveal,1)) * (40px + var(--k,0) * 26px)),0);opacity:calc(.25 + var(--reveal,1) * .75)}
.faces img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .6s ease,transform .8s cubic-bezier(.2,.75,.15,1)}
.faces li:hover img{filter:none;transform:scale(1.05)}
.school-row{list-style:none;margin:56px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;font:450 clamp(19px,1.6vw,26px) Manrope,sans-serif;letter-spacing:-.03em}
.school-row li+li:before{content:'/';margin:0 .8em;color:#9aa49c}
.people-line{max-width:40ch;margin:48px auto 0;font-size:19px;line-height:1.7;color:#3f564d}
.chapter-people .button-link{margin-top:40px}

/* ---- Scenes ------------------------------------------------------------------- */
/* A scene arrives as a framed plate on the paper, opens to full screen as it holds,
   and carries one line, always in the same place. */
.scene{position:relative;height:230svh;background:var(--paper)}
.scene-stage,.summit-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden}
.scene-frame{position:absolute;inset:0;clip-path:inset(calc((1 - var(--open,0)) * 13%) calc((1 - var(--open,0)) * 17%));will-change:clip-path}
.scene-frame .mountain-world{inset:0;transform:translate3d(0,calc((1 - var(--open,0)) * 9vh),0) scale(calc(1.18 - var(--open,0) * .18));transform-origin:50% 55%}
.scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#12262899 0%,#12262840 32%,transparent 58%),linear-gradient(90deg,#1226284d,transparent 55%);opacity:var(--open,0)}
.scene-line{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:10%;margin:0;max-width:13ch;color:#fff8ed;font:450 clamp(52px,6.6vw,124px)/1 Manrope,sans-serif;letter-spacing:-.066em;text-wrap:balance;pointer-events:none}

/* ---- The summit, and the screen that closes over it ---------------------------- */
.summit-section{position:relative;color:#fff8eb;background:var(--paper)}
.summit-world{inset:0}
.summit-section .scene-line{transition:opacity .6s ease,transform 1.1s cubic-bezier(.7,0,.2,1)}
.summit-section.is-given .scene-line{opacity:0;transform:translate3d(0,-10vh,0)}
.summit-hold{display:none}
.summit-section.is-pinned .summit-hold{display:block;height:320svh}
.summit-section.is-pinned .give-panel{position:sticky;top:0;height:100svh;min-height:600px;margin-top:-100svh;pointer-events:none}
.summit-section.is-pinned .summit-stage{min-height:600px}
.summit-section.is-pinned.is-given .give-panel{pointer-events:auto}
.summit-section.is-pinned .give-sheet{min-height:0}

/* ---- Right now --------------------------------------------------------------- */
/* After the climb, real help in one compact band: four numbers, each one tap. */
.now-section{position:relative;z-index:5;display:grid;grid-template-columns:5fr 7fr;column-gap:6%;align-items:start;background:var(--ink);color:var(--paper);padding:130px var(--gutter)}
.now-section h2{font-size:clamp(40px,4.4vw,80px);line-height:1.02;letter-spacing:-.06em;max-width:11ch}
.now-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #eee9df33}
.now-grid li{border-bottom:1px solid #eee9df33}
.now-grid li:nth-child(odd){border-right:1px solid #eee9df33}
.now-grid a{display:flex;flex-direction:column;gap:14px;padding:30px 28px 32px;transition:background-color .4s ease}
.now-grid li:nth-child(odd) a{padding-left:0}
.now-grid a:hover,.now-grid a:focus-visible{background:#eee9df0f}
.now-who{font-size:15px;line-height:1.4;color:#c4cec2}
.now-how{font:450 clamp(28px,2.6vw,46px)/1.05 Manrope,sans-serif;letter-spacing:-.045em}

/* ---- Follow the climb ------------------------------------------------------- */
/* The handle is set on the skyline of the mountain: each letter stands at the height
   of the ridge above it (motion.js), climbing there as the section arrives, and the
   pointer pushes a peak up beneath it. */
.social{position:relative;z-index:5;background:var(--paper);padding:170px var(--gutter) 140px;overflow:hidden;border-top:1px solid var(--line)}
.social h2{font-size:clamp(52px,6.6vw,124px);line-height:1;letter-spacing:-.066em;max-width:13ch}
.ridge-handle{display:block;margin-top:40px;color:var(--ink)}
.ridge-handle:focus-visible{outline-offset:12px}
.ridge-word{display:flex;padding-top:1.8em;font:450 80px/1 Manrope,sans-serif;letter-spacing:-.045em;white-space:nowrap}
.ridge-word span{display:inline-block;white-space:pre;transform:translate3d(0,var(--y,0),0);transition:transform 1s cubic-bezier(.2,.75,.15,1) calc(var(--n,0) * 26ms),opacity .8s ease calc(var(--n,0) * 26ms),color .4s ease}
.motion-on .ridge-word.will-reveal:not(.is-shown) span{transform:translate3d(0,.45em,0);opacity:0}
.ridge-handle.is-pointing .ridge-word span{transition:transform .6s cubic-bezier(.2,.75,.15,1),color .4s ease}
.ridge-handle:hover .ridge-word span{color:#2f5145}
.ridge-handle .ridge-word span:last-child{color:var(--muted)}
.home .site-footer{border-top:0}
{.chapter,.now-section{padding-left:max(var(--gutter),calc((100vw - 1700px)/2));padding-right:max(var(--gutter),calc((100vw - 1700px)/2))}}

@media(max-width:700px){
 .opening{height:112svh;min-height:620px}.opening-stage{min-height:560px}.mountain-word{top:17%;left:3%;right:3%}
 .opening-copy{display:block;bottom:8%}.opening-copy h1{font-size:11.8vw}
 .chapter{padding:110px var(--gutter) 100px}.chapter h2{font-size:12.4vw}.who-copy,.values-stage,.now-section{display:block}.who-plate{margin-top:44px;aspect-ratio:4/3}.chapter-values.is-pinned{height:calc(100svh + 8 * 30svh)}.chapter-values.is-pinned .values-stage{display:flex;flex-direction:column;justify-content:center;padding:70px 0 20px}.values-now{min-height:6em;margin:18px 0 26px;font-size:18px}.value-name{padding:11px 0;font-size:6.4vw}.faces{grid-template-columns:repeat(4,1fr);gap:8px}.who-copy p:not(.who-lead){margin-top:24px}.work-columns{grid-template-columns:1fr;row-gap:44px;margin-top:60px}.school-row{flex-direction:column;align-items:center}.school-row li+li:before{display:none}
 .scene{height:200svh}.scene-frame{clip-path:inset(calc((1 - var(--open,0)) * 12%) calc((1 - var(--open,0)) * 7%))}.scene-line{font-size:12.4vw;bottom:9%}
 .scene-shade{background:linear-gradient(0deg,#122628b3 0%,#12262855 40%,transparent 66%)}
 .summit-stage,.summit-section.is-pinned .summit-stage,.summit-section.is-pinned .give-panel{min-height:0}
 .social{padding:100px var(--gutter) 90px}.social h2{font-size:12.4vw}.ridge-handle{margin-top:24px}
 .now-section{padding:90px var(--gutter) 80px}.now-section h2{font-size:10.5vw;margin-bottom:36px}.now-grid{grid-template-columns:1fr}.now-grid li:nth-child(odd){border-right:0}.now-grid a,.now-grid li:nth-child(odd) a{padding:22px 0}
}
@media(prefers-reduced-motion:reduce){.manifesto .word{color:var(--ink);transition:none}.scene{height:auto}.scene-stage{position:relative}.scene-frame{clip-path:none}.scene-frame .mountain-world{transform:none}.scene-shade{opacity:1}.value-text,.value-name,.ridge-word span,.faces img{transition:none}.plate{clip-path:none}.plate img{transform:none;height:100%;top:0}.faces li{transform:none;opacity:1}}
