:root{
  --cream:#f2f0eb; --ink:#1a1a18;
  --display:"Cormorant",Georgia,"Times New Roman",serif;
  --body:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --shadow:0 1px 20px rgba(20,19,17,.6);
  --bar:clamp(80px,10.5vh,124px);
  --navh:clamp(74px,9.6vh,92px);   /* height of the sticky row in a sheet */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);font-weight:300;
  overflow:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}

/* ---- the whole page is the film: corner to corner, cropped, never letterboxed ---- */
.stage{position:fixed;inset:0;overflow:hidden;background:var(--ink)}
.stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity 1.2s ease, filter .5s ease}
#ambient{z-index:0;opacity:0}
#arrival{z-index:1;opacity:1}
.stage.settled #ambient{opacity:1}
.stage.settled #arrival{opacity:0}
/* Step two of the light ladder. The arrival is the darkest the brand ever goes.
   A vertical lifts off that floor, and the pages beyond it are lighter again.
   The garden keeps moving behind a sheet, it just loses its colour. */
.stage.sheeting>video{filter:grayscale(1) brightness(.62) contrast(.92)}

/* ---------- banner across the top strip ---------- */
.bar{position:absolute;z-index:9;top:0;left:0;right:0;height:var(--bar);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(14px,2.2vh,26px) clamp(16px,3.2vw,40px) 0;
  background:linear-gradient(to bottom,rgba(20,19,17,.62) 0%,rgba(20,19,17,.34) 62%,rgba(20,19,17,0) 100%);
  opacity:0;animation:fade .9s ease .3s forwards}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--cream);min-width:0}
.brand img{width:clamp(34px,3.4vw,44px);height:auto;flex:none;
  filter:drop-shadow(0 1px 4px rgba(255,255,255,.45)) drop-shadow(0 2px 10px rgba(20,19,17,.7))}
.brand span{font-family:var(--mono);font-size:clamp(11.5px,1.25vw,14px);letter-spacing:.16em;
  text-transform:uppercase;text-shadow:var(--shadow);white-space:nowrap}
.bar nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);flex:none}
.bar nav a{font-family:var(--mono);font-size:clamp(9px,.95vw,11px);letter-spacing:.15em;
  text-transform:uppercase;color:rgba(242,240,235,.88);text-decoration:none;
  padding:8px 2px;text-shadow:var(--shadow)}
.bar nav a:hover{color:#fff}
.bar nav a.signin{border:1px solid rgba(242,240,235,.5);border-radius:3px;padding:9px 14px;color:#fff}
.bar nav a.signin:hover{background:rgba(242,240,235,.16)}
@keyframes fade{to{opacity:1}}

/* ---------- headline ---------- */
.hero{position:absolute;z-index:6;left:50%;transform:translateX(-50%);
  width:min(1440px,94vw);text-align:center;pointer-events:none;
  opacity:0;animation:rise 1.2s cubic-bezier(.2,.7,.3,1) .9s forwards}
.hero h1{font-family:var(--display);font-weight:400;line-height:1.04;text-wrap:balance;
  font-size:clamp(27px,4.6vw,84px);letter-spacing:-.006em;
  margin:0 0 14px;color:#fff;text-shadow:0 2px 30px rgba(20,19,17,.7)}
/* 4.6vw against 44 characters of Cormorant always fits, so it can be held to
   one line wherever there is room for one. */
@media (min-width:900px){ .hero h1{white-space:nowrap} }
/* below that it breaks at the comma, so the promise reads as two lines */
@media (max-width:899px){
  .hero h1{font-size:clamp(30px,8.6vw,48px);line-height:1.12}
  .hero h1 em{display:block}
}
.hero h1 em{font-style:italic}
.hero p{font-family:var(--mono);font-size:clamp(9.5px,1.05vw,11.5px);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(242,240,235,.9);margin:0;text-shadow:var(--shadow)}
@keyframes rise{from{opacity:0;transform:translateX(-50%) translateY(12px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ---------- the four marks ---------- */
.paths{position:absolute;inset:0;z-index:5}
.diamond{position:absolute;inset:0}
.path{position:absolute;width:var(--w,auto);
  transform:translate(-50%,-50%);background:none;border:0;padding:0;
  cursor:pointer;color:#fff;text-align:center;font-family:inherit;line-height:1;
  opacity:0;animation:mark 1.1s cubic-bezier(.2,.7,.3,1) 8s forwards}
.path:nth-child(2){animation-delay:8.18s}
.path:nth-child(3){animation-delay:8.36s}
.path:nth-child(4){animation-delay:8.54s}
@keyframes mark{from{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.path img{width:var(--w);height:auto;display:block;
  transform:translateY(var(--lift,0px)) scale(var(--sc,1));
  filter:drop-shadow(0 3px 14px rgba(20,19,17,.45));
  transition:transform .45s cubic-bezier(.2,.7,.3,1),filter .38s}
/* The label hangs below and is OUT of the button's box, so the anchor centres
   the mark itself on its path rather than the mark-plus-label, which was
   floating every mark a label's height above its own arm. */
.path .label{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:14px;white-space:nowrap}
/* the name under a door. Tracking comes down as the size goes up, or it
   reads as a caption rather than a name. */
.path .name{font-family:var(--mono);font-weight:500;font-size:clamp(13px,1.55vw,18px);
  letter-spacing:.155em;text-transform:uppercase;display:block;color:#fff;
  text-shadow:0 1px 4px rgba(20,19,17,.85),0 2px 24px rgba(20,19,17,.8)}
.path .count{font-family:var(--mono);font-size:clamp(8.5px,.85vw,9.5px);letter-spacing:.1em;
  color:rgba(242,240,235,.74);display:block;margin-top:6px;text-shadow:var(--shadow)}
.path:hover img,.path:focus-visible img{--lift:-8px;--sc:1.09;
  filter:drop-shadow(0 12px 28px rgba(20,19,17,.5))}
.path:focus-visible{outline:2px solid #fff;outline-offset:12px;border-radius:5px}

.glow{position:absolute;z-index:4;inset:0;pointer-events:none;opacity:0;
  transition:opacity .5s ease;mix-blend-mode:multiply}
.glow.on{opacity:.62}

/* ---------- the vertical sheet ----------
   Its own scroller, so nothing can shove the stage. The ground is the held
   frame twice over: desaturated underneath, full colour on top but masked to
   this vertical's arm, so only your path keeps its colour. */
.sheet{position:absolute;inset:0;z-index:10;overflow:hidden;
  transform:translateY(100%);transition:transform .62s cubic-bezier(.16,.84,.3,1);
  visibility:hidden;background:transparent}
.sheet.open{transform:translateY(0);visibility:visible}
/* the scroller is its own layer, so the ground beneath never scrolls away */
.sheet__scroll{position:absolute;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.sheet__bg i{position:absolute;inset:0;display:block}
/* a second copy of the same loop, in colour, punched to this vertical's arm.
   The desaturated one underneath is the page's own background video. */
.sheet__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:var(--mask);mask-image:var(--mask);
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;filter:brightness(1.05) saturate(1.5)}
.sheet__bg .scrim{background:linear-gradient(to bottom,
  rgba(20,19,17,.56) 0%, rgba(20,19,17,.30) 32%, rgba(20,19,17,.66) 72%, rgba(20,19,17,.86) 100%)}

.sheet__in{position:relative;max-width:1180px;margin:0 auto;
  padding:0 clamp(18px,4vw,48px) clamp(56px,9vh,110px)}

/* sticky row: back on the left, the other three doors on the right */
.sheet__nav{position:sticky;top:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:14px;
  padding:clamp(14px,2.4vh,22px) 0 clamp(20px,3vh,30px);
  background:linear-gradient(to bottom,rgba(20,19,17,.97) 0%,rgba(20,19,17,.93) 52%,
                                        rgba(20,19,17,0) 100%)}
.sheet__back{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;flex:none;
  color:#fff;background:rgba(20,19,17,.5);border:1px solid rgba(255,255,255,.4);border-radius:3px;
  padding:9px 15px;cursor:pointer}
.sheet__back:hover{background:rgba(255,255,255,.15)}
.doors{display:flex;align-items:center;gap:clamp(8px,1.4vw,16px)}
.doors b{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,240,235,.5);font-weight:400;margin-right:2px}
.door{background:none;border:0;padding:4px;cursor:pointer;display:flex;align-items:center;gap:7px;
  opacity:.62;transition:opacity .3s}
.door:hover{opacity:1}
.door img{width:clamp(22px,2.4vw,30px);height:auto}
.door span{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(242,240,235,.9)}

/* the one line */
.sheet__head{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);
  padding:clamp(14px,4vh,44px) 0 clamp(26px,5vh,56px)}
.sheet__head>img{width:clamp(64px,7.4vw,104px);height:auto;flex:none;
  filter:drop-shadow(0 4px 18px rgba(20,19,17,.55))}
.sheet__eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(242,240,235,.66);margin:0 0 12px}
.sheet__head h2{font-family:var(--display);font-weight:300;font-size:clamp(30px,5vw,60px);
  line-height:1.03;margin:0;text-wrap:balance;color:#fff}

/* section rule */
.sec{padding-top:clamp(22px,4vh,40px)}
.sec>h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,240,235,.8);margin:0 0 22px;padding-bottom:11px;
  border-bottom:1px solid rgba(242,240,235,.18);display:flex;justify-content:space-between;gap:12px}
.sec>h3 em{font-style:normal;color:rgba(242,240,235,.42)}

/* tabs */
/* the tab pair pins under the sticky row rather than sliding beneath it,
   so Packs stays one click away wherever you are in the list */
.tabs{position:sticky;top:var(--navh);z-index:2;
  display:flex;gap:4px;padding:4px;border-radius:4px;margin:0 0 clamp(18px,3vh,30px);
  background:rgba(20,19,17,.56);align-self:flex-start;width:max-content;
  border:1px solid rgba(242,240,235,.16)}
.tab{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(242,240,235,.66);background:none;border:0;border-radius:3px;padding:11px 20px;
  cursor:pointer;transition:background .25s,color .25s}
.tab:hover{color:#fff}
.tab[aria-selected="true"]{background:var(--c);color:#fff}

/* packs */
.packs{display:grid;grid-template-columns:1fr;gap:14px}
.pack{position:relative;background:rgba(242,240,235,.06);border:1px solid rgba(242,240,235,.18);
  border-radius:4px;padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:14px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden}
.pack::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
/* the wide pack spans the row and is otherwise the same card as the two
   above it. It used to sit on a solid colour ground; that read as a
   different thing rather than a third option. */
.pack--wide{grid-column:1/-1}
.pack h4{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.8vw,34px);
  line-height:1.08;margin:0;color:#fff}
.pack .who{font-size:14.5px;line-height:1.6;color:rgba(242,240,235,.84);margin:0;max-width:56ch}
.pack .holds{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(242,240,235,.62)}
.pack ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;
  grid-template-columns:repeat(auto-fill,minmax(156px,1fr))}
.pack ul li{display:flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:9.5px;line-height:1.3;letter-spacing:.06em;
  text-transform:uppercase;border-radius:2px;padding:8px 10px;background:var(--c);color:#fff;
  border:1px solid transparent}
.pack ul li.plus{background:transparent;border-color:rgba(242,240,235,.34);
  color:rgba(242,240,235,.8)}
.pack .price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-top:6px;font-variant-numeric:tabular-nums}
.pack .price b{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,46px);
  color:#fff;line-height:1}
.pack .price span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(242,240,235,.78)}
.pack .worth{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(242,240,235,.56);margin-top:-6px}
.pack .go{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;border-radius:3px;padding:13px 20px;
  background:var(--cream);color:var(--ink)}


/* the list. Every tile is the same height whatever the name does, so one long
   name cannot push a whole row taller than its neighbours. */
.grp{margin:0 0 10px}
.grp:last-child{margin-bottom:0}
/* the category header is the control, not a caption */
.grp__h{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid rgba(242,240,235,.14);
  cursor:pointer;padding:16px 4px;font-family:inherit;
  transition:border-color .25s}
.grp__h:hover{border-bottom-color:var(--c)}
.grp__h>span{flex:1;min-width:0;font-family:var(--display);font-weight:400;
  font-size:clamp(21px,2.4vw,30px);line-height:1.1;color:#fff;
  padding-left:13px;border-left:3px solid var(--c)}
.grp__h>i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:rgba(242,240,235,.45);flex:none}
.grp__h::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;
  border-right:1.6px solid var(--c);border-bottom:1.6px solid var(--c);
  transform:rotate(45deg) translateY(-2px);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.grp__h[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}
.grp__h:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.grp .progs{padding-top:18px;padding-bottom:20px}
.progs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:9px;
  margin:0;padding:0;list-style:none}
.progs a{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:92px;
  color:rgba(242,240,235,.95);text-decoration:none;
  border:1px solid rgba(242,240,235,.18);border-radius:3px;
  padding:18px 20px;background:rgba(20,19,17,.5);transition:background .25s,border-color .25s}
.progs a em{font-style:normal;font-size:17.5px;line-height:1.3}
.progs a i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(242,240,235,.52)}
.progs a i.q{color:rgba(242,240,235,.72);letter-spacing:.08em}
.progs a:hover{background:var(--c);border-color:transparent;color:#fff}
.progs a:hover i{color:rgba(255,255,255,.85)}
.soon{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,240,235,.45);margin:14px 0 0}

.sheet__foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-top:clamp(26px,5vh,48px)}
.sheet__foot a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-radius:3px;padding:14px 22px}
.sheet__foot .primary{background:var(--cream);color:var(--ink)}
.sheet__foot .ghost{border:1px solid rgba(255,255,255,.42);color:#fff}

/* The stage gets out of the way while a sheet is open. !important because
   .bar, .hero and .path each end a keyframe animation with fill-mode forwards,
   and a filled animation beats a plain declaration. This was invisible while
   the sheet still had an opaque background of its own. */
.stage.sheeting .bar,.stage.sheeting .hero,.stage.sheeting .paths,
.stage.sheeting .glow{
  opacity:0!important;pointer-events:none!important;
  /* visibility follows the fade, so the layer stops being composited at all
     rather than lingering as a ghost behind a transparent sheet */
  visibility:hidden!important;
  transition:opacity .35s ease, visibility 0s linear .35s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .bar,.hero,.path{opacity:1}
}

/* ---------- portrait ----------
   Cover has pushed the teal and rust arms right off a portrait screen, so
   there is no path left to pin to. The four gather into a diamond instead,
   laid out the way the garden is: education back, sport left, life right,
   professionals in the foreground, with their own glow behind them. The
   camera pan does the rest: move across the screen and the film slides to
   show the teal and rust arms the crop has taken off the sides. */
.dglow{position:absolute;inset:-20%;z-index:-1;pointer-events:none;display:none;
  filter:blur(30px);opacity:0;transition:opacity 1.4s ease}
.dglow.on{opacity:.8}

@media (max-aspect-ratio:1/1){
  .hero{top:14vh!important;bottom:auto;width:94vw}
  .hero h1{font-size:clamp(34px,11vw,62px);line-height:1.08;margin-bottom:11px}
  .hero h1 em{display:block}
  .hero p{font-size:10px;letter-spacing:.16em}

  /* sits the diamond down over the coloured water rather than the bamboo */
  .paths{inset:auto 0 auto 0;top:62%;transform:translateY(-38%);height:auto}
  .diamond{position:relative;inset:auto;width:min(78vw,54vh,400px);aspect-ratio:1;
    margin:0 auto;transform-style:preserve-3d}
  .dglow{display:block}

  .path{--w:clamp(62px,17vw,88px)!important}
  .path .label{margin-top:9px}
  .path .name{font-size:11.5px;letter-spacing:.18em}
  .path .count{font-size:9px;margin-top:5px}

  .glow{display:none}
  .progs{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  .progs a{min-height:78px;padding:13px 14px;gap:5px}
  .progs a em{font-size:15px}
  .progs a i{font-size:9px;letter-spacing:.08em}
  .grp__h{padding:13px 2px;gap:10px}
  .grp__h>span{font-size:22px;padding-left:11px}
  .pack ul{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  /* on a phone the three other doors are marks only, no room for their names */
  .doors b,.door span{display:none}
  .doors{gap:10px}
  .dhead{align-items:center}
  .acts a,.acts .play{padding:12px 16px;font-size:10px}
  .chips li:nth-child(n+6){display:none}
}

/* ============================================================
   THE LIGHT VERTICAL
   Step two of the ladder. The arrival is the darkest the brand
   goes. A vertical lifts off that floor onto paper, and the
   programme page beyond it is lighter again. Ink on cream from
   here down, with the vertical's own colour doing the pointing.
   ============================================================ */
.stage.sheeting>video{filter:grayscale(1) brightness(1.52) contrast(.76)}
.sheet__bg video{filter:brightness(1.3) saturate(1.05);opacity:.42}
.sheet__bg .scrim{background:
  linear-gradient(to bottom,
    color-mix(in srgb, var(--c) 9%, transparent) 0%,
    color-mix(in srgb, var(--c) 15%, transparent) 60%,
    color-mix(in srgb, var(--c) 17%, transparent) 100%),
  linear-gradient(to bottom,
    rgba(242,240,235,.88) 0%, rgba(242,240,235,.8) 30%,
    rgba(242,240,235,.9) 66%, rgba(242,240,235,.96) 100%)}

/* No plate. A cream bar across a coloured ground reads as a seam. Instead the
   row blurs whatever passes beneath it and the blur itself fades out at the
   bottom edge, so there is no line anywhere. */
.sheet__nav{background:none}
.sheet__nav::before{content:"";position:absolute;z-index:-1;
  top:-40px;bottom:0;left:-50vw;right:-50vw;
  backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
  background:color-mix(in srgb, var(--c) 7%, rgba(242,240,235,.62));
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,0) 100%)}
.doors b,.door span{text-shadow:0 1px 2px rgba(242,240,235,.9),
  0 0 10px rgba(242,240,235,.85),0 0 20px rgba(242,240,235,.7)}
.sheet__back{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet__back{color:var(--ink);background:rgba(242,240,235,.72);
  border-color:rgba(26,26,24,.28)}
.sheet__back:hover{background:rgba(26,26,24,.08)}
.doors b{color:rgba(26,26,24,.5)}
.door span{color:rgba(26,26,24,.82)}

.sheet__head>img{filter:drop-shadow(0 4px 14px rgba(26,26,24,.16))}
.sheet__eyebrow{color:rgba(26,26,24,.62)}
.sheet__head h2{color:var(--ink)}

.sec>h3{color:rgba(26,26,24,.75);border-bottom-color:rgba(26,26,24,.16)}
.sec>h3 em{color:rgba(26,26,24,.42)}

.tabs{background:color-mix(in srgb, var(--c) 8%, rgba(242,240,235,.9));border-color:rgba(26,26,24,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tab{color:rgba(26,26,24,.6)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--c);color:#fff}

.pack{background:color-mix(in srgb, var(--c) 7%, rgba(242,240,235,.8));border-color:rgba(26,26,24,.16)}
.pack h4{color:var(--ink)}
.pack .who{color:rgba(26,26,24,.74)}
.pack .holds{color:rgba(26,26,24,.56)}
.pack ul li.plus{border-color:rgba(26,26,24,.26);color:rgba(26,26,24,.72)}
.pack .price b{color:var(--ink)}
.pack .price span{color:rgba(26,26,24,.7)}
.pack .worth{color:rgba(26,26,24,.5)}
.pack .go{background:var(--ink);color:var(--cream)}

.grp__h{border-bottom-color:rgba(26,26,24,.14)}
.grp__h>span{color:var(--ink)}
.grp__h>i{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(26,26,24,.5)}
.grp__h>i.is-live{color:rgba(26,26,24,.85)}
/* the paper is not plain white. The vertical's own colour sits under it. */
.progs a{color:var(--ink);border-color:rgba(26,26,24,.14);
  background:color-mix(in srgb, var(--c) 7%, rgba(242,240,235,.82))}
.progs a i{color:rgba(26,26,24,.52)}
.progs a i.q{color:rgba(26,26,24,.7)}
.progs a:hover{background:var(--c);border-color:transparent;color:#fff}
.progs a:hover i{color:rgba(255,255,255,.85)}
.soon{color:rgba(26,26,24,.45)}

.sheet__foot .primary{background:var(--ink);color:var(--cream)}
.sheet__foot .ghost{border-color:rgba(26,26,24,.32);color:var(--ink)}


/* A tile with no page behind it yet. It says so, sits back, and does nothing
   on hover or click. Which tiles get this is decided in garden.js, by the
   pages map. */
.progs a.is-soon{opacity:.55;pointer-events:none}


/* ---------- terms and privacy, bottom left ---------- */
.garden-legal{position:absolute;z-index:9;left:max(16px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(242,240,235,.72);text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.garden-legal:hover{color:#fff}

/* ---------- 1 October: the paths are buttons ----------
   The marks are gone. Each name is a button sitting on its own arm, in the
   portal's button language: mono capitals, 3px corners, a thin cream rule and
   a little glass behind it. Hover fills it cream. The arm still lights up. */
.path{width:auto!important}
.path img{display:none}
.path .label{position:static;transform:none;margin-top:0}
.path .name{display:inline-flex;align-items:center;gap:12px;
  font-size:clamp(11.5px,1.05vw,14px);letter-spacing:.16em;
  padding:.95em 1.2em .95em 1.35em;border:1px solid rgba(242,240,235,.62);border-radius:3px;
  background:rgba(20,19,17,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  text-shadow:0 1px 3px rgba(20,19,17,.5);box-shadow:0 6px 24px rgba(20,19,17,.25);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.path .name::after{content:"";width:.5em;height:.5em;border-top:1px solid currentColor;
  border-right:1px solid currentColor;transform:rotate(45deg);margin-left:.05em;opacity:.85}
.path:hover .name,.path:focus-visible .name{background:var(--cream);color:var(--ink);
  border-color:var(--cream);text-shadow:none;transform:translateY(-3px)}
/* Each arrow points down its own path: sport left, life right, education back
   up the garden, professionals down towards you. Sport's sits in front of the
   word so it leads the eye the way it points. On hover it steps that way. */
.path .name::after{transition:translate .35s cubic-bezier(.2,.7,.3,1)}
.path[aria-label$="Sport"] .name::after{order:-1;transform:rotate(-135deg);margin:0 .05em 0 0}
.path[aria-label$="Life"] .name::after{transform:rotate(45deg)}
.path[aria-label$="Education"] .name::after{transform:rotate(-45deg);margin-top:.3em}
.path[aria-label$="Professionals"] .name::after{transform:rotate(135deg);margin-top:-.3em}
.path[aria-label$="Sport"]:hover .name::after{translate:-3px 0}
.path[aria-label$="Life"]:hover .name::after{translate:3px 0}
.path[aria-label$="Education"]:hover .name::after{translate:0 -3px}
.path[aria-label$="Professionals"]:hover .name::after{translate:0 3px}
.path:focus-visible{outline:none}
.path:focus-visible .name{outline:2px solid #fff;outline-offset:4px}

/* ---------- 1 October: the headline is shorter now, so it can be bigger ---------- */
.hero h1{font-size:clamp(30px,5.4vw,100px)}
.hero p{font-size:clamp(11px,1.15vw,14px);letter-spacing:.18em;line-height:1.6}
@media (max-width:899px){ .hero h1{font-size:clamp(34px,9.6vw,56px)} }

/* ---------- 1 October: on a phone, About and Sign in fold into one Menu ---------- */
.menu{display:none}
@media (max-width:640px){
  .menu{display:inline-flex;align-items:center;gap:9px;flex:none;font-family:var(--mono);
    font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#fff;cursor:pointer;
    background:rgba(20,19,17,.22);border:1px solid rgba(242,240,235,.5);border-radius:3px;
    padding:9px 13px 9px 14px}
  .menu::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s ease}
  .bar.open .menu::after{transform:translateY(2px) rotate(-135deg)}
  .bar nav{display:none;position:absolute;top:calc(100% - 2px);right:max(16px,3.2vw);
    flex-direction:column;align-items:stretch;gap:0;min-width:184px;padding:6px;
    background:rgba(20,19,17,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border:1px solid rgba(242,240,235,.22);border-radius:3px;box-shadow:0 14px 40px rgba(20,19,17,.4)}
  .bar.open nav{display:flex}
  .bar nav a{padding:13px 14px;font-size:11px;text-shadow:none}
  .bar nav a.signin{border:0;border-top:1px solid rgba(242,240,235,.16);border-radius:0;padding:13px 14px}
}
@media (max-width:360px){ .brand span{font-size:10px;letter-spacing:.12em} }

/* ---------- 1 October: phone sizes for the above ---------- */
@media (max-aspect-ratio:1/1){
  .hero h1{font-size:clamp(38px,12.4vw,68px)}
  .hero p{font-size:12px;letter-spacing:.14em;max-width:34em;margin-left:auto;margin-right:auto}
  .path .name{font-size:11px;letter-spacing:.15em;padding:.9em 1.05em .9em 1.2em;gap:9px}
}

/* ---------- skipping the arrival ----------
   garden.js adds .skip when someone clicks during the arrival. Everything that
   waits for the film runs at once instead. Scott, 3 October 2026. */
.stage.skip .bar,.stage.skip .hero,.stage.skip .path{
  animation-delay:0s!important;animation-duration:.5s!important}