/* Vantage, shared styles. Palette sampled directly from the logo. */

:root{
  --ink:        #100D39;
  --ink-soft:   #3E3B63;
  --ink-mute:   #6E6B8A;

  --violet:     #6327D7;
  --violet-dp:  #4E23C4;
  --blue:       #1E7DC9;
  --teal:       #2AB3C7;

  --paper:      #FEFDFD;
  --mist:       #F5F6FB;
  --line:       #E6E7F1;

  --nav-h: 76px;
  --logo-h: 44px;
  --hero-top-extra: 88px;

  --card-pad-y: 32px;
  --card-pad-x: 28px;

  --maxw: 1120px;
  --r: 14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Questrial',system-ui,sans-serif;font-weight:400;margin:0;letter-spacing:-0.01em;line-height:1.14;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  height:var(--nav-h);
  background:rgba(254,253,253,0.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.nav .logo img{height:var(--logo-h);width:auto;}
.nav-links{display:flex;align-items:center;gap:30px;font-size:15px;color:var(--ink-soft);}
.nav-links a:hover{color:var(--violet);}
.nav-cta{
  padding:10px 20px;border-radius:999px;font-size:14.5px;font-weight:600;
  background:var(--ink);color:#fff;
}
.nav-cta:hover{background:var(--violet-dp);}
.nav-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:999px;
  font-size:16px;font-weight:600;font-family:inherit;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(97deg,var(--violet) 0%,var(--blue) 55%,var(--teal) 100%);
  box-shadow:0 10px 26px rgba(70,40,190,0.24);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(70,40,190,0.30);}
.btn-quiet{border-color:var(--line);color:var(--ink);background:#fff;}
.btn-quiet:hover{border-color:var(--violet);color:var(--violet);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.42;pointer-events:none;box-shadow:none;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 62% at 50% 46%,#FBFAFE 0%,var(--paper) 72%);}
/* The photograph sits BEHIND the particle canvas, which is transparent, so it
   has to be knocked well back or the particles vanish into it. One number
   controls the balance: raise it for more photograph, lower it for more
   particles. */
.hero-photo{
  position:absolute;inset:0;
  background:url("/assets/images/room-wide.jpg") center/cover no-repeat;
  opacity:0.18;
}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 42% 30% at 50% 50%,rgba(254,253,253,0.92) 0%,rgba(254,253,253,0.58) 58%,rgba(254,253,253,0) 100%);
}
.hero-inner{
  position:relative;z-index:2;
  padding-top:calc(var(--hero-top-extra) + 24px);
  padding-bottom:120px;
  min-height:min(92vh,860px);
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;align-items:center;
}
/* text-wrap:balance evens the line lengths so the headline never drops a single
   short word onto a line of its own, at either width. */
.hero h1{font-size:clamp(40px,7.2vw,74px);max-width:19ch;text-wrap:balance;}
.hero h1 .grad{
  background:linear-gradient(95deg,var(--violet),var(--blue) 52%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Sits between the h1 and the sub, so it needs its own size: at the sub's size
   it reads as more body copy, and at the h1's it competes with the name of the
   thing. */
.hero .lead{margin-top:20px;font-size:clamp(21px,2.9vw,30px);line-height:1.28;color:var(--ink);max-width:30ch;text-wrap:balance;}
.hero .sub{margin-top:18px;font-size:clamp(17px,2.1vw,20px);color:var(--ink-soft);max-width:44ch;}
.hero .actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* ---------- sections ---------- */
section{padding:100px 0;}
.band-mist{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sec-head{max-width:46ch;}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);}
.sec-head p{margin-top:16px;color:var(--ink-soft);font-size:17px;}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--card-pad-y) var(--card-pad-x);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover{border-color:rgba(99,39,215,0.35);transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,13,57,0.07);}
.card h3{font-size:20px;}
.card p{margin-top:10px;color:var(--ink-soft);font-size:15.5px;}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:46px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;}
.step{padding:var(--card-pad-y) var(--card-pad-x);border-right:1px solid var(--line);}
.step:last-child{border-right:0;}
.step .n{
  font-family:'Michroma',sans-serif;font-size:11px;letter-spacing:.1em;
  color:var(--violet);
}
.step h3{margin-top:14px;font-size:19px;}
.step p{margin-top:9px;color:var(--ink-soft);font-size:15.5px;}

/* ---------- programme tracks ---------- */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;align-items:start;}
.track{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:var(--card-pad-y) var(--card-pad-x);display:flex;flex-direction:column;height:100%;
  position:relative;overflow:hidden;
}
.track::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--line);}
.track.t1::before{background:linear-gradient(90deg,var(--violet),var(--violet-dp));}
.track.t2::before{background:linear-gradient(90deg,var(--violet-dp),var(--blue));}
.track.t3::before{background:linear-gradient(90deg,var(--blue),var(--teal));}
.track.featured{border-color:rgba(99,39,215,0.4);box-shadow:0 18px 44px rgba(16,13,57,0.09);}
.track h2{font-size:22px;}
.track .len{margin-top:6px;font-size:14px;color:var(--ink-mute);}
.track ul{margin:22px 0 0;padding:0;list-style:none;}
.track li{
  position:relative;padding-left:24px;margin-bottom:11px;
  font-size:15px;color:var(--ink-soft);line-height:1.5;
}
.track li::before{
  content:"";position:absolute;left:0;top:8px;
  width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--teal));
}
.track .btn{margin-top:26px;}
.track .spacer{flex:1;}

/* ---------- session cards ---------- */
.sessions{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:26px;max-width:760px;margin:0 auto;
  /* The nav is sticky, so without this the jump from "Book your place" lands
     with the top of the first card underneath it. */
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.session{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:var(--card-pad-y) var(--card-pad-x);
  box-shadow:0 18px 44px rgba(16,13,57,0.06);
  overflow:hidden; /* Keeps the bled photograph inside the rounded corners. */
}
.session-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;margin-bottom:18px;
}
.session-head h2{font-size:22px;}
.session-status{
  font-size:12.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
/* These three are not dead. build.js assembles the class as status-${status}
   from each session's status in site.json, so grepping the full name finds
   only this file. The three names here are the only permitted values. */
.status-open{background:rgba(42,179,199,0.14);color:#12707E;}
.status-closed,.status-past{background:var(--mist);color:var(--ink-mute);}
.session .btn{margin-top:24px;}
/* Revealed by vantage-booking.js once the book button is clicked. The teal edge
   marks it as a response to that click rather than another fact about the
   session, which is what the rest of the card is. */
.booknote{
  margin-top:16px;padding:14px 16px;
  background:var(--mist);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;
  font-size:14.5px;color:var(--ink-soft);
}
.booknote p + p{margin-top:10px;}
.booknote a{color:var(--violet);text-decoration:underline;}
.paynote{margin-top:20px;font-size:13.5px;color:var(--ink-mute);text-align:center;}

/* ---------- cta band ---------- */
.cta-band{
  background:linear-gradient(105deg,var(--violet-dp) 0%,var(--blue) 58%,var(--teal) 100%);
  border-radius:22px;padding:56px 44px;color:#fff;text-align:center;
}
.cta-band h2{font-size:clamp(26px,3.4vw,38px);color:#fff;}
.cta-band p{margin-top:14px;color:rgba(255,255,255,0.9);max-width:48ch;margin-inline:auto;}
.cta-band .btn{margin-top:30px;background:#fff;color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,0.16);}
.cta-band .btn:hover{background:#fff;color:var(--violet-dp);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:46px 0 40px;background:var(--paper);}
footer .row{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start;}
footer img{height:38px;width:auto;}
footer .legal{font-size:13.5px;color:var(--ink-mute);max-width:44ch;margin-top:14px;}
footer nav{display:flex;gap:24px;font-size:14.5px;color:var(--ink-soft);flex-wrap:wrap;}
footer nav a:hover{color:var(--violet);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cards,.tracks{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .step{border-right:0;border-bottom:1px solid var(--line);}
  .step:last-child{border-bottom:0;}
}
@media (max-width:720px){
  :root{--nav-h:66px;--logo-h:36px;--hero-top-extra:64px;}
  .nav-links{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 26px 18px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0;width:100%;}
  .nav-burger{display:block;}
  section{padding:72px 0;}
  .hero-inner{padding-bottom:88px;min-height:auto;}
  .session{padding:26px 22px;}
  .cta-band{padding:42px 26px;}
}

:focus-visible{outline:2.5px solid var(--violet);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn,.card{transition:none;}
}

/* ---------- media ---------- */
/* Every figure reserves its aspect ratio so the layout does not shift while the
   image loads. CLS is a Core Web Vitals metric and a late-loading photo in a
   card grid is the usual cause. */
/* The gradient is both the resting state while a photograph loads and the
   stand-in for one that has not been generated yet, at which point vantage.js
   hides the broken img and leaves this showing. */
.shot{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  background:
    linear-gradient(135deg,rgba(99,39,215,0.10),rgba(42,179,199,0.10)),
    var(--mist);
}
.shot img{width:100%;height:100%;object-fit:cover;}
.shot-wide{aspect-ratio:16/9;}
.shot-square{aspect-ratio:1/1;}
.shot-4x3{aspect-ratio:4/3;}

/* ---------- what the Saturdays cover ---------- */
.covers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;}
.cover{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.cover .body{padding:24px 24px 28px;}
.cover h3{font-size:18px;}
.cover p{margin-top:9px;color:var(--ink-soft);font-size:15.5px;}

/* ---------- outcomes ---------- */
.outcomes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:46px;}
.outcome{display:flex;gap:20px;align-items:flex-start;}
.outcome .shot{flex:0 0 116px;width:116px;}
.outcome h3{font-size:18px;}
.outcome p{margin-top:8px;color:var(--ink-soft);font-size:15.5px;}

/* ---------- practical panel ---------- */
.practical{
  display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;
  margin-top:46px;
}
.facts-list{margin:0;padding:0;border-top:1px solid var(--line);}
.facts-list div{
  display:grid;grid-template-columns:132px 1fr;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.facts-list dt{
  font-family:'Michroma',sans-serif;font-size:10.5px;letter-spacing:.09em;
  color:var(--violet);padding-top:3px;
}
.facts-list dd{margin:0;font-size:15.5px;color:var(--ink-soft);}
.facts-list dd strong{color:var(--ink);font-weight:600;}

/* ---------- track image ---------- */

/* ---------- long-form legal pages ---------- */
.prose{max-width:70ch;}
.prose h2{font-size:clamp(24px,3vw,30px);margin-top:44px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:19px;margin-top:28px;}
.prose p,.prose li{color:var(--ink-soft);font-size:16px;}
.prose p{margin-top:14px;}
.prose ul{margin:14px 0 0;padding-left:22px;}
.prose li{margin-bottom:8px;}
.prose a{color:var(--violet);text-decoration:underline;text-underline-offset:2px;}
.prose .updated{margin-top:10px;font-size:14px;color:var(--ink-mute);}

/* ---------- single-message pages ---------- */
.centred{max-width:52ch;margin:0 auto;text-align:center;}
.centred h1{font-size:clamp(32px,4.6vw,46px);}
.centred p{margin-top:18px;color:var(--ink-soft);font-size:17px;}
.centred .actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* ---------- page headers ---------- */
.page-head{padding-top:74px;padding-bottom:0;}
.page-head h1{font-size:clamp(34px,5vw,52px);}
.tight-top{padding-top:0;}

@media (max-width:900px){
  .covers{grid-template-columns:1fr;}
  .outcomes{grid-template-columns:1fr;}
  .practical{grid-template-columns:1fr;gap:32px;}
}

/* ---------- accessibility ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--ink);color:#fff;border-radius:0 0 10px 0;
  font-size:15px;font-weight:600;
}
.skip:focus{left:0;}


/* Links inside small print still have to look like links. Without this the
   terms and privacy links under the pay button read as plain grey text. */
.paynote a,.facts-list dd a{
  color:var(--violet);text-decoration:underline;text-underline-offset:2px;
}

/* A page-head sec-head sits directly above the content it introduces, so it
   needs the gap the section padding would otherwise supply. */
.page-head .sec-head{margin-bottom:40px;}

/* In the practical panel the photograph sits beside a tall definition list, so
   it fills the column height instead of keeping a fixed 16:9 box with dead
   space above and below it. */
.shot-fill{height:100%;min-height:340px;}

/* A photograph at the top of a card runs to the card's own edges: the card
   already draws the border and clips the corners, so a second border there
   would double up. Where the card has padding, the photograph pulls back out
   through it, which is why the bleed is derived from the padding rather than
   written as its own number in three places. */
.card > .shot,.step > .shot,.track > .shot,.session > .shot{
  border:0;border-radius:0;
  margin:calc(var(--card-pad-y) * -1) calc(var(--card-pad-x) * -1) 24px;
}
/* The cover card has no padding of its own, so its photograph is already flush. */
.cover > .shot{border:0;border-radius:0;}