/*
Theme Name: CodeBots Kids
Theme URI: https://codebotskids.co.uk
Author: CodeBots Kids
Author URI: https://codebotskids.co.uk
Description: A bright, conversion-focused theme for a children's coding, robotics & AI club. Landing page plus timetable, contact and policy pages that are created for you on activation, with a Customizer panel for booking/WhatsApp links, prices, venue and term dates. Ages 7–14. Saturday classes in London, one-to-one at home or online across the UK.
Version: 1.8.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codebots-kids
Tags: education, custom-logo, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* Ink & ground */
  --ink:#12163A;
  --ink-deep:#0B0E28;
  --ink-soft:#4C5378;
  --ink-mute:#767C9C;
  --bg:#F4F6FC;
  --bg-warm:#FBF7F1;
  --surface:#FFFFFF;
  --surface-tint:#F7F9FF;

  /* Brand */
  --brand:#3355FF;
  --brand-ink:#1E38C4;
  --brand-wash:#E7EBFF;
  --spark:#FFB020;
  --spark-wash:#FFF1D8;
  --pop:#FF5D73;
  --pop-wash:#FFE6EA;
  --teal:#12B5A5;
  --teal-wash:#DCF5F2;

  /* Lines */
  --line:#E3E7F4;
  --line-strong:#CDD4EA;

  /* Elevation — two-layer, so cards sit on the page rather than float off it */
  --sh-1:0 1px 2px rgba(18,22,58,.05), 0 4px 12px -6px rgba(18,22,58,.14);
  --sh-2:0 2px 4px rgba(18,22,58,.06), 0 16px 32px -18px rgba(18,22,58,.28);
  --sh-3:0 4px 8px rgba(18,22,58,.07), 0 32px 60px -28px rgba(18,22,58,.4);
  /* Sticker shadow — the playful signature, used only on interactive cards */
  --sh-stick:4px 5px 0 var(--ink);
  --sh-stick-sm:3px 3px 0 var(--ink);

  /* Radii */
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:34px;

  /* Rhythm */
  --gap:clamp(.9rem,1.6vw,1.15rem);
  --sec-y:clamp(3.5rem,7vw,6.5rem);

  /* Type */
  --f-display:"Space Grotesk","DM Sans",system-ui,sans-serif;
  --f-body:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --t-display:clamp(2.3rem,4.6vw,3.5rem);
  --t-h2:clamp(1.85rem,3.6vw,2.75rem);
  --t-h3:clamp(1.1rem,1.6vw,1.25rem);
  --t-lede:clamp(1.06rem,1.4vw,1.22rem);
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--ink);
  background-color:var(--bg);
  /* Dot grid + two soft brand glows: texture instead of a flat wash */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(18,22,58,.055) 1px, transparent 0),
    radial-gradient(48rem 34rem at 88% -6%, rgba(51,85,255,.10), transparent 62%),
    radial-gradient(40rem 30rem at -8% 12%, rgba(255,176,32,.10), transparent 60%);
  background-size:22px 22px, auto, auto;
  background-attachment:fixed, scroll, scroll;
  font-family:var(--f-body);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,.brand{font-family:var(--f-display);line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
::selection{background:var(--spark);color:var(--ink)}
:focus-visible{outline:3px solid var(--spark);outline-offset:2px;border-radius:6px}

.wrap{width:min(1160px,92vw);margin-inline:auto}
.wrap-narrow{width:min(880px,92vw);margin-inline:auto}
section{padding:var(--sec-y) 0;scroll-margin-top:88px;position:relative}
section.tight{padding-top:0}
section.tight + section.tight{padding-top:0}

/* Alternating grounds give the page rhythm instead of one continuous wash */
.band-white{background:var(--surface);border-block:1px solid var(--line)}
.band-ink{background:var(--ink-deep);color:#fff}
.band-ink h2,.band-ink h3,.band-ink h4{color:#fff}
.band-ink p{color:#B7BEE4}

/* Section heading block */
.sec-head{max-width:56ch;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:var(--t-h2);font-weight:700;margin:.5rem 0 .55rem}
.sec-head p{color:var(--ink-soft);margin:0;font-size:var(--t-lede)}
.band-ink .sec-head p{color:#B7BEE4}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-display);
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.kicker::before{content:"";width:20px;height:2px;border-radius:2px;background:currentColor}
.band-ink .kicker{color:var(--spark)}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-display);font-weight:600;font-size:1rem;line-height:1.1;
  padding:.9em 1.5em;border-radius:999px;border:2px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .16s cubic-bezier(.34,1.4,.64,1),box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 18px -10px rgba(51,85,255,.9)}
.btn-primary:hover{background:var(--brand-ink);transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(51,85,255,.85)}
.btn-spark{background:var(--spark);color:var(--ink);box-shadow:0 8px 18px -10px rgba(255,176,32,.95)}
.btn-spark:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(255,176,32,.9)}
.btn-wa{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn-wa:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--brand);background:#fff}
.btn-onink{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-onink:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.btn-sm{padding:.66em 1.1em;font-size:.9rem}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* ============================================================
   4. HEADER / NAV
   ============================================================ */
header.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(244,246,252,.78);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
header.nav.is-stuck{border-bottom-color:var(--line);background:rgba(244,246,252,.92);box-shadow:0 6px 20px -18px rgba(18,22,58,.8)}
.nav-inner{display:flex;align-items:center;gap:1rem;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.28rem;color:var(--ink);flex:0 0 auto}
.brand .mark{width:36px;height:36px;flex:0 0 auto;transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.custom-logo{max-height:48px;width:auto}
.navlinks{display:flex;gap:.35rem;align-items:center;list-style:none;margin:0 auto;padding:0}
.navlinks a{display:block;font-weight:500;font-size:.97rem;color:var(--ink-soft);padding:.45rem .75rem;border-radius:999px;transition:color .15s ease,background .15s ease}
.navlinks a:hover{color:var(--ink);background:rgba(18,22,58,.05)}
.navlinks .current-menu-item > a,.navlinks a[aria-current="page"]{color:var(--brand);background:var(--brand-wash)}
.nav-cta{display:flex;gap:.55rem;align-items:center;flex:0 0 auto}
.menu-btn{display:none;background:#fff;border:2px solid var(--line-strong);border-radius:12px;
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;padding:0}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(2.5rem,5vw,4rem);position:relative}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);
  padding:.45rem .9rem;border-radius:999px;font-size:.88rem;font-weight:500;color:var(--ink-soft);box-shadow:var(--sh-1)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-wash)}
h1.hl{font-size:var(--t-display);font-weight:700;margin:1.1rem 0 .8rem;letter-spacing:-.032em}
h1.hl .u{position:relative;white-space:nowrap}
h1.hl .u::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.34em;
  background:var(--spark);opacity:.42;border-radius:.18em;z-index:-1}
.lede{font-size:var(--t-lede);color:var(--ink-soft);max-width:40ch;margin:0 0 1.7rem}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hero-meta{display:flex;gap:.5rem;flex-wrap:wrap}
.hero-meta .pill{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.42rem .85rem;font-size:.86rem;color:var(--ink-soft);box-shadow:var(--sh-1)}
.hero-meta .pill b{color:var(--ink);font-family:var(--f-display);font-weight:600}
.hero-meta .pill svg{flex:0 0 auto}

.hero-art{position:relative;border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--sh-3);
  aspect-ratio:1/.94;overflow:hidden;
  background:
    radial-gradient(90% 80% at 78% 4%, #2A3680 0%, transparent 58%),
    radial-gradient(70% 70% at 10% 96%, #1B2360 0%, transparent 60%),
    linear-gradient(160deg,#171E4E,#0B0E28);
}
/* Faint circuit grid behind the robot */
.hero-art::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.hero-art svg.robot{width:100%;height:100%;display:block;position:relative;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.chip{position:absolute;background:#fff;border-radius:12px;padding:.5rem .8rem;font-size:.82rem;font-weight:600;
  font-family:var(--f-display);box-shadow:var(--sh-2);display:flex;align-items:center;gap:.45rem;z-index:2}
.chip .k{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.chip.c1{top:11%;left:5%}
.chip.c2{bottom:8%;right:5%}

/* ============================================================
   6. TRUST STRIP
   ============================================================ */
.trust{background:var(--ink-deep);color:#fff;position:relative;overflow:hidden}
.trust::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(51,85,255,.28),transparent);pointer-events:none}
.trust-inner{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;justify-content:space-between;padding:1.15rem 0;position:relative;z-index:1}
.trust span{display:inline-flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500}
.trust svg{flex:0 0 auto}

/* ============================================================
   7. CARDS — programs
   ============================================================ */
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.card{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);
  padding:1.5rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;position:relative;
  box-shadow:var(--sh-stick);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--ink)}
.card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:.45rem;border:2px solid var(--ink)}
.card h3{font-size:var(--t-h3);margin:0}
.card .age{display:inline-flex;align-self:flex-start;font-size:.76rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);font-family:var(--f-display);
  background:var(--bg);border-radius:999px;padding:.22rem .6rem}
.card p{margin:.15rem 0 0;font-size:.95rem;color:var(--ink-soft)}

/* ============================================================
   8. SATURDAY WALKTHROUGH (replaces the invented testimonials)
   ============================================================ */
.saturday{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);counter-reset:sat}
.sat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:1.4rem 1.25rem;position:relative}
.sat .clock{font-family:var(--f-display);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--spark);margin-bottom:.6rem;display:block}
.sat h3{font-size:1.05rem;margin:0 0 .35rem}
.sat p{margin:0;font-size:.92rem;color:#B7BEE4}
.sat::after{content:"";position:absolute;top:2.05rem;right:-.58rem;width:1.1rem;height:2px;background:rgba(255,255,255,.2)}
.sat:last-child::after{display:none}

/* ============================================================
   9. FOUNDER NOTE
   ============================================================ */
.founder{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:start;
  background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--sh-stick)}
.founder-avatar{width:96px;height:96px;border-radius:50%;border:2px solid var(--ink);overflow:hidden;
  background:var(--brand-wash);display:grid;place-items:center;flex:0 0 auto}
.founder-avatar img{width:100%;height:100%;object-fit:cover}
.founder blockquote{margin:0;font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.55;font-family:var(--f-display);
  font-weight:500;letter-spacing:-.015em}
.founder blockquote p{margin:0 0 .9rem}
.founder .sig{font-size:.92rem;color:var(--ink-soft);font-family:var(--f-body)}
.founder .sig b{display:block;color:var(--ink);font-family:var(--f-display);font-size:1rem}

/* ============================================================
   10. STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.5rem;
  position:relative;box-shadow:var(--sh-1);transition:transform .18s ease,box-shadow .18s ease}
.step:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.step .n{counter-increment:s;font-family:var(--f-display);font-weight:700;font-size:1.05rem;
  width:42px;height:42px;border-radius:14px;background:var(--brand);color:#fff;
  display:grid;place-items:center;margin-bottom:.9rem;box-shadow:0 8px 16px -10px var(--brand)}
.step .n::before{content:counter(s)}
.step h3{margin:0 0 .35rem;font-size:var(--t-h3)}
.step p{margin:0;color:var(--ink-soft);font-size:.96rem}

/* ============================================================
   11. LADDER
   ============================================================ */
.ladder{border-radius:var(--r-xl);padding:clamp(1.8rem,3.4vw,2.8rem);color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(80% 100% at 85% 0%,#2A3680,transparent 60%),linear-gradient(150deg,#171E4E,#0B0E28)}
.ladder::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1px,transparent 0);background-size:26px 26px}
.ladder > *{position:relative}
.ladder h2{color:#fff;font-size:var(--t-h2);margin:.4rem 0 .4rem}
.ladder .sub{color:#B7BEE4;margin:0 0 1.9rem;max-width:52ch;font-size:var(--t-lede)}
.rungs{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.rung{flex:1 1 150px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-sm);padding:1.1rem 1rem;transition:transform .2s ease,background .2s ease}
.rung:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.rung .lvl{font-family:var(--f-display);font-weight:600;font-size:.74rem;letter-spacing:.1em;color:var(--spark)}
.rung h4{margin:.45rem 0 .25rem;font-size:1.05rem}
.rung p{margin:0;font-size:.86rem;color:#B7BEE4}
.rung:nth-child(1){padding-bottom:1.1rem}
.rung:nth-child(2){padding-bottom:1.9rem}
.rung:nth-child(3){padding-bottom:2.7rem}
.rung:nth-child(4){padding-bottom:3.5rem;background:rgba(51,85,255,.22);border-color:rgba(101,130,255,.45)}

/* ============================================================
   12. CAMPS BAND
   ============================================================ */
.camps{border-radius:var(--r-xl);padding:clamp(1.8rem,3.4vw,2.8rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:center;color:var(--ink);
  background:linear-gradient(115deg,#FFC44D,#FF9A3D 58%,#FF8560);
  border:2px solid var(--ink);box-shadow:var(--sh-stick)}
.camps h2{margin:.4rem 0 .5rem;font-size:var(--t-h2)}
.camps > div > p{margin:0 0 1.4rem;max-width:44ch;font-size:1.03rem}
.camps .kicker{color:#7A4200}
.camp-list{display:grid;gap:.65rem}
.camp{background:rgba(255,255,255,.72);border:1px solid rgba(122,66,0,.18);border-radius:var(--r-sm);
  padding:.8rem 1rem;font-weight:600;font-family:var(--f-display);display:flex;justify-content:space-between;
  gap:1rem;font-size:.96rem;align-items:center}
.camp small{font-weight:500;color:#7A4200;white-space:nowrap}

/* ============================================================
   13. PRICING
   ============================================================ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
.plan{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);padding:1.8rem 1.6rem;
  display:flex;flex-direction:column;box-shadow:var(--sh-stick);transition:transform .18s ease,box-shadow .18s ease}
.plan:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--ink)}
.plan.feat{background:var(--ink-deep);color:#fff;box-shadow:6px 7px 0 var(--brand)}
.plan.feat:hover{box-shadow:9px 10px 0 var(--brand)}
.plan.feat h3{color:#fff}
.plan .tag{display:inline-flex;align-self:flex-start;font-family:var(--f-display);font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:var(--brand-wash);
  border-radius:999px;padding:.28rem .7rem;margin-bottom:.9rem}
.plan.feat .tag{color:var(--ink);background:var(--spark)}
.plan h3{margin:0;font-size:1.3rem}
.plan .price{font-family:var(--f-display);font-weight:700;font-size:2.4rem;margin:.5rem 0 .1rem;letter-spacing:-.03em}
.plan .price small{font-size:.88rem;font-weight:500;color:var(--ink-soft)}
.plan.feat .price small{color:#B7BEE4}
.plan ul{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:grid;gap:.6rem;font-size:.95rem;color:var(--ink-soft)}
.plan.feat ul{color:#C9CFEE}
.plan li{display:flex;gap:.6rem;align-items:flex-start}
.plan li svg{flex:0 0 auto;margin-top:3px}
.plan .btn{margin-top:auto;width:100%}
.plan-note{text-align:center;color:var(--ink-soft);font-size:.92rem;margin:1.4rem 0 0}

/* ============================================================
   14. FAQ
   ============================================================ */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:.65rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease}
.faq details[open]{border-color:var(--line-strong);box-shadow:var(--sh-1)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.05rem 1.25rem;font-weight:600;font-family:var(--f-display);font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:2.5px solid var(--brand);
  border-bottom:2.5px solid var(--brand);transform:rotate(45deg);margin-right:.35rem;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:.35rem}
.faq summary:hover{background:var(--surface-tint)}
.faq details p{margin:0;padding:0 1.25rem 1.2rem;color:var(--ink-soft);font-size:.97rem}
.faq details a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   15. FINAL CTA
   ============================================================ */
.final{border-radius:var(--r-xl);padding:clamp(2.2rem,4.5vw,3.6rem);text-align:center;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(70% 120% at 50% 0%,#4F6BFF,transparent 65%),linear-gradient(160deg,#3355FF,#1E38C4)}
.final::before{content:"";position:absolute;inset:0;opacity:.28;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.4) 1px,transparent 0);background-size:24px 24px}
.final > *{position:relative}
.final h2{color:#fff;font-size:var(--t-h2);margin:0 0 .6rem}
.final p{color:#DDE3FF;margin:0 auto 1.8rem;max-width:46ch;font-size:var(--t-lede)}

/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer{padding:clamp(2.5rem,5vw,4rem) 0 3rem;color:var(--ink-soft);font-size:.93rem;
  background:var(--surface);border-top:1px solid var(--line);margin-top:clamp(3rem,6vw,5rem)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:2rem 1.5rem;margin-bottom:2rem}
.foot-grid h4{font-family:var(--f-display);color:var(--ink);margin:0 0 .8rem;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase}
.foot-grid a{display:block;color:var(--ink-soft);margin-bottom:.45rem;transition:color .15s ease,transform .15s ease}
.foot-grid a:hover{color:var(--brand);transform:translateX(2px)}
.foot-grid ul{list-style:none;margin:0;padding:0}
/* Social row — only rendered for profiles that actually exist */
.foot-social{display:flex;gap:.5rem;list-style:none;margin:1rem 0 0;padding:0}
.foot-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);color:var(--ink-soft);margin:0;
  transition:color .15s ease,border-color .15s ease,transform .15s ease,background .15s ease}
.foot-social a:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-wash);transform:translateY(-2px)}

.foot-bottom{border-top:1px solid var(--line);padding-top:1.4rem;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.8rem;align-items:center;font-size:.88rem}
.foot-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.badge{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;
  font-size:.78rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.35rem}

/* ============================================================
   17. STICKY MOBILE CTA BAR
   ============================================================ */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:.6rem max(.75rem,4vw) calc(.6rem + env(safe-area-inset-bottom));
  gap:.5rem;box-shadow:0 -8px 24px -20px rgba(18,22,58,.9)}
.mobile-cta .btn{flex:1 1 0;padding:.8em 1em;font-size:.94rem}

/* ============================================================
   18. UTILITIES / A11Y
   ============================================================ */
.screen-reader-text,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1.1rem;border-radius:10px;z-index:100;box-shadow:var(--sh-2)}

/* ============================================================
   19. INNER PAGES — shell, breadcrumbs, long-form typography
   ============================================================ */
.page-shell{width:min(760px,92vw);margin:clamp(2rem,4vw,3.5rem) auto clamp(3rem,6vw,4.5rem)}
.page-template-page-timetable .page-shell,
.page-template-page-contact .page-shell{width:min(1060px,92vw)}

.page-shell .entry-title,.page-shell h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 1.1rem;letter-spacing:-.03em}
.page-shell a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.page-shell a:hover{text-decoration-thickness:2px}
.page-shell img{border-radius:var(--r-sm)}
.page-media{margin:1.2rem 0 2rem}
.post-meta{color:var(--ink-mute);font-size:.88rem;margin-bottom:1.8rem}

.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--ink-mute);
  font-family:var(--f-display);margin-bottom:1.1rem;flex-wrap:wrap}
.page-shell .crumbs a{color:var(--ink-mute);text-decoration:none}
.page-shell .crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.45}

.page-shell .lede{font-size:var(--t-lede);color:var(--ink-soft);max-width:64ch;margin:0 0 2.2rem}
.page-shell .btn{text-decoration:none}
.page-shell .btn-primary{color:#fff}
.page-shell .contact-actions a,.page-shell .policy-foot a{text-decoration:none}

/* Long-form body: policies, about, curriculum */
.page-shell .entry-content{font-size:1.05rem;line-height:1.75}
.page-shell .entry-content > *:first-child{margin-top:0}
.page-shell .entry-content h2{font-size:1.5rem;margin:2.8rem 0 .9rem;padding-top:1.4rem;
  border-top:1px solid var(--line);scroll-margin-top:96px}
.page-shell .entry-content h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.page-shell .entry-content h3{font-size:1.14rem;margin:2rem 0 .55rem}
.page-shell .entry-content p{margin:0 0 1.15rem}
.page-shell .entry-content ul,.page-shell .entry-content ol{margin:0 0 1.3rem;padding-left:1.35rem}
.page-shell .entry-content li{margin-bottom:.55rem}
.page-shell .entry-content li::marker{color:var(--brand);font-weight:600}
.page-shell .entry-content strong{color:var(--ink)}
.page-shell .entry-content blockquote{margin:1.8rem 0;padding:1.2rem 1.4rem;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--spark);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:1.05rem;color:var(--ink);box-shadow:var(--sh-1)}
.page-shell .entry-content blockquote p:last-child{margin-bottom:0}
.page-shell .entry-content hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.page-shell .entry-content dl{margin:0 0 1.3rem}
.page-shell .entry-content dt{font-weight:600;font-family:var(--f-display);margin-top:.9rem;color:var(--ink)}
.page-shell .entry-content dd{margin:.25rem 0 0;color:var(--ink-soft)}
.page-shell .entry-content table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 1.6rem;font-size:.95rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-1)}
.page-shell .entry-content th,.page-shell .entry-content td{padding:.8rem 1rem;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
.page-shell .entry-content thead th{background:var(--surface-tint);font-family:var(--f-display);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.page-shell .entry-content tbody tr:last-child td{border-bottom:0}
.page-shell .entry-content td{color:var(--ink-soft)}
/* [TO CONFIRM: …] markers stay visible to the founder without shouting at parents */
.page-shell .entry-content p:has(> em:only-child){color:var(--ink-soft)}

.policy-foot{margin-top:2.8rem;padding:1.6rem;background:var(--surface);
  border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-stick-sm)}
.policy-foot p{margin:0 0 .9rem;color:var(--ink-soft)}
.policy-foot p:last-child{margin-bottom:0}

/* ---- Timetable ---- */
.tt-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden;margin-bottom:1.8rem}
.tt{width:100%;border-collapse:collapse;font-size:.97rem}
.tt th,.tt td{text-align:left;padding:1.05rem 1.15rem;border-bottom:1px solid var(--line);vertical-align:top}
.tt thead th{background:var(--surface-tint);font-family:var(--f-display);font-size:.76rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.tt tbody tr:last-child th,.tt tbody tr:last-child td{border-bottom:0}
.tt tbody tr:hover{background:var(--surface-tint)}
.tt-name{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:1.03rem}
.tt-note{display:block;font-size:.85rem;color:var(--ink-mute);margin-top:.25rem;font-weight:400;max-width:36ch}
.tt-per{display:block;font-size:.78rem;color:var(--ink-mute)}
.tt td{color:var(--ink-soft)}

.tt-meta,.contact-grid{display:grid;gap:var(--gap);margin-bottom:2.2rem}
.tt-meta{grid-template-columns:repeat(3,1fr)}
.contact-grid{grid-template-columns:repeat(2,1fr)}
.tt-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;
  box-shadow:var(--sh-1);transition:transform .18s ease,box-shadow .18s ease}
.tt-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.tt-card h3{font-size:1.06rem;margin:0 0 .55rem}
.tt-card p{margin:0 0 .65rem;font-size:.95rem;color:var(--ink-soft)}
.tt-card p:last-child{margin-bottom:0}
.contact-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.tt-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 2.6rem}

/* ============================================================
   20. MOTION — scroll reveal, respecting reduced-motion
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.07s}
  .reveal.d2{transition-delay:.14s}
  .reveal.d3{transition-delay:.21s}
  /* --- Hero robot, ambient. Blink, antenna pulse, signals down the traces. --- */
  .blink{transform-box:fill-box;transform-origin:center;animation:blink 6.5s ease-in-out infinite}
  @keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
  .lamp{transform-box:fill-box;transform-origin:center;animation:lampPulse 2.6s ease-in-out infinite}
  @keyframes lampPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.16)}}
  .hero-art .bot{animation:botHover 5.5s ease-in-out infinite}
  @keyframes botHover{0%,100%{translate:0 0}50%{translate:0 -7px}}
  .trace{stroke-dasharray:10 90;animation:traceTravel 3.4s linear infinite}
  .trace:nth-of-type(2){animation-delay:.8s}
  .trace:nth-of-type(3){animation-delay:1.7s}
  .trace:nth-of-type(4){animation-delay:2.5s}
  @keyframes traceTravel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  .chip.c1{animation:float 7s ease-in-out infinite}
  .chip.c2{animation:float 9s ease-in-out infinite .8s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
}

/* ============================================================
   HERO ROBOT — the runnable program
   The artwork already reads "when button pressed" ->
   "robot.move(forward)". This makes that literal: press Run, each
   block lights in turn, and the robot does the thing. It is the
   only element on the homepage that demonstrates the product
   rather than describing it.

   Deliberately quiet: a translucent pill on the card, never
   competing with the booking CTA next to it.
   ============================================================ */
.run-bar{position:absolute;left:1.4rem;bottom:1.3rem;z-index:3;
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.45rem;
  max-width:min(62%, calc(100% - 2.8rem))}
.run-btn{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font-family:var(--f-display);font-size:.82rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);
  border-radius:999px;padding:.5rem .95rem;backdrop-filter:blur(6px);
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.run-btn:hover:not(:disabled){background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
.run-btn:focus-visible{outline:3px solid var(--spark);outline-offset:2px}
.run-btn:disabled{opacity:.55;cursor:default}
.run-btn svg{flex:0 0 auto;opacity:.9}
.run-say{font-size:.76rem;color:rgba(255,255,255,.72);font-family:var(--f-display);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  padding-left:.15rem;opacity:0;transition:opacity .2s ease}
.run-say.on{opacity:1}

/* The chip that is currently executing. */
.chip.lit{background:#FFF8E9;
  box-shadow:0 0 0 3px rgba(255,176,32,.55),var(--sh-2);
  transform:scale(1.06)}

/* Movement is on the wrapper, so the circuit traces behind stay put. */
.hero-art .bot{transition:translate .55s cubic-bezier(.34,1.3,.64,1),rotate .55s ease}
.hero-art .bot.fwd{translate:34px 0;rotate:-3deg}
.wheel{transform-box:fill-box;transform-origin:center;transition:scale .2s ease}
.hero-art .bot.rolling .wheel{scale:1.25}
.eye{transition:translate .18s ease-out}

@media (max-width:520px){
  .run-bar{left:1rem;bottom:1rem}
  .run-btn{font-size:.78rem;padding:.45rem .8rem}
  .run-say{display:none}
}
@media (prefers-reduced-motion:reduce){
  .chip,.run-btn,.hero-art .bot,.wheel,.eye{transition:none!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   21. RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .prog{grid-template-columns:repeat(2,1fr)}
  .saturday{grid-template-columns:repeat(2,1fr)}
  .sat:nth-child(2)::after{display:none}
}
@media(max-width:960px){
  .navlinks{display:none}
  .menu-btn{display:flex}
  .nav-cta .btn-wa{display:none}
  .nav-cta .btn-primary{padding:.7em 1.15em;font-size:.9rem}
  .navlinks.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;padding:1rem 4vw 1.4rem;border-bottom:1px solid var(--line);gap:.2rem;
    box-shadow:var(--sh-2);margin:0}
  .navlinks.open a{padding:.8rem 1rem;font-size:1.05rem;border-radius:var(--r-sm)}
  header.nav{position:sticky}
  .nav-inner{position:relative}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{order:-1;aspect-ratio:16/11}
  .lede{max-width:none}
  .steps,.plans{grid-template-columns:1fr}
  .camps,.foot-grid{grid-template-columns:1fr}
  .tt-meta,.contact-grid{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr;text-align:left}
  .plan.feat{order:-1}
  .mobile-cta{display:flex}
  body{padding-bottom:4.6rem}
  .site-footer{margin-bottom:0}
}
@media(max-width:680px){
  body{font-size:16.5px}
  /* The sticky bottom bar carries the booking CTA, so the header stays clean */
  .nav-cta .btn-primary{display:none}
  .prog,.saturday{grid-template-columns:1fr}
  .sat::after{display:none}
  .trust-inner{gap:.7rem 1.4rem;font-size:.9rem}
  .hero-meta .pill{font-size:.82rem}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  /* Timetable stacks into cards */
  .tt-wrap{box-shadow:var(--sh-1)}
  .tt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tt,.tt tbody,.tt tr,.tt th,.tt td{display:block;width:100%}
  .tt tr{border-bottom:1px solid var(--line);padding:.5rem 0}
  .tt tbody tr:last-child{border-bottom:0}
  .tt th,.tt td{border-bottom:0;padding:.35rem 1.15rem}
  .tt tbody th{padding-top:1rem}
  .tt td::before{content:attr(data-label) " · ";font-weight:600;color:var(--ink);
    font-family:var(--f-display);font-size:.8rem}
  .tt-per{display:inline}
}
@media(max-width:560px){
  .page-shell .entry-content table{font-size:.86rem}
  .page-shell .entry-content th,.page-shell .entry-content td{padding:.55rem .6rem;hyphens:auto}
  .page-shell .entry-content thead th{font-size:.7rem;letter-spacing:.03em}
  .founder-avatar{width:76px;height:76px}
}

/* ============================================================
   22. PRINT
   ============================================================ */
@media print{
  .nav,.site-footer,.policy-foot,.tt-cta,.crumbs,.mobile-cta{display:none !important}
  body{background:#fff;font-size:12pt;padding-bottom:0}
  .page-shell{width:100%;margin:0}
  .page-shell .entry-content a{text-decoration:underline}
  .page-shell .entry-content a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ───────────────────────────────────────────────────────────
   BOOKING FORM  (page-book.php)
   A form is where a parent decides whether this club is
   organised enough to hand a child to, so it is styled with the
   same care as the hero: generous targets, one column of
   attention, no surprises.
   ─────────────────────────────────────────────────────────── */
.page-shell-wide{width:min(1080px,92vw)}

.book-grid{display:grid;gap:clamp(1.2rem,2.5vw,2rem);grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:start;margin-top:.5rem}
@media (max-width:860px){.book-grid{grid-template-columns:1fr}}

.book-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.6vw,2rem);box-shadow:var(--sh-1)}
.book-form fieldset{border:0;padding:0;margin:0 0 1.6rem}
.book-form fieldset:last-of-type{margin-bottom:1.1rem}
.book-form legend{font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:var(--ink);
  padding:0 0 .85rem;letter-spacing:-.01em}
.book-form .field{margin:0 0 1.05rem;display:flex;flex-direction:column;gap:.38rem}
.book-form .field-row{display:grid;gap:0 1rem;grid-template-columns:1fr 1fr}
@media (max-width:560px){.book-form .field-row{grid-template-columns:1fr}}
.book-form .field-narrow{max-width:100%}
.book-form label{font-size:.9rem;font-weight:600;color:var(--ink)}
.book-form .req{color:var(--pop)}
.book-form .hint{font-size:.82rem;color:var(--ink-mute);line-height:1.5}

.book-form input[type=text],.book-form input[type=email],.book-form input[type=tel],
.book-form input[type=number],.book-form select,.book-form textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface-tint);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.72rem .85rem;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.book-form textarea{resize:vertical;min-height:6.5rem;line-height:1.6}
.book-form input:focus,.book-form select:focus,.book-form textarea:focus{
  outline:0;background:var(--surface);border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-wash)}
.book-form input:user-invalid,.book-form select:user-invalid{border-color:var(--pop)}

.book-form .field-check{flex-direction:row;align-items:flex-start;gap:.7rem;
  background:var(--bg-warm);border:1px solid var(--line);border-radius:var(--r-sm);padding:.95rem 1.05rem}
.book-form .field-check input{margin-top:.2rem;width:1.15rem;height:1.15rem;accent-color:var(--brand);flex:none}
.book-form .field-check label{font-weight:400;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}

.book-submit{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;margin:1.4rem 0 0}
.book-submit .btn{font-size:1.02rem;padding:.9em 1.6em}

/* Honeypot: present for a bot parsing the HTML, gone for everyone else. */
.book-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.book-aside{display:grid;gap:1rem}
.book-steps{margin:0 0 .8rem;padding-left:1.1rem;font-size:.95rem;color:var(--ink-soft);line-height:1.6}
.book-steps li{margin-bottom:.5rem}
.book-steps li::marker{color:var(--brand);font-weight:700}
.book-aside .tt-card p a{color:var(--brand)}

.notice-card{border-radius:var(--r);padding:1.15rem 1.35rem;margin:0 0 1.8rem;border:1px solid var(--line)}
.notice-card h2{font-size:1.15rem;margin:0 0 .4rem}
.notice-card p{margin:0;font-size:.96rem;color:var(--ink-soft)}
.notice-good{background:var(--teal-wash);border-color:#9fe3da}
.notice-good h2{color:#0B7A6E}
.notice-bad{background:var(--pop-wash);border-color:#ffc3cc}
.notice-bad h2{color:#B02240}

@media (prefers-reduced-motion:reduce){
  .book-form input,.book-form select,.book-form textarea{transition:none}
}

/* ───────────────────────────────────────────────────────────
   THREE WAYS TO LEARN  (#one-to-one)
   Saturday club / 1-to-1 at home / 1-to-1 online. The middle
   card is the featured one because at-home is the offer a
   parent outside London can actually take today.
   ─────────────────────────────────────────────────────────── */
.ways{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);align-items:stretch}
@media (max-width:900px){.ways{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}}

.way{display:flex;flex-direction:column;gap:.55rem;background:var(--surface);
  border:2px solid var(--ink);border-radius:var(--r-lg);padding:1.5rem;
  box-shadow:var(--sh-stick);transition:transform .18s ease,box-shadow .18s ease}
.way:hover{transform:translate(-2px,-3px);box-shadow:6px 8px 0 var(--ink)}
.way h3{font-size:var(--t-h3);margin:.1rem 0 0}
.way p{margin:0;font-size:.95rem;color:var(--ink-soft);line-height:1.65}
.way .btn{align-self:flex-start;margin-top:.35rem}

.way-tag{align-self:flex-start;font-family:var(--f-display);font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px}
.way-tag-brand{background:var(--brand-wash);color:var(--brand-ink)}
.way-tag-spark{background:var(--spark-wash);color:#8A5A00}
.way-tag-teal{background:var(--teal-wash);color:#0B7A6E}

.way-price{margin-top:auto!important;padding-top:.7rem;font-family:var(--f-display);
  font-size:1.5rem;font-weight:700;color:var(--ink)!important;line-height:1.2}
.way-price span{font-size:.85rem;font-weight:500;color:var(--ink-mute)}
.way-ask{font-size:1rem;font-weight:600;color:var(--ink-soft)}

.way-feature{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.way-feature h3{color:#fff}
.way-feature p{color:rgba(255,255,255,.76)}
.way-feature .way-price{color:#fff!important}
.way-feature .way-ask{color:rgba(255,255,255,.82)}

.ways-note{margin:1.6rem auto 0;max-width:52ch;text-align:center;font-size:.95rem;color:var(--ink-soft)}
.ways-note a{color:var(--brand-ink);font-weight:600}

@media (prefers-reduced-motion:reduce){.way,.way:hover{transition:none;transform:none}}

/* ───────────────────────────────────────────────────────────
   ILLUSTRATIONS
   The artwork is drawn on the page's own tint (--bg), so on a
   light section it sits on the page with no visible edge. On the
   deep-ink band it gets a frame, so the light artwork reads as a
   deliberate card rather than a hole punched in the section.
   ─────────────────────────────────────────────────────────── */
.cbk-img{display:block}
.cbk-img img{display:block;width:100%;height:auto;border-radius:var(--r-lg)}

figure.img-lead,figure.img-band,figure.img-camp{margin:0}

.img-lead{max-width:980px;margin:0 auto clamp(2rem,4vw,3rem)}
.img-lead .cbk-img img{border-radius:var(--r-lg);box-shadow:var(--sh-2)}

.img-band{max-width:1040px;margin:0 auto clamp(2rem,4vw,3.2rem);
  padding:clamp(.5rem,1vw,.75rem);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:calc(var(--r-lg) + 8px)}
.img-band .cbk-img img{border-radius:var(--r-lg)}

.img-camp{grid-column:1 / -1;margin-bottom:.4rem}
.img-camp .cbk-img img{border-radius:var(--r);box-shadow:var(--sh-1)}

/* Timetable page: the board, with a caption. */
.page-shell .img-lead{max-width:100%;margin:0 0 2.4rem}
.page-shell .img-lead figcaption{margin-top:.7rem;font-size:.86rem;color:var(--ink-mute);text-align:center}

@media (max-width:700px){
  .img-lead,.img-band{margin-bottom:1.6rem}
}