/* ==========================================================================
   Thankful Learning Center · Pencil and Chalkboard
   Every color pairing here was measured against WCAG (see DESIGN.md).
   Motion is spring-shaped and interruptible; nothing bounces unless thrown.
   ========================================================================== */

@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/young-serif-latin.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/young-serif-latin-ext.woff2?v=1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/atkinson-next-latin.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/atkinson-next-latin-ext.woff2?v=1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  /* Schoolhouse palette (14 Oct 2026): borrowed from the peers TLC named
     (Bright Side, Goddard, KinderCare): deep navy, soft sky, sunny yellow
     buttons, warm cream page. Every pair below is measured, not eyeballed. */
  --bg: #FBF6EA;            /* warm cream page */
  --bg-alt: #E6F1F8;        /* soft sky sections */
  --text: #1A2233;          /* ink 14.75:1 (13.86 on sky) */
  --text-soft: #4A5468;     /* ink soft 7.06:1 (6.63 on sky) */
  --band: #1D3A6E;          /* schoolhouse navy */
  --band-deep: #142A52;
  --on-band: #F3F6FB;       /* 10.3:1 on navy */
  --on-band-soft: #BFD0EA;  /* 7.13:1 */
  --card: #FFFDF8;          /* program and quote cards */
  --coral: #F26B4E; --leaf: #3BA776; --sky-deco: #8CC8EA;   /* decoration only, never text */
  --action: #F5B82E;        /* pencil: a fill, never small text on paper */
  --action-deep: #E3A21C;
  --on-action: #1A2233;     /* 8.92:1 */
  --accent-text: #B8460E;   /* warm orange 4.97:1 (4.67 on sky) */
  --rule: rgba(26, 34, 51, .14);
  --rule-on-band: rgba(243, 246, 251, .22);
  --field-bg: #FBF6EA;
  --field-border: #7A8499;  /* 3.48:1 (3.28 on sky), WCAG 1.4.11 */
  --focus: #1D3A6E;         /* 10.34:1 on cream */
  --scrim: rgba(20, 42, 82, .38);
  --lift: 0 1px 2px rgba(26,34,51,.08), 0 10px 28px rgba(26,34,51,.14);
  --sheet: 0 -1px 0 rgba(26,34,51,.06), 0 24px 60px rgba(26,34,51,.22);

  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-label: .86rem;
  --step-small: .95rem;
  --step-body: clamp(1.06rem, 1rem + .25vw, 1.18rem);
  --step-title: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-headline: clamp(1.85rem, 1.3rem + 2vw, 2.9rem);
  --step-display: clamp(2.6rem, 1.4rem + 5.2vw, 5.3rem);

  --gutter: clamp(1.5rem, .4rem + 5.4vw, 6rem);
  --max: 78rem;                          /* 1248px of content at 1440 */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius-sm: 8px; --radius: 14px; --radius-lg: 24px;

  /* Critically damped spring (response 0.38s): settles with no overshoot. */
  --spring: linear(0, .0439, .1421, .2607, .3804, .4912, .5887, .6716, .7404, .7965, .8415, .8773, .9055, .9276, .9447, .9579, .9681, .9758, .9818, .9863, .9897, .9923, .9942, .9957, .9968, .9976, .9982, .9987, 1);
  --travel: 560ms;   /* page-to-page shared elements */
  --snap: 410ms;     /* press release, sheets */
  --tap: 100ms;      /* feedback on touch-down */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0E1828; --bg-alt: #16233A; --card: #16233A;
    --text: #EEF2F8; --text-soft: #A9B7CC;      /* 15.84 / 8.76 (7.74 on raise) */
    --band: #1D3A6E; --band-deep: #0B1426;
    --accent-text: #F4A06B;                     /* 8.55:1 on night, 7.55 on raise */
    --rule: rgba(238, 242, 248, .14);
    --field-bg: #16233A; --field-border: #7887A0;  /* 4.32:1 */
    --focus: #F5B82E;                           /* 9.67:1 */
    --scrim: rgba(5, 10, 8, .6);
    --lift: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
    --sheet: 0 24px 60px rgba(0,0,0,.6);
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--step-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, .display, .headline { font-family: var(--serif); font-weight: 400; color: inherit; text-wrap: balance; }
.display { font-size: var(--step-display); line-height: 1.02; letter-spacing: -.02em; }
.headline { font-size: var(--step-headline); line-height: 1.08; letter-spacing: -.012em; }
.title { font: 700 var(--step-title)/1.25 var(--sans); }
.label { font: 700 var(--step-label)/1.3 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--accent-text); }
.label + .headline, .label + .display, .label + h1, .label + h2 { margin-top: .6rem; }
.headline + .lede { margin-top: 1rem; }
.lede { font-size: var(--step-body); color: var(--text-soft); max-width: 62ch; }
.small { font-size: var(--step-small); }
p { max-width: 68ch; text-wrap: pretty; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px;
}
.band :where(a, button, input, [tabindex]):focus-visible,
.footer :where(a, button, input, [tabindex]):focus-visible,
.admin-bar :where(a, button, input, [tabindex]):focus-visible { --focus: #F5B82E; }

.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.band { background: var(--band); color: var(--on-band); }
.band .label { color: var(--action); }
.band .lede, .band p { color: var(--on-band-soft); }
.stack > * + * { margin-top: var(--stack, 1.25rem); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: .5rem; z-index: 100; }
.skip-link:focus { left: var(--gutter); background: var(--action); color: var(--on-action); padding: .7rem 1rem; border-radius: var(--radius-sm); }

/* ------------------------------------------------------------ navigation */
.site-nav { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-nav__inner { display: flex; align-items: center; gap: 2rem; min-height: 80px; }
.wordmark { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--band); margin-right: auto; padding-block: 6px; }
.wordmark__name { font: 400 1.85rem/1 var(--serif); letter-spacing: -.01em; }
.wordmark__sub { font: 700 .72rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.band .wordmark, .footer .wordmark, .admin-bar .wordmark { color: var(--on-band); }
.band .wordmark__sub, .footer .wordmark__sub, .admin-bar .wordmark__sub { color: var(--on-band-soft); }
@media (prefers-color-scheme: dark) { .wordmark { color: var(--text); } }
.nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-weight: 500; }
.nav-links a:hover { background: var(--bg-alt); }
.nav-links a[aria-current="page"] { position: relative; border-radius: 0; }
/* With a mouse: a pencil line draws under a menu item from the left, and erases
   back the way it came. The current page keeps its own green underline. */
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { background: transparent; }
  .nav-links a:not([aria-current]) { position: relative; }
  .nav-links a:not([aria-current])::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 9px; height: 2px;
    border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform var(--snap) var(--spring); }
  .nav-links a:not([aria-current]):hover::after { transform: scaleX(1); }
}
/* The underline is its own element so it can glide to the next page's item. */
.nav-mark { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--band); view-transition-name: nav-mark; }
@media (prefers-color-scheme: dark) { .nav-mark { background: var(--action); } }
.menu-button { display: none; }

@media (max-width: 860px) {
  .no-js .site-nav__inner { flex-wrap: wrap; }
  .no-js .site-nav nav { order: 3; width: 100%; }
  .no-js .nav-links { display: flex; flex-wrap: wrap; padding-bottom: .5rem; }
  .no-js .menu-button { display: none !important; }
}
@media (max-width: 860px) {
  .site-nav__inner { min-height: 72px; gap: 1rem; }
  .wordmark__name { font-size: 1.6rem; }
  .nav-links, .site-nav .btn, .site-nav__actions { display: none; }
  .menu-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border: 1.5px solid var(--field-border); border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer;
    touch-action: manipulation; transition: transform var(--tap) ease-out; }
  .menu-button.is-pressed { transform: scale(.94); }
}

/* Mobile menu: a sheet that grows out of the button that opened it. */
.menu-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; pointer-events: none; }
.menu-sheet {
  position: fixed; z-index: 61; top: 12px; right: 12px; width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--sheet);
  padding: 12px 12px 20px; transform-origin: calc(100% - 36px) 36px;
  opacity: 0; transform: scale(.6); visibility: hidden; touch-action: pan-y;
}
.menu-sheet[data-state="open"], .menu-sheet[data-state="opening"], .menu-sheet[data-state="closing"] { visibility: visible; }
/* A closing sheet is on its way out: it must never catch a tap meant for the page. */
.menu-sheet:not([data-state="open"]):not([data-state="opening"]) { pointer-events: none; }
.menu-sheet__top { display: flex; justify-content: flex-end; }
.menu-sheet__close { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius); background: var(--bg-alt); color: var(--text); cursor: pointer; }
.menu-sheet ul { list-style: none; margin: 4px 0 16px; padding: 0; }
.menu-sheet li a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 12px;
  font: 700 1.4rem/1.2 var(--sans); color: var(--text); text-decoration: none; border-radius: var(--radius); }
.menu-sheet li a:active, .menu-sheet li a.is-pressed { background: var(--bg-alt); }
.menu-sheet li a[aria-current="page"] { color: var(--band); }
@media (prefers-color-scheme: dark) { .menu-sheet li a[aria-current="page"] { color: var(--action); } }
.menu-sheet .btn { width: 100%; }
.menu-sheet__note { margin: 14px 12px 0; color: var(--text-soft); font-size: var(--step-small); }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--action); --btn-fg: var(--on-action); --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: 0 1.5rem; border: 1.5px solid var(--btn-border); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg); font: 700 1rem/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--snap) var(--spring), background-color 160ms ease-out, color 160ms ease-out;
}
.btn:hover { --btn-bg: var(--action-deep); }
/* Feedback lands on touch-down (JS adds .is-pressed on pointerdown; :active is the no-JS fallback). */
.btn:active, .btn.is-pressed { transform: scale(.97); --btn-bg: var(--action-deep); transition-duration: var(--tap); transition-timing-function: ease-out; }
.btn--secondary { --btn-bg: var(--band); --btn-fg: var(--on-band); }
.btn--secondary:hover, .btn--secondary.is-pressed { --btn-bg: var(--band-deep); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-border: var(--text); }
.btn--ghost:hover, .btn--ghost.is-pressed, .btn--ghost:active { --btn-bg: var(--bg-alt); }
.btn--on-band { --btn-bg: transparent; --btn-fg: var(--on-band); --btn-border: var(--on-band); }
.btn--on-band:hover, .btn--on-band.is-pressed, .btn--on-band:active { --btn-bg: var(--band-deep); }
.btn--danger { --btn-bg: transparent; --btn-fg: var(--accent-text); --btn-border: var(--accent-text); }
.btn--danger:hover, .btn--danger.is-pressed, .btn--danger:active { --btn-bg: var(--bg-alt); }
.btn--small { min-height: 44px; padding: 0 1rem; font-size: .95rem; }
/* With a mouse: the header's Enroll button fills with chalkboard from the bottom
   and sinks back down on the way out. */
@media (hover: hover) and (pointer: fine) {
  .site-nav .btn--ghost { position: relative; isolation: isolate; overflow: hidden;
    transition: transform var(--snap) var(--spring), background-color 160ms ease-out, color 120ms ease-out 110ms; }
  .site-nav .btn--ghost::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--band);
    transform: translateY(101%); transition: transform var(--snap) var(--spring); }
  /* The text turns light only as the fill passes the middle, never on bare paper. */
  .site-nav .btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--on-band); --btn-border: var(--band);
    transition: transform var(--snap) var(--spring), background-color 160ms ease-out, color 120ms ease-out 80ms; }
  .site-nav .btn--ghost:hover::before { transform: none; }
}
.btn[disabled], .btn[aria-disabled="true"] { cursor: default; }
.btn__icon { flex: none; }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; text-decoration: none; color: inherit; }
.link-arrow svg { transition: transform var(--snap) var(--spring); }
.link-arrow:hover svg { transform: translateX(4px); }
.band .link-arrow { color: var(--on-band); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* ------------------------------------------------------------- photos */
.photo { position: relative; overflow: hidden; background: var(--bg-alt); }
.photo picture { display: block; width: 100%; height: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-tag { position: absolute; left: 16px; bottom: 16px; padding: 5px 10px; border-radius: 999px;
  background: rgba(251, 246, 234, .94); color: #1A2233; font: 700 .72rem/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; }

/* ---------------------------------------------------------------- hero */
/* Bright hero (14 Oct 2026): sky background, big rounded photo, a small round
   photo and a few playful dots, like the peers TLC admires. */
.hero-b { background: var(--bg-alt); overflow: hidden; padding-block: clamp(2.5rem, 5vw, 5rem); }
.hero-b__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-b__copy { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-b .display { color: var(--band); max-width: 12ch; }
@media (prefers-color-scheme: dark) { .hero-b .display { color: var(--text); } }
.hero-b .lede { color: var(--text-soft); max-width: 40ch; }
.hero-b__art { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; justify-self: end; }
.hero-b__main { position: absolute; inset: 4% 0 10% 10%; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
.hero-b__small { position: absolute; left: 0; bottom: 0; width: 38%; aspect-ratio: 1 / 1; border-radius: 50%; border: 8px solid var(--bg-alt); }
.dot { position: absolute; border-radius: 50%; }
.dot--sun { width: 16%; aspect-ratio: 1; top: 0; right: 4%; background: var(--action); }
.dot--sky { width: 7%; aspect-ratio: 1; top: 12%; left: 4%; background: var(--sky-deco); }
.dot--coral { width: 5%; aspect-ratio: 1; right: 0; bottom: 24%; background: var(--coral); }
.dot--leaf { width: 4%; aspect-ratio: 1; left: 44%; bottom: 1%; background: var(--leaf); }
@media (max-width: 860px) {
  .hero-b__inner { grid-template-columns: 1fr; }
  .hero-b__art { order: -1; max-width: 420px; justify-self: center; }
}

.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; border: 1px solid var(--rule-on-band); border-radius: var(--radius); }
.facts > div { padding: .85rem 1.25rem; }
.facts > div + div { border-left: 1px solid var(--rule-on-band); }
.facts dt { font: 700 var(--step-label)/1.3 var(--sans); letter-spacing: .02em; color: var(--on-band-soft); }
.facts dd { font: 500 1rem/1.4 var(--sans); color: var(--on-band); }
.facts--light { border-color: var(--rule); background: color-mix(in srgb, var(--card) 70%, transparent); }
.facts--light > div + div { border-color: var(--rule); }
.facts--light dt { color: var(--text-soft); }
.facts--light dd { color: var(--text); }
@media (max-width: 860px) {
  .facts { grid-template-columns: 1fr; }
  .facts > div { display: grid; grid-template-columns: 4.5rem 1fr; align-items: baseline; padding: .75rem 1rem; }
  .facts > div + div { border-left: 0; border-top: 1px solid var(--rule-on-band); }
  .facts--light > div + div { border-top-color: var(--rule); }
}

/* ----------------------------------------------------- programs + chips */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2.25rem; }
.section-head > div > * + * { margin-top: .6rem; }
.chips { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; padding: 8px; margin: -8px; /* room for the focus ring */
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 0;
  background: var(--bg-alt); color: var(--text); font: 500 1rem/1 var(--sans); cursor: pointer; touch-action: manipulation;
  transition: transform var(--snap) var(--spring), background-color 180ms ease-out, color 180ms ease-out; }
.chip:hover { background: color-mix(in srgb, var(--bg-alt) 88%, var(--band) 12%); }
.chip.is-pressed, .chip:active { transform: scale(.95); transition-duration: var(--tap); }
/* With a mouse, chips also bubble on hover: initChipBubble in site.js. */
.chip[aria-pressed="true"] { background: var(--band); color: var(--on-band); }
@media (prefers-color-scheme: dark) { .chip[aria-pressed="true"] { background: var(--action); color: var(--on-action); } }

.program-list, .related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.related { margin-top: 2rem; }
/* A program is a card: photo, age badge, name, one line. The whole card is one
   link (stretched from the name), and the arrow is a real link to the same page. */
.program-row { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 12px 12px 1.5rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(26,34,51,.05);
  transition: transform var(--snap) var(--spring), box-shadow var(--snap) ease-out; }
.program-row > div { display: flex; flex-direction: column; gap: .5rem; padding: 0 .75rem 0; }
.program-row .photo { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.age-badge { align-self: flex-start; font: 700 var(--step-label)/1.2 var(--sans); letter-spacing: .02em; color: var(--band);
  background: var(--bg-alt); padding: .42rem .75rem; border-radius: 999px; }
@media (prefers-color-scheme: dark) { .age-badge { background: var(--band); color: var(--on-band); } }
.program-row :is(h2, h3) { font: 700 var(--step-title)/1.25 var(--sans); margin: 0; }
.program-row :is(h2, h3) a { display: inline-block; color: var(--text); text-decoration: none; } /* one box, so a wrapped title can still travel */
/* Stretched link: the whole card is one target, while the HTML keeps a single
   meaningful link (the program name) instead of wrapping blocks in <a>. */
.program-row :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.program-row p:not(.age-badge) { color: var(--text-soft); padding-right: 3rem; }
.program-row__go { position: absolute; right: 1.1rem; bottom: 1.1rem; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--text);
  display: grid; place-items: center; color: var(--text); text-decoration: none;
  transition: transform var(--snap) var(--spring), background-color 180ms ease-out, color 180ms ease-out; }
@media (hover: hover) {
  .program-row:hover { transform: translateY(-4px); box-shadow: var(--lift); }
  .program-row:hover .program-row__go { background: var(--band); color: var(--on-band); border-color: var(--band); transform: translateX(3px); }
}
/* Touch-down: the card dips, ready to travel. */
.program-row.is-pressed { transform: scale(.985); box-shadow: var(--lift); transition-duration: var(--tap); }
@supports selector(:has(*)) {
  .program-row:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
  .program-row a:focus-visible { outline: none; }
}
.program-row[hidden] { display: none; }
.program-empty { padding: 2rem 0; color: var(--text-soft); }
/* Tablets keep the side-by-side row with a smaller photo; only phones stack. */
@media (max-width: 1024px) { .program-list, .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .program-list, .related { grid-template-columns: 1fr; gap: 1.25rem; }
  .program-row .photo { aspect-ratio: 16 / 10; }
  .program-row__go { display: none; }
  .program-row p:not(.age-badge) { padding-right: 0; }
}

/* ------------------------------------------------------- steps + timeline */
.steps, .timeline { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 2.5rem 3rem; list-style: none; margin: 2.5rem 0; padding: 0; }
.timeline { --cols: 4; }
.steps li, .timeline li { border-top: 2px solid var(--band); padding-top: 1.4rem; }
@media (prefers-color-scheme: dark) { .steps li, .timeline li { border-top-color: var(--action); } }
.steps .n, .timeline .time { display: block; font: 400 var(--step-headline)/1 var(--serif); color: var(--band); margin-bottom: .6rem; }
@media (prefers-color-scheme: dark) { .steps .n, .timeline .time { color: var(--action); } }
.steps h3, .timeline h3 { font: 700 var(--step-title)/1.25 var(--sans); margin: 0 0 .4rem; }
.steps p, .timeline p { color: var(--text-soft); }
@media (max-width: 860px) {
  .steps, .timeline { grid-template-columns: 1fr; gap: 0; margin: 1.5rem 0; }
  .steps li, .timeline li { display: grid; grid-template-columns: 3.4rem 1fr; padding: 1rem 0 1.25rem; }
  .steps .n, .timeline .time { font-size: 1.6rem; margin: 0; }
  .timeline .time { font: 700 1.1rem/1.6 var(--sans); }
  .timeline li { grid-template-columns: 7.5rem 1fr; column-gap: .75rem; }   /* room for "Mid-morning" */
}
.steps--4 { --cols: 4; }
.timeline--5 { --cols: 5; }

/* "What you can count on": icon, title, sentence, in two or three columns. */
.assurances { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 3rem; }
.assurances li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start; }
.assurances svg { width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: 999px; background: var(--band); color: var(--on-band); }
.assurances h3 { font: 700 var(--step-title)/1.25 var(--sans); margin: .35rem 0 .35rem; }
.assurances p { color: var(--text-soft); }
@media (max-width: 1024px) { .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .assurances { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Credentials strip under the hero (navy, like a stats row). */
.trust-strip { background: var(--band); }
.trust-strip__list { list-style: none; margin: 0 auto; padding-block: 1.4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; }
.trust-strip__list li { display: flex; align-items: center; gap: .85rem; }
.trust-strip__list svg { flex: none; width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 50%; background: var(--action); color: var(--band); }
.trust-strip__list b { display: block; font-weight: 700; color: var(--on-band); }
.trust-strip__list a { color: var(--on-band); }
.trust-strip__list span { display: block; font-size: var(--step-small); color: var(--on-band-soft); }
@media (max-width: 1024px) { .trust-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trust-strip__list { grid-template-columns: 1fr; } }

/* Why families choose us: a photo beside two columns of reasons. */
.why { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.why__head > * + * { margin-top: .8rem; }
.why__photo { margin-top: 2rem !important; aspect-ratio: 4 / 5; border-radius: 42% 58% 48% 52% / 38% 42% 58% 62%; }
.assurances--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.assurances li:nth-child(4n+2) svg { background: var(--action); color: var(--band); }
.assurances li:nth-child(4n+3) svg { background: var(--sky-deco); color: var(--band); }
.assurances li:nth-child(4n+4) svg { background: var(--coral); color: #FFFFFF; }
@media (max-width: 1024px) {
  .why { grid-template-columns: 1fr; }
  .why__photo { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); max-width: 640px; }
}
@media (max-width: 640px) { .assurances--two { grid-template-columns: 1fr; } }

/* What parents say. */
.section--sky { background: var(--bg-alt); }
.voices { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.voices li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.voices blockquote { margin: 0; }
.voices blockquote p::before { content: "\201C"; display: block; font: 400 3.2rem/1 var(--serif); color: var(--action); height: 1.6rem; }
.voices blockquote p { font-size: 1.12rem; line-height: 1.55; }
.voices__who { color: var(--text-soft); font-size: var(--step-small); }
.voices__empty { border-style: dashed !important; border-width: 2px !important; border-color: var(--field-border) !important; background: transparent !important; }
.voices__note { margin-top: 1.25rem; color: var(--text-soft); }
@media (max-width: 860px) { .voices { grid-template-columns: 1fr; } }

/* Slim bar above the header: enrolling news and contact, like the peers. */
.topbar { background: var(--band-deep); color: var(--on-band); font-size: var(--step-small); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; min-height: 44px; flex-wrap: wrap; }
.topbar__news { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.topbar__dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--action); }
.topbar__contact { display: flex; gap: 1.25rem; }
.topbar__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-band); }
@media (max-width: 640px) { .topbar__contact { display: none; } }
.site-nav__actions { display: flex; align-items: center; gap: .6rem; }
@media (max-width: 1150px) { .site-nav__enroll { display: none !important; } }

/* Home: a short numbered aside next to "Help paying for care". */
.aside-steps { border-top: 2px solid var(--band); padding-top: 1.4rem; }
@media (prefers-color-scheme: dark) { .aside-steps { border-top-color: var(--action); } }
.aside-steps h3 { font: 700 var(--step-title)/1.25 var(--sans); margin: 0 0 1rem; }
.aside-steps ol { margin: 0 0 1.25rem; padding-left: 1.4rem; display: grid; gap: .75rem; color: var(--text-soft); }
.aside-steps a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--text); }

/* Families page: jump links under the intro. */
.on-this-page { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.75rem; }
.on-this-page a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--text); }
.programs-cta { margin-top: 2.5rem; }
.on-band-soft { color: var(--on-band-soft); }
.on-band-soft a { color: var(--on-band); }

/* Placeholder facts. Plain text to the public; highlighted for the team so
   nothing unconfirmed slips into the launch. */
.is-team .tbc { background: color-mix(in srgb, var(--action) 38%, transparent); color: inherit; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .15em;
  text-decoration: underline dotted var(--accent-text) 2px; text-underline-offset: 3px; }
.is-team .band .tbc, .is-team .footer .tbc { background: color-mix(in srgb, var(--action) 30%, transparent); color: var(--on-band); text-decoration-color: var(--action); } /* chalk on the olive mix: 6:1 */
.team-bar .tbc { background: color-mix(in srgb, var(--bg) 55%, transparent); padding: 0 .3em; border-radius: 3px; }

/* ---------------------------------------------------- feature band */
.feature { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.feature .photo { aspect-ratio: 10 / 7; border-radius: var(--radius-lg); }
.feature__copy > * + * { margin-top: 1.25rem; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature .photo { aspect-ratio: 342 / 240; } }

/* -------------------------------------------------------- program page */
.back-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin: 1.25rem 0 1.5rem; color: var(--text); font-weight: 700; text-decoration: none; }
.back-link svg { transition: transform var(--snap) var(--spring); }
.back-link:hover svg { transform: translateX(-4px); }
.program-hero { display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-bottom: var(--section-y); }
.program-hero .photo { aspect-ratio: 33 / 26; border-radius: var(--radius-lg); }
.program-hero__info > * + * { margin-top: 1.4rem; }
.program-hero .display { color: var(--band); max-width: 10ch; }
@media (prefers-color-scheme: dark) { .program-hero .display { color: var(--text); } }
.deflist { border-top: 1px solid var(--rule); }
.deflist > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.deflist dt { font: 700 var(--step-label)/1.3 var(--sans); letter-spacing: .02em; color: var(--text-soft); text-transform: uppercase; }
.deflist dd { font-weight: 500; }
.deflist dd a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 860px) {
  .program-hero { grid-template-columns: 1fr; padding-bottom: 3rem; }
  .program-hero .photo { margin-inline: calc(var(--gutter) * -1); border-radius: 0; aspect-ratio: 390 / 280; }
  .deflist > div { grid-template-columns: 5rem 1fr; }
}

@media (max-width: 860px) { .related { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- about + give */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split .photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font: 400 var(--step-headline)/1.08 var(--serif); margin-top: 2.5rem; }
.gifts { list-style: none; margin: 2rem 0; padding: 0; border-top: 1px solid var(--rule); }
.gifts li { display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.gifts .amount { font: 400 var(--step-title)/1.2 var(--serif); color: var(--band); }
@media (prefers-color-scheme: dark) { .gifts .amount { color: var(--action); } }
.fine-print { margin-top: 1rem; color: var(--text-soft); }
.section-gap { margin-top: 2.5rem; }
.tight-gap { margin-top: .6rem; }
.text-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  font: 700 1rem/1.2 var(--sans); color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.notice { padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--rule); }
.notice--success { border-color: var(--band); }
.notice--error { border-color: var(--accent-text); }

/* -------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 5rem) var(--section-y); }
.contact__intro > * + * { margin-top: 1.35rem; }
.contact__intro .photo { aspect-ratio: 25 / 16; border-radius: var(--radius-lg); }
.panel { background: var(--bg-alt); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .contact__intro .photo { display: none; } }

/* ---------------------------------------------------------------- forms */
.form > * + * { margin-top: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.25rem; }
.form-row > * { margin: 0; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font: 500 1rem/1.4 var(--sans); margin-bottom: .45rem; }
.field .optional { color: var(--text-soft); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: .75rem 1rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--field-border); background: var(--field-bg); color: var(--text);
  font: 400 var(--step-body)/1.4 var(--sans); transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
.field .hint { margin-top: .4rem; color: var(--text-soft); font-size: var(--step-small); }
.field .error { margin-top: .4rem; color: var(--accent-text); font-size: var(--step-small); font-weight: 500; }
.field.has-error input, .field.has-error textarea { border-color: var(--accent-text); border-width: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Send button states: label, progress ring and check swap without changing width. */
.btn[data-state] { position: relative; }
.btn .btn__state { display: inline-flex; align-items: center; gap: .6rem; transition: opacity 160ms ease-out, transform var(--snap) var(--spring); }
.btn .btn__state--busy, .btn .btn__state--done { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: scale(.9); }
.btn[data-state="sending"] .btn__state--idle, .btn[data-state="sent"] .btn__state--idle { opacity: 0; transform: scale(.9); }
.btn[data-state="sending"] .btn__state--busy { opacity: 1; transform: none; }
.btn[data-state="sent"] { --btn-bg: var(--band); --btn-fg: var(--on-band); }
.btn[data-state="sent"] .btn__state--done { opacity: 1; transform: none; }
.ring { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.btn[data-state="sent"] .check-draw path { animation: draw 280ms ease-out 80ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.thanks { display: none; }
.thanks > * + * { margin-top: 1rem; }
.thanks__badge { width: 56px; height: 56px; border-radius: 999px; background: var(--band); color: var(--action); display: grid; place-items: center; }
.panel[data-sent="true"] .form { display: none; }
.panel[data-sent="true"] .thanks { display: block; }

/* --------------------------------------------------------------- footer */
.footer { background: var(--band-deep); color: var(--on-band); padding-block: 4.5rem; }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 2.5rem 4rem; }
.footer h2 { font: 700 var(--step-label)/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--action); margin-bottom: .6rem; }
.footer p, .footer li { font-size: var(--step-small); color: var(--on-band); }
.footer .muted { color: var(--on-band-soft); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer a { color: var(--on-band); display: inline-flex; min-height: 44px; align-items: center; }
.footer__gap { margin-top: 1rem; }
.footer__tag { margin-top: .9rem; max-width: 30ch; }
.footer__legal { margin-top: 3rem; color: var(--on-band-soft); font-size: .85rem; }
@media (max-width: 860px) { .footer { padding-block: 3rem; } .footer__cols { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ------------------------------------------------------------- reveal */
/* Only below-the-fold sections, only with JS, never the hero. */
.reveal-ready .reveal { opacity: 0; transform: translateY(14px); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; transition: opacity 500ms ease-out, transform var(--travel) var(--spring); }

/* --------------------------------------------------- view transitions */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: var(--travel); animation-timing-function: var(--spring); }
/* The old page is mostly gone before the new one shows, so text never ghosts. */
::view-transition-old(root) { animation: 160ms ease-out both vt-fade-out; }
::view-transition-new(root) { animation: 240ms ease-out 100ms both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* Direction of travel (set by transitions.js): the old page eases a little
   the other way as it fades; the new page settles in on the spring. */
[data-vt-dir]::view-transition-old(root) { animation: 160ms ease-in both vt-out; }
[data-vt-dir]::view-transition-new(root) { animation: var(--travel) var(--spring) both vt-in, 240ms ease-out 100ms both vt-fade-in; }
[data-vt-dir="forward"] { --vt-shift: 36px; }
[data-vt-dir="back"] { --vt-shift: -36px; }
@keyframes vt-out { to { opacity: 0; transform: translateX(calc(var(--vt-shift) * -.5)); } }
@keyframes vt-in { from { transform: translateX(var(--vt-shift)); } }
/* Menu underline glides; it grows in or fades out when one side has none. */
::view-transition-new(nav-mark):only-child { animation: 240ms ease-out 120ms both vt-fade-in; }
::view-transition-old(nav-mark):only-child { animation: 160ms ease-out both vt-fade-out; }
/* Phone menu: a sheet open (or closing) when a link is tapped leaves on its
   own, back toward the button, instead of riding along with the page. */
.menu-sheet:is([data-state="open"], [data-state="closing"]) { view-transition-name: menu-sheet; }
:root:has(.menu-sheet:is([data-state="open"], [data-state="closing"])) .menu-scrim { view-transition-name: menu-scrim; }
::view-transition-group(menu-sheet), ::view-transition-group(menu-scrim) { animation: none; }
::view-transition-old(menu-sheet) { animation: 220ms ease-in both vt-sheet-out; transform-origin: calc(100% - 36px) 36px; }
::view-transition-old(menu-scrim) { animation: 220ms ease-out both vt-fade-out; }
@keyframes vt-sheet-out { to { opacity: 0; transform: scale(.9); } }
.site-nav { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation: none; }
/* One program travels between a row and its page. The rows get these names
   from transitions.js, only for the row being opened or returned to. */
.program-hero .photo { view-transition-name: program-photo; }
.program-hero .display { view-transition-name: program-title; }
/* The photo changes shape on the way (wide row, taller hero), so both
   snapshots fill the moving frame and are cropped by it, never stretched. */
::view-transition-image-pair(program-photo) { overflow: clip; animation: var(--travel) var(--spring) both vt-radius; }
::view-transition-old(program-photo),
::view-transition-new(program-photo) { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
/* The old photo holds still underneath until the new one has landed on top,
   so a photo still loading never leaves an empty frame. */
::view-transition-old(program-photo) { animation: none; opacity: 1; }
::view-transition-new(program-photo) { animation: 220ms ease-out both vt-fade-in; }
/* Leaving or arriving with nothing to pair with (program page to Home, say):
   the photo simply fades with the page. */
::view-transition-old(program-photo):only-child { animation: 180ms ease-out both vt-fade-out; }
/* Corners round off on the way: row 14px, program page 24px (square on phones). */
@keyframes vt-radius { from { border-radius: var(--vt-r-from); } to { border-radius: var(--vt-r-to); } }
:root { --vt-r-from: var(--radius); --vt-r-to: var(--radius-lg); }
:root:has(.program-row .photo[data-vt]) { --vt-r-from: var(--radius-lg); --vt-r-to: var(--radius); }
@media (max-width: 860px) {
  :root { --vt-r-to: 0px; }
  :root:has(.program-row .photo[data-vt]) { --vt-r-from: 0px; }
}
/* Titles change font and size: swap them early, while the frame is moving. */
::view-transition-old(program-title) { animation: 160ms ease-out both vt-fade-out; }
::view-transition-new(program-title) { animation: 240ms ease-out 80ms both vt-fade-in; }

/* ---------------------------------------------- coming soon + team gate */
.gate { min-height: 100dvh; display: grid; align-items: center; padding: 3rem var(--gutter); }
.gate__inner { width: 100%; max-width: 34rem; margin-inline: auto; }
.gate__inner > * + * { margin-top: 1.1rem; }
.gate .wordmark { color: var(--on-band); margin-bottom: 2.5rem; }
.gate .wordmark__sub { color: var(--on-band-soft); }
.gate .headline { color: var(--on-band); }
.gate__lede { color: var(--on-band-soft); font-size: var(--step-lede, 1.15rem); line-height: 1.55; }
.gate__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-weight: 700; }
.gate__contact a { color: var(--on-band); display: inline-flex; min-height: 44px; align-items: center; }
.gate__address { color: var(--on-band-soft); }
.gate__form { margin-top: 2rem; display: grid; gap: 1.25rem; justify-items: start; }
.gate__form .field { width: 100%; }
.gate .field label { color: var(--on-band); }
.gate .field .error { color: #F6C1A8; }   /* 6.96:1 on navy */
.gate .field input { border-color: var(--on-band-soft); }
/* Signed-in team members see this on every page of the private preview. */
.team-bar { max-width: none; background: var(--action); color: var(--on-action); font: 700 var(--step-small)/1.3 var(--sans); text-align: center; padding: .45rem var(--gutter); }

/* ------------------------------------------------------------- admin */
.admin { background: var(--bg); }
.admin-bar { background: var(--band-deep); color: var(--on-band); }
.admin-bar__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; flex-wrap: wrap; }
.admin-bar .wordmark { margin-right: 0; }
.admin-bar .wordmark__name { font-size: 1.35rem; }
.admin-nav { display: flex; gap: .25rem; list-style: none; margin: 0 auto 0 1rem; padding: 0; }
.admin-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; color: var(--on-band-soft); text-decoration: none; font-weight: 500; border-radius: var(--radius-sm); }
.admin-nav a:hover { color: var(--on-band); background: rgba(243,246,251,.08); }
.admin-nav a[aria-current="page"] { color: var(--on-band); box-shadow: inset 0 -3px 0 var(--action); border-radius: 0; }
.admin-user { display: flex; align-items: center; gap: 1rem; color: var(--on-band-soft); font-size: var(--step-small); }
.admin-main { padding-block: 2.5rem 5rem; }
@media (max-width: 860px) {
  .admin-bar__inner { gap: .25rem 1rem; padding-block: .5rem; }
  .admin-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .admin-user { margin-left: auto; }
  .admin-user > span { display: none; }
}
.admin-main h1 { font: 400 var(--step-headline)/1.1 var(--serif); }
.admin-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin: .5rem 0 2rem; }
.admin-head .meta { color: var(--text-soft); margin-top: .4rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.summary { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; padding: 1.1rem 0; border-block: 1px solid var(--rule); margin-bottom: 2rem; }
.summary div { display: flex; gap: .5rem; align-items: baseline; }
.summary strong { font: 700 1.25rem/1 var(--sans); }
.summary span { color: var(--text-soft); }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1.5rem; }
.toolbar .field { margin: 0; }
.toolbar .field input, .toolbar .field select { min-height: 44px; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
table.data th, table.data td { text-align: left; padding: .8rem .75rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.data th { font: 700 var(--step-label)/1.3 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--text-soft); }
table.data tbody tr { transition: background-color 120ms ease-out; }
table.data tbody tr:hover { background: var(--bg-alt); }
table.data a { font-weight: 700; color: var(--text); }
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 .7rem; border-radius: 999px; font: 700 .8rem/1 var(--sans); background: var(--bg-alt); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--rule); }
.pill--active { background: var(--band); color: var(--on-band); }
.pill--prospective { background: var(--action); color: var(--on-action); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem 2rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.detail-grid dt { font: 700 var(--step-label)/1.3 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .2rem; }
.detail-grid dd { font-weight: 500; }
.admin h2 { font: 700 var(--step-title)/1.25 var(--sans); margin: 2.5rem 0 1rem; }
/* Admin-only content: a tinted, fully bordered panel with a lock, not a side stripe. */
.restricted { margin-top: 2.5rem; padding: 1.5rem; border-radius: var(--radius); border: 1.5px solid var(--field-border); background: var(--bg-alt); }
.restricted__tag { display: inline-flex; align-items: center; gap: .4rem; font: 700 var(--step-label)/1.3 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--accent-text); }
.restricted h2 { margin: .4rem 0 .6rem; }
.prewrap { white-space: pre-wrap; }
.form--admin { max-width: 760px; }
.admin .back-link { margin-top: 0; }
.danger-zone { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.danger-zone p { color: var(--text-soft); font-size: var(--step-small); }
.messages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.messages li { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.messages header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: .4rem; }
.messages p { white-space: pre-wrap; }
.auth { max-width: 26rem; margin-inline: auto; padding-block: clamp(2.5rem, 10vh, 6rem); }
.auth > * + * { margin-top: 1.25rem; }

/* Confirmation sheet: replaces window.confirm, anchored to the bottom edge. */
dialog.sheet { border: 0; padding: 0; margin: auto auto 0; width: min(560px, 100%); max-width: 100%; max-height: 90dvh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg); color: var(--text); box-shadow: var(--sheet); }
dialog.sheet::backdrop { background: var(--scrim); }
@media (min-width: 640px) { dialog.sheet { margin: auto; border-radius: var(--radius-lg); } }
.sheet__body { padding: 1.75rem 1.75rem 1.5rem; }
.sheet__body > * + * { margin-top: .9rem; }
.sheet__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; }
dialog.sheet[open] { animation: sheet-in var(--snap) var(--spring); }
dialog.sheet[open]::backdrop { animation: fade-in 200ms ease-out; }
dialog.sheet.is-closing { animation: sheet-out 200ms ease-in forwards; }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes sheet-out { to { transform: translateY(40px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ------------------------------------------------- user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .reveal-ready .reveal { opacity: 1; transform: none; }
  .ring { animation: none; border-right-color: currentColor; opacity: .6; }
  /* Shared elements cross-fade instead of travelling. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 160ms !important; }
  [style*="view-transition-name"], .program-hero .photo, .program-hero .display, .nav-mark { view-transition-name: none !important; }
}
@media (prefers-reduced-transparency: reduce) { .placeholder-tag { background: #FBF6EA; } }
@media (prefers-contrast: more) {
  :root { --rule: rgba(26,34,51,.45); --rule-on-band: rgba(243,246,251,.55); --field-border: #4A5468; --text-soft: #343B4A; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --rule: rgba(238,242,248,.45); --field-border: #9AA8BE; --text-soft: #C9D3E2; }
}
@media (prefers-contrast: more) {
  .btn { border-color: currentColor; }
}
@media print {
  .site-nav, .menu-sheet, .menu-scrim, .footer, .admin-bar, .actions, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}