/* ==========================================================================
   Leer Speel-Speel / Play-to-Learn Educational Centre
   ========================================================================== */

/* ---------- Fonts ----------
   Baloo 2 (headings) and Nunito (text), self-hosted rather than loaded from
   Google Fonts so nothing third-party blocks the first paint. Each file is
   Google's Latin subset of the variable font (covers ê, ë and the other
   Afrikaans letters) and holds every weight the site uses. Both fonts are
   SIL Open Font License; index.html preloads them. */
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("assets/fonts/baloo2-latin.woff2") format("woff2");
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("assets/fonts/nunito-latin.woff2") format("woff2");
}

:root {
    --color-bg: #fbfdfb;
    --color-bg-alt: #eff6f0;
    --color-surface: #ffffff;

    --color-blue: #16425b;
    --color-blue-soft: #2c6e8e;
    --color-green: #3fa34d;
    --color-green-dark: #2e7d3a;
    --color-green-pale: #e3f4e6;
    --color-green-cta: #268038;       /* primary button: brand green, deep enough for white text (4.9:1) */
    --color-green-cta-dark: #1d6a2d;
    --color-whatsapp: #25d366;
    --color-whatsapp-dark: #1ebe5b;
    --color-whatsapp-ink: #073b1c;    /* text on WhatsApp green (6.4:1; white would be 2:1) */
    --color-sky: #d2eeff;
    --color-sun: #fff3bf;
    --color-red: #c1473e;
    --color-red-pale: #f8e6e4;

    --color-text: #1f2e33;
    --color-text-muted: #52666b;
    --color-border: #e1e8e4;
    --color-divider: #d7e2da;
    --color-focus: #1d6f91;

    /* Rainbow palette — always used in R → O → Y → G → B → I → V order.
       vivid: decoration only (bars, doodles, borders, illustration fills)
       ink:   text & icons, >= 4.5:1 on white AND on its own pale
       pale:  section backgrounds & icon circles (navy and muted text stay >= 4.5:1 on all of them) */
    --hue-red: #ff4b3e;     --hue-red-ink: #c22f25;     --hue-red-pale: #ffe1dd;
    --hue-orange: #ff8a1f;  --hue-orange-ink: #a84a00;  --hue-orange-pale: #ffe6c7;
    --hue-yellow: #ffcb1f;  --hue-yellow-ink: #7a5800;  --hue-yellow-pale: #fff1b0;
    --hue-green: #2eb84f;   --hue-green-ink: #1d7732;   --hue-green-pale: #d5f5da;
    --hue-blue: #19a8f5;    --hue-blue-ink: #0b6794;    --hue-blue-pale: #d2eeff;
    --hue-indigo: #5b62f0;  --hue-indigo-ink: #3d42b0;  --hue-indigo-pale: #e1e3ff;
    --hue-violet: #b04fe0;  --hue-violet-ink: #7b2ea6;  --hue-violet-pale: #f0dcfc;
    /* Bubblegum pink: an extra outside the rainbow order (stats band, small decoration) */
    --hue-pink: #ff5fa8;    --hue-pink-ink: #b3225f;    --hue-pink-pale: #ffe0ee;

    /* Hard-edged colour blocks (not a blended rainbow) */
    --rainbow-bar: linear-gradient(90deg,
        var(--hue-red) 0 14.2857%,
        var(--hue-orange) 0 28.5714%,
        var(--hue-yellow) 0 42.8571%,
        var(--hue-green) 0 57.1428%,
        var(--hue-blue) 0 71.4285%,
        var(--hue-indigo) 0 85.7142%,
        var(--hue-violet) 0 100%);

    /* Section accent (overridden by .accent-* classes below) */
    --accent: var(--color-blue-soft);
    --accent-ink: var(--color-blue-soft);
    --accent-pale: var(--color-bg-alt);

    --crayon-underline: url("assets/doodles/underline.svg");
    /* Section dividers (used as CSS masks, like the underline) */
    --divider-wave: url("assets/doodles/wave.svg");
    --divider-scallop: url("assets/doodles/scallop.svg");

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --shadow-sm: 0 2px 8px rgba(22, 66, 91, 0.08);
    --shadow-md: 0 12px 32px rgba(22, 66, 91, 0.14);

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;

    --container-width: 1180px;
    --header-offset: 96px;

    --font-heading: 'Baloo 2', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif;
    --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --transition: 0.25s ease;
}

/* ---------- Accent modifiers ---------- */
.accent-red    { --accent: var(--hue-red);    --accent-ink: var(--hue-red-ink);    --accent-pale: var(--hue-red-pale); }
.accent-orange { --accent: var(--hue-orange); --accent-ink: var(--hue-orange-ink); --accent-pale: var(--hue-orange-pale); }
.accent-yellow { --accent: var(--hue-yellow); --accent-ink: var(--hue-yellow-ink); --accent-pale: var(--hue-yellow-pale); }
.accent-green  { --accent: var(--hue-green);  --accent-ink: var(--hue-green-ink);  --accent-pale: var(--hue-green-pale); }
.accent-blue   { --accent: var(--hue-blue);   --accent-ink: var(--hue-blue-ink);   --accent-pale: var(--hue-blue-pale); }
.accent-indigo { --accent: var(--hue-indigo); --accent-ink: var(--hue-indigo-ink); --accent-pale: var(--hue-indigo-pale); }
.accent-violet { --accent: var(--hue-violet); --accent-ink: var(--hue-violet-ink); --accent-pale: var(--hue-violet-pale); }
.accent-pink   { --accent: var(--hue-pink);   --accent-ink: var(--hue-pink-ink);   --accent-pale: var(--hue-pink-pale); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* No grey/blue flash over things tapped on phones: buttons and cards give their
   own squish instead (see "Tap feedback" in the Motion block). Keyboard focus
   rings are separate (:focus-visible) and unaffected. */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
/* Taps act at once (no wait for a possible double-tap zoom) */
a, button, input, textarea, label { touch-action: manipulation; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-blue);
    line-height: 1.2;
    margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
p:last-child { margin-bottom: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-2);
    background: var(--color-blue);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    z-index: 1000;
    transition: top var(--transition);
}
.skip-link:focus { top: var(--space-2); }

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-3);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.btn-primary {
    background: var(--color-green-cta);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-green-cta-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
/* WhatsApp: always sits in front of the email option */
.btn-whatsapp {
    background: var(--color-whatsapp);
    color: var(--color-whatsapp-ink);
    box-shadow: var(--shadow-sm);
}
.btn-whatsapp:hover { background: var(--color-whatsapp-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-blue);
    border: 2px solid var(--hue-blue);
}
.btn-secondary:hover { border-color: var(--accent); transform: translateY(-2px); }
.btn-outline {
    background: transparent;
    color: var(--accent-ink);
    border: 2px solid var(--accent);
    margin-top: var(--space-2);
}
.btn-outline:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(251, 253, 251, 0.92);
    backdrop-filter: blur(8px);
}
/* Seven colour blocks along the header's lower edge */
.site-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--rainbow-bar);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: 0.85rem calc(0.85rem + 4px);
}
.wordmark {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.wordmark-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
}
.nav-toggle-box { display: flex; flex-direction: column; gap: 5px; width: 24px; }
.nav-toggle-bar {
    display: block;
    height: 2.5px;
    width: 100%;
    background: var(--color-blue);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle-bar:nth-child(1) { background: var(--hue-red); }
.nav-toggle-bar:nth-child(2) { background: var(--hue-green); }
.nav-toggle-bar:nth-child(3) { background: var(--hue-violet); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.primary-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.primary-nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.primary-nav-list a {
    position: relative;
    display: inline-block;
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--color-text);
    padding: 0.4rem 0.2rem;
    transition: color var(--transition);
}
/* Crayon underline in each link's own section colour */
.primary-nav-list a::after {
    content: '';
    position: absolute;
    left: -2px; right: -2px; bottom: -2px;
    height: 8px;
    background: var(--accent);
    -webkit-mask: var(--crayon-underline) no-repeat center / 100% 100%;
    mask: var(--crayon-underline) no-repeat center / 100% 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition);
}
.primary-nav-list a:hover,
.primary-nav-list a:focus-visible,
.primary-nav-list a.is-current { color: var(--accent-ink); }
.primary-nav-list a:hover::after,
.primary-nav-list a:focus-visible::after,
.primary-nav-list a.is-current::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.hero {
    padding-block: var(--space-6) var(--space-5);
    /* Blue sky fading into warm sunshine */
    background: linear-gradient(180deg, var(--color-sky) 0%, #e9f6ff 45%, var(--color-sun) 100%);
    position: relative;
    isolation: isolate;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-5);
    align-items: center;
}
.eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: var(--space-1);
}

.hero h1 {
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    margin-bottom: var(--space-2);
}
.hero-subname {
    display: block;
    font-size: 0.42em;
    font-weight: 700;
    color: var(--color-blue-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.4em;
}
.hero-word { display: inline-block; }
.hero-motto {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hue-green-ink);
    font-style: italic;
}
.hero-lead { font-size: 1.05rem; max-width: 46ch; }
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* The hero picture, pinned up like a painting on the classroom wall */
.hero-visual {
    position: relative;
    margin: 0;
    padding: 10px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    transform: rotate(1.5deg);
}
.hero-visual img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-lg) - 8px);
}
/* Strips of coloured tape at two corners */
.hero-visual::before,
.hero-visual::after {
    content: '';
    position: absolute;
    width: 92px;
    height: 26px;
    border-radius: 2px;
    opacity: 0.85;
}
.hero-visual::before { top: -11px; left: -22px; background: var(--hue-yellow); transform: rotate(-32deg); }
.hero-visual::after { bottom: -11px; right: -22px; background: var(--hue-pink); transform: rotate(-32deg); }

/* ---------- Sections ----------
   Every section is tinted with its own rainbow accent, so the page runs
   R → O → Y → G → B → I → V from top to bottom. A wavy (or, on .section-alt,
   scalloped) edge in the section's colour overlaps the section above. */
section[id] { scroll-margin-top: var(--header-offset); }
.section {
    --section-bg: var(--accent-pale);
    --divider: var(--divider-wave);
    --divider-size: 120px;
    position: relative;
    isolation: isolate;
    padding-block: var(--space-6);
    background: var(--section-bg);
}
/* Speed: the browser skips laying out a section's content until it is near the
   screen (about halves the first layout on phones). Only the inner container,
   so the wavy edges and doodles, which reach outside it, are never clipped.
   "auto" makes it remember each section's real height once it has been seen. */
.section > .container {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}
/* script.js switches the skipping off before any jump to a #section link, so the
   jump is worked out from real heights rather than the 900px estimates */
.cv-off .section > .container { content-visibility: visible; }
.section-alt { --divider: var(--divider-scallop); --divider-size: 56px; }
.stats { --divider: var(--divider-scallop); --divider-size: 56px; }
.section::after,
.stats::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: calc(100% - 1px);
    height: 22px;
    background: var(--section-bg);
    -webkit-mask: var(--divider) repeat-x center bottom / var(--divider-size) 100%;
    mask: var(--divider) repeat-x center bottom / var(--divider-size) 100%;
    pointer-events: none;
}

/* ---------- At a glance (stats) ---------- */
.stats {
    --section-bg: var(--accent-pale);
    position: relative;
    isolation: isolate;
    padding-block: var(--space-4);
    background: var(--section-bg);
}
.stats-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 3px solid var(--accent);
    box-shadow: 0 5px 0 var(--accent);
    text-align: center;
    transition: transform var(--transition);
}
.stat:hover { transform: translateY(-4px); }
.stat-number {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3rem);
    line-height: 1;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
}
.stat-number small { font-size: 0.38em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-label { font-size: 0.92rem; font-weight: 700; color: var(--color-text-muted); }

/* ---------- Illustrations ----------
   A picture taped to the wall: white mount, soft shadow, slight tilt and a
   strip of tape in the section's accent colour. */
.art-frame {
    position: relative;
    margin: var(--space-3) 0 0;
    padding: 8px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}
.art-frame img { width: 100%; height: auto; border-radius: calc(var(--radius-md) - 6px); }
/* Photos: trim to the frame's shape, keeping the part named by --pos in view */
.art-frame img.art-crop {
    aspect-ratio: var(--ratio, 4 / 3);
    object-fit: cover;
    object-position: var(--pos, center);
}
.art-frame::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 84px;
    height: 24px;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0.8;
    transform: translateX(-50%) rotate(-3deg);
}
.art-frame--left { transform: rotate(-2deg); }
.art-frame--banner { max-width: 640px; margin: 0 auto var(--space-5); transform: rotate(-1deg); }
.section-heading { max-width: 62ch; margin-bottom: var(--space-4); }
.section-heading-center { margin-inline: auto; text-align: center; }
.section-heading h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
/* Hand-drawn crayon underline beneath every section title */
.section-heading h2::after {
    content: '';
    display: block;
    width: 116px;
    height: 12px;
    margin-top: 0.45rem;
    background: var(--accent);
    -webkit-mask: var(--crayon-underline) no-repeat center / 100% 100%;
    mask: var(--crayon-underline) no-repeat center / 100% 100%;
}
.section-heading-center h2::after { margin-inline: auto; }
.section-intro { font-size: 1.05rem; }

.section-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-5);
    align-items: start;
}
.section-grid .section-copy p { font-size: 1.02rem; }

/* ---------- Offer cards ---------- */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.offer-card {
    background: var(--color-surface);
    border: 2px solid color-mix(in srgb, var(--accent) 55%, #ffffff);
    border-radius: var(--radius-md);
    padding: calc(var(--space-3) + 4px) var(--space-3) var(--space-3);
    box-shadow: inset 0 9px 0 var(--accent);
    transition: transform var(--transition), box-shadow var(--transition);
}
.offer-card:hover { transform: translateY(-4px); box-shadow: inset 0 9px 0 var(--accent), var(--shadow-md); }
.offer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--accent-pale);
    color: var(--accent-ink);
    margin-bottom: var(--space-2);
}
.offer-icon svg { width: 22px; height: 22px; }
.offer-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.offer-card p { font-size: 0.95rem; margin: 0; }

/* ---------- Meet our founder ---------- */
.founder-layout {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: var(--space-5);
    align-items: center;
}
.founder-aside {
    position: relative;
    width: 100%;
    max-width: 380px;
    justify-self: center;
}
/* The founder's own framed portrait, hung slightly tilted with a soft shadow */
.founder-photo { margin: 0; transform: rotate(-2deg); }
.founder-photo img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 18px rgba(22, 66, 91, 0.22));
}
/* "Since 2003": a round badge pinned to the corner of the photo */
.since-badge {
    position: absolute;
    right: -18px;
    bottom: -24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 122px;
    margin: 0;
    border-radius: 50%;
    border: 4px solid #fff;
    background: var(--accent-ink);
    color: #fff;
    box-shadow: var(--shadow-md);
    font-family: var(--font-heading);
    line-height: 1;
    transform: rotate(8deg);
}
.since-badge-label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.since-badge-year { font-size: 2.4rem; font-weight: 800; }
.founder-body .section-heading { margin-bottom: var(--space-3); }
/* The founder's name on a strip of tape */
.founder-name {
    display: inline-block;
    margin: 0.5rem 0 0;
    padding: 0.2rem 1.1rem;
    border-radius: 4px;
    border: 2px solid var(--accent);
    background: var(--color-surface);
    box-shadow: 0 4px 0 var(--accent);
    color: var(--color-blue);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.3rem;
    transform: rotate(-1.5deg);
}
.founder-letter {
    padding: var(--space-4);
    border: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 6px 0 var(--accent);
}
.founder-letter p { font-size: 1.02rem; }
.founder-promise {
    padding-top: var(--space-2);
    border-top: 2px dashed color-mix(in srgb, var(--accent) 60%, #ffffff);
    color: var(--color-blue);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.12rem;
}

/* ---------- Our 10 special learning experiences ----------
   Phones and tablets: one compact row per card (picture on the left, words on
   the right). Wide screens: five across, picture on top. A card without a
   photo shows an icon on its pale accent colour in the same space. */
.learn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
.learn-card {
    position: relative;
    display: grid;
    grid-template-columns: 136px 1fr;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 2px solid color-mix(in srgb, var(--accent) 55%, #ffffff);
    border-bottom: 6px solid var(--accent);
    transition: transform var(--transition), box-shadow var(--transition);
}
.learn-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.learn-media {
    position: relative;
    display: block;
    min-height: 136px;
    background: var(--accent-pale);
}
.learn-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, center);
}
.learn-media--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-ink);
}
.learn-media--icon svg { width: 56%; max-width: 78px; height: auto; }
.learn-num {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.4rem;
    border-radius: 999px;
    border: 2.5px solid var(--accent);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--accent-ink);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
}
.learn-text { padding: var(--space-2); }
.learn-card h3 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.learn-card p { font-size: 0.93rem; margin: 0; }
@media (min-width: 1100px) {
    .learn-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
    .learn-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .learn-media { min-height: 0; aspect-ratio: 4 / 3; }
    .learn-card h3 { font-size: 1.02rem; }
    .learn-card p { font-size: 0.9rem; }
}

/* ---------- Photo protection ----------
   No long-press "Save image" menu on phones and no dragging pictures out
   (script.js also blocks the right-click menu on them). */
img, .gallery-item, .lightbox-visual {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
/* A clear layer over gallery and lightbox photos, so a tap or long-press lands on
   it rather than on the image itself. The tile's label stays readable above it. */
.gallery-item::after,
.lightbox-visual::after {
    content: '';
    position: absolute;
    inset: 0;
}
.gallery-label { z-index: 1; }

/* ---------- Gallery: photo tiles (shared by preview + albums) ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.gallery-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: transform var(--transition), box-shadow var(--transition);
}
.gallery-item:hover, .gallery-item:focus-visible { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-md); }
.gallery-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, center); /* which part of a tall or wide photo the tile shows */
}
.gallery-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 1.4rem var(--space-2) 0.55rem;
    background: linear-gradient(0deg, rgba(15, 30, 36, 0.78), transparent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
}
.gallery-chip {
    display: inline-block;
    padding: 0.05rem 0.6rem;
    border-radius: 999px;
    background: var(--accent-pale);
    color: var(--accent-ink);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ---------- Gallery: preview mosaic ---------- */
.gallery-preview {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, clamp(130px, 15vw, 185px));
    gap: var(--space-2);
}
.gallery-preview > li:first-child { grid-row: span 2; }
.gallery-preview .gallery-item { aspect-ratio: auto; height: 100%; border: 3px solid var(--accent); }
.gallery-note {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--accent-ink);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}
.gallery-note svg { width: 22px; height: 22px; flex-shrink: 0; }
.swipe-hint { display: none; }

/* ---------- Gallery: album picker ---------- */
.album-picker-heading {
    margin: var(--space-5) 0 var(--space-4);
    text-align: center;
    font-size: 1.35rem;
}
/* Five albums: three then two (centred) on wide screens, two per row below 1100px,
   one column on phones. --cols sets how many share a row. */
.album-picker {
    --cols: 3;
    --gap-x: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5) var(--gap-x);
    max-width: 1020px;
    margin-inline: auto;
}
.album-picker > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols)); }
.album-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: var(--space-3) var(--space-2) calc(var(--space-3) + 6px);
    border: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent-pale) 45%, #ffffff);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}
.album-card:hover, .album-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.album-art { display: block; width: 100%; margin-bottom: var(--space-2); }
.album-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.album-card h3 { font-size: 1.35rem; margin-bottom: 0.2rem; }
.album-blurb { font-size: 0.95rem; margin-bottom: 0.6rem; }
.album-count {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    margin-bottom: 2.6rem; /* room for each button's decoration (roof, animals, bunting) */
    border-radius: 999px;
    background: #fff;
    color: var(--accent-ink);
    font-weight: 800;
    font-size: 0.82rem;
}

/* Petting Zoo: the bunny's ears poke out above the card's top edge.
   The SVG has 50 viewBox units (of 320 wide) of ear-room above the panel;
   a percentage margin resolves against width, so this lifts exactly that much. */
.album-card--petting-zoo .album-art { margin-top: -15.625%; }

/* Illustration motion (transforms only; disabled by the reduced-motion block) */
.album-art .flag, .album-art .sun, .album-art .animal, .album-art .ear,
.album-art .balloon, .album-art .bunting, .album-art .party-star, .album-art .pencil {
    transform-box: fill-box;
    transition: transform 0.4s ease;
}
.album-art .pencil { transform-origin: center bottom; }
.album-card:hover .pencil, .album-card:focus-within .pencil { transform: rotate(-12deg); }
.album-art .flag { transform-origin: left center; }
.album-art .ear { transform-origin: center bottom; }
.album-art .bunting { transform-origin: center top; }
.album-art .party-star { transform-origin: center; }
.album-card:hover .flag, .album-card:focus-within .flag { animation: flag-wave 0.8s ease-in-out infinite alternate; }
.album-card:hover .sun, .album-card:focus-within .sun { transform: translateY(-8px); }
.album-card:hover .animal, .album-card:focus-within .animal { transform: translateY(-7px); }
.album-card:hover .animal--2, .album-card:focus-within .animal--2 { transition-delay: 0.08s; }
.album-card:hover .animal--3, .album-card:focus-within .animal--3 { transition-delay: 0.16s; }
.album-card:hover .ear-left, .album-card:focus-within .ear-left { transform: rotate(-12deg); }
.album-card:hover .balloon, .album-card:focus-within .balloon { transform: translateY(-12px); }
.album-card:hover .balloon--2, .album-card:focus-within .balloon--2 { transition-delay: 0.1s; }
.album-card:hover .bunting, .album-card:focus-within .bunting { animation: sway 1s ease-in-out infinite alternate; }
.album-card:hover .party-star, .album-card:focus-within .party-star { transform: rotate(18deg) scale(1.08); }

@keyframes flag-wave { from { transform: skewY(0deg) scaleX(1); } to { transform: skewY(-8deg) scaleX(0.88); } }
@keyframes sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }

/* ---------- Gallery: themed album buttons ---------- */
.album-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 50px;
    margin-top: auto;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    border: 3px solid var(--accent);
    background: #fff;
    color: var(--accent-ink);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.98rem;
    white-space: nowrap;
    box-shadow: 0 5px 0 var(--accent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.album-btn:hover, .album-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 7px 0 var(--accent); }
.album-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent); }
.album-btn-icon { width: 24px; height: 24px; flex-shrink: 0; overflow: visible; }
.album-btn svg * { transform-box: fill-box; }

/* Premises: a schoolhouse roof on top, and a door that swings open */
.album-btn-roof {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 3px);
    width: 92px;
    height: 30px;
    transform: translateX(-50%);
}
.album-btn--premises .door { transform-origin: left center; transition: transform 0.35s ease; }
.album-card--premises:hover .door,
.album-card--premises:focus-within .door { transform: scaleX(0.28); }

/* Educational Activities: ABC blocks sitting on the top edge that hop in turn, and a pencil that tilts to write */
.album-btn-blocks {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 3px);
    width: 78px;
    height: 26px;
    transform: translateX(-50%);
}
.album-btn-blocks .hop { transition: transform 0.3s ease; }
.album-btn-blocks .hop:nth-child(2) { transition-delay: 0.08s; }
.album-btn-blocks .hop:nth-child(3) { transition-delay: 0.16s; }
.album-card--learning:hover .hop,
.album-card--learning:focus-within .hop { transform: translateY(-4px); }
.album-btn--learning .pencil-icon { transition: transform 0.35s ease; }
.album-card--learning:hover .pencil-icon,
.album-card--learning:focus-within .pencil-icon { transform: rotate(-16deg) translateY(-2px); }

/* Petting Zoo: animals peeking over the top edge, grass tufts, a walking paw */
.album-btn-peekers {
    position: absolute;
    right: 18px;
    bottom: calc(100% - 3px);
    width: 104px;
    height: 40px;
}
.album-btn-peekers .peeker { transform: translateY(4px); transition: transform 0.3s ease; }
.album-btn-peekers .peeker + .peeker { transition-delay: 0.07s; }
.album-card--petting-zoo:hover .peeker,
.album-card--petting-zoo:focus-within .peeker { transform: translateY(0); }
/* Grass tuft growing along the button's top edge, beside the animals */
.album-btn-grass {
    position: absolute;
    left: 20px;
    bottom: calc(100% - 3px);
    width: 44px;
    height: 15px;
}
.album-card--petting-zoo:hover .paw,
.album-card--petting-zoo:focus-within .paw { animation: paw-walk 0.5s ease-in-out 2; }
.paw-trail {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
    pointer-events: none;
}
.paw-trail svg { width: 14px; height: 14px; color: var(--accent); opacity: 0; transition: opacity 0.2s ease; }
.paw-trail svg:nth-child(even) { transform: translateY(5px); }
.album-card--petting-zoo:hover .paw-trail svg,
.album-card--petting-zoo:focus-within .paw-trail svg { opacity: 1; }
.album-card--petting-zoo:hover .paw-trail svg:nth-child(2), .album-card--petting-zoo:focus-within .paw-trail svg:nth-child(2) { transition-delay: 0.12s; }
.album-card--petting-zoo:hover .paw-trail svg:nth-child(3), .album-card--petting-zoo:focus-within .paw-trail svg:nth-child(3) { transition-delay: 0.24s; }
.album-card--petting-zoo:hover .paw-trail svg:nth-child(4), .album-card--petting-zoo:focus-within .paw-trail svg:nth-child(4) { transition-delay: 0.36s; }
@keyframes paw-walk {
    0%, 100% { transform: rotate(0) translateY(0); }
    50% { transform: rotate(-14deg) translateY(-3px); }
}

/* Fun Days: rainbow-ordered bunting, a floating balloon and a confetti burst */
.album-btn-bunting {
    position: absolute;
    left: 10%;
    bottom: calc(100% - 6px);
    width: 80%;
    height: 30px;
}
.album-btn--fun-days .balloon-icon { transition: transform 0.35s ease; }
.album-card--fun-days:hover .balloon-icon,
.album-card--fun-days:focus-within .balloon-icon { transform: translateY(-4px) rotate(-8deg); }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i {
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 7px;
    border-radius: 2px;
    opacity: 0;
}
.confetti i:nth-child(1) { background: var(--hue-red);    --x: -86px; --y: -30px; }
.confetti i:nth-child(2) { background: var(--hue-orange); --x: -60px; --y: 28px;  border-radius: 50%; }
.confetti i:nth-child(3) { background: var(--hue-yellow); --x: -26px; --y: -38px; }
.confetti i:nth-child(4) { background: var(--hue-green);  --x: 10px;  --y: 32px;  border-radius: 50%; }
.confetti i:nth-child(5) { background: var(--hue-blue);   --x: 40px;  --y: -36px; }
.confetti i:nth-child(6) { background: var(--hue-indigo); --x: 70px;  --y: 26px;  border-radius: 50%; }
.confetti i:nth-child(7) { background: var(--hue-violet); --x: 92px;  --y: -22px; }
.album-card--fun-days:hover .confetti i,
.album-card--fun-days:focus-within .confetti i { animation: confetti-burst 0.75s ease-out forwards; }
@keyframes confetti-burst {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(200deg) scale(1); }
}

/* ---------- Gallery: albums ----------
   Without JS the albums render inline under the cards; script.js moves them
   into the #albumModal pop-up and shows one at a time. */
.album { scroll-margin-top: var(--header-offset); margin-top: var(--space-5); }
.album-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 3px solid var(--accent);
}
.album-head-art { width: 92px; flex-shrink: 0; }
.album-head-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.album-head h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 auto 0 0; }
.album-head h3:focus { outline: none; }
.album-head .album-count { margin: 0 0 0 0.6rem; vertical-align: middle; }
.album-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 2px solid var(--accent);
    background: #fff;
    color: var(--accent-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    transition: background var(--transition), color var(--transition);
}
.album-back:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.album-back svg { width: 18px; height: 18px; }

/* ---------- Album pop-up ---------- */
.album-modal {
    position: fixed;
    inset: 0;
    z-index: 900; /* above the sticky header, below the photo lightbox */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}
.album-modal[hidden] { display: none; }
.album-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 30, 36, 0.72);
}
.album-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    animation: album-pop-in 0.25s ease-out;
}
.album-modal-panel::before {
    content: '';
    flex-shrink: 0;
    height: 6px;
    background: var(--rainbow-bar);
}
@keyframes album-pop-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.album-modal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.9rem var(--space-3);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.album-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 2px; /* room for focus rings */
}
.album-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    border: 2px solid var(--accent);
    background: #fff;
    color: var(--accent-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.album-tab::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
}
.album-tab:hover { background: var(--accent-pale); }
.album-tab.is-current { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.album-tab.is-current::before { background: #fff; }
.album-modal-close {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-blue);
}
.album-modal-close:hover { background: var(--color-red-pale); color: var(--color-red); }
.album-modal-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-3);
}
.album-modal .album { display: none; margin: 0; }
.album-modal .album.is-active { display: block; }

/* ---------- Downloads ---------- */
.downloads-group-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 var(--space-4);
    font-size: 1.2rem;
}
/* Short crayon strokes either side of each group title */
.downloads-group-title::before,
.downloads-group-title::after {
    content: '';
    width: 46px;
    height: 8px;
    background: var(--color-divider);
    -webkit-mask: var(--crayon-underline) no-repeat center / 100% 100%;
    mask: var(--crayon-underline) no-repeat center / 100% 100%;
}
.downloads-grid + .downloads-group-title { margin-top: var(--space-5); }
.downloads-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4) var(--space-3);
}
.downloads-grid--guides { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-inline: auto; }
.download-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-surface);
    border: 1.5px solid color-mix(in srgb, var(--accent) 40%, #ffffff);
    border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md);
    padding: var(--space-4) var(--space-3) var(--space-3);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.download-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow-md); }
/* A strip of coloured "tape" holding each sheet to the page */
.download-card::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 74px;
    height: 22px;
    background: color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 2px;
    transform: translateX(-50%) rotate(-3deg);
}
.download-card:nth-child(even)::before { transform: translateX(-50%) rotate(3deg); }
/* Folded top-right corner, like a printed form */
.download-card::after {
    content: '';
    position: absolute;
    top: -1.5px;
    right: -1.5px;
    width: 26px;
    height: 26px;
    background: linear-gradient(225deg, var(--section-bg, var(--color-bg)) 50%, var(--accent-pale) 50%);
    border-bottom-left-radius: 6px;
    box-shadow: -2px 2px 3px rgba(22, 66, 91, 0.08);
}
.download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent-pale);
    color: var(--accent-ink);
    margin-bottom: var(--space-1);
}
.download-icon svg { width: 26px; height: 26px; }
.download-tag {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.1rem 0.7rem;
    border-radius: 999px;
    background: var(--accent-pale);
    color: var(--accent-ink);
    font-weight: 800;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.download-card h4 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.download-card p { font-size: 0.92rem; margin-bottom: 0.6rem; }
.download-card .download-meta {
    margin: auto 0 var(--space-2);
    padding-top: 0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
}
/* Chunky, toy-like PDF button in the card's own rainbow colour */
.btn-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    border: 2.5px solid var(--accent);
    background: var(--accent-pale);
    color: var(--accent-ink);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.98rem;
    box-shadow: 0 4px 0 var(--accent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-pdf svg { width: 18px; height: 18px; }
.btn-pdf:hover, .btn-pdf:focus-visible {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--accent);
}
.btn-pdf:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent); }

/* ---------- Locations ---------- */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
/* Campus card: entrance photo on top, then the map, then the details. Both cards are the same height. */
.location-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
    border: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 0 var(--accent);
    transition: transform var(--transition), box-shadow var(--transition);
}
.location-card:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--accent), var(--shadow-md); }
.location-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-bottom: 3px solid var(--accent);
}
.location-map {
    aspect-ratio: 2 / 1;
    background: var(--accent-pale);
    border-bottom: 3px solid var(--accent);
}
.location-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.location-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    padding: var(--space-3) var(--space-4) var(--space-4);
}
/* The campus name, inside the heading but shown as a pill on its own line */
.location-tag {
    display: table;
    margin-bottom: 0.6rem;
    padding: 0.2rem 0.9rem;
    border-radius: 999px;
    background: var(--accent-ink);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.location-card h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.location-kind { display: block; font-size: 0.82em; font-weight: 600; color: var(--accent-ink); }
.location-address { font-size: 1rem; margin-bottom: 0.4rem; }
.location-hours { font-weight: 700; margin-bottom: 0.4rem; }
.location-body .btn { margin-top: auto; }
.location-body .tel-link { display: inline-block; margin-bottom: var(--space-2); }
.tel-link { color: var(--accent-ink); font-weight: 700; }
.tel-link:hover { color: var(--color-blue); }

/* ---------- Contact ---------- */
.contact-whatsapp { margin-top: var(--space-2); }
.contact-list { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-blue);
    transition: color var(--transition);
}
.contact-link:hover { color: var(--accent-ink); }
.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--accent-ink);
    flex-shrink: 0;
}
.contact-icon svg { width: 18px; height: 18px; }

.follow-heading {
    margin-top: var(--space-4);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-ink);
}

.enquiry-form {
    background: var(--color-surface);
    border: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: 0 6px 0 var(--accent);
}
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.form-row { margin-bottom: var(--space-2); display: flex; flex-direction: column; gap: 0.35rem; }
.form-row label { font-weight: 700; font-size: 0.92rem; color: var(--color-blue); }
.optional { font-weight: 400; color: var(--color-text-muted); }
.form-row input, .form-row textarea {
    font: inherit;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    resize: vertical;
    transition: border-color var(--transition);
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--accent); }
.form-note { font-size: 0.85rem; margin-top: var(--space-2); }

/* ---------- Footer ---------- */
.site-footer {
    position: relative;
    background: var(--color-blue);
    color: #dbe8ee;
    padding-top: var(--space-5);
}
.site-footer::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--rainbow-bar);
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
}
.footer-inner h3 {
    color: #fff;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.footer-inner p, .footer-inner a { color: #c3d6de; font-size: 0.95rem; }
.footer-inner a:hover { color: #fff; }
.footer-inner .btn-whatsapp,
.footer-inner .btn-whatsapp:hover { color: var(--color-whatsapp-ink); }
/* The logo keeps its own cream background, which doubles as its backing on the navy footer */
.footer-logo { width: 88px; height: 88px; margin-bottom: var(--space-2); border-radius: 18px; }
.footer-name { font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.15rem; }
.footer-motto { font-style: italic; }
.footer-links ul { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.footer-contact p, .footer-locations p, .footer-banking p { margin-bottom: 0.4rem; }
.footer-social-links { display: flex; flex-direction: column; gap: 0.4rem; margin-top: var(--space-2); }
.footer-social-links a { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-social-links svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-block: var(--space-2);
    font-size: 0.82rem;
}
.footer-bottom p { margin: 0; color: #9fb7c2; } /* 5.1:1 on the navy */

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 30, 36, 0.8);
}
.lightbox-panel {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 3.5rem var(--space-3) var(--space-3);
    max-width: min(92vw, 960px);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    box-shadow: var(--shadow-md);
}
.lightbox-panel::before {
    content: '';
    position: absolute;
    left: var(--space-3); right: var(--space-3); top: 0;
    height: 5px;
    border-radius: 0 0 5px 5px;
    background: var(--rainbow-bar);
}
.lightbox-stage { position: relative; }
.lightbox-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    overflow: hidden;
    touch-action: pan-y;
}
.lightbox-visual img {
    width: auto;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}
.lightbox-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}
.lightbox-caption { font-family: var(--font-heading); font-weight: 700; color: var(--color-blue); margin: 0; }
.lightbox-counter { font-weight: 700; font-size: 0.9rem; color: var(--color-text-muted); white-space: nowrap; margin: 0; }
.lightbox-close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-blue);
}
.lightbox-close:hover { background: var(--color-red-pale); color: var(--color-red); }
.lightbox-nav {
    position: absolute;
    top: 50%;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-blue);
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
    transition: background var(--transition), color var(--transition);
}
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
.lightbox-nav:hover { background: var(--color-green-pale); color: var(--color-green-dark); }

/* ---------- Email address + Copy ----------
   The address is shown as text with a small Copy chip. "Open in Gmail" and
   "Send via Gmail" are .desktop-only: shown only where there is a mouse,
   because on phones the Gmail app drops the address and message. */
@media not ((hover: hover) and (pointer: fine)) {
    .desktop-only { display: none !important; } /* must beat .btn / .email-chip display rules */
}
.email-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.email-item .contact-link { overflow-wrap: anywhere; }
.email-actions { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.email-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.2rem 0.9rem;
    border: 2px solid var(--accent);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--accent-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.2;
    transition: background var(--transition), color var(--transition);
}
.email-chip:hover, .email-chip:focus-visible { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
/* On the navy footer */
.email-chip--dark {
    min-height: 30px;
    margin-left: 0.3rem;
    padding: 0.1rem 0.75rem;
    border-color: rgba(255, 255, 255, 0.45);
    background: transparent;
    color: #fff;
    font-size: 0.8rem;
}
.email-chip--dark:hover, .email-chip--dark:focus-visible { background: #fff; border-color: #fff; color: var(--color-blue); }
.footer-email { overflow-wrap: anywhere; }

/* Enquiry form: a required field left empty */
.form-row [aria-invalid="true"] { border-color: var(--hue-red-ink); background: var(--hue-red-pale); }

/* ---------- Quick contact: sticky bar (phones) / floating button (wider screens) ---------- */
.contact-bar { display: none; }
.contact-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.02rem;
    transition: transform 0.15s ease;
}
.contact-bar-btn--whatsapp { background: var(--color-whatsapp); color: var(--color-whatsapp-ink); }
.contact-bar-btn--call { background: var(--color-surface); color: var(--color-blue); border: 2.5px solid var(--hue-blue); }
.whatsapp-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 600; /* above the sticky header, below the album pop-up and lightbox */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-whatsapp);
    color: var(--color-whatsapp-ink);
    box-shadow: 0 6px 18px rgba(7, 59, 28, 0.35);
    transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-fab .btn-icon { width: 32px; height: 32px; }
.whatsapp-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 24px rgba(7, 59, 28, 0.4); }

/* ---------- Crayon doodles ----------
   Decorative childlike drawings (<img class="doodle"> inside a .doodle-layer),
   behind the content: the layer sits at z-index -1 inside the section's own
   stacking context and ignores the pointer. Each doodle is placed with inline
   custom properties: --t/--r/--b/--l (position), --s (width), --rot (angle),
   --dur (animation length). Keep them in padding/margin zones, never behind text.
   Sizes deliberately vary a lot: big ones tuck partly off the section edge. */
.doodle-layer {
    --doodle-scale: 1;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.doodle {
    position: absolute;
    top: var(--t, auto);
    right: var(--r, auto);
    bottom: var(--b, auto);
    left: var(--l, auto);
    width: calc(var(--s, 60px) * var(--doodle-scale));
    max-width: none;
    height: auto;
    transform: rotate(var(--rot, 0deg));
    -webkit-user-select: none;
    user-select: none;
}
/* Doodles that live in the side margins only fit on wide screens */
.doodle--wide { display: none; }
@media (min-width: 1400px) {
    .doodle--wide { display: block; }
}

/* ==========================================================================
   Motion
   Everything that moves by itself lives here, and only runs for visitors who
   haven't asked for reduced motion. Only transform and opacity are animated.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Scroll reveal: script.js adds .reveal, then .is-visible once in view.
       fill-mode "backwards" hands the transform back afterwards, so hover lifts still work. */
    .reveal { opacity: 0; }
    .reveal.is-visible {
        opacity: 1;
        animation: reveal-up 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) var(--reveal-delay, 0s) backwards;
    }
    .reveal--pop.is-visible {
        animation-name: reveal-pop;
        animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1);
    }

    /* Doodles drift at different speeds so they never move in step.
       script.js pauses a section's doodles while it is off screen. */
    .doodle--bob { animation: doodle-bob var(--dur, 7s) ease-in-out infinite; }
    .doodle--float { animation: doodle-float var(--dur, 9s) ease-in-out infinite; }
    .doodle--wiggle { animation: doodle-wiggle var(--dur, 6s) ease-in-out infinite; }
    .doodle--drift { animation: doodle-drift var(--dur, 20s) ease-in-out infinite; }
    .doodle--spin { animation: doodle-spin var(--dur, 60s) linear infinite; }
    .doodle-layer.is-paused .doodle { animation-play-state: paused; }

    /* Hero: "Speel-Speel" (play-play) hops, one word after the other */
    .hero-word { animation: word-bounce 2.8s ease-in-out infinite; }
    .hero-word + .hero-word { animation-delay: 0.3s; }

    /* The floating WhatsApp button gives a little wave now and then */
    .whatsapp-fab .btn-icon { animation: fab-wave 6s ease-in-out 2s infinite; }

    /* Tap feedback: buttons, links and cards squish the moment a finger lands
       (a fast 0.08s press), then spring back with their normal transition */
    .btn:active, .contact-bar-btn:active, .whatsapp-fab:active,
    .nav-toggle:active, .album-tab:active, .album-back:active, .email-chip:active,
    .album-modal-close:active, .lightbox-close:active { transform: scale(0.94); transition-duration: 0.08s; }
    .lightbox-nav:active { transform: translateY(-50%) scale(0.9); transition-duration: 0.08s; }
    .primary-nav-list a:active, .contact-link:active, .tel-link:active,
    .footer-links a:active, .footer-social-links a:active { opacity: 0.6; transition: opacity 0.08s; }
    .offer-card:active, .learn-card:active, .download-card:active,
    .location-card:active, .stat:active, .gallery-item:active,
    .album-card:active { transform: scale(0.97); transition-duration: 0.08s; }
}

@keyframes reveal-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes reveal-pop { from { opacity: 0; transform: translateY(18px) scale(0.86); } }
@keyframes doodle-bob {
    0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
    50% { transform: rotate(var(--rot, 0deg)) translateY(-10px); }
}
@keyframes doodle-float {
    0%, 100% { transform: rotate(var(--rot, 0deg)) translate(0, 0); }
    33% { transform: rotate(calc(var(--rot, 0deg) + 7deg)) translate(8px, -10px); }
    66% { transform: rotate(calc(var(--rot, 0deg) - 5deg)) translate(-6px, -3px); }
}
@keyframes doodle-wiggle {
    0%, 100% { transform: rotate(calc(var(--rot, 0deg) - 5deg)); }
    50% { transform: rotate(calc(var(--rot, 0deg) + 5deg)); }
}
@keyframes doodle-drift {
    0%, 100% { transform: rotate(var(--rot, 0deg)) translateX(-12px); }
    50% { transform: rotate(var(--rot, 0deg)) translateX(22px); }
}
@keyframes doodle-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes word-bounce {
    0%, 45%, 100% { transform: translateY(0) rotate(0deg); }
    20% { transform: translateY(-8px) rotate(-3deg); }
    32% { transform: translateY(0) rotate(1deg); }
}
@keyframes fab-wave {
    0%, 12%, 100% { transform: rotate(0deg); }
    3% { transform: rotate(-14deg); }
    6% { transform: rotate(12deg); }
    9% { transform: rotate(-8deg); }
}
@keyframes nav-item-in { from { opacity: 0; transform: translateY(-8px); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
    /* Less side margin: shrink the doodles so they stay inside the padding bands */
    .doodle-layer { --doodle-scale: 0.82; }
    /* Seven nav links: close them up a little so the full nav still fits */
    .primary-nav { gap: var(--space-3); }
    .primary-nav-list { gap: var(--space-2); }
}

@media (max-width: 1100px) {
    .album-picker { --cols: 2; max-width: 780px; }
    .album-card { padding-inline: var(--space-3); }
}

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { order: -1; max-width: 480px; margin-inline: auto; width: 100%; }
    .hero-visual::before { left: -8px; width: 72px; }
    .hero-visual::after { right: -8px; width: 72px; }
    .section-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .section-grid .section-heading { margin-bottom: 0; }
    .offer-grid { grid-template-columns: repeat(2, 1fr); }
    .founder-layout { grid-template-columns: 1fr; gap: var(--space-5); }
    .founder-aside { max-width: 280px; }
    .since-badge { right: -14px; width: 108px; height: 108px; }
    .since-badge-year { font-size: 2.1rem; }
    .learn-grid { gap: var(--space-2); }
    .section-heading .art-frame { max-width: 520px; margin-inline: auto; }
    /* Five stats: "years" takes the full first row, the other four pair up */
    .stats-list { grid-template-columns: repeat(2, 1fr); }
    .stat--since { grid-column: 1 / -1; }
    .locations-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
    .footer-inner { grid-template-columns: repeat(2, 1fr); }
    .downloads-grid { gap: var(--space-4) var(--space-2); }
    .download-card { padding-inline: var(--space-2); }
    .doodle-layer { --doodle-scale: 0.7; }

    .gallery-preview {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: repeat(2, clamp(120px, 22vw, 180px));
    }
    .gallery-preview > li:nth-child(n + 4) { display: none; }
    .album-picker { --gap-x: var(--space-2); row-gap: var(--space-4); }
    .album-card { padding-inline: var(--space-2); }
    .album-btn { padding-inline: 1rem; font-size: 0.95rem; }
}

/* The full desktop nav (seven links + the enrol button) needs about 1040px, so tablets and
   small laptops get the menu button too */
@media (max-width: 1080px) {
    .nav-toggle { display: inline-flex; }
    /* Menu panel drops down from under the header */
    .primary-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        max-height: calc(100vh - var(--header-offset));
        max-height: calc(100dvh - var(--header-offset));
        overflow-y: auto;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        box-shadow: var(--shadow-md);
        padding: var(--space-3);
        transform: translateY(-14px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s linear 0.28s;
    }
    .primary-nav.is-open {
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }
    .primary-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    /* Drawer: each link gets a colour tab, showing the rainbow order top to bottom */
    .primary-nav-list a {
        display: block;
        padding: 0.85rem 0.9rem;
        border-bottom: 1px solid var(--color-border);
        box-shadow: inset 5px 0 0 var(--accent);
    }
    .primary-nav-list a::after { display: none; }
    .primary-nav-list a:hover, .primary-nav-list a.is-current { background: var(--accent-pale); }
    .nav-cta { text-align: center; }
}

@media (max-width: 760px) {
    .album-picker { --cols: 1; max-width: 400px; }
    .downloads-grid, .downloads-grid--guides { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }

    /* Sticky quick-contact bar replaces the floating button */
    .whatsapp-fab { display: none; }
    .contact-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 600; /* above the sticky header, below the album pop-up and lightbox */
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -4px 16px rgba(22, 66, 91, 0.16);
    }
    .contact-bar::before {
        content: '';
        position: absolute;
        left: 0; right: 0; top: 0;
        height: 4px;
        background: var(--rainbow-bar);
    }
    /* Leave room so the bar never covers the end of the footer */
    .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 1080px) and (prefers-reduced-motion: no-preference) {
    /* Menu links arrive one after another */
    .primary-nav.is-open .primary-nav-list li,
    .primary-nav.is-open .nav-cta { animation: nav-item-in 0.32s ease backwards; }
    .primary-nav.is-open .primary-nav-list li:nth-child(2) { animation-delay: 0.04s; }
    .primary-nav.is-open .primary-nav-list li:nth-child(3) { animation-delay: 0.08s; }
    .primary-nav.is-open .primary-nav-list li:nth-child(4) { animation-delay: 0.12s; }
    .primary-nav.is-open .primary-nav-list li:nth-child(5) { animation-delay: 0.16s; }
    .primary-nav.is-open .primary-nav-list li:nth-child(6) { animation-delay: 0.2s; }
    .primary-nav.is-open .primary-nav-list li:nth-child(7) { animation-delay: 0.24s; }
    .primary-nav.is-open .nav-cta { animation-delay: 0.28s; }
}

@media (max-width: 620px) {
    .offer-grid { grid-template-columns: 1fr 1fr; }
    .learn-grid { grid-template-columns: 1fr; }
    .learn-card { grid-template-columns: 108px 1fr; }
    .learn-media { min-height: 108px; }
    .founder-letter { padding: var(--space-3); }
    .footer-inner { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { text-align: center; }
    .form-actions .btn { flex: 1 1 100%; }
    .contact-whatsapp { display: flex; }
    .location-body { padding: var(--space-3); }
    /* Albums become a swipeable strip: two photos stacked per swipe, the next pair peeking in */
    .gallery-grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: 84%;
        gap: var(--space-2);
        margin-inline: calc(-1 * var(--space-2));
        padding: 4px var(--space-2) var(--space-1);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--space-2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gallery-grid::-webkit-scrollbar { display: none; }
    .gallery-grid > li { scroll-snap-align: start; }

    /* Highlights become a swipeable carousel: one picture at a time, the next one peeking in */
    .gallery-preview {
        display: flex;
        gap: var(--space-2);
        margin-inline: calc(-1 * var(--space-3));
        padding: 6px var(--space-3) var(--space-2);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--space-3);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gallery-preview::-webkit-scrollbar { display: none; }
    .gallery-preview > li,
    .gallery-preview > li:nth-child(n + 4) { display: block; flex: 0 0 82%; scroll-snap-align: start; }
    .gallery-preview .gallery-item { aspect-ratio: 4 / 3; height: auto; }
    .swipe-hint {
        display: block;
        margin: 0;
        text-align: center;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--accent-ink);
    }
    .album .swipe-hint { margin-bottom: var(--space-1); }
    .lightbox { padding: var(--space-1); }
    .lightbox-panel { padding: 3.25rem var(--space-2) var(--space-2); max-width: 100%; }
    .lightbox-meta { flex-direction: column; gap: 0.15rem; }

    /* Album pop-up becomes a full-screen sheet */
    .album-modal { padding: 0; }
    .album-modal-panel { max-height: none; height: 100%; border-radius: 0; }
    .album-modal-bar { padding: 0.6rem var(--space-2); }
    .album-modal-body { padding: var(--space-2); }
    .album-head-art { width: 64px; }
    /* The five album tabs sit on two rows (three, then two) so none hide off-screen */
    .album-tabs { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem; }
    .album-tabs .album-tab { grid-column: span 2; }
    .album-tabs .album-tab:nth-child(n+4) { grid-column: span 3; }
    .album-tab { justify-content: center; min-height: 40px; padding: 0.3rem 0.35rem; font-size: 0.84rem; line-height: 1.15; text-align: center; white-space: normal; }
    .album-tab::before { display: none; }

    /* Doodles: only two or three small ones per section, in the top and bottom bands */
    .doodle-layer { --doodle-scale: 0.58; }
    .doodle--desk { display: none; }
}

@media (max-width: 420px) {
    .offer-grid { grid-template-columns: 1fr; }
    .album-btn { font-size: 0.92rem; padding-inline: 0.85rem; }
    .stat { padding: 0.75rem 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .confetti { display: none; }
}