/* ==========================================================================
   base.css - rules shared across pages, identical wherever they appear.
   Load order:  tokens.css  ->  base.css  ->  page <style>
   A page's own <style> comes last, so an equal-specificity page rule still wins.
   That is the intended per-page escape hatch - do not fold those back in here.
   Admission rule: STYLE-STANDARD.md section 10.
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:100%;
    /* sticky header would otherwise cover the anchor target */
    scroll-padding-top:calc(var(--header-h) + 4px);}
body{
    font-family:'Nunito Sans',system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.65;
    font-size:var(--text-body);
  }
h1,h2,h3{font-family:'Marcellus',serif;font-weight:400;line-height:1.15;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--gold-accent);outline-offset:2px;}
/* ============ HEADER BANNER ============ */
  .site-header{
    background:var(--navy-primary);
    border-bottom:4px solid var(--gold-primary);
    position:sticky;top:0;z-index:50;
    --menu-fill:.30;
  }
.header-inner{
    max-width:var(--container-wide);margin:0 auto;
    height:var(--header-h);
    display:flex;align-items:center;gap:16px;
    padding:0 24px;
  }
.header-lockup{
    display:flex;align-items:center;gap:14px;
    flex-shrink:0;          /* never compresses */
    white-space:nowrap;     /* never breaks internally */
    height:calc(var(--header-h) * .85);
  }
.header-crest{height:100%;width:auto;flex-shrink:0;display:block;}
.header-wordmark{
    font-family:'Marcellus',serif;
    color:var(--white);
    display:flex;flex-direction:column;justify-content:center;
    height:100%;
    font-size:calc(var(--header-h) * .47);
    gap:calc(var(--header-h) * .026);
    letter-spacing:.02em;
    text-decoration:none;
    line-height:1.15;
    transition:color .15s ease;
  }
.header-wordmark:hover{color:var(--gold-primary);}
.header-wordmark .hw-sub{
    display:block;
    font-family:'Nunito Sans',sans-serif;
    font-size:calc(var(--header-h) * .235);font-weight:700;
    letter-spacing:.10em;text-transform:uppercase;
    color:var(--gold-primary);
    transition:color .15s ease;
  }
nav.main-nav{margin-left:auto;min-width:0;}
nav.main-nav ul{list-style:none;display:flex;gap:4px;align-items:center;}
nav.main-nav a, nav.main-nav button{
    display:block;
    color:var(--white);
    text-decoration:none;
    font-weight:700;font-size:var(--ui-nav);
    letter-spacing:.10em;text-transform:uppercase;
    padding:10px 6px;
    white-space:nowrap;
    background:none;border:none;cursor:pointer;
    font-family:'Nunito Sans',sans-serif;
    transition:color .15s ease;
  }
nav.main-nav a:hover, nav.main-nav button:hover{color:var(--gold-primary);}
/* The caret is a glyph, not a letter — it must not inherit the .10em
     tracking or it drifts away from the word it belongs to. */
  .caret{letter-spacing:0;margin-left:.28em;font-size:.72em;vertical-align:.08em;display:inline-block;}
.has-dropdown{position:relative;}
.dropdown{
    position:absolute;top:100%;left:0;
    background:var(--navy-accent);
    border:1px solid rgba(227,179,65,.35);
    border-top:1px solid rgba(227,179,65,.35);   /* was a 3px gold bar — it lined up
       with the header's gold border and read as one confused line. The gold
       accent now sits under Programs Overview instead. */
    min-width:250px;
    opacity:0;visibility:hidden;
    transition:opacity .1s ease, visibility 0s linear .1s;
    box-shadow:0 12px 24px rgba(9,27,51,.35);
  }
.has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown{
    opacity:1;visibility:visible;
    transition-delay:.2s;    /* hover-intent: ignore a cursor passing through */
  }
/* Must be prefixed: bare `.dropdown a` is (0,1,1) and loses to
     `nav.main-nav a` (0,1,2), which is why these links were rendering at the
     nav's 17.5px instead of 16px. */
  nav.main-nav .dropdown a{
    text-transform:none;letter-spacing:0;
    font-weight:600;font-size:var(--ui-lg);
    padding:11px 16px;
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:color .15s ease;
  }
/* The parent page, reachable without relying on the parent link — which is
     ambiguous on touch and easy to miss on desktop. Weighted and separated so
     it reads as "the page above these", not a fifth programme. */
  /* Desktop panel: sentence case, sitting among the four programme names.
     The hamburger overrides this — see the 1160px block. */
  nav.main-nav .dropdown a.dropdown-overview{
    font-weight:800;
    background:var(--navy-primary);
  }
/* Subitems are secondary to the overview: smaller, shorter, a shade darker.
     Defined here so the desktop panel and the hamburger share one treatment —
     the media query below only adjusts the right-hand padding. */
  nav.main-nav .dropdown a:not(.dropdown-overview){
    background:var(--navy-accent);
    padding:10px 16px 10px 32px;
    font-size:var(--ui-md);
    line-height:1.45;
  }
/* The four programmes are children of the overview, not siblings of it. */
  nav.main-nav .dropdown a:hover{color:var(--gold-primary);}
.nav-toggle{display:none;}
.hero-crest{width:min(190px,50vw);height:auto;margin:0 auto 28px;display:block;}
.hero h1{
    font-size:var(--text-h1);
    color:var(--navy-primary);
    max-width:16ch;margin:0 auto 14px;
  }
.hero-tagline{
    font-weight:800;font-size:var(--text-display);
    letter-spacing:.42em;text-transform:uppercase;
    color:var(--gold-text-on-light);
    margin-bottom:18px;
  }
.hero-tagline .dot{color:var(--navy-primary);opacity:.35;letter-spacing:0;}
.hero-sub{
    max-width:52ch;margin:0 auto 34px;
    font-size:var(--text-body);color:var(--text-soft);
  }
.btn{
    display:inline-block;
    background:var(--navy-primary);color:var(--white);
    font-weight:800;font-size:var(--ui-md);
    letter-spacing:.1em;text-transform:uppercase;
    padding:15px 34px;
    text-decoration:none;
    border:2px solid var(--navy-primary);
    transition:background .18s,color .18s;
  }
.btn:hover{background:var(--gold-primary);border-color:var(--gold-primary);color:var(--navy-accent);}
.btn-gold{background:var(--gold-primary);border-color:var(--gold-primary);color:var(--navy-accent);}
.btn-gold:hover{background:var(--gold-accent);border-color:var(--gold-accent);}
.btn-gold.btn-invert:hover{background:var(--navy-accent);border-color:var(--navy-accent);color:var(--gold-primary);}
.btn-gold.btn-onnavy:hover{background:var(--white);border-color:var(--white);color:var(--navy-accent);}
/* wave divider */
  .wave-divider{display:block;width:100%;height:120px;margin-top:var(--space-divider);margin-bottom:-1px;}
.band-inner{max-width:var(--container-wide);margin:0 auto;}
.band-inner > *:first-child{margin-top:0;}
.band-inner > *:last-child{margin-bottom:0;}
.lede{
    font-size:var(--text-lead);
    font-family:'Marcellus',serif;
    text-align:center;
    max-width:34ch;margin:0 auto 52px;
  }
.lede strong{color:var(--gold-primary);font-weight:400;}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.offer-card{
    background:var(--navy-accent);
    border:1px solid rgba(227,179,65,.3);
    border-top:4px solid var(--gold-primary);
    padding:32px 30px;
    text-align:center;
}
.offer-card h3{color:var(--gold-primary);font-size:var(--text-h3);margin-bottom:6px;}
.offer-card .ages{
    font-size:var(--ui-sm);font-weight:800;
    letter-spacing:.22em;text-transform:uppercase;
    color:rgba(255,255,255,.55);
    margin-bottom:4px;
  }
.ages span{white-space:nowrap;}
.offer-card .season{
    font-size:var(--ui-sm);font-weight:700;letter-spacing:.06em;
    color:var(--gold-primary);margin-bottom:14px;
  }
.offer-card p{color:rgba(255,255,255,.88);font-size:var(--text-body);}
.offer-card a.more{
    display:inline-block;margin-top:16px;
    color:var(--gold-primary);font-weight:700;font-size:var(--ui-md);
    letter-spacing:.06em;text-transform:uppercase;
    text-decoration:none;border-bottom:2px solid var(--gold-accent);
    padding-bottom:2px;
    transition:color .15s ease,border-color .15s ease;
  }
.offer-card a.more:hover{color:var(--white);border-color:var(--white);}
.eyebrow{
    font-size:var(--ui-lg);font-weight:800;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-text-on-light);
    margin-bottom:14px;
  }
.open-doors h2{color:var(--navy-primary);font-size:var(--text-h2);margin-bottom:20px;}
.open-doors p.center{text-align:center;}
.values-strip div{
    flex:1;padding:26px 12px;text-align:center;
  }
.values-strip div + div{border-left:1px solid var(--paper-tint);}
.values-strip .v-word{
    font-family:'Marcellus',serif;
    font-size:var(--text-lead);
    color:var(--navy-primary);
    display:block;
  }
.values-strip .v-note{
    font-size:var(--ui-sm);font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold-text-on-light);
  }
/* ============ UPCOMING PROGRAMS ============ */
  .upcoming{background:var(--paper-tint);padding:var(--space-section) 24px;}
.upcoming-inner > *:first-child{margin-top:0;}
.upcoming-inner > *:last-child{margin-bottom:0;}
.upcoming h2{color:var(--navy-primary);text-align:center;font-size:var(--text-h2);margin-bottom:8px;}
.upcoming .eyebrow{text-align:center;}
.schedule-row{
    display:flex;align-items:baseline;gap:22px;
    padding:22px 6px;
    border-bottom:1px solid var(--border);
    background:transparent;
  }
.schedule-row .date .day-of-week{
    display:block;
    font-family:'Nunito Sans',sans-serif;
    font-weight:800;font-size:var(--ui-sm);
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--gold-text-on-light);
    margin-top:4px;
  }
.schedule-row .date-range-loc{
    display:block;
    font-size:var(--ui-md);color:var(--text-warm);
    margin-top:4px;
  }
.schedule-row .what{flex:1;}
.schedule-row .what strong{display:block;font-size:var(--text-body);color:var(--ink);}
.schedule-row .what span{font-size:var(--text-sm);color:var(--text-muted);}
.schedule-row .what .late-note{display:block;margin-top:6px;font-weight:800;color:var(--gold-text-on-light);}
.age-times{margin-bottom:6px;}
.age-times div .age-year{
    font-size:var(--ui-lg);color:var(--text-warm);white-space:nowrap;
  }
.badge{
    display:inline-block;
    vertical-align:2px;
    margin-left:8px;
    font-size:var(--ui-xs);font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--navy-primary);
    border:1px solid var(--gold-primary);
    background:rgba(201,162,39,.14);
    padding:3px 10px;border-radius:99px;
    white-space:nowrap;
  }
.reg-note{
    margin-top:36px;text-align:center;
    font-size:var(--text-body);color:var(--text-soft);
  }
.reg-note strong{color:var(--navy-primary);}
.fee-line{margin-top:12px;font-weight:800;font-size:var(--text-sm);color:var(--navy-primary);}
.fee-line .fee-star{font-weight:400;color:var(--text-muted);}
.fee-line .late-note{color:var(--gold-text-on-light);}
.inline-link{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;transition:color .15s ease;}
.inline-link:hover{color:var(--navy-accent);}
.late-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:color .15s ease;}
.late-note a:hover{color:var(--navy-accent);}
.fee-rate-note{text-align:center;font-size:var(--text-sm);color:var(--text-muted);margin-top:10px;font-style:italic;}
.reg-buttons{margin-top:12px;display:grid;grid-template-columns:repeat(2,max-content);gap:10px 12px;justify-content:start;}
.btn-sm{padding:9px 18px;font-size:var(--ui-md);letter-spacing:.08em;}
.future-note{margin-top:12px;font-weight:700;font-size:var(--text-sm);font-style:italic;color:var(--text-muted);}
.hours-note{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-top:4px;}
/* ============ MAILING LIST ============ */
  .signup{background:var(--navy-primary);padding:0 24px;}
.guarantee.refund-policy p{font-size:var(--text-xs);color:var(--text-soft);}
.signup-card h2{font-size:var(--text-h2);margin-bottom:14px;color:var(--white);}
.signup-card p{color:rgba(255,255,255,.82);max-width:52ch;margin:0 auto 30px;font-size:var(--text-body);}
.signup-form{
    display:flex;gap:12px;max-width:520px;margin:0 auto;
  }
.signup-form input{
    flex:1;
    font-family:'Nunito Sans',sans-serif;font-size:var(--ui-lg);
    padding:14px 16px;
    border:2px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.06);
    color:var(--white);
  }
.signup-form input::placeholder{color:rgba(255,255,255,.5);}
.signup-form input:focus{border-color:var(--gold-accent);outline:none;}
.signup-confirm{
    margin-top:16px;font-weight:700;color:var(--gold-primary);
    font-size:var(--text-sm);min-height:1.4em;
  }
/* ============ COMPASS FOOTER ============ */
  .site-footer{
    background:var(--navy-primary);
    color:var(--white);
    padding:28px 24px 24px;
    border-top:4px solid var(--gold-primary);
    box-shadow:0 -3px 0 0 var(--white);
  }
.footer-inner{
    max-width:var(--container-wide);margin:0 auto;
    display:flex;align-items:center;gap:36px;justify-content:flex-start;
  }
/* Square SVG, so width and height are the same number.
     28% governs mid widths; the 200px cap stops the crest exceeding the
     height of the motto block on wide screens. Tune the cap, not the %. */
  .footer-crest{flex:0 0 auto;width:clamp(110px, 28%, 200px);height:auto;}
.footer-motto{
    flex:1;min-width:0;
    display:flex;flex-direction:column;align-items:stretch;justify-content:center;
    text-align:center;
  }
.footer-motto p.harmony{

    font-family:'Marcellus',serif;
    font-size:var(--text-lead);
    line-height:1.45;
    color:var(--white);
    margin-bottom:22px;
  }
.footer-motto p.harmony em{color:var(--gold-primary);font-style:normal;}
.footer-links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-bottom:18px;}
.footer-links a{
    color:rgba(255,255,255,.75);text-decoration:none;
    font-size:var(--ui-md);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
.footer-links a:hover{color:var(--gold-primary);}
.footer-contact{font-size:var(--ui-lg);color:rgba(255,255,255,.65);}
.footer-contact a{color:var(--gold-primary);text-decoration:none;transition:color .15s ease;}
.footer-contact a:hover{color:var(--white);}
.signup-card > *:first-child{margin-top:0;}
/* Low-importance text: full container width so it costs as little
     vertical space as possible. */
  .footer-ack{
    max-width:var(--container-wide);margin:26px auto 0;
    text-align:center;
    font-size:var(--ui-md);line-height:1.7;
    color:rgba(255,255,255,.6);
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:28px;
  }
.footer-legal{
    max-width:var(--container-wide);margin:14px auto 0;
    text-align:center;
    font-size:var(--ui-sm);color:rgba(255,255,255,.4);
  }
.signup-card > *:last-child{margin-bottom:0;}
.footer-legal a{
    color:rgba(255,255,255,.4);
    text-decoration:underline;
    text-underline-offset:2px;
    transition:color .15s ease;
  }
.footer-legal a:hover{color:var(--gold-primary);}
nav.main-nav a.active, nav.main-nav button.active{color:var(--gold-primary);}
.page-hero h1{font-size:var(--text-h1-page);color:var(--navy-primary);margin-bottom:14px;}
.prose{max-width:var(--container-reading);margin:0 auto;padding:var(--space-section) 24px var(--space-box);}
.prose > *:first-child{margin-top:0;}
.prose > *:last-child{margin-bottom:0;}
.prose h2{color:var(--navy-primary);font-size:var(--text-h2-page);margin:44px 0 16px;}
.prose h2:first-of-type{margin-top:0;}
.prose p{margin-bottom:18px;color:var(--text-soft);}
.prose-list{margin:0 0 18px 22px;color:var(--text-soft);}
.prose-list li{margin-bottom:5px;}
.guarantee ul{margin:0 0 8px 22px;color:var(--text-soft);}
.guarantee li{margin-bottom:5px;}
.waiver-link{
    margin-top:2px;
    font-size:var(--ui-lg);
    color:var(--text-muted);
  }
.waiver-link a{
    color:var(--text-muted);
    text-decoration:underline;
    text-underline-offset:2px;
    transition:color .15s ease;
  }
.waiver-link a:hover{color:var(--navy-accent);}
.who-are .band-inner{max-width:712px;}
.who-are h2{color:var(--gold-primary);font-size:var(--text-h2-page);margin-bottom:18px;}
.who-are p{color:rgba(255,255,255,.88);margin-bottom:18px;}
.who-are .pull{font-family:'Marcellus',serif;font-size:var(--text-lead);line-height:1.5;color:var(--white);margin:26px 0;}
.who-are .pull em{color:var(--gold-primary);font-style:normal;}
.who-not{background:var(--paper-tint);}
.flaws{list-style:none;margin:0;padding:0;}
.flaws li{
    margin-bottom:14px;padding:16px 20px;
    background:var(--paper);
    border-left:3px solid var(--navy-primary);
    color:var(--text-soft);
  }
.flaws li strong{color:var(--navy-primary);}
.closing p{font-family:'Marcellus',serif;font-size:var(--text-h2-page);line-height:1.5;color:var(--white);max-width:36ch;margin:0 auto;}
.closing em{color:var(--gold-primary);font-style:normal;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  /* Opacity is not motion, but the dropdown is the one timed reveal on the
         site — show it instantly. Colour transitions are deliberately left
         alone: they carry no vestibular risk and removing them makes every
         hover state feel dead. */
      .has-dropdown:hover .dropdown,
      .has-dropdown:focus-within .dropdown{transition-delay:0s;}
  .dropdown{transition:none;}
}



/* ---- hoisted from page-local styles (identical wherever present) ---- */
.guarantee{border:1px solid var(--gold-primary);background:rgba(201,162,39,.10);padding:26px 28px 20px;margin:28px 0;}
.page-hero .motto{font-family:'Marcellus',serif;font-size:var(--text-display);color:var(--text-soft);max-width:44ch;margin:0 auto;}
.post-guarantee-divider{margin-top:24px;border-bottom:1px solid var(--border);}
.schedule{margin-top:var(--space-half);border-top:2px solid var(--navy-primary);}
.schedule-row .date .nb{white-space:nowrap;}
.schedule-row .date{font-family:'Marcellus',serif;font-size:var(--text-h3);color:var(--navy-primary);flex:0 0 260px;}
.signup-card{max-width:var(--container-reading);margin:0 auto;padding:var(--space-section) 0 var(--space-box);text-align:center;color:var(--white);transform:translateY(-0px);}
.who-not .prose{padding:var(--space-section) 24px var(--space-box);}

.band-navy{background:var(--navy-primary);color:var(--white);padding:var(--space-section) 24px var(--space-section);}
.age-times div{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;font-size:var(--text-body);color:var(--ink);padding:2px 0;}
.age-times div .age{font-weight:800;color:var(--navy-primary);min-width:34px;flex-shrink:0;white-space:nowrap;}

@media (max-width:1160px){
  nav.main-nav{
        display:none;
        position:absolute;top:100%;left:0;right:0;margin:0;
        background:var(--navy-primary);
        border-bottom:4px solid var(--gold-primary);
        padding:6px 24px 10px;
      }
  nav.main-nav.open{display:block;}
  nav.main-nav ul{flex-direction:column;align-items:stretch;gap:0;}
  nav.main-nav a, nav.main-nav button{
        width:100%;text-align:left;padding:12px 4px;
        border-bottom:1px solid rgba(255,255,255,.08);
      }
  .dropdown{position:static;display:block;opacity:1;visibility:visible;
        transition:none;border:none;box-shadow:none;background:rgba(0,0,0,.22);}
  /* The panel is already open, so the "Programs ▾" toggle has no job here —
         hide it and let Programs Overview stand as the main-level item. */
      /* Must out-specify nav.main-nav a{display:block}
  (0-1-2), or this
         silently does nothing. */
      nav.main-nav .has-dropdown > a{display:none;}
  /* Here the overview sits in the main list, not in a panel of programme
         names — so it matches the items around it exactly. */
      nav.main-nav .dropdown a.dropdown-overview{
        padding-left:4px;
        text-transform:uppercase;
        letter-spacing:.10em;
        font-size:var(--ui-nav);
        font-weight:700;
      }
  /* Only the right-hand padding differs from the desktop panel; the 40px row
         height sits just under the 44px touch-target guideline and is deliberate. */
      nav.main-nav .dropdown a:not(.dropdown-overview){padding-right:4px;}
  /* nowrap exists for the horizontal desktop nav only. In the stacked panel
         it forces long programme names past the right edge. */
      nav.main-nav a{white-space:normal;}
  .nav-toggle{
        display:flex;align-items:center;margin-left:auto;flex-shrink:0;
        height:calc(var(--header-h) * .85);
        padding:0 calc(var(--header-h) * .21);
        font-size:calc(var(--header-h) * .85 * var(--menu-fill) / .71);
        background:none;border:2px solid rgba(255,255,255,.4);
        color:var(--white);font-weight:800;line-height:1;
        letter-spacing:.14em;text-transform:uppercase;
        cursor:pointer;white-space:nowrap;
        font-family:'Nunito Sans',sans-serif;
        transition:color .15s ease;
      }
  .nav-toggle:hover{color:var(--gold-primary);}
}


@media (max-width:860px){
  .schedule-row .date{flex:0 0 auto;}
  .offer-grid{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;text-align:center;gap:32px;}
  .footer-links{justify-content:center;}
  .schedule-row{flex-direction:column;gap:6px;}
  .reg-buttons{grid-template-columns:1fr;justify-items:start;}
  .signup-form{flex-direction:column;}
  .values-strip{flex-direction:column;}
  .values-strip div + div{border-left:none;border-top:1px solid var(--paper-tint);}
}