/*
 * CON8CT public school site.
 *
 * The renderer emits one inline style attribute on .c8s-site holding the
 * school's design tokens, and this file turns those tokens into a whole
 * website. Nothing here invents a colour, a typeface, a radius or a band
 * rhythm: every such value is a token or is mixed from one, so a school
 * changing its theme moves every page at once and no page can end up with a
 * combination the theme did not sanction.
 *
 * This stylesheet is the only one the public site loads, so it carries its own
 * reset. It is scoped to .c8s-body / .c8s-site throughout.
 */

/* ==========================================================================
   1. Tokens — theme fallbacks, then everything derived from them
   ========================================================================== */

.c8s-site {
    /*
     * Fallbacks only. The inline style attribute overrides all of these, so
     * these values are what a page looks like if the theme fails to render —
     * deliberately neutral, never a brand.
     */
    --c8s-primary: #1f4b86;
    --c8s-primary-contrast: #ffffff;
    --c8s-accent: #2f6fd0;
    --c8s-surface: #ffffff;
    --c8s-surface-muted: #f4f6f9;
    --c8s-ink: #1a2230;
    --c8s-ink-muted: #5b6577;
    --c8s-border: #dfe4ec;
    --c8s-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --c8s-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --c8s-radius-control: .375rem;
    --c8s-radius-surface: .625rem;
    --c8s-radius-pill: 1rem;
    --c8s-space-sm: clamp(1.5rem, 3vw, 2.5rem);
    --c8s-space-md: clamp(2rem, 4vw, 3.25rem);
    --c8s-space-lg: clamp(2.75rem, 5vw, 4.5rem);
    --c8s-content-width: 68rem;
    --c8s-wide-width: 82rem;

    /* --- derived: the current band's colours ---------------------------- */
    /*
     * These five inherit, so a block that sets a background hands its
     * foreground down to everything nested inside it. --c8s-band-bg is the one
     * exception and is reset per block, below.
     */
    --c8s-fg: var(--c8s-ink);
    --c8s-fg-muted: var(--c8s-ink-muted);
    --c8s-line: var(--c8s-border);
    --c8s-panel: var(--c8s-surface);
    --c8s-panel-muted: var(--c8s-surface-muted);
    --c8s-link: var(--c8s-primary);
    --c8s-focus: var(--c8s-accent);
    --c8s-action-bg: var(--c8s-primary);
    --c8s-action-fg: var(--c8s-primary-contrast);

    /* --- derived: measure, gutter and rhythm ---------------------------- */
    --c8s-measure: var(--c8s-content-width);
    /*
     * The reading measure is the one width the theme does not own: a line of
     * prose stops being readable past roughly 46rem whatever the school picked
     * for its container, so it is clamped by the theme rather than set by it.
     */
    --c8s-measure-prose: min(46rem, var(--c8s-content-width));
    --c8s-gutter: min(var(--c8s-space-sm), 6vw);
    --c8s-gap: min(var(--c8s-space-sm), 2rem);
    --c8s-gap-tight: calc(var(--c8s-gap) / 2);
    --c8s-gap-fine: calc(var(--c8s-gap) / 4);
    --c8s-grid-min: 16rem;
    --c8s-inline-align: start;

    /* --- derived: type scale -------------------------------------------- */
    --c8s-text-xs: clamp(.75rem, .73rem + .1vw, .8125rem);
    --c8s-text-sm: clamp(.875rem, .85rem + .12vw, .9375rem);
    --c8s-text-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
    --c8s-text-lg: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    --c8s-text-xl: clamp(1.1875rem, 1.1rem + .5vw, 1.4375rem);
    --c8s-text-2xl: clamp(1.4375rem, 1.28rem + .85vw, 1.9375rem);
    --c8s-text-3xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.625rem);
    --c8s-text-4xl: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);

    /* --- derived: elevation and motion ---------------------------------- */
    --c8s-shadow-sm: 0 .0625rem .125rem color-mix(in srgb, var(--c8s-ink) 9%, transparent);
    --c8s-shadow-md: 0 .5rem 1.75rem color-mix(in srgb, var(--c8s-ink) 10%, transparent);
    --c8s-shadow-lg: 0 1.25rem 3rem color-mix(in srgb, var(--c8s-ink) 14%, transparent);
    --c8s-motion: 160ms ease;
}

/* ==========================================================================
   2. Reset — scoped to the site, since this file loads alone
   ========================================================================== */

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

.c8s-body { margin: 0; }

.c8s-site h1,
.c8s-site h2,
.c8s-site h3,
.c8s-site h4,
.c8s-site h5,
.c8s-site h6,
.c8s-site p,
.c8s-site ul,
.c8s-site ol,
.c8s-site dl,
.c8s-site dd,
.c8s-site figure,
.c8s-site blockquote,
.c8s-site address,
.c8s-site hr { margin: 0; }

/* Lists are layout by default here; only rich text and the list block draw markers. */
.c8s-site ul,
.c8s-site ol { padding-inline-start: 0; list-style: none; }

.c8s-site img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

.c8s-site address { font-style: normal; }

.c8s-site hr { border: 0; }

.c8s-site summary {
    cursor: pointer;
    list-style: none;
}

.c8s-site summary::marker { content: ""; }

.c8s-site a {
    color: var(--c8s-link);
    text-underline-offset: .18em;
    text-decoration-thickness: from-font;
}

.c8s-site :focus-visible {
    outline: .1875rem solid var(--c8s-focus);
    outline-offset: .1875rem;
}

/* ==========================================================================
   3. Shell — page frame, skip link, header, nav, footer
   ========================================================================== */

.c8s-site {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    color: var(--c8s-fg);
    background-color: var(--c8s-surface);
    font-family: var(--c8s-font-body);
    font-size: var(--c8s-text-base);
    line-height: 1.6;
    overflow-wrap: break-word;
}

/* The editor canvas frames the page itself, so it must not be forced tall. */
.c8s-body--canvas .c8s-site { min-block-size: 0; }

.c8s-site h1,
.c8s-site h2,
.c8s-site h3,
.c8s-site h4,
.c8s-site h5,
.c8s-site h6 {
    font-family: var(--c8s-font-heading);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.012em;
    text-wrap: balance;
}

/* --- skip link ---------------------------------------------------------- */

.c8s-skip {
    position: absolute;
    z-index: 60;
    inset-block-start: 0;
    inset-inline-start: 0;
    transform: translateY(-140%);
    padding: var(--c8s-gap-tight) var(--c8s-gap);
    border-radius: 0 0 var(--c8s-radius-control) 0;
    color: var(--c8s-action-fg);
    background-color: var(--c8s-action-bg);
    font-weight: 650;
    text-decoration: none;
    transition: transform var(--c8s-motion);
}

.c8s-skip:focus-visible { transform: translateY(0); }

/* --- header ------------------------------------------------------------- */

.c8s-header {
    position: sticky;
    z-index: 30;
    inset-block-start: 0;
    border-block-end: .0625rem solid var(--c8s-line);
    background-color: var(--c8s-surface);
}

.c8s-body--canvas .c8s-header { position: static; }

.c8s-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--c8s-gap-tight) var(--c8s-gap);
    max-inline-size: var(--c8s-wide-width);
    margin-inline: auto;
    padding-inline: var(--c8s-gutter);
    padding-block: var(--c8s-gap-tight);
}

.c8s-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--c8s-gap-tight);
    color: var(--c8s-fg);
    text-decoration: none;
}

.c8s-brand__name {
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-xl);
    font-weight: 700;
    letter-spacing: -.015em;
}

/* Nav claims a flexible track, so it drops to its own row before it crowds. */
.c8s-nav {
    flex: 1 1 20rem;
    min-inline-size: 0;
}

.c8s-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--c8s-gap-fine);
}

.c8s-nav__item { position: relative; }

.c8s-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--c8s-gap-fine);
    min-block-size: 2.75rem;
    padding-inline: var(--c8s-gap-tight);
    border-radius: var(--c8s-radius-control);
    color: var(--c8s-fg);
    font-size: var(--c8s-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--c8s-motion), color var(--c8s-motion);
}

.c8s-nav__link:hover {
    color: var(--c8s-primary);
    background-color: color-mix(in srgb, var(--c8s-primary) 8%, var(--c8s-surface));
}

.c8s-nav__group > .c8s-nav__link::after {
    content: "";
    inline-size: .4rem;
    block-size: .4rem;
    margin-block-start: -.2rem;
    border-inline-end: .125rem solid currentColor;
    border-block-end: .125rem solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--c8s-motion);
}

.c8s-nav__group[open] > .c8s-nav__link::after {
    margin-block-start: .15rem;
    transform: rotate(225deg);
}

.c8s-nav__panel {
    position: absolute;
    z-index: 40;
    inset-block-start: calc(100% + var(--c8s-gap-fine));
    inset-inline-start: 0;
    display: grid;
    gap: var(--c8s-gap-fine);
    min-inline-size: 13rem;
    max-inline-size: min(20rem, 90vw);
    padding: var(--c8s-gap-tight);
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-surface);
    background-color: var(--c8s-surface);
    box-shadow: var(--c8s-shadow-md);
}

.c8s-nav__panel a {
    display: block;
    padding: var(--c8s-gap-fine) var(--c8s-gap-tight);
    border-radius: var(--c8s-radius-control);
    color: var(--c8s-fg);
    font-size: var(--c8s-text-sm);
    text-decoration: none;
}

.c8s-nav__panel a:hover {
    color: var(--c8s-primary);
    background-color: color-mix(in srgb, var(--c8s-primary) 8%, var(--c8s-surface));
}

.c8s-utility {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--c8s-gap-tight);
    margin-inline-start: auto;
}

.c8s-utility__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    padding-inline: var(--c8s-gap-tight);
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-pill);
    color: var(--c8s-fg);
    font-size: var(--c8s-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--c8s-motion), color var(--c8s-motion);
}

.c8s-utility__link:hover {
    color: var(--c8s-primary);
    border-color: color-mix(in srgb, var(--c8s-primary) 45%, var(--c8s-line));
}

/*
 * On a phone the dropdown becomes part of the flow. An open <details> pushing
 * the page down is the price of a menu that needs no script at all.
 */
@media (max-width: 48rem) {
    .c8s-nav__panel {
        position: static;
        max-inline-size: none;
        padding-inline-start: var(--c8s-gap);
        border: 0;
        border-inline-start: .125rem solid var(--c8s-line);
        border-radius: 0;
        box-shadow: none;
    }
}

/* --- main --------------------------------------------------------------- */

.c8s-main { flex: 1 0 auto; }

.c8s-empty {
    max-inline-size: var(--c8s-measure-prose);
    margin-inline: auto;
    padding-inline: var(--c8s-gutter);
    padding-block: var(--c8s-space-lg);
    color: var(--c8s-fg-muted);
    text-align: center;
}

/* --- footer ------------------------------------------------------------- */

.c8s-footer {
    margin-block-start: auto;
    border-block-start: .0625rem solid var(--c8s-line);
    background-color: var(--c8s-surface-muted);
}

.c8s-footer__inner {
    display: grid;
    gap: var(--c8s-gap);
    max-inline-size: var(--c8s-wide-width);
    margin-inline: auto;
    padding-inline: var(--c8s-gutter);
    padding-block: var(--c8s-space-sm);
}

.c8s-footer__brand {
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-lg);
    font-weight: 700;
    letter-spacing: -.012em;
}

.c8s-footer__directions { display: grid; gap: var(--c8s-gap-tight); font-style: normal; overflow-wrap: anywhere; }
.c8s-footer__directions a { inline-size: fit-content; max-inline-size: 100%; text-decoration: underline; }

.c8s-footer__nav {
    display: grid;
    gap: var(--c8s-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

.c8s-footer__column {
    display: grid;
    gap: var(--c8s-gap-tight);
    align-content: start;
}

.c8s-footer__heading {
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.c8s-footer__heading a {
    color: inherit;
    text-decoration: none;
}

.c8s-footer__heading a:hover { text-decoration: underline; }

.c8s-footer__links {
    display: grid;
    gap: var(--c8s-gap-fine);
}

.c8s-footer__links a {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
    text-decoration: none;
}

.c8s-footer__links a:hover {
    color: var(--c8s-fg);
    text-decoration: underline;
}

/* ==========================================================================
   4. Shared primitives — used by many block types
   ========================================================================== */

.c8s-eyebrow {
    color: var(--c8s-fg-muted);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.c8s-lede {
    max-inline-size: var(--c8s-measure-prose);
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-lg);
    line-height: 1.6;
    text-wrap: pretty;
}

.c8s-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--c8s-gap-tight);
    justify-content: var(--c8s-inline-align);
}

/*
 * Scoped to <a> deliberately: the button block's wrapper also carries
 * .c8s-button, and only the inner anchor should look like a control.
 */
a.c8s-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-inline: calc(var(--c8s-gap) * .8);
    padding-block: .5rem;
    border: .0625rem solid transparent;
    border-radius: var(--c8s-radius-control);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-sm);
    font-weight: 650;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--c8s-motion), border-color var(--c8s-motion), color var(--c8s-motion);
}

a.c8s-button--primary {
    color: var(--c8s-action-fg);
    background-color: var(--c8s-action-bg);
}

a.c8s-button--primary:hover {
    background-color: color-mix(in srgb, var(--c8s-action-bg) 86%, var(--c8s-fg));
}

a.c8s-button--secondary {
    color: var(--c8s-fg);
    background-color: transparent;
    border-color: color-mix(in srgb, var(--c8s-fg) 32%, transparent);
}

a.c8s-button--secondary:hover {
    border-color: currentColor;
    background-color: color-mix(in srgb, var(--c8s-fg) 7%, transparent);
}

a.c8s-button--ghost {
    padding-inline: var(--c8s-gap-tight);
    color: var(--c8s-link);
    background-color: transparent;
}

a.c8s-button--ghost:hover {
    background-color: color-mix(in srgb, var(--c8s-link) 10%, transparent);
}

.c8s-textlink {
    display: inline-flex;
    align-items: center;
    gap: var(--c8s-gap-fine);
    color: var(--c8s-link);
    font-size: var(--c8s-text-sm);
    font-weight: 650;
    text-decoration: none;
}

.c8s-textlink::after {
    content: "";
    inline-size: .35rem;
    block-size: .35rem;
    border-inline-end: .125rem solid currentColor;
    border-block-start: .125rem solid currentColor;
    transform: rotate(45deg);
    transition: translate var(--c8s-motion);
}

.c8s-textlink:hover {
    text-decoration: underline;
}

.c8s-textlink:hover::after { translate: .15rem 0; }

/* --- rich text ---------------------------------------------------------- */

.c8s-rich {
    display: grid;
    gap: var(--c8s-gap-tight);
    text-wrap: pretty;
}

.c8s-rich a { font-weight: 600; }

.c8s-rich__list {
    display: grid;
    gap: var(--c8s-gap-fine);
    padding-inline-start: 1.25em;
    list-style: disc;
}

.c8s-rich__list--numbered { list-style: decimal; }

.c8s-rich__list li { padding-inline-start: .2em; }

/* ==========================================================================
   5. Support tokens — one rule per token, for every block that opted in
   ========================================================================== */

.c8s-block {
    /*
     * Reset only the background. Foreground, hairline and panel colours are
     * left to inherit, so a nested block sits on the band's colours instead of
     * repainting the band behind itself.
     */
    --c8s-band-bg: transparent;
    --c8s-pad: 0;
    padding-block: var(--c8s-pad);
    color: var(--c8s-fg);
    background-color: var(--c8s-band-bg);
    scroll-margin-block-start: var(--c8s-space-sm);
}

/*
 * One child, one measure. Every block renders exactly one element inside its
 * wrapper, so constraining that child is what makes the width token work for
 * all of them without a per-block rule — and it leaves the wrapper free to
 * paint its background edge to edge.
 */
.c8s-block > * {
    max-inline-size: var(--c8s-measure);
    margin-inline: auto;
}

/* The page gutter belongs to the outermost band only; nested blocks inherit it. */
.c8s-main > .c8s-block { padding-inline: var(--c8s-gutter); }

/* --- support: background ------------------------------------------------ */
/*
 * A background token also sets the foreground. A school chooses "ink" for a
 * band without separately choosing a text colour, so the band has to bring a
 * readable one with it — otherwise a dark band would render dark body text.
 * The is-ink-* rules below share this specificity and come later, so an
 * explicit text colour still wins.
 */
.c8s-site .is-bg-surface {
    --c8s-band-bg: var(--c8s-surface);
    --c8s-fg: var(--c8s-ink);
    --c8s-fg-muted: var(--c8s-ink-muted);
    --c8s-line: var(--c8s-border);
    --c8s-panel: var(--c8s-surface);
    --c8s-panel-muted: var(--c8s-surface-muted);
}

.c8s-site .is-bg-surface-muted {
    --c8s-band-bg: var(--c8s-surface-muted);
    --c8s-fg: var(--c8s-ink);
    --c8s-fg-muted: var(--c8s-ink-muted);
    --c8s-line: color-mix(in srgb, var(--c8s-ink) 13%, var(--c8s-surface-muted));
    --c8s-panel: var(--c8s-surface);
    --c8s-panel-muted: color-mix(in srgb, var(--c8s-ink) 5%, var(--c8s-surface-muted));
}

.c8s-site .is-bg-primary {
    --c8s-band-bg: var(--c8s-primary);
    --c8s-fg: var(--c8s-primary-contrast);
    --c8s-fg-muted: color-mix(in srgb, var(--c8s-primary-contrast) 74%, var(--c8s-primary));
    --c8s-line: color-mix(in srgb, var(--c8s-primary-contrast) 26%, var(--c8s-primary));
    --c8s-panel: color-mix(in srgb, var(--c8s-primary-contrast) 12%, var(--c8s-primary));
    --c8s-panel-muted: color-mix(in srgb, var(--c8s-primary-contrast) 7%, var(--c8s-primary));
    --c8s-link: var(--c8s-primary-contrast);
    --c8s-focus: var(--c8s-primary-contrast);
    --c8s-action-bg: var(--c8s-primary-contrast);
    --c8s-action-fg: var(--c8s-primary);
}

/*
 * The contract has no accent-contrast token, so the accent band borrows the
 * colour the school already nominated as legible on a strong brand colour.
 */
.c8s-site .is-bg-accent {
    --c8s-band-bg: var(--c8s-accent);
    --c8s-fg: var(--c8s-primary-contrast);
    --c8s-fg-muted: color-mix(in srgb, var(--c8s-primary-contrast) 76%, var(--c8s-accent));
    --c8s-line: color-mix(in srgb, var(--c8s-primary-contrast) 28%, var(--c8s-accent));
    --c8s-panel: color-mix(in srgb, var(--c8s-primary-contrast) 13%, var(--c8s-accent));
    --c8s-panel-muted: color-mix(in srgb, var(--c8s-primary-contrast) 8%, var(--c8s-accent));
    --c8s-link: var(--c8s-primary-contrast);
    --c8s-focus: var(--c8s-primary-contrast);
    --c8s-action-bg: var(--c8s-primary-contrast);
    --c8s-action-fg: var(--c8s-accent);
}

/* Ink is the body text colour, so the page surface is guaranteed to read on it. */
.c8s-site .is-bg-ink {
    --c8s-band-bg: var(--c8s-ink);
    --c8s-fg: var(--c8s-surface);
    --c8s-fg-muted: color-mix(in srgb, var(--c8s-surface) 70%, var(--c8s-ink));
    --c8s-line: color-mix(in srgb, var(--c8s-surface) 24%, var(--c8s-ink));
    --c8s-panel: color-mix(in srgb, var(--c8s-surface) 11%, var(--c8s-ink));
    --c8s-panel-muted: color-mix(in srgb, var(--c8s-surface) 6%, var(--c8s-ink));
    --c8s-link: var(--c8s-surface);
    --c8s-focus: var(--c8s-surface);
    --c8s-action-bg: var(--c8s-surface);
    --c8s-action-fg: var(--c8s-ink);
}

/* --- support: text colour ----------------------------------------------- */

.c8s-site .is-ink-ink {
    --c8s-fg: var(--c8s-ink);
    --c8s-fg-muted: var(--c8s-ink-muted);
}

.c8s-site .is-ink-ink-muted {
    --c8s-fg: var(--c8s-ink-muted);
    --c8s-fg-muted: var(--c8s-ink-muted);
}

.c8s-site .is-ink-primary {
    --c8s-fg: var(--c8s-primary);
    --c8s-fg-muted: color-mix(in srgb, var(--c8s-primary) 72%, var(--c8s-surface));
}

.c8s-site .is-ink-accent {
    --c8s-fg: var(--c8s-accent);
    --c8s-fg-muted: color-mix(in srgb, var(--c8s-accent) 72%, var(--c8s-surface));
}

.c8s-site .is-ink-contrast {
    --c8s-fg: var(--c8s-primary-contrast);
    --c8s-fg-muted: color-mix(in srgb, var(--c8s-primary-contrast) 78%, transparent);
}

/* --- support: block padding --------------------------------------------- */
/* Default rhythm first; the is-pad-* tokens outrank it on specificity. */

.c8s-main > .c8s-block { --c8s-pad: var(--c8s-gap); }

.c8s-main > .c8s-section,
.c8s-main > .c8s-columns,
.c8s-main > .c8s-hero,
.c8s-main > .c8s-media-text,
.c8s-main > .c8s-cta-band,
.c8s-main > .c8s-contact-panel { --c8s-pad: var(--c8s-space-md); }

.c8s-site .is-pad-none { --c8s-pad: 0; }
.c8s-site .is-pad-sm { --c8s-pad: var(--c8s-space-sm); }
.c8s-site .is-pad-md { --c8s-pad: var(--c8s-space-md); }
.c8s-site .is-pad-lg { --c8s-pad: var(--c8s-space-lg); }

/* --- support: width ----------------------------------------------------- */
/* The measure inherits, so a block with no width token takes its section's. */

.c8s-site .is-width-narrow { --c8s-measure: var(--c8s-measure-prose); }
.c8s-site .is-width-content { --c8s-measure: var(--c8s-content-width); }
.c8s-site .is-width-wide { --c8s-measure: var(--c8s-wide-width); }

.c8s-site .is-width-full {
    --c8s-measure: 100%;
    --c8s-gutter: 0rem;
}

/* --- support: text alignment -------------------------------------------- */
/* The custom property carries the choice into flex rows, which text-align misses. */

.c8s-site .is-align-start {
    --c8s-inline-align: start;
    text-align: start;
}

.c8s-site .is-align-center {
    --c8s-inline-align: center;
    text-align: center;
}

.c8s-site .is-align-end {
    --c8s-inline-align: end;
    text-align: end;
}

.c8s-site .is-align-center .c8s-lede,
.c8s-site .is-align-center .c8s-rich { margin-inline: auto; }

/* ==========================================================================
   6. Layout modifiers — the layout options each block type offers
   ========================================================================== */

/*
 * Grids answer to their own width, not the viewport's, so a card grid in a
 * narrow column collapses on its own terms. The base template below already
 * fits as many columns as the space allows; these queries only cap that count
 * at what the school asked for.
 */
.c8s-columns,
.c8s-card-grid,
.c8s-link-tiles,
.c8s-staff-grid,
.c8s-gallery,
.c8s-stat-grid,
.c8s-media-text,
.c8s-hero {
    container-type: inline-size;
    container-name: c8s-block;
}

@container c8s-block (min-width: 34rem) {
    .is-layout-columns-2 > .c8s-card-grid__inner,
    .is-layout-columns-2 > .c8s-link-tiles__inner,
    .is-layout-columns-2 > .c8s-staff-grid__inner,
    .is-layout-columns-2 > .c8s-gallery__inner,
    .is-layout-columns-2 > .c8s-stat-grid__inner,
    .is-layout-columns-3 > .c8s-card-grid__inner,
    .is-layout-columns-3 > .c8s-link-tiles__inner,
    .is-layout-columns-3 > .c8s-staff-grid__inner,
    .is-layout-columns-3 > .c8s-gallery__inner,
    .is-layout-columns-3 > .c8s-stat-grid__inner,
    .is-layout-columns-4 > .c8s-card-grid__inner,
    .is-layout-columns-4 > .c8s-link-tiles__inner,
    .is-layout-columns-4 > .c8s-staff-grid__inner,
    .is-layout-columns-4 > .c8s-gallery__inner,
    .is-layout-columns-4 > .c8s-stat-grid__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container c8s-block (min-width: 52rem) {
    .is-layout-columns-3 > .c8s-card-grid__inner,
    .is-layout-columns-3 > .c8s-link-tiles__inner,
    .is-layout-columns-3 > .c8s-staff-grid__inner,
    .is-layout-columns-3 > .c8s-gallery__inner,
    .is-layout-columns-3 > .c8s-stat-grid__inner,
    .is-layout-columns-4 > .c8s-card-grid__inner,
    .is-layout-columns-4 > .c8s-link-tiles__inner,
    .is-layout-columns-4 > .c8s-staff-grid__inner,
    .is-layout-columns-4 > .c8s-gallery__inner,
    .is-layout-columns-4 > .c8s-stat-grid__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container c8s-block (min-width: 68rem) {
    .is-layout-columns-4 > .c8s-card-grid__inner,
    .is-layout-columns-4 > .c8s-link-tiles__inner,
    .is-layout-columns-4 > .c8s-staff-grid__inner,
    .is-layout-columns-4 > .c8s-gallery__inner,
    .is-layout-columns-4 > .c8s-stat-grid__inner {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --- columns splits ----------------------------------------------------- */

@container c8s-block (min-width: 48rem) {
    /* Equal takes however many columns the block holds, two through four. */
    .is-layout-equal > .c8s-columns__inner {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .is-layout-wide-left > .c8s-columns__inner {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    }

    .is-layout-wide-right > .c8s-columns__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    }

    .is-layout-thirds > .c8s-columns__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- media and text ----------------------------------------------------- */

/*
 * Image-left is the DOM order already, so this rule asserts rather than changes
 * it. Keeping it means every arrangement a school can pick has an answer in this
 * file, which is what the registry test checks -- a silent no-op and a missing
 * rule would otherwise look identical.
 */
.c8s-media-text.is-layout-image-left .c8s-media-text__media { order: 0; }

@container c8s-block (min-width: 44rem) {
    .c8s-media-text > .c8s-media-text__inner {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Flipped visually only: the DOM keeps image-then-text for screen readers. */
    .is-layout-image-right > .c8s-media-text__inner > .c8s-media-text__media { order: 2; }
}

/* --- hero height -------------------------------------------------------- */

.c8s-site .c8s-hero.is-layout-compact { --c8s-pad: var(--c8s-space-sm); }
.c8s-site .c8s-hero.is-layout-standard { --c8s-pad: var(--c8s-space-md); }
.c8s-site .c8s-hero.is-layout-tall { --c8s-pad: var(--c8s-space-lg); }

/* ==========================================================================
   7. Blocks — layout
   ========================================================================== */

/* --- section ------------------------------------------------------------ */

.c8s-section__inner {
    display: grid;
    gap: var(--c8s-gap);
}

.c8s-section__header {
    display: grid;
    gap: var(--c8s-gap-fine);
    max-inline-size: var(--c8s-measure-prose);
}

.c8s-site .is-align-center .c8s-section__header { margin-inline: auto; }
.c8s-site .is-align-end .c8s-section__header { margin-inline-start: auto; }

.c8s-section__heading { font-size: var(--c8s-text-3xl); }

.c8s-section__body {
    display: grid;
    gap: var(--c8s-gap);
}

/* --- columns and column ------------------------------------------------- */

.c8s-columns__inner {
    display: grid;
    gap: var(--c8s-gap);
    grid-template-columns: minmax(0, 1fr);
}

/* A long word in one column must not widen the track it sits in. */
.c8s-columns__inner > .c8s-block { min-inline-size: 0; }

.c8s-column__inner {
    display: grid;
    gap: var(--c8s-gap-tight);
    align-content: start;
}

/* --- spacer ------------------------------------------------------------- */

/*
 * Height is a layout option rather than a field, so it arrives as the same
 * is-layout-* modifier every other arrangement choice uses. Each rule is scoped
 * under .c8s-spacer because those modifier names are shared with the grid and
 * hero blocks -- an unscoped .is-layout-lg would resize things it never meant to.
 */
.c8s-spacer__inner { block-size: var(--c8s-space-md); }
.c8s-spacer.is-layout-sm .c8s-spacer__inner { block-size: var(--c8s-space-sm); }
.c8s-spacer.is-layout-md .c8s-spacer__inner { block-size: var(--c8s-space-md); }
.c8s-spacer.is-layout-lg .c8s-spacer__inner { block-size: var(--c8s-space-lg); }
.c8s-spacer.is-layout-xl .c8s-spacer__inner {
    block-size: calc(var(--c8s-space-lg) * 1.75);
}

/* --- divider ------------------------------------------------------------ */

.c8s-divider__rule {
    block-size: .0625rem;
    background-color: var(--c8s-line);
}

/* ==========================================================================
   8. Blocks — content
   ========================================================================== */

/* --- heading ------------------------------------------------------------ */

.c8s-heading__inner {
    display: grid;
    gap: var(--c8s-gap-fine);
}

.c8s-heading__inner h2 { font-size: var(--c8s-text-3xl); }
.c8s-heading__inner h3 { font-size: var(--c8s-text-2xl); }
.c8s-heading__inner h4 { font-size: var(--c8s-text-xl); }

/* --- text --------------------------------------------------------------- */

.c8s-text__inner { max-inline-size: min(var(--c8s-measure), var(--c8s-measure-prose)); }

/* --- buttons ------------------------------------------------------------ */

.c8s-buttons__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--c8s-gap-tight);
    justify-content: var(--c8s-inline-align);
}

/* --- list --------------------------------------------------------------- */

.c8s-list__inner {
    display: grid;
    gap: var(--c8s-gap-tight);
    max-inline-size: min(var(--c8s-measure), var(--c8s-measure-prose));
    counter-reset: c8s-list;
}

.c8s-list__item {
    position: relative;
    display: grid;
    gap: .1rem;
    padding-inline-start: 1.75rem;
}

.c8s-list__item::before {
    content: "";
    position: absolute;
    inset-inline-start: .35rem;
    inset-block-start: .6em;
    inline-size: .375rem;
    block-size: .375rem;
    border-radius: 50%;
    background-color: var(--c8s-accent);
}

/* The marker is decoration, so it is given empty alternative text where supported. */
.c8s-list--check .c8s-list__item::before {
    content: "\2713";
    content: "\2713" / "";
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: auto;
    block-size: auto;
    border-radius: 0;
    color: var(--c8s-accent);
    background-color: transparent;
    font-weight: 700;
}

.c8s-list--numbered .c8s-list__item { counter-increment: c8s-list; }

.c8s-list--numbered .c8s-list__item::before {
    content: counter(c8s-list) ".";
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: auto;
    block-size: auto;
    border-radius: 0;
    color: var(--c8s-fg-muted);
    background-color: transparent;
    font-family: var(--c8s-font-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.c8s-list__text { font-weight: 500; }

.c8s-list__note {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

/* --- quote -------------------------------------------------------------- */

.c8s-quote__inner {
    display: grid;
    gap: var(--c8s-gap-tight);
    max-inline-size: min(var(--c8s-measure), var(--c8s-measure-prose));
    padding-inline-start: var(--c8s-gap);
    border-inline-start: .1875rem solid color-mix(in srgb, var(--c8s-accent) 65%, var(--c8s-line));
}

/* A rule down one side reads as an aside, not as a centred pull quote. */
.c8s-site .is-align-center .c8s-quote__inner {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.c8s-quote__text {
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-xl);
    line-height: 1.4;
    text-wrap: pretty;
}

.c8s-quote__source {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--c8s-gap-fine) var(--c8s-gap-tight);
    justify-content: var(--c8s-inline-align);
    font-size: var(--c8s-text-sm);
}

.c8s-quote__name { font-weight: 650; }

.c8s-quote__role { color: var(--c8s-fg-muted); }

/* --- accordion ---------------------------------------------------------- */

.c8s-accordion__inner {
    display: grid;
    gap: var(--c8s-gap-fine);
    max-inline-size: min(var(--c8s-measure), var(--c8s-wide-width));
}

.c8s-accordion__group {
    margin-block-start: var(--c8s-gap-tight);
    color: var(--c8s-fg-muted);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-sm);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.c8s-accordion__group:first-child { margin-block-start: 0; }

.c8s-accordion__item {
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-surface);
    background-color: var(--c8s-panel);
}

.c8s-accordion__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--c8s-gap-tight);
    min-block-size: 2.75rem;
    padding: var(--c8s-gap-tight) calc(var(--c8s-gap) * .75);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-lg);
    font-weight: 650;
}

.c8s-accordion__question::after {
    content: "";
    flex: 0 0 auto;
    inline-size: .5rem;
    block-size: .5rem;
    margin-block-end: .25rem;
    border-inline-end: .125rem solid var(--c8s-fg-muted);
    border-block-end: .125rem solid var(--c8s-fg-muted);
    transform: rotate(45deg);
    transition: transform var(--c8s-motion);
}

.c8s-accordion__item[open] > .c8s-accordion__question::after {
    margin-block: .25rem 0;
    transform: rotate(225deg);
}

.c8s-accordion__answer {
    padding-inline: calc(var(--c8s-gap) * .75);
    padding-block-end: var(--c8s-gap-tight);
    color: var(--c8s-fg-muted);
}

/* --- steps -------------------------------------------------------------- */

.c8s-steps__inner {
    display: grid;
    gap: var(--c8s-gap);
    max-inline-size: min(var(--c8s-measure), var(--c8s-wide-width));
    counter-reset: c8s-step;
}

.c8s-step {
    position: relative;
    display: grid;
    gap: var(--c8s-gap-fine);
    justify-items: start;
    padding-inline-start: 3.25rem;
    counter-increment: c8s-step;
    text-align: start;
}

.c8s-step::before {
    content: counter(c8s-step);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--c8s-radius-pill);
    color: var(--c8s-action-fg);
    background-color: var(--c8s-action-bg);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-sm);
    font-weight: 700;
}

.c8s-step__title { font-size: var(--c8s-text-lg); }

.c8s-step__body {
    max-inline-size: var(--c8s-measure-prose);
    color: var(--c8s-fg-muted);
}

/* --- stat grid ---------------------------------------------------------- */

.c8s-stat-grid__inner {
    --c8s-grid-min: 11rem;
    display: grid;
    gap: var(--c8s-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--c8s-grid-min), 100%), 1fr));
}

.c8s-stat {
    display: grid;
    gap: .15rem;
    align-content: start;
    padding: calc(var(--c8s-gap) * .75);
    border-radius: var(--c8s-radius-surface);
    background-color: var(--c8s-panel-muted);
}

.c8s-stat__value {
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-3xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.c8s-stat__label { font-weight: 600; }

.c8s-stat__note {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

/* ==========================================================================
   9. Blocks — media
   ========================================================================== */

/* --- image -------------------------------------------------------------- */

.c8s-image__inner {
    display: grid;
    gap: var(--c8s-gap-fine);
}

.c8s-image__inner img {
    inline-size: 100%;
    border-radius: var(--c8s-radius-surface);
}

.c8s-image__inner figcaption {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

/*
 * Shape is a layout option, and its values collide by name with the width
 * tokens (is-layout-wide is a 16/9 crop, is-width-wide is a container width), so
 * every rule stays scoped to .c8s-image.
 */
.c8s-image.is-layout-wide .c8s-image__inner img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.c8s-image.is-layout-square .c8s-image__inner img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* is-layout-natural is the intrinsic ratio, which needs no rule. */

/* --- media and text ----------------------------------------------------- */

/*
 * Image-left is the DOM order already, so this rule asserts rather than changes
 * it. Keeping it means every arrangement a school can pick has an answer in this
 * file, which is what the registry test checks -- a silent no-op and a missing
 * rule would otherwise look identical.
 */
.c8s-media-text.is-layout-image-left .c8s-media-text__media { order: 0; }

.c8s-media-text__inner {
    display: grid;
    gap: var(--c8s-gap);
    grid-template-columns: minmax(0, 1fr);
}

.c8s-media-text__media img {
    inline-size: 100%;
    border-radius: var(--c8s-radius-surface);
    object-fit: cover;
}

.c8s-media-text__body {
    display: grid;
    gap: var(--c8s-gap-tight);
    align-content: center;
}

.c8s-media-text__body h2 { font-size: var(--c8s-text-2xl); }

/* --- gallery ------------------------------------------------------------ */

.c8s-gallery__inner {
    --c8s-grid-min: 13rem;
    display: grid;
    gap: var(--c8s-gap-tight);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--c8s-grid-min), 100%), 1fr));
}

.c8s-gallery__item {
    display: grid;
    gap: var(--c8s-gap-fine);
    align-content: start;
}

.c8s-gallery__item img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--c8s-radius-surface);
    object-fit: cover;
}

.c8s-gallery__item figcaption {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-xs);
}

/* --- map embed ---------------------------------------------------------- */

.c8s-map__inner {
    display: grid;
    gap: var(--c8s-gap-tight);
    justify-items: var(--c8s-inline-align);
    max-inline-size: min(var(--c8s-measure), var(--c8s-measure-prose));
    padding: var(--c8s-gap);
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-surface);
    background-color: var(--c8s-panel-muted);
}

.c8s-map__heading { font-size: var(--c8s-text-xl); }

.c8s-map__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    max-inline-size: 100%;
    padding-inline: calc(var(--c8s-gap) * .75);
    border: .0625rem solid color-mix(in srgb, var(--c8s-link) 40%, var(--c8s-line));
    border-radius: var(--c8s-radius-pill);
    color: var(--c8s-link);
    font-weight: 650;
    text-decoration: none;
    transition: border-color var(--c8s-motion), background-color var(--c8s-motion);
}

.c8s-map__link:hover {
    border-color: var(--c8s-link);
    background-color: color-mix(in srgb, var(--c8s-link) 8%, transparent);
}

.c8s-map__link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c8s-map__caption {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

/* ==========================================================================
   10. Blocks — school
   ========================================================================== */

/* --- hero --------------------------------------------------------------- */

.c8s-hero__inner {
    display: grid;
    gap: var(--c8s-gap);
    align-items: center;
}

/*
 * Column flow rather than a fixed template: a hero with no image keeps one
 * column, a hero with one gets two, without either case needing its own rule.
 */
@container c8s-block (min-width: 46rem) {
    .c8s-hero > .c8s-hero__inner {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

.c8s-hero__body {
    display: grid;
    gap: var(--c8s-gap-tight);
    max-inline-size: var(--c8s-measure-prose);
}

.c8s-site .c8s-hero.is-align-center .c8s-hero__body { margin-inline: auto; }
.c8s-site .c8s-hero.is-align-end .c8s-hero__body { margin-inline-start: auto; }

.c8s-hero__headline { font-size: var(--c8s-text-4xl); }

.c8s-hero__body .c8s-actions { margin-block-start: var(--c8s-gap-fine); }

.c8s-hero__media img {
    inline-size: 100%;
    border-radius: var(--c8s-radius-surface);
    object-fit: cover;
}

/* --- card grid ---------------------------------------------------------- */

.c8s-card-grid__inner {
    --c8s-grid-min: 17rem;
    display: grid;
    gap: var(--c8s-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--c8s-grid-min), 100%), 1fr));
}

/* A card is not itself a link, so it gets no hover affordance. */
.c8s-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-surface);
    background-color: var(--c8s-panel);
    box-shadow: var(--c8s-shadow-sm);
}

.c8s-card__image {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.c8s-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--c8s-gap-fine);
    padding: calc(var(--c8s-gap) * .75);
}

.c8s-card__title { font-size: var(--c8s-text-lg); }

.c8s-card__text {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

.c8s-card__body .c8s-textlink {
    margin-block-start: auto;
    padding-block-start: var(--c8s-gap-fine);
    align-self: var(--c8s-inline-align);
}

/* --- link tiles --------------------------------------------------------- */

.c8s-link-tiles__inner {
    --c8s-grid-min: 12rem;
    display: grid;
    gap: var(--c8s-gap-tight);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--c8s-grid-min), 100%), 1fr));
}

.c8s-tile {
    display: grid;
    gap: var(--c8s-gap-fine);
    align-content: start;
    justify-items: var(--c8s-inline-align);
    padding: calc(var(--c8s-gap) * .75);
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-surface);
    color: var(--c8s-fg);
    background-color: var(--c8s-panel);
    text-decoration: none;
    transition: border-color var(--c8s-motion), background-color var(--c8s-motion), box-shadow var(--c8s-motion);
}

.c8s-tile:hover {
    border-color: color-mix(in srgb, var(--c8s-primary) 45%, var(--c8s-line));
    background-color: color-mix(in srgb, var(--c8s-primary) 6%, var(--c8s-panel));
    box-shadow: var(--c8s-shadow-sm);
}

.c8s-tile__icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    object-fit: contain;
}

.c8s-tile__label {
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-lg);
    font-weight: 650;
}

.c8s-tile__note {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

/* --- staff grid --------------------------------------------------------- */

.c8s-staff-grid__inner {
    --c8s-grid-min: 13rem;
    display: grid;
    gap: var(--c8s-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--c8s-grid-min), 100%), 1fr));
}

/* A department heading introduces the people under it, so it spans the row. */
.c8s-staff__group {
    grid-column: 1 / -1;
    margin-block-start: var(--c8s-gap-tight);
    color: var(--c8s-fg-muted);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-sm);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.c8s-staff__group:first-child { margin-block-start: 0; }

.c8s-staff {
    display: grid;
    gap: var(--c8s-gap-fine);
    align-content: start;
    justify-items: var(--c8s-inline-align);
}

.c8s-staff__photo {
    inline-size: 100%;
    aspect-ratio: 1;
    margin-block-end: var(--c8s-gap-fine);
    border-radius: var(--c8s-radius-surface);
    object-fit: cover;
}

.c8s-staff__name { font-size: var(--c8s-text-lg); }

.c8s-staff__role {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
    font-weight: 600;
}

.c8s-staff__bio {
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

/* --- document list ------------------------------------------------------ */

.c8s-documents__inner {
    display: grid;
    gap: var(--c8s-gap-fine);
    max-inline-size: min(var(--c8s-measure), var(--c8s-wide-width));
}

.c8s-documents__group {
    margin-block-start: var(--c8s-gap-tight);
    color: var(--c8s-fg-muted);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-sm);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.c8s-documents__group:first-child { margin-block-start: 0; }

/* Ordered by flex, not by source: the note always drops below its label. */
.c8s-document {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem var(--c8s-gap-tight);
    min-block-size: 2.75rem;
    padding: var(--c8s-gap-tight) calc(var(--c8s-gap) * .75);
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-control);
    color: var(--c8s-fg);
    background-color: var(--c8s-panel);
    text-decoration: none;
    transition: border-color var(--c8s-motion), background-color var(--c8s-motion);
}

.c8s-document:hover {
    border-color: color-mix(in srgb, var(--c8s-primary) 45%, var(--c8s-line));
    background-color: color-mix(in srgb, var(--c8s-primary) 6%, var(--c8s-panel));
}

.c8s-document__label {
    flex: 1 1 auto;
    font-weight: 650;
}

.c8s-document__meta {
    order: 2;
    flex: 0 0 auto;
    padding-inline: .5rem;
    border-radius: var(--c8s-radius-pill);
    color: var(--c8s-fg-muted);
    background-color: var(--c8s-panel-muted);
    font-size: var(--c8s-text-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.c8s-document__note {
    order: 3;
    flex: 1 1 100%;
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

/* --- pricing table ------------------------------------------------------ */

.c8s-pricing__inner {
    display: grid;
    max-inline-size: min(var(--c8s-measure), var(--c8s-wide-width));
}

.c8s-pricing__group {
    margin-block: var(--c8s-gap-tight) var(--c8s-gap-fine);
    color: var(--c8s-fg-muted);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-sm);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.c8s-pricing__group:first-child { margin-block-start: 0; }

.c8s-pricing__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem var(--c8s-gap-tight);
    padding-block: var(--c8s-gap-tight);
    border-block-end: .0625rem solid var(--c8s-line);
}

.c8s-pricing__label {
    flex: 1 1 12rem;
    font-weight: 600;
}

.c8s-pricing__amount {
    order: 2;
    flex: 0 0 auto;
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.c8s-pricing__note {
    order: 3;
    flex: 1 1 100%;
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

.c8s-pricing__footnote {
    margin-block-start: var(--c8s-gap-tight);
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

/* --- notice ------------------------------------------------------------- */

/*
 * The token contract has no semantic status colours, so a tone is expressed as
 * a tint of a token the school already owns plus the weight of its leading
 * rule — never by colour alone.
 */
.c8s-notice__inner {
    --c8s-notice-tone: var(--c8s-primary);
    --c8s-notice-rule: .25rem;
    display: grid;
    gap: var(--c8s-gap-fine);
    max-inline-size: min(var(--c8s-measure), var(--c8s-measure-prose));
    padding: var(--c8s-gap);
    border-inline-start: var(--c8s-notice-rule) solid var(--c8s-notice-tone);
    border-radius: var(--c8s-radius-surface);
    background-color: color-mix(in srgb, var(--c8s-notice-tone) 9%, var(--c8s-panel));
}

.c8s-notice__title {
    color: color-mix(in srgb, var(--c8s-notice-tone) 65%, var(--c8s-fg));
    font-size: var(--c8s-text-lg);
}

.c8s-notice--info { --c8s-notice-tone: var(--c8s-primary); }

.c8s-notice--success { --c8s-notice-tone: var(--c8s-accent); }

.c8s-notice--warning {
    --c8s-notice-tone: var(--c8s-fg);
    --c8s-notice-rule: .4375rem;
}

/* --- cta band ----------------------------------------------------------- */

.c8s-cta__inner {
    display: grid;
    gap: var(--c8s-gap-tight);
}

.c8s-cta__headline { font-size: var(--c8s-text-3xl); }

.c8s-cta__inner .c8s-actions { margin-block-start: var(--c8s-gap-fine); }

/* --- contact panel ------------------------------------------------------ */

.c8s-contact__inner {
    display: grid;
    gap: var(--c8s-gap-tight);
    max-inline-size: min(var(--c8s-measure), var(--c8s-wide-width));
    padding: var(--c8s-gap);
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-surface);
    background-color: var(--c8s-panel-muted);
    justify-items: var(--c8s-inline-align);
}

.c8s-contact__heading { font-size: var(--c8s-text-2xl); }

.c8s-contact__address {
    display: grid;
    gap: .1rem;
    color: var(--c8s-fg-muted);
}

.c8s-contact__details {
    display: grid;
    gap: var(--c8s-gap-tight);
    inline-size: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.c8s-contact__pair {
    display: grid;
    gap: .1rem;
    align-content: start;
}

.c8s-contact__pair dt {
    color: var(--c8s-fg-muted);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.c8s-contact__pair dd { font-weight: 600; }

.c8s-contact__pair a { text-decoration: none; }

.c8s-contact__pair a:hover { text-decoration: underline; }

/* The hours field is a textarea, so its line breaks are part of the answer. */
.c8s-contact__hours {
    color: var(--c8s-fg-muted);
    white-space: pre-line;
}

/* ==========================================================================
   11. Motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .c8s-site *,
    .c8s-site *::before,
    .c8s-site *::after {
        transition-duration: .01ms;
        animation-duration: .01ms;
        animation-iteration-count: 1;
    }
}

/* ==========================================================================
   12. Editor canvas
   ==========================================================================
   These rules apply only inside the site editor's preview frame. The page there
   is the real public renderer, so the only thing added is the ability to see
   which block is selected and to see a block that is not finished yet. Nothing
   in this section changes layout, so what a school arranges is what publishes.
   ========================================================================== */

.c8s-body--canvas .c8s-block {
    /* A transparent outline reserves the space the selection ring will use, so
       selecting a block never nudges the page. */
    outline: 2px solid transparent;
    outline-offset: -2px;
    cursor: pointer;
}

.c8s-body--canvas .c8s-block:hover {
    outline-color: color-mix(in srgb, var(--c8s-primary) 35%, transparent);
}

.c8s-body--canvas .c8s-block.is-editor-selected {
    outline-color: var(--c8s-primary);
}

/* An unfinished block still needs to be visible and clickable while a school is
   building it; the public page omits it entirely instead of showing this. */
.c8s-placeholder {
    margin: 0;
    padding: var(--c8s-space-sm) var(--c8s-gutter, 1rem);
    border: 2px dashed color-mix(in srgb, var(--c8s-fg, currentColor) 25%, transparent);
    border-radius: var(--c8s-radius-surface);
    color: var(--c8s-fg-muted, currentColor);
    font-size: var(--c8s-text-sm, .875rem);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .c8s-body--canvas .c8s-block { transition: none; }
}

/* ==========================================================================
   13. Premium public home composition (PUB-001)
   ========================================================================== */

.c8s-site--home {
    --c8s-home-header-pad: var(--c8s-gap-tight);
    --c8s-home-card-pad: var(--c8s-gap);
    --c8s-home-hero-min: clamp(18rem, 34vw, 25rem);
    --c8s-home-mark: 2.5rem;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--c8s-accent) 9%, transparent), transparent 32%),
        var(--c8s-surface-muted);
}

.c8s-site--home .c8s-header {
    position: static;
    border-block-end: 0;
    background: transparent;
}

.c8s-site--home .c8s-header__inner {
    min-block-size: calc(var(--c8s-home-mark) + (2 * var(--c8s-home-header-pad)));
    padding-block: var(--c8s-home-header-pad);
}

.c8s-brand__mark {
    display: grid;
    place-items: center;
    inline-size: var(--c8s-home-mark, 2.5rem);
    block-size: var(--c8s-home-mark, 2.5rem);
    overflow: hidden;
    border: .0625rem solid color-mix(in srgb, var(--c8s-primary) 52%, var(--c8s-line));
    border-radius: var(--c8s-radius-control);
    color: var(--c8s-primary);
    background: var(--c8s-surface);
    font-family: var(--c8s-font-heading);
    font-size: var(--c8s-text-xl);
    font-weight: 700;
}

.c8s-brand__mark img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.c8s-site--home .c8s-nav__link[aria-current="page"] {
    color: var(--c8s-primary);
    background: color-mix(in srgb, var(--c8s-primary) 10%, var(--c8s-surface));
}

.c8s-site--home .c8s-main {
    display: grid;
    gap: var(--c8s-gap);
    padding-block-end: var(--c8s-space-lg);
}

.c8s-site--home .c8s-main > .c8s-block {
    inline-size: min(calc(100% - (2 * var(--c8s-gutter))), var(--c8s-wide-width));
    margin-inline: auto;
    padding-inline: var(--c8s-home-card-pad);
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-surface);
    background: var(--c8s-surface);
    box-shadow: var(--c8s-shadow-sm);
}

.c8s-site--home .c8s-main > .c8s-block:is(.is-bg-surface, .is-bg-surface-muted, .is-bg-primary, .is-bg-accent, .is-bg-ink) {
    background: var(--c8s-band-bg);
}

.c8s-site--home .c8s-main > .c8s-hero:first-child {
    min-block-size: var(--c8s-home-hero-min);
    overflow: hidden;
    padding-block: var(--c8s-space-lg);
    background:
        linear-gradient(100deg, var(--c8s-surface) 0 42%, color-mix(in srgb, var(--c8s-surface) 82%, transparent) 58%, transparent),
        color-mix(in srgb, var(--c8s-accent) 7%, var(--c8s-surface));
}

.c8s-site--home .c8s-main > .c8s-hero:first-child .c8s-hero__headline {
    color: var(--c8s-primary);
}

.c8s-site--home .c8s-main > .c8s-hero:first-child .c8s-hero__media img {
    min-block-size: calc(var(--c8s-home-hero-min) - (2 * var(--c8s-space-lg)));
    aspect-ratio: 16 / 10;
}

.c8s-public-knowledge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--c8s-gap);
    inline-size: min(calc(100% - (2 * var(--c8s-gutter))), var(--c8s-wide-width));
    margin-inline: auto;
    padding: var(--c8s-home-card-pad);
    border: .0625rem solid var(--c8s-line);
    border-radius: var(--c8s-radius-surface);
    background: color-mix(in srgb, var(--c8s-primary) 5%, var(--c8s-surface));
    box-shadow: var(--c8s-shadow-sm);
}

.c8s-public-knowledge__mark {
    display: grid;
    place-items: center;
    inline-size: var(--c8s-home-mark);
    block-size: var(--c8s-home-mark);
    border-radius: var(--c8s-radius-pill);
    color: var(--c8s-primary-contrast);
    background: var(--c8s-primary);
    font-family: var(--c8s-font-heading);
    font-weight: 700;
}

.c8s-public-knowledge > div:not(.c8s-public-knowledge__mark) {
    display: grid;
    gap: var(--c8s-gap-fine);
}

.c8s-public-knowledge h2 {
    font-size: var(--c8s-text-xl);
}

.c8s-public-knowledge p:last-child {
    max-inline-size: var(--c8s-measure-prose);
    color: var(--c8s-fg-muted);
    font-size: var(--c8s-text-sm);
}

@media (max-width: 48rem) {
    .c8s-site--home .c8s-main > .c8s-block,
    .c8s-public-knowledge {
        inline-size: calc(100% - (2 * var(--c8s-gutter)));
    }

    .c8s-site--home .c8s-main > .c8s-hero:first-child {
        min-block-size: auto;
        padding-block: var(--c8s-space-md);
        background: var(--c8s-surface);
    }

    .c8s-public-knowledge {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .c8s-public-knowledge > a {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* ==========================================================================
   14. Shared language switcher
   ==========================================================================
   The switcher is one CON8CT-owned fragment reused by every surface that has a
   header. This page does not load the authenticated stylesheet, so it is styled
   here from the site tokens -- a family arriving in Spanish or Korean must be
   able to switch on the page they actually land on.

   It is deliberately outside the nav's exclusive accordion group: closing the
   language menu because someone opened "Admissions" would be surprising.
   ========================================================================== */

.c8s-site .language-switcher {
    position: relative;
}

.c8s-site .language-switcher > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--c8s-line);
    border-radius: var(--c8s-radius-pill);
    color: inherit;
    cursor: pointer;
    list-style: none;
}

.c8s-site .language-switcher > summary::-webkit-details-marker { display: none; }

.c8s-site .language-switcher > summary:focus-visible {
    outline: 2px solid var(--c8s-focus, currentColor);
    outline-offset: 2px;
}

.c8s-site .language-switcher__globe {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.c8s-site .language-switcher > form {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + .375rem);
    z-index: 20;
    display: grid;
    gap: .125rem;
    min-inline-size: 9rem;
    padding: .375rem;
    border: 1px solid var(--c8s-line);
    border-radius: var(--c8s-radius-surface);
    background-color: var(--c8s-panel, var(--c8s-surface));
    box-shadow: var(--c8s-shadow-raised, 0 .5rem 1.5rem rgb(0 0 0 / .12));
}

.c8s-site .language-switcher > form button {
    padding: .375rem .5rem;
    border: none;
    border-radius: var(--c8s-radius-control);
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--c8s-text-sm, .875rem);
    text-align: start;
    cursor: pointer;
}

.c8s-site .language-switcher > form button:hover {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.c8s-site .language-switcher > form button[aria-current="true"] {
    font-weight: 700;
}

/* The label is for assistive technology only; the globe carries it visually. */
.c8s-site .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The one action in the school header that belongs to CON8CT rather than to the
   school's own menu, so it reads as an action instead of another nav link. */
.c8s-utility__portal {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--c8s-border);
    border-radius: var(--c8s-radius-control);
    background: var(--c8s-surface);
    color: var(--c8s-ink);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.c8s-utility__portal:hover,
.c8s-utility__portal:focus-visible {
    background: var(--c8s-primary);
    border-color: var(--c8s-primary);
    color: var(--c8s-primary-contrast);
}

@media (max-width: 40rem) {
    .c8s-utility__portal { padding: 0.35rem 0.7rem; font-size: 0.8125rem; }
}

/* Explicit authored layouts retain the existing site-theme tokens. */
.c8s-site .c8s-hero.is-layout-campus { position: relative; isolation: isolate; padding: var(--c8s-space-lg); }
.c8s-site .c8s-hero.is-layout-campus > .c8s-hero__inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.55fr); grid-auto-flow: row; min-block-size: 19rem; }
.c8s-site .c8s-hero.is-layout-campus .c8s-hero__body { grid-area: 1 / 1; z-index: 1; align-self: center; }
.c8s-site .c8s-hero.is-layout-campus .c8s-hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.c8s-site .c8s-hero.is-layout-campus .c8s-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; }
.c8s-site .c8s-hero.is-layout-campus::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,var(--c8s-surface) 0%,color-mix(in srgb,var(--c8s-surface) 95%,transparent) 36%,color-mix(in srgb,var(--c8s-surface) 38%,transparent) 100%); }
.c8s-site .c8s-hero__mascot { grid-area: 1 / 2; align-self: end; justify-self: end; max-block-size: 20rem; inline-size: min(100%,18rem); object-fit: contain; z-index: 1; }
.c8s-site .c8s-media-text.is-layout-story > .c8s-media-text__inner { grid-template-columns: minmax(0,1fr); }
.c8s-site .c8s-media-text.is-layout-story .c8s-media-text__media { order: 0; }
.c8s-site .c8s-media-text.is-layout-story .c8s-media-text__media img { aspect-ratio: 16 / 9; object-fit: cover; }
.c8s-site .c8s-public-knowledge__mark svg { inline-size: 1.6rem; block-size: 1.6rem; }
.c8s-site .c8s-block.c8s-public-knowledge { display: block; inline-size: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; }
.c8s-site .c8s-block.c8s-public-knowledge > aside { inline-size: 100%; grid-template-columns: auto minmax(0,1fr); align-items: start; }
.c8s-site .c8s-block.c8s-public-knowledge > aside > a { grid-column: 1 / -1; justify-self: start; }
.c8s-site .c8s-main > .c8s-columns:has(.c8s-public-knowledge) { padding: 0; border: 0; background: transparent; box-shadow: none; }
.c8s-site .c8s-columns:has(.c8s-public-knowledge) .c8s-media-text { padding: var(--c8s-home-card-pad); border: 1px solid var(--c8s-line); border-radius: var(--c8s-radius-surface); background: var(--c8s-surface); }
@media (max-width: 48rem) {
 .c8s-site .c8s-hero.is-layout-campus > .c8s-hero__inner { grid-template-columns: minmax(0,1fr); }
 .c8s-site .c8s-hero__mascot { grid-area: 2 / 1; max-block-size: 11rem; inline-size: 8rem; }
 .c8s-site .c8s-hero.is-layout-campus::after { background: color-mix(in srgb,var(--c8s-surface) 88%,transparent); }
}

.c8s-site .c8s-main:has(> .c8s-hero.is-layout-campus) > .c8s-card-grid { padding: 0; border: 0; background: transparent; box-shadow: none; }
.c8s-site .c8s-main:has(> .c8s-hero.is-layout-campus) > .c8s-card-grid .c8s-card__title { padding-block-end: var(--c8s-gap-tight); border-block-end: 1px solid var(--c8s-line); }
.c8s-site .c8s-main:has(> .c8s-hero.is-layout-campus) > .c8s-card-grid .c8s-textlink { display: inline-flex; justify-content: center; align-items: center; padding: var(--c8s-gap-tight); border: 1px solid var(--c8s-line); border-radius: var(--c8s-radius-control); text-decoration: none; min-block-size: 2.75rem; }
.c8s-site .c8s-media-text.is-layout-story > .c8s-media-text__inner > h2 { font-size: var(--c8s-text-xl); }