/*
 * Quicksand (headings / subheadings) — brand display face.
 * Weights: 600 Semibold, 700 Bold per style guide.
 */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&display=swap");

:root {
    /* —— Layout —— */
    --space-xs: 0.35rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    --measure: 48rem;
    --page-pad: clamp(1rem, 3vw, 2rem);
    --line: 1.55;
    --line-tight: 1.2;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;

    /*
     * Brand tokens — Los Little Learners Style Guide
     * x-ref: misc/brand-files/Brand Identity/LosLittleLearners_Style Guide.pdf
     *
     * Contrast rules from the guide:
     *   • White or cream text on dark green
     *   • Dark green text on cream, light green, and all accents
     *   • Prefer dark green over black for body copy
     *   • Accents sparingly (decoration / attention only)
     *   • Logos: white or cream backgrounds only; scale proportionally
     */

    /* —— Primary palette —— */
    --color-cream: #fff7e2; /* RGB 255,247,226 — base light surface */
    --color-green-light: #d5e7ac; /* RGB 213,231,172 — base mid surface */
    --color-green-dark: #29421f; /* RGB 41,66,31 — primary text / dark surface */
    --color-white: #ffffff; /* logo / high-contrast surface */

    /* aliases (kept for existing references) */
    --color-base-light: var(--color-cream);
    --color-base-med: var(--color-green-light);
    --color-base-dark: var(--color-green-dark);

    /* —— Accent palette (use sparingly) —— */
    --color-accent-brown: #d19865; /* RGB 209,152,101 */
    --color-accent-fuchsia: #d1add2; /* RGB 209,173,210 */
    --color-accent-blue: #61bbe9; /* RGB 97,187,233 */
    --color-accent-yellow: #feeb8c; /* RGB 254,235,140 */
    --color-accent-fusia: var(--color-accent-fuchsia); /* legacy alias */

    /* —— Semantic color roles —— */
    --color-bg: var(--color-cream);
    --color-bg-muted: var(--color-green-light);
    --color-bg-inverse: var(--color-green-dark);
    --color-fg: var(--color-green-dark);
    --color-fg-on-dark: var(--color-cream);
    --color-fg-on-accent: var(--color-green-dark);
    --color-border: color-mix(in srgb, var(--color-green-dark) 22%, transparent);
    --color-focus: var(--color-green-dark);

    /* —— Typography: families —— */
    --ft-display: "Quicksand", "Trebuchet MS", "Segoe UI", sans-serif;
    --ft-body: Cambria, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

    /* —— Typography: heading (Quicksand Bold, all caps) ——
     * Print: 60 pt. Web uses a fluid clamp anchored near that scale. */
    --ft-heading-family: var(--ft-display);
    --ft-heading-weight: 700;
    --ft-heading-size: clamp(2.25rem, 5vw + 1rem, 3.75rem); /* ~60pt max */
    --ft-heading-size-brand: 3.75rem; /* 60pt @ 16px root */
    --ft-heading-transform: uppercase;
    --ft-heading-case: all-caps;
    --ft-heading-line: var(--line-tight);
    --ft-heading-tracking: 0.02em;

    /* —— Typography: subheading (Quicksand Semibold, sentence case) ——
     * Print: 36 pt. */
    --ft-subheading-family: var(--ft-display);
    --ft-subheading-weight: 600;
    --ft-subheading-size: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem); /* ~36pt max */
    --ft-subheading-size-brand: 2.25rem; /* 36pt @ 16px root */
    --ft-subheading-transform: none;
    --ft-subheading-case: sentence;
    --ft-subheading-line: var(--line-tight);
    --ft-subheading-tracking: 0;

    /* —— Typography: body (Cambria Regular, sentence case) ——
     * Print: 14 pt. Slightly larger on screen for readability. */
    --ft-body-family: var(--ft-body);
    --ft-body-weight: 400;
    --ft-body-size: 1.05rem;
    --ft-body-size-brand: 0.875rem; /* 14pt @ 16px root */
    --ft-body-transform: none;
    --ft-body-case: sentence;
    --ft-body-line: var(--line);

    /* —— Typography: supporting scale —— */
    --ft-h3-size: clamp(1.2rem, 1.5vw + 0.85rem, 1.35rem);
    --ft-h4-size: 1.1rem;
    --ft-h5-size: 1rem;
    --ft-small-size: 0.95rem;
    --ft-caption-size: 0.85rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--ft-body-family);
    font-size: var(--ft-body-size);
    font-weight: var(--ft-body-weight);
    line-height: var(--ft-body-line);
    color: var(--color-fg);
    background-color: var(--color-bg);
}

body.nav-lock {
    overflow: hidden;
}

/* Legacy page chrome (pages not yet on .site-shell) */
body:not(.site-shell) > header,
body:not(.site-shell) > main,
body:not(.site-shell) > footer {
    width: min(100% - 2 * var(--page-pad), 64rem);
    margin-inline: auto;
}

body:not(.site-shell) > header {
    padding-block: var(--space-lg) var(--space-md);
}

body:not(.site-shell) > main {
    padding-block: var(--space-md) var(--space-xl);
}

body:not(.site-shell) > footer {
    padding-block: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
    font-size: var(--ft-small-size);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--space-sm);
    top: 0;
    z-index: 10000;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-green-dark);
    color: var(--color-fg-on-dark);
    text-decoration: none;
    font-family: var(--ft-display);
    font-weight: 600;
    transform: translateY(-120%);
}

.skip-link:focus {
    transform: translateY(var(--space-sm));
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--ft-heading-family);
    color: var(--color-fg);
    line-height: var(--ft-heading-line);
    margin: 0 0 var(--space-sm);
}

h1 {
    font-size: var(--ft-heading-size);
    font-weight: var(--ft-heading-weight);
    letter-spacing: var(--ft-heading-tracking);
    text-transform: var(--ft-heading-transform);
}

h2 {
    font-size: var(--ft-subheading-size);
    font-weight: var(--ft-subheading-weight);
    letter-spacing: var(--ft-subheading-tracking);
    text-transform: var(--ft-subheading-transform);
    margin-top: var(--space-sm);
}

h3 {
    font-size: var(--ft-h3-size);
    font-weight: var(--ft-subheading-weight);
    margin-top: var(--space-lg);
}

h4 {
    font-size: var(--ft-h4-size);
    font-weight: var(--ft-subheading-weight);
    margin-top: var(--space-md);
}

h5 {
    font-size: var(--ft-h5-size);
    font-weight: var(--ft-heading-weight);
}

p {
    max-width: var(--measure);
    margin: 0 0 var(--space-md);
}

a:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Custom elements that only wrap light-DOM chrome */
lll-nav {
    display: contents;
}

/* —— Nav (legacy pages) —— */
body:not(.site-shell) nav[aria-label="Main"] {
    margin-top: var(--space-md);
}

body:not(.site-shell) nav[aria-label="Main"] > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

body:not(.site-shell) nav[aria-label="Main"] > ul > li {
    position: relative;
}

body:not(.site-shell) nav[aria-label="Main"] > ul > li > a {
    font-weight: 600;
    text-decoration: none;
    padding: var(--space-xs) 0;
    border-bottom: 2px solid transparent;
    color: inherit;
}

body:not(.site-shell) nav[aria-label="Main"] > ul > li > a:hover,
body:not(.site-shell) nav[aria-label="Main"] > ul > li > a:focus-visible {
    border-bottom-color: currentColor;
}

body:not(.site-shell) nav[aria-label="Main"] ul ul {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0 0 0 var(--space-sm);
    font-size: 0.92rem;
}

body:not(.site-shell) nav[aria-label="Main"] ul ul a {
    text-decoration: none;
    color: inherit;
}

/* —— Site shell (About first; roll out to other pages) —— */
.site-shell {
    --shell-brand-width: clamp(16rem, 28vw, 22rem);
    --shell-panel-max: 48rem;
    --bp-tablet: 40rem;
    --bp-desktop: 64rem;
    /* Sidebar only when schedule tables have room to breathe */
    --bp-desktop-wide: 90rem;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-green-light);
}

.site-shell a {
    color: inherit;
}

/* Brand rail / mobile logo header */
.brand {
    background: var(--color-cream);
    padding: var(--space-lg) var(--page-pad) var(--space-md);
    text-align: center;
}

.brand__logo {
    display: inline-block;
    max-width: 12.5rem;
    line-height: 0;
}

.brand__logo img {
    width: 100%;
    height: auto;
    display: block;
}

.brand__contact {
    margin: var(--space-md) 0 0;
    font-size: var(--ft-caption-size);
    line-height: 1.45;
}

.brand__contact a {
    text-decoration: none;
}

.brand__contact a:hover,
.brand__contact a:focus-visible {
    text-decoration: underline;
}

/* Mobile: tray hidden in flow — opens as overlay above the yellow bar */
.brand__tray {
    display: none;
}

.site-shell nav[aria-label="Main"] {
    display: block;
}

.site-shell .nav-primary {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-shell .nav-primary > li > a {
    font-family: var(--ft-display);
    font-weight: var(--ft-heading-weight);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    letter-spacing: var(--ft-heading-tracking);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: var(--space-xs) 0;
}

.site-shell .nav-primary > li.is-current > a {
    border-bottom: 2px solid currentColor;
}

.site-shell .nav-sub {
    display: none;
}

/* Mobile: overlay tray — fixed under pinned yellow bar (works after scroll) */
.site-shell.is-nav-open {
    --nav-bar-height: 2.75rem;
}

.site-shell.is-nav-open .brand {
    position: relative;
    z-index: 25;
}

.site-shell.is-nav-open .brand__logo {
    visibility: hidden;
}

.site-shell.is-nav-open .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: min(100% - 2 * var(--page-pad), var(--shell-panel-max));
    margin-inline: auto;
}

.site-shell.is-nav-open .brand__tray {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    position: fixed;
    top: var(--nav-bar-height);
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 35;
    box-sizing: border-box;
    max-height: calc(100dvh - var(--nav-bar-height));
    padding: 0.85rem var(--page-pad) 1rem;
    background: var(--color-cream);
    text-align: center;
    overflow: auto;
}

.site-shell.is-nav-open .brand__contact {
    display: block;
    max-width: 16rem;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: center;
}

.site-shell.is-nav-open nav[aria-label="Main"] {
    margin-top: 0;
    text-align: center;
    max-width: 16rem;
    width: 100%;
}

.site-shell.is-nav-open .nav-primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
}

.site-shell.is-nav-open .nav-primary > li > a {
    font-size: 1.35rem;
    padding: 0.05rem 0;
    line-height: 1.15;
}

.site-shell.is-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 24;
    background: color-mix(in srgb, var(--color-green-dark) 35%, transparent);
}

/* Yellow top bar — inset track aligned with content column */
.nav-bar {
    --nav-bar-height: 2.75rem;

    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    box-sizing: border-box;
    width: min(100% - 2 * var(--page-pad), var(--shell-panel-max));
    margin-inline: auto;
    min-height: var(--nav-bar-height);
    padding: 0.4rem var(--space-md);
    background: var(--color-accent-yellow);
    color: var(--color-fg);
}

/* Bar links: mobile uses hamburger; tablet unpacks them here */
.nav-bar nav[aria-label="Main"] {
    display: none;
}

.nav-bar__section {
    margin: 0;
    font-family: var(--ft-display);
    font-weight: var(--ft-heading-weight);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nav-bar__menu {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.nav-bar__menu-icon,
.nav-bar__menu-icon::before,
.nav-bar__menu-icon::after {
    display: block;
    width: 1.35rem;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-bar__menu-icon {
    position: relative;
}

.nav-bar__menu-icon::before,
.nav-bar__menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-bar__menu-icon::before {
    top: -6px;
}

.nav-bar__menu-icon::after {
    top: 6px;
}

.site-shell.is-nav-open .nav-bar__menu-icon {
    background: transparent;
}

.site-shell.is-nav-open .nav-bar__menu-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.site-shell.is-nav-open .nav-bar__menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

.nav-bar__menu:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Content column — green ground */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-green-light);
}

.site-shell main {
    flex: 1;
    padding: var(--space-md) var(--page-pad) var(--space-xl);
}

.site-shell footer {
    padding: var(--space-lg) var(--page-pad);
    background: var(--color-green-light);
    text-align: center;
    font-size: var(--ft-small-size);
}

.site-shell footer p {
    margin: 0;
    max-width: none;
}

/* Panels: label tab + cream body card on green ground */
.panel {
    max-width: var(--shell-panel-max);
    margin: 0 auto var(--space-lg);
}

.panel--wide {
    max-width: none;
}

.panel__label {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    margin: 0;
    padding: 0.5rem var(--space-md);
    background: var(--color-green-dark);
    color: var(--color-fg-on-dark);
}

.panel__label h2 {
    margin: 0;
    font-family: var(--ft-body-family);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: inherit;
    line-height: 1.2;
}

.panel__label::after {
    content: "";
    flex: 1;
    height: 0;
    border-top: 1.5px solid color-mix(in srgb, var(--color-cream) 55%, transparent);
    min-width: 2rem;
}


.panel__body {
    background: var(--color-cream);
    padding: var(--space-md);
    margin-top: 0;
}

.lede {
    margin: 0 0 var(--space-md);
    max-width: none;
    font-family: var(--ft-body-family);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-fg);
}

.prose {
    max-width: none;
}

.prose p {
    max-width: none;
}

.prose p:last-child {
    margin-bottom: 0;
}

/* Qualifications: prose + documents side by side from tablet up */
.panel__body--split {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.panel__body--split .prose {
    columns: 1;
}

.doc-list h3 {
    margin: 0 0 var(--space-sm);
    font-family: var(--ft-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: var(--ft-heading-weight);
    line-height: 1.2;
    color: var(--color-fg);
}

.doc-list .list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.doc-list .list a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.doc-list .list a:hover,
.doc-list .list a:focus-visible {
    text-decoration-thickness: 2px;
}

.license-card {
    display: inline-block;
    min-width: min(100%, 14rem);
    padding: var(--space-md) var(--space-lg);
    background: color-mix(in srgb, var(--color-accent-blue) 18%, var(--color-white));
    border: 1px solid color-mix(in srgb, var(--color-green-dark) 18%, transparent);
}

.license-card__label {
    margin: 0 0 var(--space-xs);
    font-family: var(--ft-display);
    font-size: var(--ft-caption-size);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.license-card__value {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

/* —— Home: four-square illustration grid —— */
.site-shell--home .content > main {
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--page-pad) var(--space-lg);
}

.home-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    width: 100%;
    flex: 1;
}

.home-grid__cell {
    margin: 0;
    min-height: 0;
}

.home-grid__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    box-sizing: border-box;
    height: 100%;
    min-height: clamp(12rem, 42vw, 16rem);
    padding: var(--space-md) var(--space-sm);
    background: var(--color-cream);
    color: var(--color-fg);
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.home-grid__art {
    display: block;
    width: auto;
    height: clamp(5.5rem, 22vw, 8.5rem);
    max-width: 70%;
    object-fit: contain;
}

.home-grid__label {
    font-family: var(--ft-display);
    font-weight: var(--ft-heading-weight);
    font-size: clamp(1.35rem, 4vw, 2rem);
    letter-spacing: var(--ft-heading-tracking);
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.home-grid__link:hover,
.home-grid__link:focus-visible {
    background: var(--color-white);
    transform: translateY(-2px);
}

.home-grid__link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

@media (min-width: 40rem) {
    .home-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: var(--space-md);
        min-height: min(70vh, 40rem);
    }

    .home-grid__link {
        min-height: 0;
        padding: var(--space-lg);
    }

    .home-grid__art {
        height: clamp(6.5rem, 18vh, 10rem);
    }

    .home-grid__label {
        font-size: clamp(1.5rem, 3vw, 2.25rem);
    }
}

@media (min-width: 64rem) {
    .site-shell--home .content > main {
        padding: var(--space-lg) clamp(1.5rem, 3vw, 2.5rem);
    }

    .home-grid {
        min-height: calc(100dvh - 6rem);
        gap: var(--space-lg);
    }

    .home-grid__art {
        height: clamp(7rem, 16vh, 11rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-grid__link {
        transition: none;
    }

    .home-grid__link:hover,
    .home-grid__link:focus-visible {
        transform: none;
    }
}

/* —— Tablet+: tighter logo, 2-col prose —— */
@media (min-width: 40rem) {
    .brand__logo {
        max-width: 10rem;
    }

    .site-shell main {
        padding-block: var(--space-lg) var(--space-xl);
    }

    .panel__body {
        padding: var(--space-lg);
    }

    .lede {
        font-family: var(--ft-display);
        font-size: clamp(1.2rem, 2vw + 0.7rem, 1.55rem);
        font-weight: var(--ft-heading-weight);
        line-height: 1.3;
    }

    .prose {
        columns: 2;
        column-gap: var(--space-lg);
    }

    .prose p {
        break-inside: avoid;
    }

    .panel__body--split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.5rem, 4vw, 3.5rem);
        align-items: start;
    }

    .panel__body--split .prose {
        columns: 1;
    }

    .site-shell footer {
        background: transparent;
        padding-block: var(--space-md) var(--space-lg);
    }
}

/* —— Tablet only: contact under logo + unpacked yellow-bar nav —— */
@media (min-width: 40rem) and (max-width: 63.999rem) {
    .brand {
        padding-bottom: var(--space-sm);
    }

    .brand__tray {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: static;
        inset: auto;
        z-index: auto;
        min-height: 0;
        padding: 0 var(--page-pad) var(--space-sm);
        background: transparent;
        overflow: visible;
        text-align: center;
    }

    .brand__contact {
        display: block;
        max-width: 20rem;
        margin: 0;
        font-size: clamp(0.8rem, 1.5vw, 0.9rem);
        line-height: 1.4;
        text-align: center;
    }

    .brand__tray nav[aria-label="Main"] {
        display: none;
    }

    .nav-bar {
        justify-content: center;
        padding-block: 0.55rem;
        width: min(100% - 2 * var(--page-pad), 56rem);
    }

    .nav-bar__section,
    .nav-bar__menu {
        display: none;
    }

    .nav-bar nav[aria-label="Main"] {
        display: block;
        width: 100%;
    }

    .nav-bar .nav-primary {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0.35rem clamp(0.75rem, 2.5vw, 1.5rem);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-bar .nav-primary > li > a {
        font-family: var(--ft-display);
        font-weight: var(--ft-heading-weight);
        font-size: clamp(0.8rem, 1.6vw, 0.95rem);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 0.2rem 0;
        border-bottom: 2px solid transparent;
        line-height: 1.2;
        white-space: nowrap;
    }

    .nav-bar .nav-primary > li.is-current > a,
    .nav-bar .nav-primary > li > a[aria-current="page"] {
        border-bottom-color: currentColor;
    }

    .nav-bar .nav-sub {
        display: none;
    }

    .site-shell.is-nav-open .brand__logo {
        visibility: visible;
    }

    .site-shell.is-nav-open .brand__tray {
        display: flex;
        position: static;
        inset: auto;
        background: transparent;
        padding: 0 var(--page-pad) var(--space-sm);
        overflow: visible;
    }

    .site-shell.is-nav-open .brand__tray nav[aria-label="Main"] {
        display: none;
    }

    .site-shell.is-nav-open::after {
        display: none;
    }
}

/* —— Desktop: cream brand rail + green content ——
 * Brand rail is viewport-tall: logo, contact, and all nav links
 * must fit in 100dvh with nothing clipped (no sidebar scroll). */
@media (min-width: 64rem) {
    .site-shell {
        display: grid;
        grid-template-columns: var(--shell-brand-width) 1fr;
        grid-template-rows: 1fr;
        background: var(--color-green-light);
    }

    .brand {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(0.75rem, 2vh, 1.25rem);
        padding: clamp(1rem, 3vh, 2rem) var(--space-lg);
        overflow: hidden;
        z-index: 1;
    }

    .brand__logo {
        flex: 0 1 auto;
        max-width: min(12rem, 34vh);
        min-height: 0;
    }

    .brand__tray {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        flex: 0 1 auto;
        min-height: 0;
        gap: clamp(1.25rem, 4vh, 2.25rem);
    }

    .brand__contact,
    .site-shell nav[aria-label="Main"] {
        display: block;
        width: 100%;
        max-width: 14rem;
    }

    .brand__contact {
        margin-top: 0;
        order: 1;
        text-align: center;
        font-size: clamp(0.8rem, 1.5vh, 0.95rem);
        line-height: 1.4;
        flex-shrink: 0;
    }

    .site-shell nav[aria-label="Main"] {
        margin-top: 0;
        padding-block: 0;
        order: 2;
        flex-shrink: 0;
        text-align: center;
    }

    .site-shell .nav-primary {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(0.45rem, 1.5vh, 0.9rem);
    }

    .site-shell .nav-primary > li > a {
        font-size: clamp(1.05rem, 2.5vh, 1.4rem);
        padding: 0.15rem 0;
        line-height: 1.2;
    }

    .nav-bar {
        display: none;
    }

    .site-shell.is-nav-open::after {
        display: none;
    }

    .content {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .site-shell main {
        padding: var(--space-xl) clamp(1.5rem, 4vw, 3rem) var(--space-lg);
    }

    .panel {
        max-width: 52rem;
        margin-inline: 0;
        margin-bottom: var(--space-xl);
    }

    .panel--wide {
        max-width: none;
    }

    .site-shell footer {
        margin-top: auto;
    }
}

/*
 * Curriculum: retract the desktop rail until the viewport is wide enough
 * for the monthly schedule to use full width (~90rem / 1440px).
 * Between 64rem and that, keep tablet chrome (logo + contact + yellow bar).
 */
@media (min-width: 64rem) and (max-width: 89.999rem) {
    .site-shell--curriculum {
        display: flex;
        flex-direction: column;
    }

    .site-shell--curriculum .brand {
        position: relative;
        align-self: stretch;
        height: auto;
        overflow: visible;
        justify-content: flex-start;
        gap: var(--space-sm);
        padding: var(--space-lg) var(--page-pad) var(--space-sm);
    }

    .site-shell--curriculum .brand__logo {
        max-width: 10rem;
    }

    .site-shell--curriculum .brand__tray {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        flex: 0 0 auto;
        gap: 0;
        padding: 0 0 var(--space-sm);
    }

    .site-shell--curriculum .brand__contact {
        display: block;
        order: 0;
        font-size: clamp(0.8rem, 1.5vw, 0.9rem);
        line-height: 1.4;
    }

    .site-shell--curriculum .brand__tray nav[aria-label="Main"] {
        display: none;
    }

    .site-shell--curriculum .nav-bar {
        display: flex;
        justify-content: center;
        padding-block: 0.55rem;
        width: min(100% - 2 * var(--page-pad), 56rem);
    }

    .site-shell--curriculum .nav-bar__section,
    .site-shell--curriculum .nav-bar__menu {
        display: none;
    }

    .site-shell--curriculum .nav-bar nav[aria-label="Main"] {
        display: block;
        width: 100%;
    }

    .site-shell--curriculum .nav-bar .nav-primary {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0.35rem clamp(0.75rem, 2.5vw, 1.5rem);
    }

    .site-shell--curriculum .nav-bar .nav-primary > li > a {
        font-family: var(--ft-display);
        font-weight: var(--ft-heading-weight);
        font-size: clamp(0.8rem, 1.6vw, 0.95rem);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 0.2rem 0;
        border-bottom: 2px solid transparent;
        line-height: 1.2;
        white-space: nowrap;
    }

    .site-shell--curriculum .nav-bar .nav-primary > li.is-current > a,
    .site-shell--curriculum .nav-bar .nav-primary > li > a[aria-current="page"] {
        border-bottom-color: currentColor;
    }

    .site-shell--curriculum .nav-bar .nav-sub {
        display: none;
    }

    .site-shell--curriculum .content {
        min-height: 0;
    }

    .site-shell--curriculum .panel {
        max-width: none;
        margin-inline: auto;
    }

    .site-shell--curriculum main {
        padding: var(--space-lg) var(--page-pad) var(--space-xl);
    }
}

@media (max-width: 40rem) {
    body:not(.site-shell) nav[aria-label="Main"] > ul {
        flex-direction: column;
        gap: var(--space-sm);
    }

    main table {
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-bar__menu-icon,
    .nav-bar__menu-icon::before,
    .nav-bar__menu-icon::after {
        transition: none;
    }
}

/* —— Content blocks —— */
main > section,
main section section {
    margin-bottom: var(--space-lg);
}

dl {
    max-width: var(--measure);
    margin: 0 0 var(--space-md);
}

dt {
    font-weight: 700;
    margin-top: var(--space-sm);
}

dd {
    margin: 0.15rem 0 0;
}

/* Tuition and other content tables (schedule tables stay in schedules.css) */
main table {
    width: 100%;
    max-width: 36rem;
    border-collapse: collapse;
    margin: 0 0 var(--space-md);
    font-size: 0.98rem;
}

main .schedule-tabs table {
    max-width: none;
}

main th,
main td {
    border: 1px solid;
    padding: 0.55rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

main thead th {
    font-weight: 700;
}

main th[scope="row"] {
    font-weight: 600;
    white-space: nowrap;
}

/* —— Blueprint overlay (structure labels) —— */
:root {
    --blueprint-line: #3d7ab5;
    --blueprint-label-fg: #f4f8fc;
    --blueprint-label-bg: #3d7ab5;
}

html.blueprint body > header,
html.blueprint body > main,
html.blueprint body > footer,
html.blueprint nav[aria-label="Main"],
html.blueprint main > section,
html.blueprint main section section,
html.blueprint .brand,
html.blueprint .nav-bar,
html.blueprint .content,
html.blueprint .panel {
    position: relative;
    outline: 1px dashed var(--blueprint-line);
    outline-offset: -1px;
}

html.blueprint nav[aria-label="Main"],
html.blueprint main > section,
html.blueprint main section section,
html.blueprint .panel {
    /* Room for the corner label so it doesn’t sit on headings */
    padding-top: 1.15rem;
}

html.blueprint body > header::before,
html.blueprint body > main::before,
html.blueprint body > footer::before,
html.blueprint nav[aria-label="Main"]::before,
html.blueprint main > section::before,
html.blueprint main section section::before,
html.blueprint .brand::before,
html.blueprint .nav-bar::before,
html.blueprint .content::before,
html.blueprint .panel::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    padding: 0.12rem 0.4rem;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--blueprint-label-fg);
    background: var(--blueprint-label-bg);
    pointer-events: none;
    white-space: nowrap;
}

html.blueprint body > header::before {
    content: "header";
}

html.blueprint .brand::before {
    content: "aside.brand";
}

html.blueprint .nav-bar::before {
    content: ".nav-bar";
}

html.blueprint .content::before {
    content: ".content";
}

html.blueprint .panel:not([id])::before {
    content: ".panel";
}

html.blueprint .panel[id]::before {
    content: "#" attr(id);
}

html.blueprint nav[aria-label="Main"]::before {
    content: "nav";
}

html.blueprint body > main::before {
    content: "main";
}

html.blueprint .content > main::before,
html.blueprint .site-shell main::before {
    content: "main";
}

html.blueprint body > footer::before,
html.blueprint .content > footer::before {
    content: "footer";
}

html.blueprint main > section:not([id])::before,
html.blueprint main section section:not([id])::before {
    content: "section";
}

html.blueprint main > section[id]::before,
html.blueprint main section section[id]::before {
    content: "#" attr(id);
}

html.blueprint main[class]::before,
html.blueprint main > section[class]::before,
html.blueprint main section section[class]::before {
    content: "." attr(class);
}

/* Blueprint toggle — bottom right */
.blueprint-toggle {
    position: fixed;
    z-index: 1000;
    right: 0.75rem;
    bottom: 0.75rem;
    appearance: none;
    margin: 0;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--blueprint-line);
    border-radius: 0.25rem;
    background: var(--blueprint-label-bg);
    color: var(--blueprint-label-fg);
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 4px color-mix(in srgb, CanvasText 20%, transparent);
}

.blueprint-toggle:hover,
.blueprint-toggle:focus-visible {
    outline: 2px solid var(--blueprint-line);
    outline-offset: 2px;
}

.blueprint-toggle[aria-pressed="false"] {
    background: Canvas;
    color: var(--blueprint-line);
}