@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap");
/* --- src/styles/tokens/fonts.css --- */
/* Happy Classes webfonts.
   SUBSTITUTION NOTE: the 2026 wordmark is set in a heavy rounded geometric face.
   No licensed binary was supplied, so the nearest Google Fonts matches are used:
   - Baloo 2 (ExtraBold/Bold)  -> display / wordmark-adjacent headlines (Latin + Latin-ext, NO Cyrillic)
   - Nunito (400-900)          -> body, UI, and the Cyrillic display fallback (Latin + Cyrillic)
   Replace these @import lines with local @font-face rules if real binaries arrive. */


:root{
  --hc-font-display:"Baloo 2","Nunito","Segoe UI Rounded","Trebuchet MS",system-ui,sans-serif;
  --hc-font-body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --hc-font-cyrillic:"Nunito","Segoe UI",system-ui,sans-serif;
  --hc-font-mono:ui-monospace,"SFMono-Regular","Menlo","Consolas",monospace;
  --font-display:var(--hc-font-display);
  --font-body:var(--hc-font-body);
  --font-mono:var(--hc-font-mono);
}

/* --- src/styles/tokens/colors.css --- */
/* Base ramps. Steps marked (logo) are sampled directly from HC_logo_2026.png. */
:root{
  /* Turquoise - primary brand hue */
  --hc-turquoise-50:#E6FEFE;
  --hc-turquoise-100:#C2FBFC;
  --hc-turquoise-200:#8DF6F7;
  --hc-turquoise-300:#4DEEF0;
  --hc-turquoise-400:#00E1E2;  /* (logo) owl body + brand cyan */
  --hc-turquoise-500:#00C4C8;
  --hc-turquoise-600:#00A2AA;
  --hc-turquoise-700:#007D87;
  --hc-turquoise-800:#055E67;
  --hc-turquoise-900:#0B4249;
  --hc-turquoise-950:#062A30;

  /* Sunbeam - secondary brand hue */
  --hc-sunbeam-50:#FFF8E1;
  --hc-sunbeam-100:#FFECB3;
  --hc-sunbeam-200:#FFE082;
  --hc-sunbeam-300:#FFD24D;
  --hc-sunbeam-400:#FDB903;  /* (logo) beak + feet */
  --hc-sunbeam-500:#E9A400;
  --hc-sunbeam-600:#C28500;
  --hc-sunbeam-700:#96660A;
  --hc-sunbeam-800:#6E4B0C;
  --hc-sunbeam-900:#4A330B;

  /* Ink - neutrals, pulled off the wordmark and the graduation cap */
  --hc-ink-950:#161717;
  --hc-ink-900:#222222;  /* (logo) wordmark */
  --hc-ink-800:#333535;
  --hc-ink-700:#4A4D4D;
  --hc-ink-600:#676B6B;
  --hc-ink-500:#848484;  /* (logo) cap shadow */
  --hc-ink-400:#A5A8A8;
  --hc-ink-300:#B4B4B4;  /* (logo) cap */
  --hc-ink-200:#D6D8D8;
  --hc-ink-100:#E9EBEB;
  --hc-ink-50:#F5F7F7;
  --hc-white:#FFFFFF;

  /* Subject hues - INTENTIONAL EXTENSION (2026). Not in the original site;
     added so course families can be colour-coded. Hue-spaced against the two
     brand hues in oklch so they sit next to turquoise without fighting it. */
  --hc-coral-100:#FFE3DF;
  --hc-coral-400:#FF6B5E;
  --hc-coral-600:#D93F31;
  --hc-berry-100:#FFE0EE;
  --hc-berry-400:#FF5CA8;
  --hc-berry-600:#D42D7C;
  --hc-leaf-100:#DDF7E6;
  --hc-leaf-400:#48D07A;
  --hc-leaf-600:#1F9B4E;
}

/* Semantic aliases - always author against these, not the ramps. */
:root{
  --surface-page:var(--hc-white);
  --surface-subtle:var(--hc-ink-50);
  --surface-tint:var(--hc-turquoise-50);
  --surface-tint-strong:var(--hc-turquoise-100);
  --surface-warm:var(--hc-sunbeam-50);
  --surface-card:var(--hc-white);
  --surface-card-hover:var(--hc-turquoise-50);
  --surface-inverse:var(--hc-turquoise-950);
  --surface-inverse-alt:var(--hc-turquoise-900);
  --surface-scrim:rgba(6,42,48,.56);

  --text-strong:var(--hc-ink-900);
  --text-body:var(--hc-ink-800);
  --text-muted:var(--hc-ink-600);
  --text-faint:var(--hc-ink-400);
  --text-inverse:var(--hc-white);
  --text-inverse-muted:var(--hc-turquoise-200);
  --text-on-brand:var(--hc-turquoise-950);
  --text-brand:var(--hc-turquoise-700);
  --text-link:var(--hc-turquoise-700);
  --text-link-hover:var(--hc-turquoise-900);

  --border-subtle:var(--hc-ink-100);
  --border-default:var(--hc-ink-200);
  --border-strong:var(--hc-ink-900);
  --border-brand:var(--hc-turquoise-400);
  --border-inverse:rgba(255,255,255,.18);

  --action-primary-bg:var(--hc-turquoise-400);
  --action-primary-fg:var(--hc-turquoise-950);
  --action-primary-bg-hover:var(--hc-turquoise-300);
  --action-primary-bg-active:var(--hc-turquoise-500);
  --action-secondary-bg:var(--hc-sunbeam-400);
  --action-secondary-fg:var(--hc-sunbeam-900);
  --action-secondary-bg-hover:var(--hc-sunbeam-300);
  --action-secondary-bg-active:var(--hc-sunbeam-500);
  --action-ink-bg:var(--hc-ink-900);
  --action-ink-fg:var(--hc-white);
  --action-ink-bg-hover:var(--hc-ink-800);
  --action-quiet-fg:var(--hc-ink-800);
  --action-quiet-bg-hover:var(--hc-turquoise-50);
  --action-disabled-bg:var(--hc-ink-100);
  --action-disabled-fg:var(--hc-ink-400);

  --focus-ring:var(--hc-turquoise-600);
  --focus-ring-offset:var(--hc-white);

  --status-success:var(--hc-leaf-600);
  --status-success-bg:var(--hc-leaf-100);
  --status-warning:var(--hc-sunbeam-700);
  --status-warning-bg:var(--hc-sunbeam-100);
  --status-danger:var(--hc-coral-600);
  --status-danger-bg:var(--hc-coral-100);
  --status-info:var(--hc-turquoise-700);
  --status-info-bg:var(--hc-turquoise-100);

  /* Course-family colour coding */
  --subject-tech:var(--hc-turquoise-400);
  --subject-tech-bg:var(--hc-turquoise-100);
  --subject-language:var(--hc-coral-400);
  --subject-language-bg:var(--hc-coral-100);
  --subject-art:var(--hc-berry-400);
  --subject-art-bg:var(--hc-berry-100);
  --subject-music:var(--hc-sunbeam-400);
  --subject-music-bg:var(--hc-sunbeam-100);
  --subject-camp:var(--hc-leaf-400);
  --subject-camp-bg:var(--hc-leaf-100);
}

/* --- src/styles/tokens/typography.css --- */
:root{
  --text-display-1:4rem;      /* 64px - hero headline, desktop only */
  --text-display-2:3rem;      /* 48px - section opener */
  --text-display-3:2.25rem;   /* 36px - page title */
  --text-heading-1:1.75rem;   /* 28px */
  --text-heading-2:1.375rem;  /* 22px - card title */
  --text-heading-3:1.125rem;  /* 18px */
  --text-body-lg:1.125rem;    /* 18px - lede */
  --text-body:1rem;           /* 16px */
  --text-body-sm:0.9375rem;   /* 15px */
  --text-caption:0.8125rem;   /* 13px */
  --text-overline:0.75rem;    /* 12px */

  --leading-tight:1.05;
  --leading-snug:1.2;
  --leading-normal:1.45;
  --leading-relaxed:1.65;

  --tracking-tight:-0.02em;
  --tracking-snug:-0.01em;
  --tracking-normal:0em;
  --tracking-wide:0.04em;
  --tracking-overline:0.14em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;
  --weight-black:900;

  /* Role aliases */
  --type-hero-family:var(--hc-font-display);
  --type-hero-weight:var(--weight-extrabold);
  --type-hero-tracking:var(--tracking-tight);
  --type-heading-family:var(--hc-font-display);
  --type-heading-weight:var(--weight-bold);
  --type-body-family:var(--hc-font-body);
  --type-body-weight:var(--weight-regular);
  --type-label-family:var(--hc-font-body);
  --type-label-weight:var(--weight-bold);
  --type-overline-transform:uppercase;
}

/* --- src/styles/tokens/spacing.css --- */
:root{
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:40px;
  --space-11:48px;
  --space-12:64px;
  --space-13:80px;
  --space-14:96px;
  --space-15:120px;

  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-2xl:36px;
  --radius-pill:999px;
  --radius-card:var(--radius-lg);
  --radius-control:var(--radius-pill);
  --radius-field:var(--radius-md);
  --radius-media:var(--radius-lg);

  --container-max:1200px;
  --container-narrow:760px;
  --container-wide:1440px;
  --gutter:24px;
  --gutter-lg:40px;
  --section-y:96px;
  --section-y-sm:64px;
  --header-h:88px;
  --control-h-sm:36px;
  --control-h-md:44px;
  --control-h-lg:56px;
  --hit-min:44px;
}

/* --- src/styles/tokens/elevation.css --- */
:root{
  /* Shadows are tinted with deep teal, never neutral black. */
  --shadow-xs:0 1px 2px rgba(11,66,73,.06);
  --shadow-sm:0 2px 6px rgba(11,66,73,.08);
  --shadow-md:0 6px 18px rgba(11,66,73,.10);
  --shadow-lg:0 14px 36px rgba(11,66,73,.12);
  --shadow-xl:0 24px 60px rgba(11,66,73,.16);
  --shadow-brand:0 8px 24px rgba(0,196,200,.30);
  --shadow-sunbeam:0 8px 24px rgba(253,185,3,.32);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.55);
  --shadow-none:none;

  --border-w-hair:1px;
  --border-w-default:2px;
  --border-w-bold:3px;
  --ring-focus:0 0 0 3px var(--focus-ring-offset),0 0 0 6px color-mix(in srgb,var(--focus-ring) 55%,transparent);
  /* Same two-ring geometry, retinted for surfaces the white spacer would blow out. */
  --ring-focus-inverse:0 0 0 3px var(--surface-inverse),0 0 0 6px var(--hc-turquoise-300);
  --ring-focus-on-brand:0 0 0 3px transparent,0 0 0 4px var(--hc-turquoise-950);

  --blur-sm:6px;
  --blur-md:14px;
  --blur-lg:24px;
  --glass-bg:rgba(255,255,255,.72);
  --glass-bg-inverse:rgba(6,42,48,.62);
}

/* --- src/styles/tokens/motion.css --- */
:root{
  --dur-instant:90ms; /* @kind other */
  --dur-fast:160ms; /* @kind other */
  --dur-base:240ms; /* @kind other */
  --dur-slow:400ms; /* @kind other */
  --dur-lazy:600ms; /* @kind other */
  --dur-gallery:1.6s; /* @kind other */

  --ease-out-soft:cubic-bezier(.22,1,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --ease-linear:linear; /* @kind other */

  --motion-hover:background-color var(--dur-fast) var(--ease-out-soft),border-color var(--dur-fast) var(--ease-out-soft),color var(--dur-fast) var(--ease-out-soft),box-shadow var(--dur-fast) var(--ease-out-soft),transform var(--dur-fast) var(--ease-out-soft); /* @kind other */
  --motion-enter:opacity var(--dur-base) var(--ease-bounce),transform var(--dur-base) var(--ease-bounce); /* @kind other */
  --lift-hover:translateY(-3px); /* @kind other */
  --press-scale:scale(.97); /* @kind other */
}

/* --- src/styles/tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-normal);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-extrabold);color:var(--text-strong);letter-spacing:var(--tracking-snug);line-height:var(--leading-snug);margin:0}
p{margin:0}
a{color:var(--text-link);text-decoration-color:color-mix(in srgb,var(--text-link) 40%,transparent);text-decoration-thickness:2px;text-underline-offset:3px;transition:var(--motion-hover)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
img{max-width:100%;display:block}
button{font:inherit}
::selection{background:var(--hc-turquoise-200);color:var(--hc-turquoise-950)}

/* --- src/styles/hc-components.css --- */
/* Happy Classes component styles. Every value resolves to a token in tokens/. */

/* ---------- Button ---------- */
.hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);font-family:var(--hc-font-body);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-snug);border:var(--border-w-default) solid transparent;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--motion-hover);box-shadow:var(--shadow-sm)}
.hc-btn:hover{transform:var(--lift-hover);text-decoration:none}
.hc-btn:active{transform:var(--press-scale);box-shadow:var(--shadow-xs)}
.hc-btn--sm{min-height:var(--control-h-sm);padding:0 var(--space-6);font-size:var(--text-body-sm)}
.hc-btn--md{min-height:var(--control-h-md);padding:0 var(--space-8);font-size:var(--text-body)}
.hc-btn--lg{min-height:var(--control-h-lg);padding:0 var(--space-9);font-size:var(--text-body-lg)}
.hc-btn--block{display:flex;width:100%}
.hc-btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.hc-btn--primary:hover{background:var(--action-primary-bg-hover);box-shadow:var(--shadow-brand)}
.hc-btn--primary:active{background:var(--action-primary-bg-active)}
.hc-btn--secondary{background:var(--action-secondary-bg);color:var(--action-secondary-fg)}
.hc-btn--secondary:hover{background:var(--action-secondary-bg-hover);box-shadow:var(--shadow-sunbeam)}
.hc-btn--secondary:active{background:var(--action-secondary-bg-active)}
.hc-btn--ink{background:var(--action-ink-bg);color:var(--action-ink-fg)}
.hc-btn--ink:hover{background:var(--action-ink-bg-hover)}
.hc-btn--outline{background:transparent;color:var(--text-strong);border-color:var(--border-strong);box-shadow:none}
.hc-btn--outline:hover{background:var(--action-quiet-bg-hover);box-shadow:var(--shadow-sm)}
.hc-btn--ghost{background:transparent;color:var(--action-quiet-fg);box-shadow:none}
.hc-btn--ghost:hover{background:var(--action-quiet-bg-hover);box-shadow:none}
.hc-btn--onDark{background:var(--hc-white);color:var(--hc-turquoise-900)}
.hc-btn--onDark:hover{background:var(--hc-turquoise-100)}
.hc-btn[disabled],.hc-btn[aria-disabled="true"]{background:var(--action-disabled-bg);color:var(--action-disabled-fg);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}

/* ---------- IconButton ---------- */
.hc-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:var(--border-w-default) solid transparent;border-radius:var(--radius-pill);cursor:pointer;background:transparent;color:var(--action-quiet-fg);transition:var(--motion-hover)}
.hc-iconbtn:hover{background:var(--action-quiet-bg-hover);transform:var(--lift-hover)}
.hc-iconbtn:active{transform:var(--press-scale)}
.hc-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.hc-iconbtn--md{width:var(--control-h-md);height:var(--control-h-md)}
.hc-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.hc-iconbtn--solid{background:var(--action-primary-bg);color:var(--action-primary-fg);box-shadow:var(--shadow-sm)}
.hc-iconbtn--solid:hover{background:var(--action-primary-bg-hover);box-shadow:var(--shadow-brand)}
.hc-iconbtn--outline{border-color:var(--border-default);background:var(--surface-card)}
.hc-iconbtn--onDark{color:var(--hc-white)}
.hc-iconbtn--onDark:hover{background:rgba(255,255,255,.14)}
.hc-iconbtn[disabled]{color:var(--action-disabled-fg);background:transparent;cursor:not-allowed;pointer-events:none}

/* ---------- Badge / Tag ---------- */
.hc-badge{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--hc-font-body);font-weight:var(--weight-extrabold);font-size:var(--text-caption);line-height:1;padding:var(--space-4) var(--space-5);border-radius:var(--radius-pill);white-space:nowrap}
.hc-badge--sm{font-size:var(--text-overline);padding:var(--space-3) var(--space-4)}
.hc-badge--tech{background:var(--subject-tech-bg);color:var(--hc-turquoise-800)}
.hc-badge--language{background:var(--subject-language-bg);color:var(--hc-coral-600)}
.hc-badge--art{background:var(--subject-art-bg);color:var(--hc-berry-600)}
.hc-badge--music{background:var(--subject-music-bg);color:var(--hc-sunbeam-800)}
.hc-badge--camp{background:var(--subject-camp-bg);color:var(--hc-leaf-600)}
.hc-badge--neutral{background:var(--hc-ink-100);color:var(--text-body)}
.hc-badge--ink{background:var(--hc-ink-900);color:var(--hc-white)}
.hc-badge--brand{background:var(--hc-turquoise-400);color:var(--hc-turquoise-950)}
.hc-badge--success{background:var(--status-success-bg);color:var(--status-success)}
.hc-badge--warning{background:var(--status-warning-bg);color:var(--status-warning)}
.hc-badge--danger{background:var(--status-danger-bg);color:var(--status-danger)}
.hc-tag{display:inline-flex;align-items:center;gap:var(--space-4);font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:var(--text-body);background:var(--surface-page);border:var(--border-w-hair) solid var(--border-default);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-5);white-space:nowrap}
.hc-tag__x{display:inline-flex;border:none;background:transparent;padding:0;cursor:pointer;color:var(--text-muted);transition:var(--motion-hover)}
.hc-tag__x:hover{color:var(--text-strong)}

/* ---------- FilterChip ---------- */
.hc-chip{display:inline-flex;align-items:center;gap:var(--space-4);min-height:var(--control-h-md);padding:0 var(--space-7);border-radius:var(--radius-pill);border:var(--border-w-default) solid var(--border-default);background:var(--surface-page);color:var(--text-body);font-family:var(--hc-font-body);font-weight:var(--weight-bold);font-size:var(--text-body-sm);cursor:pointer;transition:var(--motion-hover)}
.hc-chip:hover{border-color:var(--border-brand);background:var(--surface-tint);transform:var(--lift-hover)}
.hc-chip:active{transform:var(--press-scale)}
.hc-chip[aria-pressed="true"]{background:var(--hc-turquoise-400);border-color:var(--hc-turquoise-400);color:var(--hc-turquoise-950);box-shadow:var(--shadow-brand)}

/* ---------- Card ---------- */
.hc-card{background:var(--surface-card);border:var(--border-w-hair) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden}
.hc-card--pad{padding:var(--space-8)}
.hc-card--padLg{padding:var(--space-11)}
.hc-card--flat{box-shadow:none}
.hc-card--raised{box-shadow:var(--shadow-md);border-color:transparent}
.hc-card--tint{background:var(--surface-tint);border-color:transparent}
.hc-card--warm{background:var(--surface-warm);border-color:transparent}
.hc-card--inverse{background:var(--surface-inverse);border-color:var(--border-inverse);color:var(--text-inverse)}
.hc-card--interactive{cursor:pointer;transition:var(--motion-hover);text-decoration:none;color:inherit;display:block}
.hc-card--interactive:hover{transform:var(--lift-hover);box-shadow:var(--shadow-lg);border-color:var(--border-brand)}
.hc-card--interactive:active{transform:var(--press-scale)}

/* ---------- Fields ---------- */
.hc-field{display:flex;flex-direction:column;gap:var(--space-4)}
.hc-field__label{font-family:var(--hc-font-body);font-weight:var(--weight-extrabold);font-size:var(--text-body-sm);color:var(--text-strong)}
.hc-field__req{color:var(--status-danger);margin-left:var(--space-2)}
.hc-field__hint{font-size:var(--text-caption);color:var(--text-muted)}
.hc-field__error{font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--status-danger)}
.hc-input,.hc-select,.hc-textarea{width:100%;font-family:var(--hc-font-body);font-size:var(--text-body);color:var(--text-strong);background:var(--surface-page);border:var(--border-w-default) solid var(--border-default);border-radius:var(--radius-field);padding:0 var(--space-6);min-height:var(--control-h-md);transition:var(--motion-hover)}
.hc-textarea{padding:var(--space-5) var(--space-6);min-height:120px;resize:vertical;line-height:var(--leading-normal)}
.hc-input::placeholder,.hc-textarea::placeholder{color:var(--text-faint)}
.hc-input:hover,.hc-select:hover,.hc-textarea:hover{border-color:var(--hc-ink-300)}
.hc-input:focus,.hc-select:focus,.hc-textarea:focus{outline:none;border-color:var(--hc-turquoise-400);box-shadow:var(--shadow-brand)}
.hc-input[aria-invalid="true"],.hc-select[aria-invalid="true"],.hc-textarea[aria-invalid="true"]{border-color:var(--status-danger)}
.hc-input[disabled],.hc-select[disabled],.hc-textarea[disabled]{background:var(--hc-ink-50);color:var(--text-faint);cursor:not-allowed}
.hc-input--lg{min-height:var(--control-h-lg);font-size:var(--text-body-lg)}
.hc-select{appearance:none;padding-right:var(--space-11);cursor:pointer}
.hc-select-wrap{position:relative;display:block}
.hc-select-wrap__caret{position:absolute;right:var(--space-6);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted)}
.hc-check{display:inline-flex;align-items:center;gap:var(--space-5);cursor:pointer;font-size:var(--text-body-sm);color:var(--text-body);min-height:var(--hit-min)}
.hc-check__box{flex:0 0 auto;width:24px;height:24px;border:var(--border-w-default) solid var(--border-default);border-radius:var(--radius-xs);background:var(--surface-page);display:inline-flex;align-items:center;justify-content:center;transition:var(--motion-hover)}
.hc-check:hover .hc-check__box{border-color:var(--border-brand)}
.hc-check__box--round{border-radius:var(--radius-pill)}
.hc-check__box--on{background:var(--hc-turquoise-400);border-color:var(--hc-turquoise-400)}
.hc-check__box--on.hc-check__box--round::after{content:"";width:10px;height:10px;border-radius:var(--radius-pill);background:var(--hc-turquoise-950)}
.hc-check--disabled{color:var(--text-faint);cursor:not-allowed}
.hc-switch{display:inline-flex;align-items:center;gap:var(--space-5);cursor:pointer;font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:var(--text-body);min-height:var(--hit-min)}
.hc-switch__track{flex:0 0 auto;width:52px;height:30px;border-radius:var(--radius-pill);background:var(--hc-ink-200);padding:3px;display:inline-flex;transition:var(--motion-hover)}
.hc-switch__track--on{background:var(--hc-turquoise-400)}
.hc-switch__knob{width:24px;height:24px;border-radius:var(--radius-pill);background:var(--hc-white);box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-bounce)}
.hc-switch__track--on .hc-switch__knob{transform:translateX(22px)}
.hc-switch--disabled{color:var(--text-faint);cursor:not-allowed}
.hc-switch--disabled .hc-switch__track{background:var(--hc-ink-100)}

/* ---------- SectionHeading ---------- */
.hc-sh{display:flex;flex-direction:column;gap:var(--space-5)}
.hc-sh--center{align-items:center;text-align:center}
.hc-sh__over{font-family:var(--hc-font-body);font-weight:var(--weight-extrabold);font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-brand)}
.hc-sh__title{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-display-3);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0}
.hc-sh__title--lg{font-size:var(--text-display-2)}
.hc-sh__lede{font-size:var(--text-body-lg);color:var(--text-muted);max-width:60ch;line-height:var(--leading-relaxed)}
.hc-sh--inverse .hc-sh__title{color:var(--text-inverse)}
.hc-sh--inverse .hc-sh__lede{color:var(--text-inverse-muted)}
.hc-sh--inverse .hc-sh__over{color:var(--hc-turquoise-300)}

/* ---------- CourseCard ---------- */
.hc-course{display:flex;flex-direction:column;background:var(--surface-card);border:var(--border-w-hair) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden;text-decoration:none;color:inherit;transition:var(--motion-hover)}
.hc-course:hover{transform:var(--lift-hover);box-shadow:var(--shadow-lg);border-color:var(--border-brand);text-decoration:none}
.hc-course:active{transform:var(--press-scale)}
.hc-course__media{position:relative;aspect-ratio:382/226;background:var(--surface-tint);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hc-course__media img{width:100%;height:100%;object-fit:contain}
.hc-course__badges{position:absolute;top:var(--space-5);left:var(--space-5);display:flex;gap:var(--space-4);flex-wrap:wrap}
.hc-course__body{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-7);flex:1}
.hc-course__title{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-2);line-height:var(--leading-snug);color:var(--text-strong);margin:0}
.hc-course__desc{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-normal)}
.hc-course__meta{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);margin-top:auto;padding-top:var(--space-5);border-top:var(--border-w-hair) solid var(--border-subtle);font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted)}
.hc-course__metaItem{display:inline-flex;align-items:center;gap:var(--space-3)}
.hc-course__rail{height:6px;width:100%}

/* ---------- CampCard ---------- */
.hc-camp{display:grid;grid-template-columns:104px 1fr;gap:var(--space-7);align-items:center;background:var(--surface-card);border:var(--border-w-hair) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);padding:var(--space-6);text-decoration:none;color:inherit;transition:var(--motion-hover)}
.hc-camp:hover{transform:var(--lift-hover);box-shadow:var(--shadow-lg);border-color:var(--border-brand);text-decoration:none}
.hc-camp__thumb{width:104px;height:104px;border-radius:var(--radius-md);background:var(--subject-camp-bg);overflow:hidden;display:flex;align-items:center;justify-content:center}
.hc-camp__thumb img{width:100%;height:100%;object-fit:cover}
.hc-camp__body{display:flex;flex-direction:column;gap:var(--space-4)}
.hc-camp__title{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-2);color:var(--text-strong);margin:0}
.hc-camp__dates{display:inline-flex;align-items:center;gap:var(--space-3);font-weight:var(--weight-extrabold);font-size:var(--text-body-sm);color:var(--text-brand)}
.hc-camp__row{display:flex;flex-wrap:wrap;gap:var(--space-4)}

/* ---------- FeatureTile ---------- */
.hc-tile{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-8);background:var(--surface-card);border-radius:var(--radius-card);border:var(--border-w-hair) solid var(--border-subtle);box-shadow:var(--shadow-xs)}
.hc-tile--tint{background:var(--surface-tint);border-color:transparent;box-shadow:none}
.hc-tile__icon{width:56px;height:56px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--surface-tint-strong);color:var(--hc-turquoise-800);flex:0 0 auto}
.hc-tile__title{font-family:var(--hc-font-display);font-weight:var(--weight-bold);font-size:var(--text-heading-3);color:var(--text-strong);margin:0}
.hc-tile__text{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-relaxed)}

/* ---------- Testimonial ---------- */
.hc-quote{display:flex;flex-direction:column;gap:var(--space-7);padding:var(--space-11);background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}
.hc-quote--tint{background:var(--surface-tint);box-shadow:none}
.hc-quote__text{font-family:var(--hc-font-display);font-weight:var(--weight-medium);font-size:var(--text-heading-1);line-height:var(--leading-snug);color:var(--text-strong)}
.hc-quote__who{display:flex;align-items:center;gap:var(--space-5)}
.hc-quote__avatar{width:48px;height:48px;border-radius:var(--radius-pill);background:var(--hc-turquoise-200);overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:var(--weight-extrabold);color:var(--hc-turquoise-900)}
.hc-quote__name{font-weight:var(--weight-extrabold);font-size:var(--text-body-sm);color:var(--text-strong)}
.hc-quote__role{font-size:var(--text-caption);color:var(--text-muted)}

/* ---------- CTABanner ---------- */
.hc-cta{position:relative;overflow:hidden;border-radius:var(--radius-2xl);padding:var(--space-14) var(--space-11);background:var(--surface-inverse);color:var(--text-inverse);display:flex;flex-direction:column;align-items:center;gap:var(--space-7);text-align:center}
.hc-cta--brand{background:var(--hc-turquoise-400);color:var(--hc-turquoise-950)}
.hc-cta--warm{background:var(--hc-sunbeam-400);color:var(--hc-sunbeam-900)}
.hc-cta__title{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-display-2);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);margin:0;position:relative;color:inherit}
.hc-cta__text{font-size:var(--text-body-lg);max-width:56ch;opacity:.88;position:relative}
.hc-cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:center;position:relative}
.hc-cta__blob{position:absolute;border-radius:var(--radius-pill);opacity:.16;pointer-events:none}

/* ---------- SiteHeader ---------- */
.hc-header{position:sticky;top:0;z-index:40;background:var(--glass-bg);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));border-bottom:var(--border-w-hair) solid var(--border-subtle)}
.hc-header__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);min-height:var(--header-h);display:flex;align-items:center;gap:var(--space-9)}
.hc-header__brand{display:flex;align-items:center;gap:var(--space-5);text-decoration:none;flex:0 0 auto}
.hc-header__brand img{height:52px;width:auto;object-fit:contain;flex:0 0 auto}
.hc-header__brandText{display:flex;flex-direction:column;line-height:1.1}
.hc-header__brandName{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-body);color:var(--text-strong)}
.hc-header__tagline{font-size:var(--text-overline);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);color:var(--text-brand)}
.hc-header__nav{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
.hc-navlink{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--control-h-sm);padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);font-family:var(--hc-font-body);font-weight:var(--weight-bold);font-size:var(--text-body-sm);color:var(--text-body);text-decoration:none;background:transparent;border:none;cursor:pointer;transition:var(--motion-hover);white-space:nowrap}
.hc-navlink:hover{background:var(--surface-tint);color:var(--text-strong);text-decoration:none}
.hc-navlink[aria-current="page"]{background:var(--hc-turquoise-400);color:var(--hc-turquoise-950)}
.hc-header__actions{display:flex;align-items:center;gap:var(--space-5);flex:0 0 auto}

/* ---------- SiteFooter ---------- */
.hc-footer{background:var(--surface-inverse);color:var(--text-inverse)}
/* base.css colours headings --text-strong; on inverse surfaces they must track the block. */
.hc-footer h1,.hc-footer h2,.hc-footer h3,.hc-footer h4,.hc-card--inverse h1,.hc-card--inverse h2,.hc-card--inverse h3,.hc-card--inverse h4{color:inherit}
.hc-footer__inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-14) var(--gutter) var(--space-9);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-11)}
.hc-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.hc-footer__brand img{height:60px;width:auto;max-width:100%;object-fit:contain;align-self:flex-start}
.hc-footer__tag{font-family:var(--hc-font-display);font-weight:var(--weight-bold);font-size:var(--text-heading-3);letter-spacing:var(--tracking-wide);color:var(--hc-turquoise-300)}
.hc-footer__colTitle{font-family:var(--hc-font-body);font-weight:var(--weight-extrabold);font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--hc-turquoise-300);margin-bottom:var(--space-6)}
.hc-footer__list{display:flex;flex-direction:column;gap:var(--space-5);list-style:none;padding:0;margin:0}
.hc-footer a{color:var(--text-inverse);text-decoration:none;font-size:var(--text-body-sm);transition:var(--motion-hover)}
.hc-footer a:hover{color:var(--hc-turquoise-300)}
.hc-footer__bottom{max-width:var(--container-max);margin:0 auto;padding:var(--space-7) var(--gutter) var(--space-11);border-top:var(--border-w-hair) solid var(--border-inverse);display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:space-between;font-size:var(--text-caption);color:var(--text-inverse-muted)}
.hc-footer__social{display:flex;gap:var(--space-4)}

/* ---------- LogoWall ---------- */
.hc-logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-6)}
.hc-logowall__item{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-7);background:var(--surface-page);border:var(--border-w-hair) solid var(--border-subtle);border-radius:var(--radius-pill);font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:var(--text-body);text-decoration:none}
.hc-logowall__item--logo{display:flex;align-items:center;justify-content:center;min-height:96px;padding:var(--space-6);border-radius:var(--radius-card);background:var(--surface-page)}
.hc-logowall__item--logo img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}
a.hc-logowall__item:hover{border-color:var(--border-brand);color:var(--text-brand);text-decoration:none}
.hc-logowall--quiet .hc-logowall__item{background:var(--surface-subtle);border-color:transparent;color:var(--text-muted)}
.hc-logowall--quiet a.hc-logowall__item:hover{background:var(--surface-page);border-color:var(--border-brand);color:var(--text-brand)}

/* ---------- Focus (must out-specify the component box-shadows above) ---------- */
.hc-btn:focus-visible,.hc-iconbtn:focus-visible,.hc-chip:focus-visible,.hc-navlink:focus-visible,.hc-card--interactive:focus-visible,.hc-course:focus-visible,.hc-camp:focus-visible,.hc-tag__x:focus-visible,.hc-logowall__item:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.hc-input:focus-visible,.hc-select:focus-visible,.hc-textarea:focus-visible{outline:none;border-color:var(--hc-turquoise-400);box-shadow:var(--shadow-brand)}
.hc-check input:focus-visible+.hc-check__box,.hc-switch input:focus-visible+.hc-switch__track{box-shadow:var(--ring-focus)}
.hc-check input:focus-visible+.hc-check__box{border-color:var(--hc-turquoise-400)}
/* On deep-teal surfaces the white spacer ring would blow out — retint it. */
.hc-footer a:focus-visible,.hc-footer .hc-btn:focus-visible,.hc-footer .hc-iconbtn:focus-visible,.hc-card--inverse .hc-btn:focus-visible,.hc-cta .hc-btn:focus-visible{outline:none;box-shadow:var(--ring-focus-inverse)}
.hc-cta--brand .hc-btn:focus-visible,.hc-cta--warm .hc-btn:focus-visible{outline:none;box-shadow:var(--ring-focus-on-brand)}

/* ---------- Shared layout helpers ---------- */
.hc-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.hc-section{padding:var(--section-y) 0}
.hc-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.hc-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-7)}
.hc-photo{background:var(--surface-tint);border-radius:var(--radius-media);display:flex;align-items:center;justify-content:center;color:var(--hc-turquoise-700);font-size:var(--text-caption);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;overflow:hidden}
.hc-header__drawer{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5) var(--gutter) var(--space-8);border-top:var(--border-w-hair) solid var(--border-subtle);background:var(--surface-page)}
.hc-header__drawer .hc-navlink{min-height:var(--hit-min);justify-content:flex-start;font-size:var(--text-body)}
.hc-header__menu{display:none}
@media (max-width:1100px){.hc-header__inner{gap:var(--space-6)}.hc-header__nav{display:none}.hc-header__menu{display:inline-flex}.hc-header__actions{margin-left:auto}}
@media (max-width:640px){.hc-header__brandText{display:none}}
@media (max-width:960px){.hc-grid-3,.hc-grid-4{grid-template-columns:1fr 1fr}.hc-footer__inner{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hc-section{padding:var(--section-y-sm) 0}.hc-grid-3,.hc-grid-4{grid-template-columns:1fr}.hc-footer__inner{grid-template-columns:1fr}.hc-sh__title{font-size:var(--text-heading-1)}.hc-cta__title{font-size:var(--text-display-3)}}
@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important}.hc-btn:hover,.hc-card--interactive:hover,.hc-course:hover,.hc-camp:hover,.hc-chip:hover,.hc-iconbtn:hover{transform:none}}

/* --- src/styles/site.css --- */
/* ==================================================================
   HAPPY CLASSES — SITE LAYER
   Extends the Happy Classes design system. Every value below resolves
   to a design-system token; no raw colours, sizes or timings.
   Load order: tokens -> hc-components.css -> this file.
   ================================================================== */

/* ---------- Fluid typography -------------------------------------
   The design system defines a fixed 11-step scale. Between the
   breakpoints the three display sizes interpolate so headlines never
   land at an awkward in-between size on a tablet. The token values
   stay the end points of the ramp. ----------------------------------*/
:root{
  --text-display-1:clamp(2.25rem, 1.30rem + 4.20vw, 4rem);
  --text-display-2:clamp(1.75rem, 1.16rem + 2.60vw, 3rem);
  --text-display-3:clamp(1.5rem, 1.21rem + 1.25vw, 2.25rem);
  --section-y:clamp(64px, 4vw + 40px, 96px);
  --hairline:var(--border-w-hair) solid var(--border-subtle);
}

/* ---------- Accessibility correction to the subject palette ----------
   The design system's subject inks (coral 600, berry 600, leaf 600 and
   sunbeam 700) fall between 3.1:1 and 4.3:1 on their own 100-step tints,
   which is under WCAG AA for the 12-13px text a badge uses. Each is darkened
   along its own hue until it clears 4.6:1, so the colour coding survives and
   the label is readable. The fills are untouched.
   Measured with tools/contrast.mjs — run it after changing any of these. */
:root{
  --badge-ink-language:#BD372B;  /* was #D93F31 — 3.68:1 -> 4.62:1 */
  --badge-ink-art:#BD286E;       /* was #D42D7C — 3.84:1 -> 4.64:1 */
  --badge-ink-camp:#197C3E;      /* was #1F9B4E — 3.16:1 -> 4.64:1 */
  --badge-ink-music:#8E610A;     /* was #96660A — 4.26:1 -> 4.63:1 */
}
.hc-badge--language{color:var(--badge-ink-language)}
.hc-badge--art{color:var(--badge-ink-art)}
.hc-badge--camp{color:var(--badge-ink-camp)}
.hc-badge--music{color:var(--badge-ink-music)}
.hc-badge--warning{color:var(--badge-ink-music)}
.hc-badge--success{color:var(--badge-ink-camp)}
.hc-badge--danger{color:var(--badge-ink-language)}
.subject{--railInk:currentColor}

/* ---------- Page frame ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:hidden}
main{display:block}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:var(--container-narrow)}
.wrap--wide{max-width:var(--container-wide)}
.section{padding:var(--section-y) 0}
.section--tight{padding:calc(var(--section-y) * .6) 0}
.section--tint{background:var(--surface-tint)}
.section--subtle{background:var(--surface-subtle)}
.section--warm{background:var(--surface-warm)}
.section--inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.section--inverse h1,.section--inverse h2,.section--inverse h3{color:inherit}
.section--inverse p{color:var(--text-inverse-muted)}
.stack > * + *{margin-top:var(--space-7)}
/* [hidden] must beat the display values components set on themselves,
   otherwise a hidden grid or flex container stays visible. */
[hidden]{display:none !important}
.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{position:absolute;left:var(--space-6);top:calc(var(--space-6) * -6);z-index:60;background:var(--surface-page);color:var(--text-strong);font-weight:var(--weight-extrabold);padding:var(--space-5) var(--space-7);border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);transition:top var(--dur-fast) var(--ease-out-soft)}
.skip:focus{top:var(--space-6)}

/* ---------- Overline & section heads ---------- */
.overline{display:block;max-width:44ch;font-family:var(--hc-font-body);font-weight:var(--weight-extrabold);font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-brand)}
.section--inverse .overline{color:var(--hc-turquoise-300)}
.head{display:flex;flex-direction:column;gap:var(--space-5)}
.head__title{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-display-2);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);margin:0;max-width:17ch;text-wrap:balance}
.head--wide .head__title{max-width:22ch}
.head__lede{font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:58ch}
.section--inverse .head__lede{color:var(--text-inverse-muted)}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-9);flex-wrap:wrap;margin-bottom:var(--space-11)}

/* ---------- Header ---------- */
.hc-header__brand img{height:48px}
.header__cta{display:inline-flex}
.header__langs{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);background:var(--surface-subtle);border-radius:var(--radius-pill)}
.header__lang{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:32px;padding:0 var(--space-4);border-radius:var(--radius-pill);font-family:var(--hc-font-body);font-weight:var(--weight-extrabold);font-size:var(--text-overline);letter-spacing:var(--tracking-wide);color:var(--text-muted);text-decoration:none;transition:var(--motion-hover)}
.header__lang:hover{color:var(--text-strong);background:var(--surface-page);text-decoration:none}
.header__lang[aria-current="true"]{background:var(--surface-page);color:var(--text-strong);box-shadow:var(--shadow-xs)}
.header__lang:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.hc-navlink[aria-current="page"]{background:var(--surface-tint-strong);color:var(--hc-turquoise-900)}
.hc-header__menu .js-menu-close{display:none}
.hc-header__menu[aria-expanded="true"] .js-menu-open{display:none}
.hc-header__menu[aria-expanded="true"] .js-menu-close{display:block}

/* Below the tablet breakpoint the header keeps only what a phone needs:
   the brand, the language switcher and the menu. The timetable link lives
   in the drawer and in the page itself. */
.hc-header__actions,.header__langs{flex-shrink:0}
@media (max-width:760px){
  .header__cta{display:none}
  .hc-header__inner{gap:var(--space-4);min-height:72px}
  .hc-header__brand img{height:36px}
  .header__langs{gap:0;padding:2px}
  .header__lang{min-width:30px;height:28px;padding:0 var(--space-2)}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .hc-btn{width:100%}
}
@media (max-width:480px){
  .hc-header__inner{gap:var(--space-3);padding-left:var(--space-5);padding-right:var(--space-5)}
  .hc-header__brand img{height:32px}
  .header__lang{min-width:28px;height:26px;padding:0 6px}
  .hc-header__menu{width:var(--control-h-sm);height:var(--control-h-sm)}
}

/* Mobile drawer */
.drawer{display:none;border-top:var(--hairline);background:var(--surface-page)}
.drawer[data-open="true"]{display:block}
.drawer__inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-6) var(--gutter) var(--space-9);display:flex;flex-direction:column;gap:var(--space-2)}
.drawer .hc-navlink{min-height:var(--hit-min);justify-content:flex-start;font-size:var(--text-body-lg);padding:var(--space-5) var(--space-6)}
.drawer__sep{height:var(--border-w-hair);background:var(--border-subtle);margin:var(--space-5) 0}
.drawer__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:var(--space-5)}
.drawer__backdrop{display:none;position:fixed;inset:0;z-index:38;background:var(--surface-scrim);border:0;padding:0;color:transparent;font-size:0;cursor:pointer}
.drawer__backdrop[data-open="true"]{display:block}
body[data-drawer="open"]{overflow:hidden}
@media (min-width:1101px){.drawer,.drawer__backdrop{display:none !important}}

/* ---------- Hero (home) ----------
   Two-column asymmetric, per the design system's hero rule.
   Photo is a media frame, never a full-bleed background image. */
.hero{position:relative;overflow:hidden;padding:var(--space-12) 0 var(--space-13)}
.hero__grid{display:grid;grid-template-columns:1fr minmax(0,.92fr);gap:var(--space-13);align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:var(--space-7)}
.hero__title{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-display-1);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0;max-width:15ch;text-wrap:balance}
.hero__lede{font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-2)}
.hero__facts{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-11);max-width:44ch;margin-top:var(--space-7);padding-top:var(--space-7);border-top:var(--hairline)}
.hero__fact{display:flex;flex-direction:column-reverse;gap:var(--space-2);margin:0}
.hero__fact dd{margin:0}
.hero__factNum{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-1);line-height:1;color:var(--text-strong);letter-spacing:var(--tracking-tight)}
.hero__factLabel{font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted)}
.hero__media{position:relative;border-radius:var(--radius-media);overflow:hidden;aspect-ratio:4/5;background:var(--surface-tint);box-shadow:var(--shadow-lg)}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__blob{position:absolute;border-radius:var(--radius-pill);pointer-events:none;z-index:-1}
.hero__blob--a{width:520px;height:520px;background:var(--hc-turquoise-100);opacity:.4;right:-200px;top:-180px}
.hero__blob--b{width:260px;height:260px;background:var(--hc-sunbeam-200);opacity:.35;left:-130px;bottom:-110px}
@media (max-width:960px){
  .hero{padding:var(--space-9) 0 var(--space-11)}
  .hero__grid{grid-template-columns:1fr;gap:var(--space-10)}
  .hero__copy{max-width:none}
  .hero__media{aspect-ratio:16/11}
  .hero__blob--a{width:280px;height:280px;right:-110px;top:-90px}
}

/* ---------- Age picker ---------- */
.agepick{display:flex;flex-direction:column;gap:var(--space-8)}
.agepick__rail{display:flex;gap:var(--space-5);overflow-x:auto;padding-top:var(--space-4);padding-bottom:var(--space-4);margin-top:calc(var(--space-4) * -1);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.agepick__rail::-webkit-scrollbar{height:4px}
.agepick__rail::-webkit-scrollbar-thumb{background:var(--hc-turquoise-200);border-radius:var(--radius-pill)}
.agebtn{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);min-width:148px;padding:var(--space-7);background:var(--surface-card);border:var(--border-w-default) solid var(--border-subtle);border-radius:var(--radius-card);text-decoration:none;color:inherit;transition:var(--motion-hover);box-shadow:var(--shadow-xs)}
.agebtn:hover{transform:var(--lift-hover);border-color:var(--border-brand);box-shadow:var(--shadow-md);text-decoration:none}
.agebtn:active{transform:var(--press-scale)}
.agebtn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.agebtn__num{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-1);line-height:1;letter-spacing:var(--tracking-tight);color:var(--text-strong)}
.agebtn__label{font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted)}
.agebtn__count{font-size:var(--text-caption);font-weight:var(--weight-extrabold);color:var(--text-brand)}

/* ---------- Subject strip (home) ---------- */
/* An index row, deliberately not a second grid of cards — the page already
   has one. Hairline rules and a colour tick carry the structure instead. */
.subjects{display:grid;grid-template-columns:repeat(5,1fr);border-top:var(--border-w-default) solid var(--border-strong)}
.subject{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-8) var(--space-7) var(--space-8) 0;text-decoration:none;color:inherit;border-bottom:var(--hairline);transition:var(--motion-hover);position:relative}
.subject + .subject{border-left:var(--hairline);padding-left:var(--space-7)}
.subject::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--rail,var(--hc-turquoise-400));transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out-soft)}
.subject:hover::after{transform:scaleX(1)}
.subject:hover{text-decoration:none}
.subject:hover .subject__title{color:var(--text-brand)}
.subject:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-sm)}
.subject__icon{width:44px;height:44px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--railBg,var(--surface-tint-strong));color:var(--railInk,var(--hc-turquoise-800));flex:0 0 auto}
.subject__title{font-family:var(--hc-font-display);font-weight:var(--weight-bold);font-size:var(--text-body);color:var(--text-strong);margin:0;line-height:var(--leading-snug);transition:var(--motion-hover)}
.subject__count{font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted);display:block;margin-top:var(--space-2)}
@media (max-width:1100px){.subjects{grid-template-columns:repeat(2,1fr)}.subject:nth-child(odd){padding-left:0;border-left:none}.subject:nth-child(even){border-left:var(--hairline);padding-left:var(--space-7)}}
@media (max-width:560px){.subjects{grid-template-columns:1fr}.subject{border-left:none !important;padding-left:0 !important}}

/* ---------- Programme grid & card ---------- */
.grid{display:grid;gap:var(--space-8)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grid--3,.grid--2{grid-template-columns:1fr}}

.hc-course{position:relative}
.hc-course__rail{order:-1}
.pcard-slot{display:flex;min-width:0;height:100%}
.pcard-slot > .hc-course{width:100%}
.pcard__badges{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.pcard__price{margin-left:auto;font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-3);color:var(--text-strong);white-space:nowrap}
.pcard__price small{font-family:var(--hc-font-body);font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted)}
.pcard__top{display:flex;align-items:flex-start;gap:var(--space-5)}

/* A wider editorial card for the one featured programme in a listing. */
.pcard--wide{grid-column:1 / -1;flex-direction:row;align-items:stretch}
.pcard--wide .hc-course__media{aspect-ratio:382/226;width:42%;flex:0 0 42%;min-height:0}
.pcard--wide .hc-course__body{padding:var(--space-11);gap:var(--space-6);justify-content:center;max-width:52ch}
.pcard--wide .hc-course__title{font-size:var(--text-display-3)}
.pcard--wide .hc-course__desc{font-size:var(--text-body-lg);max-width:46ch}
.pcard--wide .hc-course__meta{margin-top:var(--space-7)}
.pcard--wide .hc-course__rail{position:absolute;inset:0 0 auto 0;order:0;z-index:1}
@media (max-width:900px){.pcard--wide{grid-column:span 1;flex-direction:column}.pcard--wide .hc-course__media{width:100%;flex:none;aspect-ratio:382/226}.pcard--wide .hc-course__body{padding:var(--space-7)}}

/* An active narrowing filter is turquoise; "all" is ink, because it is the
   resting state rather than a choice the visitor has made. */
.hc-chip[aria-pressed="true"]{background:var(--hc-turquoise-400);border-color:var(--hc-turquoise-400);color:var(--hc-turquoise-950);box-shadow:var(--shadow-brand)}
.hc-chip[data-value="all"][aria-pressed="true"]{background:var(--hc-ink-900);border-color:var(--hc-ink-900);color:var(--hc-white);box-shadow:var(--shadow-sm)}
.hc-chip[data-value="all"][aria-pressed="true"]:hover{background:var(--hc-ink-800);border-color:var(--hc-ink-800)}

/* ---------- Filter toolbar ---------- */
.filters{display:flex;flex-direction:column;gap:var(--space-7);padding:var(--space-8) 0;border-top:var(--hairline);border-bottom:var(--hairline)}
.filters__row{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.filters__label{font-size:var(--text-caption);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);flex:0 0 auto;min-width:104px}
.filters__chips{display:flex;gap:var(--space-4);flex-wrap:wrap}
.filters__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.filters__count{font-weight:var(--weight-bold);color:var(--text-muted);font-size:var(--text-body-sm)}
.hc-chip--sm{min-height:var(--control-h-sm);padding:0 var(--space-6);font-size:var(--text-caption)}
@media (max-width:760px){
  .filters__row{flex-direction:column;align-items:stretch;gap:var(--space-4)}
  .filters__label{min-width:0}
  .filters__chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--space-3);margin:0 calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter)}
  .filters__chips::-webkit-scrollbar{height:3px}
  .filters__chips::-webkit-scrollbar-thumb{background:var(--hc-turquoise-200);border-radius:var(--radius-pill)}
}
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-7);padding:var(--space-13) var(--gutter);text-align:center;color:var(--text-muted)}
.empty__icon{color:var(--hc-turquoise-300)}
.notfound__langs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);width:100%;max-width:880px;margin-top:var(--space-6);text-align:left}
.notfound__lang{display:flex;flex-direction:column;gap:var(--space-5)}
.notfound__lang .badge-row{justify-content:flex-start}
@media (max-width:760px){.notfound__langs{grid-template-columns:1fr}}

/* ---------- Detail page layout ---------- */
/* Detail pages put the essentials beside the title, not below the article.
   The DOM order is intro -> essentials -> article, so on a phone a parent
   reads the price, the times and the registration button before the prose. */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 372px;column-gap:var(--space-12);row-gap:var(--space-10);align-items:start;
        grid-template-areas:"intro info" "body info"}
.detail__intro{grid-area:intro;min-width:0}
.detail__body{grid-area:body;min-width:0}
.detail .info{grid-area:info}
@media (max-width:1000px){
  .detail{grid-template-columns:1fr;grid-template-areas:"intro" "info" "body";row-gap:var(--space-9)}
}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted);margin-bottom:var(--space-7);list-style:none;padding:0}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs a:hover{color:var(--text-brand);text-decoration:underline}
.crumbs li{display:inline-flex;align-items:center;gap:var(--space-4)}
.crumbs li[aria-current]{color:var(--text-strong)}

.dhero{padding:var(--space-9) 0 0}
.dhero__badges{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-6)}
.dhero__title{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-display-2);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);margin:0 0 var(--space-6)}
.dhero__lede{font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:58ch}
.dhero__media{margin:var(--space-9) 0 var(--space-11);border-radius:var(--radius-media);overflow:hidden;aspect-ratio:382/226;background:var(--surface-tint);box-shadow:var(--shadow-md)}
.dhero__media img{width:100%;height:100%;object-fit:contain}

.prose{max-width:66ch}
.prose h2{font-size:var(--text-heading-1);margin:var(--space-12) 0 var(--space-6)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--text-heading-2);margin:var(--space-10) 0 var(--space-5)}
.prose p{font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--text-body)}
.prose p + p{margin-top:var(--space-6)}
.prose ul{margin:var(--space-6) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-5)}
.prose ul li{display:flex;gap:var(--space-5);align-items:flex-start;line-height:var(--leading-relaxed)}
.prose ul li > svg,.prose ul li > .icon{flex:0 0 auto;margin-top:3px;color:var(--text-brand)}

/* ---------- Fact list & sticky info card ---------- */
.info{position:sticky;top:calc(var(--header-h) + var(--space-6));display:flex;flex-direction:column;gap:var(--space-7);padding:var(--space-8);background:var(--surface-card);border:var(--hairline);border-radius:var(--radius-card);box-shadow:var(--shadow-md)}
@media (max-width:1000px){.info{position:static}}
.info__price{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.info__priceNum{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-display-3);line-height:1;letter-spacing:var(--tracking-tight);color:var(--text-strong)}
.info__priceUnit{font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:var(--text-muted)}
.facts{display:flex;flex-direction:column;gap:var(--space-6);margin:0;padding:0}
.facts__row{display:grid;grid-template-columns:22px 1fr;gap:var(--space-5);align-items:start}
.facts__ico{color:var(--text-brand);margin-top:1px}
.facts__k{display:block;font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted);margin-bottom:var(--space-1)}
.facts__v{display:block;font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:var(--text-strong);line-height:var(--leading-normal)}
.facts__pair{display:block}
.facts__pair + .facts__pair{margin-top:var(--space-3)}
.facts__pairAge{display:inline-block;min-width:66px;color:var(--text-muted);font-weight:var(--weight-bold)}
.facts__more{display:inline-block;margin-top:var(--space-4);font-size:var(--text-caption);font-weight:var(--weight-extrabold)}
.info__note{font-size:var(--text-caption);color:var(--text-muted);line-height:var(--leading-normal)}
.info__actions{display:flex;flex-direction:column;gap:var(--space-5)}

/* ---------- Group / schedule table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--text-body-sm)}
.tbl caption{text-align:left;font-family:var(--hc-font-display);font-weight:var(--weight-bold);font-size:var(--text-heading-2);color:var(--text-strong);padding-bottom:var(--space-6)}
.tbl th{text-align:left;font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;font-weight:var(--weight-extrabold);color:var(--text-muted);padding:var(--space-5) var(--space-6);border-bottom:var(--border-w-default) solid var(--border-default);white-space:nowrap}
.tbl td{padding:var(--space-6);border-bottom:var(--hairline);vertical-align:top;line-height:var(--leading-normal)}
.tbl tbody tr:hover{background:var(--surface-tint)}
.tbl td:first-child,.tbl th:first-child{padding-left:0}
.tbl td:last-child,.tbl th:last-child{padding-right:0;text-align:right}
.tbl__strong{font-weight:var(--weight-extrabold);color:var(--text-strong)}
.tbl__time{font-weight:var(--weight-extrabold);color:var(--text-strong);white-space:nowrap}
.tbl__muted{color:var(--text-muted)}
.tbl__group{background:var(--surface-tint)}
.tbl tr.tbl__group th,.tbl tr.tbl__group th:last-child{text-align:left;font-family:var(--hc-font-display);font-size:var(--text-heading-3);letter-spacing:var(--tracking-snug);text-transform:none;color:var(--hc-turquoise-900);padding:var(--space-6);border-bottom:none}

/* Below 820px the table becomes a stack of labelled rows. */
@media (max-width:820px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{border:var(--hairline);border-radius:var(--radius-card);padding:var(--space-6);margin-bottom:var(--space-6);background:var(--surface-card);box-shadow:var(--shadow-xs)}
  .tbl tr.tbl__group{background:transparent;border:none;box-shadow:none;padding:0;margin:var(--space-9) 0 var(--space-5)}
  .tbl tr.tbl__group th{display:block;position:static;width:auto;height:auto;clip:auto;padding:0;background:transparent}
  .tbl td{border:none;padding:0;display:grid;grid-template-columns:96px 1fr;gap:var(--space-5);align-items:baseline}
  .tbl td + td{margin-top:var(--space-4)}
  .tbl td::before{content:attr(data-label);font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted)}
  .tbl td:last-child{text-align:left;margin-top:var(--space-6);display:block}
  .tbl td:last-child::before{display:none}
  .tbl td:first-child{padding-left:0}
}

/* ---------- Camp cards ---------- */
.camp{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:var(--space-9);align-items:center;padding:var(--space-7);background:var(--surface-card);border:var(--hairline);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:var(--motion-hover)}
.camp:hover{transform:var(--lift-hover);box-shadow:var(--shadow-lg);border-color:var(--border-brand);text-decoration:none}
.camp:active{transform:var(--press-scale)}
.camp:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.camp__thumb{aspect-ratio:382/226;border-radius:var(--radius-md);overflow:hidden;background:var(--subject-camp-bg)}
.camp__thumb img{width:100%;height:100%;object-fit:contain}
.camp__body{display:flex;flex-direction:column;gap:var(--space-5)}
.camp__dates{display:inline-flex;align-items:center;gap:var(--space-4);font-weight:var(--weight-extrabold);font-size:var(--text-body-sm);color:var(--text-brand)}
.camp__title{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-1);line-height:var(--leading-snug);color:var(--text-strong);margin:0}
.camp__desc{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-normal);max-width:56ch}
.camp__meta{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.camp__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-5);text-align:right;flex:0 0 auto}
.camp__price{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-1);line-height:1;letter-spacing:var(--tracking-tight);color:var(--text-strong)}
.camp__priceUnit{font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted)}
.camp:not(:has(.camp__thumb)){grid-template-columns:minmax(0,1fr) auto}
.pcard--wide:not(:has(.hc-course__media)){flex-direction:column}
@media (max-width:900px){
  .camp{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-6)}
  .camp__thumb{aspect-ratio:382/226}
  .camp__side{align-items:flex-start;text-align:left;flex-direction:row;align-items:baseline;gap:var(--space-4);width:100%;justify-content:flex-start}
  .camp:not(:has(.camp__thumb)){grid-template-columns:1fr}
}
.camps__group + .camps__group{margin-top:var(--space-12)}
.privcard{display:flex;flex-direction:column;overflow:hidden;padding:0;text-decoration:none;color:inherit}
.privcard__media{aspect-ratio:382/226;background:var(--surface-tint);overflow:hidden}
.privcard__media img{width:100%;height:100%;object-fit:contain;display:block}
.privcard__body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8)}
.privcard__title{font-family:var(--hc-font-display);font-size:var(--text-heading-2);margin:0;color:var(--text-strong)}
.privcard__text{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-normal);margin:0}

.camps__groupHead{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-8)}
.camps__groupHead .icon{color:var(--text-brand)}
.camps__groupTitle{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-1);color:var(--text-strong);margin:0}
.camps__list{display:flex;flex-direction:column;gap:var(--space-6)}

/* Past-season disclosure */
.past{margin-top:var(--space-13);border-top:var(--hairline);padding-top:var(--space-10)}
.past__toggle{display:inline-flex;align-items:center;gap:var(--space-5);cursor:pointer;font-family:var(--hc-font-display);font-weight:var(--weight-bold);font-size:var(--text-heading-2);color:var(--text-strong);list-style:none;min-height:var(--hit-min)}
.past__toggle::-webkit-details-marker{display:none}
.past__toggle:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-sm)}
.past__chev{transition:transform var(--dur-fast) var(--ease-out-soft);color:var(--text-brand)}
.past[open] .past__chev{transform:rotate(180deg)}
.past__note{margin:var(--space-6) 0 var(--space-9);color:var(--text-muted);font-size:var(--text-body-sm);max-width:60ch}
.past .camp{opacity:.9}

/* ---------- Life-at-camp mosaic ----------
   Two rows, six tiles. Extra photos live in a hidden pool and crossfade
   into a cell one at a time — see site.js. */
.life{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);list-style:none;margin:var(--space-11) 0 0;padding:0}
.life__item{position:relative;margin:0;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-tint);box-shadow:var(--shadow-xs);aspect-ratio:4/3}
.life__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity var(--dur-gallery) var(--ease-in-out)}
.life__img.is-on{opacity:1}
@media (max-width:760px){
  .life{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
  .life__item:nth-child(n+5){display:none}
}
@media (prefers-reduced-motion:reduce){.life__img{transition:none}}

/* ---------- Why-us list ----------
   Deliberately not tiles. The page already carries two card grids; here the
   structure comes from hairline rules and the icon, the way the design system
   builds a specimen row. */
.whylist{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-12);list-style:none;margin:0;padding:0;border-top:var(--border-w-default) solid var(--border-strong)}
.why-item{display:grid;grid-template-columns:44px 1fr;gap:var(--space-6);align-items:start;padding:var(--space-9) 0;border-bottom:var(--hairline)}
.why-item__icon{width:44px;height:44px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--surface-tint-strong);color:var(--hc-turquoise-800);flex:0 0 auto}
.why-item__title{font-family:var(--hc-font-display);font-weight:var(--weight-bold);font-size:var(--text-heading-3);color:var(--text-strong);margin:0 0 var(--space-4)}
.why-item__text{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-relaxed);max-width:44ch}
@media (max-width:820px){.whylist{grid-template-columns:1fr;column-gap:0}.why-item{padding:var(--space-8) 0}}

/* ---------- Editorial two-column band ---------- */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-12);align-items:center}
.split--flip .split__media{order:-1}
.split__media{border-radius:var(--radius-media);overflow:hidden;aspect-ratio:5/4;background:var(--surface-tint);box-shadow:var(--shadow-md)}
.split__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--space-9)}.split--flip .split__media{order:0}}

/* ---------- Language band ---------- */
.langband{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-10)}
.langcard{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-8);border-radius:var(--radius-card);border:var(--border-w-hair) solid var(--border-inverse);background:var(--surface-inverse-alt);text-decoration:none;color:var(--text-inverse);transition:var(--motion-hover)}
.langcard:hover{transform:var(--lift-hover);border-color:var(--hc-turquoise-400);text-decoration:none;color:var(--text-inverse)}
.langcard:focus-visible{outline:none;box-shadow:var(--ring-focus-inverse)}
.langcard__code{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-display-3);line-height:1;color:var(--hc-turquoise-300);letter-spacing:var(--tracking-tight)}
.langcard__name{font-weight:var(--weight-extrabold);font-size:var(--text-body-lg);color:var(--text-inverse)}
.langcard__count{font-size:var(--text-caption);color:var(--text-inverse-muted);margin-top:auto}
@media (max-width:760px){.langband{grid-template-columns:1fr}}

/* ---------- Levels list ---------- */
.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-8);padding:0;list-style:none}
.level{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-7);border-radius:var(--radius-card);background:var(--surface-tint);border:var(--border-w-hair) solid transparent}
.level__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5)}
.level__name{font-family:var(--hc-font-display);font-weight:var(--weight-bold);font-size:var(--text-heading-3);color:var(--text-strong);margin:0}
.level__age{font-size:var(--text-caption);font-weight:var(--weight-extrabold);color:var(--hc-turquoise-800);white-space:nowrap}
.level__desc{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-normal)}
@media (max-width:760px){.levels{grid-template-columns:1fr}}

/* ---------- Teacher ---------- */
.teacher{display:flex;gap:var(--space-7);align-items:flex-start;padding:var(--space-8);border-radius:var(--radius-card);background:var(--surface-warm);margin-top:var(--space-10)}
.teacher__avatar{width:56px;height:56px;border-radius:var(--radius-pill);background:var(--hc-sunbeam-200);display:flex;align-items:center;justify-content:center;font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-2);color:var(--hc-sunbeam-900);flex:0 0 auto}
.teacher__name{font-family:var(--hc-font-display);font-weight:var(--weight-bold);font-size:var(--text-heading-3);color:var(--text-strong);margin:0 0 var(--space-2)}
.teacher__role{font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--hc-sunbeam-800);margin-bottom:var(--space-5)}
.teacher__bio{font-size:var(--text-body-sm);color:var(--text-body);line-height:var(--leading-relaxed)}

/* ---------- CTA band ---------- */
.ctaband{position:relative;overflow:hidden;border-radius:var(--radius-2xl);padding:var(--space-14) var(--space-11);background:var(--surface-inverse);color:var(--text-inverse);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-7)}
.ctaband h2{font-size:var(--text-display-2);letter-spacing:var(--tracking-tight);margin:0;position:relative;color:inherit}
.ctaband p{font-size:var(--text-body-lg);max-width:52ch;color:var(--text-inverse-muted);position:relative}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:center;position:relative}
.ctaband__blob{position:absolute;border-radius:var(--radius-pill);pointer-events:none;background:var(--hc-turquoise-400);opacity:.16}
@media (max-width:640px){.ctaband{padding:var(--space-12) var(--space-7);border-radius:var(--radius-xl)}}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12)}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:var(--space-10)}}
.contact__list{display:flex;flex-direction:column;gap:var(--space-8);list-style:none;margin:0;padding:0}
.contact__row{display:grid;grid-template-columns:44px 1fr;gap:var(--space-6);align-items:start}
.contact__ico{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--surface-tint-strong);color:var(--hc-turquoise-800);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.contact__k{font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--text-muted);display:block;margin-bottom:var(--space-2)}
.contact__v{font-size:var(--text-body-lg);font-weight:var(--weight-bold);color:var(--text-strong);line-height:var(--leading-snug)}
.contact__v a{color:var(--text-strong);text-decoration:none}
.contact__v a:hover{color:var(--text-link-hover);text-decoration:underline}
.map{position:relative;border-radius:var(--radius-media);overflow:hidden;border:var(--hairline);aspect-ratio:4/3;background:var(--surface-tint);box-shadow:var(--shadow-sm)}
.map iframe{width:100%;height:100%;border:0;display:block;pointer-events:none;filter:saturate(.55) contrast(1.06) brightness(1.03)}
.map__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:2;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(6,42,48,.28))}
.map__pin-mark{position:relative;display:block;width:40px;height:40px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--hc-turquoise-500);border:3px solid var(--hc-white)}
.map__pin-dot{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--hc-white);transform:translate(-50%,-50%) rotate(45deg)}
.map__open{position:absolute;inset:0;z-index:3;border-radius:inherit}
.map__open:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--hc-turquoise-400)}

/* ---------- Entity / partner lists ---------- */
.entities{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);list-style:none;margin:var(--space-8) 0 0;padding:0}
.entity{padding:var(--space-7);border-radius:var(--radius-card);background:var(--surface-subtle)}
.entity__name{font-weight:var(--weight-extrabold);color:var(--text-strong);display:block;margin-bottom:var(--space-2)}
.entity__role{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-normal)}
@media (max-width:760px){.entities{grid-template-columns:1fr}}

/* ---------- Footer additions ---------- */
.hc-footer__inner{grid-template-columns:1.5fr 1fr 1fr 1.1fr}
@media (max-width:1000px){.hc-footer__inner{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hc-footer__inner{grid-template-columns:1fr;gap:var(--space-9)}}
/* WCAG 2.5.8: a link is a target, so it needs height as well as spacing. */
.hc-footer__list a,.tbl a,.contact__v a{display:inline-flex;align-items:center;min-height:24px}
.hc-footer__addr a{display:inline-flex;align-items:center;min-height:24px}
.hc-footer__addr{font-size:var(--text-body-sm);color:var(--text-inverse-muted);line-height:var(--leading-relaxed);font-style:normal}
.hc-footer__ehis{font-size:var(--text-caption);color:var(--text-inverse-muted);margin-top:var(--space-5)}
.hc-footer__langs{display:flex;gap:var(--space-4);margin-top:var(--space-6)}
.hc-footer__langs a{padding:var(--space-3) var(--space-5);border:var(--border-w-hair) solid var(--border-inverse);border-radius:var(--radius-pill);font-size:var(--text-overline);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-wide)}
.hc-footer__langs a[aria-current="true"]{background:var(--hc-turquoise-400);color:var(--hc-turquoise-950);border-color:transparent}

/* ---------- Mobile action bar ----------
   FLAGGED EXTENSION to the design system, which otherwise pins nothing
   but the header. It appears only on programme and camp detail pages,
   only under 900px, and only once the in-page registration block has
   scrolled out of view — so it never covers the action it duplicates. */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;gap:var(--space-5);align-items:center;padding:var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));background:var(--glass-bg);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));border-top:var(--hairline);transform:translateY(110%);transition:transform var(--dur-base) var(--ease-out-soft)}
.actionbar[data-show="true"]{transform:translateY(0)}
.actionbar__price{display:flex;flex-direction:column;line-height:1.1;flex:0 0 auto}
.actionbar__num{font-family:var(--hc-font-display);font-weight:var(--weight-extrabold);font-size:var(--text-heading-2);color:var(--text-strong)}
.actionbar__unit{font-size:var(--text-overline);font-weight:var(--weight-bold);color:var(--text-muted)}
.actionbar .hc-btn{margin-left:auto}
@media (max-width:900px){
  .actionbar{display:flex}
  body:has(#actionbar[data-show="true"]){padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.actionbar{transition:none}}

/* ---------- Scroll reveal ---------- */
.js-anim .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out-soft),transform var(--dur-slow) var(--ease-out-soft)}
.js-anim .reveal[data-seen="true"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-anim .reveal{opacity:1;transform:none;transition:none}}

/* ---------- Utilities ---------- */
.muted{color:var(--text-muted)}
.nowrap{white-space:nowrap}
.mt-0{margin-top:0}
.divider{height:var(--border-w-hair);background:var(--border-subtle);border:0;margin:var(--section-y) 0}
.badge-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.icon{display:inline-flex;flex:0 0 auto}
.icon svg{display:block;width:100%;height:100%;stroke-width:2}