:root {
  /* Colour — #243E5B is the confirmed body/heading blue used on the
     live site; ramp built from that hue */
  --bms-blue-900: #142333;   /* footer, deepest ground */
  /* The canvas Google Drive's PDF viewer puts behind a page. Measured from the
     viewer itself on 2026-09-15 — it renders dark whatever the colour scheme
     asks for. Only /news/ uses it, to make the frame around the embed match
     what is inside it. */
  --drive-canvas: #1F1F1F;
  --bms-blue-700: #243E5B;   /* primary brand — headings, sidebar */
  --bms-blue-500: #50739B;   /* accents + LARGE text only (4.9:1) */
  --bms-blue-100: #EFF2F5;   /* tinted section bands */
  /* The newsletter shelf on /school-publications/. Its own ground rather than
     a step on the ramp: the covers are photographic and the band has to fall
     away behind them, which the navy does not do. The two shadows are the
     shelf's only ones on the site — the covers are planes standing in space,
     so they cast, where a card does not. */
  --shelf-ground:       #010103;
  --shelf-shadow:       rgba(2, 2, 5, 0.44);
  --shelf-shadow-lift:  rgba(2, 2, 5, 0.58);

  /* The awards flyover. The cards stand above an aerial photograph rather than
     on a page, so they cast — the same exception the newsletter covers get —
     and the photograph is darkened at its head and foot so the type over it
     has something to sit on. */
  --fly-scrim:      rgba(5, 9, 7, 0.66);
  --fly-scrim-foot: rgba(5, 9, 7, 0.62);
  --fly-shadow:     12px 26px 34px 7px rgba(5, 9, 7, 0.36), 3px 8px 15px rgba(5, 9, 7, 0.22);
  --ink:          #12181F;
  --ink-muted:    #55606D;   /* 6.4:1 on white — safe for body */
  --paper:        #FFFFFF;
  --paper-alt:    #F6F8FA;
  /* Tinted ground the page sits on, so white surfaces (the rail, the nav
     drawer, content sheets) read as raised above it rather than flush.
     ~6% darker than white — the same tonal step as the reference, in our
     blue hue instead of its green. Keep bands off --bms-blue-100 on top
     of this: the two are only 1.02:1 apart and would merge. */
  --page-ground:  #F1F4F7;

  /* Hairlines. Structural, not decorative — kept low enough to divide without
     drawing attention. Both are non-text boundaries, so the 3:1 UI rule does
     not apply; they never carry meaning on their own. */
  --hairline:         rgba(18, 24, 31, 0.14);   /* on light grounds */
  --hairline-on-dark: rgba(255, 255, 255, 0.20); /* on --bms-blue-900 */

  /* Accent. One warm metallic, in two values: a single hex cannot clear both
     4.5:1 on the navy panel and 3:1 on the light grounds, because the two
     requirements pull the lightness in opposite directions and the window
     between them is a couple of percent wide.
       --gold      on dark:  5.2:1 on --bms-blue-900. Eyebrow text.
       --gold-ink  on light: 3.3:1 on --page-ground, 3.4:1 on --paper-alt.
                   Rules and the current-page bar — never text.
     Used sparingly and never as the only carrier of meaning. */
  --gold:      #C1884F;
  --gold-ink:  #B07C3A;
  --gold-line: rgba(193, 136, 79, 0.55);

  /* Focus ring. A token rather than a fixed colour because the default is
     1.8:1 on --bms-blue-900 — invisible on the footer, the switcher band and
     the page tops, which is a 2.2 AA failure (2.4.11). Dark regions set it to
     --paper on themselves and every ring inside them inherits it. */
  --focus-ring: var(--bms-blue-700);

  /* Pale sky field behind the top-right of a page top. --bms-blue-700's hue
     taken to 88% lightness: 1.34:1 against --paper. The field is masked out to
     nothing at three of its edges, so it needs more weight in the middle than
     a flat block would to read at all.
     88 rather than lower because --ink-muted still clears 4.5:1 on it (4.78),
     which keeps a long breadcrumb legible if one ever runs across it. */
  --bms-sky: #D3E0EE;

  /* White run-up to the footer. Owned by the footer itself, so every page gets
     the same approach to it and no page section has to know it is last. */
  --footer-lead: 6rem;

  /* Type — fluid, no media queries needed */
  --step--1: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --step-0:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem,  1.10rem + 0.70vw, 1.6rem);
  --step-2:  clamp(1.60rem,  1.35rem + 1.20vw, 2.4rem);
  --step-3:  clamp(2.00rem,  1.50rem + 2.40vw, 3.6rem);
  --step-4:  clamp(2.60rem,  1.60rem + 4.60vw, 5.5rem);
  /* One step above --step-4, for the Explore pages only. Those eight are
     showcases rather than documents, and their section headings have to read
     as chapter openers instead of as subheads. Nothing else uses it. */
  --step-5:  clamp(3.00rem,  1.90rem + 5.40vw, 6.0rem);

  /* Space — 4px base */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-12: 3rem;   --sp-16: 4rem;
  --sp-24: 6rem;   --sp-32: 8rem;

  --drawer-w: min(92vw, 462px); /* sliding nav drawer */
  --rail-w-collapsed: 101px;  /* always-visible icon rail (was 96px, +5%) */
  --topbar-h: 70px;           /* rail height when it collapses to a top bar, in the phone layout (64 → 67 → 70) */
  /* The phone layout is below 1024px wide, or any touch-first screen up to
     1400px whichever way up it is held; the computer layout is everything
     else. CSS cannot share a media query, so every rule spells the two lists
     out in full. They are defined, and explained, once in
     assets/js/layout.js. */
  /* Gap between horizontal-rail cards. Measured off the reference
     recording: 138px between 394px-wide cards at a 1280px viewport,
     i.e. roughly a third of the card width. */
  /* Eight-tone blue ramp for the card band — one tone per card, darkest at
     the first card, finishing on --bms-blue-100 so it meets the news band
     below it seamlessly. Sampled perceptually (OKLab) through the brand
     anchors 900 -> 700 -> 500 -> 100 so the steps read as evenly spaced
     and stay in the blue family. */
  --hrail-tone-1: #142333;
  --hrail-tone-2: #1B2E44;
  --hrail-tone-3: #223A55;
  --hrail-tone-4: #304D6D;
  --hrail-tone-5: #436388;
  --hrail-tone-6: #6684A8;
  --hrail-tone-7: #A9BACE;
  --hrail-tone-8: #EFF2F5;

  /* Explore-page switcher tones — one per therapy, a fixed palette like the
     card band's above. Each is the panel ground behind --ink text and the dot
     on the navy band, so both jobs were measured: the weakest clears 5.9:1 on
     --ink (music therapy) and 5.2:1 on --bms-blue-900. Colour is never the
     only thing carrying meaning here — every dot sits beside its own label. */
  --tone-occupational-therapy: #80BDFB;
  --tone-resources:            #F2CE59;
  --tone-speech-and-language:  #64C897;
  --tone-tea-and-talk:         #FE8B83;
  --tone-music-therapy:        #AD80DD;
  --tone-family-support:       #EFB062;
  --tone-therapy-dog:          #8FB57B;
  --tone-drawing-and-talking:  #FFA7D9;
  --tone-taras-therapy-space:  #39B7CB;
  --tone-counselling:          #EE8F63;
  --tone-traumainformed:       #52B9A7;
  --tone-elsa:                 #B2BE55;

  /* The generic Explore accent ramp. The set above is the therapy page's own,
     one tone per therapy and named for it; this is the one every other Explore
     page draws from by index, so adding a page does not add eight tokens.
     Eight hues at roughly even spacing, all light enough to carry --ink text
     (weakest 6.9:1) and to sit on --bms-blue-900 (weakest 6.1:1). */
  --tone-1: #80C0FF;
  --tone-2: #F1CE5F;
  --tone-3: #72CE9B;
  --tone-4: #FC928A;
  --tone-5: #B88EE8;
  --tone-6: #F4B267;
  --tone-7: #4FC4D1;
  --tone-8: #F6A6DC;

  --hrail-gap: clamp(2rem, 10.5vw, 8.5rem);
  --hrail-card-w: min(78vw, 32rem);
  --measure: 65ch;
  --radius: 4px;              /* near-square. No pill shapes, no bubbles. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Motion — every drawer timing lives here. Change these and the whole
     navigation retimes. Values follow New-Header.txt. */
  --t-open:         620ms;    /* drawer sliding in */
  --t-close:        460ms;    /* drawer sliding out — deliberately faster */
  --ease-drawer:    cubic-bezier(0.76, 0, 0.24, 1);
  --t-scrim-in:     420ms;
  --t-scrim-out:    320ms;
  --ease-scrim:     cubic-bezier(0.33, 1, 0.68, 1);
  --t-item-in:      520ms;    /* staggered link reveal */
  --t-item-out:     180ms;    /* no stagger on the way out */
  --stagger:        45ms;     /* per-item delay step */
  --stagger-offset: 140ms;    /* head start before the first item fires */
  --ease-item:      cubic-bezier(0.16, 1, 0.3, 1);
  --t-submenu:      480ms;
  --ease-submenu:   cubic-bezier(0.76, 0, 0.24, 1);

  /* Page reveal — the cascade as a page arrives. Its own set rather than
     sharing the drawer's: the drawer has to feel instant under a finger,
     this has to feel unhurried. These defaults are the drawer's values, which
     is what the reveal used before it had tokens of its own, so the landing
     page is unchanged; interior pages slow them right down in page.css. */
  --t-reveal:       var(--t-item-in);
  --reveal-stagger: var(--stagger);
  --reveal-offset:  0ms;
  --reveal-rise:    18px;
  --ease-reveal:    var(--ease-item);
  --t-burger:       300ms;
  --ease-burger:    cubic-bezier(0.65, 0, 0.35, 1);

  /* Intro curtain — the white sheet with the school mark that opens every
     page. Hold plus lift is what the visitor waits through, so those two
     together are the number to change if it ever starts to feel long. */
  --t-intro-mark:   320ms;    /* the mark clipping upward into view */
  --t-intro-hold:  1020ms;    /* how long the sheet sits before it goes */
  --t-intro-lift:   720ms;    /* the wipe itself */
  --ease-intro:     cubic-bezier(0.83, 0, 0.17, 1);

  /* The Diversity page's flag circle. One sector flies in, then the next, so
     five times the fly is the ten-second assembly; the settle is the shrink
     and the expansion that follow it, half of each; the ripple starts halfway
     through the settle and runs on past it. Twelve seconds in all, which is
     the duration the artwork was authored at. Everything else about the
     circle is derived from these three in explore.css. */
  --t-flags-fly:     2000ms;
  --t-flags-settle:  1000ms;
  --t-flags-ripple:  1500ms;
  --ease-settle:    cubic-bezier(0.33, 0, 0.67, 1);   /* smoothstep */
  /* Then the circle is left alone for half a second before its figures
     arrive, all together. The pause is the point: the reader watches one
     thing finish before being handed the next. */
  --t-flags-hold:     500ms;
  --t-flags-keys:     600ms;

  /* The wash behind an Explore page's opening. Two layers on different
     periods so the pattern does not repeat visibly. 64s/91s first, then
     26s/35s, and neither could actually be seen moving — ambient is not the
     same as imperceptible. These are the speeds to pull back on if the wash
     ever reads as busy. */
  /* One full revolution of the opening photograph's drift. */
  --t-portrait-float: 9000ms;

  --t-wash-a:      10000ms;
  --t-wash-b:      14000ms;

  /* One circuit of the ring round the tower on /curriculum/. Long: it is a
     light travelling, not an indicator spinning. */
  --t-cr-ring:      9000ms;
}