/* Aspire AP Schools — site styles
   Palette and type follow the Website Content & Design Strategy (June 2026). */

:root{
  --paper:#F7F2E9;
  --sage:#ECEEE2;
  --sage-deep:#DDE3D3;
  --forest:#1F3B36;
  --heading:#1F3B36;
  --ink:#2A3A37;
  --ink-soft:#56655F;
  --teal:#4F9D94;
  --teal-ink:#2E6B64;
  --clay:#C97B4A;
  --line:#D8D2C2;
  --on-dark:#F7F2E9;
  --on-dark-soft:#C9D6CF;
  --card:#FBF8F2;

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;

  --maxw:1160px;
  --measure:36rem;
  --gutter:clamp(20px, 5vw, 40px);
  --band:clamp(52px, 8vw, 92px);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15201D; --sage:#1B2925; --sage-deep:#26372F; --forest:#0F1A17;
    --heading:#F1ECDF; --ink:#DCD8CC; --ink-soft:#A9B3AC; --teal:#6FB8AE;
    --teal-ink:#8CCBC1; --clay:#DB9A6D; --line:#34443F; --on-dark:#F1ECDF;
    --on-dark-soft:#AFC0B8; --card:#1E2D29;
  }
}
:root[data-theme="dark"]{
  --paper:#15201D; --sage:#1B2925; --sage-deep:#26372F; --forest:#0F1A17;
  --heading:#F1ECDF; --ink:#DCD8CC; --ink-soft:#A9B3AC; --teal:#6FB8AE;
  --teal-ink:#8CCBC1; --clay:#DB9A6D; --line:#34443F; --on-dark:#F1ECDF;
  --on-dark-soft:#AFC0B8; --card:#1E2D29;
}

*,*::before,*::after{box-sizing:border-box}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.125rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--teal-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--serif);color:var(--heading);font-weight:500;margin:0 0 .55em;
  font-optical-sizing:auto;font-variation-settings:"SOFT" 100, "WONK" 0;text-wrap:balance}
h1{font-size:clamp(2.35rem,5.2vw,4rem);line-height:1.08;letter-spacing:-.015em}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:-.01em}
h3{font-size:1.3rem;line-height:1.3;font-weight:600}
.lede{font-size:clamp(1.15rem,1.6vw,1.3rem);line-height:1.6;color:var(--ink);max-width:34rem}
.measure{max-width:var(--measure)}
.soft{color:var(--ink-soft)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* skip link */
.skip{position:absolute;left:12px;top:-60px;background:var(--forest);color:var(--on-dark);padding:10px 16px;border-radius:8px;z-index:100;text-decoration:none}
.skip:focus{top:12px}

/* ---------- safeguarding bar ---------- */
.safebar{background:var(--forest);color:var(--on-dark-soft);font-size:.95rem;line-height:1.5}
.safebar .wrap{padding-top:9px;padding-bottom:9px}
.safebar a{color:var(--on-dark);font-weight:700;white-space:nowrap}
.safebar strong{color:var(--on-dark);font-weight:700}

/* ---------- header ---------- */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--heading)}
.brand svg{width:44px;height:30px;flex:none}
.brand-name{font-family:var(--serif);font-size:1.55rem;font-weight:600;line-height:1}
.brand-sub{display:block;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);margin-top:4px;font-weight:400}
.nav{display:flex;align-items:center;gap:4px}
.nav a,.nav button.nav-trigger{white-space:nowrap;font:inherit;font-size:1rem;color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:8px;background:none;border:0;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.nav a:hover,.nav button.nav-trigger:hover{background:var(--sage)}
.nav a[aria-current="page"]{color:var(--heading);font-weight:700;box-shadow:inset 0 -2px 0 var(--teal)}
.nav .nav-cta{background:var(--forest);color:var(--on-dark);margin-left:10px;padding:10px 18px}
.nav .nav-cta:hover{background:var(--teal-ink);color:#fff}
.nav .nav-cta[aria-current="page"]{box-shadow:none}
.has-menu{position:relative}
.nav-trigger svg{width:12px;height:12px;transition:transform .2s ease}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 12px 30px -12px rgba(31,59,54,.25)}
.submenu[hidden]{display:none}
.submenu a{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:10px 12px}
.submenu a span{font-size:.88rem;color:var(--ink-soft)}
.menu-toggle{display:none}

@media (max-width: 1180px){
  .menu-toggle{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:1rem;background:none;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 14px;min-height:44px;cursor:pointer}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px var(--gutter) 24px;gap:2px;max-height:calc(100vh - 140px);overflow:auto}
  .nav.open{display:flex}
  .nav a,.nav button.nav-trigger{width:100%;justify-content:space-between;padding:12px 10px}
  .nav .nav-cta{margin:10px 0 0;justify-content:center}
  .submenu{position:static;box-shadow:none;border:0;background:var(--sage);margin:2px 0 6px;min-width:0}
}

/* ---------- bands + horizon ---------- */
.band{padding:var(--band) 0;position:relative}
.band.paper{background:var(--paper)}
.band.sage{background:var(--sage)}
.band.forest{background:var(--forest);color:var(--on-dark-soft)}
.band.forest h2,.band.forest h3{color:var(--on-dark)}
.band.tight-top{padding-top:calc(var(--band) * .45)}
.horizon{display:block;width:100%;height:clamp(28px,5vw,64px);margin:-1px 0}
.horizon path{fill:currentColor}
.h-paper{background:var(--paper)} .h-sage{background:var(--sage)} .h-forest{background:var(--forest)}
.to-paper{color:var(--paper)} .to-sage{color:var(--sage)} .to-forest{color:var(--forest)}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center}
.hero h1{max-width:13ch}
.page-hero h1{max-width:18ch}
.hero .lede{margin-bottom:1.8em}
.sunrise{position:relative;padding-top:12%}
.sunrise .arc{position:absolute;left:-9%;width:118%;top:0;overflow:visible;color:var(--teal);pointer-events:none}
.sunrise .arc path{fill:none;stroke:currentColor;stroke-width:.45;opacity:.7}
.sunrise .arc circle{fill:var(--clay)}
.sunrise .torn{position:relative;z-index:1}
.js .sunrise .arc path{stroke-dasharray:180;stroke-dashoffset:180;animation:draw 2s .3s cubic-bezier(.4,0,.2,1) forwards}
.js .sunrise .arc circle{opacity:0;animation:rise 1s 1.7s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hero .wrap{position:relative;z-index:1}
@media (max-width: 860px){.sunrise{max-width:420px;margin:12px auto 0}}
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1,.page-hero h1{max-width:none}
}

.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 1.8em;font-size:1rem}
.facts dt{color:var(--ink-soft)}
.facts dd{margin:0;color:var(--ink)}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 24px;border-radius:999px;font:inherit;font-weight:700;font-size:1.02rem;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn-primary{background:var(--forest);color:var(--on-dark)}
.btn-primary:hover{background:var(--teal-ink);color:#fff}
.btn-quiet{border-color:var(--forest);color:var(--heading);background:transparent}
.btn-quiet:hover{background:var(--sage)}
.band.forest .btn-primary{background:var(--on-dark);color:var(--forest)}
.band.forest .btn-primary:hover{background:#fff}
.band.forest .btn-quiet{border-color:var(--on-dark-soft);color:var(--on-dark)}
.band.forest .btn-quiet:hover{background:rgba(255,255,255,.08)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-primary{background:var(--teal);color:#0F1A17}
  :root:not([data-theme="light"]) .btn-quiet{border-color:var(--teal);color:var(--heading)}
}

/* ---------- torn-edge photo frame ---------- */
.torn{position:relative}
.torn .photo{aspect-ratio:4/3.3;background:var(--sage-deep);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;position:relative}
.torn img{width:100%;height:100%;object-fit:cover}
.photo svg{position:absolute;inset:0;width:100%;height:100%}
.photo .hill-a{fill:var(--teal);opacity:.35}
.photo .hill-b{fill:var(--forest);opacity:.28}
.photo .sun{fill:var(--clay);opacity:.75}
.photo figcaption{position:relative;margin:0;padding:14px 22px 26px;font-size:.92rem;color:var(--heading);max-width:30ch}
.photo figcaption b{display:block;font-weight:700}

/* ---------- layout helpers ---------- */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,88px);align-items:start}
.split.reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media (max-width: 860px){.split,.split.reverse{grid-template-columns:1fr}}
.stack>*+*{margin-top:1.1em}
.section-intro{max-width:40rem;margin-bottom:clamp(28px,4vw,48px)}

/* ---------- school chooser ---------- */
.schools{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px)}
.school{border-top:3px solid var(--teal);padding-top:22px}
.school h3{font-size:1.65rem;font-weight:500;margin-bottom:.35em}
.school address{font-style:normal;color:var(--ink-soft);font-size:1rem;margin-bottom:1em}
.school .go{font-weight:700;display:inline-flex;min-height:44px;align-items:center}
@media (max-width: 760px){.schools{grid-template-columns:1fr}}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.values h3{padding-bottom:.5em;margin-bottom:.6em;border-bottom:1px solid var(--line)}
.values p{font-size:1.02rem}
@media (max-width: 960px){.values{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.values{grid-template-columns:1fr}}

/* ---------- quote ---------- */
.quote{margin:0;max-width:44rem}
.quote p{font-family:var(--serif);font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.28;color:var(--heading);font-weight:400;font-style:italic;font-variation-settings:"SOFT" 100;position:relative}
.quote p::before{content:"\201C";color:var(--clay);font-style:normal;position:absolute;left:-.6em;top:-.12em;font-size:1.4em;line-height:1}
.quote footer{margin-top:1em;color:var(--ink-soft);font-size:1rem}
@media (max-width: 700px){.quote p::before{position:static;display:block;height:.55em}}

/* ---------- steps (genuine sequences only) ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px);counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-top:64px}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;top:0;left:0;font-family:var(--serif);font-size:1.5rem;color:var(--teal-ink);width:48px;height:48px;border-radius:50%;border:1.5px solid var(--teal);display:grid;place-items:center;background:inherit}
.steps li::after{content:"";position:absolute;top:24px;left:58px;right:-24px;height:1.5px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps h3{font-size:1.2rem;margin-bottom:.35em}
.steps p{font-size:1.02rem}
@media (max-width: 860px){
  .steps{grid-template-columns:1fr;gap:0}
  .steps li{padding:0 0 28px 72px}
  .steps li::after{top:54px;bottom:0;left:24px;right:auto;width:1.5px;height:auto}
}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(20px,3vw,36px);list-style:none;padding:0;margin:0}
.person{border-top:1px solid var(--line);padding-top:18px}
.person h3{margin-bottom:.1em}
.person .role{color:var(--teal-ink);font-weight:700;font-size:1rem;margin-bottom:.6em}
.person p{font-size:1.02rem}

/* ---------- lists ---------- */
.ticks{list-style:none;padding:0;margin:0 0 1.2em}
.ticks li{position:relative;padding-left:30px;margin-bottom:.6em}
.ticks li::before{content:"";position:absolute;left:4px;top:.62em;width:12px;height:12px;border-radius:50%;border:2px solid var(--teal)}
.subjects{columns:2;column-gap:32px;padding:0;margin:0;list-style:none}
.subjects li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--line)}

/* ---------- figures ---------- */
.figures{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:1.6em 0 1em;max-width:34rem}
.figure b{display:block;font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:400;color:var(--heading);line-height:1}
.figure span{display:block;margin-top:8px;font-size:1rem;color:var(--ink-soft)}

/* ---------- term dates ---------- */
.terms{width:100%;border-collapse:collapse;font-size:1.02rem;max-width:34rem}
.terms th,.terms td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.terms th{font-weight:700;color:var(--heading);padding-right:20px}
.download{display:flex;gap:16px;align-items:center;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);max-width:30rem;margin-bottom:28px}
.download:hover{border-color:var(--teal)}
.download svg{width:30px;height:30px;flex:none;color:var(--teal-ink)}
.download b{display:block;color:var(--heading)}
.download span{font-size:.95rem;color:var(--ink-soft)}

/* ---------- policies ---------- */
.policy-list{list-style:none;padding:0;margin:0;max-width:48rem;border-top:1px solid var(--line)}
.policy-list li{border-bottom:1px solid var(--line)}
.policy-list a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 4px;text-decoration:none;color:var(--ink);min-height:56px}
.policy-list a:hover{background:var(--sage)}
.policy-list .name{font-weight:700;color:var(--heading)}
.policy-list .meta{font-size:.92rem;color:var(--ink-soft);white-space:nowrap}

/* ---------- vacancy ---------- */
.role-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,34px);max-width:46rem}
.role-card .school-tag{display:inline-block;font-size:.9rem;font-weight:700;color:var(--teal-ink);margin-bottom:.4em}
.role-card dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 24px;margin:1.2em 0 1.4em}
.role-card dt{font-size:.9rem;color:var(--ink-soft)}
.role-card dd{margin:0;font-weight:700;color:var(--heading)}
.empty{border:1.5px dashed var(--line);border-radius:18px;padding:clamp(22px,3vw,34px);max-width:46rem;margin-top:24px}
.empty h3{margin-bottom:.3em}

/* ---------- contact ---------- */
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,40px)}
.contact-card{border-top:3px solid var(--teal);padding-top:20px}
.contact-card address{font-style:normal;margin-bottom:1em}
.contact-card .line{display:flex;gap:10px;align-items:center;min-height:40px}
.contact-card .line svg{width:18px;height:18px;color:var(--teal-ink);flex:none}
@media (max-width: 760px){.contact-cards{grid-template-columns:1fr}}
.notice{border-left:4px solid var(--clay);background:var(--card);padding:18px 22px;border-radius:0 12px 12px 0;max-width:46rem}
.notice h3{font-size:1.15rem;margin-bottom:.3em}

form.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;max-width:48rem}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label,.field legend{font-weight:700;color:var(--heading);font-size:1rem}
.field .hint{font-size:.92rem;color:var(--ink-soft);margin-top:-2px}
.field input,.field select,.field textarea{font:inherit;font-size:1.05rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;min-height:50px;width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal-ink);outline:3px solid color-mix(in srgb,var(--teal) 35%,transparent);outline-offset:0}
.field .error{color:#A3401B;font-size:.95rem;font-weight:700;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#A3401B}
.field.invalid .error{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .field .error{color:#F0A27C}}
.form-status{grid-column:1/-1;padding:16px 20px;border-radius:12px;background:var(--sage-deep);color:var(--heading)}
.form-status[hidden]{display:none}
.hp{position:absolute;left:-5000px}
@media (max-width: 640px){form.enquiry{grid-template-columns:1fr}}

/* ---------- to-confirm marker ---------- */
.todo{background:color-mix(in srgb,var(--clay) 18%,transparent);color:inherit;border-bottom:1.5px dashed var(--clay);padding:0 .2em;border-radius:3px}

/* ---------- CTA + footer ---------- */
.cta h2{max-width:20ch}
.cta p{max-width:34rem;margin-bottom:1.6em}
.site-footer{background:var(--forest);color:var(--on-dark-soft);padding:clamp(40px,6vw,72px) 0 32px;font-size:1rem}
.site-footer a{color:var(--on-dark)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.site-footer h2{font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--on-dark);margin:0 0 .8em;letter-spacing:0}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.5em}
.site-footer address{font-style:normal}
.foot-brand{font-family:var(--serif);font-size:1.5rem;color:var(--on-dark);margin-bottom:.4em}
.foot-base{margin-top:40px;padding-top:20px;border-top:1px solid rgba(247,242,233,.15);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.92rem}
@media (max-width: 900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.foot-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .sunrise .arc path{stroke-dashoffset:0}
  .js .sunrise .arc circle{opacity:1}
}
@media print{.safebar,.site-header,.site-footer,.horizon,.sunrise .arc{display:none}}

/* ---------- school logo ---------- */
.logo{display:inline-flex;align-items:center;gap:12px}
.logo .logo-mark{width:auto;height:54px;flex:none}
.logo-words{display:flex;flex-direction:column;line-height:1;font-family:"Montserrat",var(--sans)}
.logo-name{font-weight:300;font-size:1.9rem;letter-spacing:.09em;color:var(--logo-ink,#6E7174)}
.logo-sub{font-weight:500;font-size:.66rem;letter-spacing:.45em;color:var(--logo-ink,#6E7174);margin-top:6px;padding-left:.12em}
.site-header{--logo-gap:var(--paper)}
.logo-chip{display:inline-flex;background:#fff;border-radius:16px;padding:12px 18px 12px 14px;--logo-gap:#fff;--logo-ink:#74777A}
.logo-chip .logo-name{font-size:1.6rem}
.logo-chip .logo .logo-mark{width:auto;height:46px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .site-header{--logo-ink:#C5C9CD}}
@media (max-width:560px){.logo-name{font-size:1.55rem}.logo .logo-mark{width:auto;height:46px}}
.site-footer .foot-brand{margin-bottom:1em}

/* ---------- reading options ---------- */
.safebar-row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.safebar-row p{margin:0}
.a11y-toggle{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.95rem;font-weight:700;color:inherit;background:rgba(255,255,255,.14);border:1.5px solid currentColor;border-radius:999px;padding:6px 14px;min-height:40px;cursor:pointer}
.a11y-toggle svg{width:20px;height:20px}
.a11y-toggle[aria-expanded="true"]{background:rgba(255,255,255,.3)}
.a11y-panel{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);font-weight:400}
.a11y-panel .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;padding-top:14px;padding-bottom:16px}
.a11y-title{margin:0;font-weight:700;color:var(--heading);width:100%}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.switch input{appearance:none;width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background-color .2s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.switch input:checked{background:var(--teal-ink)}
.switch input:checked::after{transform:translateX(18px)}
.switch input:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
html.a11y-large{font-size:118%}
html.a11y-spacing body{letter-spacing:.04em;word-spacing:.14em}
html.a11y-spacing p,html.a11y-spacing li,html.a11y-spacing dd{line-height:2}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none!important;transition:none!important}
html.a11y-still .door{transform:none!important}
html.a11y-contrast{--ink:#000;--ink-soft:#1a1a1a;--line:#555;--teal-ink:#003d33}
html.a11y-contrast .page-hero,html.a11y-contrast .hero-b{--ink:#fff;--ink-soft:#f0f0f0}
html.a11y-contrast a{text-decoration-thickness:2px}

/* ---------- staff display cards ---------- */
.person{display:flex;flex-direction:column;gap:0;border-top:0;padding-top:0;overflow:hidden}
.person-photo{position:relative;aspect-ratio:4/4.5;display:grid;place-items:center;overflow:hidden}
.person-photo img{width:100%;height:100%;object-fit:cover}
.person-photo.mint{background:#CFE3DB}.person-photo.sun{background:#F6E3B0}.person-photo.sky{background:#CBD9E8}.person-photo.sage{background:#DDE3D3}
.person-initials{font-family:var(--serif);font-size:2.8rem;color:var(--heading);opacity:.55}
.person-photo-note{position:absolute;bottom:10px;left:12px;font-size:.78rem;color:var(--heading);opacity:.75}
.person-body{padding:18px 22px 24px}

/* ---------- subject highlight grid ---------- */
.subject-grid{list-style:none;padding:0;margin:0 0 1.6em;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.subject-grid li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-weight:700;color:var(--heading);font-size:1rem}
.subject-grid li.s-lead{background:var(--sage-deep);border-color:transparent}
.programmes{display:grid;gap:14px}
.programmes>div{border-left:3px solid var(--teal);padding-left:16px}
.programmes h3{font-size:1.1rem;margin-bottom:.2em}
.programmes p{font-size:1rem;margin:0}

/* ---------- news cards ---------- */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.proj-card{background:var(--card);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.proj-card:hover,.proj-card:focus{transform:translateY(-8px);box-shadow:0 26px 44px -30px rgba(31,59,54,.6);outline:none}
.proj-card:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
.proj-photo{aspect-ratio:4/2.6;display:flex;align-items:flex-end;padding:14px;font-size:.85rem;color:var(--heading);transition:transform .5s ease}
.proj-card:hover .proj-photo{transform:scale(1.04)}
.proj-card.mint .proj-photo{background:#CFE3DB}.proj-card.sun .proj-photo{background:#F6E3B0}.proj-card.sky .proj-photo{background:#CBD9E8}
.proj-body{padding:20px 22px 24px}
.proj-tag{margin:0 0 .3em;font-size:.85rem;font-weight:700;color:var(--teal-ink)}
.proj-body h3{margin-bottom:.35em}
.proj-date{margin:.8em 0 0;font-size:.9rem;color:var(--ink-soft)}
html.a11y-still .proj-card,html.a11y-still .proj-photo{transform:none!important}

/* ---------- weekly timetable ---------- */
.tt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.timetable{border-collapse:collapse;width:100%;min-width:1100px;font-size:.92rem}
.timetable caption{text-align:left;padding:16px 18px;font-weight:700;color:var(--heading);font-size:1rem}
.timetable th,.timetable td{border:1px solid var(--line);padding:10px 12px;vertical-align:top;text-align:left}
.timetable thead th{background:var(--sage);color:var(--heading);position:sticky;top:0}
.tt-slot{display:block;font-weight:700}
.tt-time{display:block;font-weight:400;font-size:.82rem;color:var(--ink-soft);margin-top:2px}
.timetable tbody th{background:var(--sage);color:var(--heading);white-space:nowrap}
.tt-break{background:var(--sage-deep);color:var(--ink-soft);text-align:center;font-size:.85rem;width:70px}
.tt-quiet{background:var(--card);color:var(--ink-soft);font-size:.88rem;width:120px}

.person-photo.has-photo{background:var(--sage-deep)}
.person-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Theme B: Two doors ===== */
:root{
  --paper:#FFFDF8; --sage:#E6F1EC; --sage-deep:#CFE3DB; --forest:#1F3B36; --heading:#1F3B36;
  --ink:#1E2B28; --ink-soft:#4A5A55; --teal:#2E8A7B; --teal-ink:#1F5B52; --clay:#F2C14E;
  --line:#D5E2DC; --on-dark:#FFFDF8; --on-dark-soft:#CFE3DB; --card:#FFFFFF; --sun:#F2C14E; --sun-soft:#F6E3B0;
  --serif:"Bricolage Grotesque","Atkinson Hyperlegible",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121C1A; --sage:#182623; --sage-deep:#24413A; --forest:#0D1715; --heading:#F4F1E6;
    --ink:#D9E3DF; --ink-soft:#A6B6B0; --teal:#6CC3B2; --teal-ink:#F2C14E; --line:#2C3D39; --card:#1B2926; --sun-soft:#5A4A1E;
  }
}
:root[data-theme="dark"]{
  --paper:#121C1A; --sage:#182623; --sage-deep:#24413A; --forest:#0D1715; --heading:#F4F1E6;
  --ink:#D9E3DF; --ink-soft:#A6B6B0; --teal:#6CC3B2; --teal-ink:#F2C14E; --line:#2C3D39; --card:#1B2926; --sun-soft:#5A4A1E;
}
h1,h2,h3{font-variation-settings:normal;font-weight:800;letter-spacing:-.03em}
h1{font-size:clamp(2.6rem,6vw,5.2rem);line-height:.98}
h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.04}
h3{font-weight:700;letter-spacing:-.01em}

/* safety bar + header */
.safebar{background:var(--sun);color:#1E2B28;font-weight:700}
.safebar a,.safebar strong{color:#1E2B28}
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--sun)}
.nav .nav-cta{background:var(--sun);color:#1E2B28;border-radius:999px}
.nav .nav-cta:hover{background:#FFD774;color:#1E2B28}
/* dark hero areas */
.band.page-hero,.page-hero,.hero-b{background:var(--forest);color:var(--ink);
  --heading:#FFFDF8; --ink:#CFE3DB; --ink-soft:#AFC7BE; --teal-ink:#F2C14E; --line:rgba(255,255,255,.18)}
.page-hero .btn-primary,.hero-b .btn-primary{background:var(--sun);color:#1E2B28}
.page-hero .btn-primary:hover{background:#FFD774}
.page-hero .btn-quiet{border-color:#CFE3DB;color:#FFFDF8}
.page-hero .btn-quiet:hover{background:rgba(255,255,255,.08)}
.page-hero .contact-card{border-top-color:var(--sun)}
.page-hero .contact-card svg{color:var(--sun)}

/* home hero with doors */
.hero-b{padding:clamp(40px,6vw,72px) 0 0;overflow:hidden}
.hero-b-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:end}
.hero-b-text{padding-bottom:clamp(40px,7vw,104px)}
.hero-b h1{margin-bottom:.35em}
.hero-b .lede{color:#CFE3DB}
.hero-b .hint{color:#CFE3DB;font-size:1rem}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.door{display:flex;flex-direction:column;background:#FFFDF8;border-radius:999px 999px 0 0;overflow:hidden;text-decoration:none;color:#1E2B28;transition:transform .25s ease}
.door:hover{transform:translateY(-6px)}
.door:focus-visible{outline-color:var(--sun)}
.door-photo{height:clamp(200px,24vw,300px);display:flex;align-items:flex-end;justify-content:center;padding:18px;font-size:.88rem;color:#1F3B36;text-align:center}
.door-photo.mint{background:#CFE3DB}.door-photo.sun{background:#F6E3B0}
.door-body{padding:22px 22px 30px;display:flex;flex-direction:column;gap:4px}
.door-name{font-family:var(--serif);font-weight:800;font-size:1.6rem;line-height:1.05;letter-spacing:-.02em}
.door-addr{font-size:.95rem;color:#4A5A55;margin-bottom:10px}
.door-go{font-weight:700;color:#1F5B52;text-decoration:underline}
@media (max-width:860px){
  .hero-b-grid{grid-template-columns:1fr}
  .hero-b-text{padding-bottom:0}
}
@media (max-width:480px){.doors{grid-template-columns:1fr}.door{border-radius:200px 200px 0 0}}

/* arch photo frames */
.arch .arch-photo{aspect-ratio:4/4.4;border-radius:999px 999px 24px 24px;display:flex;align-items:flex-end;justify-content:center;padding:24px;text-align:center;font-size:.92rem;color:#1F3B36}
.arch.mint .arch-photo{background:#CFE3DB}.arch.sun .arch-photo{background:#F6E3B0}
.arch b{display:block}
.arch{max-width:440px;margin-left:auto}
@media (max-width:860px){.arch{margin:0 auto;max-width:360px}}

/* components */
.btn-primary{background:var(--forest)}
.values>div{background:var(--card);border-radius:24px;padding:28px}
.values h3{border-bottom:0;padding-bottom:0;font-size:1.45rem}
.quote p{font-family:var(--serif);font-style:normal;font-weight:700;letter-spacing:-.02em}
.quote p::before{color:var(--teal)}
.steps li::before{background:var(--sun);border:0;color:#1E2B28;font-family:var(--serif);font-weight:800;font-size:1.1rem}
.steps li::after{background:var(--sun);height:3px;border-radius:2px}
.person{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:0;overflow:hidden}
.subjects li{border-bottom-color:var(--line)}
.download,.role-card,.empty,.notice{border-radius:24px}
.notice{border-left:0;background:var(--sun-soft)}
.contact-card{border-top-color:var(--teal)}
.figure b{font-family:var(--serif);font-weight:800}
.policy-list a:hover{background:var(--sage)}
.ticks li::before{border-color:var(--teal);background:var(--sun)}

/* yellow CTA block */
.cta .wrap{background:var(--sun);border-radius:32px;padding:clamp(32px,5vw,64px);max-width:none;margin-inline:max(var(--gutter),calc((100% - var(--maxw))/2));
  --heading:#1E2B28; --ink:#1E2B28}
.cta .btn-primary{background:#1E2B28;color:#FFFDF8}
.cta .btn-primary:hover{background:#000}
.cta .btn-quiet{border-color:#1E2B28;color:#1E2B28}
.cta .btn-quiet:hover{background:rgba(0,0,0,.06)}

.site-footer{background:#1F3B36}
.foot-brand{font-family:var(--serif);font-weight:800;letter-spacing:-.03em}

/* ===== 3D pieces (themes B and C) ===== */
.hero-b{position:relative}
.scene-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.hero-b .wrap{position:relative;z-index:1}
.door{transition:transform .35s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;will-change:transform}
.scene-frame{position:relative}
.scene-frame canvas{position:relative;display:block;width:100%;aspect-ratio:4/3.6;border-radius:32px;background:linear-gradient(180deg,#CFE6F7 0%,#EEF6FC 70%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .scene-frame canvas{background:linear-gradient(180deg,#1C2C4E 0%,#131D33 70%)}}

/* coverflow */
.cf-band{background:var(--forest);color:var(--on-dark-soft);--heading:var(--on-dark);--ink:var(--on-dark-soft);overflow:hidden}
.coverflow{position:relative;outline-offset:8px}
.cf-stage{position:relative;height:clamp(320px,34vw,420px);perspective:1400px;transform-style:preserve-3d}
.cf-card{position:absolute;left:50%;top:0;width:clamp(210px,24vw,290px);margin:0 0 0 calc(clamp(210px,24vw,290px) / -2);border-radius:24px;overflow:hidden;background:var(--card);color:var(--ink);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease,filter .6s ease;cursor:pointer;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.cf-card.is-active{cursor:default}
.cf-photo{aspect-ratio:4/3.8;background:var(--sage-deep);display:flex;align-items:flex-end;padding:14px;font-size:.85rem;color:#1F3B36}
.cf-card:nth-child(3n+2) .cf-photo{background:#F6E3B0}
.cf-card:nth-child(3n) .cf-photo{background:#C9D3E3}
.cf-card{text-decoration:none;color:inherit;display:block}
.cf-caption{padding:16px 18px 20px;display:flex;flex-direction:column;background:var(--card)}
.cf-photo{display:flex}
.cf-go{margin-top:10px;font-weight:700;font-size:.92rem;color:var(--teal-ink);text-decoration:underline;opacity:0;transition:opacity .3s}
.cf-card.is-active .cf-go{opacity:1}
.cf-title{font-family:var(--serif);font-weight:700;font-size:1.25rem;color:#1E2B28;line-height:1.2}
.cf-sub{font-size:.95rem;color:#4A5A55}
.cf-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.cf-controls button{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:var(--on-dark);cursor:pointer;display:grid;place-items:center}
.cf-controls button:hover{background:rgba(255,255,255,.1)}
.cf-controls svg{width:22px;height:22px}
.cf-status{margin:0;min-width:16ch;text-align:center;font-size:.95rem;color:var(--on-dark-soft)}

.scene-doors{margin-top:clamp(20px,3vw,36px)}
.scene-doors canvas{display:block;width:100%;aspect-ratio:1/.92;border-radius:28px;background:linear-gradient(180deg,#E6F1EC 0%,#FFFDF8 80%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .scene-doors canvas{background:linear-gradient(180deg,#1C302B 0%,#121C1A 80%)}}

/* 3D symbols for the values */
.values{position:relative}
#scene-values{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.values>div{position:relative;z-index:1}
.value-icon{display:block;height:132px;margin:0 0 16px;width:100%;max-width:170px}
@media (max-width:560px){.value-icon{height:112px}}

.values>div{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.values>div:hover,.values>div:focus-within{transform:translateY(-8px);box-shadow:0 22px 40px -28px rgba(31,59,54,.55)}
html.a11y-still .values>div{transform:none!important}

/* welcome intro */
html.intro-open,html.intro-open body{overflow:hidden}
#intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;text-align:center;padding:24px;
  background:var(--paper);opacity:1;transition:opacity .6s ease}
#intro.is-going{opacity:0;pointer-events:none}
.intro-inner{display:flex;flex-direction:column;align-items:center;max-width:620px}
/* The splash mark: the real logo is drawn flat underneath, and the 3D canvas
   only takes over once it has actually painted a frame. Without this, a device
   that cannot run WebGL shows an empty gap where the logo should be. */
.intro-mark{position:relative;width:min(300px,62vw);height:min(300px,62vw);margin:0 auto}
#scene-logo,.intro-mark .intro-logo{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-mark .intro-logo{padding:4%}
#intro.has-3d .intro-mark .intro-logo{display:none}
.intro-word{margin:8px 0 0;font-size:1.05rem;color:var(--ink-soft);letter-spacing:.14em;text-transform:uppercase;
  opacity:0;animation:introIn .6s .5s ease forwards}
.intro-name{margin:.1em 0 .4em;font-family:var(--serif);font-weight:800;letter-spacing:-.03em;color:var(--heading);
  font-size:clamp(2rem,5.5vw,3.4rem);line-height:1.05;opacity:0;animation:introIn .6s .7s ease forwards}
.intro-sub{margin:0 0 28px;max-width:32rem;color:var(--ink);opacity:0;animation:introIn .6s .9s ease forwards}
.intro-enter{font:inherit;font-weight:700;font-size:1.05rem;background:var(--forest);color:var(--on-dark);border:0;
  border-radius:999px;padding:15px 32px;min-height:52px;cursor:pointer;opacity:0;animation:introIn .6s 1.05s ease forwards}
.intro-enter:hover{background:var(--teal-ink);color:#fff}
@keyframes introIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){#intro{display:none}}

/* photo galleries */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:clamp(28px,4vw,44px)}
.shot{border:0;padding:0;aspect-ratio:4/3;border-radius:16px;cursor:pointer;display:flex;align-items:flex-end;font:inherit;font-size:.85rem;color:var(--heading);overflow:hidden;transition:transform .3s ease}
.shot span{padding:12px}
.shot img{width:100%;height:100%;object-fit:cover}
.shot:hover{transform:scale(1.03)}
.shot.t0{background:#CFE3DB}.shot.t1{background:#F6E3B0}.shot.t2{background:#CBD9E8}.shot.t3{background:#DDE3D3}
html.a11y-still .shot{transform:none!important}
.lightbox{position:fixed;inset:0;z-index:180;background:rgba(15,26,23,.82);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox-inner{background:var(--card);border-radius:22px;padding:18px;max-width:min(900px,92vw);display:flex;flex-direction:column;gap:14px;align-items:center}
.lightbox-shot{width:min(820px,84vw);aspect-ratio:4/3;background:var(--sage-deep);border-radius:14px;display:grid;place-items:center;overflow:hidden}
.lightbox-shot img{width:100%;height:100%;object-fit:contain}
.lightbox-note{margin:0;color:var(--heading)}
.lightbox-close{font:inherit;font-weight:700;background:var(--forest);color:var(--on-dark);border:0;border-radius:999px;padding:12px 26px;min-height:48px;cursor:pointer}

/* readability fixes */
.todo{color:#3A2A14}
.page-hero .todo,.hero-b .todo,.band.forest .todo{color:#FFF4E4}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .todo{color:#F6E6D2}}
:root[data-theme="dark"] .todo{color:#F6E6D2}

/* readability: inherited colour on tinted panels, fixed-pastel surfaces */
.cta .wrap{color:var(--ink)}
.person-photo-note{color:#1F3B36;opacity:.85}
.proj-photo,.proj-photo span,.shot,.shot span{color:#1F3B36}
.cf-title{color:var(--heading)}
.cf-sub{color:var(--ink-soft)}
.nav .nav-cta[aria-current="page"]{color:#1E2B28}

/* carousel: fixed pastel panel, caption follows the card not the band */
.cf-photo{background:#CFE3DB}
.cf-card:nth-child(3n+2) .cf-photo{background:#F6E3B0}
.cf-card:nth-child(3n) .cf-photo{background:#C9D3E3}
.cf-title{color:#1E2B28}
.cf-sub{color:#4A5A55}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cf-title{color:#F4F1E6}
  :root:not([data-theme="light"]) .cf-sub{color:#A6B6B0}
}
:root[data-theme="dark"] .cf-title{color:#F4F1E6}
:root[data-theme="dark"] .cf-sub{color:#A6B6B0}

/* ---------- policies: read in page or download ---------- */
.policy-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 4px;min-height:64px}
.policy-list li:hover{background:var(--sage)}
.policy-list .name{font-weight:700;color:var(--heading);flex:1 1 16rem}
.policy-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pbtn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:1rem;font-weight:700;
  min-height:44px;padding:9px 18px;border-radius:999px;cursor:pointer;text-decoration:none;
  border:1.5px solid var(--forest);background:transparent;color:var(--heading);white-space:nowrap}
.pbtn svg{width:19px;height:19px;flex:none}
.pbtn-read{background:var(--forest);color:var(--on-dark);border-color:var(--forest)}
.pbtn-read:hover{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.pbtn-dl:hover{background:var(--sage-deep)}
.pdf-size{font-size:.88rem;color:var(--ink-soft);white-space:nowrap;min-width:0}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pbtn{border-color:var(--teal);color:var(--heading)}
  :root:not([data-theme="light"]) .pbtn-read{background:var(--teal);color:#0F1A17;border-color:var(--teal)}
}
:root[data-theme="dark"] .pbtn{border-color:var(--teal);color:var(--heading)}
:root[data-theme="dark"] .pbtn-read{background:var(--teal);color:#0F1A17;border-color:var(--teal)}
@media (max-width:560px){
  .policy-list li{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;min-height:0}
  .policy-list .name{flex:0 0 auto}
  .policy-actions{width:100%;align-items:center}
  .pbtn-read,.pbtn-dl{flex:1 1 0;justify-content:center}
  .pdf-size{flex:0 0 100%}
}

/* the reader */
.reader{position:fixed;inset:0;z-index:190;background:rgba(15,26,23,.86);display:flex;
  flex-direction:column;padding:clamp(12px,3vw,28px);gap:12px}
.reader[hidden]{display:none}
.reader-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;
  background:var(--card);border-radius:16px;padding:12px 16px}
.reader-title{margin:0;font-family:var(--serif);font-size:1.15rem;color:var(--heading);flex:1 1 14rem;line-height:1.25}
.reader-acts{display:flex;gap:10px;flex-wrap:wrap}
.reader-frame{flex:1;min-height:0;background:var(--sage-deep);border-radius:16px;overflow:hidden;position:relative}
.reader-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.reader-msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:28px}
.reader-msg[hidden]{display:none}
.reader-msg div{max-width:34rem;background:var(--card);border-radius:18px;padding:clamp(24px,4vw,36px)}
.reader-msg h3{margin:0 0 .4em}
.reader-msg p{margin:0 0 1em;color:var(--ink)}
.reader-msg p:last-child{margin-bottom:0}

html.reader-open,html.reader-open body{overflow:hidden}

/* ===== phone layout ===== */
h1[tabindex="-1"]:focus{outline:none}
.tt-daily{display:none}

@media (max-width:700px){
  /* timetable becomes a card per day */
  .tt-daily{display:block;max-width:34rem;margin:0 0 18px;padding:14px 16px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:1rem}
  .tt-wrap{border:0;background:transparent;overflow:visible}
  .timetable{min-width:0;width:100%;display:block}
  .timetable caption{padding:0 0 12px}
  .timetable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .timetable tbody,.timetable tr,.timetable td,.timetable th{display:block;border:0}
  .timetable tr{background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:6px 16px 12px;margin-bottom:14px}
  .timetable tbody th{background:transparent;font-family:var(--serif);font-size:1.3rem;
    color:var(--heading);padding:10px 0 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .timetable td{padding:9px 0;display:flex;flex-direction:column;gap:2px;
    border-bottom:1px solid var(--line)}
  .timetable tr td:last-of-type{border-bottom:0}
  .timetable td::before{content:attr(data-p);font-size:.82rem;font-weight:700;
    color:var(--teal-ink);letter-spacing:.02em}
  .timetable td[data-p=""]::before,.timetable td:not([data-p])::before{content:none}
  .tt-reset,.tt-quiet{display:none!important}
  .timetable .tt-break{background:transparent;color:var(--ink-soft);text-align:left;width:auto;font-size:.95rem}

  /* galleries: two across instead of one */
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

  /* carousel becomes a swipe strip */
  .cf-stage{display:flex;height:auto;perspective:none;transform-style:flat;
    overflow-x:auto;overflow-y:hidden;gap:14px;padding:4px 0 10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .cf-stage::-webkit-scrollbar{display:none}
  .cf-card{position:static!important;transform:none!important;opacity:1!important;
    filter:none!important;margin:0!important;width:auto!important;
    flex:0 0 76%;scroll-snap-align:center;box-shadow:0 14px 30px -20px rgba(0,0,0,.5)}
  .cf-card:first-child{margin-left:12%!important}
  .cf-card:last-child{margin-right:12%!important}
  .cf-go{opacity:1!important}
  .cf-controls{margin-top:16px}
  .cf-status{min-width:0;flex:1 1 auto}
}

@media (max-width:860px){
  .hero-b{padding-top:132px}
  .scene-bg{height:118px;bottom:auto;top:14px}
}

@media (max-width:700px){
  .timetable caption{display:block;width:100%;text-align:left}
  .timetable td.tt-break{font-size:0;padding:6px 0}
  .timetable td.tt-break::before{font-size:.82rem;color:var(--ink-soft);font-weight:400}
}

/* long emails and addresses must not force the page wider */
.contact-card address,.contact-card .line,.site-footer address,.foot-grid a{overflow-wrap:anywhere}

/* ---- subject illustrations (added with the share card) ---- */
.cf-photo.has-art{padding:0;align-items:stretch;overflow:hidden}
.cf-photo.has-art img{width:100%;height:100%;object-fit:cover;display:block}
.cf-card:nth-child(3n+2) .cf-photo.has-art,
.cf-card:nth-child(3n) .cf-photo.has-art{background:transparent}

.subject-art{display:block;width:100%;max-width:216px;height:auto;margin:20px 0 0;
  border-radius:18px;border:1px solid var(--line)}
@media (max-width:860px){
  .subject-art{max-width:168px;margin-top:16px}
}
@media (prefers-reduced-motion:no-preference){
  .cf-card:hover .cf-photo.has-art img{transform:scale(1.03);transition:transform .45s ease}
  .cf-photo.has-art img{transition:transform .45s ease}
}

/* ---- empty photo slots: read as reserved, not broken ---- */
.shot:not(:has(img)){
  aspect-ratio:3/2;
  background:transparent!important;
  border:2px dashed rgba(31,59,54,.30);
  align-items:center;justify-content:center;
  color:#4A5A55;
  font-size:.8rem;letter-spacing:.04em;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .shot:not(:has(img)){
    border-color:rgba(255,255,255,.26);color:#A6B6B0}
}
:root[data-theme="dark"] .shot:not(:has(img)){
  border-color:rgba(255,255,255,.26);color:#A6B6B0}
/* the fixed dark span colour is only right over a pale photo tint */
.shot:not(:has(img)) span{color:inherit}
.shot:not(:has(img)):hover{transform:none;cursor:default}
.shot:not(:has(img)) span{padding:10px;text-align:center}
@supports not selector(:has(img)){
  .shot{aspect-ratio:4/3}
}
@media (max-width:700px){
  .shot:not(:has(img)){aspect-ratio:2/1}
}

/* ---- value icons: flat drawings behind the 3D, shown if it never starts ---- */
.value-icon{background-repeat:no-repeat;background-position:left center;background-size:contain}
.value-icon[data-icon="0"]{background-image:url("images/values/providing-support.svg")}
.value-icon[data-icon="1"]{background-image:url("images/values/building-resilience.svg")}
.value-icon[data-icon="2"]{background-image:url("images/values/creating-opportunity.svg")}
.value-icon[data-icon="3"]{background-image:url("images/values/enabling-achievement.svg")}
.values.is-3d .value-icon{background-image:none}

/* ---- real photographs in the door cards and arch frames ---- */
.door-photo.has-photo,.arch .arch-photo.has-photo{padding:0;display:block;overflow:hidden}
.door-photo.has-photo img,.arch .arch-photo.has-photo img{width:100%;height:100%;
  object-fit:cover;display:block}
.arch .arch-photo.has-photo{border-radius:999px 999px 24px 24px}
.proj-photo.has-photo{padding:0;display:block;overflow:hidden}
.proj-photo.has-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- school page banner -------------------------------------------------
   A full-bleed photo of the building with the school name over it. The
   section carries a dark background of its own (--forest is dark in BOTH
   themes) so the text keeps a known base even before the photo paints. */
.school-banner{position:relative;isolation:isolate;overflow:hidden;
  background:var(--forest);display:flex;align-items:flex-end;
  min-height:clamp(260px,46vh,470px)}
.school-banner>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--focal,50% 46%);z-index:-2}
/* the scrim: heavy at the foot where the words sit, clear at the top */
.school-banner::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(10,18,16,.97) 0%, rgba(10,18,16,.92) 22%,
    rgba(10,18,16,.72) 44%, rgba(10,18,16,.34) 70%, rgba(10,18,16,.08) 100%)}
.school-banner-text{padding-block:clamp(56px,12vw,120px) clamp(22px,4vw,44px);
  width:100%}
.school-banner .banner-eyebrow{margin:0 0 .65em;color:var(--sun);
  font-family:var(--sans);font-size:clamp(.66rem,1.5vw,.78rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.5}
.school-banner h1{margin:0;color:#FFFDF8;max-width:16ch;
  font-size:clamp(2.1rem,6.4vw,4.1rem);line-height:1.02;letter-spacing:-.02em;
  text-wrap:balance}
@media (max-width:640px){
  .school-banner{min-height:300px}
  .school-banner .banner-eyebrow{letter-spacing:.14em}
}
/* the hero band sits directly under the banner, so drop its top padding and
   let the two dark areas read as one block */
.school-banner + .page-hero{padding-top:clamp(26px,4vw,44px)}
/* The Classic Residences hero moves because it is a looping video. With only
   a still to work from, a slow continuous drift gives the same feeling: the
   image is held oversized so no edge can creep into frame, and it alternates
   rather than looping back to the start, so there is never a jump. */
.school-banner>img{transform-origin:50% 50%;will-change:transform;
  animation:banner-fade 1.2s ease-out both}
@media (prefers-reduced-motion:no-preference){
  .school-banner>img{animation:banner-fade 1.2s ease-out both,
                               banner-drift 30s ease-in-out 1.2s infinite alternate}
}
@keyframes banner-fade{from{opacity:0}to{opacity:1}}
@keyframes banner-drift{
  from{transform:scale(1.06) translate3d(-1%,.7%,0)}
  to{transform:scale(1.14) translate3d(1%,-1%,0)}
}
/* the street line is the first thing to go when the eyebrow would wrap */
@media (max-width:560px){ .banner-eyebrow .eb-mid{display:none} }
/* the four values read as a set, so they want narrower cells than the subjects */


/* ---- the four values ----------------------------------------------------
   Given their own dark band so they read as a statement rather than a list
   inside a paragraph. The card tints are fixed, so the words on them use a
   fixed dark ink that stays legible whatever the theme. */
.values-band .measure{margin-bottom:clamp(22px,3vw,34px)}
.values-four{list-style:none;padding:0;margin:0;display:grid;gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(4,1fr)}
.values-four li{background:var(--tint);border-radius:20px;
  padding:clamp(18px,2vw,26px) clamp(14px,1.4vw,20px) clamp(16px,1.8vw,22px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1vw,13px);
  text-align:center}
.values-four .vi{width:clamp(56px,6.2vw,84px);height:auto;display:block}
.values-four .v-name{font-family:var(--display);font-weight:700;color:#1F3B36;
  font-size:clamp(1rem,1.25vw,1.2rem);letter-spacing:-.01em;line-height:1.15}
.values-four .v-body{color:#1F3B36;font-size:.95rem;line-height:1.45}
@media (max-width:820px){.values-four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){
  .values-four{grid-template-columns:1fr;gap:10px}
  .values-four li{padding:16px 18px 18px;border-radius:16px}
  .values-four .vi{width:52px}
}

/* ---- the four values, in motion ----------------------------------------
   One pass when the band is first scrolled to, then nothing until someone
   hovers. A permanent loop in four places would be wearing to sit beside,
   which matters more than usual for the students these pages are about.
   html.a11y-still already disables every animation site-wide. */
.values-four li{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease,box-shadow .25s ease}
/* hidden only once the script is alive to reveal them again, so the cards
   are never left invisible if it fails to run */
.values-band.can-reveal .values-four li{transform:translateY(14px);opacity:0}
.values-band.can-reveal.is-seen .values-four li{transform:none;opacity:1}
.values-band.is-seen .values-four li:nth-child(2){transition-delay:.1s}
.values-band.is-seen .values-four li:nth-child(3){transition-delay:.2s}
.values-band.is-seen .values-four li:nth-child(4){transition-delay:.3s}

.values-four .vi *{transform-box:view-box}
.values-four .vi{overflow:visible}

/* each icon does the thing its value means, once, as the card arrives */
.values-band.can-reveal.is-seen .vi-support .vi-arc{animation:vi-shelter 1.1s .35s cubic-bezier(.2,.8,.3,1) both}
.values-band.can-reveal.is-seen .vi-support .vi-figL{animation:vi-lean-r 1.5s .45s ease-in-out both}
.values-band.can-reveal.is-seen .vi-support .vi-figR{animation:vi-lean-l 1.5s .45s ease-in-out both}
.values-band.can-reveal.is-seen .vi-support .vi-figM{animation:vi-arrive 1s .4s cubic-bezier(.2,.8,.3,1) both}
.values-band.can-reveal.is-seen .vi-resilience .vi-rock{animation:vi-rock 1.9s .4s cubic-bezier(.3,.7,.4,1) both}
.values-band.can-reveal.is-seen .vi-resilience .vi-tip{animation:vi-fade 1.1s .9s ease both}
.values-band.can-reveal.is-seen .vi-opportunity .vi-door{animation:vi-swing 1.2s .5s cubic-bezier(.2,.8,.3,1) both}
.values-band.can-reveal.is-seen .vi-opportunity .vi-sun{animation:vi-rise 1.2s .8s cubic-bezier(.2,.8,.3,1) both}
.values-band.can-reveal.is-seen .vi-opportunity .vi-path{animation:vi-fade 1s 1s ease both}
.values-band.can-reveal.is-seen .vi-achievement .vi-step1{animation:vi-stack .6s .45s cubic-bezier(.2,.8,.3,1) both}
.values-band.can-reveal.is-seen .vi-achievement .vi-step2{animation:vi-stack .6s .58s cubic-bezier(.2,.8,.3,1) both}
.values-band.can-reveal.is-seen .vi-achievement .vi-step3{animation:vi-stack .6s .71s cubic-bezier(.2,.8,.3,1) both}
.values-band.can-reveal.is-seen .vi-achievement .vi-star{animation:vi-pop .7s .92s cubic-bezier(.2,1.4,.4,1) both}

@keyframes vi-shelter{from{transform:scale(.55)}to{transform:none}}
.vi-support .vi-arc{transform-origin:60px 96px}
@keyframes vi-lean-l{0%,100%{transform:rotate(0)}45%{transform:rotate(-8deg)}}
@keyframes vi-lean-r{0%,100%{transform:rotate(0)}45%{transform:rotate(8deg)}}
.vi-support .vi-figL{transform-origin:30px 98px}
.vi-support .vi-figR{transform-origin:90px 98px}
@keyframes vi-arrive{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}

/* knocked off balance, then righting itself, with the swing damping out */
@keyframes vi-rock{
  0%{transform:rotate(-16deg)}
  28%{transform:rotate(12deg)}
  52%{transform:rotate(-7deg)}
  74%{transform:rotate(4deg)}
  88%{transform:rotate(-2deg)}
  100%{transform:rotate(0)}
}
.vi-resilience .vi-rock{transform-origin:60px 100px}
@keyframes vi-fade{from{opacity:0}to{opacity:.78}}

/* a 2D leaf cannot hinge in three dimensions; narrowing it from the frame
   width to its drawn width reads as the door swinging open */
@keyframes vi-swing{from{transform:scaleX(1.86)}to{transform:scaleX(1)}}
.vi-opportunity .vi-door{transform-origin:34px 62px}
@keyframes vi-rise{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}

@keyframes vi-stack{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.vi-achievement .vi-step1,.vi-achievement .vi-step2,.vi-achievement .vi-step3{transform-origin:center 102px}
@keyframes vi-pop{from{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.vi-achievement .vi-star{transform-origin:86px 28px}

/* a small acknowledgement on hover, for anyone using a mouse */
@media (hover:hover){
  .values-four li:hover{box-shadow:0 14px 28px -18px rgba(0,0,0,.55)}
  .values-four li:hover .vi{transform:scale(1.07)}
  .values-four .vi{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .values-four li{transform:none;opacity:1;transition:none}
  .values-four .vi *{animation:none!important;opacity:1!important}
}

/* the safeguarding address is one long unbreakable token; let it wrap rather
   than push the whole page sideways on a 320px screen */
/* nowrap is right for a phone number but pins the long safeguarding address
   to one line, which pushes a 320px screen sideways */
.safebar-row p{min-width:0}
.safebar a[href^="mailto:"]{white-space:normal;overflow-wrap:anywhere}

/* ---- the illustrated scenes ---------------------------------------------
   Inline rather than <img> so the stylesheet can reach the moving parts, and
   so html.a11y-still (Reading options) switches them off like everything else.
   One pass when the scene is first scrolled to; nothing after that. */
.scene{width:100%;height:100%;display:block}
.arch .arch-photo.has-photo .scene,.proj-photo.has-photo .scene{object-fit:cover}
.scene *{transform-box:view-box}

.scene.can-reveal .sc-fig{opacity:0;transform:translateY(26px)}
.scene.can-reveal .sc-bus{opacity:0;transform:translateX(130px)}
.scene.can-reveal .sc-doc,.scene.can-reveal .sc-prop{opacity:0;transform:translateY(-22px)}
.scene.can-reveal .sc-bubble{opacity:0;transform:scale(.6)}
.scene.can-reveal .sc-boat{opacity:0;transform:translateX(-150px)}
.scene.can-reveal .sc-bunting{opacity:0;transform:translateY(-18px)}

.scene.can-reveal.is-seen .sc-fig{animation:sc-rise .7s cubic-bezier(.2,.8,.3,1) both}
.scene.can-reveal.is-seen .sc-fig:nth-of-type(2){animation-delay:.1s}
.scene.can-reveal.is-seen .sc-fig:nth-of-type(3){animation-delay:.2s}
.scene.can-reveal.is-seen .sc-fig:nth-of-type(4){animation-delay:.3s}
.scene.can-reveal.is-seen .sc-fig:nth-of-type(5){animation-delay:.4s}
.scene.can-reveal.is-seen .sc-bunting{animation:sc-drop .8s cubic-bezier(.2,.9,.3,1) both}
.scene.can-reveal.is-seen .sc-bus{animation:sc-roll 1.1s cubic-bezier(.25,.8,.3,1) .25s both}
.scene.can-reveal.is-seen .sc-wheel{animation:sc-spin 1.1s linear .25s both}
.scene.can-reveal.is-seen .sc-doc{animation:sc-drop .7s cubic-bezier(.2,.8,.3,1) .45s both}
.scene.can-reveal.is-seen .sc-prop{animation:sc-drop .7s cubic-bezier(.2,.8,.3,1) .4s both}
.scene.can-reveal.is-seen .sc-prop:nth-of-type(2){animation-delay:.55s}
.scene.can-reveal.is-seen .sc-bubble{animation:sc-pop .6s cubic-bezier(.2,1.3,.4,1) .6s both}
.scene.can-reveal.is-seen .sc-boat{animation:sc-drift 1.6s cubic-bezier(.3,.8,.3,1) .3s both}

@keyframes sc-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes sc-drop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@keyframes sc-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sc-roll{from{opacity:0;transform:translateX(130px)}to{opacity:1;transform:none}}
@keyframes sc-drift{from{opacity:0;transform:translateX(-150px)}to{opacity:1;transform:none}}
@keyframes sc-spin{from{transform:rotate(-220deg)}to{transform:rotate(0)}}
.scene .sc-wheel{transform-origin:center}

@media (prefers-reduced-motion:reduce){
  .scene.can-reveal *{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---- attainment bars ----------------------------------------------------
   Ordered bands, so the three fills are one hue running light to dark rather
   than three unrelated colours. The count sits inside every segment, which is
   what carries the reading when the palest band is low-contrast, and what
   keeps identity off colour alone. */
.attain{margin-top:clamp(20px,2.6vw,30px)}
.attain h3{font-size:1.05rem;margin:0 0 .9em}
.attain-row{display:grid;grid-template-columns:5.2rem 1fr;align-items:center;
  gap:12px;margin-bottom:10px}
.attain-row .attain-name{font-weight:700;font-size:.95rem;color:var(--heading)}
.attain-bar{display:flex;gap:2px;min-width:0;border-radius:8px;overflow:hidden}
.attain-bar .seg{display:grid;place-items:center;min-width:0;padding:9px 2px;
  font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums;line-height:1}
.seg-above{background:#1F3B36;color:#FFFDF8}
.seg-at{background:#3C7F79;color:#FFFDF8}
.seg-below{background:#CFE3DB;color:#1F3B36}
.attain-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;padding:0;
  list-style:none;font-size:.88rem;color:var(--ink)}
.attain-key li{display:flex;align-items:center;gap:7px}
.attain-key i{width:13px;height:13px;border-radius:3px;flex:none}
.attain-note{font-size:.88rem;margin:.9em 0 0}
.attain-vals{display:none}
/* Below this width a 12.5% segment is narrower than the text "12.5%", so the
   bar becomes purely visual and the figures move onto their own line. */
@media (max-width:560px){
  .attain-row{grid-template-columns:1fr;gap:4px;margin-bottom:16px}
  .attain-row .attain-name{font-size:.9rem}
  .attain-bar .seg{font-size:0;padding:11px 0}
  .attain-vals{display:block;font-size:.86rem;color:var(--ink);
    font-variant-numeric:tabular-nums}
  .attain-vals i{font-style:normal;opacity:.45;padding:0 .3em}
}

/* ---------- parents' voice (genuine, attributed quotes only) ---------- */
.voices{list-style:none;padding:0;margin:clamp(22px,3vw,34px) 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.voice{margin:0;height:100%;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:clamp(22px,2.4vw,30px)}
.voice p{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.45;color:var(--heading);
  margin:0 0 1.1em;position:relative;flex:1}
.voice p::before{content:"\201C";color:var(--clay);font-style:normal;
  font-size:1.9em;line-height:0;vertical-align:-.28em;margin-right:.08em}
.voice footer{margin-top:auto;padding-top:.6em;border-top:1px solid var(--line)}
.voice-who{display:block;font-weight:700;font-size:.98rem;color:var(--heading)}
.voice-src{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:3px}
.voice-invite{margin-top:clamp(26px,3vw,38px);padding:clamp(22px,2.6vw,32px);
  border:1.5px dashed var(--teal);border-radius:14px;max-width:46rem}
.voice-invite h3{font-size:1.25rem;margin:0 0 .45em}
.voice-invite p{margin:0 0 1em;max-width:34rem}
.voice-invite .btn{margin-bottom:.2em}
.voice-consent{font-size:.92rem;margin-bottom:0}
@media (max-width:760px){.voices{grid-template-columns:1fr}}

/* ---------- food at Aspire: meals and the rotating lunch menu ---------- */
.meals{list-style:none;padding:0;margin:clamp(22px,3vw,32px) 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.meals li{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:clamp(20px,2.2vw,26px)}
.meals h3{font-size:1.1rem;margin:0 0 .4em;color:var(--heading)}
.meals p{margin:0;font-size:1rem}
.menu-head{margin:clamp(30px,3.4vw,44px) 0 .5em;font-size:1.3rem}
.menu-weeks{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,26px);
  margin:clamp(16px,2vw,24px) 0 clamp(26px,3vw,38px)}
.menu-week{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:clamp(18px,2vw,24px)}
.menu-week h4{margin:0 0 .7em;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-ink)}
.menu-week ul{list-style:none;padding:0;margin:0}
.menu-week li{padding:.75em 0;border-top:1px solid var(--line)}
.menu-week li:first-child{border-top:0;padding-top:0}
.md-day{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}
.md-dish{display:block;font-weight:700;color:var(--heading);margin-top:2px}
.md-dish em{font-style:normal;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--clay);margin-left:.4em;white-space:nowrap}
.md-desc{display:block;font-size:.93rem;color:var(--ink);margin-top:3px}
@media (max-width:860px){
  .meals,.menu-weeks{grid-template-columns:1fr}
}

/* Two bands of the same colour in a row would merge into one block;
   a hairline keeps them reading as separate sections. */
.band.paper + .band.paper,
.band.sage + .band.sage{border-top:1px solid var(--line)}