/* ==========================================================================
   AXIS 2027 design system
   Light and photography-led. Granite carries the brand; one Dunnottar red ribbon (industry) runs through the
   name and crosses the North Sea blue stroke (science) in the X; pages are cut by one seam, crossed once.
   Montserrat (wordmark and headings) · Inter (text and interface) · Newsreader (quotations only)
   ========================================================================== */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/assets/fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-italic.woff2) format("woff2");font-weight:400 500;font-style:italic;font-display:swap}

:root{
  --navy:#1F2328; --navy-2:#313539; --navy-3:#505357; --navy-rgb:31,35,40;
  --sea:#3F6A84; --sea-2:#375D74; --sea-tint:#E6ECEF; --sea-light:#95ADBB; --sea-pale:#B6C6D0;
  --copper:#A4432E; --copper-light:#BF7B6D; --copper-pale:#DCB8B0;
  --orange:#8D3A28; --orange-2:#763021; --orange-tint:#F2E5E2;
  --sand:#F2F1EE; --ice:#DCE5EA; --granite-c:#6A6F75; --gold-c:#D2A23A;
  --rib-sea:#2F5670; --rib-copper:#C0703F; --rib-sea-dk:#9CC0D4; --rib-copper-dk:#B5643C;
  --ink:#1C2024; --ink-2:#414750; --muted:#697078; --line:#E2E2E3; --line-2:#CECFD0;
  --mist:#F5F5F5; --white:#FFFFFF;
  --focus:var(--orange);
  /* text in the brand hues: the palette colours on white, lifted in dark mode (components.css), where --sea and
     --copper fall under 3:1. Fills and ribbons keep --sea and --copper. Status tones as in shared/labels.js. */
  --sea-text:var(--sea); --copper-text:var(--copper); --info:#00648F; --danger:#B42318;
  --card-h3:20px;   /* one size for every card title (.card, .pcard, .tier, .plenary) */
  --control-h:52px; /* text boxes and dropdowns share one height, so mixed form rows line up */
  --on-dark:#FFFFFF; --on-dark-2:rgba(230,237,245,.8); --on-dark-3:rgba(230,237,245,.6); --line-d:rgba(230,237,245,.16);
  --fd:"Montserrat","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --fu:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fb:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --field-line:color-mix(in srgb,var(--muted) 85%,#fff); --r:10px; --r-lg:16px; --gut:clamp(20px,4vw,48px); --max:1240px;
  --shadow-sm:0 1px 2px rgba(var(--navy-rgb),.06),0 1px 1px rgba(var(--navy-rgb),.04);
  --shadow:0 2px 4px rgba(var(--navy-rgb),.04),0 14px 30px -12px rgba(var(--navy-rgb),.2);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* aliases used by component styles */
  --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--muted); --signal:var(--orange); --glass:var(--sea); --teal:var(--sea); --green:var(--sea); --pink:var(--orange); --magenta:var(--orange); --gold:var(--gold-c); --paper:var(--white); --bone:var(--sand); --granite:#8C97A3; --steel:#52606D; --violet:var(--navy-3); --cyan:var(--sea); --cloud:var(--mist); --pearl:var(--white); --line-light:var(--line); --rule:var(--line); --rule-2:var(--line-2); --rule-d:var(--line-d); --rule-d2:rgba(255,255,255,.28); --abyss:var(--navy); --deep:var(--navy); --mist-2:#E9EDF1;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
/* only Newsreader has an italic face: never let the browser slant Inter or Montserrat */
html{font-synthesis-style:none;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.65 var(--fb);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
/* one focus ring everywhere: copper on light grounds, white on the navy and night blocks, so it keeps 3:1 (WCAG 1.4.11) */
:is(.topbar,.hero,.site-foot,.cta-band,.countdown-band,.page-hero.photo,.glance){--focus:#fff}
::selection{background:var(--sea-pale)}
[hidden]{display:none!important}  /* the hidden attribute always wins over component display rules */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;letter-spacing:-.025em;line-height:1.12;margin:0;color:var(--navy);text-wrap:balance}
/* docs/design-system.md: page titles 800, every other heading 700; card titles share --card-h3, prose h3 is 21px */
h1{font-size:clamp(36px,4.4vw,56px);letter-spacing:-.03em;line-height:1.06;font-weight:800}
h2{font-size:clamp(28px,3.2vw,42px);line-height:1.12}
h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.015em;line-height:1.3}
:is(.card,.pcard,.tier,.plenary) h3{font-size:var(--card-h3);line-height:1.3}
h1 em,h2 em{font-style:normal;font-weight:inherit;color:var(--sea-text)}
.site-foot h1,.site-foot h2,.site-foot h3,.cta-band h2,.cta-band h3,.day header b,.countdown-band h2,.page-hero.photo h1{color:inherit}
p{margin:0 0 1em;text-wrap:pretty}
.kicker{display:inline-flex;align-items:center;gap:10px;font:700 13px/1.2 var(--fd);letter-spacing:.2em;text-transform:uppercase;color:var(--sea-2)}
.kicker::before{content:"";width:22px;height:2px;background:var(--rib-copper);border-radius:2px}
.lede{font-size:clamp(18px,1.45vw,20px);line-height:1.62;color:var(--ink-2);max-width:680px}
.grad{color:var(--sea-text)}
.muted{color:var(--muted)}
.pre-wrap{white-space:pre-wrap}
small,.small{font-size:14px}

/* dark (navy) surfaces */
.site-foot{background:var(--navy);color:var(--on-dark);color-scheme:dark;position:relative;overflow:hidden}
.foot-sky{position:absolute;left:0;right:0;top:0;height:110px;background:url(/assets/img/seam-foot.svg) left top/auto 100% no-repeat;pointer-events:none}
/* King's College skyline in fine line-art (from the EPGRS identity), quiet behind the footer links */
.foot-sky::after{content:"";position:absolute;right:max(16px,calc((100% - var(--max)) / 2));top:18px;width:min(560px,58%);aspect-ratio:1064/336;background:url(/assets/img/skyline-kings.svg) right top/contain no-repeat;opacity:.13}
@media (max-width:700px){.foot-sky::after{width:86%;opacity:.1}}
.site-foot>.wrap{position:relative}

.site-foot .muted{color:var(--on-dark-3)}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(56px,7vw,96px) 0}
.sec.slim{padding:clamp(28px,3.5vw,44px) 0}
.note-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.note-row p{margin:0;max-width:760px}
.sec.light+.sec.light,.sec.light+.sec:not([class*=" "]){border-top:1px solid var(--line)}

.light{background:var(--white)}
.cloud{background:var(--mist)}

.sec-head{display:grid;gap:16px;margin-bottom:clamp(36px,4.5vw,60px);max-width:820px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none;flex-wrap:wrap}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-head.scrolled{box-shadow:0 6px 20px -14px rgba(11,27,43,.25)}
.topbar{background:var(--navy);color:var(--on-dark-2);font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:38px}
.topbar a{color:#fff;font-weight:600;text-decoration:none;display:inline-block;padding:4px 0}
.topbar a:hover{text-decoration:underline}
.topbar .tb-r{display:flex;gap:18px}
.topbar .tb-cta-short{display:none}
@media (max-width:760px){.topbar .tb-r{display:none}}
/* phones: the bar carries only what is open now, in its short wording (site.js keeps both wordings current), as a
   44px target; it may wrap rather than clip, so the message can never vanish into an ellipsis */
@media (max-width:600px){
  .topbar .tb-when,.topbar .tb-cta-long{display:none}.topbar .tb-cta-short{display:inline}
  .topbar a{display:flex;align-items:center;min-height:44px;padding:4px 0;gap:.3em}
}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand{flex:none}
/* the lockup: 216 px wide (38 px tall) in the header, 159 px where the desktop nav is crowded and the small cut at
   164 px on phones; 40 px tall in the footer, with the acronym line set as text under it.
   In the header bar it is the one item that may shrink (to 140 px on desktops, as far as needed on phones), so the
   nav and the account and menu buttons always fit inside the content edge instead of pushing past it. The 12px
   gap on .head-row keeps it clear of the account button and the menu, down to 360 px. */
.brand-img{width:216px;max-width:100%;height:auto;display:block}
.site-head .brand{flex:0 1 auto;min-width:140px}.site-head .brand picture{min-width:0}
@media (min-width:1025px) and (max-width:1140px){.brand-img{width:159px}.nav-cta .btn.ghost{display:none}}
.site-foot .brand-img{width:auto;height:40px;max-width:none}
@media (max-width:480px){.site-head .brand{min-width:0}.site-head .brand-img{width:164px}}
.brand-txt{display:flex;align-items:baseline;gap:6px;font-family:var(--fu)}
.brand-txt b{font-weight:800;font-size:21px;letter-spacing:-.01em}
.brand-txt i{font-style:normal;font-weight:500;font-size:16px;color:var(--muted)}
.brand.big .brand-txt b{font-size:28px}
.nav{display:flex;align-items:center}
.nav-menu{display:flex;align-items:center;gap:2px}
.nav-menu>a,.more summary{position:relative;white-space:nowrap;padding:10px 12px;border-radius:6px;text-decoration:none;font:500 15px var(--fb);color:var(--ink-2);cursor:pointer;list-style:none;transition:color .2s,background .2s}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-3px) rotate(45deg)}
.nav-menu>a:hover,.more summary:hover{color:var(--navy);background:var(--mist)}
.nav-menu>a[aria-current]{color:var(--navy);font-weight:600}
.nav-menu>a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--orange)}
.more{position:relative}
.more-panel{position:absolute;z-index:60;left:50%;top:calc(100% + 10px);transform:translateX(calc(-50% + var(--dx, 0px)));width:min(600px,calc(100vw - 32px));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);animation:pop .18s var(--ease)}
/* invisible bridge over the gap, so moving the pointer from "More" to the panel keeps it open */
.more-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.more-col{display:grid;align-content:start;gap:2px}
.more-h{padding:4px 12px 6px;font:700 13px var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.more-panel a{padding:8px 12px;border-radius:6px;text-decoration:none;font-size:15px;color:var(--ink-2)}
.more-panel a:hover,.more-panel a:focus-visible{background:var(--mist);color:var(--navy)}
.more-panel a[aria-current]{color:var(--navy);font-weight:600}
.more[open] summary{color:var(--navy);background:var(--mist)}
.more[open] summary::after{transform:translateY(0) rotate(225deg)}
@keyframes pop{from{opacity:0;translate:0 -4px}}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:12px}
/* .btn.head-acct: it must outrank .btn{display:inline-flex}, or the phone-only account button shows on desktops
   beside the real one in .nav-cta */
.nav-toggle,.btn.head-acct{display:none}
@media (max-width:1024px){
  .nav-toggle{display:grid;place-content:center;gap:5px;width:44px;height:44px;border-radius:8px;border:1px solid var(--line-2);background:#fff;cursor:pointer}
  .nav-toggle span:not(.sr){display:block;width:20px;height:2px;background:var(--ink);transition:transform .3s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
  .nav-menu{position:fixed;inset:72px 0 0;flex-direction:column;align-items:stretch;padding:12px var(--gut) 32px;background:#fff;overflow:auto;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility 0s .25s;border-top:1px solid var(--line)}
  .nav-menu.open{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .25s}
  .nav-menu>a,.more summary{font-size:19px;padding:14px 4px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-menu>a[aria-current]::after{display:none}
  /* "More" is laid out open here (site.js opens it with the menu): its groups follow the main links */
  .more summary{display:none}
  .more-panel{position:static;transform:none;width:auto;grid-template-columns:1fr;gap:10px;border:0;box-shadow:none;padding:0 0 8px;animation:none}
  .more-panel::before{display:none}
  .more-h{padding:18px 4px 4px;font-size:13px}
  .more-panel a{padding:10px 4px;font-size:17px}
  /* the account link sits in the bar beside the menu button; the menu opens on the main action */
  .nav{gap:8px;margin-left:12px}.btn.head-acct{display:inline-flex}.nav-cta [data-account-link]{display:none}
  .nav-cta{order:-1;margin:4px 0 12px;flex-direction:column;align-items:stretch}
  .nav-menu>a.dup-cta:not([aria-current]){display:none}   /* site.js: the same page as the main button just above it */
}

/* desktops: the wrap stops growing at --max, so the row is set to fit it at every width (the full-size row was
   wider than the content edge from 1321px up) */
@media (min-width:1025px){
  .nav-menu{gap:0}.nav-menu>a,.more summary{padding:10px 6px;font-size:14px}
  .nav-cta{margin-left:6px}.nav-cta .btn{padding:0 14px;min-height:42px;font-size:14px}
  .brand-txt b{font-size:19px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:8px;background:var(--orange);color:#fff;font:600 15.5px/1 var(--fb);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn:hover{background:var(--orange-2)}
@media (hover:hover){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn:active{transform:translateY(1px)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn.gold,.btn.navy{background:var(--navy)}.btn.gold:hover,.btn.navy:hover{background:var(--navy-2)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--navy);background:var(--mist)}
/* the button that deletes or withdraws something (ask({danger:true}), the account delete page) */
.btn.danger-solid{background:#A23B2A;color:#fff;box-shadow:none}
.btn.danger-solid:hover{background:#86301F}
.cta-band .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.cta-band .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.cta-band .btn.gold{background:#fff;color:var(--navy)}
.btn.sm{min-height:40px;padding:0 16px;font-size:14.5px}
.btn.xs{min-height:32px;padding:0 12px;font-size:14px}
/* an icon in a button has its size everywhere (icon() gives an svg with no size of its own, which would collapse) */
.btn svg{flex:none;width:16px;height:16px}.btn.sm svg,.btn.xs svg{width:14px;height:14px}
.btn[disabled]{opacity:.5;pointer-events:none}
/* phones: every button is at least a 44px target; a label that comes from data (.btn.wrap) or sits in a dialog may wrap */
@media (max-width:600px){.btn.sm,.btn.xs{min-height:44px}.btn.wrap,dialog .btn{white-space:normal;line-height:1.25;padding-block:10px;text-align:center}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* phones: a hero's actions stack at full width, on the home page and on every inner page alike */
@media (max-width:560px){:is(.hero,.page-hero) .btn-row{flex-direction:column;align-items:stretch}}
/* a link that stands alone as an action (last thing in a card, or .go on its own line) is a 44px target */
.card > a.link,a.link.go{display:inline-flex;align-items:center;min-height:44px}
.link{color:var(--sea-2);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--sea) 35%,transparent);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:currentColor}

.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font:600 14px/1.2 var(--fb);background:var(--sea-tint);color:var(--sea-2)}
.chip.m{background:var(--orange-tint);color:var(--orange-2)}
.chip.g{background:var(--mist);color:var(--ink-2)}
/* meaning, not decoration: the brand logic carried into labels */
.chip.sci{background:var(--sea-tint);color:var(--sea-2)}
.chip.ind{background:var(--orange-tint);color:var(--orange-2)}
.chip.stu{background:var(--ice);color:var(--ink)}
.chip.gold{background:color-mix(in srgb,var(--gold-c) 22%,#fff);color:var(--ink)}
.chip.house{background:var(--mist);color:var(--ink-2)}
/* science and industry together: a neutral chip whose dot carries both colours (a split background cut the label in two) */
.chip.both{background:var(--mist);color:var(--ink-2)}
.chip.sci::before,.chip.ind::before,.chip.stu::before,.chip.both::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sea)}
.chip.ind::before{background:var(--copper)}
.chip.stu::before{background:var(--sea-light)}
.chip.both::before{background:linear-gradient(90deg,var(--rib-sea) 50%,var(--rib-copper) 50%)}

.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- home hero ---------- */

.facts{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.facts .wrap>div{padding:26px 22px;border-left:1px solid var(--line)}
.facts .wrap>div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font:700 clamp(28px,2.8vw,36px)/1.1 var(--fd);letter-spacing:-.01em;color:var(--navy)}
.facts span{font-size:14.5px;color:var(--muted)}
.facts .is-next b{color:var(--orange-2)}
.facts .wrap>.facts-more{display:flex;align-items:center}
/* tablets and phones: a strip of three date cards, the link to every date under it */
@media (max-width:820px){
  .facts{background:var(--mist)}
  .facts .wrap{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-block:14px}
  .facts .wrap>div:nth-child(n){padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
  .facts b{font-size:clamp(18px,5vw,24px)}.facts span{display:block;margin-top:2px;font-size:14px;line-height:1.3}
  .facts .wrap>.facts-more:nth-child(n){grid-column:1/-1;padding:0;border:0;background:none}
}

/* ---------- reveal ---------- */
/* the one scroll fade is in components.css (.reveal): below-the-fold only, never with reduced motion, and always
   shown when focused or printed */

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.card{position:relative;padding:clamp(22px,2.2vw,30px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);transition:border-color .2s,box-shadow .25s,transform .25s}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.cloud .card{border-color:transparent;box-shadow:var(--shadow-sm)}

.card h3{margin:16px 0 8px}
.card p{color:var(--ink-2);font-size:16px;margin:0}

.card .ico{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;background:var(--sea-tint);color:var(--sea-2)}
.card .ico svg{width:23px;height:23px}
.card.m .ico{background:var(--orange-tint);color:var(--orange-2)}
.card.g .ico{background:#EEF1F5;color:var(--navy)}

.card .num{position:absolute;right:20px;top:18px;font:700 14px var(--fb);color:var(--muted)}
.card ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15.5px;color:var(--ink-2)}

.card li{display:flex;gap:10px}
.card li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--sea)}
.card.m li::before{background:var(--orange)}

/* photo cards */
.pcard{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;transition:box-shadow .25s,transform .25s}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pcard .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard:hover .ph img{transform:scale(1.04)}
.pcard .ph .tn{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:6px;background:#fff;font:700 14px var(--fb);letter-spacing:.04em;color:var(--navy)}
.pcard .pb{padding:20px 22px 24px;display:grid;gap:8px}
.pcard .pb p{margin:0;color:var(--ink-2);font-size:15.5px}

/* figure with credit */
.fig{position:relative;margin:0}
.fig img{width:100%;border-radius:var(--r-lg);object-fit:cover}
.fig figcaption{margin-top:8px;font-size:14px;color:var(--muted)}

.duo{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:end}
.duo .fig:first-child img{aspect-ratio:4/5}
.duo .fig:last-child img{aspect-ratio:4/4.6}
.duo .fig:last-child{margin-bottom:56px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:clamp(22px,3vw,34px) 20px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font:700 clamp(44px,5vw,66px)/1 var(--fd);letter-spacing:-.015em;color:var(--navy)}
.stat span{display:block;margin-top:8px;font-size:15px;color:var(--ink-2)}

@media (max-width:780px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-left:0;padding-left:0}.stat{border-top:1px solid var(--line)}}

/* timeline */
.timeline{position:relative;display:grid;padding-left:34px}
.tl-list{display:grid;margin:0;padding:0;list-style:none}
.timeline .rail{position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:var(--line)}
.timeline .rail i{position:absolute;inset:0;background:var(--sea);transform:scaleY(var(--prog,0));transform-origin:top}
.tl-item{position:relative;display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.tl-item::before{content:"";position:absolute;left:-31px;top:22px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--line-2)}
.tl-item.passed::before{background:var(--sea);border-color:var(--sea)}
.tl-item.now::before{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-tint)}
.tl-date{font:600 14px/1.4 var(--fb);color:var(--sea-2);padding-top:2px}
.tl-item h3{font-size:18px}
.tl-item p{margin:2px 0 0;font-size:15px;color:var(--muted)}
.tl-item.star h3{color:var(--orange-2)}
@media (max-width:640px){.tl-item{grid-template-columns:1fr;gap:2px}}
.dates-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--navy)}
.dates-row div{padding:18px 16px 0 0}
.dates-row div+div{padding-left:16px;border-left:1px solid var(--line)}
.dates-row b{display:block;font:700 24px/1.15 var(--fd);color:var(--navy)}
.dates-row span{font-size:14.5px;color:var(--ink-2)}
.dates-row .is-next b{color:var(--orange-2)}
.dates-row .passed{opacity:.55}
@media (max-width:900px){.dates-row{grid-template-columns:1fr 1fr}.dates-row div{border-left:0!important;padding-left:0!important;padding-bottom:16px;border-bottom:1px solid var(--line)}}

/* tiers / pricing */
.tier{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.tier::before{display:none}
.tier.headline{border:2px solid var(--navy)}
.tier.headline .avail{background:var(--navy);color:#fff}

.tier .price{font:700 46px/1 var(--fd);letter-spacing:-.015em;color:var(--navy)}

.tier .price small{font:500 14px var(--fb);color:var(--muted);letter-spacing:0}
.tier .avail{align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--mist);font:600 13px var(--fb);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.tier ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:9px;font-size:15px;color:var(--ink-2)}

.tier li{display:flex;gap:10px}
.tier li::before{content:"";flex:none;width:14px;height:14px;margin-top:4px;border-radius:50%;background:var(--sea-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6 9.2 10 5' fill='none' stroke='%230A626A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tier .btn,.tier>.btn-row{margin-top:auto;align-self:flex-start}

/* fees table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;-webkit-overflow-scrolling:touch}
table.fees{width:100%;border-collapse:collapse;min-width:640px;color:var(--ink);font-size:16px}
.fees th,.fees td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.fees tbody:last-child tr:last-child>*{border-bottom:0}
.fees thead th{font:600 14px/1.35 var(--fb);color:var(--ink-2);background:var(--mist);vertical-align:bottom}
.fees thead th small{display:block;font-weight:400;color:var(--muted)}
.fees thead th.now{background:var(--navy);color:#fff}
.fees thead th.now small{color:var(--on-dark-2)}
.rate-pill{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;background:var(--sea);color:#fff;font-size:14px;font-weight:600;line-height:1.35}
.fees td.now{background:#F2F6FA;font-weight:700;color:var(--navy)}
.fees td{font-variant-numeric:tabular-nums;white-space:nowrap}
.fees tbody tr:hover>:not(.now){background:#FAFBFC}
.fees tbody tr:hover td.now{background:#EAF0F6}
.fees tbody th{font-weight:400}
.fees tbody th b{font-weight:600}
.fees tbody th small{display:block;color:var(--muted);font-size:14px}
.fees th[scope="row"]{background:var(--paper)}
.fees .group th{background:var(--paper);font:700 13px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--sea-2);padding-top:22px}
/* phones: one card per category with its three rates side by side (built from the same data), instead of a table
   that would scroll sideways and cut the prices off */
.fee-cards{display:none}
@media (max-width:700px){
  .fees-wide{display:none}
  .fee-cards{display:grid;gap:10px}
}
.fee-group{margin:14px 0 0;font:700 13px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--sea-2)}
.fee-card{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.fee-card p{margin:0}
.fee-card p b{display:block;font-weight:600}
.fee-card p small{display:block;font-size:14px;color:var(--muted)}
.fee-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 0}
.fee-card dl div{padding:8px;border:1px solid var(--line);border-radius:8px}
.fee-card dt{font-size:14px;color:var(--muted)}
.fee-card dd{margin:2px 0 0;font-weight:700;font-variant-numeric:tabular-nums}
.fee-card .now{border-color:var(--sea);background:var(--sea-tint)}
.fee-card .now dt{color:var(--ink-2)}   /* muted grey on the sea tint is under 4.5:1 */
/* narrow phones: the three rates stack as rows (label and pill left, price right), so neither the pill nor
   "Late / on-site" breaks inside a cell 84px wide, and the prices line up */
@media (max-width:420px){
  .fee-card dl{grid-template-columns:1fr}
  .fee-card dl div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px}
  .fee-card dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
  .fee-card .rate-pill{display:inline-block;margin-top:0}
  .fee-card dd{margin:0}
}
.fee-card .rate-pill{display:block;width:max-content;max-width:100%;margin-top:4px}
.fee-card .fee-each{margin-top:8px;font-weight:700;font-variant-numeric:tabular-nums}

/* certificate check: a fixed-length code, so a fixed-width field */
.vf-code{max-width:40ch;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* registration hero: "Your rate", the answer to "what do I pay?" */
.rate-card{display:grid;gap:12px;padding:clamp(18px,2.4vw,24px);border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}
.rate-card .kicker{margin:0}
/* the rate card's switch is a tray with a white chip for the choice; .seg.rc-seg outranks the generic .seg rules below.
   Options stretch to fill each row, so none is left alone on a line. Without JavaScript it is not shown at all. */
.seg.rc-seg{gap:4px;margin:0;padding:4px;min-width:0;border:0;border-radius:10px;background:var(--mist)}
.seg.rc-seg label{flex:1 1 auto}
.seg.rc-seg span{display:block;text-align:center;padding:8px 10px;border:0;border-radius:7px;background:transparent;font-weight:600;color:var(--ink-2)}
.seg.rc-seg input:checked+span{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
html[data-theme="dark"] .seg.rc-seg input:checked+span{background:var(--sea);color:#fff}
html:not(.js) .rc-seg{display:none}
.rc-big{margin:0;font:800 clamp(40px,5vw,48px)/1 var(--fd);letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
:is(.rc-big,.rc-sub) [data-w]:not(.now){display:none}
.rc-sub{margin:0;font-size:15px;color:var(--muted)}
.rc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.rc-steps li{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-radius:10px;font-variant-numeric:tabular-nums}
.rc-steps span{font-size:14px;color:var(--muted)}
.rc-steps .now{border-color:var(--sea);background:var(--sea);color:#fff}
.rc-steps .now span{color:rgba(255,255,255,.88)}
.rc-note{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:600px){.seg.rc-seg span{display:flex;align-items:center;justify-content:center;min-height:44px}}
/* phones: the card's last line sits above the fixed "Ask us" button, so the category under the price is never covered */
@media (max-width:700px){.rate-card{margin-bottom:56px}}

/* calculator */
.calc{display:grid;grid-template-columns:1.25fr 1fr;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--mist);box-shadow:var(--shadow-sm)}
.calc-out{border-left:1px solid var(--line)}
.calc-form{padding:clamp(22px,3vw,36px);display:grid;gap:20px}
.calc-out{padding:clamp(22px,3vw,36px);background:#fff;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.calc-out .kicker{color:var(--sea-text)}
.calc-out .muted{color:var(--muted)!important}
.calc-sum{display:flex;flex-direction:column;gap:10px}
.calc-out .total{font:700 clamp(48px,5.6vw,68px)/1 var(--fd);letter-spacing:-.012em;color:var(--navy)}
.calc-out dl{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:8px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.calc-out dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.calc-out .btn.gold{background:var(--orange);color:#fff}
.calc-out .btn.gold:hover{background:var(--orange-2)}
:is(.calc,.contact-form,.updates-form,.chat-form){--danger:#B3261E}
/* The venue map is drawn light in both themes, so its pins keep the light-theme navy in dark mode (QA A03) */
html[data-theme="dark"] .map{--navy:#1F2328}
html[data-theme="dark"] :is(.calc,.contact-form,.updates-form,.chat-form){--danger:#F2867E}
.calc .grid[data-in-person]{align-items:start}
:is(.calc,.contact-form,.updates-form,.chat-form) .field-err{display:block;margin-top:6px;color:var(--danger);font-weight:600}
:is(.calc,.contact-form,.updates-form,.chat-form) .input[aria-invalid]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
/* public-forms.js: the error summary at the top of a website form (GOV.UK pattern) */
.pf-err{padding:14px 16px;border:2px solid var(--danger);border-radius:10px;color:var(--ink);font-size:16px}
.pf-err p{margin:0}.pf-err ul{margin:6px 0 0;padding-left:20px}.pf-err a{color:inherit;font-weight:600;text-decoration:underline}
.calc [data-in-person] input:disabled+span,.calc [data-in-person] input:disabled{opacity:.45;cursor:not-allowed}
.calc-out .btn[aria-disabled]{opacity:.5;pointer-events:none}
@media (max-width:820px){.calc{grid-template-columns:1fr}}

/* forms */
.field{display:grid;gap:7px;align-content:start} /* a field beside a taller one keeps its own height */
.field label,.field .lab{font:600 14px var(--fb);color:var(--ink-2)}
.field label.check{font:400 15px var(--fb);color:var(--ink)} /* a radio or tick box reads like any other, inside a field too */

.input,select.input,textarea.input{width:100%;min-height:var(--control-h);padding:12px 14px;border-radius:8px;border:1px solid var(--field-line);background:#fff;color:var(--ink);font-size:16px;line-height:1.5;transition:border-color .2s,box-shadow .2s}
/* fields take the one focus ring like every other control (on a mouse click too); the border darkens (lightens in
   dark mode, where --sea-2 is the light sea) so it never gets fainter on focus */
.input:focus{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--sea-2)}
textarea.input{min-height:140px;resize:vertical}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:inline-block;padding:9px 14px;border-radius:8px;font-size:14.5px;font-weight:500;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);transition:all .2s}

.seg input:checked+span{background:var(--sea);border-color:var(--sea);color:#fff}

.seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:600px){.seg span{display:inline-flex;align-items:center;min-height:44px}}   /* the calculator's options are 44px targets */
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--sea)} /* flex:none: a long label cannot squeeze the box */
/* Notes: neutral by default; info, warn and bad carry the status tones of the pills (copper is never a status colour) */
.note{padding:16px 18px;border-radius:10px;background:var(--mist);border-left:4px solid var(--line-2);font-size:15.5px;color:var(--ink-2)}
.note.info{background:var(--sea-tint);border-left-color:var(--sea)}
.note.warn{background:#FFF4D6;border-left-color:#8A6100}
.note.bad{background:#FDECEC;border-left-color:#B42318}
.note:is(.warn,.bad){color:#1C2024}   /* light tints in both themes, so their text stays dark */

/* inner page hero */
.page-hero{position:relative;padding:clamp(52px,7vw,96px) 0 clamp(48px,6vw,80px);overflow:hidden;background:var(--mist);border-bottom:1px solid var(--line)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{max-width:900px;margin:16px 0 18px}
.page-hero .lede{max-width:720px}
.page-hero .contours{position:absolute;left:0;right:0;bottom:0;height:clamp(52px,6.4vw,92px);z-index:0;pointer-events:none;background:url(/assets/img/seam-hero.svg) right bottom/auto 100% no-repeat}
.page-hero .chip{background:#fff}
.page-hero.photo{background:var(--navy);color:#fff}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--muted)}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--navy);text-decoration:underline}

/* prose */
.prose{max-width:760px;font-size:17.5px}
.prose h2{font-size:clamp(26px,2.6vw,34px);margin:52px 0 14px}
.prose h3{font-size:21px;margin:30px 0 8px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
.prose a{color:var(--sea-2)}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px 0;cursor:pointer;list-style:none;font:600 clamp(17px,1.5vw,19px)/1.4 var(--fd)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mist);font:500 20px/1 var(--fb);color:var(--navy);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--ink-2);max-width:820px}

/* people */
.person{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:start;align-content:start;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left}
.person>.avatar{grid-row:span 3}
.person>:not(.avatar){grid-column:2}
.person .chip{margin-bottom:6px}
.person h3.mt-1{margin-top:0}
.avatar{position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:700 22px/1 var(--fu);color:var(--navy);background:var(--sea-tint)}
.avatar span{position:relative}
.avatar.tbc{background:var(--mist);border:1px dashed var(--line-2)}
.avatar.tbc span{font:600 14px var(--fb);letter-spacing:.06em;color:var(--muted)}
.person h3{font-size:18px;line-height:1.3}
.person p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* heritage covers */
.heritage{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,16vw,200px);gap:20px;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.h-ed{margin:0;scroll-snap-align:start;display:grid;gap:6px;align-content:start;text-decoration:none;color:inherit}
.h-ed img{margin-bottom:6px}
.h-ed img{width:100%;aspect-ratio:520/735;object-fit:cover;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.1),0 10px 24px -14px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.h-ed:hover img{transform:translateY(-4px)}
.h-ed b{font:600 16px var(--fd)}
.h-ed span{font-size:14px;color:var(--muted);line-height:1.4}

.h-ed i{display:none}
.h-ed.now{display:grid;place-content:center;text-align:center;padding:20px;border-radius:8px;background:var(--orange);color:#fff;aspect-ratio:520/735}
.h-ed.now span{color:rgba(255,255,255,.85)}

/* CTA band */
.cta-band{position:relative;border-radius:var(--r-lg);padding:clamp(36px,5vw,64px);overflow:hidden;background:var(--navy);color:#fff;display:block;gap:32px;align-items:center}
.cta-band.two{display:grid;grid-template-columns:1.4fr 1fr}
.cta-band::after{content:"";position:absolute;inset:0;background:url(/assets/img/seam-cta.svg) right bottom/max(100%,900px) auto no-repeat;pointer-events:none}
@media (max-width:820px){.cta-band::after{top:auto;height:clamp(40px,8vw,64px);background-size:720px auto}}
.cta-band>*{position:relative;z-index:1}
.cta-band .kicker{color:var(--sea-light)}
.cta-band h2{max-width:720px}
.cta-band p{max-width:600px;color:var(--on-dark-2);font-size:18px;margin:14px 0 24px}

@media (max-width:820px){.cta-band.two{grid-template-columns:1fr}}

/* footer */
.site-foot{position:relative;padding:clamp(56px,7vw,88px) 0 26px}

.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-grid h3{font:700 13px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--sea-light);margin-bottom:14px}
.foot-grid a:not(.brand){display:block;padding:5px 0;text-decoration:none;color:var(--on-dark-2);font-size:15px}
.foot-grid a:not(.brand):hover{color:#fff;text-decoration:underline}
.site-foot .brand{color:#fff}
.site-foot .brand-txt i{color:var(--on-dark-3)}
.foot-tag{margin:18px 0 6px;color:var(--on-dark-2);font-size:16px;line-height:1.5}
.foot-tag{margin:10px 0 0;font-size:14px;color:var(--on-dark-2)}
.foot-when{font-weight:600;color:#fff;font-size:15px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line-d);font-size:14px;color:var(--on-dark-3)}
.foot-motto em{font-style:normal;color:var(--on-dark-2)}
.motion-toggle{background:none;border:1px solid var(--line-d);border-radius:6px;padding:5px 10px;font-size:14px;cursor:pointer;color:var(--on-dark-2)}
.motion-toggle[aria-pressed="true"]{border-color:#fff;color:#fff}
/* phones: footer links and the motion switch are 44px targets (WCAG 2.5.8, our own 44px floor) */
@media (max-width:600px){.foot-grid a:not(.brand){padding:10px 0}.motion-toggle{min-height:44px;padding-inline:14px}}

@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* countdown (compact, used on dates page) */
.countdown{display:inline-grid;grid-auto-flow:column;gap:10px;align-items:end}
.cd-unit{display:grid;justify-items:center;gap:4px}
.cd-unit small{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-3)}
.cd-digits{display:flex;gap:2px}
.flip{position:relative;width:30px;height:46px;font:700 36px/1 var(--fu);font-variant-numeric:tabular-nums;overflow:hidden}
.flip .fc{position:absolute;inset:0;display:grid;place-items:end center;color:#fff}
.cd-sep{font:700 30px/1 var(--fu);color:var(--on-dark-3);padding-bottom:18px}
.countdown-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;border-radius:var(--r-lg);background:var(--navy);color:#fff}
.countdown-band .kicker{color:var(--sea-light)}


/* utilities */
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:40px}.mt-4{margin-top:64px}
.center{text-align:center}.ta-r{text-align:right}

.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
/* status tones (shared/labels.js): "opens soon" is info, "closed" is danger; copper is never a status colour */
.status.open{color:var(--sea-2)}.status.soon{color:var(--info)}.status.closed{color:var(--danger)}
.toast{position:fixed;left:50%;bottom:24px;z-index:450;translate:-50% 30px;opacity:0;padding:12px 18px;border-radius:8px;background:var(--ink);color:#fff;font-size:14.5px;box-shadow:var(--shadow);transition:translate .3s var(--ease),opacity .3s var(--ease);pointer-events:none}
.toast.on{translate:-50% 0;opacity:1}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.reduce-motion{scroll-behavior:auto!important}
@media print{.site-head,.site-foot,.topbar{display:none!important}}
.h4{font-size:20px;margin:0 0 4px}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:center}
/* the photo beside a ph-grid heading; not .ph-photo, which is the slanted photo hero (components.css) */
.ph-figure{margin:0}
.ph-figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.ph-figure figcaption{margin-top:10px;font-size:14px;color:var(--ink-2)}
.ph-figure figcaption a{color:inherit}
@media (max-width:900px){.ph-grid{grid-template-columns:1fr}.ph-figure{max-width:560px}}

.cloud .person{border-color:transparent;box-shadow:var(--shadow-sm)}
a.card{text-decoration:none;color:inherit}
a.card:hover h3{color:var(--sea-2)}
@media (max-width:1024px){.site-head.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}.site-head.menu-open .nav-menu{bottom:0;z-index:90}}
.person .chip{border-radius:8px;white-space:normal;line-height:1.35}
@media (max-width:820px){.calc-out{border-left:0;border-top:1px solid var(--line)}}
/* icon + text list (home: venue & travel) */
.meta-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.meta-list li{display:flex;align-items:flex-start;gap:12px;font-size:16px;color:var(--ink-2)}
.meta-list svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--sea-text)}

/* welcome from the chairs (home) */
.welcome-sec{padding:clamp(48px,6vw,84px) 0}
.welcome{max-width:880px;margin:0 auto;padding:0;text-align:center}
.welcome p{font:italic 400 clamp(23px,2.5vw,33px)/1.38 var(--fs);color:var(--navy);letter-spacing:-.004em;margin:0 0 28px;text-wrap:balance}
.welcome footer{display:grid;justify-items:center;gap:5px;font-size:14.5px;color:var(--muted)}
.welcome footer::before{content:"";width:34px;height:2px;background:var(--orange);border-radius:2px;margin-bottom:12px}
.welcome footer b{font:600 15px var(--fb);color:var(--ink)}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
legend.lab{padding:0;margin-bottom:7px}
/* photo strip (own archive photos) */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.strip .fig img{aspect-ratio:4/3;width:100%;object-fit:cover}
.strip figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
figcaption a[rel~="license"]{white-space:nowrap}
@media (max-width:700px){.strip{grid-template-columns:1fr 1fr}}

/* print: programme, key dates and fees come out clean on paper */
@media print{
  .topbar,.site-head,.site-foot,.btn,.btn-row,.cta-band,.contours,.hero,.globe,.scroll-cue,.motion-toggle,.crumbs,.nav-cta{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}
  .sec{padding:18pt 0;border:0}
  .page-hero{padding:0 0 12pt;background:none;border-bottom:1px solid #999}
  a{text-decoration:none;color:inherit}
  .days{grid-template-columns:repeat(4,1fr);overflow:visible}
  .slot,.card,.tier,.table-wrap{break-inside:avoid;box-shadow:none}
}
.wrap.narrow{max-width:760px}

/* site search */
.search-btn{display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink-2);font:500 14px var(--fb);cursor:pointer}
.search-btn:hover{border-color:var(--navy);color:var(--navy)}
.search-btn svg,.sr-box svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (min-width:1025px){.search-btn span{display:none}}
@media (max-width:1024px){.search-btn{margin:16px 0 0;justify-content:center;padding:12px;min-height:44px}}
.search-dlg{width:min(680px,94vw);max-height:80vh;padding:0;border:0;border-radius:16px;box-shadow:0 30px 80px -20px rgba(var(--navy-rgb),.45);overflow:hidden;margin-top:10vh}
.search-dlg::backdrop{background:rgba(var(--navy-rgb),.45);backdrop-filter:blur(2px)}
.sr-box{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.sr-box input{flex:1;border:0;outline:0;font:500 17px var(--fb);color:var(--ink);background:none}
.sr-box:focus-within{outline:3px solid var(--focus);outline-offset:-3px}   /* the field has no ring of its own */
.sr-close{min-height:32px;border:1px solid var(--line-2);border-radius:6px;background:#fff;font:600 14px var(--fb);color:var(--muted);padding:4px 10px;cursor:pointer}
.sr-list{list-style:none;margin:0;padding:8px;max-height:calc(80vh - 110px);overflow:auto}
.sr-list [role=option]{display:grid;gap:2px;padding:10px 12px;border-radius:10px;color:var(--ink);cursor:pointer;scroll-margin:8px}
.sr-list [role=option][aria-selected="true"]{background:var(--mist);box-shadow:inset 3px 0 0 var(--orange)}
.sr-group{padding:10px 12px 4px;font:700 13px var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sr-foot{display:flex;gap:16px;margin:0;padding:9px 16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.sr-foot kbd{display:inline-block;min-width:20px;margin-right:3px;padding:1px 5px;border:1px solid var(--line-2);border-radius:5px;background:#fff;font:600 14px var(--fb);text-align:center;color:var(--ink-2)}
@media (max-width:600px){.sr-foot{display:none}}
.sr-list b{font:650 15px var(--fd);color:var(--navy)}
.sr-list small{font-size:14px;color:var(--muted)}
.sr-k{font:700 13px var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--sea-2)}
.sr-k:empty{display:none}
.sr-x{font-size:14px;color:var(--ink-2)}
.sr-x mark{background:#FDF0D5;color:inherit;border-radius:3px;padding:0 1px}
.sr-hint{padding:14px;color:var(--muted);font-size:14.5px}
.sr-hint button.link{min-height:24px;padding:0;border:0;background:none;font:inherit;font-weight:600;cursor:pointer}

/* Track grid: seven tracks plus an "also open" card */
.tracks-grid .pcard .pb h3{line-height:1.25}
.tracks-grid .pcard .pb p{font-size:14.5px}
.pcard.also{background:var(--navy);border-color:var(--navy);color:#fff;justify-content:flex-end;background-image:url(/assets/img/seam-card.svg);background-repeat:no-repeat;background-size:100% auto;background-position:center top}
.pcard.also .pb{padding:24px}
.pcard.also .kicker{color:var(--sea-pale)}
.pcard.also .pb p{color:rgba(255,255,255,.78)}
.pcard.also .more{font:600 14px var(--fb);color:#fff;border-bottom:1px solid rgba(255,255,255,.4);justify-self:start;padding-bottom:2px}
@media (min-width:1100px){.tracks-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pcard.also h3{color:#fff}
.sec.light > .wrap.split{align-items:center}
.sec.light > .wrap.split.top{align-items:start}
/* a card's blocks with even space between them (.card p has no margin of its own) */
.card .card-stack>*+*{margin-top:12px}.card .card-stack>.btn-row{margin-top:16px}
.pcard.also{min-height:320px;background-size:100% auto;background-position:center top;padding-top:38%}
@media (max-width:980px){.pcard.also{min-height:300px}}

/* Brand guide (brand page) */
.guide{display:grid;gap:22px}
.guide h3{margin-top:14px;font-size:20px}
.gsw{display:inline-block;width:34px;height:34px;border-radius:8px;border:1px solid rgba(var(--navy-rgb),.12);flex:none;vertical-align:middle;margin-right:10px}
.g-elements,.g-house{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.g-el{display:flex;gap:4px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.g-el p{margin:4px 0;font-size:15px}
.g-el small{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.g-table td{vertical-align:top}
.g-table td small{display:block;color:var(--muted);font:14px ui-monospace,Menlo,monospace;margin-left:44px;margin-top:-8px}
.g-chip{display:inline-block;padding:6px 12px;border-radius:8px;font:700 14px var(--fd)}
.g-timers{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g-timers li{padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;gap:3px}
.g-timers span{font-size:14px} .g-timers small{color:var(--muted)}
.g-dodont{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g-dodont>div{padding:18px 20px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.g-dodont>div:last-child{border-color:#E7C3BC}
.g-dodont ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}
@media (max-width:760px){.g-timers,.g-dodont{grid-template-columns:1fr}}

/* fee tiers carry their sector colour: science, industry, students */
.tier.sec-sci,.tier.sec-ind,.tier.sec-stu{border-top:4px solid var(--sea)}
.tier.sec-ind{border-top-color:var(--copper)}
.tier.sec-stu{border-top-color:var(--sea-light)}
.tier.sec-sci .avail{background:var(--sea-tint);color:var(--sea-2)}
.tier.sec-ind .avail{background:var(--orange-tint);color:var(--orange-2)}
.tier.sec-stu .avail{background:var(--ice);color:var(--ink)}

/* ---- motion tokens and page-level polish ---- */
:root{--t-fast:120ms;--t-mid:200ms;--t-slow:320ms;--ease-out:cubic-bezier(.22,1,.36,1)}
/* soft page changes in browsers that support cross-document view transitions; the header stays put */
@view-transition{navigation:auto}
.site-head{view-transition-name:site-head}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-mid);animation-timing-function:var(--ease-out)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.reduce-motion::view-transition-group(*),.reduce-motion::view-transition-old(*),.reduce-motion::view-transition-new(*){animation:none!important}
/* search dialog opens and closes with a short fade and rise */
.search-dlg{transition:opacity var(--t-mid) var(--ease-out),translate var(--t-mid) var(--ease-out),overlay var(--t-mid) allow-discrete,display var(--t-mid) allow-discrete}
.search-dlg:not([open]){opacity:0;translate:0 8px}
@starting-style{.search-dlg[open]{opacity:0;translate:0 8px}}
.search-dlg::backdrop{transition:opacity var(--t-mid),overlay var(--t-mid) allow-discrete,display var(--t-mid) allow-discrete}
.search-dlg:not([open])::backdrop{opacity:0}
@starting-style{.search-dlg[open]::backdrop{opacity:0}}
/* the countdown keeps its space before the script fills it, so nothing below it jumps */
.countdown[data-countdown]:empty{min-height:72px}
.hero .countdown[data-countdown]:empty{min-height:clamp(70px,7vw,92px)}
.cd-digits{font-variant-numeric:tabular-nums}
/* pause button for the 3D opening scene */
.hero-pause{position:absolute;z-index:5;left:var(--gut);bottom:34px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:0;border-radius:999px;background:rgba(5,8,20,.5);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(255,255,255,.85);font:600 13px var(--fb);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.hero-pause:hover{color:#fff}
.hero-pause svg{width:12px;height:12px;fill:currentColor}
@media (max-width:760px){.hero-pause{bottom:18px}}
@media (max-width:600px){.hero-pause{min-height:44px;padding-inline:16px}}

/* ── UX B4: registration on phones (calculator, rate switch, fee list) ─────── */
/* the calculator's two columns become one, and neither column may push past the card's right edge */
@media (max-width:820px){
  .calc{grid-template-columns:minmax(0,1fr)}
  .calc-form,.calc-out{min-width:0}
  .calc-out .btn-row{flex-wrap:wrap}
  .calc-out .btn{white-space:normal;text-align:center;line-height:1.3;max-width:100%}
}
/* phones: the seven-way rate switch is two columns of equal cells; an odd last option takes the whole row */
@media (max-width:600px){
  .seg.rc-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg.rc-seg label:last-child:nth-child(odd){grid-column:1/-1}
}
/* phones: the full fee list folds behind "See all fees" (the rate card answers the question), and only the first
   card carries the rate pill ("Opens …" or "Current rate"); the shading still marks the rate in every card */
.fee-cards>summary{list-style:none;width:100%;margin-top:4px}
.fee-cards>summary::-webkit-details-marker{display:none}
.fee-cards[open]>summary{margin-bottom:6px}
.fee-list{display:grid;gap:10px}
@media (max-width:700px){.fee-cards{display:block}}
.fee-list>.fee-card:not(:nth-child(2)) .rate-pill{display:none}

/* ── UX B5: header and phone menu ─────────────────────────────────────────── */
/* the top bar is the header's first row (one banner landmark); it scrolls away and the logo row stays (site.js sets
   --tb-h to the bar's height, so without scripts the whole header simply stays) */
.site-head{top:calc(-1 * var(--tb-h, 0px))}
/* "More" groups: plain headings on desktops; on phones each is a closed disclosure, so the menu fits about one screen */
.more .more-col>summary.more-h{display:block;position:static;white-space:normal;padding:4px 12px 6px;border:0;border-radius:0;background:none;font:700 13px var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:default;list-style:none}
.more .more-col>summary.more-h::-webkit-details-marker{display:none}
.more .more-col>summary.more-h::after{content:none}
.more-links{display:grid;gap:2px}
.ph-only{display:none}
@media (min-width:1025px){.nav-menu>a.ph-only{display:none}}
@media (max-width:1024px){
  .nav-menu>a.ph-only{display:block}
  .nav-menu>a.ph-sub{padding-left:22px;font-size:17px}
  .more-panel a.ph-dup{display:none}
  .more .more-col>summary.more-h{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px 4px;border-bottom:1px solid var(--line);font:500 17px var(--fb);letter-spacing:0;text-transform:none;color:var(--ink-2);cursor:pointer}
  .more .more-col>summary.more-h::after{content:"";width:7px;height:7px;margin-right:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-3px) rotate(45deg)}
  .more .more-col[open]>summary.more-h::after{transform:translateY(2px) rotate(225deg)}
  .more-col .more-links{padding:4px 0 8px 12px}
  .more-panel{gap:0}
  /* the account buttons first, then Search, then the pages */
  .nav-cta{order:-2}
  .search-btn{order:-1;margin:0 0 8px}
}
/* the motion switch keeps one label; a tick shows it is on (aria-pressed says so to screen readers) */
.motion-toggle[aria-pressed="true"]::before{content:"✓ " / ""}

/* ── UX B1: public forms ──────────────────────────────────────────────────────────────────────────────── */
/* a field's message sits between its label (and hint) and the box, as in the portal (ui.js); a tick box's message
   sits above the box, close to it rather than a whole form gap away */
:is(.calc,.contact-form,.updates-form,.chat-form) .field-err{margin:0}
.contact-form>.field-err{margin-bottom:-10px}
/* a focused field or button near the bottom of the window is scrolled clear of the floating chat button */
html{scroll-padding-bottom:88px}
/* a page whose job is a form (bodyClass "form-page") keeps its photo heading short on wider screens, so the form's
   first field is on the first screen of a laptop */
@media (min-width:761px){
  .form-page .page-hero.has-photo{min-height:clamp(260px,22vw,320px);padding-block:40px}
  .form-page .page-hero+.sec{padding-top:clamp(32px,4vw,48px)}
}