:root{--theme-border:#d1d5db;--theme-brand:#1d4ed8;--theme-brand-contrast:#ffffff;--theme-calendar-event:#1d4ed8;--theme-calendar-today:#dbeafe;--theme-control-surface:#ffffff;--theme-focus-ring:#2563eb;--theme-font-body:system-ui, -apple-system, "Segoe UI", sans-serif;--theme-font-heading:system-ui, -apple-system, "Segoe UI", sans-serif;--theme-ink:#111827;--theme-ink-dark:#f9fafb;--theme-ink-muted:#4b5563;--theme-radius:0.5rem;--theme-shell-max-width:72rem;--theme-space-md:1rem;--theme-space-sm:0.5rem;--theme-surface:#ffffff;--theme-surface-dark:#111827;--theme-surface-muted:#f3f4f6;}
/*
 * Baseline: Safari 17+ (ADR-001 [T3]). CSS nesting, :has(), @container, light-dark() and
 * color-mix() are all Baseline at that floor, so there is no build step and no autoprefixer —
 * plain stylesheets a volunteer can open and read five years from now.
 */

:root {
    color-scheme: light dark;

    --ink: light-dark(#16202c, #e8edf3);
    --ink-muted: light-dark(#55637a, #a4b0c2);
    --paper: light-dark(#ffffff, #131a23);
    --paper-sunk: light-dark(#f4f6fa, #1b232e);
    --line: light-dark(#d8dee8, #2c3644);
    --line-strong: light-dark(#aeb8c7, #526274);

    --brand: light-dark(#1f5b8f, #6fb2e8);
    --brand-ink: light-dark(#ffffff, #0d1520);
    --brand-soft: light-dark(#eaf3fa, #182c3e);

    --danger: light-dark(#a3241f, #ff8f87);
    --danger-bg: light-dark(#fdf0ef, #331917);
    --success: light-dark(#1c6b3f, #79d69f);
    --success-bg: light-dark(#eef8f2, #12291d);
    --warn: light-dark(#8a5a00, #f0c14b);
    --warn-bg: light-dark(#fdf6e6, #2c2416);

    --radius: 0.65rem;
    --gap: 1rem;
    --measure: 68ch;
    --email-content-width: 600px;
    --shadow-sm: 0 0.1rem 0.25rem rgb(15 35 55 / 0.08);
    --shadow-md: 0 0.5rem 1.25rem rgb(15 35 55 / 0.12);

    --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

body {
    margin: 0;
    font-family: var(--font);
    /* Parents read this on a phone in a school corridor. 1.05rem, not 0.875rem. */
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper-sunk);
}

h1, h2, h3 {
    line-height: 1.2;
    text-wrap: balance;
}

h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
h3 { font-size: 1.15rem; }

p, li { text-wrap: pretty; }

a {
    color: var(--brand);
    text-underline-offset: 0.15em;

    &:hover { text-decoration-thickness: 2px; }
}

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------------------------------------------------------------- calendar */

.calendar-surface {
    --calendar-day-min: 8.5rem;
    --calendar-lane-height: 1.6rem;
    --calendar-lane-gap: .15rem;
    --calendar-lane-track: calc(var(--calendar-lane-height) + var(--calendar-lane-gap));
    --calendar-day-pad: .25rem;
    --calendar-day-click-gap: .125rem;
    --calendar-event-bg: light-dark(#eaf3fa, #182c3e);
    --calendar-event-fg: light-dark(#163c5c, #d9efff);
    --calendar-event-line: light-dark(#2367a0, #82c4f4);
    display: block;
    position: relative;
    container-type: inline-size;
    inline-size: 100%;
    min-inline-size: 0;
    margin-block: 1.5rem;
}

.calendar-surface__header {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-block-end: .75rem;
}

.calendar-surface__heading { margin: 0; }
.calendar-surface__controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.calendar-surface__controls .button { min-block-size: 2.75rem; }

/* The month label is a button (a JS-driven picker trigger), styled to still read as a heading. */
.calendar-surface__month-trigger {
    display: inline-flex;
    align-items: center;
    gap: 1ch;
    min-block-size: 2.75rem;
    margin: 0;
    padding: .25rem .6rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

/* A down chevron marks the disclosure control without competing with the heading. It stays down in
   both states; the button's border and fill communicate that its picker is open. */
.calendar-surface__month-caret {
    flex: none;
    inline-size: .42em;
    block-size: .42em;
    border-inline-end: .065em solid var(--ink-muted);
    border-block-end: .065em solid var(--ink-muted);
    transform: rotate(45deg);
    transition: border-color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .calendar-surface__month-caret { transition: none; }
}

.calendar-surface__month-trigger:hover { border-color: var(--line-strong); }
.calendar-surface__month-trigger[aria-expanded="true"] { border-color: var(--brand); background: var(--brand-soft); }

.calendar-picker {
    position: absolute;
    z-index: 20;
    margin-block-start: .4rem;
    inline-size: min(20rem, 90vw);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-md);
    padding: .75rem;
}

.calendar-picker[hidden] { display: none; }

.calendar-picker__year {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-block-end: .6rem;
    font-weight: 700;
}

.calendar-picker__year-label { font-size: 1.1rem; }

.calendar-picker__year button {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    border: 1px solid var(--line-strong);
    border-radius: .4rem;
    background: var(--paper);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.calendar-picker__year button:hover { border-color: var(--brand); }

.calendar-picker__months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
}

.calendar-picker__month {
    min-block-size: 2.75rem;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: var(--paper);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.calendar-picker__month:hover { border-color: var(--line-strong); }

/* Selected state reads from border weight and fill, not color alone. */
.calendar-picker__month[aria-current="true"] {
    border-color: var(--brand);
    border-width: 2px;
    background: var(--brand-soft);
    font-weight: 800;
}

.calendar-surface__desktop {
    display: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
}

.calendar-grid__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-grid__weekday {
    padding: .45rem;
    border-block-end: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
}

.calendar-grid__weeks, .calendar-grid__days, .calendar-grid__bars, .calendar-grid__events { margin: 0; padding: 0; list-style: none; }

/*
 * Theme prose rules are emitted after this stylesheet and are scoped with two classes, so a plain
 * list reset loses the cascade. These lists are application structure rather than authored prose;
 * keep the reset inside the Calendar boundary with enough specificity to protect every host.
 */
.calendar-surface[data-calendar-surface] :is(
    .calendar-grid__weeks,
    .calendar-grid__days,
    .calendar-grid__bars,
    .calendar-grid__events,
    .calendar-agenda,
    .calendar-agenda__events
) {
    max-inline-size: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendar-surface[data-calendar-surface] .calendar-overflow__list {
    max-inline-size: none;
    margin: 0;
    padding: .35rem 0;
    list-style: none;
}

.calendar-grid__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-block-size: max(
        var(--calendar-day-min),
        calc(2rem + var(--calendar-day-pad) + var(--calendar-lanes, 0) * var(--calendar-lane-track))
    );
}

.calendar-grid__week {
    position: relative;
    min-block-size: max(
        var(--calendar-day-min),
        calc(2rem + var(--calendar-day-pad) + var(--calendar-lanes, 0) * var(--calendar-lane-track))
    );
}

/* A child day background can paint over its parent's border. Draw the separator after every child so
   adjacent-month fills never erase only part of a week boundary. */
.calendar-grid__week:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 0;
    border-block-start: 1px solid var(--line);
    pointer-events: none;
}

.calendar-grid__day { position: relative; min-inline-size: 0; padding: var(--calendar-day-pad); border-inline-end: 1px solid var(--line); }
.calendar-grid__day:last-of-type { border-inline-end: 0; }
.calendar-grid__day--adjacent {
    background: var(--paper-sunk);
    color: light-dark(#596579, #a8b6ca);
}

/* Today reads from a distinct fill and a separate border, not from font weight or color alone. */
.calendar-grid__day--today { background: var(--brand-soft); box-shadow: inset 0 0 0 3px var(--brand); font-weight: 700; }

.calendar-grid__date { display: block; font-size: .84rem; }
.calendar-grid__date--month { font-weight: 800; }

/* Every desktop occurrence is rendered in the shared bar lane grid. This per-day list is retained
   only as the measured-overflow host for its anchored +N control. */
.calendar-grid__events {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.calendar-grid__bars {
    position: absolute;
    inset: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: var(--calendar-lane-height);
    row-gap: var(--calendar-lane-gap);
    overflow: hidden;
    pointer-events: none;
}

.calendar-grid__bar {
    grid-column: var(--calendar-column) / span var(--calendar-span);
    grid-row: calc(var(--calendar-lane) + 1);
    min-inline-size: 0;
    box-sizing: border-box;
    /* A bar slice is clipped to its computed week-column span and never paints past it. */
    overflow: hidden;
}

.calendar-grid__bar .calendar-event--bar {
    display: flex;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    box-sizing: border-box;
    pointer-events: auto;
}
.calendar-grid__bar[hidden] { display: none; }
.calendar-grid__bar .calendar-event--bar time { flex: none; }
.calendar-grid__bar .calendar-event--bar span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Every single-day event fills its day cell to a consistent inline size, and its own box (padding
   and border included) can never be wider than the space the day gives it. */
.calendar-grid__events > li { min-inline-size: 0; }

.calendar-event {
    display: flex;
    gap: .3rem;
    align-items: baseline;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 1.5rem;
    box-sizing: border-box;
    padding: .15rem .3rem;
    border: 1px solid var(--calendar-event-line);
    border-radius: .25rem;
    background: var(--calendar-event-bg);
    color: var(--calendar-event-fg);
    font-size: .78rem;
    line-height: 1.25;
    text-decoration: none;
}

/* Title and time are each independently bounded so either can ellipsize on its own without the
   other pushing it out of the cell. */
.calendar-event span:last-child, .calendar-event--bar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-grid__events .calendar-event { flex-direction: column; align-items: stretch; gap: .1rem; }
.calendar-grid__events .calendar-event time { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rounded caps only where the bar actually starts or ends; a mid-week slice stays square so it
   visually continues from the segment before or after it. */
.calendar-event--bar {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.calendar-event--bar[data-calendar-start-cap="true"] { border-start-start-radius: 999px; border-end-start-radius: 999px; }
.calendar-event--bar[data-calendar-end-cap="true"] { border-start-end-radius: 999px; border-end-end-radius: 999px; }

.calendar-event--slate,
.home__upcoming-item--slate { --calendar-event-bg: light-dark(#edf1f5,#283544); --calendar-event-fg: light-dark(#25384c,#edf5fc); --calendar-event-line: light-dark(#4d6075,#acbfd4); }
.calendar-event--blue,
.home__upcoming-item--blue { --calendar-event-bg: light-dark(#eaf3fa,#182c3e); --calendar-event-fg: light-dark(#163c5c,#d9efff); --calendar-event-line: light-dark(#2367a0,#82c4f4); }
.calendar-event--teal,
.home__upcoming-item--teal { --calendar-event-bg: light-dark(#e4f5f3,#123a38); --calendar-event-fg: light-dark(#004843,#d7fffa); --calendar-event-line: light-dark(#006b67,#70d6cf); }
.calendar-event--green,
.home__upcoming-item--green { --calendar-event-bg: light-dark(#edf6e9,#1e3920); --calendar-event-fg: light-dark(#244d1c,#e2ffdb); --calendar-event-line: light-dark(#326b24,#8fd27b); }
.calendar-event--gold,
.home__upcoming-item--gold { --calendar-event-bg: light-dark(#faf5df,#413a19); --calendar-event-fg: light-dark(#4c3e00,#fff5bf); --calendar-event-line: light-dark(#705b00,#e7cf72); }
.calendar-event--orange,
.home__upcoming-item--orange { --calendar-event-bg: light-dark(#fff0df,#4a2b14); --calendar-event-fg: light-dark(#633400,#fff0d5); --calendar-event-line: light-dark(#8a4b00,#f5b76b); }
.calendar-event--red,
.home__upcoming-item--red { --calendar-event-bg: light-dark(#fcebea,#481d1c); --calendar-event-fg: light-dark(#6d1717,#ffe2df); --calendar-event-line: light-dark(#a52222,#ff9b95); }
.calendar-event--magenta,
.home__upcoming-item--magenta { --calendar-event-bg: light-dark(#fbeaf4,#482239); --calendar-event-fg: light-dark(#64194c,#ffe0f5); --calendar-event-line: light-dark(#963d78,#eda1d4); }
.calendar-event--purple,
.home__upcoming-item--purple { --calendar-event-bg: light-dark(#f1edfb,#332752); --calendar-event-fg: light-dark(#3e286f,#eee8ff); --calendar-event-line: light-dark(#6448a5,#bda7f5); }

/* -------------------------------------------------------- measured overflow ("+N more") */

/* Only once the surface has measured itself (JS) does each week take a fixed comfortable height.
   Without script the server-projected lane count grows the week so every event remains available. */
.calendar-surface__desktop.is-measured .calendar-grid__week,
.calendar-surface__desktop.is-measured .calendar-grid__days {
    block-size: var(--calendar-day-min);
    min-block-size: var(--calendar-day-min);
}
.calendar-surface__desktop.is-measured .calendar-grid__day {
    block-size: var(--calendar-day-min);
    overflow: hidden;
}

.calendar-grid__more-item {
    position: absolute;
    z-index: 3;
    inset-block-start: calc(2rem + var(--calendar-more-lane, 0) * var(--calendar-lane-track));
    inset-inline: var(--calendar-day-pad);
    min-inline-size: 0;
    block-size: var(--calendar-lane-height);
    pointer-events: auto;
}

.calendar-grid__more {
    display: inline-flex;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--calendar-lane-height);
    block-size: 100%;
    box-sizing: border-box;
    padding: .15rem .4rem;
    border: 1px solid var(--line-strong);
    border-radius: .25rem;
    background: var(--paper-sunk);
    color: var(--ink);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: start;
    cursor: pointer;
}

.calendar-grid__more:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ------------------------------------------------------- anchored day overflow */

.calendar-overflow {
    position: fixed;
    inset: auto;
    z-index: 60;
    inline-size: min(24rem, calc(100vw - 1rem));
    max-block-size: min(70vh, 34rem);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.calendar-overflow::backdrop { background: transparent; }
.calendar-overflow:not(:popover-open) { display: none; }

.calendar-overflow::before {
    content: "";
    position: absolute;
    inline-size: .75rem;
    block-size: .75rem;
    border: solid var(--line-strong);
    background: var(--paper);
    transform: rotate(45deg);
}
.calendar-overflow[data-calendar-overflow-placement="right"]::before {
    inset-inline-start: -.43rem;
    inset-block-start: calc(var(--calendar-overflow-arrow-offset, 2rem) - .375rem);
    border-width: 0 0 1px 1px;
}
.calendar-overflow[data-calendar-overflow-placement="left"]::before {
    inset-inline-end: -.43rem;
    inset-block-start: calc(var(--calendar-overflow-arrow-offset, 2rem) - .375rem);
    border-width: 1px 1px 0 0;
}
.calendar-overflow[data-calendar-overflow-placement="below"]::before {
    inset-block-start: -.43rem;
    inset-inline-start: 1.5rem;
    border-width: 1px 0 0 1px;
}
.calendar-overflow[data-calendar-overflow-placement="above"]::before {
    inset-block-end: -.43rem;
    inset-inline-start: 1.5rem;
    border-width: 0 1px 1px 0;
}

.calendar-overflow__header {
    padding: .9rem 1rem;
    border-block-end: 1px solid var(--line);
}

.calendar-overflow__title { margin: 0; font-size: 1.1rem; }

.calendar-overflow__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: .35rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.calendar-overflow__list li { margin: 0; }
.calendar-overflow__list .calendar-overflow-event {
    display: grid;
    grid-template-columns: .3rem minmax(4.25rem, auto) minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
    min-block-size: 4rem;
    padding: .55rem .9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: .9rem;
    text-align: start;
}
.calendar-overflow__list .calendar-overflow-event:hover {
    background: var(--paper-sunk);
}
.calendar-overflow-event__rail {
    align-self: stretch;
    border-radius: 999px;
    background: var(--calendar-event-line);
}
.calendar-overflow-event__meta {
    display: grid;
    gap: .15rem;
    color: var(--ink-muted);
    font-size: .82rem;
    line-height: 1.2;
    white-space: nowrap;
}
.calendar-overflow-event__title {
    min-inline-size: 0;
    padding-block-start: .05rem;
    overflow-wrap: anywhere;
    white-space: normal;
    font-weight: 700;
}

.calendar-overflow :focus-visible { outline: 3px solid var(--focus-color, #005fcc); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
    .calendar-overflow { animation: calendar-overflow-in .15s ease; }
}

@keyframes calendar-overflow-in {
    from { transform: translateY(.5rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (forced-colors: active) {
    .calendar-overflow { border: 1px solid CanvasText; }
    .calendar-overflow-event__rail { forced-color-adjust: none; background: CanvasText; }
    .calendar-grid__more { border: 1px solid ButtonText; }
    .calendar-surface__month-caret { border-color: ButtonText; }
}


/* ------------------------------------------------------------- mobile agenda "tear-off" cards */

.calendar-agenda { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.calendar-agenda__card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-block-end: 1px solid var(--line);
}

.calendar-agenda__card:last-child { border-block-end: 0; }

.calendar-agenda__tile {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 3.75rem;
    block-size: 3.75rem;
    border: 1px solid var(--line-strong);
    border-radius: .65rem;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.calendar-agenda__tile-month { font-size: .7rem; font-weight: 700; letter-spacing: .05em; color: var(--brand); }
.calendar-agenda__tile-day { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.calendar-agenda__tile-weekday { font-size: .68rem; color: var(--ink-muted); letter-spacing: .05em; }

.calendar-agenda__body { flex: 1; min-inline-size: 0; }
.calendar-agenda__events {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendar-agenda__events .calendar-event {
    flex-wrap: wrap;
    gap: .15rem .6rem;
    min-block-size: 2.75rem;
    padding: .5rem .75rem;
    font-size: .95rem;
}

.calendar-event__title { flex-basis: 100%; font-weight: 700; }
.calendar-event__when { color: var(--ink-muted); font-size: .85rem; }
.calendar-event__time { flex: none; font-weight: 700; }

.calendar-event__badge {
    display: inline-block;
    padding: .1rem .5rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.calendar-surface__empty { color: var(--ink-muted); padding: 1rem 0; }

.calendar-agenda__more {
    display: flex;
    justify-content: center;
    padding-block: 1rem;
}

.calendar-agenda__more .button {
    max-inline-size: 100%;
    text-align: center;
}

.calendar-detail { max-inline-size: var(--measure); }
.calendar-detail__facts { display: grid; gap: .75rem; }
.calendar-detail__facts div { display: grid; grid-template-columns: minmax(7rem, .3fr) 1fr; gap: .75rem; }
.calendar-detail__facts dt { font-weight: 700; }
.calendar-detail__facts dd { margin: 0; }
.calendar-detail__recurrence-sentence { margin: 0; }
.calendar-detail__recurrence-exceptions-heading { margin: .5rem 0 0; font-weight: 600; }
.calendar-detail__recurrence-exceptions { margin: .25rem 0 0; padding-inline-start: 1.25rem; }
.calendar-detail__category, .calendar-detail__all-day { display: inline-block; padding: .2rem .5rem; border: 1px solid currentColor; border-radius: 999px; font-weight: 700; }
.calendar-detail__category {
    border-color: var(--calendar-event-line);
    background: var(--calendar-event-bg);
    color: var(--calendar-event-fg);
}

/* A legibility-first threshold: below this the six-week grid's day cells get too cramped to read, so
   a calendar embedded in a narrow column of an otherwise wide page renders the mobile agenda live. */
@container (min-width: 60rem) {
    .calendar-surface:not(.calendar-surface--narrow) .calendar-surface__desktop { display: block; }
    .calendar-surface:not(.calendar-surface--narrow) .calendar-agenda { display: none; }
}

/* ---------------------------------------------------------------- layout */

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

main.shell {
    flex: 1;
    background: var(--paper);
    padding-block: 1.5rem;
}

.public-surface main.shell {
    max-inline-size: 76rem;
}


.shell {
    margin-inline: auto;
    padding-inline: var(--gap);
    inline-size: 100%;
}

.site-header {
    background: var(--paper);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-sm);

    & > .shell {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
        align-items: center;
        justify-content: space-between;
        padding-block: 0.75rem;
    }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: inherit;
    text-decoration: none;
}

.brand__mark {
    inline-size: 2rem;
    block-size: 2rem;
    flex: none;
    padding: 0.3rem;
    border-radius: 0.55rem;
    background: var(--brand);
    color: var(--brand-ink);
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand__mark--image {
    padding: 0;
    background: transparent;
    object-fit: contain;
}

.brand__mark--image[style] {
    inline-size: min(var(--brand-mark-width), 100%);
    block-size: min(var(--brand-mark-height), 20vh);
}

.account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.95rem;
    margin: 0;
    padding: 0;
    list-style: none;

    /* The sign-out form must not break the row it sits in. */
    & form { display: contents; }

    & a {
        padding: 0.4rem 0.65rem;
        border-radius: var(--radius);
        text-decoration: none;
    }

    & a[aria-current="page"] {
        background: var(--brand-soft);
        box-shadow: inset 0 -0.2rem 0 var(--brand);
        color: var(--ink);
        font-weight: 700;
    }
}

.account-nav .account-sign-in {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    max-inline-size: min(19rem, 55vw);
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: inherit;
}

.account-nav .account-sign-in:hover,
.account-nav .account-sign-in:focus-visible {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.account-menu {
    position: relative;

    & > summary {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        max-inline-size: min(19rem, 55vw);
        padding: 0.4rem 0.55rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        cursor: pointer;
        list-style: none;
        background: var(--paper);
    }

    & > summary::-webkit-details-marker { display: none; }
    & > summary::marker { content: ""; }
    & > summary::after {
        content: "";
        inline-size: 0.45rem;
        block-size: 0.45rem;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        rotate: 45deg;
        translate: 0 -0.1rem;
        flex: none;
    }

    &[open] > summary {
        border-color: var(--brand);
        background: var(--brand-soft);
    }
}

.account-menu__avatar {
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border-radius: 50%;
    flex: none;
    background:
        radial-gradient(circle at 50% 38%, var(--brand-ink) 0 17%, transparent 18%),
        radial-gradient(circle at 50% 105%, var(--brand-ink) 0 42%, transparent 43%),
        var(--brand);
}

.account-menu__identity {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__panel {
    position: absolute;
    z-index: 30;
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-end: 0;
    display: grid;
    gap: 0.15rem;
    inline-size: max-content;
    max-inline-size: min(18rem, calc(100vw - 2rem));
    justify-items: stretch;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-md);

    & > form {
        inline-size: 100%;
        margin: 0;
    }

    & > a,
    & > form > .link-button {
        display: block;
        box-sizing: border-box;
        inline-size: 100%;
        padding: 0.5rem 0.65rem;
        border-radius: calc(var(--radius) / 2);
        color: var(--ink);
        font: inherit;
        line-height: 1.35;
        text-align: start;
        text-decoration: none;
    }

    & > a:hover,
    & > a:focus-visible,
    & > form > .link-button:hover,
    & > form > .link-button:focus-visible {
        background: var(--brand-soft);
    }
}

.site-footer {
    border-block-start: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink-muted);
    background: var(--paper);

    & > .shell {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem var(--gap);
        align-items: center;
        justify-content: space-between;
        padding-block: 1rem;
    }

    & p { margin: 0; }

    & nav {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
}

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;

    &:focus {
        position: static;
        display: inline-block;
        padding: 0.5rem;
        background: var(--brand);
        color: var(--brand-ink);
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.muted, .optional { color: var(--ink-muted); }

/* ---------------------------------------------------------------- prose */

:is(.prose, .site-raw-body) {
    & [data-text-color="neutral-strong"] { color: light-dark(#20252b, #f5f7fa); }
    & [data-text-color="neutral"] { color: light-dark(#434a54, #d5dbe3); }
    & [data-text-color="neutral-soft"] { color: light-dark(#5f6975, #bcc5d1); }
    & [data-text-color="slate"] { color: light-dark(#4d6075, #acbfd4); }
    & [data-text-color="red"] { color: light-dark(#a52222, #ff9b95); }
    & [data-text-color="orange"] { color: light-dark(#8a4b00, #f5b76b); }
    & [data-text-color="gold"] { color: light-dark(#705b00, #e7cf72); }
    & [data-text-color="green"] { color: light-dark(#326b24, #8fd27b); }
    & [data-text-color="forest"] { color: light-dark(#1f5c3a, #72d7a1); }
    & [data-text-color="teal"] { color: light-dark(#006b67, #70d6cf); }
    & [data-text-color="blue"] { color: light-dark(#2367a0, #82c4f4); }
    & [data-text-color="indigo"] { color: light-dark(#394f9e, #aebcff); }
    & [data-text-color="purple"] { color: light-dark(#6448a5, #bda7f5); }
    & [data-text-color="magenta"] { color: light-dark(#963d78, #eda1d4); }
    & [data-text-color="burgundy"] { color: light-dark(#7f294f, #e9a0bd); }
    & [data-text-color="brown"] { color: light-dark(#6e4d2f, #d9b38c); }
    & [data-text-color-light][data-text-color-dark] {
        color: light-dark(var(--orgcart-text-light), var(--orgcart-text-dark));
    }

    & :is(mark, th, td)[data-highlight-tone="yellow"],
    & :is(th, td)[data-cell-background="yellow"] {
        background-color: light-dark(#fff1a8, #4d430f);
    }
    & :is(mark, th, td)[data-highlight-tone="mint"],
    & :is(th, td)[data-cell-background="mint"] {
        background-color: light-dark(#c9f3d5, #163f27);
    }
    & :is(mark, th, td)[data-highlight-tone="sky"],
    & :is(th, td)[data-cell-background="sky"] {
        background-color: light-dark(#cde9ff, #173852);
    }
    & :is(mark, th, td)[data-highlight-tone="rose"],
    & :is(th, td)[data-cell-background="rose"] {
        background-color: light-dark(#ffd5df, #4b2631);
    }
    & :is(th, td)[data-cell-background-light][data-cell-background-dark] {
        background-color: light-dark(var(--orgcart-cell-light), var(--orgcart-cell-dark));
    }
}

.prose {
    max-width: var(--measure);

    & > :first-child { margin-block-start: 0; }
    & > :last-child { margin-block-end: 0; }

    & ul, & ol { padding-inline-start: 1.5rem; }

    /*
     * Admin-authored HTML lands here. It is sanitized, but it is still typed by a volunteer at
     * 11pm, so the container has to stay unbreakable: images and tables are clamped rather than
     * trusted to fit.
     */
    & img { max-width: 100%; height: auto; }
    & table {
        width: 100%;
        margin-block: 1rem;
        border-collapse: collapse;
    }

    & th, & td {
        padding: 0.25rem 0.35rem;
        border: 1px solid var(--line);
        vertical-align: top;
    }
    & th > :first-child, & td > :first-child { margin-block-start: 0; }
    & th > :last-child, & td > :last-child { margin-block-end: 0; }
    & table.table--borderless th,
    & table.table--borderless td { border-color: transparent; }
    & th {
        background: var(--paper-sunk);
        font-weight: 700;
        text-align: start;
    }
    & blockquote {
        margin-inline: 0;
        padding-inline-start: 1rem;
        border-inline-start: 3px solid var(--line);
        color: var(--ink-muted);
    }
    & pre {
        overflow-x: auto;
        padding: 0.75rem;
        border-radius: var(--radius);
        background: var(--paper-sunk);
        white-space: pre-wrap;
    }
}

.rich-text-table-scroll {
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
    overscroll-behavior-inline: contain;

    & > table {
        min-inline-size: 100%;
    }

    & > table[data-table-width] {
        min-inline-size: 0;
    }

    & th,
    & td {
        min-inline-size: 4.5rem;
        overflow-wrap: anywhere;
    }
}

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

.button {
    display: inline-block;
    padding: 0.65rem 1.2rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--brand-ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0.1rem 0.2rem rgb(10 40 65 / 0.12);

    /* 44px minimum target. Half of these taps happen one-handed on a phone. */
    min-height: 2.75rem;

    &:hover { background: color-mix(in oklab, var(--brand) 85%, black); }
    &:disabled { opacity: 0.55; cursor: not-allowed; }
}

.button--secondary {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
    box-shadow: none;

    &:hover { background: var(--paper-sunk); }
}

/*
 * Destructive actions must not look like the primary action. This was missing, so "Revoke access"
 * rendered in exactly the brand blue as "Save" — five times over on the access page. Outlined
 * rather than filled red: the weight belongs on the safe action, and a wall of red buttons trains
 * people to click through them.
 */
.button--danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);

    &:hover { background: var(--danger-bg); }
}

/* The default .button is already the primary one; this alias exists because markup asks for it. */
.button--primary { /* intentionally the same as .button */ }

.button[data-form-state-submit]:disabled {
    border-color: var(--line);
    background: var(--paper-sunk);
    color: var(--muted);
    box-shadow: none;
    opacity: 1;
}

.button--secondary[data-promote-dirty-submit][data-form-state-dirty]:not(:disabled) {
    border-color: transparent;
    background: var(--brand);
    color: var(--brand-ink);
    box-shadow: 0 0.1rem 0.2rem rgb(10 40 65 / 0.12);

    &:hover {
        background: color-mix(in oklab, var(--brand) 85%, black);
    }
}

.button--icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    padding-inline: 0;
}

.button__icon {
    inline-size: 1rem;
    block-size: 1rem;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.button__copy-result {
    display: none;
}

.button[data-copy-state] > .button__icon:not(.button__copy-result) {
    display: none;
}

.button[data-copy-state="success"] {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);

    & > .button__copy-result--success {
        display: block;
    }
}

.button[data-copy-state="failure"] {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);

    & > .button__copy-result--failure {
        display: block;
    }
}

.button--provider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0.65rem;
    width: 100%;
    min-height: 3rem;
    padding-inline: 3rem 1.2rem;
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: 0 0.1rem 0.2rem rgb(10 40 65 / 0.08);

    &:hover {
        background: var(--paper-sunk);
        border-color: color-mix(in oklab, var(--line) 75%, var(--ink));
    }
}

.provider-icon {
    display: inline-grid;
    place-items: center;
    position: absolute;
    inset-inline-start: 1rem;
    inline-size: 1.25rem;
    block-size: 1.25rem;

    & img {
        display: block;
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }
}

.provider-buttons {
    display: grid;
    gap: 0.5rem;
    width: min(100%, 24rem);
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--brand);
    text-decoration: underline;
    cursor: pointer;
}

.link-button--danger { color: var(--danger); }

/* --------------------------------------------------- destructive confirmation */

/*
 * Replaces the button it guards, in place, so the question appears exactly where the click landed
 * rather than at the top of the page or in a browser dialog that hides which row was clicked.
 */
.confirm-prompt {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--danger);
    border-radius: 0.4rem;
    background: var(--danger-bg);
}

.confirm-prompt__question {
    color: var(--ink);
    font-size: 0.9rem;
}

.confirm-prompt__yes {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--paper);

    &:hover { background: var(--danger); filter: brightness(0.9); }
}

/* ---------------------------------------------------------------- notices */

.notice {
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-inline-start-width: 4px;
    border-radius: var(--radius);
    background: var(--paper-sunk);

    & > :first-child { margin-block-start: 0; }
    & > :last-child { margin-block-end: 0; }
}

.notice--success {
    border-inline-start-color: var(--success);
    background: var(--success-bg);
}

.notice--error {
    border-inline-start-color: var(--danger);
    background: var(--danger-bg);
}

.notice--test {
    border-inline-start-color: var(--warn);
    background: var(--warn-bg);
}

.notice--warning {
    border-inline-start-color: var(--warn);
    background: var(--warn-bg);
}

.test-mode-banner {
    max-inline-size: var(--measure);
    border-color: color-mix(in oklab, var(--warn) 55%, var(--line));
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--paper-sunk);
    color: var(--ink-muted);
}

.badge--test {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid currentcolor;
}

.validation-summary {
    &:empty { display: none; }

    /* The tag helper still emits an empty list when nothing is wrong, so :empty alone
       would leave a bare red box on every fresh form. */
    &.validation-summary-valid { display: none; }

    padding: 0.85rem 1rem;
    border-inline-start: 4px solid var(--danger);
    background: var(--danger-bg);
    border-radius: var(--radius);

    & ul { margin: 0; padding-inline-start: 1.25rem; }
}


/* ---------------------------------------------------------------- forms */

.field {
    display: grid;
    gap: 0.35rem;
    margin-block-end: 1.1rem;
    max-width: 34rem;

    & > label { font-weight: 600; }
}

.field--narrow { max-width: 10rem; }

.field-row {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    max-width: 46rem;
}

registration-account-children,
registration-donation-amount {
    display: block;
}

.account-children__list {
    display: grid;
    gap: var(--gap);
    margin-block: 1rem;
}

.account-child {
    min-inline-size: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);

    & > legend {
        padding-inline: 0.35rem;
        font-weight: 700;
    }
}

.account-child__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0 var(--gap);

    & > .field {
        min-inline-size: 0;
    }
}

.account-child__remove {
    justify-self: start;
}

.field--checkbox,
.field--radio {
    display: flex;
    align-items: start;
    gap: 0.5rem;
    margin-block-end: 0.5rem;

    & > label { font-weight: 400; }
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: inherit;
    /* 16px floor, or iOS zooms the page on focus and the parent loses their place. */
    font: inherit;
    font-size: max(1rem, 16px);
    min-height: 2.75rem;
    width: 100%;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="url"]:disabled,
input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="search"]:disabled,
select:disabled,
textarea:disabled {
    border-color: color-mix(in oklab, var(--line) 75%, var(--ink-muted));
    background: var(--paper-sunk);
    color: var(--ink-muted);
    cursor: not-allowed;
    opacity: 0.72;
}

input[type="checkbox"],
input[type="radio"] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-inline: 0;
    margin-block-start: 0.25rem;
    accent-color: var(--brand);
    flex: none;
}

fieldset {
    margin: 0 0 1.1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);

    & > legend { font-weight: 600; padding-inline: 0.35rem; }
}

.field-hint {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

/* A secondary action sitting under a control, e.g. "Add a child" beneath the child select. */
.field-link {
    display: inline-block;
    align-self: start;
    font-size: 0.9rem;
}

/* A note under a checkbox label, e.g. the consequence of an access capability. */
.field--checkbox > label > .field-hint {
    display: block;
    margin-block-start: 0.15rem;
}

.field-error {
    color: var(--danger);
    font-size: 0.92rem;
}

.volunteer-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    align-items: start;
    gap: 0.65rem;
    margin-block: 0.5rem 0.75rem;
}

.volunteer-picker__group {
    margin: 0;
    padding: 0.55rem 0.7rem 0.7rem;

    & > legend {
        padding-inline: 0.25rem;
        color: var(--brand-strong);
        font-weight: 750;
    }
}

.volunteer-picker__choices {
    display: grid;
}

.volunteer-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    cursor: pointer;
    border-block-start: 1px solid var(--line);
    padding-block: 0.55rem;

    &:first-child {
        border-block-start: 0;
    }

    &:hover {
        color: var(--brand-strong);
    }

    & > input {
        margin-block-start: 0.2rem;
    }
}

.volunteer-choice__content {
    display: grid;
    gap: 0.12rem;

    & .field-hint {
        margin: 0;
        line-height: 1.35;
    }
}

.volunteer-choice__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.5rem;
}


.field-success {
    color: var(--success);
    font-size: 0.92rem;
    font-weight: 600;
}

.quantity-adjustment-notice {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    margin: 0.15rem 0 0;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius);
    background: var(--warn-bg);
    color: var(--warn);
    font-size: 0.86rem;
    font-weight: 600;

    &[hidden] { display: none; }
}


.step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-block-start: 1.5rem;
}

.step-nav--guest-choice,
.step-nav__guest-choice {
    align-items: baseline;
}

.step-nav__guest-choice {
    display: flex;
    gap: 0.75rem;
    max-inline-size: 100%;
}

.step-nav__guest-choice > form {
    min-inline-size: 0;
}

.auth-columns {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    align-items: start;
}

.auth-columns--registration {
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.auth-choice-separator {
    align-self: center;
    justify-self: center;
    color: var(--ink-muted);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (min-width: 48rem) {
    .auth-columns--registration:not(.auth-columns--with-external) {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
}

@media (min-width: 70rem) {
    .auth-columns--registration.auth-columns--with-external {
        grid-template-columns:
            minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    }
}

.add-student {
    padding: 1rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--paper-sunk);
}

/* ---------------------------------------------------------------- progress */

.progress {
    margin-block: 1.5rem;
}

.progress-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    font-weight: 600;
    color: var(--ink-muted);
    margin-block-end: 0.5rem;
}

.progress-summary__current {
    display: none;
    color: var(--ink);
}

.progress-bar {
    display: none;
    inline-size: 100%;
    block-size: 0.55rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--paper-sunk);
    accent-color: var(--brand);

    &::-webkit-progress-bar { background: var(--paper-sunk); }
    &::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
    &::-moz-progress-bar { background: var(--brand); border-radius: 999px; }
}

.progress-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-muted);
}

.progress-step__number {
    display: grid;
    place-items: center;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border-radius: 999px;
    border: 1px solid currentcolor;
    font-size: 0.8rem;
    font-weight: 700;
    flex: none;
}

.progress-step--current {
    color: var(--ink);
    font-weight: 700;

    & .progress-step__number {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--brand-ink);
    }
}

.progress-step--complete {
    color: var(--success);
}

.progress-step__form { margin: 0; }

.progress-step__link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------- events */

.event-list {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    padding: 0;
    list-style: none;
}

.event-section {
    margin-block-start: 2rem;

    & > h2 { margin-block-end: 0.75rem; }
}

.event-list--compact { grid-template-columns: 1fr; }

.event-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    transition: border-color 140ms ease, box-shadow 140ms ease, translate 140ms ease;

    & h3 { margin-block-start: 0; }

    &:has(a:hover) {
        border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
        box-shadow: var(--shadow-md);
        translate: 0 -0.1rem;
    }
}

.event-card--muted {
    background: var(--paper-sunk);
    color: var(--ink-muted);
}

.event-card__meta {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.92rem;
    color: var(--ink-muted);
}

/* ---------------------------------------------------------------- picker */

.picker {
    display: grid;
    gap: 2rem;
    align-items: start;
}

registration-catalog-filter {
    display: block;
    min-inline-size: 0;
}

.catalog-toolbar {
    margin-block-end: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-sunk);
}

.catalog-toolbar__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: end;

    & .field {
        min-inline-size: min(12rem, 100%);
        margin: 0;
    }
}

.catalog-toolbar__count {
    display: block;
    margin-block-start: 0.6rem;
    color: var(--ink-muted);
    font-size: 0.9rem;
}

.catalog-empty { margin-block: 1rem; }

.child-required {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-inline-size: 52rem;
    border-inline-start-color: var(--brand);
    background: var(--brand-soft);

    & p { margin: 0.2rem 0 0; }
}

.checkout-children {
    max-inline-size: 52rem;

    & > h3 { margin-block-end: 0.5rem; }
}

.checkout-children__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;

    & > li {
        display: grid;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--paper);
    }

    & span {
        color: var(--ink-muted);
        font-size: 0.9rem;
    }
}

.checkout-add-child {
    max-inline-size: 52rem;
}

.checkout-add-child__summary {
    font-weight: 700;
}

/*
 * The cart becomes a sticky sidebar only when there is room for one. Below this breakpoint it
 * stays in the normal flow, with the fixed cart bar keeping it reachable below a long catalog.
 */
@media (min-width: 60rem) {
    .picker {
        grid-template-columns: 1fr 20rem;
    }

    .picker--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .cart-summary {
        position: sticky;
        inset-block-start: 1rem;
    }
}

.offering-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
    container-type: inline-size;
    align-items: start;
}

.offering-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);

    & > form,
    & > .offering-card__chooser { margin-block-start: auto; }
}

.offering-card[hidden] { display: none; }

/*
 * Sold out stays visible and moves to the end (ADR-001 [P6]); it is dimmed, not hidden. The
 * ordering is done server-side — CSS `order` would leave the tab sequence wrong.
 */
.offering-card--sold-out {
    background: var(--paper-sunk);

    & .offering-card__image { filter: grayscale(1); opacity: 0.6; }
    & .offering-card__title { color: var(--ink-muted); }
}

.offering-card__image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    border-radius: calc(var(--radius) - 2px);
    background: var(--paper-sunk);
}

.offering-card__title { margin: 0; }

.offering-card__subtitle {
    margin: 0;
    color: var(--ink-muted);
}

.offering-card__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.6rem;
    margin: 0;
    font-size: 0.92rem;

    & dt { font-weight: 600; color: var(--ink-muted); }
    & dd { margin: 0; }
}

.offering-card__description { font-size: 0.95rem; }

.offering-card__availability { margin: 0; }

.offering-card__chooser {
    border-block-start: 1px solid var(--line);

    & > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-block: 0.75rem 0.25rem;
        color: var(--brand);
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

    & > summary::-webkit-details-marker { display: none; }
    & > summary::marker { content: ""; }
    & > summary::after {
        content: "+";
        display: grid;
        place-items: center;
        inline-size: 1.6rem;
        block-size: 1.6rem;
        border-radius: 50%;
        flex: none;
        background: var(--brand-soft);
        font-size: 1.15rem;
        line-height: 1;
    }

    &[open] > summary::after { content: "−"; }
}

.offering-card__expanded {
    display: grid;
    gap: 0.85rem;
    padding-block-start: 0.75rem;

    & > .offering-card__description {
        max-block-size: 18rem;
        overflow-y: auto;
        padding-inline-end: 0.35rem;
    }

    .offering-card__expanded--direct {
        margin-block-start: auto;
        border-block-start: 1px solid var(--line);
    }
}

.pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--success-bg);
    color: var(--success);
}

.pill--low {
    background: var(--warn-bg);
    color: var(--warn);
}

.pill--sold-out {
    background: var(--danger-bg);
    color: var(--danger);
}

.pill--warning {
    background: var(--warn-bg);
    color: var(--warn);
}

.pill--test {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid currentcolor;
}

/* A neutral state marker — "switched off" is not a warning, it is somebody's deliberate choice. */
.pill--muted {
    background: var(--paper-sunk);
    color: var(--ink-muted);
    border: 1px solid var(--line);
}

.add-form {
    display: grid;
    gap: 0.25rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--line);

    & .field { margin-block-end: 0.6rem; max-width: none; }
}

/* ---------------------------------------------------------------- cart */

registration-cart-action,
registration-async-edit,
registration-complete-registration {
    display: contents;
}

.cart-summary {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-sunk);

    & h3 { margin-block-start: 0; }
}

.mobile-cart-bar { display: none; }

@media (max-width: 59.99rem) {
    .mobile-cart-bar {
        position: fixed;
        z-index: 25;
        inset-inline: 0.75rem;
        inset-block-end: 0.75rem;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.05rem 0.75rem;
        align-items: center;
        min-block-size: 3.5rem;
        padding: 0.55rem 0.8rem;
        border: 1px solid color-mix(in oklab, var(--brand) 65%, var(--line));
        border-radius: 0.85rem;
        background: color-mix(in oklab, var(--paper) 94%, transparent);
        color: var(--ink);
        text-decoration: none;
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(0.5rem);

        & > span:first-child {
            font-weight: 700;
        }

        & > span:nth-child(2) {
            grid-column: 1;
            color: var(--ink-muted);
            font-size: 0.8rem;
        }

        & > strong {
            grid-column: 2;
            grid-row: 1 / span 2;
            color: var(--brand);
            font-variant-numeric: tabular-nums;
        }
    }

    body:has(.mobile-cart-bar) {
        padding-block-end: 4.75rem;
    }

    #cart-heading {
        scroll-margin-block-start: 1rem;
    }
}

.cart-summary__continue {
    margin-block-start: 1rem;
}

.cart-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.cart-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.5rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--line);
    font-size: 0.95rem;

    & form { grid-column: 1 / -1; }
}

.cart-line__student,
.cart-line__release,
.cart-line__option,
.cart-line__addons,
.cart-line__qty {
    display: block;
    color: var(--ink-muted);
    font-size: 0.88rem;
}

.cart-line__price { font-variant-numeric: tabular-nums; }

.cart-line__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.cart-line__quantity {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    & input {
        inline-size: 4.5rem;
    }
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- flow bits */

.step { max-width: none; }

.waiver-items,
.chaperone-links,
.confirmation-items {
    padding-inline-start: 1.25rem;
    display: grid;
    gap: 0.4rem;
}

.waiver-text {
    max-height: 24rem;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-sunk);
}

.accommodation-row { max-width: 34rem; }

.payment-form { max-width: 34rem; }

.payment-layout,
.payment-summary,
.payment-details {
    min-inline-size: 0;
}

.payment-layout--stripe-pending > .payment-summary,
.payment-layout--stripe-mounted > .payment-summary {
    display: none;
}

registration-stripe-checkout,
registration-stripe-launch {
    display: block;
}

/* ---------------------------------------------------------------- tables */

.table-scroll {
    position: relative;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    contain: inline-size paint;

    &:focus-visible {
        outline: 3px solid var(--brand);
        outline-offset: 2px;
    }
}

.table-scroll--overflow::after {
    position: sticky;
    inset-inline-start: 0;
    display: block;
    inline-size: fit-content;
    max-inline-size: calc(100vw - 3rem);
    padding: 0.25rem 0.5rem;
    border-inline-start: 3px solid var(--brand);
    background: var(--brand-soft);
    color: var(--ink-muted);
    content: attr(data-overflow-label);
    font-size: 0.78rem;
}

.data-table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block: 1rem;
    font-size: 0.95rem;

    & th, & td {
        padding: 0.55rem 0.6rem;
        border-block-end: 1px solid var(--line);
        text-align: start;
        vertical-align: top;
    }

    & thead th {
        background: var(--paper-sunk);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    & .numeric {
        text-align: end;
        font-variant-numeric: tabular-nums;
    }

    & tfoot th, & tfoot td { font-weight: 700; }
}

.row--canceled {
    color: var(--ink-muted);
    text-decoration: line-through;
}

/*
 * Row actions. Separating them with a middot forces every conditional link to also decide whether
 * to bring a separator, which is how a row ends up starting or ending with a stray dot once the
 * links are permission-gated.
 */
.cell-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    white-space: nowrap;
}

/* A table that has nothing in it yet still has to say what to do next. */
.empty-state {
    padding-block: 1.5rem;
    color: var(--ink-muted);
    text-align: center;
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*
 * Invoices and rosters are printed for offline use, so printing has to produce a document rather
 * than a screenshot of the application. Navigation is screen furniture; .no-print marks anything
 * else a page wants dropped.
 */
.print-only { display: none; }

@media print {
    .site-header, .site-footer, .progress, .step-nav, .skip-link, .no-print { display: none; }

    .shell { max-width: none; padding: 0; }

    /* Table borders survive the trip; background fills usually do not. */
    .data-table { border-collapse: collapse; }
    .data-table th, .data-table td { border: 1px solid #000; }

    /* A row split across a page break is a child whose name is on one sheet and grade on the next. */
    .data-table tr { break-inside: avoid; }
    .data-table thead { display: table-header-group; }

    a[href]::after { content: ""; }

    /* Print-only content is the inverse of .no-print: the event name and sheet type, which are in
       the page chrome on screen and have to survive onto paper that ends up in a pile. */
    .print-only { display: block; }

    .invoice-header {
        margin-block-end: 1.5rem;
        border-block-end: 2px solid #000;
    }

    .invoice-header h1 { margin-block-end: 0.75rem; }

    .invoice-meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-block: 0 1rem;
    }

    .invoice-meta div { break-inside: avoid; }
    .invoice-meta dt { font-weight: 700; }
    .invoice-meta dd { margin: 0.2rem 0 0; }

    .invoice-customer {
        margin-block-end: 1rem;
    }

    .invoice-customer h2 {
        margin-block: 0 0.35rem;
        font-size: 1rem;
    }

}


/* ---------------------------------------------------------------- panels */


.panel {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);

    & > h2, & > h3 { margin-block-start: 0; }
}

.panel--disclosure {
    padding: 0;
    overflow: clip;

    & > .panel__summary {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-block-end: 1px solid transparent;
        list-style: none;
        cursor: pointer;
        background: var(--brand-soft);
    }

    & > .panel__summary::-webkit-details-marker,
    & > .panel__summary::marker {
        display: none;
        content: "";
    }

    & > .panel__summary::after {
        content: "";
        flex: none;
        inline-size: 0.6rem;
        block-size: 0.6rem;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        color: var(--ink-muted);
        transform: rotate(45deg);
        transition: transform 120ms ease;
    }

    &[open] > .panel__summary {
        border-block-end-color: color-mix(in oklab, var(--brand) 25%, var(--line));
    }

    &[open] > .panel__summary::after {
        transform: rotate(225deg);
    }

    & > .panel__summary > h2 {
        margin: 0;
        font-size: 1.15rem;
    }

    & > .panel__body {
        min-inline-size: 0;
        padding: 1rem;
    }
}


.site-embed__play-icon {
    display: grid;
    place-items: center;
    flex: 0 0 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--brand-ink);
    background: var(--brand);
}


.highlight,
.highlight--yellow { background: light-dark(#fff1a8, #4d430f); }
.highlight--mint { background: light-dark(#c9f3d5, #163f27); }
.highlight--sky { background: light-dark(#cde9ff, #173852); }
.highlight--rose { background: light-dark(#ffd5df, #4b2631); }


/* Label plus its explanatory line, stacked beside the radio rather than after it in the flex row. */
.release-option__text {
    display: grid;
    gap: 0.15rem;
    min-inline-size: 0;

    & > label { font-weight: 400; }
}


/* --------------------------------------------------------------- money input */

/*
 * The dollar sign sits inside the field rather than in the label, because the question an organizer
 * is answering while typing is "what units is this?" and the answer has to be where their eye is.
 */
.money-input {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    max-inline-size: 12rem;

    &:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }

    & > input {
        border: 0;
        background: transparent;
        padding-inline-start: 0;

        /* The wrapper draws the focus ring; two of them nested looks like a rendering bug. */
        &:focus { outline: none; }
    }
}

.money-input__symbol {
    padding-inline: 0.7rem 0.15rem;
    color: var(--ink-muted);
    font-weight: 600;
    line-height: 1;
}

.donation-amount__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
}

registration-donation-amount:not(:defined) .donation-amount__suggestions {
    display: none;
}

.donation-amount__suggestion {
    min-block-size: 2.75rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;

    &:hover {
        border-color: var(--brand);
        background: var(--brand-soft);
    }

    &[aria-pressed="true"] {
        border-color: var(--brand);
        background: var(--brand);
        color: var(--brand-ink);
    }
}


/* Label and box on one line, for a checkbox that is not a whole form field. */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;

    & input { margin-block-start: 0; }
}

/* One selectable option — a radio or checkbox with its own explanatory line underneath. */
.choice {
    display: flex;
    align-items: start;
    gap: 0.5rem;
    padding-block: 0.3rem;
}


.auth-column {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);

    & > h2 { margin-block-start: 0; }
}

/* A flex item in `.progress-step`; without this a long step name overflows instead of wrapping. */
.progress-step__label { min-inline-size: 0; }



/* ----------------------------------------------- building blocks (library) */

/*
 * The one-sentence answer to "what is this page for", under the h1. List pages for unfamiliar
 * records need one, and without a class they were each inventing their own margin.
 */
.lede {
    max-inline-size: 62ch;
    margin-block: -0.35rem 1.25rem;
    color: var(--ink-muted);
}


/* Several single-button forms that should read as one row rather than one per line. */
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    & > form { display: contents; }
}


/* One waiver's worth of blocks on the parent-facing step, when a cart carries more than one. */
.waiver-form {
    margin-block-end: 1.5rem;

    & + .waiver-form {
        padding-block-start: 1.25rem;
        border-block-start: 1px solid var(--line);
    }
}

/*
 * The waiting list, as the family sees it. One row per child per activity, because that is how the
 * queue actually works: two children waiting for the same club are two places, and an opening
 * promotes exactly one of them. Rows with a live offer are pulled to the top and given the accent
 * treatment — an offer expires, so it is the only thing on this page with a clock on it.
 */
.waitlist-panel {
    margin-block: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-sunk);
}

.waitlist-panel > h3 {
    margin-block: 0 0.75rem;
}

.waitlist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.waitlist-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.waitlist-item--offered {
    border-color: var(--brand);
    box-shadow: inset 0.25rem 0 0 var(--brand);
}

.waitlist-item__detail {
    min-width: 14rem;
    flex: 1 1 18rem;
}

.waitlist-item__title {
    margin: 0;
    font-weight: 600;
}

.waitlist-item__status {
    margin: 0.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

/* Side by side so "Take the place" and "Give it up" cannot be mistaken for one another. */
.waitlist-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 40rem) {
    .site-header > .site-header__bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem;
        padding-block: 0.65rem;
    }

    .site-header > .site-header__bar--with-menu {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .brand {
        min-inline-size: 0;
        font-size: 1rem;

        & > span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .site-header__bar--with-menu > .brand {
        grid-column: 2;
    }

    .site-header__bar > nav[aria-label] {
        grid-column: -2;
        justify-self: end;
        inline-size: auto;
    }

    .account-nav {
        justify-content: end;
        gap: 0.5rem;
    }

    .account-menu > summary {
        max-inline-size: none;
        padding: 0.45rem;

        &::after {
            display: none;
        }
    }

    .account-menu__identity,
    .account-sign-in__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .account-nav .account-sign-in {
        max-inline-size: none;
        padding: 0.45rem;
    }

    .account-menu__panel {
        max-inline-size: calc(100vw - 2rem);
    }

    .progress {
        margin-block: 1.1rem;
    }

    .progress-bar { display: block; }
    .progress-steps { display: none; }
    .progress-summary__current { display: inline; }

    .catalog-toolbar__fields {
        display: grid;
        grid-template-columns: 1fr 1fr;

        & .field { min-inline-size: 0; }
        & .button { grid-column: 1 / -1; justify-self: start; }
    }

    .offering-card {
        display: grid;
        grid-template-columns: 6.25rem minmax(0, 1fr);
        gap: 0.5rem 0.75rem;

        & > .offering-card__image {
            grid-column: 1;
            grid-row: 1 / span 3;
            aspect-ratio: 1;
        }

        & > .offering-card__title,
        & > .offering-card__subtitle,
        & > .offering-card__availability {
            grid-column: 2;
        }

        & > .offering-card__facts,
        & > .offering-card__chooser {
            grid-column: 1 / -1;
        }

        &:not(:has(> .offering-card__image)) {
            grid-template-columns: 1fr;

            & > * { grid-column: 1; }
        }
    }

    .offering-card__facts {
        padding-block-start: 0.35rem;
        border-block-start: 1px solid var(--line);
    }

    .offering-card__expanded > .offering-card__description {
        max-block-size: 14rem;
    }

    .child-required {
        align-items: stretch;

        & .button { text-align: center; }
    }

    .table-scroll {
        inline-size: 100%;
        scrollbar-gutter: stable;
        border-block-end: 1px solid var(--line);
    }

    .table-scroll > .data-table {
        inline-size: max-content;
        min-inline-size: 100%;
    }

    .site-footer > .shell {
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------------------------
   Raw-HTML page bodies and protected embeds.

   The scope container is half of the raw-mode contract: the CSS scoper rewrites every authored
   selector to start with `.site-raw-body[data-orgcart-scope="..."]`, and these rules make that
   prefix mean something. `isolation` and `position: relative` give absolutely positioned author
   content this box to resolve against instead of the page, and `contain: layout` stops a wide
   float or a tall grid inside from reflowing the shell around it. `position: fixed` and
   `sticky` never survive the scoper, so nothing in here can cover the header or a payment form.
   -------------------------------------------------------------------------------------------- */
.site-raw-body {
    position: relative;
    isolation: isolate;
    contain: layout;
    max-inline-size: 100%;
    overflow-wrap: break-word;
}

.site-raw-body img {
    max-inline-size: 100%;
    block-size: auto;
}

.site-embed {
    display: block;
    margin-block: 1rem;
    max-inline-size: 100%;
}

.site-embed--component iframe {
    display: block;
    inline-size: 100%;
    border: 0;
    max-inline-size: 100%;
}

/* Responsive by construction: a fixed-size component keeps its aspect ratio and shrinks on a
   phone rather than forcing a horizontal scrollbar across the whole page. */
.site-embed--component[data-mode="fixed"] iframe {
    inline-size: 100%;
}

.site-embed--video {
    margin: 1rem 0;
}

.site-embed--video iframe {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--site-video-ratio, 16 / 9);
    border: 0;
}


/* --------------------------------------------------------------------------------------------
   Public website pages.

   Reuses the shared design system rather than starting a second one: `.prose` carries the table
   treatment and image clamp that authored content needs. Public page bodies deliberately use the
   full shell width rather than the narrower reading measure used by short prose elsewhere.
   -------------------------------------------------------------------------------------------- */
.site-page {
    display: grid;
    gap: 1rem;
    min-inline-size: 0;
}

.site-page__title {
    margin-block: 0 0.25rem;
}

.site-page__body {
    inline-size: 100%;
    min-inline-size: 0;
    max-width: 100%;
}

/*
 * `.prose` already removes the first authored block's top margin. Embedded application surfaces
 * carry their own vertical rhythm one level deeper, so suppress that nested start margin only when
 * the embed is the first managed page-body item. The title/layout gap remains the sole separation.
 */
.site-page__body.prose > .site-embed:first-child > :first-child {
    margin-block-start: 0;
}

/* A refusal and a 404 are short, centred, and deliberately calm: the person reading either has
   done nothing wrong, and a wall of red would suggest otherwise. */
.site-page--refusal,
.site-page--missing {
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-block: 2rem;
    text-align: center;
}

.site-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.site-page__membership {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * A managed link whose target has been archived, unpublished, or deleted. The renderer points it at
 * nothing and flags it rather than leaving it aimed at a path that is now a tombstone; this makes
 * the flag visible, because a link that silently 404s is a link nobody reports.
 */
.site-raw-body a[data-orgcart-link-unresolved],
.prose a[data-orgcart-link-unresolved] {
    color: var(--ink-muted);
    text-decoration: line-through;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------------------------
   The isolated preview shell.

   Outside /admin by design, so the banner is the only thing that says this is not the live page.
   It has to survive whatever the authored chrome does, which is why it sits above the header
   rather than inside it.
   -------------------------------------------------------------------------------------------- */
.preview-banner {
    background: color-mix(in oklab, var(--brand) 12%, var(--paper));
    border-block-end: 2px solid var(--brand);
    padding-block: 0.75rem;
}

.preview-banner__title {
    margin: 0;
    font-weight: 700;
}

.preview-banner__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.preview-banner__detail {
    margin-block: 0.25rem 0;
    color: var(--ink-muted);
}

.preview-banner__state {
    margin-block: 0.6rem;
}

.preview-banner__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.preview-banner__scheme {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
    margin-block-start: 0.5rem;
    color: var(--ink-muted);
    font-size: 0.9rem;

    & > div {
        display: inline-flex;
        gap: 0.2rem;
    }
}

.preview-banner__scheme-button {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: inherit;
    background: var(--paper);
    font: inherit;
    cursor: pointer;

    &[aria-pressed="true"] {
        border-color: var(--brand);
        color: var(--brand-ink);
        background: var(--brand);
    }
}

.preview-banner__facts {
    margin-block: 0.5rem 0;
    padding-inline-start: 1.25rem;
    color: var(--ink-muted);

    &:empty { display: none; }
}

.theme-preview-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    padding: .65rem max(1rem, calc((100% - 76rem) / 2));
    border-block-end: 1px solid var(--line);
    background: var(--paper);
    font-size: .9rem;
}

.theme-preview-controls > div {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .65rem;
    align-items: center;
}

.theme-preview-controls a[aria-current="page"] {
    font-weight: 800;
    text-decoration-thickness: 3px;
}

.site-preview--theme {
    display: flex;
    min-inline-size: 0;
    min-block-size: 100dvh;
    flex-direction: column;
    overflow-x: hidden;
}

.theme-preview-stage {
    display: block;
    flex: 1 0 max(40rem, calc(100dvh - 12rem));
    inline-size: 100%;
    min-inline-size: 0;
    block-size: max(40rem, calc(100dvh - 12rem));
    margin-inline: auto;
    border: 0;
    background: var(--paper-sunk);
}

.theme-preview-stage--phone {
    inline-size: 390px;
    box-shadow: 0 0 0 1px var(--line);
}

.site-theme-root[data-theme-preview-scheme="light"] {
    color-scheme: only light;
}

.site-theme-root[data-theme-preview-scheme="dark"] {
    color-scheme: only dark;
}

registration-site-preview-sources {
    position: relative;
    display: block;
    min-block-size: 100dvh;
}

.site-embed--calendar {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
}

.site-preview-sources__layer {
    position: absolute;
    z-index: 10000;
    inset: 0;
    pointer-events: none;
}

.site-preview-source-box {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #087f8c;
    border-radius: 0.25rem;
    background: rgb(8 127 140 / 14%);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 80%);
    pointer-events: none;
}

.site-preview-source-box--fallback {
    border-style: dashed;
    background: rgb(8 127 140 / 5%);
}

.site-preview-source-box__badge {
    position: absolute;
    inset-block-start: 0.2rem;
    inset-inline-start: 0.2rem;
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    max-inline-size: calc(100% - 0.4rem);
    border: 1px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    background: #075b63;
    box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
    font: 700 0.75rem/1.25 system-ui, sans-serif;
    pointer-events: auto;

    & > span {
        overflow: hidden;
        padding: 0.2rem 0.5rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.site-preview-source-box__edit {
    display: inline-grid;
    min-inline-size: 1.8rem;
    min-block-size: 1.8rem;
    border-inline-start: 1px solid rgb(255 255 255 / 60%);
    color: #ffffff;
    place-items: center;

    &:hover {
        color: #062f33;
        background: #ffffff;
    }
}

.site-preview-source-placeholder {
    border: 2px dashed rgb(8 127 140 / 65%) !important;
    border-radius: 0.25rem !important;
    background: rgb(8 127 140 / 6%) !important;
}

.theme-preview-frame-document {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.theme-preview-stale {
    margin: .75rem auto;
    max-inline-size: 76rem;
}

/*
 * The nested checkout-flow frame authored surfaces embed (see .checkout-flow in the transaction
 * surface fixture, and the admin flow preview page it mirrors). Shared here rather than kept
 * admin-only so the same sizing applies wherever this class is drawn, including inside the visitor
 * and theme preview stage, which never loads admin.css. 500px is a floor so the checkout steps
 * remain usable even in a short viewport; the vh term lets a taller viewport show more of the flow.
 */
.flow-preview-frame {
    width: 100%;
    min-height: max(500px, 75vh);
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

/* ── Primary menu ────────────────────────────────────────────────────────────
 *
 * The flyouts work with the script blocked: :hover and :focus-within open a panel, which covers a
 * mouse and a keyboard. The component adds click and tap, Escape, and arrow movement, and it says
 * so through aria-expanded — which is why the open rule keys off that attribute as well.
 */
.primary-menu {
    background: var(--paper);
    border-block-end: 1px solid var(--line);
}

.primary-menu-drawer {
    display: block;
}

.primary-menu-toggle,
.primary-menu-drawer__close,
.primary-menu-backdrop {
    display: none;
}

.primary-menu-toggle,
.primary-menu-drawer__close {
    align-items: center;
    justify-content: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: inherit;
    cursor: pointer;
}

.primary-menu-toggle > span,
.primary-menu-toggle > span::before,
.primary-menu-toggle > span::after {
    display: block;
    inline-size: 1.15rem;
    block-size: 2px;
    border-radius: 999px;
    background: currentColor;
}

.primary-menu-toggle > span {
    position: relative;
}

.primary-menu-toggle > span::before,
.primary-menu-toggle > span::after {
    position: absolute;
    inset-inline-start: 0;
    content: "";
}

.primary-menu-toggle > span::before { inset-block-start: -0.38rem; }
.primary-menu-toggle > span::after { inset-block-start: 0.38rem; }

.primary-menu-drawer__close > span,
.primary-menu-drawer__close > span::after {
    display: block;
    inline-size: 1.15rem;
    block-size: 2px;
    border-radius: 999px;
    background: currentColor;
    rotate: 45deg;
}

.primary-menu-drawer__close > span::after {
    content: "";
    rotate: 90deg;
}

.primary-menu-toggle:focus-visible,
.primary-menu-drawer__close:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.site-header .primary-menu {
    border-block-end: 0;
    background: transparent;
}

.primary-menu__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    max-inline-size: 76rem;
    margin: 0 auto;
    padding: 0.35rem var(--gap);
    list-style: none;
}

.primary-menu__item > a,
.primary-menu__item > button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.2rem;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.primary-menu__item > a:hover,
.primary-menu__item > button:hover,
.primary-menu__item > a:focus-visible,
.primary-menu__item > button:focus-visible {
    text-decoration: underline;
}

.primary-menu__image {
    display: block;
    block-size: auto;
    max-block-size: 3rem;
    inline-size: auto;
}

.primary-menu__separator {
    inline-size: 1px;
    block-size: 1.2rem;
    background: var(--line-strong);
}

.primary-menu__flyout {
    position: relative;
}

.primary-menu__flyout-panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 20;
    display: none;
    min-inline-size: 12rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

menu-flyout:not(.menu-flyout--enhanced) .primary-menu__flyout:hover > .primary-menu__flyout-panel,
menu-flyout:not(.menu-flyout--enhanced) .primary-menu__flyout:focus-within > .primary-menu__flyout-panel,
menu-flyout.menu-flyout--enhanced .primary-menu__flyout-panel:not([hidden]) {
    display: block;
}

.primary-menu__flyout-panel a,
.primary-menu__flyout-panel button {
    display: block;
    inline-size: 100%;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 0.4rem;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    text-decoration: none;
}

.primary-menu__flyout-panel a:hover,
.primary-menu__flyout-panel a:focus-visible {
    background: var(--brand-soft);
}

.primary-menu__flyout-panel .primary-menu__separator {
    inline-size: auto;
    block-size: 1px;
    margin: 0.3rem 0.4rem;
}

@media (max-width: 40rem) {
    .primary-menu__list {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-menu__flyout-panel {
        position: static;
        display: block;
        border: 0;
        box-shadow: none;
        padding-inline-start: 1rem;
    }

    .responsive-navigation-enhanced .primary-menu-toggle,
    .responsive-navigation-enhanced .primary-menu-drawer__close {
        display: inline-flex;
    }

    .responsive-navigation-enhanced .primary-menu-drawer {
        position: fixed;
        z-index: 50;
        inset-block: 0;
        inset-inline-start: 0;
        display: block;
        inline-size: min(22rem, calc(100vw - 3rem));
        padding: 1rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--paper);
        box-shadow: var(--shadow-md);
        visibility: hidden;
        translate: -100% 0;
        transition:
            translate 180ms ease,
            visibility 0s linear 180ms;
    }

    .responsive-navigation-enhanced .primary-menu-drawer--open {
        visibility: visible;
        translate: 0 0;
        transition-delay: 0s;
    }

    .responsive-navigation-enhanced .primary-menu-drawer__close {
        margin-inline-start: auto;
        margin-block-end: 0.75rem;
    }

    .responsive-navigation-enhanced .primary-menu {
        border: 0;
    }

    .responsive-navigation-enhanced .primary-menu__list {
        padding: 0;
    }

    .responsive-navigation-enhanced .primary-menu-backdrop {
        position: fixed;
        z-index: 40;
        inset: 0;
        display: block;
        border: 0;
        background: rgb(0 0 0 / 45%);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 180ms ease,
            visibility 0s linear 180ms;
    }

    .responsive-navigation-enhanced .primary-menu-backdrop--open {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    body.navigation-drawer-open {
        overflow: hidden;
    }
}

@media (max-width: 40rem) and (prefers-reduced-motion: reduce) {
    .responsive-navigation-enhanced .primary-menu-drawer,
    .responsive-navigation-enhanced .primary-menu-backdrop {
        transition: none;
    }
}

menu-flyout.menu-flyout--enhanced .primary-menu__flyout-panel[hidden] {
    display: none;
}

/* ── Authored chrome slots ───────────────────────────────────────────────── */
.site-header__content,
.site-footer__content {
    padding-block: 0.5rem;
}

.site-header__content > :first-child,
.site-footer__content > :first-child {
    margin-block-start: 0;
}

.site-header__content > :last-child,
.site-footer__content > :last-child {
    margin-block-end: 0;
}

/* ---------------------------------------------------------------- front page */
/*
 * The structured front page. Code-owned, so a site with no theme still gets a coherent front page
 * and a theme that stops validating degrades to something readable rather than to a stack of
 * unstyled sections. A theme restyles these regions through its own stylesheet; nothing here needs
 * a theme to be present.
 *
 * No inline SVG and no generated imagery: every picture on this page is a managed library asset an
 * author chose, which is what keeps "what is on the front page?" answerable from the media index.
 */
.home {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.home__eyebrow {
    margin: 0 0 0.25rem;
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.home__hero {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
}

.home__hero-heading {
    margin: 0 0 0.5rem;
    font-size: clamp(1.9rem, 5vw, 3rem);
}

.home__hero-body {
    max-inline-size: var(--measure);
}

.home__hero-body > :first-child { margin-block-start: 0; }
.home__hero-body > :last-child { margin-block-end: 0; }

.home__hero-media {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius);
    /* Never taller than the viewport: a portrait photograph must not push the words off the page. */
    max-block-size: 60vh;
    object-fit: cover;
}

/* Words first in the source order, and first on a narrow screen. The image moves beside them only
   where there is room, so the reading order and the visual order agree at every width. */
@media (min-width: 48rem) {
    .home__hero--feature {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .home__hero--feature .home__hero-media {
        grid-column: 2;
        grid-row: 1;
    }

    .home__hero--feature .home__hero-text {
        grid-column: 1;
        grid-row: 1;
    }
}

.home__hero--banner {
    position: relative;
    padding: clamp(1.25rem, 4vw, 3rem);
    border-radius: var(--radius);
    background: var(--brand-soft);
}

.home__hero--banner .home__hero-media {
    max-block-size: 22rem;
}

.home__hero--quiet {
    justify-items: start;
    padding-block: clamp(1rem, 3vw, 2.5rem);
}

.home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block: 1rem 0;
}

/* A managed link whose target stopped resolving is not a link any more. It keeps its words so the
   sentence still reads, and stops looking clickable. */
.home__actions a[data-orgcart-link-unresolved] {
    color: var(--ink-muted);
    background: var(--paper-sunk);
    border-color: var(--line);
    pointer-events: none;
}

/* ── Coming up ───────────────────────────────────────────────────────────── */
.home__upcoming {
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.home__upcoming-heading { margin-block-start: 0; }

.home__upcoming-intro {
    max-inline-size: var(--measure);
    color: var(--ink-muted);
}

.home__upcoming-list {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.home__upcoming-item {
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--line);

    /* The category colour is one of several signals, never the only one: the title and the date
       carry the meaning on their own. */
    border-inline-start: 4px solid var(--calendar-event-line, var(--line-strong));
    padding-inline-start: 0.75rem;
}

.home__upcoming-item:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

.home__upcoming-when {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.9rem;
}

.home__upcoming-time { margin-inline-start: 0.5rem; }

.home__upcoming-title {
    margin: 0.15rem 0 0;
    font-weight: 600;
}

.home__upcoming-pinned {
    margin-inline-start: 0.5rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.home__upcoming-category {
    margin: 0.1rem 0 0;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.home__upcoming-empty { color: var(--ink-muted); }

.home__upcoming-all { margin-block-end: 0; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.home__card-list {
    display: grid;
    /* auto-fit rather than a fixed column count: two cards should not leave a gap where a third
       would have gone, and six should not become a six-column row on a wide display. */
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home__card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: clamp(0.9rem, 2vw, 1.4rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.home__card-heading { margin: 0; }

.home__card-body { color: var(--ink); }

.home__card-body > :first-child { margin-block-start: 0; }
.home__card-body > :last-child { margin-block-end: 0; }

.home__card-media {
    inline-size: 100%;
    block-size: auto;
    max-block-size: 14rem;
    border-radius: calc(var(--radius) - 0.2rem);
    object-fit: cover;
}

.home__card .home__actions { margin-block-start: auto; }

/* The accent is a border weight and a tint, never colour alone. */
.home__card--brand { border-color: var(--brand); border-inline-start-width: 4px; }
.home__card--warm { border-color: var(--warn); border-inline-start-width: 4px; }
.home__card--cool { border-color: var(--line-strong); border-inline-start-width: 4px; }

.home__card--compact { gap: 0.2rem; font-size: 0.95rem; }

@media (min-width: 48rem) {
    .home__card--wide { grid-column: span 2; }
}

/* ── Widgets ─────────────────────────────────────────────────────────────── */
.home__widgets {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.home__widget > * { inline-size: 100%; }

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .home__card {
        transition: border-color 120ms ease, box-shadow 120ms ease;
    }

    .home__card:hover {
        border-color: var(--line-strong);
        box-shadow: var(--shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home__card {
        transition: none;
    }
}
.site-theme-root{--theme-accent:#d4523d;--theme-accent-action:#ad3f2f;--theme-accent-action-dark:#ff9b83;--theme-accent-dark:#ff9b83;--theme-accent-ink:#fffaf0;--theme-accent-ink-dark:#2f2a22;--theme-border:#74634b;--theme-border-dark:#9b8063;--theme-border-strong:#2f2a22;--theme-border-strong-dark:#f6ead5;--theme-brand:#3a688a;--theme-brand-dark:#3a688a;--theme-brand-ink:#fffaf0;--theme-brand-ink-dark:#1d1711;--theme-brand-soft:#dcebe4;--theme-brand-soft-dark:#24483e;--theme-calendar:#e4f2ed;--theme-calendar-dark:#203b34;--theme-calendar-ink:#245648;--theme-calendar-ink-dark:#c5eee1;--theme-control:#f7efdf;--theme-control-dark:#342e27;--theme-danger:#a52b26;--theme-danger-dark:#ff9b92;--theme-danger-surface:#fff0ed;--theme-danger-surface-dark:#41201d;--theme-focus:#075fbe;--theme-focus-dark:#8fc8ff;--theme-form:#fffdf8;--theme-form-dark:#211e1a;--theme-ink:#2f2a22;--theme-ink-dark:#f6ead5;--theme-marigold:#f1bc44;--theme-marigold-dark:#ffd36a;--theme-muted:#6c5b45;--theme-muted-dark:#cebfa9;--theme-paper:#fffaf0;--theme-paper-dark:#1d1711;--theme-river:#5eb2a0;--theme-river-dark:#82d3c2;--theme-selection:#f1bc44;--theme-selection-dark:#765d14;--theme-success:#2d6f46;--theme-success-dark:#8bd4a8;--theme-success-surface:#edf7ef;--theme-success-surface-dark:#1f3828;--theme-surface:#fffaf0;--theme-surface-dark:#241c15;--theme-surface-deep:#ead5a8;--theme-surface-deep-dark:#4a3826;--theme-surface-muted:#f5ead3;--theme-surface-muted-dark:#352b20;--theme-warning:#805800;--theme-warning-dark:#f3ca67;--theme-warning-surface:#fff6d9;--theme-warning-surface-dark:#3a301d;}
.site-theme-root{color-scheme:light dark;--paper:light-dark(var(--theme-paper), var(--theme-paper-dark));--paper-warm:light-dark(var(--theme-surface-muted), var(--theme-surface-muted-dark));--paper-deep:light-dark(var(--theme-surface-deep), var(--theme-surface-deep-dark));--ink:light-dark(var(--theme-ink), var(--theme-ink-dark));--ink-muted:light-dark(var(--theme-muted), var(--theme-muted-dark));--line:light-dark(var(--theme-border), var(--theme-border-dark));--line-strong:light-dark(var(--theme-border-strong), var(--theme-border-strong-dark));--panel-line:color-mix(in srgb, var(--line) 35%, transparent);--event-rule:color-mix(in srgb, var(--line) 55%, transparent);--brand:light-dark(var(--theme-brand), var(--theme-brand-dark));--brand-ink:light-dark(var(--theme-brand-ink), var(--theme-brand-ink-dark));--brand-soft:light-dark(var(--theme-brand-soft), var(--theme-brand-soft-dark));--marigold:light-dark(var(--theme-marigold), var(--theme-marigold-dark));--river:light-dark(var(--theme-river), var(--theme-river-dark));--grid-line:light-dark(rgb(116 99 75 / 8%), rgb(246 234 213 / 8%));--focus:light-dark(var(--theme-focus), var(--theme-focus-dark));--danger:light-dark(var(--theme-danger), var(--theme-danger-dark));--danger-bg:light-dark(var(--theme-danger-surface), var(--theme-danger-surface-dark));--success:light-dark(var(--theme-success), var(--theme-success-dark));--success-bg:light-dark(var(--theme-success-surface), var(--theme-success-surface-dark));--warn:light-dark(var(--theme-warning), var(--theme-warning-dark));--warn-bg:light-dark(var(--theme-warning-surface), var(--theme-warning-surface-dark));--bulletin-surface:light-dark(var(--theme-surface), var(--theme-surface-dark));--bulletin-form:light-dark(var(--theme-form), var(--theme-form-dark));--bulletin-control:light-dark(var(--theme-control), var(--theme-control-dark));--bulletin-selection:light-dark(var(--theme-selection), var(--theme-selection-dark));--bulletin-accent:light-dark(var(--theme-accent), var(--theme-accent-dark));--bulletin-accent-readable:light-dark(
    var(--theme-accent-action),
    var(--theme-accent-dark));--bulletin-action:light-dark(var(--theme-accent-action), var(--theme-accent-action-dark));--bulletin-action-ink:light-dark(var(--theme-accent-ink), var(--theme-accent-ink-dark));--bulletin-calendar:light-dark(var(--theme-calendar), var(--theme-calendar-dark));--bulletin-calendar-ink:light-dark(var(--theme-calendar-ink), var(--theme-calendar-ink-dark));--calendar-event-bg:var(--bulletin-calendar);--calendar-event-fg:var(--bulletin-calendar-ink);--calendar-event-line:var(--brand);--focus-color:var(--focus);--radius:.35rem;--gap:clamp(1rem, 2.4vw, 1.5rem);--measure:68ch;--bulletin-panel-shadow:6px 7px 0 color-mix(in srgb, var(--line) 18%, transparent);--bulletin-card-shadow:4px 4px 0 color-mix(in srgb, var(--line) 16%, transparent);--shadow-sm:var(--bulletin-card-shadow);--shadow-md:var(--bulletin-panel-shadow);accent-color:var(--brand);background-color:var(--paper-warm);color:var(--ink);font-family:Arial, Helvetica, sans-serif;}
.site-theme-root ::selection{background-color:var(--bulletin-selection);color:var(--ink);}
.site-theme-root .bulletin-site{display:flex;flex-direction:column;background-color:var(--paper-warm);background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);background-size:26px 26px;}
.site-theme-root .bulletin-site main.shell{inline-size:min(100%, 76rem);padding-top:clamp(1rem, 3vw, 2.75rem);padding-right:clamp(1rem, 4vw, 2.5rem);padding-bottom:clamp(1rem, 3vw, 2.75rem);padding-left:clamp(1rem, 4vw, 2.5rem);background-color:rgba(0, 0, 0, 0);}
.site-theme-root .bulletin-site h1,.site-theme-root .bulletin-site h2,.site-theme-root .bulletin-site h3{margin-block-start:0;margin-block-end:0;color:var(--ink);font-family:Georgia, "Times New Roman", serif;letter-spacing:-0.025em;}
.site-theme-root .bulletin-site h1{font-size:clamp(2rem, 5vw, 4rem);line-height:1;}
.site-theme-root .bulletin-site h2{font-size:clamp(1.45rem, 3vw, 2rem);line-height:1.1;}
.site-theme-root .bulletin-site h3{font-size:clamp(1.1rem, 2vw, 1.3rem);}
.site-theme-root .bulletin-site :is(h1, h2, h3)+*{margin-block-start:0.65rem;}
.site-theme-root .bulletin-site *+:is(h2, h3){margin-block-start:1.75rem;}
.site-theme-root .bulletin-site :is(p, ul, ol, dl){margin-block-start:0;margin-block-end:1rem;}
.site-theme-root .bulletin-site a{color:var(--bulletin-accent-readable);text-decoration-thickness:0.08em;text-underline-offset:0.2em;}
.site-theme-root .bulletin-site :focus-visible{outline-width:0.2rem;outline-style:solid;outline-color:var(--focus);outline-offset:0.15rem;}
.site-theme-root .bulletin-site :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea){min-block-size:2.75rem;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line-strong);border-right-color:var(--line-strong);border-bottom-color:var(--line-strong);border-left-color:var(--line-strong);background-color:var(--bulletin-form);color:var(--ink);caret-color:var(--focus);}
.site-theme-root .bulletin-site textarea{min-block-size:8rem;}
.site-theme-root .bulletin-site :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):disabled{background-color:var(--bulletin-control);color:var(--ink-muted);}
.site-theme-root .bulletin-site .button{display:inline-flex;align-items:center;justify-content:center;min-block-size:2.75rem;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--ink);border-right-color:var(--ink);border-bottom-color:var(--ink);border-left-color:var(--ink);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;border-bottom-left-radius:0.25rem;background-color:var(--bulletin-action);color:var(--bulletin-action-ink);box-shadow:3px 3px 0 var(--ink);text-align:center;white-space:normal;}
.site-theme-root .bulletin-site .button:hover{background-color:color-mix(in srgb, var(--bulletin-action) 88%, var(--ink));}
.site-theme-root .bulletin-site .button--secondary{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line-strong);border-right-color:var(--line-strong);border-bottom-color:var(--line-strong);border-left-color:var(--line-strong);background-color:rgba(0, 0, 0, 0);color:var(--ink);}
.site-theme-root .bulletin-site .button--secondary:hover{background-color:var(--bulletin-control);}
.site-theme-root .bulletin-site .button--danger{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--danger);border-right-color:var(--danger);border-bottom-color:var(--danger);border-left-color:var(--danger);background-color:rgba(0, 0, 0, 0);color:var(--danger);}
.site-theme-root .bulletin-site .button--danger:hover{background-color:var(--danger-bg);}
.site-theme-root .bulletin-site :is(.admin-actions, .home__actions, .site-page__actions){column-gap:0.65rem;row-gap:;}
.site-theme-root .bulletin-site :is(.notice, .validation-summary, .empty-state){padding-top:clamp(.85rem, 2vw, 1.15rem);padding-right:clamp(.85rem, 2vw, 1.15rem);padding-bottom:clamp(.85rem, 2vw, 1.15rem);padding-left:clamp(.85rem, 2vw, 1.15rem);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;border-bottom-left-radius:0.25rem;box-shadow:none;}
.site-theme-root .bulletin-site .field-validation-error{color:var(--danger);font-weight:700;}
.site-theme-root .bulletin-site .muted,.site-theme-root .bulletin-site .field-hint,.site-theme-root .bulletin-site .catalog-toolbar__count,.site-theme-root .bulletin-site .calendar-surface__empty{color:var(--ink-muted);}
.site-theme-root .bulletin-stripe{block-size:0.5rem;background-image:repeating-linear-gradient(
    90deg,
    var(--bulletin-accent) 0 8%,
    var(--marigold) 8% 16%,
    var(--brand) 16% 24%);}
.site-theme-root .bulletin-header{border-block-end-width:3px;border-block-end-style:double;border-block-end-color:var(--line-strong);background-color:color-mix(in srgb, var(--paper) 92%, transparent);}
.site-theme-root .bulletin-header__bar{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;column-gap:1rem;row-gap:;inline-size:min(100%, 76rem);margin-inline-start:auto;margin-inline-end:auto;padding-top:1rem;padding-right:clamp(1rem, 4vw, 2.5rem);padding-bottom:0.85rem;padding-left:clamp(1rem, 4vw, 2.5rem);}
.site-theme-root .bulletin-header__identity{display:flex;min-inline-size:0;align-items:center;column-gap:clamp(.75rem, 2vw, 1.5rem);row-gap:;}
.site-theme-root .bulletin-header__branding{display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-rows:auto auto;min-inline-size:0;flex-grow:1;flex-shrink:1;flex-basis:auto;row-gap:0;column-gap:0.6rem;}
.site-theme-root .bulletin-header .brand{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-column-start:1;grid-column-end:-1;grid-row-start:1;grid-row-end:-1;row-gap:inherit;column-gap:inherit;min-inline-size:0;color:var(--ink);font-family:Georgia, "Times New Roman", serif;font-size:clamp(1.25rem, 2.8vw, 2rem);font-weight:700;letter-spacing:-0.035em;z-index:1;}
.site-theme-root .bulletin-header .brand__mark{grid-column-start:1;grid-column-end:auto;grid-row-start:1;grid-row-end:-1;align-self:center;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--ink);border-right-color:var(--ink);border-bottom-color:var(--ink);border-left-color:var(--ink);border-top-left-radius:48%;border-top-right-radius:52%;border-bottom-right-radius:54%;border-bottom-left-radius:46%;background-color:var(--brand);box-shadow:3px 3px 0 var(--marigold);rotate:-4deg;}
.site-theme-root .bulletin-header .brand>span{grid-column-start:2;grid-column-end:auto;grid-row-start:1;grid-row-end:auto;align-self:end;}
.site-theme-root .bulletin-masthead{grid-column-start:2;grid-column-end:auto;grid-row-start:2;grid-row-end:auto;align-self:start;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-inline-start:0.5rem;color:var(--brand);font-size:0.76rem;font-weight:800;letter-spacing:0.08em;line-height:1.25;text-transform:uppercase;z-index:0;}
.site-theme-root .bulletin-masthead-image{display:block;max-block-size:4rem;max-inline-size:11rem;object-fit:contain;}
.site-theme-root .bulletin-header :is(.primary-menu-toggle, .primary-menu-drawer__close){min-inline-size:2.75rem;min-block-size:2.75rem;}
.site-theme-root .bulletin-header .account-nav{column-gap:0.5rem;row-gap:;}
.site-theme-root .bulletin-header :is(.account-sign-in, .account-menu>summary){min-block-size:2.75rem;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--ink);border-right-color:var(--ink);border-bottom-color:var(--ink);border-left-color:var(--ink);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;border-bottom-left-radius:0.25rem;background-color:var(--bulletin-action);color:var(--bulletin-action-ink);box-shadow:3px 3px 0 var(--ink);}
.site-theme-root .bulletin-header :is(.account-sign-in, .account-menu>summary):hover{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--ink);border-right-color:var(--ink);border-bottom-color:var(--ink);border-left-color:var(--ink);background-color:color-mix(in srgb, var(--bulletin-action) 88%, var(--ink));}
.site-theme-root .bulletin-header .account-menu__panel{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line);border-right-color:var(--line);border-bottom-color:var(--line);border-left-color:var(--line);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;border-bottom-left-radius:0.25rem;background-color:var(--paper);box-shadow:var(--bulletin-card-shadow);}
.site-theme-root .bulletin-header__navigation{border-block-start-width:1px;border-block-end-width:1px;border-block-start-style:solid;border-block-end-style:solid;border-block-start-color:var(--line);border-block-end-color:var(--line);background-color:var(--paper-warm);}
.site-theme-root .bulletin-header .primary-menu__list{column-gap:0.55rem;row-gap:;inline-size:min(100%, 76rem);padding-top:0.6rem;padding-right:clamp(1rem, 4vw, 2.5rem);padding-bottom:0.6rem;padding-left:clamp(1rem, 4vw, 2.5rem);}
.site-theme-root .bulletin-header .primary-menu__item>:is(a, button){min-block-size:2.75rem;padding-top:0.5rem;padding-right:0.9rem;padding-bottom:0.5rem;padding-left:0.9rem;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line);border-right-color:var(--line);border-bottom-color:var(--line);border-left-color:var(--line);border-top-left-radius:0.18rem;border-top-right-radius:0.18rem;border-bottom-right-radius:0.18rem;border-bottom-left-radius:0.18rem;background-color:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--paper-deep);font-weight:700;text-decoration-color:initial;text-decoration-style:initial;text-decoration-line:none;}
.site-theme-root .bulletin-header .primary-menu__item>:is(a, button):hover{border-top-color:;border-right-color:;border-bottom-color:;border-left-color:;background-color:var(--brand-soft);color:var(--bulletin-accent-readable);text-decoration-color:initial;text-decoration-style:initial;text-decoration-line:none;}
.site-theme-root .bulletin-header .primary-menu__item>[aria-current="page"]{border-top-color:;border-right-color:;border-bottom-color:;border-left-color:;background-color:color-mix(
    in srgb,
    var(--bulletin-selection) 35%,
    var(--paper));color:var(--bulletin-accent-readable);box-shadow:2px 2px 0 var(--line-strong);}
.site-theme-root .bulletin-header .primary-menu__flyout-panel{min-inline-size:15rem;padding-top:0.5rem;padding-right:0.5rem;padding-bottom:0.5rem;padding-left:0.5rem;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line-strong);border-right-color:var(--line-strong);border-bottom-color:var(--line-strong);border-left-color:var(--line-strong);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;border-bottom-left-radius:0.25rem;background-color:var(--paper);box-shadow:var(--bulletin-card-shadow);}
.site-theme-root .bulletin-header .primary-menu__flyout-panel :is(a, button){min-block-size:2.75rem;padding-top:0.65rem;padding-right:0.75rem;padding-bottom:0.65rem;padding-left:0.75rem;}
.site-theme-root .bulletin-header .primary-menu__flyout-panel [aria-current="page"]{color:var(--bulletin-accent-readable);background-color:var(--brand-soft);font-weight:800;}
.site-theme-root .bulletin-header__dateline{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:0.35rem;row-gap:1rem;inline-size:min(100%, 76rem);margin-inline-start:auto;margin-inline-end:auto;padding-top:0.5rem;padding-right:clamp(1rem, 4vw, 2.5rem);padding-bottom:0.5rem;padding-left:clamp(1rem, 4vw, 2.5rem);color:var(--bulletin-accent-readable);font-size:0.76rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;}
.site-theme-root .bulletin-header__content,.site-theme-root .bulletin-footer__content,.site-theme-root .bulletin-footer__note{inline-size:min(100%, 76rem);margin-inline-start:auto;margin-inline-end:auto;padding-inline-start:clamp(1rem, 4vw, 2.5rem);padding-inline-end:clamp(1rem, 4vw, 2.5rem);}
.site-theme-root .bulletin-header__content{padding-block-start:0.35rem;padding-block-end:0.35rem;}
.site-theme-root .bulletin-header__content:empty,.site-theme-root .bulletin-footer__content:empty,.site-theme-root .bulletin-footer__note:empty,.site-theme-root .bulletin-region:empty{min-block-size:0;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;border-top-style:initial;border-right-style:initial;border-bottom-style:initial;border-left-style:initial;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;}
.site-theme-root .bulletin-page,.site-theme-root .bulletin-surface,.site-theme-root .bulletin-home{min-inline-size:0;padding-top:clamp(1.15rem, 3vw, 2.5rem);padding-right:clamp(1.15rem, 3vw, 2.5rem);padding-bottom:clamp(1.15rem, 3vw, 2.5rem);padding-left:clamp(1.15rem, 3vw, 2.5rem);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--panel-line);border-right-color:var(--panel-line);border-bottom-color:var(--panel-line);border-left-color:var(--panel-line);background-color:var(--paper);box-shadow:var(--bulletin-panel-shadow);}
.site-theme-root .bulletin-page__heading{margin-block-end:clamp(1.25rem, 3vw, 2rem);padding-block-end:clamp(.75rem, 2vw, 1.25rem);border-block-end-width:3px;border-block-end-style:double;border-block-end-color:var(--line-strong);}
.site-theme-root .bulletin-page__body{min-inline-size:0;}
.site-theme-root .bulletin-page__body>:is(h2, h3),.site-theme-root .bulletin-page__body>:is(.site-page__body, .prose)>:is(h2, h3){margin-block-start:1.75em;margin-block-end:0.55em;}
.site-theme-root .bulletin-page__body>:is(h2, h3):first-child,.site-theme-root .bulletin-page__body>:is(.site-page__body, .prose)>:is(h2, h3):first-child{margin-block-start:0;}
.site-theme-root .bulletin-page__body>:is(ul, ol),.site-theme-root .bulletin-page__body>:is(.site-page__body, .prose)>:is(ul, ol){padding-inline-start:1.4rem;}
.site-theme-root .bulletin-home{display:grid;column-gap:clamp(1.25rem, 3vw, 2.25rem);row-gap:;}
.site-theme-root .bulletin-home__hero{padding-block-end:clamp(1.25rem, 3vw, 2.25rem);border-block-end-width:3px;border-block-end-style:double;border-block-end-color:var(--line-strong);}
.site-theme-root .bulletin-home__hero .home__hero-heading{max-inline-size:16ch;font-size:clamp(2.1rem, 5vw, 4rem);line-height:0.95;letter-spacing:-0.04em;}
.site-theme-root .bulletin-home__hero .home__eyebrow{color:var(--bulletin-accent-readable);font-size:0.75rem;font-weight:900;letter-spacing:0.13em;text-transform:uppercase;}
.site-theme-root .bulletin-home__columns{display:grid;grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);column-gap:clamp(1.25rem, 4vw, 2.75rem);row-gap:;}
.site-theme-root .bulletin-home__columns--without-sidebar{grid-template-columns:minmax(0, 1fr);}
.site-theme-root .bulletin-home__stories{min-inline-size:0;}
.site-theme-root .bulletin-home__rail{min-inline-size:0;padding-top:clamp(1rem, 2vw, 1.4rem);padding-right:clamp(1rem, 2vw, 1.4rem);padding-bottom:clamp(1rem, 2vw, 1.4rem);padding-left:clamp(1rem, 2vw, 1.4rem);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line);border-right-color:var(--line);border-bottom-color:var(--line);border-left-color:var(--line);background-color:var(--paper-warm);}
.site-theme-root .bulletin-highlight-boxes{display:flex;flex-wrap:wrap;align-items:stretch;column-gap:clamp(.8rem, 2vw, 1.25rem);row-gap:;margin-block-start:clamp(.8rem, 2vw, 1.25rem);}
.site-theme-root .bulletin-highlight-box{min-inline-size:0;flex-basis:0;}
.site-theme-root .bulletin-highlight-box>.bulletin-region{display:flex;flex-direction:column;justify-content:center;block-size:100%;padding-top:clamp(1rem, 2vw, 1.4rem);padding-right:clamp(1rem, 2vw, 1.4rem);padding-bottom:clamp(1rem, 2vw, 1.4rem);padding-left:clamp(1rem, 2vw, 1.4rem);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--panel-line);border-right-color:var(--panel-line);border-bottom-color:var(--panel-line);border-left-color:var(--panel-line);border-inline-start-width:0.5rem;border-inline-start-style:solid;border-inline-start-color:var(--bulletin-accent);background-color:var(--paper);box-shadow:var(--bulletin-card-shadow);}
.site-theme-root .bulletin-highlight-box--first>.bulletin-region{border-inline-start-color:var(--marigold);}
.site-theme-root .bulletin-highlight-box--second>.bulletin-region{border-inline-start-color:var(--bulletin-accent);}
.site-theme-root .bulletin-highlight-box--third>.bulletin-region{border-inline-start-color:var(--brand);}
.site-theme-root .bulletin-highlight-box__eyebrow{margin-block-end:0.55rem;color:var(--bulletin-accent-readable);font-size:0.72rem;font-weight:900;letter-spacing:0.11em;text-transform:uppercase;}
.site-theme-root .bulletin-highlight-box__content>:last-child{margin-block-end:0;}
.site-theme-root .bulletin-highlight-box--units-1{flex-grow:1;}
.site-theme-root .bulletin-highlight-box--units-2{flex-grow:2;}
.site-theme-root .bulletin-highlight-box--units-3{flex-grow:3;}
.site-theme-root .bulletin-highlight-box--units-4{flex-grow:4;}
.site-theme-root .bulletin-highlight-box--units-5{flex-grow:5;}
.site-theme-root .bulletin-highlight-box--units-6{flex-grow:6;}
.site-theme-root .bulletin-highlight-box--units-7{flex-grow:7;}
.site-theme-root .bulletin-highlight-box--units-8{flex-grow:8;}
.site-theme-root .bulletin-highlight-box--units-9{flex-grow:9;}
.site-theme-root .bulletin-highlight-box--units-10{flex-grow:10;}
.site-theme-root .bulletin-highlight-box--units-11{flex-grow:11;}
.site-theme-root .bulletin-highlight-box--units-12{flex-grow:12;}
.site-theme-root .bulletin-region{min-inline-size:0;}
.site-theme-root .bulletin-region>:first-child{margin-block-start:0;}
.site-theme-root .bulletin-region>:last-child{margin-block-end:0;}
.site-theme-root .bulletin-calendar .calendar-surface{container-type:inline-size;}
.site-theme-root .bulletin-calendar :is(.calendar-picker, .calendar-overflow, .calendar-agenda__card){border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line);border-right-color:var(--line);border-bottom-color:var(--line);border-left-color:var(--line);background-color:var(--paper);box-shadow:var(--bulletin-card-shadow);}
.site-theme-root .bulletin-calendar :is(.calendar-grid__day--today, .calendar-picker__month[aria-current="true"]){background-color:var(--bulletin-calendar);color:var(--bulletin-calendar-ink);}
.site-theme-root .bulletin-catalog :is(.catalog-toolbar, .offering-card, .cart-summary){border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line);border-right-color:var(--line);border-bottom-color:var(--line);border-left-color:var(--line);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;border-bottom-left-radius:0.25rem;background-color:var(--paper-warm);box-shadow:var(--bulletin-card-shadow);}
.site-theme-root .bulletin-catalog .offering-card{padding-top:clamp(1rem, 2vw, 1.4rem);padding-right:clamp(1rem, 2vw, 1.4rem);padding-bottom:clamp(1rem, 2vw, 1.4rem);padding-left:clamp(1rem, 2vw, 1.4rem);}
.site-theme-root .bulletin-account{max-inline-size:54rem;margin-inline-start:auto;margin-inline-end:auto;}
.site-theme-root .bulletin-account :is(form, fieldset){min-inline-size:0;}
.site-theme-root .bulletin-account section:not(.panel, .notice, .auth-column)>:is(h2, h3):first-child,.site-theme-root .bulletin-account>.panel{margin-block-start:clamp(1.75rem, 4vw, 2.5rem);}
.site-theme-root .bulletin-account :is(.panel, .account-panel){padding-top:clamp(1rem, 3vw, 1.75rem);padding-right:clamp(1rem, 3vw, 1.75rem);padding-bottom:clamp(1rem, 3vw, 1.75rem);padding-left:clamp(1rem, 3vw, 1.75rem);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line);border-right-color:var(--line);border-bottom-color:var(--line);border-left-color:var(--line);background-color:var(--paper-warm);box-shadow:var(--bulletin-card-shadow);}
.site-theme-root .bulletin-transaction{max-inline-size:68rem;margin-inline-start:auto;margin-inline-end:auto;}
.site-theme-root .bulletin-transaction :is(.cart-summary, .checkout-summary, .receipt-summary){padding-top:clamp(1rem, 3vw, 1.75rem);padding-right:clamp(1rem, 3vw, 1.75rem);padding-bottom:clamp(1rem, 3vw, 1.75rem);padding-left:clamp(1rem, 3vw, 1.75rem);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line);border-right-color:var(--line);border-bottom-color:var(--line);border-left-color:var(--line);background-color:var(--paper-warm);box-shadow:var(--bulletin-card-shadow);}
.site-theme-root .bulletin-transaction :is(.payment-details, .payment-summary, .checkout-children){min-inline-size:0;padding-top:clamp(1rem, 2.5vw, 1.5rem);padding-right:clamp(1rem, 2.5vw, 1.5rem);padding-bottom:clamp(1rem, 2.5vw, 1.5rem);padding-left:clamp(1rem, 2.5vw, 1.5rem);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--line);border-right-color:var(--line);border-bottom-color:var(--line);border-left-color:var(--line);background-color:var(--paper-warm);}
.site-theme-root .bulletin-refusal{max-inline-size:var(--measure);margin-inline-start:auto;margin-inline-end:auto;padding-block-start:clamp(2rem, 8vw, 5rem);padding-block-end:clamp(2rem, 8vw, 5rem);text-align:center;}
.site-theme-root .bulletin-refusal .site-page__actions{justify-content:center;}
.site-theme-root .bulletin-footer{margin-block-start:auto;border-block-start-width:3px;border-block-start-style:double;border-block-start-color:var(--line-strong);background-color:var(--paper-deep);}
.site-theme-root .bulletin-footer__content{padding-block-start:1.5rem;padding-block-end:0.75rem;}
.site-theme-root .bulletin-footer__note{margin-block-start:0;margin-block-end:0;padding-block-start:0.5rem;padding-block-end:0.5rem;color:var(--ink-muted);font-family:Georgia, "Times New Roman", serif;font-style:italic;}
.site-theme-root .bulletin-footer a{color:var(--ink);font-weight:700;}
@media (max-width: 64rem){
.site-theme-root .bulletin-home__columns{grid-template-columns:minmax(0, 1fr);}
}
@media (max-width: 40rem){
.site-theme-root .bulletin-header__bar{grid-template-columns:auto minmax(0, 1fr) auto;column-gap:0.6rem;row-gap:;padding-block-start:0.75rem;padding-block-end:0.75rem;}
.site-theme-root .bulletin-header__bar>.primary-menu-toggle{grid-column-start:1;grid-column-end:auto;}
.site-theme-root .bulletin-header__identity{grid-column-start:2;grid-column-end:auto;align-items:center;column-gap:0.35rem;row-gap:;}
.site-theme-root .bulletin-header__branding{display:flex;flex-direction:column;}
.site-theme-root .bulletin-header .brand{display:inline-flex;}
.site-theme-root .bulletin-header__account{grid-column-start:3;grid-column-end:auto;}
.site-theme-root .bulletin-masthead{position:absolute;inline-size:1px;block-size:1px;padding-inline-start:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.site-theme-root .bulletin-header .brand{font-size:1rem;}
.site-theme-root .bulletin-header .brand>span{overflow:visible;text-overflow:clip;white-space:normal;}
.site-theme-root .bulletin-header .brand__mark{inline-size:1.8rem;block-size:1.8rem;}
.site-theme-root .bulletin-header .account-nav{flex-wrap:nowrap;}
.site-theme-root .bulletin-header :is(.account-sign-in, .account-menu>summary){max-inline-size:3rem;min-inline-size:2.75rem;justify-content:center;}
.site-theme-root .bulletin-header :is(.account-sign-in, .account-menu>summary) .account-menu__identity{overflow:hidden;inline-size:1px;block-size:1px;clip-path:inset(50%);white-space:nowrap;}
.site-theme-root .bulletin-header .primary-menu-drawer{background-color:var(--paper);}
.site-theme-root .bulletin-header .primary-menu__list{column-gap:0;row-gap:;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;}
.site-theme-root .bulletin-header .primary-menu__item>:is(a, button){inline-size:100%;padding-inline-start:0.75rem;padding-inline-end:0.75rem;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;border-top-style:initial;border-right-style:initial;border-bottom-style:initial;border-left-style:initial;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:rgba(0, 0, 0, 0);box-shadow:none;}
.site-theme-root .bulletin-header .primary-menu__item>:is(a, button):hover{border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;border-top-style:initial;border-right-style:initial;border-bottom-style:initial;border-left-style:initial;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;background-color:rgba(0, 0, 0, 0);text-decoration-color:initial;text-decoration-style:initial;text-decoration-line:underline;text-decoration-thickness:0.14em;}
.site-theme-root .bulletin-header .primary-menu__item>[aria-current="page"]{border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;border-top-style:initial;border-right-style:initial;border-bottom-style:initial;border-left-style:initial;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;background-color:rgba(0, 0, 0, 0);box-shadow:inset 0 -.2rem 0 var(--bulletin-accent);}
.site-theme-root .bulletin-header .primary-menu__flyout-panel{min-inline-size:0;padding-inline-start:1rem;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;border-top-style:initial;border-right-style:initial;border-bottom-style:initial;border-left-style:initial;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;background-color:var(--paper-warm);}
.site-theme-root .bulletin-header__dateline{padding-block-start:0.4rem;padding-block-end:0.4rem;}
.site-theme-root .bulletin-site main.shell{padding-top:0.75rem;padding-right:0.75rem;padding-bottom:0.75rem;padding-left:0.75rem;}
.site-theme-root .bulletin-page,.site-theme-root .bulletin-surface,.site-theme-root .bulletin-home{padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem;box-shadow:none;}
.site-theme-root .bulletin-home__hero .home__hero-heading{font-size:clamp(2rem, 12vw, 3.2rem);}
.site-theme-root .bulletin-highlight-box{flex-basis:100%;}
}
@media print{
.site-theme-root .bulletin-site:has(.invoice-header){color-scheme:light;background-color:var(--paper);background-image:none;color:var(--ink);}
.site-theme-root .bulletin-site:has(.invoice-header) .bulletin-header :is(.primary-menu-toggle, .bulletin-header__navigation, .bulletin-header__account){display:none;}
.site-theme-root .bulletin-site:has(.invoice-header) .bulletin-header__bar{grid-template-columns:minmax(0, 1fr);padding-inline-start:0;padding-inline-end:0;}
.site-theme-root .bulletin-site:has(.invoice-header) main.shell{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;}
.site-theme-root .bulletin-site:has(.invoice-header) :is(.bulletin-page, .bulletin-surface, .bulletin-home){padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;border-top-style:initial;border-right-style:initial;border-bottom-style:initial;border-left-style:initial;border-top-color:initial;border-right-color:initial;border-bottom-color:initial;border-left-color:initial;box-shadow:none;}
}
@media (prefers-reduced-motion: reduce){
.site-theme-root .bulletin-site *,.site-theme-root .bulletin-site *::before,.site-theme-root .bulletin-site *::after{scroll-behavior:auto;transition-duration:0.01ms;animation-duration:0.01ms;animation-iteration-count:1;}
}
.site-theme-root :focus-visible{outline:3px solid Highlight!important;outline:3px auto -webkit-focus-ring-color!important;outline-offset:2px!important}
.skip-link:focus{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;clip-path:none!important}
.site-theme-root .field-validation-error,.site-theme-root .validation-summary-errors,.site-theme-root .notice--error{display:block!important;visibility:visible!important;opacity:1!important}
.site-theme-root [hidden]{display:none!important}
.site-theme-root button,.site-theme-root [type=submit],.site-theme-root .button{pointer-events:auto!important;visibility:visible!important;opacity:1!important}
.site-theme-root[data-theme-preview-scheme=light]{color-scheme:only light!important}
.site-theme-root[data-theme-preview-scheme=dark]{color-scheme:only dark!important}
.site-theme-root nav a,.site-theme-root .primary-menu a{pointer-events:auto!important}