/* THE CHAPELLE VIEWBOOK, ONLINE. Tokens taken from the print book. */
:root{
  --deep:#15372A;--ink:#1A4132;--mid:#3F6E56;--sage:#AECBB9;--mint:#DCEBE2;--line:#8EADA1;--lineD:#AECBB9;
  --cream:#F7F5EF;--paper:#F3F1EC;--soft:#4F6B5E;--chalk:#F7F5EF;
  --pf:'Playfair Display',Georgia,serif;--ms:'Montserrat',Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --rail:clamp(11px,2.4vw,38px);
  --gut:clamp(37px,6.4vw,104px);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:500 clamp(16px,1.15vw,18px)/1.72 var(--ms);overflow-x:clip}
img{display:block;max-width:100%}
h1,h2,h3,p,figure{margin:0}
p{text-wrap:pretty}
button{font:inherit;color:inherit}
.story{position:relative;overflow:clip}
.story>section{position:relative;scroll-margin-top:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.chline{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:4;overflow:visible}
.chline path,.ln path{fill:none;stroke-width:1.3;stroke-linecap:square;stroke-linejoin:miter}
.chline .head{stroke:none;fill:var(--hf,#8EADA1)}
.ln{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible}
.ln path{stroke:var(--cl,#F7F5EF)}
.ln .hd{fill:var(--cl,#F7F5EF);stroke:none}
.measuring .wake{transform:none!important;transition:none!important}
.measuring .stage{position:relative!important}
.measuring .susan figure{position:static!important}

/* the book's type */
.bk{font-family:var(--pf);font-weight:900;letter-spacing:-.02em;line-height:1.02}
.it{font-family:var(--pf);font-style:italic;font-weight:500;line-height:1.08}
.gt{display:inline-block;padding:0 .04em .1em 0;background:url(img/ink-grain.png) 0 0/300px 300px,linear-gradient(90deg,#437056 0%,#447259 38%,#3B6550 62%,#2E5040 100%);background-blend-mode:soft-light,normal;-webkit-background-clip:text;background-clip:text;color:transparent}
.caps{font:600 clamp(10.5px,.8vw,12px)/1.6 var(--ms);letter-spacing:.3em;text-transform:uppercase}
.js .wake{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .wake.arrived{opacity:1;transform:none}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px clamp(14px,3vw,40px);color:var(--cream);transition:background .35s}
.top.solid{background:rgba(21,55,42,.95);backdrop-filter:blur(8px)}
.top a.home{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;transition:opacity .35s}
.top:not(.solid) a.home{opacity:0;pointer-events:none}
.top img{width:36px;height:36px}
.top .wm{font:italic 500 17px/1.05 var(--pf)}
.top .wm small{display:block;font:600 9px/1.5 var(--ms);letter-spacing:.26em;text-transform:uppercase;color:var(--sage);margin-top:3px}
.top .sp{flex:1}
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:0 13px;background:none;border:0;border-radius:2px;cursor:pointer;font:600 11.5px/1 var(--ms);letter-spacing:.16em;text-transform:uppercase;color:inherit}
.top:not(.solid) .tbtn{color:var(--deep)}
.tbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.apply{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;font:600 12.5px/1 var(--ms);letter-spacing:.2em;text-transform:uppercase;color:var(--deep);background:linear-gradient(180deg,#FBF9F3,#E9EFE6);border-radius:2px;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 24px -14px rgba(0,0,0,.6);transition:transform .25s var(--ease),box-shadow .25s}
.apply:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 16px 28px -14px rgba(0,0,0,.7)}
.apply:focus-visible,.tbtn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.top:not(.solid) .apply{background:var(--deep);color:#fff;box-shadow:none}
.apply.big{min-height:62px;padding:0 46px;font-size:14px}

/* 1. COVER: real light on the pressed crest */
.cover{height:100svh;min-height:520px;background:#fbfaf7;overflow:hidden}
.cover canvas,.cover .fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
.cover .fallback{object-fit:contain;object-position:50% 50%}
.cover canvas{opacity:0;transition:opacity .7s}
.cover canvas.on{opacity:1}
.hint{position:absolute;left:0;right:0;bottom:clamp(22px,4vh,40px);text-align:center;color:#7c9587;transition:opacity .6s}
/* 2. COURTYARD */
.court{line-height:0;background:var(--deep)}
.court img{width:100%;height:clamp(320px,62vw,100svh);object-fit:cover;object-position:60% 50%}
/* pinned stages */
.scene{position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}
/* 3. THE LETTER: one page. The green holds still, the plaid runs its whole length, and the two of them stand in front of the line */
.dearsec{position:relative;background:var(--deep);color:var(--cream);overflow-x:clip;--fw:min(27vw,calc(58svh*.7455))}
.dearbg{position:sticky;top:0;height:100svh;margin-bottom:-100svh;background:url(img/green.jpg) center/cover}
.plaid{position:absolute;left:0;top:0;bottom:0;width:var(--pw,184px);background:url(img/plaid-long.jpg) 0 0/auto repeat-y}
.dearwrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--fw);grid-template-rows:auto 1fr;padding-left:calc(var(--pw,184px) + clamp(22px,4.6vw,80px))}
.dearhead{grid-column:1;grid-row:1;position:relative;z-index:6;padding-top:clamp(104px,15vh,150px);min-width:0}
.office{color:var(--sage);margin-bottom:clamp(14px,2.4vh,24px)}
#dear{font:700 clamp(50px,7.7vw,130px)/1.01 var(--pf);letter-spacing:-.012em;width:max-content}
.dearbody{grid-column:1;grid-row:2;margin-top:clamp(62px,7vw,104px);padding:0 clamp(24px,4.6vw,84px) clamp(70px,11vh,120px) 0;font-size:clamp(16px,1.25vw,19px)}
.dearbody p+p{margin-top:1em}
.dearbody .tlink{color:var(--sage)}
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.more>div{overflow:hidden;min-height:0}
.more.open{grid-template-rows:1fr}
.more>div>p:first-child{margin-top:1em}
.tlink{margin-top:20px;background:none;border:0;border-bottom:1px solid currentColor;padding:8px 0;min-height:44px;font:italic 500 clamp(19px,1.6vw,22px)/1.1 var(--pf);cursor:pointer;color:inherit;text-decoration:none;display:inline-flex;align-items:center}
.pair{grid-column:2;grid-row:1/3;align-self:end;position:sticky;bottom:0;z-index:5;margin:0;width:var(--fw);line-height:0;pointer-events:none}
.pair .cut{position:relative;display:block;width:100%;height:auto;transform-origin:50% 100%;transition:translate .9s var(--ease);will-change:transform}
.pair .room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 96%);mask-image:linear-gradient(180deg,#000 70%,transparent 96%)}
.pair figcaption{position:absolute;left:7%;right:7%;bottom:clamp(14px,2.8vh,28px);text-align:center;line-height:1.5}
.pair .tag{display:block;font:italic 500 clamp(20px,1.8vw,27px)/1.1 var(--pf);color:#fff;margin-bottom:6px;text-shadow:0 1px 14px rgba(13,34,25,.9)}
.pair .who2{display:block;color:#E3EEE7;font-size:10.5px;letter-spacing:.2em;text-wrap:balance;text-shadow:0 1px 10px rgba(13,34,25,.95)}
/* 5. THE THREE SENTENCES: the line opens the page */
.dip{height:280svh}
.dip .stage{background:#0d2219}
.lay{position:absolute;top:0;bottom:0;overflow:hidden}
.lay img{width:100%;height:100%;object-fit:cover}
.lay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,34,25,.26),rgba(13,34,25,0) 20%,rgba(13,34,25,0) 34%,rgba(13,34,25,.3) 50%,rgba(13,34,25,0) 68%,rgba(13,34,25,.1) 86%,rgba(13,34,25,.5))}
.l1{left:0;width:50%;z-index:0}
.l2{left:50%;width:50%;z-index:1;clip-path:inset(0 calc(100% + 3px) 0 0)}
.ph{box-sizing:border-box;padding:0 clamp(30px,5vw,84px);text-wrap:balance;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;text-align:center;font:400 clamp(34px,4.3vw,70px)/1.1 var(--pf);color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.cap{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(22px,4vh,40px);text-align:center;color:#fff;font-size:10px;letter-spacing:.24em;text-shadow:0 1px 8px rgba(0,0,0,.8);text-wrap:balance}
.cap span{display:block}
/* 6. COURSE OF STUDIES: the whole page deepens with the grade */
.studies{padding:clamp(80px,13vh,140px) var(--gut) clamp(50px,8vh,90px);background:var(--bg,var(--cream));color:var(--tx,var(--ink));transition:background .7s var(--ease),color .5s}
.studies.g8{--bg:#F7F5EF;--tx:#1A4132;--sl:#8EADA1;--panel:#DCEBE2;--on:#1A4132;--rule:rgba(26,65,50,.22);--num:#3F6E56}
.studies.g9{--bg:#DCEBE2;--tx:#1A4132;--sl:#6E9682;--panel:#AECBB9;--on:#1A4132;--rule:rgba(26,65,50,.26);--num:#3F6E56}
.studies.g10{--bg:#AECBB9;--tx:#123024;--sl:#3F6E56;--panel:#3F6E56;--on:#F4F7F2;--rule:rgba(255,255,255,.26);--num:#1A4132}
.studies.g11{--bg:#3F6E56;--tx:#F4F7F2;--sl:#AECBB9;--panel:#15372A;--on:#F4F7F2;--rule:rgba(255,255,255,.22);--num:#F4F7F2}
.studies.g12{--bg:#15372A;--tx:#F4F7F2;--sl:#AECBB9;--panel:rgba(255,255,255,.07);--on:#F4F7F2;--rule:rgba(255,255,255,.2);--num:#F4F7F2}
.studies.g11 .gt,.studies.g12 .gt{background:none;color:var(--num)}
.studies:not(.g8) .ttl .c{display:none}
.shd{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;max-width:1320px;margin:0 auto}
.num{display:flex;align-items:flex-start;gap:.08em;font-size:clamp(92px,12vw,178px);line-height:.86}
.num .n{font-size:1em;line-height:.9;font-family:var(--pf);font-weight:900;letter-spacing:-.03em;color:var(--num);transition:color .5s}
.num .tg{font-size:.42em;display:flex;flex-direction:column;padding-top:.08em}
.num .tg i{font:italic 500 1.1em/1 var(--pf);border-bottom:1px solid currentColor;padding-bottom:.08em;display:block}
.num .tg b{font:900 .78em/1.1 var(--pf);letter-spacing:-.01em}
.kick{margin-top:12px;opacity:.82}
.ttl{text-align:right;margin-left:auto}
.ttl .a{font:italic 500 clamp(21px,2.4vw,34px)/1 var(--pf)}
.ttl .b{font-size:clamp(46px,6vw,88px)}
.ttl .c{font:italic 500 clamp(44px,5.8vw,84px)/1.05 var(--pf);text-align:left;margin:.1em 0 0 -3.2em}
.tabs{display:flex;gap:clamp(6px,1vw,12px);max-width:1320px;margin:clamp(30px,6vh,56px) auto 18px}
.tabs button{flex:1;min-height:58px;background:transparent;border:1px solid currentColor;border-radius:2px;cursor:pointer;font:900 clamp(20px,2.2vw,30px)/1 var(--pf);opacity:.74;transition:background .3s,color .3s,opacity .3s,transform .25s var(--ease)}
.tabs button sup{font:italic 500 .55em/1 var(--pf)}
.tabs button:hover{transform:translateY(-2px);opacity:1}
.tabs button[aria-selected=true]{background:var(--tx);color:var(--bg);border-color:var(--tx);opacity:1}
.course{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1.16fr);gap:clamp(24px,3.6vw,60px);max-width:1320px;margin:0 auto;align-items:start}
.gl,#gR,#gBand,#gBand2{transition:opacity .28s}
.gswap .gl,.gswap #gR,.gswap #gBand,.gswap #gBand2{opacity:0}
.gart{width:100%;height:auto;display:block}
.gname{font:italic 500 clamp(46px,5.4vw,82px)/1.04 var(--pf);margin-top:clamp(10px,1.6vh,18px)}
.gsub{margin:6px 0 12px;opacity:.82}
.gintro{font:italic 500 clamp(24px,2.3vw,34px)/1.3 var(--pf);margin-top:clamp(22px,3.6vh,34px);text-wrap:balance}
.gintro em{display:block;font:600 11px/1.5 var(--ms);letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px;opacity:.82}
.gcreate{font-size:clamp(58px,7.2vw,112px);margin-top:clamp(12px,2vh,20px);line-height:1}
.gcreate2{font:italic 500 clamp(21px,2.1vw,31px)/1.2 var(--pf);text-wrap:balance}
.gart2{width:82%;height:auto;margin:clamp(24px,4vh,40px) 0 0 auto;display:block}
.gcap{font:italic 500 clamp(22px,2vw,30px)/1.2 var(--pf);text-align:center;margin-top:12px}
.gcap2{text-align:center;margin-top:6px;opacity:.86}
.gsis{margin-top:clamp(28px,4.6vh,44px)}
.gsis .a{font:italic 500 clamp(30px,3.3vw,50px)/1.1 var(--pf);text-wrap:balance}
.gsis .b{font-size:clamp(40px,5vw,76px);line-height:1.05}
.panel{background:var(--panel);color:var(--on);transition:background .6s var(--ease),color .5s}
.courses{list-style:none;margin:0;padding:clamp(14px,2vw,26px) clamp(18px,2.4vw,34px)}
.courses li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:13px 0;border-top:1px solid var(--rule);font:600 clamp(14px,1vw,15.5px)/1.5 var(--ms)}
.courses li:first-child{border-top:0}
.courses li>span:last-child{flex:none;font-variant-numeric:lining-nums}
.elect{max-width:1320px;margin:22px auto 0;text-align:center}
.elist{columns:3 230px;column-gap:34px;padding:24px 0 0;font:600 14.5px/2.05 var(--ms);text-align:left}
.elist span{display:block;break-inside:avoid}
/* 7. FOLLOW A SUBJECT */
.follow{background:var(--cream);padding:clamp(50px,9vh,100px) var(--gut) clamp(60px,10vh,110px)}
.follow h2{font:italic 500 clamp(42px,6vw,92px)/1.05 var(--pf);color:var(--mid);text-wrap:balance}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,3.6vh,32px)}
.chips button{min-height:46px;padding:0 18px;background:transparent;border:1px solid rgba(26,65,50,.4);border-radius:99px;cursor:pointer;font:600 14px/1 var(--ms);color:var(--ink);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.chips button:hover{transform:translateY(-1px)}
.chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.chips.soft button[aria-pressed=true]{background:var(--sage);border-color:var(--sage);color:var(--deep)}
.chips.soft{margin-top:10px}
.stops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.8vw,26px);margin-top:clamp(50px,8vh,84px)}
.stopc .dot{display:block;width:13px;height:13px;border-radius:50%;background:var(--cream);border:1.3px solid var(--line);margin-bottom:28px;position:relative;z-index:5;transition:background .4s,transform .4s var(--ease)}
.stopc.arrived .dot{background:var(--mid);border-color:var(--mid);transform:scale(1.15)}
.stopc h3{font:900 clamp(30px,3.4vw,50px)/1 var(--pf);color:var(--mid);letter-spacing:-.02em}
.stopc h3 sup{font:italic 500 .5em/1 var(--pf)}
.stopc ul{list-style:none;margin:14px 0 0;padding:0}
.stopc li{padding:9px 0;border-top:1px solid rgba(26,65,50,.16);font:600 clamp(14px,1vw,15.5px)/1.42 var(--ms);transition:opacity .3s}
.stopc li.off{opacity:.42}
.stopc li.hit{color:var(--mid)}
.stopc li.hit::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mid);margin-right:8px;vertical-align:2px}
.stopc .none{font:italic 500 18px/1.3 var(--pf);color:var(--soft);padding:10px 0;border-top:1px solid rgba(26,65,50,.16)}
.tally{margin-top:clamp(20px,3.6vh,32px);font:italic 500 clamp(21px,2.1vw,30px)/1.3 var(--pf);color:var(--mid);min-height:1.3em}
/* 8. KNOWN BY NAME */
.known{background:var(--paper);padding:clamp(70px,12vh,120px) var(--gut) clamp(60px,10vh,100px)}
.known .h1{font-size:clamp(42px,6vw,92px)}
.known .h2{font:italic 500 clamp(36px,5.2vw,80px)/1.1 var(--pf);color:#95B5A4;display:inline-block}
.kg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,54px);margin-top:clamp(26px,4.4vh,44px);align-items:start}
.kg>p{margin:0}
@media (min-width:760px){
.kg{align-items:center}
.kg>p{max-width:72ch}
.bar3.stack{flex-direction:column;justify-content:center;align-self:stretch;margin:0;padding:clamp(4px,.6vw,10px) 0;background:linear-gradient(180deg,#3F6E56,#2E5040)}
.bar3.stack>div{flex:0 0 auto;display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);text-align:left;padding:clamp(14px,2vh,22px) clamp(22px,2.6vw,36px);border-left:0;border-top:1px solid rgba(255,255,255,.14)}
.bar3.stack>div:first-child{border-top:0}
.bar3.stack b{flex:0 0 auto;min-width:2.1ch;text-align:right;font-size:clamp(40px,3.6vw,56px)}
.bar3.stack span{margin:0;font-size:10px;letter-spacing:.2em;line-height:1.5}
}
.bar3{display:flex;margin:clamp(22px,3.4vh,32px) 0;background:linear-gradient(90deg,#3F6E56,#2E5040);color:var(--cream);border-radius:2px}
.bar3>div{flex:1 1 0;min-width:0;text-align:center;padding:20px 8px 18px;border-left:1px solid rgba(255,255,255,.14)}
.bar3>div:first-child{border-left:0}
.bar3 b{display:block;font:900 clamp(38px,4vw,56px)/1 var(--pf);font-variant-numeric:lining-nums}
.bar3 span{display:block;margin-top:9px;font:600 9.5px/1.45 var(--ms);letter-spacing:.18em;text-transform:uppercase;color:#D7E7DC}
/* 9. HER DAY */
.day{background:var(--deep) url(img/green.jpg) center/cover;color:var(--cream);padding:clamp(60px,10vh,110px) 0 clamp(60px,10vh,110px)}
.day .hd{padding:0 var(--gut);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.day .hd i{font:italic 500 clamp(26px,3vw,44px)/1 var(--pf);color:var(--sage);display:block}
.day .hd b{font:900 clamp(50px,7.4vw,112px)/1 var(--pf);letter-spacing:-.02em}
.day .clock{font:900 clamp(50px,7.4vw,112px)/1 var(--pf);font-variant-numeric:lining-nums;letter-spacing:-.02em;color:var(--sage)}
.day .clock small{font:italic 500 .42em/1 var(--pf);margin-left:.1em}
.track{position:relative;z-index:5;margin:clamp(24px,4.4vh,44px) 0 0;height:88px}
.track input{position:absolute;left:var(--rail);right:var(--rail);width:calc(100% - 2*var(--rail));top:8px;height:44px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:grab;touch-action:pan-y}
.track input::-webkit-slider-runnable-track{height:44px;background:none}
.track input::-moz-range-track{height:44px;background:none}
.track input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:7px;border-radius:50%;background:#F7F5EF;border:0;box-shadow:0 0 0 7px rgba(174,203,185,.26),0 6px 16px rgba(0,0,0,.45);cursor:grab}
.track input::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#F7F5EF;border:0;box-shadow:0 0 0 7px rgba(174,203,185,.26),0 6px 16px rgba(0,0,0,.45);cursor:grab}
.ticks{position:absolute;left:calc(var(--rail) + 15px);right:calc(var(--rail) + 15px);top:52px;height:30px;pointer-events:none}
.ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap;font:600 12px/1.2 var(--ms);letter-spacing:.04em;color:#D7E7DC;text-align:center;transition:color .3s}
.ticks span.on{color:#fff}
.ticks span::before{content:"";position:absolute;left:50%;top:-27px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--deep);border:1.3px solid var(--sage)}
.ticks span.on::before{background:var(--sage)}
.dg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);padding:clamp(14px,2vh,24px) var(--gut) 0;align-items:center}
.dpic{position:relative;aspect-ratio:4/3}
.dpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s var(--ease)}
.dpic img.on{opacity:1}
.dtext h3{font:italic 500 clamp(36px,4.6vw,70px)/1.06 var(--pf)}
.dtext .when{color:var(--sage);margin:8px 0 14px}
.pill{display:inline-block;padding:4px 10px;border-radius:99px;background:var(--sage);color:var(--deep);font:700 10px/1.3 var(--ms);letter-spacing:.14em;text-transform:uppercase;margin-left:10px;vertical-align:middle}
/* 10. THE ARC, one room at a time */
.arcs{height:560svh}
.arcs .stage{background:#0d2219;color:#fff}
.shot{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.shot img{width:100%;height:100%;object-fit:cover;will-change:transform}
.shot.on{opacity:1}
.arcs .stage::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,34,25,.66),rgba(13,34,25,0) 30%,rgba(13,34,25,0) 42%,rgba(13,34,25,.88));pointer-events:none}
.arcs .stage.open::after{background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 32%,rgba(0,0,0,0) 72%,rgba(0,0,0,.34))}
.arct{position:absolute;z-index:3;left:var(--gut);top:clamp(70px,10.5vh,100px);display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.arct h2{font-size:clamp(50px,6.6vw,104px);color:#fff}
.arct .caps{line-height:2;color:#E3EEE7;font-size:clamp(9px,.8vw,12px)}
.rm{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(102px,15vh,136px)}
.rm .n{font:italic 500 clamp(19px,1.7vw,26px)/1 var(--pf);color:var(--sage)}
.rm h3{font:italic 500 clamp(44px,6.6vw,104px)/1.04 var(--pf);margin:.1em 0 .16em}
.rm small{display:block;font:500 clamp(14.5px,1.15vw,18px)/1.6 var(--ms)}
.aticks{position:absolute;z-index:7;left:var(--gut);right:var(--gut);bottom:clamp(40px,7vh,70px);display:flex;justify-content:space-between;transform:translateY(50%)}
.aticks button{width:44px;height:44px;margin:0 -22px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.aticks button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#123024;border:1.3px solid #F7F5EF;transition:background .3s,transform .3s var(--ease)}
.aticks button.past::before{background:#F7F5EF}
.aticks button.on::before{background:#F7F5EF;transform:scale(1.5)}
/* 11. EVERY COLOR */
.colors{background:var(--cream);padding:clamp(70px,12vh,120px) var(--gut) clamp(50px,8vh,80px);text-align:center;--pick:#B3261E}
.colors .eb{color:var(--soft)}
.colors .a{font:italic 500 clamp(40px,6vw,92px)/1.06 var(--pf);color:var(--mid);margin-top:.12em}
.colors .b{font-size:clamp(50px,9.4vw,148px);color:var(--pick);transition:color .6s var(--ease);line-height:1;text-wrap:balance}
.pick{display:flex;justify-content:center;gap:clamp(10px,2vw,22px);margin:clamp(20px,3.6vh,34px) 0}
.pick button{width:clamp(60px,8vw,84px);height:clamp(60px,8vw,84px);border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 10px 20px -12px rgba(0,0,0,.5);transition:transform .3s var(--ease),box-shadow .3s}
.pick button:hover{transform:translateY(-3px)}
.pick button[aria-pressed=true]{transform:scale(1.1);box-shadow:0 0 0 4px var(--cream),0 0 0 5.5px var(--c)}
.ccx{margin:0 auto clamp(22px,3.8vh,34px);max-width:calc(82svh*4/3);padding:clamp(18px,2.4vw,30px);border:1px solid rgba(26,65,50,.22);border-radius:2px;text-align:center}
.ccq{font:italic 500 clamp(24px,2.6vw,38px)/1.15 var(--pf);color:var(--mid)}
.ccg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,.8vw,10px);margin:clamp(14px,2.2vh,20px) 0}
.ccg button{min-height:54px;background:transparent;border:1px solid rgba(26,65,50,.38);border-radius:2px;cursor:pointer;font:900 clamp(19px,1.9vw,26px)/1 var(--pf);color:var(--ink);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.ccg button sup{font:italic 500 .55em/1 var(--pf)}
.ccg button:hover{transform:translateY(-2px)}
.ccg button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.ccr{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,24px);min-height:clamp(96px,11vw,128px);text-align:left}
.ccr .sw{flex:none;width:clamp(62px,7vw,88px);height:clamp(62px,7vw,88px);border-radius:50%;background:var(--c,transparent);border:1.3px dashed rgba(26,65,50,.42);transition:background .5s var(--ease)}
.ccr.set .sw{border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 12px 22px -14px rgba(0,0,0,.5)}
.cct b{display:block;font:900 clamp(26px,3.2vw,46px)/1.05 var(--pf);letter-spacing:-.01em;color:var(--ink)}
.ccname{display:block;font:italic 500 clamp(21px,2.3vw,33px)/1.15 var(--pf);color:var(--c,var(--mid));transition:color .5s var(--ease)}
.cct small{display:block;margin-top:4px;font:600 clamp(11.5px,.9vw,13px)/1.45 var(--ms);letter-spacing:.06em;color:var(--soft);min-height:1.45em}
.rally{position:relative;aspect-ratio:4/3;max-height:82svh;width:100%;margin:0 auto;overflow:hidden;background:#ddd;max-width:calc(82svh*4/3)}
.rally img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rally img.top{clip-path:circle(0 at var(--ox,50%) var(--oy,50%));transition:clip-path .9s var(--ease)}
.rally img.top.go{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
.colors p{margin-top:clamp(20px,3.6vh,32px);text-align:left}
/* 12. FIND YOUR PEOPLE */
.people{background:var(--paper);padding:clamp(60px,10vh,100px) var(--gut) clamp(60px,10vh,100px)}
.people .h1{font-size:clamp(42px,6vw,92px)}
.people .h2{font:italic 500 clamp(36px,5.2vw,80px)/1.1 var(--pf);color:#95B5A4;display:inline-block}
.wall{margin-top:clamp(26px,4.4vh,44px);font:italic 500 clamp(23px,3vw,44px)/1.42 var(--pf);color:var(--ink)}
.wall span{transition:opacity .35s,color .35s;display:inline}
.wall span.off{opacity:.24}
.wall span.on{color:var(--mid)}
.wall i{font:normal 600 .4em/1 var(--ms);letter-spacing:.14em;background:var(--mid);color:#fff;border-radius:99px;padding:.32em .7em;margin:0 .35em 0 .15em;vertical-align:.34em;display:inline-block}
.wall em{font-style:normal;color:var(--line);margin:0 .28em}
.wall .nb{white-space:nowrap;font:inherit}
.wnote{margin-top:16px;font:italic 500 clamp(19px,1.7vw,24px)/1.3 var(--pf);color:var(--mid);min-height:1.3em}
.bar3.big b{font-size:clamp(46px,6vw,84px)}
.bar3.big span{font-size:10.5px}
.foot{color:var(--soft);text-align:center}
.foot a{color:inherit}
/* 13. THE MAP: a pinned fly-through */
.maps{height:640svh}
.maps .stage{background:#14352A;color:#F4F7F2}
.mview{position:absolute;inset:0;overflow:hidden}
.mworld{position:absolute;left:0;top:0;width:2048px;height:1152px;transform-origin:0 0;will-change:transform}
.mworld img{width:100%;height:100%;display:block;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.mspot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(12,32,24,0) 0,rgba(12,32,24,0) var(--sr,60vmax),rgba(12,32,24,.74) calc(var(--sr,60vmax)*2.3))}
#mln{z-index:4}
#mln .glow{stroke:rgba(174,203,185,.26);stroke-width:6;stroke-linecap:round}
#mln path{stroke-linecap:round;stroke-linejoin:round}
.mp{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;background:none;border:0;padding:0;cursor:pointer;z-index:6;transition:opacity .5s}
.mp::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:#E46E88;box-shadow:0 0 0 1px rgba(255,255,255,.55);transition:transform .35s var(--ease)}
.mp.home{pointer-events:none}
.mp.home::before{background:#F7F5EF}
.mp.sel::before{transform:scale(1.35)}
.mp::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;border:1.3px solid #E46E88;opacity:0}
.mp.ping::after{animation:mping 1.5s var(--ease) 1}
@keyframes mping{0%{transform:scale(1);opacity:.9}100%{transform:scale(6.5);opacity:0}}
.mtag{position:absolute;left:0;top:0;z-index:5;pointer-events:none;white-space:nowrap;transition:opacity .6s;text-align:center;padding:clamp(7px,.9vw,13px) clamp(10px,1.3vw,18px) clamp(6px,.8vw,11px);background:rgba(12,36,27,.84);border:1px solid rgba(255,255,255,.09);border-radius:3px;box-shadow:0 12px 28px -14px rgba(0,0,0,.8)}
.mtag img{height:clamp(16px,2.2vw,34px);width:auto;display:block;margin:0 auto}
.mtag span{display:block;margin-top:4px;font:600 clamp(8px,.76vw,11.5px)/1.3 var(--ms);letter-spacing:.2em;color:#E3EEE7}
.mtag.home b{font:italic 700 clamp(16px,1.9vw,29px)/1 var(--pf);display:block}
.mhd,.mend1{font:700 clamp(32px,5.2vw,82px)/1.08 var(--pf);text-shadow:0 2px 24px rgba(8,24,18,.75);text-wrap:balance}
.mhd em,.mend1 em{display:block;font-weight:500;color:var(--sage)}
.mhd{position:absolute;z-index:7;left:var(--gut);right:var(--gut);top:clamp(76px,12vh,120px);pointer-events:none}
.mend{position:absolute;z-index:7;left:var(--gut);right:var(--gut);top:clamp(76px,11vh,110px);opacity:0;pointer-events:none;transition:opacity .5s}
.mend.on{opacity:1}
.mend1{font-size:clamp(26px,3.3vw,52px)}
.mchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(12px,2vh,20px)}
.mend.on .mchips{pointer-events:auto}
.mchips button{min-height:46px;padding:0 17px;background:rgba(20,53,42,.72);backdrop-filter:blur(6px);border:1px solid rgba(174,203,185,.5);border-radius:99px;cursor:pointer;color:#F4F7F2;font:italic 500 clamp(16px,1.3vw,19px)/1 var(--pf);transition:background .25s,color .25s,transform .25s var(--ease)}
.mchips button:hover{background:var(--sage);color:var(--deep);transform:translateY(-1px)}
.mc{position:absolute;z-index:8;right:calc(var(--rail) + 26px);top:50%;width:min(44vw,640px);max-height:calc(100svh - 96px);overflow:auto;transform:translateY(calc(-50% + 26px));opacity:0;visibility:hidden;background:rgba(17,44,34,.9);backdrop-filter:blur(12px);border:1px solid rgba(174,203,185,.26);padding:clamp(20px,2.4vw,36px);box-shadow:0 34px 70px -34px rgba(0,0,0,.9);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .5s}
.mc.on{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.mctop{display:flex;gap:clamp(16px,1.8vw,26px);align-items:center}
.mcph{flex:none;width:clamp(96px,11vw,168px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.3px var(--sage),0 0 0 7px rgba(174,203,185,.14)}
.mcph img{width:100%;height:100%;object-fit:cover}
.mcn{font:700 clamp(23px,2.1vw,32px)/1.12 var(--pf)}
.mcl{height:clamp(18px,1.9vw,28px);width:auto;margin-top:8px;display:block}
.mcc{margin-top:6px;color:#D7E7DC;font-size:10.5px;letter-spacing:.22em}
.mcq{font:italic 500 clamp(23px,2.25vw,34px)/1.24 var(--pf);margin-top:clamp(14px,2vh,22px);text-wrap:pretty}
.mcs{margin-top:clamp(10px,1.6vh,14px);color:#E3EEE7;font-size:clamp(14.5px,1.05vw,16px);line-height:1.6}
.mcn2{display:flex;gap:clamp(20px,3vw,40px);margin-top:clamp(12px,2vh,18px);flex-wrap:wrap}
.mcn2 b{display:block;font:900 clamp(34px,3.4vw,52px)/1 var(--pf);font-variant-numeric:lining-nums;color:var(--sage)}
.mcn2 span{display:block;font:600 10px/1.4 var(--ms);letter-spacing:.16em;text-transform:uppercase;color:#D7E7DC}
.mcm{margin-top:12px;color:var(--sage);min-height:44px;font-size:clamp(17px,1.4vw,20px)}
.mcd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.mcd>div{overflow:hidden;min-height:0;font-size:14.5px;line-height:1.6;color:#E3EEE7}
.mcd.open{grid-template-rows:1fr}
.mcd p{margin-top:.7em}
.mcd b{font-weight:600;color:var(--sage)}
@media (max-width:759px){
  .maps{height:640svh}
  .mc{left:0;right:0;width:auto;top:auto;bottom:0;max-height:64svh;transform:translateY(26px);padding:16px var(--gut) 18px clamp(18px,5vw,24px);border-width:1px 0 0}
  .mc.on{transform:none}
  .mcph{width:72px}
  .mctop{gap:13px}
  .mcn{font-size:21px}
  .mcq{font-size:19px;margin-top:9px;line-height:1.26}
  .mcs{font-size:14px;line-height:1.5;margin-top:7px}
  .mcn2{margin-top:9px;gap:18px}
  .mcn2 b{font-size:29px}
  .mcm{margin-top:4px}
  .mend{top:74px;bottom:18px;display:flex;flex-direction:column;justify-content:space-between;left:clamp(18px,5vw,24px);right:clamp(18px,5vw,24px)}
  .mend1{font-size:7.2vw}
  .mchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .mchips button{padding:0 6px;font-size:15px;min-height:48px}
  .mhd{left:clamp(18px,5vw,24px);top:74px;font-size:7.2vw}
}
/* (removed Nov 5: the graduate bio used to be hidden on phones under 740px tall, which is most real phones once Safari toolbars show; Kelly saw it missing) */
/* 14. FAMILY */
.fam{background:linear-gradient(180deg,var(--cream),var(--paper));color:var(--ink);text-align:center;padding:clamp(100px,18vh,180px) var(--gut) clamp(60px,10vh,100px)}
.fam .eb{display:inline-block;color:var(--soft)}
.fam .a{font:italic 500 clamp(44px,6.4vw,100px)/1.05 var(--pf);color:var(--mid);margin-top:.14em}
.fam .b{font-size:clamp(68px,14.6vw,240px);line-height:.96}
.fam p{margin:clamp(22px,4vh,36px) auto 0;text-align:left}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,22px);margin:clamp(30px,5vh,50px) auto 0}
.tri img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* 15. SCHOLARSHIPS */
.sch{background:var(--cream);padding:clamp(70px,12vh,120px) var(--gut) clamp(60px,10vh,100px)}
.sch .h1{font-size:clamp(50px,8vw,124px)}
.sch .h2{font:italic 500 clamp(30px,4vw,60px)/1.1 var(--pf);color:#95B5A4}
.sch p.note{margin:clamp(14px,2.4vh,22px) 0 0}
.sg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4.4vw,74px);margin-top:clamp(26px,4.4vh,44px);align-items:center}
.score b{display:block;font:900 clamp(96px,14vw,214px)/.92 var(--pf);font-variant-numeric:lining-nums;letter-spacing:-.03em;color:var(--mid)}
.score span{display:block;font:600 11.5px/1.5 var(--ms);letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin-top:8px}
.score .aw{font:italic 500 clamp(27px,3vw,44px)/1.14 var(--pf);color:var(--ink);margin-top:clamp(14px,2.4vh,22px);letter-spacing:0;text-transform:none}
.score .pr{font:600 clamp(15px,1.1vw,17px)/1.4 var(--ms);color:var(--soft);margin-top:6px;letter-spacing:0;text-transform:none}
.drag{margin-top:clamp(20px,3.4vh,30px)}
.drag label{display:block;font:600 11.5px/1.4 var(--ms);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.drag input{width:100%;height:44px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:grab;touch-action:pan-y}
.drag input::-webkit-slider-runnable-track{height:1.3px;background:var(--line)}
.drag input::-moz-range-track{height:1.3px;background:var(--line)}
.drag input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-14.5px;border-radius:50%;background:var(--mid);border:0;box-shadow:0 0 0 7px rgba(63,110,86,.18);cursor:grab}
.drag input::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--mid);border:0;box-shadow:0 0 0 7px rgba(63,110,86,.18);cursor:grab}
.tiers{position:relative}
.tier{width:100%;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) 5.4em;gap:14px;align-items:center;text-align:left;padding:clamp(13px,2vh,20px) clamp(16px,2vw,26px);border:0;background:var(--c);color:var(--t);cursor:pointer;margin-top:2px;transition:transform .35s var(--ease),box-shadow .35s,opacity .35s;opacity:.62}
.tier b{font:700 clamp(17px,1.5vw,22px)/1.2 var(--pf)}
.tier span{font:600 clamp(13px,1vw,15px)/1.3 var(--ms)}
.tier em{font:900 clamp(20px,1.8vw,26px)/1 var(--pf);font-style:normal;font-variant-numeric:lining-nums;white-space:nowrap;text-align:right}
.tier.on{opacity:1;transform:translateX(-8px);box-shadow:0 18px 30px -22px rgba(10,30,22,.8)}
.ptr{position:absolute;height:0;border-top:1.3px solid var(--line);transition:top .45s var(--ease);z-index:5;pointer-events:none}
.ptr svg{position:absolute;left:-1px;top:-6.9px;width:12px;height:12px;overflow:visible}
.fine{margin-top:18px;color:var(--soft);font-size:10px;letter-spacing:.18em;text-align:center;text-wrap:balance}
/* SUSAN: from the desk of */
.susan{background:var(--deep) url(img/green.jpg) center/cover;color:var(--cream);padding:clamp(70px,12vh,120px) var(--gut);display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,5vw,84px);align-items:start}
.susan figure{background:var(--cream);padding:clamp(12px,1.4vw,20px);position:sticky;top:90px}
.susan figure img{width:100%;aspect-ratio:2528/1664;object-fit:cover}
.susan figcaption,.connie figcaption{margin-top:12px;text-align:center;font-size:10px;letter-spacing:.2em;text-wrap:balance}
.susan figcaption{color:var(--soft)}
.desk{color:var(--sage)}
.deskh{font:italic 700 clamp(26px,3.9vw,64px)/1.08 var(--pf);margin-top:6px;white-space:nowrap}
.qm{font:900 clamp(90px,10vw,150px)/.7 var(--pf);color:var(--sage);height:.5em;margin-top:clamp(18px,3vh,30px)}
.lead1{font:italic 500 clamp(22px,2.1vw,31px)/1.34 var(--pf)}
.susan p+p{margin-top:1.1em}
/* THE FAMILIES */
.voices{background:var(--paper);color:var(--ink);padding:0 0 clamp(50px,8vh,80px)}
.vhd{text-align:center;color:var(--soft);padding:0 var(--gut)}
.vtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:14px var(--gut) clamp(90px,14vh,130px)}
.vtabs button{min-height:46px;padding:0 17px;background:transparent;border:1px solid rgba(26,65,50,.4);border-radius:99px;cursor:pointer;font:italic 500 clamp(16px,1.3vw,19px)/1 var(--pf);color:var(--ink);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.vtabs button:hover{transform:translateY(-1px)}
.vtabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.vband{position:relative;background:url(img/plaid-band.jpg) center/auto 100% repeat-x;padding:clamp(22px,3.2vw,44px) var(--gut)}
.vstack{display:grid}
.v{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:center;opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility 0s .55s}
.v.on{opacity:1;visibility:visible;transition:opacity .55s var(--ease)}
.v.nophoto{grid-template-columns:minmax(0,1fr);align-items:center}
.vp{margin-top:clamp(-110px,-6.4vw,-50px);margin-bottom:clamp(-60px,-3vw,-20px);position:relative;z-index:2}
.vp img{width:100%;aspect-ratio:194/206;object-fit:cover;box-shadow:0 22px 40px -24px rgba(5,20,14,.8)}
.vc{position:relative;z-index:1;background:var(--cream);padding:clamp(20px,2.6vw,38px) clamp(20px,3vw,44px)}
.vq{font:500 clamp(16px,1.3vw,20px)/1.66 var(--ms)}
.nophoto .vq{font:italic 500 clamp(19px,1.72vw,27px)/1.42 var(--pf)}
.vwho{font:italic 700 clamp(17px,1.35vw,21px)/1.3 var(--pf);color:var(--mid);margin-top:.8em}
/* CONNIE: closing remarks, the line down the gutter */
.connie{position:relative;background:var(--deep) url(img/green.jpg) center/cover;color:var(--cream);padding:clamp(70px,12vh,120px) calc(var(--gut) + clamp(40px,6vw,90px)) clamp(70px,12vh,120px) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,5.6vw,90px);align-items:start}
.connie::after{content:"";position:absolute;right:0;top:0;bottom:0;width:clamp(40px,6vw,90px);background:url(img/plaid-strip.jpg) 30% 0/auto 100%}
.connie figure{margin:clamp(18px,3vh,28px) 0}
.connie figure img{width:100%;aspect-ratio:2272/1888;object-fit:cover}
.connie figcaption{color:#D7E7DC}
.cc p+p{margin-top:1em}
.prayer{font:italic 500 clamp(26px,2.9vw,42px)/1.22 var(--pf);color:var(--sage);margin-top:1.1em!important;text-wrap:balance}
.remember{font:italic 500 clamp(19px,1.5vw,23px)/1.3 var(--pf);margin-top:1em!important}
.sig{width:clamp(200px,20vw,290px);height:auto;margin:14px 0 4px}
.who2{color:#D7E7DC;line-height:1.9}
.iwh{width:100%;aspect-ratio:1195/545;margin-top:clamp(24px,4vh,38px)}
.cmorebtn{display:none;color:var(--sage)}
@media (max-width:759px){
  .susan,.connie{grid-template-columns:minmax(0,1fr)}
  .susan figure{position:static}
  .v{grid-template-columns:minmax(0,1fr)}
  .vp{width:72%;margin:clamp(-70px,-14vw,-50px) auto 0}
  .deskh{font-size:6.7vw}
  .sch .h1{font-size:12.4vw}
  .v.nophoto{align-items:start}
  .vtabs{padding-bottom:64px}
  .connie{padding-right:var(--gut);gap:0}
  .connie::after{display:none}
  .connie:not(.open) .pm{display:none}
  .cmorebtn{display:inline-flex}
  .cc+.cc{margin-top:1em}
}
.score .aw{min-height:2.3em;display:flex;align-items:flex-end}
.score .pr{min-height:2.9em;text-wrap:balance}
/* 16. THE CLOSE */
.closer{background:var(--deep) url(img/green.jpg) center/cover;color:var(--cream);text-align:center;padding:clamp(90px,16vh,170px) var(--gut) clamp(90px,14vh,150px)}
.closer .lead{font:italic 500 clamp(21px,2.3vw,34px)/1.25 var(--pf);color:var(--sage);text-wrap:balance}
.closer .you{font:italic 900 clamp(68px,13.5vw,210px)/1 var(--pf);letter-spacing:-.02em;margin:.08em 0 .22em}
.closer .body{margin:0 auto 10px;text-wrap:balance}
.closer .sign{font:italic 500 clamp(19px,1.6vw,24px)/1.3 var(--pf);margin-top:18px;color:var(--sage)}
.closer .who{margin:8px 0 clamp(36px,6vh,60px);color:#D7E7DC;text-wrap:balance}
.quiet{display:flex;justify-content:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-top:clamp(30px,5vh,50px)}
.quiet .tlink{color:var(--sage);margin-top:0}
/* CONTENTS, drawn on the line */
.toc{position:fixed;inset:0;z-index:40;background:var(--deep) url(img/green.jpg) center/cover;color:var(--cream);overflow:auto;opacity:0;pointer-events:none;transition:opacity .35s;padding:clamp(70px,10vh,100px) var(--gut) 50px}
.toc.on{opacity:1;pointer-events:auto}
.toc ol{list-style:none;margin:0;padding:0;border-left:1.3px solid var(--sage);max-width:900px}
.toc li{position:relative}
.toc li::before{content:"";position:absolute;left:-6px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--deep);border:1.3px solid var(--sage)}
.toc li.on::before{background:var(--cream)}
.toc a{display:block;padding:clamp(8px,1.3vh,12px) 0 clamp(8px,1.3vh,12px) 24px;color:inherit;text-decoration:none;font:italic 500 clamp(22px,2.7vw,36px)/1.18 var(--pf);transition:transform .25s var(--ease),color .25s}
.toc a:hover{transform:translateX(6px);color:var(--sage)}
.closex{position:fixed;right:clamp(14px,3vw,40px);top:10px;z-index:45;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer}
/* THE BOOK: turn the real pages */
.book{position:fixed;inset:0;z-index:40;background:#0c1f18;color:#E6F0EA;display:none;flex-direction:column}
.book.on{display:flex}
.bbar{display:flex;align-items:center;gap:14px;padding:10px clamp(14px,3vw,40px);min-height:64px}
.bbar .sp{flex:1}
.bcount{font:600 13px/1 var(--ms);letter-spacing:.06em}
.bstage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;perspective:2400px;padding:0 clamp(52px,6vw,90px)}
.bspread{position:relative;display:flex;box-shadow:0 30px 70px -30px #000;transform-style:preserve-3d}
.bhalf{position:relative;width:var(--pw);height:var(--ph);background:#0c1f18;overflow:hidden;cursor:zoom-in}
.bhalf img{width:100%;height:100%;object-fit:cover}
.bhalf.blank{cursor:default}
.bhalf.l::after{content:"";position:absolute;inset:0 0 0 auto;width:7%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.2))}
.bhalf.r::after{content:"";position:absolute;inset:0 auto 0 0;width:7%;background:linear-gradient(270deg,transparent,rgba(0,0,0,.2))}
.bleaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;z-index:3}
.bleaf .f,.bleaf .b{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#fff}
.bleaf .b{transform:rotateY(180deg)}
.bleaf img{width:100%;height:100%;object-fit:cover}
.barrow{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:6}
.barrow:disabled{opacity:.25;cursor:default}
.barrow.p{left:clamp(4px,1vw,20px)}
.barrow.n{right:clamp(4px,1vw,20px)}
.bscrub{padding:6px clamp(14px,3vw,40px) 16px}
.bscrub input{width:100%;height:40px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:grab;touch-action:pan-y}
.bscrub input::-webkit-slider-runnable-track{height:1.3px;background:var(--sage)}
.bscrub input::-moz-range-track{height:1.3px;background:var(--sage)}
.bscrub input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10.5px;border-radius:50%;background:#F7F5EF;border:0}
.bscrub input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#F7F5EF;border:0}
.bzoom{position:fixed;inset:0;z-index:50;background:rgba(6,16,12,.97);display:none;touch-action:none}
.bzoom.on{display:block}
.bzoom img{position:absolute;left:50%;top:50%;max-width:96vw;max-height:94vh;transform:translate(-50%,-50%) scale(var(--z,1)) translate(var(--x,0),var(--y,0));cursor:zoom-in;user-select:none;-webkit-user-drag:none;transition:transform .25s var(--ease)}
.bzoom.z img{cursor:grab;transition:none}
/* THE NEW CHAPTERS */
.ponly{display:none}
/* Your Spiritual Journey */
.journey{background:linear-gradient(rgba(8,28,20,.42),rgba(8,28,20,.42)),var(--deep) url(img/green.jpg) center/cover;color:var(--cream);padding:clamp(96px,14vh,150px) var(--gut) clamp(50px,8vh,90px);overflow:clip}
.jhd{text-align:center}
.jeb{display:inline-flex;align-items:baseline;gap:clamp(10px,1.4vw,22px);flex-wrap:wrap;justify-content:center}
.jeb .caps{color:var(--sage)}
.ja{font:italic 500 clamp(32px,5.2vw,80px)/1.1 var(--pf);color:#F3E3BF}
.jt{font:900 clamp(62px,17vw,262px)/.92 var(--pf);letter-spacing:-.012em;white-space:nowrap;margin-top:-.03em;background:linear-gradient(180deg,#FBF9F2 30%,#BFD6C8);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.jg{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center;margin-top:clamp(8px,1.6vw,26px)}
.jmary{position:relative;display:flex;justify-content:center}
.jmary img{position:relative;width:min(100%,47svh);height:auto}
.halo{position:absolute;left:50%;top:20%;width:128%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,225,160,.62) 0%,rgba(255,206,130,.3) 28%,rgba(255,196,110,.08) 52%,rgba(255,196,110,0) 68%);animation:candle 5.5s ease-in-out infinite}
@keyframes candle{0%,100%{opacity:.82;transform:translate(-50%,-50%) scale(1)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.035)}62%{opacity:.88;transform:translate(-50%,-50%) scale(.985)}}
.jtext p+p{margin-top:1.1em}
.jc{min-height:44svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(30px,6vh,60px) 0;font:italic 500 clamp(32px,5.6vw,88px)/1.14 var(--pf)}
.jc .b{color:#F3D79B;opacity:0;transform:translateY(.28em);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);text-shadow:0 0 44px rgba(255,205,120,.34)}
.jc.arrived .b{opacity:1;transform:none}
.jdp{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px);max-width:860px;margin:0 auto;padding-top:clamp(10px,2vh,24px)}
.jdp img{width:clamp(96px,11vw,150px);flex:none}
/* The chapel */
.pinv{height:320svh}
.pinv .stage{background:#0d2219}
.cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv1{object-position:32% 50%}
.cv{transform-origin:50% 100%;will-change:transform}
.cw2{position:absolute;inset:0;visibility:hidden}
.cv2{object-position:50% 40%}
.cscrim{opacity:var(--co,1);transform:translateY(var(--cy,0));position:absolute;inset:auto 0 0 0;height:66%;background:linear-gradient(0deg,rgba(9,28,20,.94) 0%,rgba(9,28,20,.76) 42%,rgba(9,28,20,0) 100%);pointer-events:none}
.ctext{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(30px,7vh,70px);color:#fff}
.ctext .caps{color:var(--sage)}
.ca{font:italic 500 clamp(30px,4.4vw,68px)/1.1 var(--pf);margin-top:6px}
.cb{font-size:clamp(35px,6.8vw,108px);line-height:1;margin-top:2px;white-space:nowrap}
.cb .n{color:#F3D79B;font-variant-numeric:lining-nums}
.ctext p{max-width:none;margin-top:clamp(18px,3vh,30px);font-size:clamp(15px,1.15vw,18px);line-height:1.6;columns:1}
/* Encounter Christ */
.enc{background:var(--cream);color:var(--ink);padding:clamp(70px,11vh,120px) var(--gut) clamp(50px,8vh,80px)}
.et{font-size:clamp(52px,8.5vw,136px);line-height:1;white-space:nowrap}
.en{margin-top:clamp(12px,2vh,20px)}
.etable{margin-top:clamp(24px,4vh,42px)}
.ehead,.er{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,clamp(60px,11vw,170px));align-items:center}
.ehead button{background:none;border:0;min-height:48px;cursor:pointer;font:600 clamp(9.5px,.86vw,12px)/1 var(--ms);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);border-radius:3px;padding:0}
.ehead button:hover{color:var(--ink)}
.ehead button[aria-pressed=true]{background:var(--ink);color:#fff}
.er{border-top:1px solid var(--line);min-height:clamp(58px,8vh,76px);transition:opacity .4s}
.er:last-child{border-bottom:1px solid var(--line)}
.er>span{font:500 clamp(18px,2.1vw,32px)/1.2 var(--pf);padding:8px 8px 8px 0}
.er>i{justify-self:center;width:clamp(13px,1.3vw,18px);aspect-ratio:1;border-radius:50%;border:1.3px solid var(--line);transition:background .5s var(--ease),border-color .5s,transform .6s cubic-bezier(.3,1.8,.5,1)}
.er>i.y{transform:scale(.6)}
.er.arrived>i.y{background:var(--mid);border-color:var(--mid);transform:scale(1.12)}
.etable.pick .er{opacity:.26}.etable.pick .er.match{opacity:1}
.qb{background:var(--cream);padding:clamp(70px,10vh,110px) 0 clamp(50px,8vh,80px)}
.qb .v{opacity:1;visibility:visible}
/* Test prep */
.tprep{display:grid;grid-template-columns:minmax(0,.9fr) repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,36px);align-items:start;margin-top:clamp(26px,4.4vh,44px);padding:clamp(20px,2.6vw,36px);background:var(--mint);border-radius:2px}
.tprep .th i{display:block;font:italic 500 clamp(20px,1.9vw,28px)/1.1 var(--pf)}
.tprep .th b{font:900 clamp(26px,2.9vw,42px)/1.05 var(--pf)}
.tprep>div:not(.th)>b{display:inline-block;font:900 clamp(30px,3vw,44px)/1 var(--pf);font-variant-numeric:lining-nums;margin-right:8px}
.tprep sup{font:italic 500 .5em/1 var(--pf)}
.tprep .caps{font-size:10px;letter-spacing:.22em}
.tprep p{margin-top:6px;font-size:clamp(14.5px,1vw,16px);line-height:1.5}
/* Open to all */
.arcopen{background:var(--deep) url(img/green.jpg) center/cover;color:var(--cream);padding:clamp(40px,7vh,70px) calc(var(--gut) + 8px);text-align:center}
.arcopen h3{font:italic 500 clamp(28px,3.4vw,50px)/1.1 var(--pf)}
.arcopen p{margin:10px auto 14px;font-size:clamp(16px,1.3vw,20px);text-wrap:balance}
.arcopen .caps{color:var(--sage)}
/* Faith in our future */
.pinf{height:280svh}
.pinf .stage{background:var(--cream);--cl:#8EADA1}
.fhd{position:absolute;left:0;right:0;top:clamp(70px,9.5vh,92px);text-align:center;color:var(--ink);z-index:2}
.fa{font:italic 500 clamp(30px,3.8vw,56px)/1.1 var(--pf);color:var(--mid)}
.fb{font-size:clamp(64px,10.5vw,158px);line-height:1;white-space:nowrap}
.fv{position:absolute;inset:0;clip-path:inset(38% 15% 6% 15%);background:#0d2219}
.hv{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transition:opacity .55s}
.fshade{position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(0deg,rgba(9,28,20,.86),rgba(9,28,20,0));opacity:var(--fs,0);pointer-events:none}
.fcap{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(30px,7vh,66px);text-align:center;color:#fff;opacity:0;z-index:3}
.fcap .bk{font-size:clamp(42px,7vw,108px);line-height:1.04}
.fcap .caps{letter-spacing:.42em;font-size:clamp(11px,1.1vw,15px);margin-top:8px}
.ftext{background:var(--cream);color:var(--ink);padding:clamp(40px,7vh,70px) var(--gut) clamp(50px,8vh,90px);text-align:center}
/* Athletics */
.ath{background:var(--paper);color:var(--ink)}
.ahd{padding:clamp(70px,11vh,120px) var(--gut) clamp(34px,6vh,56px)}
.ah{font-size:clamp(66px,12.4vw,190px);line-height:1}
.as{font:italic 500 clamp(26px,3.6vw,54px)/1.1 var(--pf);color:#7E9E8D;margin:.04em 0 clamp(16px,2.6vh,26px)}
.six{list-style:none;margin:clamp(20px,3.4vh,34px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,3vw,44px);color:var(--ink)}
.six li{padding:13px 0;border-top:1px solid var(--line)}
.aph{position:relative;height:clamp(420px,100svh,1100px);overflow:hidden;background:#0d2219}
.aph .pz{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover}
#aphBowl .pz{object-position:56% 50%}#aphSoft{height:clamp(420px,min(92vw,128svh),1300px)}#aphSoft .pz{object-position:50% 12%}
.ban{position:absolute;z-index:2;left:clamp(16px,var(--gut),104px);top:0;width:clamp(138px,19vw,290px);padding:clamp(70px,10vh,104px) clamp(12px,1.6vw,26px) clamp(46px,7vw,92px);background:linear-gradient(180deg,#123527,#1C4B38);color:var(--cream);text-align:center;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - clamp(26px,3.4vw,52px)),0 100%);transform:translateY(-104%);transform-origin:50% 0;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}
.ban::after{content:"";position:absolute;inset:clamp(62px,9vh,94px) 8px clamp(22px,3vw,44px);border:1px solid rgba(174,203,185,.55);clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - clamp(22px,2.8vw,44px)),0 100%);pointer-events:none}
.ban img{width:58%;margin:0 auto clamp(8px,1.2vw,18px)}
.ban b{display:block;font:900 clamp(18px,2.5vw,38px)/1.08 var(--pf)}
.ban span{display:block;margin-top:clamp(8px,1vw,14px);font:600 clamp(9px,.86vw,12.5px)/1.4 var(--ms);letter-spacing:.14em;color:var(--sage)}
.ban.arrived{animation:bandrop 1.5s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes bandrop{0%{transform:translateY(-104%) rotate(0)}52%{transform:translateY(0) rotate(0)}66%{transform:translateY(0) rotate(1.9deg)}80%{transform:translateY(0) rotate(-1.1deg)}91%{transform:translateY(0) rotate(.45deg)}100%{transform:translateY(0) rotate(0)}}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#0D261C;color:var(--cream);padding:clamp(30px,6vh,64px) calc(var(--gut) + 6px)}
.board>div{padding:0 clamp(10px,2vw,30px);border-left:1px solid rgba(174,203,185,.34)}
.board>div:first-child{border-left:0;padding-left:0}
.board b{display:block;font:900 clamp(62px,8.6vw,136px)/1 var(--pf);font-variant-numeric:lining-nums;letter-spacing:-.02em}
.board span{display:block;margin-top:8px;font:600 clamp(10px,.86vw,12.5px)/1.5 var(--ms);letter-spacing:.14em;text-transform:uppercase;color:var(--sage);text-wrap:balance}
.prog{background:var(--paper);padding:clamp(40px,7vh,70px) 0 clamp(30px,5vh,52px);overflow:hidden}
.pl0{padding:0 var(--gut);color:var(--soft)}
.mq{margin-top:clamp(10px,2vh,18px);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--gut)),transparent calc(100% - var(--rail) - 8px));mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--gut)),transparent calc(100% - var(--rail) - 8px))}
.mr{white-space:nowrap;font:italic 500 clamp(42px,7.4vw,118px)/1.2 var(--pf);color:var(--mid);will-change:transform}
.mr+.mr{color:#7E9E8D}
.mr i{font-style:normal;color:var(--line);margin:0 .3em}
.atri{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:3px;height:clamp(300px,74svh,820px);background:var(--paper)}
.atri>div{position:relative;overflow:hidden}
.atri .pz{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover}
.atri>div:nth-child(1) .pz{object-position:42% 50%}.atri>div:nth-child(2) .pz{object-position:36% 50%}.atri>div:nth-child(3) .pz{object-position:58% 50%}
.ateam{width:100%;height:auto}
/* RISE */
.rise{height:520svh}
.rise .stage{background:var(--rb,#15372A);color:var(--cream);transition:background .7s;display:flex;flex-direction:column;justify-content:center;padding:clamp(72px,10vh,96px) var(--gut) clamp(46px,7vh,62px)}
.rls{display:flex;justify-content:space-between;font:900 min(25vw,44svh)/.86 var(--pf);letter-spacing:-.01em;padding-top:calc(min(25vw,44svh)*.22)}
.rls span{opacity:.15;transition:opacity .55s var(--ease),transform .9s var(--ease),color .5s}
.rls span.on{opacity:1}
.rps{display:grid;margin-top:clamp(44px,7vh,70px);max-width:980px}
.rp{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);visibility:hidden}
.rp.on{opacity:1;transform:none;visibility:visible}
.rp .caps{color:var(--sage)}
.rl0{margin-top:8px;font:italic 500 clamp(17px,1.65vw,25px)/1.45 var(--pf)}
.rl{margin-top:8px;font:italic 500 clamp(22px,2.7vw,41px)/1.22 var(--pf)}
.rb{margin-top:clamp(16px,2.6vh,26px);font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:#E3EEE7}
.rfoot{position:absolute;left:var(--gut);bottom:clamp(14px,2.4vh,24px);color:var(--sage);font-size:9.5px;letter-spacing:.24em}
/* Performance */
.perf{height:560svh}
.perf .stage{background:#071410;color:var(--cream)}
.pano{position:absolute;inset:0}
.pl{position:absolute;inset:0;display:grid;grid-template-columns:.85fr 1.1fr 1.15fr;gap:2px}
.pl img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.pl.dim{filter:brightness(.2) saturate(.5)}
.pl.lit{-webkit-mask-image:radial-gradient(circle var(--sr,30vmax) at var(--sx,50%) var(--sy,40%),#000 0,#000 58%,transparent 100%);mask-image:radial-gradient(circle var(--sr,30vmax) at var(--sx,50%) var(--sy,40%),#000 0,#000 58%,transparent 100%)}
.beamw{position:absolute;inset:0;filter:blur(18px);pointer-events:none}
.beam{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,240,205,.3),rgba(255,240,205,0) var(--sy,40%));clip-path:polygon(calc(var(--bx,50%) - 1.5%) 0,calc(var(--bx,50%) + 1.5%) 0,calc(var(--sx,50%) + var(--sr,30vmax)*.55) var(--sy,40%),calc(var(--sx,50%) - var(--sr,30vmax)*.55) var(--sy,40%));mix-blend-mode:screen}
.ptop{position:absolute;left:0;right:0;top:0;height:clamp(240px,40%,420px);background:linear-gradient(180deg,rgba(7,20,16,.78),rgba(7,20,16,.5) 55%,rgba(7,20,16,0));pointer-events:none}
.pshade{position:absolute;inset:auto 0 0 0;height:74%;background:linear-gradient(0deg,rgba(7,20,16,.97) 0%,rgba(7,20,16,.88) 42%,rgba(7,20,16,0) 100%);pointer-events:none}
.phd{position:absolute;left:var(--gut);top:clamp(72px,10vh,96px)}
.phd h2{font-size:clamp(50px,9.4vw,146px);line-height:1;text-shadow:0 2px 30px rgba(0,0,0,.65)}
.ps{font:italic 500 clamp(21px,2.5vw,38px)/1.1 var(--pf);color:#D7E7DC;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.pbox{position:absolute;left:var(--gut);right:calc(var(--gut) + 6px);bottom:clamp(20px,4vh,40px)}
.pin{font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.5;max-width:none;color:#E3EEE7}
.pc{color:var(--sage);margin-top:clamp(10px,1.8vh,18px);font-size:10px}
.ppanels{display:grid;margin-top:6px}
.pg{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pg.on{opacity:1;visibility:visible;transform:none}
.pg h3{font:900 clamp(30px,4.2vw,64px)/1.06 var(--pf)}
.pg h3 .pill{vertical-align:.5em}
.pg p{margin-top:6px;font-size:clamp(15px,1.15vw,18px);line-height:1.55}
.pdots{display:flex;gap:6px;margin-top:clamp(10px,1.6vh,16px);flex-wrap:wrap}
.pdots button{min-width:44px;min-height:44px;border-radius:50%;background:transparent;border:1px solid rgba(174,203,185,.55);cursor:pointer;font:700 13px/1 var(--ms);font-variant-numeric:lining-nums;color:var(--cream);transition:background .3s,color .3s}
.pdots button.on{background:var(--cream);color:#071410}
/* Mission and the rest of Scholarships */
.mission{margin:clamp(26px,4.6vh,44px) calc(var(--gut)*-1) calc(clamp(50px,8vh,80px)*-1);padding:clamp(28px,5vh,50px) calc(var(--gut) + 6px);background:linear-gradient(90deg,#2F5A47,#3F6E56 50%,#234737);color:var(--cream);text-align:center}
.mission h3{display:inline-block;font:900 clamp(38px,5.4vw,84px)/1.05 var(--pf)}
.colors .mission p{margin:8px auto 0;text-align:center;text-wrap:balance}
.sch2{margin-top:clamp(36px,6vh,60px)}
.scph{position:relative;margin:0 calc(var(--gut)*-1)}
.scph>img{width:100%;height:clamp(260px,62svh,720px);object-fit:cover;object-position:50% 34%}
.schfig{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(88%,1020px);margin:clamp(-120px,-9vw,-44px) auto 0;background:linear-gradient(90deg,#163B2C,#2A5A46);color:var(--cream);text-align:center;box-shadow:0 22px 44px -24px rgba(5,20,14,.8)}
.schfig>div{padding:clamp(16px,2.4vw,34px) clamp(10px,2vw,28px)}
.schfig>div+div{border-left:1px solid rgba(174,203,185,.4)}
.schfig .caps{font-size:clamp(9px,.8vw,11px);letter-spacing:.2em;color:var(--sage)}
.schfig b{display:block;font:900 clamp(32px,5.6vw,84px)/1.08 var(--pf);font-variant-numeric:lining-nums}
.schfig span{display:block;font-size:clamp(12px,.95vw,14.5px);line-height:1.4;text-wrap:balance}
.sch3{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,84px);margin-top:clamp(30px,5vh,50px)}
.sch3 h3{font:900 clamp(25px,2.7vw,40px)/1.1 var(--pf);margin-bottom:10px}
.sch3 ul{list-style:none;margin:0 0 12px;padding:0}
.sch3 li{padding:10px 0;border-top:1px solid var(--line);font-size:clamp(15px,1.1vw,17px);line-height:1.5}
.sch3 li b{display:block;font:italic 700 clamp(18px,1.5vw,22px)/1.25 var(--pf);margin-bottom:2px}
.sch3 p{font-size:clamp(15px,1.1vw,17px);line-height:1.5}
.bonnie{margin-top:clamp(26px,4.4vh,44px);padding:clamp(20px,3vw,40px);background:var(--mint)}
.bonnie .caps{color:var(--soft);font-size:10px}
.bonnie h3{font:900 clamp(23px,2.6vw,40px)/1.12 var(--pf);margin:6px 0 8px}
.bonnie p{font-size:clamp(15px,1.1vw,17px);line-height:1.55}
.gmerit{text-align:center;margin-top:8px;font-size:10px;letter-spacing:.18em;color:inherit;opacity:.86}
.gmerit svg{width:13px;height:9px;vertical-align:-.5px;margin:0 6px;overflow:visible}
.est{background:#0B1F17;color:var(--cream);text-align:center;padding:clamp(70px,12vh,120px) var(--gut);font:700 clamp(30px,4vw,60px)/1.1 var(--pf)}
@media (max-width:759px){
  .known .h1,.people .h1{font-size:9.7vw}
  .known .h2,.people .h2{font-size:8.2vw}
  .colors .a{font-size:8.4vw}
  .colors .b{font-size:14.4vw}
  .bar3.big b{font-size:clamp(30px,8.6vw,44px)}
  .bar3 span,.bar3.big span{font-size:8.5px;letter-spacing:.06em}
  .top{gap:4px}
  .top .wm{display:none}
  .tbtn{padding:0 8px;letter-spacing:.1em}
  .apply{padding:0 16px;letter-spacing:.14em}
  .court img{height:64vw}
  .ponly{display:inline}
  .jt{font-size:17.6vw}
  .jg{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:6px}
  .jmary img{width:min(78%,44svh)}
  .jc{min-height:32svh}
  .jdp{flex-direction:column;text-align:center}
  .jdp p{text-align:center}
  .ctext p{font-size:14.5px;line-height:1.5}
  .cb{font-size:9.2vw}
  .et{font-size:12.2vw}
  .cv1{object-position:18% 50%}
  .ehead,.er{grid-template-columns:minmax(0,1fr) repeat(3,minmax(50px,16vw))}
  .ehead button{font-size:10px;letter-spacing:.02em}
  .tprep{grid-template-columns:minmax(0,1fr)}
  .fhd{top:clamp(66px,9vh,84px)}
  .fb{font-size:min(19.5vw,14svh)}
  .fa{font-size:min(30px,5svh)}
  .fv{inset:auto 0 auto 0;clip-path:inset(7% 7%)}
  .fcap{opacity:1;color:var(--ink);bottom:auto}
  .fcap .bk{font-size:9.4vw}
  .fcap .caps{font-size:10px;letter-spacing:.3em}
  .fshade{display:none}
  .six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aph,#aphSoft{height:78svh}
  .ban{width:35vw;padding:70px 8px 40px}
  .ban b{font-size:17px}
  .ban span{font-size:9px;letter-spacing:.04em}
  .ban::after{inset:62px 5px 20px}
  #banBowl{left:auto;right:22px}
  #aphBowl .pz{object-position:48% 50%}
  #aphSoft .pz{object-position:48% 30%}
  .board{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}
  .board>div:nth-child(odd){border-left:0;padding-left:0}
  .board b{font-size:17vw}
  .mq{-webkit-mask-image:none;mask-image:none}
  .atri{grid-template-columns:minmax(0,1fr);grid-auto-rows:44svh;height:auto}
  .rise .stage{padding:78px 30px 40px}
  .rls{font-size:min(26vw,25svh);padding-top:calc(min(26vw,25svh)*.26);margin:0 -8px}
  .rps{margin-top:30px}
  .rl{font-size:21px}.rb{font-size:14.5px;line-height:1.5}.rl0{font-size:16.5px}
  .rfoot{left:30px;font-size:9px;letter-spacing:.12em}
  .pl{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr 1fr;height:calc(100% - var(--pb,340px) + 30px)}
  .beamw{display:none}
  .ptop{height:150px}
  .pshade{height:calc(var(--pb,340px) + 44px);background:linear-gradient(0deg,#071410 0,#071410 calc(100% - 50px),rgba(7,20,16,0) 100%)}
  .phd h2{font-size:min(13.4vw,9svh)}
  .ps{font-size:min(19px,3.2svh)}
  .pbox{left:30px;right:30px;bottom:14px}
  .pin{font-size:13.5px;line-height:1.42}
  .pg p{font-size:14.5px;line-height:1.45}
  .pdots{gap:4px}.pdots button{min-width:38px;min-height:38px;font-size:12px}
  .schfig{width:88%;margin-left:6%;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .schfig>div{padding:14px 8px}
  .schfig b{font-size:7vw}
  .schfig .caps{letter-spacing:.12em}
  .sch3{grid-template-columns:minmax(0,1fr)}
  .dearwrap{display:block;padding-left:0}
  .dearhead{padding:clamp(96px,13vh,120px) 18px 0 calc(var(--pw,44px) + 14px)}
  #dear{font-size:15vw}
  .pair{position:relative;bottom:auto;width:74%;margin:4px 0 0 auto}
  .pair figcaption{left:6%;right:6%;bottom:2px}
  .pair .who2{font-size:9px;letter-spacing:.12em}
  .dearbody{margin-top:18px;padding:0 30px 64px calc(var(--pw,44px) + 14px);font-size:16px}
  .people .h2{margin-top:12px}
  .l1,.l2{left:0;width:100%}
  .l2{clip-path:inset(0 0 0 calc(100% + 3px))}
  .cap{font-size:9px;letter-spacing:.18em}
  .shd{flex-direction:column;gap:22px}
  .ttl{text-align:left;margin:0}
  .ttl .c{margin:.14em 0 0}
  .course{grid-template-columns:minmax(0,1fr)}
  .gart2{width:100%}
  .stops{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:34px}
  .stopc .dot{position:absolute;left:calc(var(--rail) - var(--gut) - 6px);top:14px;margin:0}
  .stopc.arrived .dot{transform:scale(1.15)}
  .stopc{position:relative}
  .kg,.dg,.sg{grid-template-columns:minmax(0,1fr)}
  .ticks span{font-size:0}
  .ticks span::after{content:attr(data-s);font-size:9.5px}
  .tri{grid-template-columns:minmax(0,1fr)}
  .tier{grid-template-columns:minmax(0,1fr) 5em;gap:6px 12px}
  .tier span{grid-column:1;grid-row:2}
  .tier em{grid-column:2;grid-row:1/3}
  .tier.on{transform:none}
  .bstage{padding:0 8px}
  .barrow{top:auto;bottom:6px;margin:0}
  .bstage{padding-bottom:64px}
}
/* ============ THE BOOK'S CALM: one body size everywhere, mint whenever color needs contrast ============ */
:root{--fs:clamp(14.5px,.25vw + 13.2px,16px);--lh:1.62;--mintc:#A5DDBD;--navh:64px}
body{font:400 var(--fs)/var(--lh) var(--ms)}
.dearbody,.jtext,.jdp p,.ctext p,.en,.tprep p,.arcopen p,.ftext p,.ahd p,.rb,.pg p,.pin,.sch3 li,.sch3 p,.bonnie p,.mcs,.mcd>div,.colors p,.closer .body,.gl p,.dtext p,.sch p.note,.cc p:not(.prayer):not(.remember){font-size:var(--fs);line-height:var(--lh)}
.dearbody p,.jtext p,.kg p,.ftext p,.colors>p,.fam>p,.ahd>p,.cc p:not(.prayer):not(.remember),.sch p.note,.gl p{text-align:justify}
@media (max-width:599px){.dearbody p,.jtext p,.kg p,.ftext p,.colors>p,.fam>p,.ahd>p,.cc p:not(.prayer):not(.remember),.sch p.note,.gl p{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3}}
.tlink{font-size:clamp(16.5px,1.25vw,19px);min-height:40px;margin-top:14px;padding:6px 0}
.chips{gap:6px;margin-top:clamp(14px,2.4vh,22px)}
.chips button{min-height:38px;padding:0 13px;font:500 clamp(12.5px,.9vw,13.5px)/1 var(--ms)}
/* gradient letters paint only inside their box: give the tails of J, y, p and g room to hang */
.jt{padding:.02em .03em .34em 0;margin-bottom:-.3em;line-height:1}
.gt{padding-bottom:.26em;margin-bottom:-.16em}
/* mint for contrast, in place of gold */
.ja{color:var(--mintc)}
.cb .n{color:var(--mintc)}
.halo{background:radial-gradient(circle,rgba(226,246,234,.5) 0%,rgba(190,232,208,.24) 28%,rgba(170,222,192,.07) 52%,rgba(170,222,192,0) 68%)}
.jc{min-height:0;padding:clamp(14px,2.6vh,26px) 0;font-size:clamp(25px,3.8vw,58px)}
.jc:first-of-type{padding-top:clamp(34px,7vh,70px)}
.jc .b{color:var(--mintc);text-shadow:none}
.jdp{padding-top:clamp(30px,6vh,60px)}
/* the families: the book's type and placement, the name in Playfair */
.qb{padding:clamp(66px,10vh,104px) 0 clamp(36px,6vh,60px)}
.vband{padding:clamp(16px,2vw,28px) var(--gut)}
.v,.qb .v{grid-template-columns:minmax(0,.36fr) minmax(0,1fr);align-items:stretch;column-gap:clamp(12px,1.6vw,22px)}
.vp{margin:clamp(-96px,-6.4vw,-52px) 0 0}
.vp img{height:100%;min-height:100%;aspect-ratio:auto;object-position:50% 16%}
.vc{align-self:center;padding:clamp(14px,1.7vw,24px) clamp(16px,2vw,28px)}
.vq{font:400 var(--fs)/1.6 var(--ms);color:var(--ink)}
.vwho{font:italic 700 clamp(14.5px,1.1vw,17px)/1.35 var(--pf);color:var(--ink);margin-top:.7em}
/* Course of Studies: the buttons and the list never move; the photographs sit beside them, or below on a phone */
.num{font-size:clamp(80px,9.6vw,146px)}
.kick{min-height:1.6em}
.studies:not(.g8) .ttl .c{display:block;visibility:hidden}
.tabs{margin-top:clamp(20px,3.4vh,36px)}
.tabs button{min-height:50px}
.courses li{padding:10px 0;font:500 clamp(13.5px,.94vw,15px)/1.45 var(--ms)}
#rows{transition:opacity .22s}
.gswap #rows{opacity:0}
.gname{font-size:clamp(36px,4.2vw,64px)}
.gintro{font-size:clamp(19px,1.9vw,28px)}
.gcreate{font-size:clamp(48px,6vw,92px)}
.gsis .a{font-size:clamp(24px,2.7vw,40px)}
.gsis .b{font-size:clamp(32px,4.2vw,62px)}
.ttl .c{font-size:clamp(36px,4.6vw,68px)}
/* Electives: a sideways shelf with a real scroll bar */
.elect{margin-top:clamp(34px,6vh,60px);text-align:left}
.elhd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ela{font:italic 500 clamp(22px,2.6vw,38px)/1.1 var(--pf)}
.elb{font-size:clamp(40px,5.4vw,80px);line-height:1}
.studies.g11 .elb .gt,.studies.g12 .elb .gt{background:none;color:var(--num)}
.elcount{opacity:.8;padding-bottom:8px}
.elscroll{overflow-x:auto;overflow-y:hidden;margin-top:clamp(12px,2vh,18px);scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 70px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 70px),transparent);outline-offset:4px}
.elscroll::-webkit-scrollbar{display:none}
.elscroll.drag{cursor:grabbing;user-select:none}
.elist{columns:auto;display:grid;grid-auto-flow:column;grid-template-rows:repeat(8,auto);grid-auto-columns:clamp(176px,23vw,290px);column-gap:clamp(14px,2vw,28px);width:max-content;padding:0 60px 0 0;font:500 clamp(13px,.92vw,14.5px)/1.3 var(--ms)}
.elist span{padding:8px 0;border-top:1px solid var(--rule)}
.eltrack{position:relative;height:24px;margin-top:6px;cursor:pointer;touch-action:none}
.eltrack::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.3px;background:currentColor;opacity:.3}
.eltrack i{position:absolute;left:0;top:50%;height:5px;margin-top:-2.5px;border-radius:99px;background:currentColor;width:30%}
/* Follow one subject */
.follow{padding:clamp(40px,7vh,78px) var(--gut) clamp(40px,7vh,76px)}
.follow h2{font-size:clamp(28px,4vw,60px)}
.chips.soft{margin-top:6px}
.chips.soft:empty{display:none}
.stops{margin-top:clamp(26px,4vh,42px);gap:clamp(10px,1.4vw,22px)}
.stopc .dot{margin-bottom:16px;cursor:pointer}
.stopc h3{font-size:clamp(24px,2.5vw,36px)}
.gb{all:unset;cursor:default;display:block}
.stopc ul{margin-top:8px}
.stopc li{padding:7px 0;font:500 clamp(13px,.9vw,14.5px)/1.4 var(--ms)}
.stopc .none{font-size:15px;padding:8px 0}
/* Graduates: quote first, as on pages 20 and 21 */
.mc{width:min(38vw,520px);padding:clamp(16px,1.9vw,28px)}
.mcq{font:italic 500 clamp(17px,1.6vw,23px)/1.3 var(--pf);margin:0;padding-left:clamp(12px,1.2vw,18px);border-left:3px solid #6EB58A;text-wrap:pretty}
.mctop{margin-top:clamp(12px,1.8vh,18px);gap:clamp(12px,1.4vw,20px)}
.mcph{width:clamp(66px,6.4vw,98px);box-shadow:0 0 0 1.3px var(--sage)}
.mcn{font-size:clamp(19px,1.7vw,25px)}
.mcl{height:clamp(18px,1.7vw,25px)}
.mcs{margin-top:clamp(10px,1.5vh,14px);padding-top:clamp(10px,1.5vh,14px);border-top:1px solid rgba(174,203,185,.26);color:#E3EEE7}
.mcat{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:clamp(8px,1.2vh,12px);padding-top:clamp(8px,1.2vh,12px);border-top:1px solid rgba(174,203,185,.26)}
.mcat>.caps{color:var(--mintc);font-size:9.5px;letter-spacing:.18em}
.mcat b{font:900 clamp(17px,1.5vw,21px)/1 var(--pf);font-variant-numeric:lining-nums;margin-right:3px}
.mcat i{font:600 9.5px/1 var(--ms);letter-spacing:.14em;text-transform:uppercase;color:var(--mintc)}
.mcm{margin-top:6px;font-size:clamp(15.5px,1.2vw,18px);min-height:38px}
/* Susan, composed as page 22 */
.susan{display:block;padding:clamp(60px,10vh,100px) var(--gut) clamp(50px,8vh,80px);--ov:clamp(150px,20vw,290px)}
.sframe{position:relative;margin-top:var(--ov);border:1px solid rgba(174,203,185,.6);padding:0 clamp(18px,3.4vw,52px) clamp(14px,2.2vw,30px)}
.susan figure{position:relative;top:auto;margin:calc(var(--ov)*-1) auto 0;width:min(100%,clamp(270px,44vw,620px));background:var(--cream);color:var(--ink);padding:clamp(10px,1.1vw,16px) clamp(10px,1.1vw,16px) clamp(10px,1.2vw,18px);text-align:center;box-shadow:0 24px 44px -28px rgba(5,20,14,.8)}
.susan .desk{color:var(--soft);margin-top:clamp(10px,1.3vw,16px);font-size:10px}
.susan .deskh{font-size:clamp(20px,2.8vw,40px);margin-top:2px;color:var(--ink)}
.qm{font-size:clamp(66px,7vw,104px);height:.46em;margin-top:clamp(18px,3vh,30px)}
.sl p{font:400 clamp(15px,.3vw + 13.6px,17px)/1.62 var(--pf);text-align:justify;margin:0}
.sl .more>div>p:first-child{margin-top:1em}
.sl .more p+p{margin-top:1em}
.sl .tlink{color:var(--sage)}
.scap{margin-top:14px;text-align:center;color:#D7E7DC;font-size:10px;letter-spacing:.2em;text-wrap:balance}
/* Known by name: numbers grow from zero, the test prep rows slide in from the left */
.tprep{align-items:start}
.js .tprep>div{opacity:0;transform:translateX(-40px);transition:opacity .85s var(--ease),transform .95s var(--ease)}
.js .tprep>div:nth-child(2){transition-delay:.14s}.js .tprep>div:nth-child(3){transition-delay:.28s}.js .tprep>div:nth-child(4){transition-delay:.42s}
.js .tprep.in>div{opacity:1;transform:none}
/* The schedule: a real list of times */
.day{padding:clamp(50px,8vh,90px) 0 clamp(70px,10vh,110px)}
.day .hd b{font-size:clamp(44px,6vw,92px)}
.day .clock{font-size:clamp(44px,6vw,92px);color:var(--mintc)}
.dhint{padding:0 var(--gut);margin-top:clamp(6px,1.4vh,14px);color:var(--sage)}
.dg2{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,64px);padding:clamp(14px,2.4vh,24px) var(--gut) 0;align-items:start}
.dlist{list-style:none;margin:0;padding:0}
.dlist>li{border-top:1px solid rgba(174,203,185,.26)}
.dlist>li:last-child{border-bottom:1px solid rgba(174,203,185,.26)}
.dstop{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto 18px;align-items:center;column-gap:10px;min-height:clamp(52px,7vh,62px);padding:6px 4px 6px 0;background:none;border:0;cursor:pointer;color:#E3EEE7;text-align:left;transition:color .25s,background .25s}
.dstop:hover{background:rgba(255,255,255,.05);color:#fff}
.dd{position:relative;z-index:5;justify-self:center;width:11px;height:11px;border-radius:50%;background:var(--deep);border:1.3px solid var(--sage);transition:background .3s,transform .3s var(--ease)}
.dn{font:italic 500 clamp(18px,1.7vw,24px)/1.2 var(--pf)}
.dtm{font:600 clamp(10.5px,.82vw,12px)/1.3 var(--ms);letter-spacing:.06em;color:var(--sage);text-align:right;white-space:nowrap}
.dch{width:9px;height:9px;justify-self:end;border-right:1.5px solid var(--sage);border-top:1.5px solid var(--sage);transform:rotate(45deg);transition:transform .3s var(--ease)}
.dlist>li.on .dstop{color:#fff}
.dlist>li.on .dd{background:var(--mintc);border-color:var(--mintc);transform:scale(1.35)}
.dlist>li.on .dn{font-weight:700}
.dview{position:relative}
.dpic{position:relative;aspect-ratio:3/2;overflow:hidden;background:rgba(0,0,0,.14)}
.dpic img{object-fit:cover;object-position:var(--fp,50% 30%)}
.dtext{margin-top:clamp(10px,1.8vh,16px);min-height:5em}
.dtext .pill{margin:0 0 6px;display:inline-block;background:var(--mintc)}
/* The ARC */
.shot.intro{z-index:0;background:#0d2219}
/* the opener: the cover photo starts under the title, so no face sits behind the words; the band above is the ARC's own dark green */
.shot.intro img{position:absolute;left:0;top:var(--ot,0px);height:calc(100% - var(--ot,0px));object-position:50% 0}
@media (min-width:760px){.shot.intro img{--ot:clamp(150px,19svh,210px)}}
@media (max-width:759px){.shot.intro img{--ot:clamp(120px,19svh,170px);object-position:64% 0}}
.rm{transition:opacity .4s}
.rm h3{font-size:clamp(34px,5vw,80px)}
.rm small{font:500 var(--fs)/1.5 var(--ms)}
.arcopen{position:relative;background:#0d2219;overflow:hidden;padding:clamp(70px,14vh,140px) calc(var(--gut) + 8px)}
.arcopen::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,34,25,.62),rgba(13,34,25,.72)),url(img/arc-presentation.jpg) center/cover}
.arcopen>*{position:relative}
/* Faces stay whole: the photograph starts under the bar, anchored to where the faces are */
.dip .lay{top:var(--navh)}
.lay img{object-position:var(--fp,50% 0)}
.ph{font-size:clamp(28px,3.9vw,62px)}
/* Every color */
.colors .a{font-size:clamp(30px,4.6vw,70px)}
.colors .b{font-size:clamp(44px,8vw,126px)}
.ccx{border:0;padding:0;margin:clamp(14px,2.6vh,26px) auto clamp(18px,3vh,30px);max-width:760px}
.ccq{font-size:clamp(19px,2vw,29px)}
.ccg button{min-height:46px;font-size:clamp(17px,1.6vw,22px)}
.ccg{margin-bottom:0}
.ccr{display:grid;grid-template-rows:0fr;min-height:0;gap:0;justify-content:stretch;text-align:center;transition:grid-template-rows .55s var(--ease)}
.ccr.set{grid-template-rows:1fr}
.ccri{overflow:hidden;min-height:0}
.ccb{margin-top:8px;padding:clamp(12px,1.8vh,18px) 16px;background:var(--c,var(--mid));color:#fff;clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease),background .6s var(--ease)}
.ccr.set .ccb{clip-path:inset(0)}
.ccb.dk{color:#12281E}
.ccb b{font:900 clamp(24px,2.8vw,40px)/1.05 var(--pf);letter-spacing:-.01em}
.ccb .ccname{display:inline;color:inherit;font:italic 500 clamp(22px,2.5vw,36px)/1.05 var(--pf);margin-left:.34em}
.ccb small{display:block;margin-top:3px;font:600 clamp(11.5px,.9vw,13px)/1.45 var(--ms);letter-spacing:.06em;color:inherit;opacity:.92}
.pick{margin:0 0 clamp(12px,2vh,20px)}
.pick button{width:clamp(44px,5vw,60px);height:clamp(44px,5vw,60px)}
.rally img{transition:filter .4s var(--ease)}
.rally img.toGray{filter:grayscale(1) brightness(.96)}
.rally img.rg{filter:grayscale(1) brightness(.96);opacity:0;transition:opacity .42s var(--ease)}
.rally img.rg.on{opacity:1}
.rally img.rc{opacity:0;transition:none;-webkit-mask-image:radial-gradient(circle at 50% 56%,#000 calc(var(--r,0%) - 26%),transparent var(--r,0%));mask-image:radial-gradient(circle at 50% 56%,#000 calc(var(--r,0%) - 26%),transparent var(--r,0%))}
.rally img.top{display:none}
/* Find your people: every name in plain sight */
.wall{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,19),auto);grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));column-gap:clamp(16px,2.6vw,40px);margin-top:clamp(18px,3vh,28px);font:500 clamp(13.5px,.95vw,15px)/1.3 var(--ms);color:var(--ink)}
.cl{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 0;border-top:1px solid rgba(26,65,50,.16);transition:color .3s}
.cl.hide{display:none}
.wall.filt .cl{color:var(--mid);font-weight:600}
.cl i{flex:none;font:normal 700 9px/1 var(--ms);letter-spacing:.12em;background:var(--mid);color:#fff;border-radius:3px;padding:3px 5px}
.js .wall .cl{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;transition-delay:var(--d,0s)}
.js .wall.in .cl{opacity:1;transform:none}
.bar3.big b{font-size:clamp(38px,5vw,70px)}
/* Banners: the Athletic C, no inner line */
.ban::after{display:none}
.ban{padding:clamp(70px,10vh,100px) clamp(12px,1.6vw,24px) clamp(44px,6vw,80px)}
.ban img{width:66%;margin:0 auto clamp(10px,1.4vw,18px)}
/* RISE: one line, one height */
.rls{padding-top:calc(min(25vw,44svh)*.16)}
.rl{font-size:clamp(19px,2.1vw,32px)}
.rl0{font:italic 500 clamp(15.5px,1.25vw,19px)/1.5 var(--pf)}
/* Performance: a film strip */
.perf{height:520svh}
.perf .stage{background:var(--cream);color:var(--ink);--cl:#8EADA1;display:flex;flex-direction:column;padding:calc(var(--navh) + clamp(8px,1.6vh,18px)) 0 clamp(8px,1.4vh,14px)}
.phd{position:static;padding:0 var(--gut);flex:none}
.phd h2{font-size:clamp(40px,6vw,92px);text-shadow:none;line-height:1}
.ps{font:italic 500 clamp(18px,2.1vw,31px)/1.1 var(--pf);color:#7E9E8D;text-shadow:none}
.pin{color:var(--ink);margin-top:clamp(4px,1vh,10px)}
.ptrack{position:relative;z-index:7;flex:1;min-height:0;display:flex;gap:clamp(10px,1.4vw,20px);padding:0 var(--gut);margin-top:clamp(10px,1.8vh,18px);will-change:transform;width:max-content}
.pcard{flex:none;height:100%;width:clamp(290px,70vw,1080px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);background:var(--deep) url(img/green.jpg) center/cover;color:var(--cream);overflow:hidden}
.pph{position:relative;overflow:hidden;min-height:0}
.pph img{position:absolute;top:0;left:-7%;width:114%;height:100%;object-fit:cover;will-change:transform}
.ptx{padding:clamp(14px,2.4vw,36px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.pno{font:italic 500 clamp(16px,1.5vw,22px)/1 var(--pf);color:var(--mintc)}
.ptx h3{font:900 clamp(26px,3vw,46px)/1.06 var(--pf);margin:.16em 0 .28em}
.ptx h3 .pill{vertical-align:.3em;background:var(--mintc)}
.ptx p{font-size:var(--fs);line-height:1.56}
.pfoot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:clamp(8px,1.4vh,12px) calc(var(--gut) + 6px) 0 var(--gut)}
.pc{margin:0;color:var(--soft);font-size:10px}
.pdots{margin:0;display:flex;gap:6px;flex-wrap:nowrap}
.pdots button{min-width:38px;min-height:38px;border:1px solid rgba(26,65,50,.4);color:var(--ink);font:700 12.5px/1 var(--ms);font-variant-numeric:lining-nums;background:transparent;border-radius:50%;cursor:pointer;transition:background .3s,color .3s}
.pdots button.on{background:var(--ink);color:#fff}
/* Family */
.fam{padding:clamp(80px,14vh,140px) var(--gut) clamp(50px,8vh,80px)}
.fam .a{font-size:clamp(38px,5.4vw,84px)}
.fam .b{font-size:clamp(66px,13vw,210px)}
.tri{overflow:visible}
.tri img{aspect-ratio:3/2;object-fit:cover}
.js .tri img{clip-path:inset(14% 8% 14% 8%);opacity:0;transform:scale(1.07);transition:clip-path 1.1s var(--ease),opacity .7s var(--ease),transform 1.3s var(--ease)}
.js .tri img:nth-child(2){transition-delay:.16s}.js .tri img:nth-child(3){transition-delay:.32s}
.js .tri.in img{clip-path:inset(0);opacity:1;transform:none}
/* Connie: the sky of page 39 */
.connie{padding-bottom:0;row-gap:0}
.cc{position:relative;z-index:1}
.sig{width:clamp(170px,15vw,220px);margin:10px 0 2px}
.prayer{font-size:clamp(21px,2.2vw,32px)}
.iwhb{grid-column:1/-1;position:relative;container-type:inline-size;margin:clamp(14px,3vh,30px) calc(var(--gut)*-1 - clamp(0px,0vw,0px)) 0 calc(var(--gut)*-1);aspect-ratio:1350/640;min-height:300px}
.iwhsky{position:absolute;left:0;right:0;bottom:0;top:-46%;background:url(img/iwh-sky.jpg) 50% 100%/cover;filter:brightness(.74) saturate(.96);-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 26%,#000 58%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 26%,#000 58%);pointer-events:none}
.iwhbld{position:absolute;left:0;bottom:0;width:100%;height:auto;max-width:none}
.iwht{position:absolute;right:4.4cqw;bottom:25.5cqw;text-align:right;color:#fff}
.iwht b{display:block;font:italic 900 5.7cqw/1.02 var(--pf);letter-spacing:-.01em;border-bottom:1.3px solid rgba(255,255,255,.7);padding-bottom:.08em;text-shadow:0 2px 18px rgba(10,40,60,.45)}
.iwht span{display:block;margin-top:.5em;font-size:clamp(10px,1.35cqw,15px);letter-spacing:.34em}
.est{padding:clamp(50px,9vh,90px) var(--gut)}
@media (max-width:759px){
  .mc{left:0;right:0;width:auto;padding:13px 30px 12px clamp(16px,5vw,22px);max-height:70svh}
  .mcq{font-size:clamp(16px,2.5svh,19px);line-height:1.28}
  .mctop{margin-top:9px}
  .mcph{width:58px}
  .mcn{font-size:19px}
  .mcl{margin-top:5px}
  .mcs{margin-top:8px;padding-top:8px;font-size:13.5px;line-height:1.46}
  .mcat{margin-top:7px;padding-top:7px}
  .qb{padding-top:clamp(60px,9vh,90px)}
  .v,.qb .v{grid-template-columns:minmax(0,1fr);row-gap:0}
  .vp{width:56%;margin:-46px 0 0}
  .vp img{height:auto;aspect-ratio:194/206}
  .vc{margin-top:-10px;position:relative}
  .course{grid-template-columns:minmax(0,1fr)}
  .gr{order:1}.gl{order:2;margin-top:6px}
  .kick{min-height:3.2em}
  .num{font-size:21vw}
  .elist{grid-template-rows:repeat(6,auto);grid-auto-columns:64vw;padding-right:40px}
  .elscroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .chips.scx{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);padding-right:22px}
  .chips.scx::-webkit-scrollbar{display:none}
  .chips.scx button{flex:none}
  .stops{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0;row-gap:0}
  .stopc{display:contents}
  .stopc .dot{grid-row:1;justify-self:center;margin:0 0 10px;left:auto;top:auto;position:relative}
  .stopc h3{grid-row:2;text-align:center}
  .stopc:nth-child(1) .dot,.stopc:nth-child(1) h3{grid-column:1}.stopc:nth-child(2) .dot,.stopc:nth-child(2) h3{grid-column:2}.stopc:nth-child(3) .dot,.stopc:nth-child(3) h3{grid-column:3}.stopc:nth-child(4) .dot,.stopc:nth-child(4) h3{grid-column:4}.stopc:nth-child(5) .dot,.stopc:nth-child(5) h3{grid-column:5}
  .gb{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--line)}
  .stopc.sel .gb{color:var(--mid)}
  .stopc.sel .dot{background:var(--mid);border-color:var(--mid);transform:scale(1.3)}
  .stopc .list{grid-row:3;grid-column:1/-1;display:none;margin-top:4px}
  .stopc.sel .list{display:block}
  .susan figure{width:100%}
  .susan .deskh{font-size:min(5.6vw,30px)}
  .sframe{padding:0 16px 10px}
  .susan{--ov:clamp(120px,44vw,220px)}
  .tprep{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .dg2{grid-template-columns:minmax(0,1fr);padding-top:10px}
  .dstop{grid-template-columns:30px minmax(0,1fr) auto 16px;column-gap:6px;min-height:52px}
  .dn{font-size:18px}
  .dtm{font-size:10.5px;letter-spacing:.02em}
  .dlist>li.on .dch{transform:rotate(135deg)}
  .dlist .dview{padding:2px 0 14px 36px}
  .dtext{min-height:0}
  .ph{font-size:min(8vw,34px)}
  .ccg{gap:5px}
  .wall{column-gap:14px}
  .cl{font-size:13px}
  .ban{width:36vw;padding:70px 8px 34px}
  .ban b{font-size:clamp(14px,4.2vw,18px)}
  .perf .stage{padding-top:calc(var(--navh) + 6px)}
  .phd h2{font-size:min(12vw,8svh)}
  .ps{font-size:min(19px,3.2svh)}
  .pin{font-size:13.5px;line-height:1.42}
  .pcard{width:83vw;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .ptx{padding:12px 14px 14px;justify-content:flex-start}
  .ptx h3{font-size:clamp(21px,3.1svh,26px)}
  .ptx p{font-size:13.5px;line-height:1.46}
  .pc{display:none}
  .pfoot{justify-content:center;padding-right:var(--gut)}
  .pdots{gap:4px}.pdots button{min-width:36px;min-height:36px}
  .tri{display:flex;grid-template-columns:none;gap:8px;margin:clamp(22px,3.4vh,34px) calc(var(--gut)*-1) 0;width:max-content;will-change:transform}
  .tri img{width:76vw;flex:none}
  .fam{overflow:clip}
  .tri{position:relative;z-index:5}
  .iwhb{margin-right:calc(var(--gut)*-1);aspect-ratio:auto;height:96vw;min-height:0}
  .iwhb{overflow:clip;overflow-clip-margin:100vh}
  .iwhbld{left:-14%;width:128%}
  .iwhsky{top:-24%}
  .iwht{right:auto;left:0;width:100%;text-align:center;bottom:42cqw}
  .iwht b{font-size:9.4cqw;display:inline-block}
  .iwht span{font-size:10px}
  .connie:not(.open) .pm{display:none}
}
@media (max-width:759px){
  .dearwrap{display:flex;flex-direction:column}
  .dearhead{order:1}
  .dearbody{order:2;margin-top:clamp(44px,12vw,70px);padding-bottom:18px}
  .pair{order:3;position:relative;bottom:auto;align-self:flex-end;margin:-44px calc(var(--rail) + 14px) 0 0;width:min(60vw,calc(50svh*.7455),340px)}
  .pair figcaption{position:relative;left:auto;right:auto;bottom:auto;margin-top:-30px;padding:0 10px 14px;width:auto}
  .pair .tag{font-size:19px;margin-bottom:3px}
  .pair .who2{font-size:9px;letter-spacing:.12em;line-height:1.5}
}
/* tall phones: the whole photograph, faces and all, with the words beneath it */
@media (max-aspect-ratio:7/10){
  .dip .lay img{height:calc(100vw*1.286);object-position:50% 0}
  .dip .lay::after{bottom:auto;height:calc(100vw*1.286)}
  .dip .ph{top:calc(100vw*1.286 + 14px);transform:none;padding:0 26px}
}
/* short screens and sideways phones: the pinned chapters tighten so every word still fits */
@media (max-height:600px){
  .rise .stage{padding-top:58px;padding-bottom:10px}
  .rls{font-size:min(20vw,27svh);padding-top:calc(min(20vw,27svh)*.12)}
  .rps{margin-top:clamp(14px,4svh,26px)}
  .rl{font-size:clamp(16px,3.6svh,21px);line-height:1.2;margin-top:3px}
  .rl0{font-size:clamp(13.5px,2.9svh,16px);line-height:1.34;margin-top:3px}
  .rb{font-size:clamp(12.5px,2.6svh,14.5px);line-height:1.36;margin-top:clamp(12px,2.4svh,18px)}
  .rfoot{display:none}
  .phd h2{font-size:min(9vw,11svh)}
  .ps{font-size:min(17px,4svh)}
  .pin{display:none}
  .ptx h3{font-size:clamp(19px,5svh,28px)}
  .ptx p{font-size:12.8px;line-height:1.36}
  .ptx{padding:8px 12px}
  .pdots button{min-width:30px;min-height:30px;font-size:11px}
  .ctext{bottom:10px}
  .ca{font-size:min(4.4vw,7svh);margin-top:2px}
  .cb{font-size:min(6.8vw,11svh)}
  .ctext p{font-size:13.5px;line-height:1.36;margin-top:5px}
  .fb{font-size:min(10.5vw,18svh)}
  .fa{font-size:min(3.8vw,6svh)}
  .fhd{top:68px}
  .fcap{bottom:10px}
  .fcap .bk{font-size:min(7vw,10svh)}
}
/* KEN BURNS: every big photograph drifts a little while it is on screen. Six slow paths, one per photograph, so no two move alike. */
.kb{overflow:hidden}
.kb>img,.kb>.cv1{will-change:transform;transform-origin:50% 50%;animation:var(--kb,kb1) var(--kbd,38s) ease-in-out infinite alternate;animation-play-state:paused}
.kb.live>img,.kb.live>.cv1{animation-play-state:running}
@keyframes kb1{from{transform:scale(1.04) translate(-1.2%,.6%)}to{transform:scale(1.12) translate(1.1%,-.8%)}}
@keyframes kb2{from{transform:scale(1.12) translate(1%,.5%)}to{transform:scale(1.04) translate(-.8%,-.6%)}}
@keyframes kb3{from{transform:scale(1.05) translate(.6%,-1%)}to{transform:scale(1.13) translate(-1%,.7%)}}
@keyframes kb4{from{transform:scale(1.11) translate(-.9%,-.8%)}to{transform:scale(1.04) translate(.9%,.6%)}}
@keyframes kb5{from{transform:scale(1.04) translate(1.1%,.8%)}to{transform:scale(1.1) translate(-.6%,-.5%)}}
@keyframes kb6{from{transform:scale(1.1) translate(-.5%,1%)}to{transform:scale(1.05) translate(.8%,-1%)}}
.court.kb img{transform-origin:60% 50%}
.aph.kb .pz{top:-6%;height:112%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .wake{opacity:1;transform:none;transition:none}
  .dip,.arcs,.pinv,.pinf,.rise,.perf{height:auto}
  .tprep>div,.wall .cl,.tri img{opacity:1!important;transform:none!important;clip-path:none!important}
  .kb>img,.kb>.cv1{animation:none!important;transform:none!important}
  .rally img.rc,.rally img.rg{display:none}
  .perf .stage{display:block;height:auto}.ptrack{flex-direction:column;width:auto;height:auto;transform:none!important}.pcard{width:auto;height:auto;margin-bottom:12px}.pph{aspect-ratio:3/2}.pfoot{display:none}.phd{padding-top:8px}
  .ccb{clip-path:none}
  .pinv .stage,.pinf .stage,.rise .stage,.perf .stage{height:auto;overflow:visible}
  .pinv .stage{min-height:100svh}.cw2{display:none}
  .pinf .stage{height:100svh}.fv{clip-path:none}.fhd{display:none}.fcap{opacity:1}.fs{opacity:1}
  .rp{grid-area:auto;opacity:1;visibility:visible;transform:none;margin-bottom:20px}.rls span{opacity:1}.rfoot{position:static;margin-top:12px}
  .jc .b{opacity:1;transform:none}.halo,.ban.arrived{animation:none}.ban{transform:none}
  .pair .room{display:none}
  .stage{position:relative}
  .l1,.l2{position:relative;left:auto;width:100%;height:100svh;clip-path:none!important}
  .dip .stage{height:auto}
  .maps{height:auto}
  .maps .stage{height:auto;overflow:visible}
  .mview{position:relative;height:72svh}
  .mc{position:static;width:auto;max-height:none;opacity:1;visibility:visible;transform:none;margin:14px var(--gut) 0}
  .mhd{opacity:1!important}
  .mp.ping::after{animation:none}
}

/* ============ NOVEMBER 5, AFTERNOON: Kelly's notes ============ */
/* 1 the cover: SCROLL is a whisper, and a thin arrow drifts down under it */
.hint .caps{display:block;font:500 9.5px/1.4 var(--ms);letter-spacing:.44em;color:#7c9587;opacity:.72}
.harr{display:block;position:relative;width:1px;height:30px;margin:10px auto 0;background:linear-gradient(180deg,rgba(124,149,135,0),#7c9587);animation:hdrift 2.6s ease-in-out infinite}
.harr::after{content:"";position:absolute;left:-4px;bottom:0;width:8px;height:8px;border-right:1px solid #7c9587;border-bottom:1px solid #7c9587;transform:rotate(45deg)}
@keyframes hdrift{0%{transform:translateY(-6px);opacity:0}28%{opacity:1}100%{transform:translateY(12px);opacity:0}}
/* 2 Kacey and Heidi wait until the end of the letter; the names sit on a quiet shade */
.js .pair{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .pair.show{opacity:1;transform:none}
.pair figcaption{left:0;right:0;bottom:0;padding:clamp(44px,7vh,80px) 7% clamp(14px,2.6vh,26px);background:linear-gradient(180deg,rgba(13,34,25,0),rgba(13,34,25,.5) 36%,rgba(13,34,25,.9))}
/* 4, 5 the coat of arms and its paragraph */
.jdp{align-items:center;gap:clamp(24px,3.4vw,52px);max-width:900px}
.jdp img{width:clamp(84px,9vw,124px)}
.jdp p{max-width:58ch;text-align:left;line-height:1.75}
/* 8, 21 Lori and Bryan arrive: the photograph lifts, the card wipes open, the words settle */
.vp{overflow:hidden}
.js .vp{opacity:0;transform:translateY(46px) scale(.97);transition:opacity .8s var(--ease),transform 1.1s var(--ease)}
.js .vc{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease) .25s}
.js .vq,.js .vwho{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .75s,transform .7s var(--ease) .75s}
.js .vwho{transition-delay:1s}
.js .vband.in .vp{opacity:1;transform:none}
.js .vband.in .vc{clip-path:inset(0)}
.js .vband.in .vq,.js .vband.in .vwho{opacity:1;transform:none}
/* 9, 10, 12, 13 Course of Studies */
.gl .kick{margin-top:clamp(10px,1.6vh,16px);opacity:.82;min-height:0}
.gband{max-width:1320px;margin:clamp(26px,4vh,44px) auto 0}
.cstart{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(22px,3vw,40px);background:var(--panel);color:var(--on)}
.cstart .gname{margin:0;font-size:clamp(34px,4vw,60px)}
.cstart .gsub{margin:6px 0 0;opacity:.85}
.cstart p{margin:0;font-size:var(--fs);line-height:var(--lh)}
@media (min-width:900px){.cstart p{columns:2;column-gap:clamp(20px,2.6vw,40px);text-align:justify}}
.gcap{text-align:left;margin-top:clamp(16px,2.6vh,26px)}
.vals{list-style:none;margin:clamp(10px,1.8vh,16px) 0 0;padding:0;border-top:1px solid var(--rule)}
.vals li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font:600 clamp(11px,.86vw,12.5px)/1.4 var(--ms);letter-spacing:.22em;text-transform:uppercase}
.vals .pill{margin:0;letter-spacing:.12em;font-size:9px;background:var(--mintc);color:#12281E;white-space:nowrap}
.sis{position:relative;overflow:hidden;text-align:center;padding:clamp(48px,9vh,100px) clamp(16px,3vw,40px);color:var(--cream);background:radial-gradient(ellipse at 50% 62%,rgba(165,221,189,.24),rgba(165,221,189,0) 62%),linear-gradient(180deg,#123024,#0B2219);border-top:1px solid rgba(174,203,185,.26);border-bottom:1px solid rgba(174,203,185,.26)}
.sis::before{content:"";position:absolute;inset:-60% -20%;background:conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,0) 0,rgba(255,255,255,.06) 12%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 60%,rgba(255,255,255,.04) 72%,rgba(255,255,255,0) 84%);animation:sisturn 22s linear infinite;pointer-events:none}
@keyframes sisturn{to{transform:rotate(360deg)}}
.sis>*{position:relative}
.sis .a{display:block;font:italic 500 clamp(22px,2.6vw,40px)/1.1 var(--pf);color:var(--sage)}
.sis .n{display:block;font:900 clamp(66px,11vw,176px)/1 var(--pf);letter-spacing:-.02em;font-variant-numeric:lining-nums;margin-top:.1em;color:#F7F5EF;text-shadow:0 1px 0 rgba(255,255,255,.22),0 -1px 0 rgba(0,0,0,.4),0 22px 44px rgba(0,0,0,.5)}
.sis .w{display:block;font:900 clamp(24px,4vw,64px)/1 var(--pf);letter-spacing:.16em;color:var(--mintc);margin-top:.18em}
.js .sis .a,.js .sis .n,.js .sis .w{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .sis .n{transform:translateY(22px) scale(.94);transition-delay:.15s}
.js .sis .w{transition-delay:.42s}
.js .sis.in .a,.js .sis.in .n,.js .sis.in .w{opacity:1;transform:none}
/* 14 the electives, centred in their shelf */
.elist{text-align:center}
/* 16, 17 the graduate cards */
.mcs{font-size:clamp(13px,.88vw,14px);line-height:1.55;text-wrap:balance}
.mcm::after{content:"";display:inline-block;width:7px;height:7px;margin:0 2px 3px 12px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg);animation:mbob 1.7s ease-in-out infinite}
.mcm[aria-expanded=true]::after{transform:rotate(-135deg);margin-bottom:-3px;animation:none}
@keyframes mbob{0%,100%{translate:0 0}50%{translate:0 5px}}
/* 18 Susan's quotation mark is a whisper behind the words, as printed */
.sl{position:relative}
.qm{position:absolute;left:-.05em;top:-.1em;height:auto;margin:0;font-size:clamp(150px,15vw,250px);line-height:1;color:#F7F5EF;opacity:.07;pointer-events:none;z-index:0}
.sl>p,.sl .more,.sl .tlink{position:relative;z-index:1}
.sl>p:first-of-type{padding-top:clamp(20px,3.4vh,34px)}
/* 19 the schedule: a glow runs down the stops, the chevrons nudge, the photograph opens */
.js .dlist.lit>li .dstop,.js .dg2.lit .dlist>li .dstop{animation:rowglow 1.5s var(--ease) both;animation-delay:calc(var(--i,0)*.14s)}
@keyframes rowglow{0%{background:rgba(165,221,189,0)}35%{background:rgba(165,221,189,.18);color:#fff}100%{background:rgba(165,221,189,0)}}
.js .dg2.lit .dlist>li .dch{animation:chnudge 1.5s var(--ease) both;animation-delay:calc(var(--i,0)*.14s + .2s)}
@keyframes chnudge{0%,100%{translate:0 0}40%{translate:6px 0}}
.js .dg2.lit .dlist>li.on .dd{animation:ddpulse 1.8s var(--ease) 1.1s 2}
@keyframes ddpulse{0%,100%{box-shadow:0 0 0 0 rgba(165,221,189,.6)}50%{box-shadow:0 0 0 9px rgba(165,221,189,0)}}
.js .dpic::after{content:"";position:absolute;inset:0;z-index:2;background:#1b3f31;transform-origin:100% 50%;transition:transform 1.3s var(--ease) .9s;pointer-events:none}
.js .dg2.lit .dpic::after{transform:scaleX(0)}
.dpic.kb>img{animation-play-state:paused}
.dpic.kb.live>img.on{animation-play-state:running}
/* 20 Incarnate Word Hall's own mark over Faith in Our Future */
.iwhlogo{width:clamp(56px,6.4vw,96px);height:auto;margin:0 auto clamp(8px,1.6vh,18px)}
@media (max-height:600px){.iwhlogo{display:none}}
/* 22, 23 scholarships: the named scholarship wipes in, the two lists settle line by line */
.bonnie{position:relative}
.js .bonnie::after{content:"";position:absolute;inset:0;background:var(--cream);transform-origin:100% 50%;transition:transform 1.1s var(--ease);pointer-events:none}
.js .bonnie.in::after{transform:scaleX(0)}
.bonnie>*{position:relative;z-index:1}
.js .bonnie .caps,.js .bonnie h3,.js .bonnie p{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .35s,transform .7s var(--ease) .35s}
.js .bonnie h3{transition-delay:.5s}.js .bonnie p{transition-delay:.7s}
.js .bonnie.in .caps,.js .bonnie.in h3,.js .bonnie.in p{opacity:1;transform:none}
.js .sch3 h3,.js .sch3 li,.js .sch3 p{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*.07s)}
.js .sch3.in h3,.js .sch3.in li,.js .sch3.in p{opacity:1;transform:none}
/* 24 every color: on a desktop the question, the grades and the swatches sit beside the photograph */
@media (min-width:900px){
.cgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3.4vw,54px);align-items:center;max-width:1320px;margin:clamp(18px,3vh,30px) auto 0}
.cleft{text-align:center}
.cgrid .ccx{margin:0 0 clamp(14px,2.4vh,22px);max-width:none}
.cgrid .pick{margin:0;justify-content:center}
.cgrid .rally{max-width:none;max-height:min(78svh,660px);margin:0}
}
/* 25 Ken Burns: the wrappers hold their photographs */
.ateamw{line-height:0}
/* 26 Connie: ragged right, three paragraphs behind Read more */
.connie .cc p:not(.prayer):not(.remember){text-align:left}
.cmorebtn{display:inline-flex;color:var(--sage)}
@media (min-width:760px){.connie:not(.open) .pd{display:none}}
@media (max-width:759px){.cstart{grid-template-columns:minmax(0,1fr)}.cstart p{text-align:left}}
@media (prefers-reduced-motion:reduce){
  .js .bonnie::after{display:none}
  .js .pair,.js .vp,.js .vc,.js .vq,.js .vwho,.js .sis .a,.js .sis .n,.js .sis .w,.js .bonnie .caps,.js .bonnie h3,.js .bonnie p,.js .sch3 h3,.js .sch3 li,.js .sch3 p{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .dpic::after{display:none}
  .harr,.sis::before,.mcm::after,.js .dg2.lit .dlist>li .dstop,.js .dg2.lit .dlist>li .dch,.js .dg2.lit .dlist>li.on .dd{animation:none!important}
}
/* the alumnae moment runs edge to edge and sits flush on the foot of the chapter, so it is a band, not a box */
.gband.sis{max-width:none;margin:clamp(34px,6vh,64px) calc(var(--gut)*-1) calc(clamp(50px,8vh,90px)*-1);border:0}
/* her years at Chapelle: a small ledger, each heading in mint caps on its own line */
.mc .mcd>div{font-size:clamp(12.5px,.84vw,13.5px);line-height:1.5;color:#E3EEE7}
.mcd p{margin-top:.9em}
.mcd p:first-child{margin-top:.3em}
.mcd b{display:block;font:600 9.5px/1.4 var(--ms);letter-spacing:.22em;text-transform:uppercase;color:var(--mintc);margin-bottom:2px}
.mcph{cursor:zoom-in;transition:transform .3s var(--ease),box-shadow .3s}
.mcph:hover{transform:scale(1.04);box-shadow:0 0 0 1.3px var(--sage),0 0 0 8px rgba(174,203,185,.16)}
/* two ARC rooms: the photograph nearly fills the stage, anchored to the top so the faces stay, its edges fading into the room's green */
.shot.fit{background:#0d2219}
.shot.fit img{position:absolute;top:0;height:100%;width:var(--fw,64%);left:calc((100% - var(--fw,64%))/2 + var(--fo,0%));object-fit:cover;object-position:var(--fx,50%) 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 14%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 14%);mask-composite:intersect}
.shot.fitd img{--fw:88%;--fx:40%;top:clamp(72px,10svh,104px);height:calc(100% - clamp(72px,10svh,104px))}
@media (max-width:759px){.shot.fit img{--fw:100%;--fo:0%;object-position:50% 0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%);mask-image:linear-gradient(180deg,transparent,#000 12%)}.shot.fitd img{object-position:40% 0}}
.fcap .caps{color:var(--mintc)}
@media (max-width:759px){.fcap .caps{color:var(--mid)}}   /* on a phone the caption sits on cream, where mint would vanish */
/* a team photograph with every face: shown whole on the card's green, no drift */
.pph.fitp{background:#0d2219}
.pph.fitp::before{content:"";position:absolute;inset:-24px;background:url(img/perf-dance2.jpg) center/cover;filter:blur(22px) brightness(.5) saturate(.7)}
.pph.fitp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,55,42,.55),rgba(21,55,42,.35) 50%,rgba(21,55,42,.6))}
.pph.fitp img{left:0;width:100%;object-fit:contain;object-position:50% 50%;transform:none;z-index:1;-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
@media (min-width:600px){.vq{text-align:justify;hyphens:none}}   /* the family quotes set as the book sets them */
/* the end of Connie's letter: the campus comes alive, Kelly's Campus rendering as a slow aerial clip */
.iwhb.vid{aspect-ratio:16/9;min-height:0;overflow:hidden;background:#0d2219}
.iwhv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
.iwhb.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,34,25,.55),rgba(13,34,25,0) 32%,rgba(13,34,25,0) 70%,rgba(13,34,25,.45));pointer-events:none}
.iwhb.vid .iwht{z-index:2;right:5cqw;bottom:auto;top:9cqw}
@media (max-width:759px){.iwhb.vid{aspect-ratio:4/3;height:auto}.iwhb.vid .iwht{top:8cqw;bottom:auto}}
@media (max-width:759px){   /* Kacey and Heidi on phones: no caption box, the photo fades into the green and the caption sits under it as type */
  .pair .cut{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%);mask-image:linear-gradient(180deg,#000 80%,transparent 99%)}
  .pair figcaption{background:none;margin-top:-22px;padding:0 4px 10px}
}
/* the photo sentences on tall phones: the words sit in the centre of the photograph, as on desktop (Kelly's call) */
@media (max-aspect-ratio:7/10){
  .dip .ph{top:calc(100vw*1.286*.5);transform:translateY(-50%);padding:0 26px}
  .dip .lay::after{background:linear-gradient(180deg,rgba(13,34,25,.26),rgba(13,34,25,0) 22%,rgba(13,34,25,.34) 40%,rgba(13,34,25,.34) 58%,rgba(13,34,25,0) 76%,rgba(13,34,25,.6))}
}
/* Deus Providebit: the coat of arms arrives (rises, unveils top to bottom, glows, settles), then the words follow */
.js .jdp img{opacity:0;transform:translateY(26px) scale(.86);-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 55%);mask-image:linear-gradient(180deg,#000 45%,transparent 55%);-webkit-mask-size:100% 220%;mask-size:100% 220%;-webkit-mask-position:0 100%;mask-position:0 100%;transition:opacity .9s var(--ease),transform 1.3s cubic-bezier(.2,1.25,.35,1),-webkit-mask-position 1.6s var(--ease),mask-position 1.6s var(--ease)}
.js .jdp.in img{opacity:1;transform:none;-webkit-mask-position:0 0;mask-position:0 0;animation:coaGlow 2.6s .7s var(--ease) both}
@keyframes coaGlow{0%{filter:drop-shadow(0 0 0 rgba(190,222,203,0))}35%{filter:drop-shadow(0 0 22px rgba(190,222,203,.6))}100%{filter:drop-shadow(0 0 8px rgba(190,222,203,.14))}}
.js .jdp p{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .55s,transform 1s var(--ease) .55s}
.js .jdp.in p{opacity:1;transform:none}
@media (max-width:759px){
  .jdp{gap:22px;padding-left:6px;padding-right:6px}
  .jdp img{width:118px}
  .jdp p{max-width:31ch;margin:0 auto;text-align:center;text-wrap:balance;line-height:1.7}
}
@media (prefers-reduced-motion:reduce){.js .jdp img,.js .jdp p{opacity:1;transform:none;-webkit-mask:none;mask:none;animation:none;transition:none}}
/* the family quotes on phones: the portrait centred and larger, locked onto the top of the card; quote justified, name centred under a hairline */
@media (max-width:759px){
  .qb .vband{padding:18px 16px 22px}
  .qb .vp{width:min(76%,300px);margin:-58px auto 0}
  .qb .vp img{aspect-ratio:194/206;height:auto}
  .qb .vc{margin-top:-30px;padding:46px 22px 22px;box-shadow:0 18px 36px -26px rgba(5,20,14,.7)}
  .qb .vq{text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3}
  .qb .vwho{text-align:center;text-wrap:balance;margin-top:16px;padding-top:14px;border-top:1px solid rgba(26,65,50,.18)}
}
/* the graduate cards on phones sit right under the map (the phone camera frames each stop between 64px and 64px + 30% of the screen), not at the bottom */
@media (max-width:759px){
  .maps .mc{top:calc(78px + 30%);bottom:auto;max-height:calc(70% - 90px)}
}
/* the map's last screen on phones: title, map and the four names held together around the middle (the camera centres the map at 50% + 20px) */
@media (max-width:759px){
  .maps .mend{top:max(74px,calc(50% - 212px));bottom:max(18px,calc(50% - 288px))}
}
/* the ARC on tall phones: one compact frame for every screen, top to bottom: "The ARC", the photo (square, keeps most of its width), the room description */
@media (max-width:759px) and (max-aspect-ratio:7/10){
  .arcs{--ah:min(100vw,43svh);--at:calc(var(--navh) + 74px)}
  .arcs .stage::after,.arcs .stage.open::after{background:none}
  .arcs .shot img,.arcs .shot.fit img,.arcs .shot.intro img{position:absolute;left:0;top:var(--at);height:var(--ah);-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent);mask-image:linear-gradient(180deg,#000 84%,transparent)}
  .arcs .shot.intro img{object-position:56% 0}
  .arcs .arct{left:0;right:0;top:var(--navh);height:74px;padding:0 var(--gut);background:#0d2219;box-sizing:border-box}
  .arcs .arct h2{font-size:44px}
  .arcs .rm{top:calc(var(--at) + var(--ah) + 14px);bottom:auto}
}


@media (max-width:759px) and (max-aspect-ratio:7/10) and (max-height:700px){.arcs{--ah:min(100vw,38svh);--at:calc(var(--navh) + 66px)}.arcs .arct{height:66px}.arcs .arct h2{font-size:40px}}
/* 6 New Classrooms on phones: the paragraph follows "Coming Soon" closely and ends closely */
@media (max-width:759px){.ftext{padding-top:12px;padding-bottom:34px}}
/* photo sentences on tall phones: the slow zoom makes the photo taller than its shading, which left a bright unshaded strip at the bottom. The photo now fades out at its foot and the shading reaches past it */
@media (max-aspect-ratio:7/10){
  .dip .lay img{-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 98%);mask-image:linear-gradient(180deg,#000 84%,transparent 98%)}
  .dip .lay::after{height:calc(100vw*1.286 + 40px)}
}
/* photo sentences on tall phones: the who-is-pictured caption sits on the photograph, at its foot (Kelly's call) */
@media (max-aspect-ratio:7/10){
  .dip .cap{top:calc(100vw*1.286 - 86px);bottom:auto}
}
/* photo sentences on tall phones, final: the photograph fills the whole screen under the nav (no empty green below), phrase centred, caption at the foot */
@media (max-aspect-ratio:7/10){
  .dip .lay img{height:100%;object-position:var(--fp,50% 0);-webkit-mask-image:none;mask-image:none}
  .dip .lay::after{bottom:0;height:auto;background:linear-gradient(180deg,rgba(13,34,25,.22),rgba(13,34,25,0) 22%,rgba(13,34,25,.3) 42%,rgba(13,34,25,.3) 58%,rgba(13,34,25,0) 74%,rgba(13,34,25,.62))}
  .dip .ph{top:50%;transform:translateY(-50%)}
  .dip .cap{top:auto;bottom:clamp(26px,4.5vh,44px)}
}
/* Find Your People on phones: every interest button in view, wrapping onto rows, never scrolled off the edge */
@media (max-width:759px){
  #pfil.scx{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;padding-right:0;gap:7px}
}
/* photo sentences on phones: the photo starts at the top of its scene, so no empty green band shows above it while it scrolls in (the nav covers that strip once it pins); the phrase stays centred in the visible part */
@media (max-width:759px){
  .dip .lay{top:0}
  .dip .ph{top:calc(50% + var(--navh)/2)}
}
/* state banners on phones: smaller and tucked against the edge so they never cover a face; C, title and years stacked with room between */
@media (max-width:759px){
  .ban{width:26vw;padding:74px 6px 30px}
  .ban img{width:54%;margin:0 auto 8px}
  .ban b{font-size:12.5px;line-height:1.12}
  .ban span{font-size:8px;letter-spacing:.06em;margin-top:6px}
  #banBowl{left:auto;right:10px}
  #banSoft{left:10px}
}
/* Performance cards on phones: the photo is flush edge to edge in its card; the sideways drift is off so no green ever shows beside it */
@media (max-width:759px){
  .pph img{left:0;width:100%;transform:none!important}
}
/* Performance cards on phones: every photo the same height, whatever the length of the description under it */
@media (max-width:759px){
  .pcard{grid-template-rows:33svh minmax(0,1fr)}
}
@media (max-width:759px) and (max-height:700px){.pcard{grid-template-rows:25svh minmax(0,1fr)}}
/* the friendship pair on tall phones (both slides the same): each photo shows at full width, centred, its top and bottom edges fading softly into a blurred copy of itself */
@media (max-aspect-ratio:7/10){
  #friend .lay{isolation:isolate;background:#0d2219}
  #friend .lay::before{content:"";position:absolute;inset:-40px;z-index:-1;background:var(--blur) center/cover;filter:blur(26px) brightness(.5) saturate(.8)}
  #friend .l1{--blur:url(img/uniforms-full.jpg);--ar:1.154}
  #friend .l2{--blur:url(img/hug.jpg);--ar:1.281}
  #friend .lay img{position:absolute;left:0;top:calc(50% + var(--navh)/2);height:calc(100vw*var(--ar) + 40px);transform:translateY(-50%);object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
}

/* scholars photo on phones: the frame is the photo's own shape (3:2), so every girl is in it; the slow zoom is off here so the girls at the ends stay whole */
@media (max-width:759px){
  .scph>img{height:auto;aspect-ratio:2000/1334;object-position:50% 50%}
  .scph.kb{animation:none!important;transform:none!important}
}
@media (max-width:759px){.scph{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}}   /* exactly screen-wide, so the 3:2 frame holds the whole photo */
@media (max-width:759px){.scph.kb>img{animation:none!important;transform:none!important}}   /* the zoom lives on the image itself; off here so the girls at the ends stay whole */

@media (max-width:759px){.connie .cc p:not(.prayer):not(.remember){text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3}}   /* Connie's letter: justified on phones (desktop stays ragged right, as she asked earlier) */

/* friendship pair on tall phones, STACKED (Kelly, Nov 5): the group photo fills the top part, placed so every face clears the nav (hair starts ~10% down the photo, shoes end ~97%); the hug photo is revealed in the bottom part by the scroll sweep */
@media (max-aspect-ratio:7/10){
  #friend{--fh:calc(var(--navh) + 100vw*1.034)}
  #friend .lay::before{display:none}
  #friend .l1{top:0;bottom:auto;height:var(--fh);background:#0d2219}
  #friend .l1 img{position:absolute;left:0;top:calc(var(--navh) - 100vw*.09);height:calc(100vw*1.154);transform:none;object-fit:cover;-webkit-mask-image:none;mask-image:none}
  #friend .l1 .ph{top:calc(50% + var(--navh)/2);opacity:1!important}
  #friend .l2{top:var(--fh);bottom:0;height:auto;background:#0d2219}
  #friend .l2 img{position:static;transform:none;height:100%;object-fit:cover;object-position:var(--fp,50% 8%);-webkit-mask-image:none;mask-image:none}
  #friend .l2 .ph{top:50%}
}
@media (max-width:759px){#panel{min-height:0!important}}   /* course list on phones: the panel fits each grade's list (no empty space under the shorter grades) */
@media (max-aspect-ratio:7/10){#friend .lay img{animation:none!important}}   /* stacked pair: no slow zoom, so the faces stay exactly where they are placed */
/* grade 12: the tagline sits over Join the Sisterhood (Kelly, Nov 5), arriving first */
.sis .sisk{display:block;color:#D7E7DC;font-size:clamp(10px,.85vw,12.5px);letter-spacing:.24em;line-height:1.7;margin:0 auto clamp(14px,2.4vh,22px);max-width:34ch;text-wrap:balance}
.js .sis .sisk{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .sis.in .sisk{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .sis .sisk{opacity:1;transform:none}}
@media (max-width:759px){.pair .who2 .wn{display:block}.pair .who2 .wn:first-child{white-space:nowrap}}   /* Kacey's caption on phones: her name and '13 on the first line, the rest under it */
/* the three prayers on phones: sized to the column so "Our Lady of Prompt Succor..." holds one line; all three match */
@media (max-width:759px){.jc .a,.jc .b{font-size:min(25px,calc((100vw - 2*var(--gut))*.0775))}.jc .a{white-space:nowrap}}
/* phones: every body-text box is justified like the letters (Kelly, Nov 5); centred one-liners stay centred */
@media (max-width:759px){
  .ctext p,.pg p,.dtext p,.tprep p,.bonnie p,.sch3 p,.mcs{text-align:justify;text-wrap:wrap;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3}
}
@media (max-width:759px){
  .ptx p{text-align:justify;text-wrap:wrap;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3}   /* Performance card descriptions justified too */
  .qb .vwho{font-size:16px;line-height:1.35}   /* Lori's and Bryan's names, larger on phones (Kelly, Nov 5) */
}

/* grade buttons read as tappable: full strength, and a soft glow ripples across the unpicked ones until the first tap (Kelly, Nov 5) */
.tabs button{opacity:.92}
.tabs.nudge button:not([aria-selected=true]){animation:tabGlow 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*.24s)}
@keyframes tabGlow{0%,55%,100%{box-shadow:0 0 0 0 transparent;transform:none;opacity:.92}
  22%{box-shadow:0 0 18px 1px color-mix(in srgb,currentColor 50%,transparent),inset 0 0 12px color-mix(in srgb,currentColor 22%,transparent);transform:translateY(-2px);opacity:1}}
@media (prefers-reduced-motion:reduce){.tabs.nudge button{animation:none!important}}
/* Course of Studies on phones: the grade number and "Your Course of STUDIES" share one row, as on desktop (Kelly, Nov 5) */
@media (max-width:759px){
  .shd{flex-direction:row;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:12px}
  .num{font-size:18vw}
  .ttl{text-align:right;margin-left:auto}
  .ttl .a{font-size:4.6vw}
  .ttl .b{font-size:8.8vw}
  .ttl .c{font-size:7.4vw;text-align:right;margin:.12em 0 0}
}
/* GOTCHA: .hint is the cover's pinned note (position:absolute); the grade-button glow class is .nudge */
/* Course of Studies header on phones: "Starts Here" leads like the start of a map, then "Your Course of STUDIES"; number and title centred on each other */
@media (max-width:759px){
  .shd{align-items:center}
  .ttl{display:flex;flex-direction:column;align-items:flex-end}
  .ttl .c{order:-1;margin:0 0 .18em}
}
@media (max-width:759px){.ttl .c{margin:0 0 .75em}.shd{align-items:flex-end}}   /* Starts Here stands higher, on its own above the title (Kelly, Nov 5); number sits level with STUDIES */
/* Course of Studies header on phones, Kelly's reconsidered layout (Nov 5): everything centred, top to bottom
   "Starts Here" (the start of the map), the big grade number, then YOUR COURSE OF STUDIES on one line in the same bold capitals, smaller */
@media (max-width:759px){
  .shd{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0;text-align:center}
  .shd>div:first-child{order:1;flex:0 0 100%;display:flex;justify-content:center}
  .ttl{display:contents}
  .ttl .c{order:0;flex:0 0 100%;text-align:center;margin:0 0 .3em;font-size:7.4vw}
  .ttl .a,.ttl .b{order:2;display:inline-block;margin:.35em 0 0;white-space:nowrap;font:900 calc((100vw - 2*var(--gut))*.074)/1.02 var(--pf);letter-spacing:-.01em;text-transform:uppercase;color:var(--num)}
  .ttl .a{margin-right:.28em}
  .ttl .gt{background:none;-webkit-text-fill-color:currentColor;color:inherit;padding:0}
  .num{font-size:22vw}
}
@media (max-width:759px){.ttl .ay{display:none}.ttl .a,.ttl .b{font-size:calc((100vw - 2*var(--gut))*.09)}}   /* phones: COURSE OF STUDIES, "Your" struck by Kelly (Nov 5), the line grows to fill the column */
@media (max-width:759px){.num,.num .tg{text-align:left}}   /* the 8th lockup keeps its own design (th left over the rule, GRADE under it); only the whole lockup is centred */
@media (max-width:759px){.num .n{font-size:1.45em}}   /* phones: the grade number itself much bigger; th and GRADE keep their size (Kelly, Nov 5) */
@media (max-width:759px){.num{align-items:flex-end}.num .tg{padding:0 0 .11em}}   /* th GRADE sits down on the big number's baseline, as before it grew */
/* 14,000 Alumnae: no box of its own; it sits in the section's green, only a soft glow behind the number that fades to nothing (Kelly, Nov 5: "too forced, should feel like part of the background") */
.sis,.gband.sis{background:radial-gradient(ellipse 62% 58% at 50% 58%,rgba(165,221,189,.17),rgba(165,221,189,.06) 45%,rgba(165,221,189,0) 75%);border:0}
.sis::before{-webkit-mask-image:radial-gradient(ellipse 50% 45% at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 50% 45% at 50% 50%,#000 30%,transparent 75%)}
/* ALUMNAE set as the print sets it (page 18): the same Playfair Black as 14,000, nearly as big, ordinary letter spacing (Kelly, Nov 5) */
.sis .w{font-size:clamp(40px,6.6vw,104px);letter-spacing:.005em;line-height:1;margin-top:.04em}
.sis .w{font-size:clamp(31px,5vw,80px);letter-spacing:.09em}   /* Kelly: smaller than 40 and more spaced out */
@media (max-width:759px){.mhd,.mend1{font-size:6.4vw;white-space:nowrap}}   /* Four outstanding graduates, / four unique roads to success. : two lines on phones (Kelly, Nov 5) */
/* Find Your People on phones: all seven interest buttons on two rows (Kelly, Nov 5) */
@media (max-width:759px){
  #pfil.scx{gap:6px 5px;justify-content:center}
  #pfil.scx button{padding:0 8px;font-size:11.5px;letter-spacing:0;min-height:40px}
}
@media (max-width:759px){#pfil.scx button{font-size:min(11.5px,2.95vw);padding:0 min(8px,1.95vw)}}   /* scales down on narrower phones so it still holds two rows */
@media (max-width:385px){#pfil.scx{gap:6px 4px}#pfil.scx button{font-size:10.8px;padding:0 6px}}   /* SE-width phones: still two rows */
/* RISE: a whisper of a very large Playfair Black italic letter behind each step, R I S E (Kelly, Nov 5); it settles in as the step arrives */
.rp[data-l]{position:relative;isolation:isolate}
.rp[data-l]::before{content:attr(data-l);position:absolute;z-index:-1;left:50%;top:50%;font:italic 900 clamp(300px,78vw,640px)/.8 var(--pf);color:rgba(247,245,239,.055);transform:translate(-50%,-46%) scale(1.08);opacity:0;transition:opacity 1.1s var(--ease),transform 1.6s var(--ease);pointer-events:none;user-select:none}
.rp.on[data-l]::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.rp[data-l]::before{transition:none}}
@media (max-width:759px){.board span{letter-spacing:.07em}}   /* scoreboard labels a touch tighter on phones so the LHSAA line holds four lines (Kelly, Nov 5) */
.rp[data-l]::before{font-size:clamp(520px,62vw,1100px)}
@media (max-width:759px){.rp[data-l]::before{font-size:min(165vw,760px)}}   /* Kelly: the RISE letter much bigger, filling the space behind the text */
/* the RISE letter is centred on the screen, not on the text block (Kelly, Nov 5) */
.rp[data-l]{position:static;isolation:auto}
.rise .stage{isolation:isolate}
.rp[data-l]::before{top:calc(50% + var(--navh,0px)/2)}
.rp[data-l]::before{top:50%}   /* centred on the RISE title and its text together (Kelly's marked box), which sits at the stage's middle */
@media (max-width:759px){.rp[data-l]::before{top:calc(50% + 36px)}}   /* the glyph's visible middle lands on the middle of RISE + text */
/* RISE letter placed by viewbook.js on the measured centre of its ink (vars --lx/--ly on the active step) */
.rp[data-l]::before{left:var(--lx,50%)!important;top:var(--ly,50%)!important}
/* RISE letter: no movement at all, it only fades in and out where it lands */
.rp[data-l]::before,.rp.on[data-l]::before{transform:translate(-50%,-50%);transition:opacity 1.1s var(--ease)}
/* real phones: as Safari's toolbar shrinks the screen grows taller than a pinned scene's frame (100svh), and the strip
   below showed the light page. Each pinned section now carries its own frame's colour, so that strip matches (Kelly, Nov 5) */
#prayer,#chapel,#arc,#pursuit,#friend{background:#0d2219}
#map{background:#14352A}
#rise{background:var(--rb,#15372A);transition:background .7s}
#classes,#perf{background:#F7F5EF}
/* class colour picker: the closed result panel was centred on its zero height and spilled up over the grade buttons,
   catching every tap on a phone (Kelly, Nov 5: "nothing happens"). It now opens from the top down and cannot be tapped while closed */
.ccr{align-items:start}
.ccr:not(.set) .ccri{visibility:hidden;pointer-events:none}
/* photo captions: the person's name always ends with her class year on the same line, then the rest (Kelly, Nov 5) */
.connie figcaption .wn{display:block}
.connie figcaption .wn:first-child{white-space:nowrap}
.scap .wn{display:block}   /* Susan's caption: her name and '90 lead, the rest under it */
@media (max-width:759px){
  .bonnie{margin-left:calc(16px - var(--gut));margin-right:calc(16px - var(--gut));padding:20px 18px}   /* the Bonnie box goes nearly edge to edge so justified lines have room and no wide gaps (Kelly, Nov 5) */
  .scap .wn:first-child{text-wrap:balance}   /* Susan's long name splits evenly, never "Mrs. Susan" alone */
}
/* the cover opens on the embossed crest: the photo stand-in (a flat, grey look) stays hidden unless the live emboss cannot run or is very slow (Kelly, Nov 5) */
.cover .fallback{visibility:hidden}
.cover.nogl .fallback{visibility:visible!important}
.cover canvas{transition:opacity .45s}