/* ============================================================
   Graduation pages — a light, warm sibling of the main site.
   Loaded after style.css and scoped to body.theme-grad, so nothing
   here can reach any other page. Most of the change comes from
   redefining the colour tokens; the rules below only cover the
   places style.css hard-codes a dark value.
   ============================================================ */

body.theme-grad {
  --ink: #F5F1E8;          /* page */
  --ink-2: #EDE7DA;        /* raised surfaces */
  --paper: #102341;        /* text — a deep navy */
  --paper-dim: #3A4A63;
  --paper-faint: #5A687D;
  --hairline: #DDD5C4;
  --line: #DDD5C4;
  --line-2: #C8BEA9;
  --faint: #5A687D;
  --navy: #102341;
  --navy-2: #1B3258;
  --cream: #FFFDF8;
}
html:has(body.theme-grad) { color-scheme: light; }
body.theme-grad ::selection { background: #102341; color: #F5F1E8; }

/* The logo is white, so the header and footer stay dark — navy rather than
   black — and get the light tokens back for everything inside them. */
body.theme-grad header.site,
body.theme-grad footer.site,
body.theme-grad .on-navy {
  --paper: #F5F1E8;
  --paper-dim: #D5DBE5;
  --paper-faint: #B4BFD0;
  --hairline: rgba(255, 255, 255, 0.14);
  --line: rgba(255, 255, 255, 0.14);
  color: var(--paper);
}
body.theme-grad header.site { background: rgba(16, 35, 65, 0.94); }
body.theme-grad header.site.stuck { background: rgba(16, 35, 65, 0.97); }
body.theme-grad footer.site {
  background: var(--navy);
  /* full-bleed colour behind a max-width footer */
  box-shadow: 0 0 0 100vmax var(--navy);
  clip-path: inset(0 -100vmax);
  margin-top: clamp(40px, 6vw, 80px);
}

body.theme-grad .crumbs a:hover,
body.theme-grad .big-links a:hover small { color: var(--red); }

/* Buttons: on a light page the primary action is a filled navy capsule. */
body.theme-grad .btn { border-color: #B9AF99; }
body.theme-grad .btn-navy {
  background: var(--navy); border-color: var(--navy); color: var(--cream);
}
body.theme-grad .btn-navy:hover {
  background: var(--navy-2); border-color: var(--navy-2); color: var(--cream);
  box-shadow: 0 8px 26px rgba(16, 35, 65, 0.28);
}
body.theme-grad .btn-ghost:hover { background: rgba(16, 35, 65, 0.06); border-color: var(--navy); }

/* ---- Hero ---- */
.grad-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(36px, 5vw, 72px); align-items: center;
  padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px);
  border-bottom: 1px solid var(--hairline);
}
.grad-hero .copy { display: flex; flex-direction: column; gap: 22px; }
.grad-hero h1.display { font-size: clamp(34px, 4.6vw, 62px); }
.grad-hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.price-line { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--paper-dim); letter-spacing: -0.005em; }
.price-line b { color: var(--paper); font-weight: 700; }

/* ---- Photo frames ----
   With an <img> inside, a frame is a photo with a small location pill.
   Without one it is a designed tile — a large word or number on sand or
   navy — so the page reads as finished before the real selects arrive. */
.ph {
  position: relative; overflow: hidden; border-radius: var(--r-media);
  background: linear-gradient(155deg, #EBE3D2 0%, #DDD2BC 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 18px 40px rgba(16, 35, 65, 0.10);
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(16px, 2vw, 24px);
  color: var(--navy);
}
.ph.navy { background: linear-gradient(155deg, #1B3258 0%, #102341 100%); color: var(--cream); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph strong {
  position: relative; font-family: var(--display); font-weight: 700; line-height: 0.95;
  letter-spacing: -0.04em; font-size: clamp(30px, 3.6vw, 52px);
}
.ph em {
  position: relative; margin-top: 10px; font-style: normal; font-family: var(--display);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.72;
}
.ph .pill {
  position: relative; align-self: flex-start; padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(255, 253, 248, 0.86); backdrop-filter: blur(8px);
  font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-dim);
}
.ph.tall { aspect-ratio: 4 / 5; }
.ph.wide { aspect-ratio: 3 / 2; }
.ph.sq   { aspect-ratio: 1 / 1; }
.ph .diamond { position: absolute; top: clamp(16px, 2vw, 24px); left: clamp(16px, 2vw, 24px); }

.hero-stack { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
.hero-stack .ph:first-child { grid-row: span 2; }

/* ---- Sessions ---- */
.sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.session {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(26px, 3vw, 36px);
  box-shadow: 0 1px 0 #fff inset, 0 14px 34px rgba(16, 35, 65, 0.07);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.session:hover { transform: translateY(-3px); box-shadow: 0 1px 0 #fff inset, 0 22px 48px rgba(16, 35, 65, 0.12); }
.session.featured { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), 0 22px 48px rgba(16, 35, 65, 0.14); }
.session .badge-top {
  position: absolute; top: -12px; left: 24px; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--navy); color: var(--cream);
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.session h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.018em; color: var(--paper); }
.session .price { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 4.4vw, 54px); letter-spacing: -0.035em; line-height: 1; color: var(--paper); }
.session .price small { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--paper-faint); margin-left: 6px; }
.session .meta { font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.session p { color: var(--paper-dim); font-size: 15.5px; line-height: 1.75; margin: 0; }
.session ul { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.session li { position: relative; padding-left: 20px; color: var(--paper-dim); font-size: 15px; line-height: 1.55; }
.session li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; background: var(--red); transform: rotate(45deg); }
.session .btn { margin-top: auto; align-self: flex-start; }
.session .grow { flex: 1; }

/* ---- The route ---- */
.route { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(22px, 3vw, 34px); counter-reset: stop; }
.stop { display: flex; flex-direction: column; gap: 12px; }
.stop .ph { aspect-ratio: 4 / 3; }
.stop h3 { margin: 4px 0 0; display: flex; align-items: baseline; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--paper); }
.stop p { margin: 0; color: var(--paper-dim); font-size: 15px; line-height: 1.7; }
.route-label { margin: 0 0 clamp(18px, 2.4vw, 26px); }
.route-note { margin-top: clamp(26px, 3vw, 36px); color: var(--paper-faint); font-size: 14.5px; max-width: 70ch; }

/* ---- What to bring ---- */
.bring { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.bring div { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.bring b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: var(--cream); font-family: var(--display); font-size: 13px; font-weight: 700; }
.bring p { margin: 0; color: var(--paper-dim); font-size: 15.5px; line-height: 1.7; }
.bring p strong { color: var(--paper); font-weight: 600; }

/* ---- Navy band (delivery promise / booking) ---- */
.navy-band {
  background: var(--navy); color: var(--paper); border-radius: var(--r-card);
  padding: clamp(36px, 5vw, 70px) clamp(26px, 5vw, 72px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  box-shadow: 0 24px 60px rgba(16, 35, 65, 0.22);
}
.navy-band h2 { max-width: 20ch; }
.navy-band h2 em { font-style: normal; color: #F6B8B5; }
.navy-band .btn-cream { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.navy-band .btn-cream:hover { background: #fff; color: var(--navy); box-shadow: 0 8px 26px rgba(0,0,0,0.3); }

.disclaimer { color: var(--paper-faint); font-size: 13px; line-height: 1.7; max-width: 80ch; }

@media (max-width: 620px) {
  .hero-stack { grid-template-columns: 1fr 1fr; }
  .navy-band { flex-direction: column; align-items: flex-start; }
}

/* ---- Booking ---- */
.book {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(26px, 4vw, 52px); box-shadow: 0 1px 0 #fff inset, 0 20px 50px rgba(16, 35, 65, 0.08);
  display: flex; flex-direction: column; gap: clamp(26px, 3vw, 38px);
}
.book .bstep { display: flex; flex-direction: column; gap: 14px; }
.book .bstep-head { display: flex; align-items: baseline; gap: 12px; }
.book .bstep-head b {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: var(--cream); font-family: var(--display); font-size: 12.5px; font-weight: 700;
  transform: translateY(-2px);
}
.book .bstep-head h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--paper); }
.book .hint { color: var(--paper-faint); font-size: 14.5px; line-height: 1.65; margin: 0; }
.book select, .book input, .book textarea {
  font: 400 16px/1.5 var(--sans); color: var(--paper); background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--r-field); padding: 13px 16px; width: 100%;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.book select { max-width: 420px; cursor: pointer; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.book select:focus, .book input:focus, .book textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(16, 35, 65, 0.14); }
.book textarea { min-height: 90px; resize: vertical; }
.book .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.book label.f { display: flex; flex-direction: column; gap: 7px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); }
.book label.f.wide { grid-column: 1 / -1; }

/* chips: real radio inputs, styled as capsules */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff;
  font-family: var(--display); font-size: 14.5px; font-weight: 600; color: var(--paper);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.chip span small { font-size: 12.5px; font-weight: 500; color: var(--paper-faint); }
.chip input:hover + span { border-color: var(--navy); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(16, 35, 65, 0.18); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.chip input:checked + span small { color: #C9D2E1; }
.chip input:active + span { transform: scale(0.97); }
.chip input:disabled + span { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
.chips.times .chip span { padding: 10px 16px; border-radius: var(--r-pill); }

.book .empty {
  padding: 18px 20px; border-radius: 14px; background: var(--ink-2); color: var(--paper-dim); font-size: 15px; line-height: 1.7;
}
.book .summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.book .summary p { margin: 0; color: var(--paper-dim); font-size: 15.5px; line-height: 1.7; max-width: 58ch; }
.book .summary p strong { color: var(--paper); }
.book .status { font-size: 15px; line-height: 1.7; color: var(--paper-dim); }
.book .status.error { color: #B3261E; }
.book [hidden] { display: none !important; }

/* ---- Campus tabs on the route ---- */
.campus-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(22px, 3vw, 32px); }
.campus-tabs button {
  font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: #fff; color: var(--paper); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.campus-tabs button:hover { border-color: var(--navy); }
.campus-tabs button:active { transform: scale(0.97); }
.campus-tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.campus-route[hidden] { display: none; }

/* Early-booking price */
.deal {
  align-self: flex-start; display: inline-flex; padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(239, 61, 56, 0.1); color: #B3261E;
  font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
}

/* ---- Photo credits ---- */
.credits { margin-top: 26px; max-width: 80ch; color: var(--paper-faint); font-size: 13px; line-height: 1.7; }
.credits summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); }
.credits p { margin: 12px 0 8px; }
.credits ul { margin: 0; padding-left: 1.1em; }
.credits a { color: var(--paper-dim); border-bottom: 1px solid var(--line-2); }

/* Route photos carry their stop number, white over a soft fade at the foot. */
.ph.photo { color: #fff; }
.ph.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 20, 38, 0.62) 0%, rgba(10, 20, 38, 0.18) 34%, rgba(10, 20, 38, 0) 58%);
}
.ph.photo strong { z-index: 1; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }

/* ---- Session weekends ---- */
.book #dates { display: flex; flex-direction: column; }
.wknd { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); }
.wknd:first-child { border-top: 0; padding-top: 0; }
.wknd-head { margin: 0; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--paper); }
.wknd .rain { margin: 0; font-size: 13.5px; color: var(--paper-faint); }
.friends { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.friends .hint { margin: 0; }
#friendrows { display: flex; flex-direction: column; gap: 10px; }
#friendrows .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { #friendrows .row { grid-template-columns: 1fr; } }
#joinbox { margin-top: 16px; max-width: 420px; }

/* ---- Tighter rhythm ----
   The main site's sections breathe at up to 168px top and bottom, which
   suits a brand page. This one is a page people scroll to book, so the
   same structure runs at roughly half the spacing. */
body.theme-grad .section { padding-top: clamp(44px, 5.5vw, 80px); padding-bottom: clamp(44px, 5.5vw, 80px); }
body.theme-grad .section-head { margin-bottom: clamp(22px, 2.8vw, 36px); }
body.theme-grad .section-head .stack { gap: 10px; }
.grad-hero { padding-top: clamp(32px, 4.5vw, 64px); padding-bottom: clamp(36px, 5vw, 68px); gap: clamp(28px, 4vw, 56px); }
.grad-hero .copy { gap: 16px; }
.session { padding: clamp(22px, 2.4vw, 30px); gap: 10px; }
.session ul { padding-top: 12px; gap: 6px; }
.route { gap: clamp(18px, 2.4vw, 26px); }
.stop { gap: 8px; }
.stop .ph { aspect-ratio: 3 / 2; }
.route-label { margin-bottom: 14px; }
.campus-tabs { margin-bottom: clamp(16px, 2vw, 22px); }
.route-note { margin-top: clamp(18px, 2.4vw, 26px); }
.book { padding: clamp(22px, 3vw, 40px); gap: clamp(20px, 2.4vw, 28px); }
.bring div { padding: 14px 0; }
body.theme-grad .faq summary { padding: 17px 0; }
body.theme-grad .faq .a { padding-bottom: 18px; }
.navy-band { padding: clamp(28px, 3.6vw, 48px) clamp(24px, 4vw, 56px); }
body.theme-grad footer.site { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 620px) {
  .hero-stack { gap: 10px; }
  .grad-hero .ctas .btn { flex: 1 1 auto; }
}

/* On phones the route swipes sideways instead of stacking six tall cards;
   the next card peeks in so it is obvious there is more. */
@media (max-width: 620px) {
  .route {
    display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * clamp(22px, 5vw, 72px)); padding: 0 clamp(22px, 5vw, 72px) 6px;
    scroll-padding-inline: clamp(22px, 5vw, 72px);
    scrollbar-width: none;
  }
  .route::-webkit-scrollbar { display: none; }
  .stop { scroll-snap-align: start; }
}

/* ---- Mortarboards as background accents ----
   Cut-out caps sit in the empty space beside a section heading, faded
   back so they read as texture rather than content. They are drawn by
   pseudo-elements, so they add no height and never catch a click. */
.cap-deco { position: relative; }
.cap-deco > * { position: relative; z-index: 1; }
.cap-deco::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background: no-repeat center / contain; opacity: 0.3;
  mix-blend-mode: multiply;   /* inks into the paper tone instead of sitting on it */
}
.cap-sessions::before {
  background-image: url(../assets/img/grad/cap-02.webp);
  width: clamp(180px, 19vw, 270px); aspect-ratio: 900 / 738;
  top: clamp(8px, 1.6vw, 22px); right: clamp(0px, 4vw, 72px); transform: rotate(-10deg);
}
.cap-book::before {
  background-image: url(../assets/img/grad/cap-06.webp);
  width: clamp(200px, 21vw, 300px); aspect-ratio: 900 / 474;
  top: clamp(14px, 2.4vw, 34px); right: clamp(0px, 4vw, 72px); transform: rotate(8deg);
}
.cap-band { position: relative; overflow: hidden; }
.cap-band > * { position: relative; z-index: 1; }
.cap-band::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background: url(../assets/img/grad/cap-01.webp) no-repeat center / contain;
  width: clamp(300px, 34vw, 480px); aspect-ratio: 900 / 690;
  right: -6%; bottom: -26%; transform: rotate(-14deg); opacity: 0.22;
  filter: brightness(2.2);   /* a black cap vanishes on navy; lift it to a soft grey */
}
/* No empty space beside the headings on a phone, so no caps there. */
@media (max-width: 760px) { .cap-deco::before, .cap-band::before { display: none; } }