/* ==========================================================================
   Triple Threat — Design Tokens
   The ONLY place :root is defined. Do not declare :root in any page's
   embedded <style> block except as a deliberate, temporary experiment.
   Linked BEFORE each page's <style>, so a local :root can override during
   testing. Remove the local block before publishing.
   ========================================================================== */

:root{

  /* ---- Colour ---------------------------------------------------------- */
  --navy-primary:#0a1a33;
  --navy-accent:#071122;
  --gold-primary:#e2bb50;
  --gold-accent:#ffde85;
  --gold-text-on-light:#826514;
  --logo-blue:#65c8d8;
  --text-soft:#333A46;
  --text-muted:#5A6070;
  --text-warm:#6A6350;   /* darkened from #7A7360 (Aug 2026): 4.37 on paper /
                            3.96 on tint both failed WCAG AA. Now 5.53 / 5.02.
                            Hue deliberately kept warm — it sits beside gold. */
  --border:#D9D2C0;
  --ink:#14171C;
  --paper:#F8F6F0;
  --paper-tint:#EFEBE0;
  --white:#FFFFFF;

  /* ---- Spacing (see SPACING-STANDARD.md) ------------------------------- */
  --space-section:64px;
  --space-half:32px;
  --space-box:32px;
  --space-divider:0px;

  /* ---- Header height (see RESPONSIVE-STANDARD.md section 4) -------------
     svh not vh/dvh: vh mis-measures on iOS, dvh resizes during scroll.
     min(...,13vw) exists because portrait phones are TALL, not small.
     Declared here rather than on .site-header so html{scroll-padding-top}
     can reference it.                                                   */
  --header-h: clamp(52px, min(10svh, 13vw), 76px);

  /* ---- Container tiers (see RESPONSIVE-STANDARD.md §3) -----------------
     Every full-width component picks one. All carry 24px side padding.   */
  --container-wide:    1160px;   /* header, footer AND content bands      */
  --container-mid:      760px;   /* schedule / upcoming — collapsed into    */
                                 /* the reading tier; kept as a named alias */
  --container-reading:  760px;   /* prose — approx 72 chars at 21px body   */

  /* ---- Reading scale ---------------------------------------------------
     Prose, headings, quotes. Sized for comfortable reading at arm's length.
     Root is 100% (16px), so these are deliberately above 1rem.
     px values in comments are at the default 16px root.               */
  --text-h1:      clamp(2.625rem, 5vw, 4.3rem);      /* 42 → 68.8 */
  --text-h2:      clamp(2.1rem, 4vw, 3rem);          /* 33.6 → 48  */
  --text-h2-page: clamp(1.8375rem, 3.4vw, 2.49rem);  /* 29.4 -> 39.9 — section
                                                        headings on interior
                                                        pages; smaller than the
                                                        homepage band headings */
  --text-h3:      1.875rem;                          /* 30         */
  --text-h4:      1.5rem;                            /* 24 — card headings */
  --text-h1-page: clamp(2.625rem, 5vw, 3.28rem);     /* 42 -> 52.5 — interior
                                                        page heroes; smaller
                                                        than the homepage h1 */
  --text-lead:    clamp(1.5rem, 2.6vw, 1.95rem);     /* 24 → 31.2  */
  --text-display: clamp(1.1875rem, 2.4vw, 1.5rem);   /* 19 → 24    */
  --text-body:    1.3125rem;                         /* 21         */
  --text-sm:      1.1875rem;                         /* 19         */
  --text-xs:      1.0625rem;                         /* 17         */

  /* ---- UI scale --------------------------------------------------------
     Chrome: nav, buttons, badges, eyebrows, labels, legal, form controls.
     Deliberately NOT derived from the reading scale. Enlarging body copy
     must never enlarge the navigation.                                */
  --ui-brand: 1.5rem;      /* 24 — header wordmark, large glyphs */
  --ui-lg:    1rem;        /* 16 — dropdown links, form inputs    */
  --ui-nav:   1.09375rem;  /* 17.5 — nav links ONLY (see below)   */
  --ui-md:    0.875rem;    /* 14 — buttons, eyebrows, footer links */
  --ui-sm:    0.8125rem;   /* 13 — legal, ages, small labels      */
  --ui-xs:    0.75rem;     /* 12 — badges, wordmark subtitle      */
}

/* ---- Breakpoint --------------------------------------------------------
   NOTE: custom properties CANNOT be used in media query conditions.
   `@media (max-width: var(--bp-md))` does not work in any browser.
   The value below is documentation only; the literal 860px must be
   written out in every media query.
                                                    --bp-md = 860px   */

@media (max-width:860px){
  :root{
    --space-section:32px;
    --space-half:16px;
    --space-box:16px;

    /* Reading sizes step down on narrow screens for line length, not
       because the screen is small. At 21px a 390px phone yields ~33
       characters per line; the comfortable range is 45–75.          */
    --text-body: 1.125rem;    /* 18 */
    --text-sm:   1.0625rem;   /* 17 */
  }
}