/* Student Leadership Summit — landing page
   An invitation and a programme. Public register: plain words, formal craft.

   Three things carry the brand through the page rather than decorating it:
   the measured slash (--sm-tilt, written in by the build from the artwork),
   the ground changing under you, and one gold line that threads every seam. */

@font-face{font-family:'PP Editorial New';font-weight:200;font-style:normal;font-display:swap;src:url('assets/fonts/editorial-200.woff2') format('woff2')}
@font-face{font-family:'PP Editorial New';font-weight:400;font-style:normal;font-display:swap;src:url('assets/fonts/editorial-400.woff2') format('woff2')}
@font-face{font-family:'Cabinet Grotesk';font-weight:400;font-style:normal;font-display:swap;src:url('assets/fonts/cabinet-400.woff2') format('woff2')}
@font-face{font-family:'Cabinet Grotesk';font-weight:500;font-style:normal;font-display:swap;src:url('assets/fonts/cabinet-500.woff2') format('woff2')}

:root{
  --green:#1E3B2F;
  --gold:#C7A96A;
  --black:#1E1E1D;
  --paper:#F4F1E9;
  --parchment:#EDE7DA;
  --line:#D9D2C2;
  --muted:#6D685D;          /* 4.91 on paper, 4.50 on parchment */

  /* Gold is the line, never a word. As type it measures 2.00 on paper and 1.83
     on parchment and fails outright, so numerals and labels take ink on a light
     ground and gold only on a dark one. One rule, no new colour. */
  --numeral:var(--black);   /* this file names ink --black; there is no --ink */

  /* Labels. One element, four levels of prominence, two trackings. Before this
     there were six sizes and eight letter-spacings doing the same job. */
  /* Type sizes are tokens because the rules are derived from them: the line
     beside a thing is that thing's size times --rule-k, which is the mark's own
     slash against its own cap height. */
  --size-head:clamp(32px,4.8vw,84px);
  --size-statement:clamp(41px,6.2vw,116px);
  --mark-w:min(88vw,760px);

  --label-lg:11px;          /* buttons */
  --label:10px;             /* what leads a section or a row */
  --label-sm:9.5px;         /* notes, captions, panel labels */
  --label-xs:9.5px;         /* the margin index, and anything in a corner */
  --track:0.2em;
  --track-wide:0.24em;      /* ceremonial only: the seal, the loader stamp */
  /* the Summit mark's own slash against its caps (measured 0.0283, 2026-10-13).
     The loader's stamp is the mark's date, so its slashes take the mark's
     ratio; --rule-k (0.0629, recorded from the retired wordmark) is the
     page's rule weight and stays where it is. */
  --stamp-k:0.0283;

  --display:'PP Editorial New',Georgia,'Times New Roman',serif;
  --text:'Cabinet Grotesk',Helvetica,Arial,sans-serif;

  /* --angle, --sm-x, --sm-y and --sm-tilt are written in by the build from the
     Summit mark's own slash. Nothing in this file guesses the angle. */
  --pad-x:clamp(22px,6vw,104px);
  --pad-y:clamp(78px,11vh,148px);
  --max:1140px;
  --bar:70px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--black);color:var(--paper);padding:14px 20px;text-decoration:none;
  font-family:var(--text);font-weight:500;font-size:var(--label-lg);letter-spacing:var(--track);
  text-transform:uppercase;
}
.skip:focus{left:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--black);
  font-family:var(--text);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:400}
section{padding:var(--pad-y) var(--pad-x);scroll-margin-top:calc(var(--bar) + 8px)}
.inner{max-width:var(--max);margin:0 auto;width:100%}
::selection{background:var(--gold);color:var(--black)}

/* ---------------------------------------------------------- the line
   One device, three places it appears: in a seam between two grounds, down the
   side of a panel, and as the rail's own progress. All of them take their tilt
   from the mark, and all of them draw from the bottom edge upward. */
.edge{position:relative;overflow:hidden}
.edge::after{
  content:'';position:absolute;left:var(--x,50%);top:50%;
  width:var(--rw,1px);height:320%;background:var(--rule,var(--gold));
  pointer-events:none;z-index:0;
  transform:translate(-50%,-50%) rotate(var(--sm-tilt));
}
.edge > *{position:relative;z-index:1}

/* the seam: the incoming ground, crossed once by the line */
/* The seam is the air between two bands, not an extra band of its own. Its
   neighbours give up the padding on the side that faces it: 150 + 186 + 150
   was 486px of nothing between the last line of one section and the first of
   the next. */
/* the divider's weight follows the page's rule ratio at a third of the heading
   size: present as a line, never a stroke */
/* two-tone: the outgoing ground above, the incoming below, so the line has a
   colour edge to cross - that crossing is the gesture, as it is in the mark */
.seam{
  position:relative;overflow:hidden;height:clamp(76px,8vw,124px);
  background:linear-gradient(to bottom, var(--from,var(--seam)) 0 50%, var(--seam) 50% 100%);
  --rw:max(1.5px, calc(var(--size-head) * var(--rule-k) * 0.42));
}
section[data-toseam]{padding-bottom:clamp(30px,4vh,58px)}
section[data-fromseam]{padding-top:clamp(30px,4vh,58px)}
/* the seam's line draws once, fully, as the seam comes into view */
.seam::after{
  content:'';position:absolute;left:var(--x,50%);top:50%;
  width:var(--rw,1px);height:360%;background:var(--rule,var(--gold));
  transform:translate(-50%,-50%) rotate(var(--sm-tilt));
  clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease);
}
.seam.in::after{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){.seam::after{clip-path:inset(0);transition:none}}

/* the slash as punctuation: things separated by the brand's line rather than
   by a character. Sized in em so it belongs to whatever type it sits in. */
.sl{display:inline-flex;flex-wrap:wrap;align-items:center;row-gap:.1em}
.sl__s{
  display:inline-block;flex:none;width:max(1.5px, calc(1em * var(--stamp-k) * 1.25));height:1.1em;
  margin:0 .32em;background:var(--gold);transform:rotate(var(--sm-tilt));
}

/* ---------------------------------------------------------- type */
/* The chapter mark. The section's number is set large and light in the
   margin and holds there while its section scrolls past, then hands off to
   the next: the one thing that moves between sections is the count. The label
   sits under it. */
.kicker{
  font-family:var(--text);font-weight:500;font-size:var(--label);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);margin:0;
}
.kicker__n{
  display:block;font-family:var(--display);font-weight:200;
  font-size:clamp(56px,7.4vw,118px);line-height:.88;letter-spacing:-0.035em;
  color:var(--numeral);margin:-0.06em 0 14px -0.03em;
}
.ed > .kicker{position:sticky;top:calc(var(--bar) + 26px);align-self:start}
/* Leading floor. PP Editorial New measures cap height 0.81em and descender
   0.23em, so a descender and the next line's cap meet at exactly 1.04 and
   OVERLAP below it. Nothing multi-line in this file sets leading under 1.08. */
.headline{
  font-family:var(--display);font-weight:400;font-size:var(--size-head);
  /* 1.01 is a one-line setting. Three lines of it put the descender of "happen"
     into the cap of the line under it. */
  line-height:1.09;letter-spacing:-0.021em;margin:0;max-width:19ch;
  /* an even rag beats a short last line carrying one word */
  text-wrap:balance;
}
/* the statement setting: the two places the page makes a claim rather than
   explaining something. Lighter, larger, and tight leading earns its keep here
   because the lines are long enough to carry it. */
.headline--statement{
  font-weight:200;font-size:var(--size-statement);
  line-height:1.08;letter-spacing:-0.032em;max-width:15ch;
}
.body{max-width:58ch;margin:0;text-wrap:pretty}
.body + .body{margin-top:1.1em}
/* the support under a statement. In the text face, not a small copy of the
   headline's: that is what made the pair read as one block. */
.lede{
  font-family:var(--text);font-weight:400;font-size:clamp(17px,1.5vw,21px);
  line-height:1.62;letter-spacing:0;max-width:46ch;margin:0;color:var(--muted);
  text-wrap:pretty;
}
.caption{
  font-family:var(--text);font-weight:500;font-size:var(--label-sm);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);margin:30px 0 0;
}

/* editorial grid: the label sits in the margin, content indents */
.ed{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:clamp(24px,5vw,86px);align-items:start}
.ed__body{max-width:1040px}
/* under a statement: the lede and the body side by side, so the support uses
   the width the statement opened rather than queuing under its left edge */
.ed__cols{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);
  align-items:start;margin-top:clamp(32px,5.4vh,70px);
}
.ed__cols .lede,.ed__cols .body{max-width:60ch}
.ed__cols .body{padding-top:.3em}

/* ---------------------------------------------------------- masthead
   The bar takes the colour of whatever is under it, and swaps to the reverse
   cuts with it. Nothing in the identity is redrawn to do this — both cuts are
   shipped files and only one is shown. */
.masthead{
  position:sticky;top:0;z-index:30;background:var(--paper);
  padding:clamp(13px,1.9vh,19px) var(--pad-x);border-bottom:1px solid var(--line);
  transition:background .28s var(--ease),border-color .28s var(--ease),padding .35s var(--ease);
}
.masthead__inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
/* The event first and largest, then who is behind it. Sized by height so the
   two sit on a shared cap line rather than being matched on box width. */
.masthead__sm{height:clamp(24px,2.9vw,38px);width:auto;display:block;max-width:none;flex:none}
.masthead__rule{width:1px;height:clamp(20px,2.3vw,30px);background:var(--gold);flex:none}
.masthead__trio{
  height:clamp(18px,2.1vw,27px);width:auto;display:block;max-width:none;flex:none;
  transition:opacity .4s var(--ease),max-width .5s var(--ease);
}
.masthead__sm--rev,.masthead__trio--rev{display:none}
/* the section you are in, where the event mark was */
.masthead__now{
  display:flex;align-items:baseline;gap:11px;font-family:var(--text);font-weight:500;
  font-size:var(--label-sm);letter-spacing:var(--track);text-transform:uppercase;color:var(--muted);
  opacity:0;max-width:0;overflow:hidden;white-space:nowrap;
  transition:opacity .4s var(--ease),max-width .5s var(--ease);
}
.masthead__now b{font-weight:500;color:var(--gold)}
.masthead__prog{position:absolute;left:0;bottom:-1px;height:1px;width:var(--prog,0%);background:var(--gold);transition:width .12s linear}
.masthead__apply{
  margin-left:auto;font-family:var(--text);font-weight:500;font-size:var(--label-sm);
  letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;color:var(--black);
  border:1px solid var(--gold);padding:14px 20px;flex:none;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.masthead__apply:hover,.masthead__apply:focus-visible{background:var(--gold);color:var(--black)}
.masthead__home{display:contents}
/* on the form page the bar's one action is the way back */
.masthead__back{
  margin-left:auto;font-family:var(--text);font-weight:500;font-size:var(--label-sm);
  letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;color:var(--muted);
  display:inline-flex;gap:8px;align-items:baseline;white-space:nowrap;transition:color .3s var(--ease);
  padding:14px 0;margin:-14px 0 -14px auto;
}
.masthead__back:hover,.masthead__back:focus-visible{color:var(--black)}
.masthead__back:focus-visible{outline:2px solid var(--black);outline-offset:4px}

/* over the hero the bar shows who is behind the day and the way to apply; the
   Summit's own mark is already on the screen, large, and appears in the bar
   only once that one has left. One mark per screen. */
.masthead.masthead--home:not([data-shrunk]) .masthead__sm,
.masthead.masthead--home:not([data-shrunk]) .masthead__sm--rev,
.masthead.masthead--home:not([data-shrunk]) .masthead__rule{display:none}
/* past the hero the bar tightens, the event mark gives way to the section */
.masthead[data-shrunk]{padding-top:9px;padding-bottom:9px}
/* past the hero the partners give way to the section you are in; the event's
   own mark stays, because that is what the bar is for */
.masthead[data-shrunk] .masthead__trio{opacity:0;max-width:0}
.masthead[data-shrunk] .masthead__rule{opacity:0}
.masthead[data-shrunk] .masthead__now{opacity:1;max-width:320px}

/* the bar on a dark ground */
:root[data-ground="green"] .masthead{background:var(--green);border-bottom-color:rgba(199,169,106,0.34)}
:root[data-ground="black"] .masthead{background:var(--black);border-bottom-color:rgba(199,169,106,0.34)}
:root[data-ground="green"] .masthead__apply,
:root[data-ground="black"] .masthead__apply{color:var(--paper)}
:root[data-ground="green"] .masthead__apply:hover,
:root[data-ground="black"] .masthead__apply:hover,
:root[data-ground="green"] .masthead__apply:focus-visible,
:root[data-ground="black"] .masthead__apply:focus-visible{color:var(--black)}
:root[data-ground="green"] .masthead__now,
:root[data-ground="black"] .masthead__now{color:rgba(244,241,233,0.62)}
:root[data-ground="green"] .masthead__sm,
:root[data-ground="black"] .masthead__sm,
:root[data-ground="green"] .masthead__trio,
:root[data-ground="black"] .masthead__trio{display:none}
:root[data-ground="green"] .masthead__sm--rev,
:root[data-ground="black"] .masthead__sm--rev,
:root[data-ground="green"] .masthead__trio--rev,
:root[data-ground="black"] .masthead__trio--rev{display:block}

/* ---------------------------------------------------------- the invitation */
.hero{position:relative;overflow:hidden;
  background:var(--green);color:var(--paper);
  min-height:calc(100svh - var(--bar));
  /* two rows, not centred content with something absolutely placed under it:
     the cue cannot then be overlapped by a long particulars row on a short
     viewport, which is exactly what it was doing at 720px. */
  display:grid;grid-template-rows:1fr auto;
  padding:clamp(64px,9vh,120px) var(--pad-x) clamp(26px,4vh,46px);
}
/* a spread: the identity on the left, the facts and the action on the right,
   on one baseline. The right column is sized to the lede's measure and does
   not grow with the screen; the gap between the two is what grows. */
.hero__inner{
  max-width:var(--max);margin:0 auto;width:100%;align-self:center;
  display:grid;grid-template-columns:minmax(0,var(--mark-w)) minmax(280px,400px);
  justify-content:space-between;align-items:end;gap:clamp(32px,5vw,96px);
}
.hero__id{min-width:0}
/* the facts and the action, bottom-aligned to the mark's baseline */
.hero__facts{display:flex;flex-direction:column;padding-bottom:.2em;position:relative;z-index:1}
.hero__lede{
  margin:0 0 clamp(22px,3.4vh,34px);
  font-size:clamp(16px,1.25vw,19px);line-height:1.58;color:rgba(244,241,233,0.84);text-wrap:pretty;
}
.hero__cta{margin:clamp(22px,3.4vh,34px) 0 0}
.hero__cta .btn{padding:17px 40px}
.hero__cta .apply__pending{display:block;text-align:left;margin-left:0}
.hero__wrap{position:relative;width:100%;max-width:var(--mark-w)}
.hero__slash{
  position:absolute;left:var(--sm-x);top:var(--sm-y);
  /* the Summit mark draws its slash at 0.679% of its own width; this is that
     same slash continued, so it is that same width */
  width:calc(var(--mark-w) * var(--mark-rule));height:260vh;background:var(--gold);z-index:0;
  /* --hero-p is 0 at the top of the page and 1 once the hero has gone. The mark
     and its line leave at different rates, so the slash opens away from it. */
  /* --hero-p is 0 at the top of the page and 1 once the hero has gone. The mark
     and its line leave at different rates, so the slash opens away from it. */
  transform:translate(-50%,calc(-50% + var(--hero-p,0) * 56px)) rotate(var(--sm-tilt));
}
.hero__wrap .emark{position:relative;z-index:1}
.hero__id{transform:translateY(calc(var(--hero-p,0) * -30px))}
.hero__facts{transform:translateY(calc(var(--hero-p,0) * -14px))}
.hero .cue{opacity:calc(1 - var(--hero-p,0) * 2.4)}
@media (prefers-reduced-motion:reduce){
  .hero__slash{transform:translate(-50%,-50%) rotate(var(--sm-tilt))}
  .hero__id,.hero__facts{transform:none}
  .hero .cue{opacity:1}
}
.emark{width:100%;max-width:var(--mark-w);display:block}

/* Date / Time / City as a ruled list: label left, value right, a hairline
   between rows. A list reads top to bottom beside a mark; a row of three
   columns wanted the full width and competed with it. */
.particulars{margin:0;border-top:1px solid rgba(199,169,106,0.45)}
.particulars > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid rgba(199,169,106,0.28);
}
.particulars dt{
  font-family:var(--text);font-weight:500;font-size:var(--label-xs);letter-spacing:var(--track);
  text-transform:uppercase;color:rgba(244,241,233,0.62);margin:0;
}
.particulars dd{margin:0;font-family:var(--display);font-size:clamp(17px,1.5vw,22px);line-height:1.2;text-align:right}
/* the same list in ink, for a paper page */
.particulars--ink{border-top-color:var(--black)}
.particulars--ink > div{border-bottom-color:var(--line)}
.particulars--ink dt{color:var(--muted)}

/* the cue: the one thing on the page that asks you to move */
.cue{
  justify-self:center;align-self:end;margin-top:clamp(30px,4.4vh,52px);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;position:relative;
  font-family:var(--text);font-weight:500;font-size:var(--label-xs);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:rgba(244,241,233,0.64);text-decoration:none;
  transition:color .3s var(--ease);
}
.cue:hover{color:var(--gold)}
.cue:focus-visible{outline:2px solid var(--gold);outline-offset:6px;color:var(--gold)}
.cue span{display:block;width:1px;height:38px;background:linear-gradient(var(--gold),rgba(199,169,106,0));animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.cue span{animation:none}}

/* on a short screen the mark gives way so the spread and the cue both fit */
@media (max-height:720px){
  .hero{--mark-w:min(74vw,616px)}
  .hero .emark{max-width:var(--mark-w)}
}

/* ---------------------------------------------------------- the loader
   The threshold says the one thing a threshold can honestly say: when. The
   date stamp the close uses, set large, where the separators are the brand's
   slash at the brand's own type-to-line ratio. It writes itself as the page
   loads. Paper, because the hero is green: public ground, then the room. */
.load{
  position:fixed;inset:0;z-index:90;background:var(--paper);
  display:grid;place-items:center;overflow:hidden;
  /* the stamp's size; everything in it is a ratio of this */
  --ds:clamp(60px,13vw,196px);
  /* the horizontal run of a full-height line at the brand's angle */
  --run:calc(100vh * var(--run-k));
}
.load__date{
  margin:0;display:flex;align-items:center;gap:calc(var(--ds) * 0.1);
  font-family:var(--display);font-weight:200;font-size:var(--ds);line-height:1;
  letter-spacing:-0.02em;color:var(--black);font-variant-numeric:lining-nums tabular-nums;
}
/* each numeral arrives when the slash before it is drawn; the first is there
   from the start, so the field is never empty */
.load__n{opacity:0;transform:translateY(.08em);transition:opacity .55s var(--ease),transform .65s var(--ease)}
.load.go .load__n[data-n="1"],.load__n.on{opacity:1;transform:none}
/* the slash: the brand's line beside type of this size, at the weight that
   ratio gives it, drawn bottom to top as its share of the work comes in */
.load__sl{
  display:block;flex:none;
  width:max(1.5px, calc(var(--ds) * var(--stamp-k)));height:calc(var(--ds) * 1.12);
  margin-top:calc(var(--ds) * -0.08);
  background:var(--gold);transform:rotate(var(--sm-tilt));
  clip-path:inset(calc(100% - var(--f,0) * 100%) 0 0 0);
  transition:clip-path .14s linear;
}
.load__stamp{
  position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:30px;margin:0;
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--text);font-weight:500;font-size:var(--label-sm);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--muted);opacity:0;
}
.load__stamp b{font-weight:500}
.load__stamp em{font-style:normal;color:var(--muted)}
/* ---------------------------------------------------------- phone
   Everything here is a size or a target, not a layout: the layout already
   collapses correctly above. */
@media (max-width:620px){
  /* 35px tall is tappable but mean. 44 is the number people can actually hit. */
  /* 0.22em on a 10px label is wide enough to read as spaced-out noise on a
     phone, where the line has half the room */
  /* 0.2em on a 10px label is wide on a line with half the room. One place. */
  :root{--track:0.16em;--track-wide:0.19em;--label:11px;--label-sm:10.5px;--label-xs:10px}
  .kicker{gap:11px}
}

@media (max-width:560px){.load__stamp em{display:none}.load{--ds:clamp(60px,18vw,90px)}}
.load.go .load__stamp{animation:fadein .55s var(--ease) .6s forwards}
@keyframes fadein{to{opacity:1}}
/* out along the same line, so the hero is uncovered by the device itself */
.load.out{animation:wipe .9s var(--ease) forwards;pointer-events:none}
@keyframes wipe{
  from{clip-path:polygon(-120vh 0, 320vw 0, 320vw 100%, calc(-120vh - var(--run)) 100%)}
  to{clip-path:polygon(150vw 0, 320vw 0, 320vw 100%, calc(150vw - var(--run)) 100%)}
}
.load.gone{display:none}
html.loading,html.loading body{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  /* no sequence: the stamp, complete, then gone */
  .load__n,.load__stamp{opacity:1;transform:none;transition:none;animation:none}
  .load__sl{clip-path:inset(0);transition:none}
  .load.out{animation:none;opacity:0;transition:opacity .3s}
}

/* ---------------------------------------------------------- the campus loop
   Ghost Depth, carried over from the L.E.A.D. Playbook so the two student
   leadership properties move the same way: giant outline lockups drifting one
   way behind a solid row riding the other, both edge-masked. The artwork is the
   campus secondary lockups, copied byte for byte with only colour removed. */
/* on green, flush under the hero: the room's base, the nine who fill it */
.cl{background:var(--green);color:var(--paper);overflow:hidden;padding:clamp(34px,5vh,54px) 0 clamp(40px,6vh,62px)}
.cl__eyebrow{display:flex;align-items:center;gap:16px;padding:0 var(--pad-x) clamp(22px,3vh,30px)}
.cl__eyebrow span{
  font-family:var(--text);font-weight:500;font-size:var(--label-sm);letter-spacing:var(--track);
  text-transform:uppercase;color:rgba(244,241,233,0.6);white-space:nowrap;
}
.cl__eyebrow i{flex:1;height:1px;background:rgba(199,169,106,0.4)}
.cl__depth{
  position:relative;padding:22px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.cl__loop{overflow:visible}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.cl__row{display:flex;align-items:center;gap:64px;width:max-content;padding-right:64px;will-change:transform}
.cl__item{display:inline-flex;align-items:center;flex:none}
.cl__item svg{height:30px;width:auto;display:block}
.cl__item--stacked svg{height:56px}
/* front: the lockups on one ink, riding left */
.cl__front{position:relative;z-index:2}
/* fill and stroke inherit through <use>; a descendant selector cannot cross
   into the symbol's shadow tree, which is why the artwork ships colourless */
.cl__front .cl__item svg{fill:var(--paper)}
/* ghost: outlines, much larger, drifting the other way behind */
.cl__ghost{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}
.cl__ghost .cl__row{gap:118px;padding-right:118px;opacity:.16}
.cl__ghost .cl__item svg{height:74px}
.cl__ghost .cl__item--stacked svg{height:140px}
.cl__ghost .cl__item svg{fill:none;stroke:var(--gold);stroke-width:1.4}
@media (prefers-reduced-motion:no-preference){
  .cl__front .cl__row{animation:clLoop 48s linear infinite}
  .cl__ghost .cl__row{animation:clLoopR 124s linear infinite}
  .cl:hover .cl__front .cl__row,.cl:hover .cl__ghost .cl__row{animation-play-state:paused}
}
@keyframes clLoop{to{transform:translateX(-50%)}}
@keyframes clLoopR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:760px){
  .cl__depth{-webkit-mask-image:none;mask-image:none;padding:6px 0 0}
  .cl__ghost{display:none}
  .cl__front .cl__row{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:20px 30px;padding:0 var(--pad-x)}
  .cl__front .cl__item--dup{display:none}
  /* a 30px lockup is nearly the full width of a phone; the static wrap needs
     them smaller or the band runs to half a screen */
  .cl__item svg{height:21px}
  .cl__item--stacked svg{height:40px}
}

/* ---------------------------------------------------------- running order
   A reference surface, not a reading one. The table is the content here, so
   the heading stops competing with it and becomes a label for it, and the
   whole thing hangs off the time column like a schedule should. */
.order .ed__body{max-width:980px}

/* the itinerary: times down the left, one continuous rail, the slash as the
   tick at every entry, the session and its note to the right. The rail is
   drawn per row so it joins across rows without knowing their heights. */
.itin{
  display:grid;grid-template-columns:clamp(68px,7.6vw,106px) 28px minmax(0,1fr) minmax(0,1.3fr);
  column-gap:clamp(14px,2.2vw,32px);
  border-top:max(1.5px, calc(var(--size-head) * var(--rule-k) * 0.6)) solid var(--black);
  padding-top:clamp(10px,1.6vh,18px);
}
.itin__row,.itin__part{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:baseline}
.itin__row{padding:clamp(16px,2.4vh,24px) 0}
.itin__part{padding:clamp(22px,3.4vh,34px) 0 clamp(4px,.8vh,8px)}
.itin__part:first-child{padding-top:clamp(8px,1.4vh,14px)}
.itin__t{
  margin:0;text-align:right;font-family:var(--display);font-weight:400;
  font-size:clamp(16px,1.5vw,21px);line-height:1.2;color:var(--numeral);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.itin{position:relative}
/* one rail, drawn top to bottom once the schedule is in view. Its x is the
   time column plus the gap plus half the tick column, all fixed widths. */
.itin::before{
  content:'';position:absolute;top:clamp(10px,1.6vh,18px);bottom:0;
  left:calc(clamp(68px,7.6vw,106px) + clamp(14px,2.2vw,32px) + 14px);
  width:1px;background:rgba(199,169,106,0.6);transform:scaleY(0);transform-origin:top;
  transition:transform 1.6s var(--ease);
}
.itin.in::before{transform:scaleY(1)}
.itin__mk{position:relative;align-self:stretch;min-height:1.4em}
.itin__mk::after{
  content:'';position:absolute;left:50%;top:.62em;width:2px;height:17px;background:var(--gold);
  transform:translate(-50%,-50%) rotate(var(--sm-tilt));
}
.itin__mk--part::after{height:0}
.itin__n{margin:0;font-family:var(--display);font-size:clamp(21px,2.3vw,31px);line-height:1.12;letter-spacing:-0.012em;text-wrap:balance}
.itin__d{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:40ch}
.itin__ph{margin:0;grid-column:3 / -1;font-family:var(--text);font-weight:500;font-size:var(--label-sm);letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}

/* ---------------------------------------------------------- the questions
   Six answers in the proofs' grid: three across, a rule above each, question
   over answer. One way of setting a set of short things. */
.qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,6vh,72px) clamp(22px,3vw,48px)}
.qa__c{border-top:1px solid var(--black);padding-top:clamp(16px,2.2vh,22px)}
.q__q{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(21px,2.1vw,29px);line-height:1.12;letter-spacing:-0.012em;text-wrap:balance}
.q__a{margin:12px 0 0;font-size:15.5px;line-height:1.58;color:var(--muted);text-wrap:pretty;max-width:52ch}

/* ---------------------------------------------------------- the two tracks
   Both on the page at once. A two-way choice is made by comparing, and a tab
   hid whichever one you were not looking at. Subgrid keeps the two notes on a
   shared row whether or not a track names a partner. */
.streams{background:var(--paper)}
.streams .lede{margin-top:clamp(22px,3.4vh,34px)}
.twin{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto auto;
  gap:0 clamp(28px,5vw,88px);margin-top:clamp(40px,6vh,76px);
}
.track{
  display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;
  border-top:max(1.5px, calc(var(--size-head) * var(--rule-k) * 0.6)) solid var(--black);
  padding-top:clamp(20px,3vh,32px);
}
.track__n{margin:0 0 clamp(12px,1.8vh,18px);font-family:var(--text);font-weight:500;font-size:var(--label-sm);letter-spacing:var(--track);color:var(--numeral)}
.track__name{
  font-family:var(--display);font-weight:400;font-size:clamp(26px,3.1vw,44px);
  line-height:1.08;letter-spacing:-0.02em;margin:0;text-wrap:balance;
}
.track__with{
  margin:0;padding-top:12px;font-family:var(--text);font-weight:500;
  font-size:var(--label-sm);letter-spacing:var(--track);text-transform:uppercase;color:var(--muted);
}
.track__with:empty{padding-top:0}
.track__note{margin:0;padding-top:clamp(18px,2.6vh,30px);font-size:17px;line-height:1.62;max-width:46ch}

/* ---------------------------------------------------------- the mixer */
/* the room is green */
.room{background:var(--green);color:var(--paper)}
.room .kicker{color:rgba(244,241,233,0.66)}
.room .kicker__n,.apply .kicker__n{color:var(--gold)}
.mixer__head{
  font-family:var(--display);font-weight:200;font-size:var(--size-statement);
  line-height:1.08;letter-spacing:-0.032em;margin:clamp(28px,4.5vh,52px) 0 0;max-width:15ch;
  text-wrap:balance;
}
.mixer__body{margin-top:clamp(32px,5.4vh,70px);max-width:50ch;color:rgba(244,241,233,0.84)}
.mixer__body .body{max-width:none}

/* ---------------------------------------------------------- the three proofs
   The copy says prepared, connected, ready to act. Setting it as one paragraph
   made three claims look like one sentence. */
/* Three words, not three paragraphs. The detail lines came out (they were
   claims the source copy does not make) and this was still the grid built for
   them: three wide columns holding one word each, which reads as content that
   failed to load. The word is now the size of the thing it is - the payoff of
   the sentence above - and the numeral is the label it always was. */
.proofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,48px);margin-top:clamp(50px,8vh,104px)}
.proof{border-top:1px solid var(--black);padding-top:clamp(16px,2.2vh,22px)}
/* no numerals of their own: the page has one index, in the margin. These are
   three things in no order, under a rule each. */
.proof__t{
  margin:0;font-family:var(--display);font-weight:200;
  font-size:clamp(27px,3.5vw,52px);line-height:1.04;letter-spacing:-0.025em;
}
.proof__d{margin:12px 0 0;font-size:15px;line-height:1.56;color:var(--muted);max-width:30ch}

/* ---------------------------------------------------------- the close */
/* The destination. It gets the statement setting, and it keeps its own padding
   rather than giving the top up to the seam, because this is the one surface
   the whole page is pointing at. */
.apply{
  text-align:center;background:var(--green);color:var(--paper);
  --rw:calc(var(--size-statement) * var(--rule-k));
}
.apply.edge[data-fromseam]{padding-top:clamp(84px,12vh,164px)}
.apply{padding-bottom:clamp(84px,12vh,164px)}
.apply .headline{
  max-width:none;margin:0 auto;font-weight:200;
  font-size:var(--size-statement);line-height:1.08;letter-spacing:-0.032em;
}
.apply .body{margin:22px auto 0;color:rgba(244,241,233,0.84)}
.apply__cta{margin-top:clamp(40px,6vh,72px)}
.apply__note{font-family:var(--text);font-weight:500;font-size:var(--label-sm);letter-spacing:var(--track);text-transform:uppercase;color:rgba(244,241,233,0.62);margin:24px 0 0}
.seal__cap{margin:0 0 clamp(26px,4vh,44px);font-family:var(--text);font-weight:500;font-size:var(--label-xs);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold)}
/* what happens after the button */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,52px);margin:clamp(46px,7vh,88px) auto 0;max-width:860px;text-align:left}
.step{border-top:1px solid rgba(199,169,106,0.4);padding-top:18px}
.step__n{margin:0 0 8px;font-family:var(--text);font-weight:500;font-size:var(--label-xs);letter-spacing:var(--track);color:var(--gold)}
.step__t{margin:0 0 6px;font-family:var(--display);font-size:clamp(17px,1.9vw,23px);line-height:1.2}
.step__d{margin:0;font-size:14px;line-height:1.55;color:rgba(244,241,233,0.66)}

/* ---------------------------------------------------------- button */
.btn{
  display:inline-block;font-family:var(--text);font-weight:500;font-size:var(--label-lg);
  letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;
  padding:19px 50px;border:1px solid var(--gold);background:var(--gold);color:var(--black);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.btn{position:relative;overflow:hidden;isolation:isolate}
/* a paper wedge sweeps across at the brand angle */
.btn::before{
  content:'';position:absolute;inset:-2px -30%;z-index:-1;background:var(--paper);
  transform:translateX(-112%) skewX(calc(-1 * var(--sm-tilt)));
  transition:transform .55s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0) skewX(calc(-1 * var(--sm-tilt)))}
.btn:hover,.btn:focus-visible{color:var(--black)}
.btn--pending::before{display:none}
.btn:focus-visible,.masthead__apply:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* no destination yet: say so rather than offering a button that goes nowhere */
.btn--pending{
  background:transparent;color:rgba(244,241,233,0.6);border-color:rgba(244,241,233,0.3);
  cursor:not-allowed;
}
.apply__pending{
  display:block;margin:20px 0 0;font-family:var(--text);font-weight:500;font-size:var(--label-sm);
  letter-spacing:var(--track);text-transform:uppercase;color:var(--gold);
}

/* ---------------------------------------------------------- footer */
.foot{background:var(--green);color:var(--paper);padding:clamp(48px,8vh,86px) var(--pad-x);border-top:1px solid rgba(199,169,106,0.34)}
.foot__inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot__name{font-family:var(--display);font-size:clamp(18px,2vw,26px);line-height:1.25;margin:0 0 8px}
.foot__meta{margin:0;font-size:14px;line-height:1.55;color:rgba(244,241,233,0.72)}
.foot__meta + .foot__meta{margin-top:4px}
.foot__contact{margin-top:12px}
/* a link has to look like one, and at full paper rather than the 0.6 the
   surrounding line sits at */
.foot__meta a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;display:inline-block;padding:13px 0;margin:-13px 0;line-height:1.2;transition:color .25s var(--ease)}
.foot__meta a:hover,.foot__meta a:focus-visible{color:var(--gold)}
.foot__meta a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* the partner lockup, generated cap-matched by the hub's own tool */
.foot__with{
  margin:0 0 12px;font-family:var(--text);font-weight:500;font-size:var(--label-xs);
  letter-spacing:var(--track);text-transform:uppercase;color:rgba(244,241,233,0.62);
}
.foot__pair{width:clamp(190px,21vw,268px);display:block;max-width:none;margin-left:auto}
.foot__right{flex:0 0 auto;text-align:right}
/* ---------------------------------------------------------- the form page
   apply/: a spread. Left, everything a student needs beside the form, sticky
   while the form scrolls; right, the form in a white frame so Jotform's card
   sits inside something rather than floating on paper. */
.is-form{min-height:100svh;display:flex;flex-direction:column}
.is-form .form{flex:1}
.form{background:var(--paper);padding:clamp(40px,6vh,80px) var(--pad-x) clamp(64px,9vh,120px)}
.form__inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);
  gap:clamp(36px,6vw,110px);align-items:start;
}
.form__aside{position:sticky;top:calc(var(--bar) + 28px)}
.form__head{margin-top:clamp(14px,2vh,22px);font-size:clamp(34px,3.4vw,54px);max-width:none}
.form__lede{max-width:52ch;margin:clamp(16px,2.4vh,24px) 0 clamp(24px,3.6vh,36px);font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.form__meta{margin:12px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55}
.form__meta a{color:var(--black);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;display:inline-block;padding:13px 0;margin:-13px 0;line-height:1.2}
.form__contact{margin-top:clamp(22px,3.2vh,32px)}
/* the reimbursement amounts */
.travel{margin-top:clamp(28px,4.2vh,44px)}
.travel__h{margin:0;font-family:var(--text);font-weight:500;font-size:var(--label);letter-spacing:var(--track);text-transform:uppercase}
.travel__p{margin:8px 0 12px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.travel__rows{margin:0;border-top:1px solid var(--black)}
.travel__rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:10px 0;border-bottom:1px solid var(--line)}
.travel__rows dt{margin:0;font-size:15px}
.travel__rows dd{margin:0;font-family:var(--display);font-size:clamp(17px,1.4vw,20px);font-variant-numeric:tabular-nums}
/* a fold: closed by default, native details/summary, the label in small caps
   with a plus that turns into a cross. Used for the amounts under the travel
   question, where the answer matters first and the figures second. */
.fold{margin-top:16px;border-top:1px solid var(--black);border-bottom:1px solid var(--line)}
.fold__s{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px 0;font-family:var(--text);font-weight:500;font-size:var(--label-sm);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--black);
}
.fold__s::-webkit-details-marker{display:none}
.fold__s i{position:relative;flex:none;width:12px;height:12px;transition:transform .35s var(--ease)}
.fold__s i::before,.fold__s i::after{content:'';position:absolute;left:50%;top:50%;background:var(--black);transform:translate(-50%,-50%)}
.fold__s i::before{width:12px;height:1px}
.fold__s i::after{width:1px;height:12px}
.fold[open] .fold__s i{transform:rotate(45deg)}
.fold__s:hover{color:var(--muted)}
.fold__s:focus-visible{outline:2px solid var(--black);outline-offset:4px}
.fold__b{padding-bottom:6px}
.fold .travel__rows{border-top:1px solid var(--line)}
.fold .travel__rows > div:last-child{border-bottom:0}
/* under the question on the home page */
.qa__c .travel__rows dt{font-size:14.5px;color:var(--muted)}
.qa__c .travel__rows dd{font-size:17px}
/* the form itself */
.form__frame{background:#fff;border:1px solid var(--line);padding:clamp(6px,1.4vw,18px)}
.form__frame iframe{display:block;width:100%;min-height:539px}
@media (max-width:900px){
  .form__inner{grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vh,48px)}
  .form__aside{position:static;max-width:560px}
  .form__frame{margin:0 calc(-1 * var(--pad-x) + 8px);padding:6px}
}

/* ---------------------------------------------------------- arrivals
   Everything arrives along the line rather than straight up: 12px of travel
   on the slash's own axis, once, so every entrance on the page is the same
   small gesture. --i staggers a row of them. */
.rv{
  opacity:0;transform:translate(-4px,12px);
  transition:opacity .7s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 60ms);
}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .itin::before{transform:none;transition:none}
}
/* Lenis drives the wheel; the browser's own anchor smoothing would fight it */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------------------------------------------------------- wide screens
   At 1920 the 1140 frame left 397px of dead margin a side and the type had
   stopped growing 400px earlier. The frame opens only from 1600, because below
   that the rail's gutter is what gives way. */
@media (min-width:1600px){
  :root{--max:1320px}
}
@media (min-width:1900px){
  :root{--max:1420px}
}

/* ---------------------------------------------------------- responsive */
@media (max-width:900px){
  :root{--bar:58px}
  .ed{grid-template-columns:minmax(0,1fr);gap:22px}
  .ed > .kicker{position:static}
  .kicker__n{font-size:48px;margin-bottom:8px}
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vh,44px)}
  .hero__facts{max-width:520px;padding-bottom:0}
  .hero__lede{max-width:44ch}
  .ed__cols{grid-template-columns:minmax(0,1fr);gap:22px}
  .ed__cols .body{padding-top:0}
  .twin{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:34px}
  .track{grid-template-rows:none;grid-row:auto}
  .itin{grid-template-columns:66px 22px minmax(0,1fr)}
  .itin::before{left:calc(66px + clamp(14px,2.2vw,32px) + 11px)}
  .itin__d{grid-column:3;margin-top:6px}
  .itin__row{row-gap:0}
  .qa{grid-template-columns:minmax(0,1fr);gap:30px}
  .proofs,.steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .foot__right{text-align:left}
  .masthead__trio,.masthead__trio--rev,.masthead__rule{display:none}
  :root[data-ground="green"] .masthead__trio--rev,
  :root[data-ground="black"] .masthead__trio--rev{display:none}
  .masthead__now{margin-left:0}
  /* over the hero the mark is hidden, so the partners take the bar's left */
  .masthead.masthead--home:not([data-shrunk]) .masthead__trio--rev{display:block}
}
@media (max-width:560px){
  .particulars dd{font-size:16px}
  .hero__cta .btn{display:block;text-align:center}
  .masthead__now{display:none}
  .seam{height:76px}
  .apply{--x:93% !important}
}

/* ---------------------------------------------------------- print */
@media print{
  @page{size:A4;margin:14mm}
  html,body{background:#fff}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rv{opacity:1;transform:none}
  .masthead{position:static}
  section{padding:10mm 0;break-inside:avoid}
  .hero{min-height:0}
}