/* ==========================================================================
   St. Matthew Athletic Association — shared stylesheet
   Used by index.html and every sport page.
   Edit brand values here only; nothing else should hard-code colors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand core */
    --maroon:        #782F40;
    --maroon-dark:   #5C232F;
    --maroon-light:  #8D4555;
    --gold:          #C5B783;

    /* Accessible gold variants.
       --gold fails contrast as text on white (1.9:1), so it is decoration only.
       Use --gold-deep for text on light, --gold-bright for text on maroon. */
    --gold-deep:     #6B5A28;   /* 6.5:1 on white  */
    --gold-bright:   #E0D5AE;   /* 6.2:1 on maroon */

    --ink:           #2C2A29;
    --ink-soft:      #55514F;
    --birch:         #D6D2C4;
    --paper:         #FAF9F7;
    --line:          #E4E0D8;

    /* Season accents — muted and brand-adjacent so they never fight the maroon */
    --summer:        #C08A2E;
    --fall:          #9C4A28;
    --winter:        #4A6A7A;
    --spring:        #5B7A4A;

    /* Status */
    --open:          #2F6B43;
    --open-bg:       #E7F1EA;
    --closed:        #6E6A67;
    --closed-bg:     #EFEDEA;
    --soon:          #6B5A28;   /* gold-deep — a confirmed date that has not arrived */
    --soon-bg:       #F5F1E2;

    /* Scale */
    --wrap:          1160px;
    --wrap-narrow:   760px;
    --radius:        14px;
    --radius-sm:     8px;
    --shadow:        0 1px 2px rgba(44,42,41,.06), 0 4px 14px rgba(44,42,41,.07);
    --shadow-lift:   0 2px 6px rgba(44,42,41,.08), 0 14px 34px rgba(44,42,41,.12);

    --nav-h:         68px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }

/* Stop lines ending on one or two orphaned words.
   `balance` evens out the line lengths of short blocks — headings, ledes,
   section intros — so a two-line paragraph splits down the middle instead of
   dumping "address." on its own. It is capped by browsers at a handful of
   lines, so `pretty` does the long-form work: it only pulls a word down to
   avoid a lonely last line, which is far cheaper on a wall of body copy.
   Both degrade to ordinary wrapping where unsupported. */
h1, h2, h3, h4,
.lede, .section-head p, .kicker, .eyebrow,
.tile p, .value p, .promise p, .detail h3, .job p, .stat-l {
    text-wrap: balance;
}
.prose p, .prose li,
.policy-list li, .req-body p, .tick-list span,
.form-note, .field-error, .shift-note, .signup-note, .minutes-summary {
    text-wrap: pretty;
}
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a  { color: var(--maroon); }

/* Visible, consistent keyboard focus everywhere */
:focus-visible {
    outline: 3px solid var(--gold-deep);
    outline-offset: 2px;
    border-radius: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--maroon);
    color: #fff;
    padding: 12px 20px;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

.wrap        { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 20px; }

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

/* --------------------------------------------------------------------------
   3. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--maroon);
    box-shadow: 0 1px 0 rgba(255,255,255,.10), 0 2px 14px rgba(0,0,0,.16);
}

.nav-bar {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
    min-height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: #fff;
    padding: 10px 0;
}
.brand img { width: 40px; height: 40px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: -.01em;
}
.brand-sub {
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--radius-sm);
    color: #fff;
    padding: 9px 12px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.nav-toggle:hover { background: rgba(255,255,255,.10); }
.nav-toggle svg { width: 18px; height: 18px; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-menu a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: .97rem;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    transition: background .18s ease, color .18s ease;
}
.nav-menu a:hover { background: rgba(255,255,255,.12); color: var(--gold-bright); }
.nav-menu a[aria-current="page"] {
    color: var(--gold-bright);
    box-shadow: inset 0 -2px 0 var(--gold);
}
.nav-cta a {
    background: var(--gold);
    color: var(--maroon-dark) !important;
    font-weight: 700;
}
.nav-cta a:hover { background: var(--gold-bright); }

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .nav-menu {
        display: none;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--maroon-dark);
        padding: 8px 12px 16px;
        border-top: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 14px 24px rgba(0,0,0,.22);
    }
    .nav-menu.is-open { display: flex; }
    .nav-menu a {
        padding: 14px 12px;
        border-radius: 0;
        border-bottom: 1px solid rgba(255,255,255,.10);
        font-size: 1.02rem;
    }
    .nav-cta a { margin-top: 10px; border-radius: var(--radius-sm); text-align: center; }
    .site-header { position: relative; }
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background:
        radial-gradient(120% 90% at 78% 8%, rgba(197,183,131,.30) 0%, rgba(197,183,131,0) 55%),
        linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 62%, #461B25 100%);
    color: #fff;
    padding: clamp(56px, 9vw, 104px) 0 clamp(52px, 8vw, 92px);
    overflow: hidden;
}
/* Soft diagonal gold sweep.
   Deliberately over-extended past the top and bottom of the hero so its own
   edges fall outside the (overflow:hidden) box. Previously it began partway
   down the hero, and that hard top edge read as a visible line across the
   gradient. Left and right edges are safe because the gradient itself starts
   and ends fully transparent. */
.hero::after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 40%;
    right: -10%;
    background: linear-gradient(105deg, transparent 0%, rgba(197,183,131,.10) 50%, transparent 100%);
    transform: skewX(-14deg);
    pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }

/* Brand guidelines p.22: the athletics mark is used directly on maroon —
   no containing shape, no ring, no drop shadow. */
:root { --hero-logo: clamp(160px, 17vw, 216px); }

.hero-grid {
    display: grid;
    grid-template-columns: var(--hero-logo) 1fr;
    gap: clamp(22px, 4vw, 44px);
    align-items: center;
}
.hero-logo {
    width: var(--hero-logo);
    height: var(--hero-logo);
}
.hero-logo img { width: 100%; height: 100%; object-fit: contain; }

.hero h1 {
    /* "St. Matthew Mustangs" sits on one line at desktop widths and wraps
       naturally on narrow screens rather than being forced. */
    font-size: clamp(1.9rem, 5.1vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -.035em;
    margin-bottom: 12px;
    text-wrap: balance;
}
.hero .kicker {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}
.hero .lede {
    font-size: clamp(1.02rem, 2.1vw, 1.22rem);
    color: var(--birch);
    max-width: 52ch;
    margin-bottom: 26px;
}

@media (max-width: 720px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    :root { --hero-logo: clamp(140px, 42vw, 180px); }
    .hero .lede { margin-left: auto; margin-right: auto; }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 720px) { .btn-row { justify-content: center; } }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary   { background: var(--gold); color: var(--maroon-dark); box-shadow: 0 6px 18px rgba(0,0,0,.24); }
.btn-primary:hover { background: var(--gold-bright); box-shadow: 0 10px 26px rgba(0,0,0,.3); }

.btn-ghost     { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn-solid     { background: var(--maroon); color: #fff; box-shadow: var(--shadow); }
.btn-solid:hover { background: var(--maroon-light); box-shadow: var(--shadow-lift); }

.btn-outline   { background: #fff; color: var(--maroon); border-color: var(--line); box-shadow: var(--shadow); }
.btn-outline:hover { border-color: var(--maroon); }

/* On a maroon section, the solid button is maroon-on-maroon and disappears.
   Give it the same gold treatment the hero uses. */
.section-maroon .btn-solid { background: var(--gold); color: var(--maroon-dark); }
.section-maroon .btn-solid:hover { background: var(--gold-bright); }

/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */
.section        { padding: clamp(56px, 8vw, 92px) 0; }
.section-paper  { background: var(--paper); }
.section-maroon { background: var(--maroon); color: #fff; }
.section-maroon h2 { color: #fff; }
.section-maroon p  { color: var(--birch); }

.section-head { max-width: 58ch; margin: 0 auto clamp(32px, 5vw, 52px); text-align: center; }
.section-head h2 {
    font-size: clamp(1.75rem, 4.2vw, 2.6rem);
    color: var(--maroon);
    margin-bottom: 12px;
}
.section-maroon .section-head h2 { color: var(--gold-bright); }
.section-head p {
    color: var(--ink-soft);
    font-size: 1.06rem;
    /* Narrower than the block so a centred paragraph cannot end on a single
       orphaned word. See the text-wrap rules in section 3. */
    max-width: 52ch;
    margin-inline: auto;
}
.section-maroon .section-head p { color: var(--birch); }

.eyebrow {
    display: block;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 10px;
}
.section-maroon .eyebrow { color: var(--gold); }

/* --------------------------------------------------------------------------
   7. Welcome / prose block
   -------------------------------------------------------------------------- */
.prose { font-size: 1.09rem; color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose .pull {
    font-size: 1.2rem;
    color: var(--maroon);
    font-weight: 600;
    border-left: 4px solid var(--gold);
    padding-left: 20px;
    margin: 26px 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. Season blocks & sport cards
   -------------------------------------------------------------------------- */
.season { margin-bottom: 46px; }
.season:last-child { margin-bottom: 0; }

.season-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--line);
}
.season-head h3 {
    font-size: 1.35rem;
    color: var(--maroon);
    display: flex;
    align-items: center;
    gap: 11px;
}
.season-head h3::before {
    content: '';
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--accent, var(--gold));
    flex: none;
}
.season-head .season-when {
    font-size: .9rem;
    color: var(--ink-soft);
    font-weight: 500;
}

.season-summer { --accent: var(--summer); }
.season-fall   { --accent: var(--fall); }
.season-winter { --accent: var(--winter); }
.season-spring { --accent: var(--spring); }

.sport-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 16px;
}

.sport-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 20px 18px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sport-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--accent, var(--gold));
    opacity: 0;
    transition: opacity .18s ease;
}
.sport-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: color-mix(in srgb, var(--accent, var(--gold)) 45%, var(--line));
}
.sport-card:hover::before { opacity: 1; }

.sport-ico {
    display: block;
    font-size: 2.1rem;
    line-height: 1;
    margin-bottom: 10px;
    /* Prefer the platform's color emoji font, and never let the body font
       substitute a flat glyph. */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.sport-card h4 {
    font-size: 1.12rem;
    color: var(--maroon);
    font-weight: 700;
    letter-spacing: -.01em;
}
.sport-meta {
    font-size: .89rem;
    color: var(--ink-soft);
}
.sport-card .go {
    margin-top: 10px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--gold-deep);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sport-card:hover .go { color: var(--maroon); }

/* Status chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    align-self: flex-start;
    margin-bottom: 2px;
}
.chip-open     { background: var(--open-bg);   color: var(--open); }
.chip-closed   { background: var(--closed-bg); color: var(--closed); }
.chip-upcoming { background: var(--soon-bg);   color: var(--soon); }
.chip::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* --------------------------------------------------------------------------
   9. Quick-link tiles (parent tasks)
   -------------------------------------------------------------------------- */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 16px;
}
.tile {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 22px 22px 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-left-color .18s ease;
}
.tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-left-color: var(--maroon);
}
.tile svg { width: 24px; height: 24px; color: var(--maroon); }
.tile h4  { font-size: 1.04rem; color: var(--maroon); }
.tile p   { font-size: .91rem; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   10. Values (subtle mission framing)
   -------------------------------------------------------------------------- */
.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 30px;
}
.value {
    text-align: center;
    padding: 4px;
}
.value-ico {
    width: 60px; height: 60px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(197,183,131,.16);
    border: 1px solid rgba(197,183,131,.42);
    display: grid;
    place-items: center;
    color: var(--gold);
}
.value-ico svg { width: 26px; height: 26px; }
.value h3 { font-size: 1.1rem; color: var(--gold-bright); margin-bottom: 8px; }
.value p  { font-size: .96rem; color: var(--birch); margin: 0; }
/* A linked heading must not fall back to the default ink link color on maroon. */
.value h3 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.value h3 a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   11. Contact / roster
   -------------------------------------------------------------------------- */
.contact-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 28px;
    box-shadow: var(--shadow);
    margin-bottom: 34px;
}
.contact-lead .who { flex: 1 1 240px; }
.contact-lead .who .role {
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
}
.contact-lead .who .name { font-size: 1.4rem; color: var(--maroon); font-weight: 800; }

.roster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px 30px;
}
.roster-group h4 {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.roster-group ul { list-style: none; margin: 0; padding: 0; }
.roster-group li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    font-size: .95rem;
    border-bottom: 1px dotted var(--line);
}
.roster-group li:last-child { border-bottom: 0; }
.roster-group .pos  { color: var(--ink-soft); }
.roster-group .who2 { font-weight: 600; text-align: right; }
.roster-group .vacant { color: var(--fall); font-weight: 700; }

/* --------------------------------------------------------------------------
   12. Sport page — fact panel & detail sections
   -------------------------------------------------------------------------- */
.fact-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.fact {
    background: #fff;
    padding: 20px 22px;
}
.fact dt {
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 5px;
}
.fact dd {
    margin: 0;
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--maroon);
    line-height: 1.3;
}
.fact dd small { display: block; font-size: .84rem; font-weight: 500; color: var(--ink-soft); margin-top: 3px; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.detail {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 26px;
    box-shadow: var(--shadow);
}
.detail h3 {
    font-size: 1.08rem;
    color: var(--maroon);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 9px;
}
.detail h3 svg { width: 19px; height: 19px; color: var(--gold-deep); flex: none; }
.detail p, .detail li { font-size: .98rem; color: var(--ink-soft); }
.detail ul { margin: 0; padding-left: 1.15em; }
.detail li { margin-bottom: 6px; }
.detail li:last-child { margin-bottom: 0; }

/* Key-dates table */
.dates {
    width: 100%;
    border-collapse: collapse;
    font-size: .98rem;
}
.dates th, .dates td { text-align: left; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.dates tr:last-child th, .dates tr:last-child td { border-bottom: 0; }
.dates th { font-weight: 600; color: var(--ink-soft); width: 46%; }
.dates td { font-weight: 700; color: var(--maroon); }

.note {
    background: rgba(197,183,131,.14);
    border: 1px solid rgba(197,183,131,.45);
    border-radius: var(--radius-sm);
    padding: 15px 18px;
    font-size: .95rem;
    color: var(--ink-soft);
}
.note strong { color: var(--maroon); }

/* Breadcrumb */
.crumbs {
    font-size: .88rem;
    color: var(--birch);
    margin-bottom: 14px;
}
.crumbs a { color: var(--gold-bright); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { opacity: .6; margin: 0 6px; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--ink);
    color: var(--birch);
    padding: 56px 0 28px;
    font-size: .95rem;
}
.footer-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,.13);
}
@media (max-width: 800px) { .footer-top { grid-template-columns: 1fr; gap: 28px; } }

.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { width: 46px; height: 46px; }
.footer-brand .n { font-size: 1.12rem; font-weight: 800; color: var(--gold); line-height: 1.2; }

.site-footer h4 {
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 13px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--birch); text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright); text-decoration: underline; }

/* Parish attribution — the subtle Catholic identity mark.
   Brand guidelines v1.0 p.5-6: the parish logo may only be reversed on GOLD
   or MAROON, and its colors must never be altered. So this block sits on a
   maroon band and uses the supplied all-white reversed artwork. No CSS
   filters, no opacity — the mark is reproduced exactly as approved. */
.parish-mark {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin: 30px 0 0;
    padding: 22px 26px;
    background: var(--maroon);
    border-radius: var(--radius-sm);
}
.parish-mark img {
    width: 200px;
    flex: none;
    /* Clear space per guidelines = cap-X height of the logotype. */
    margin: 6px 10px 6px 0;
}
.parish-mark p {
    margin: 0;
    font-size: .93rem;
    color: var(--birch);
    max-width: 46ch;
}

.footer-legal {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.13);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    font-size: .87rem;
    color: rgba(214,210,196,.72);
}

/* --------------------------------------------------------------------------
   14. Scroll reveal (progressive enhancement)
   Elements are visible by default; JS adds .reveal-ready to opt in, so the
   page is never blank if JavaScript fails.
   -------------------------------------------------------------------------- */
.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.hero-compact { padding: clamp(38px, 6vw, 66px) 0 clamp(34px, 5vw, 56px); }
.hero-compact h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: 12px; }

.smaa-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(22px, 4vw, 34px);
    box-shadow: var(--shadow);
}

.field { margin-bottom: 20px; }
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0 20px;
}

.smaa-form label,
.label-as-legend {
    display: block;
    font-weight: 600;
    font-size: .93rem;
    color: var(--maroon);
    margin-bottom: 6px;
}
/* `.req` is also the numbered-step class used by .req-list, which is a grid.
   Inside a form it is only the required-field asterisk, so force it back to
   inline — otherwise every "*" drops onto its own line. */
.smaa-form .req { color: var(--fall); display: inline; }
.smaa-form .opt { font-weight: 400; color: var(--ink-soft); }

.smaa-form input[type="text"],
.smaa-form input[type="email"],
.smaa-form input[type="tel"],
.smaa-form input[type="password"],
.smaa-form select,
.smaa-form textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.smaa-form textarea { resize: vertical; min-height: 130px; }

.smaa-form input:focus,
.smaa-form select:focus,
.smaa-form textarea:focus {
    outline: none;
    border-color: var(--maroon);
    box-shadow: 0 0 0 3px rgba(120, 47, 64, .14);
}

.radio-row { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.smaa-form label.radio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 400;
    color: var(--ink);
    margin: 0;
}
.smaa-form label.radio input { width: auto; }

.field-static {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    margin: 0;
    font-size: .98rem;
}
.field-swap { float: right; font-size: .87rem; }

.field-error {
    color: #A3311F;
    font-size: .88rem;
    font-weight: 600;
    margin: 6px 0 0;
}
.smaa-form .field-error + input { border-color: #A3311F; }

.form-alert {
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 22px;
}
.form-alert-error {
    background: #FBECE9;
    border: 1px solid #E4BCB3;
    color: #7A2416;
    font-weight: 600;
}
.form-alert-ok {
    background: var(--open-bg);
    border: 1px solid #B9D6C4;
    color: var(--open);
}
.form-alert-ok h2 { font-size: 1.35rem; color: var(--open); margin-bottom: 8px; }
.form-alert-ok p  { color: #2c5c3c; margin: 0; }

.form-note {
    font-size: .88rem;
    color: var(--ink-soft);
    margin: 16px 0 0;
}

/* Honeypot — hidden from people, reachable by naive bots. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Turnstile renders at data-size="flexible", so let it fill the field column
   and line up with the inputs above it. */
.cf-turnstile {
    margin-top: 4px;
    width: 100%;
    max-width: 100%;
}
.cf-turnstile iframe { width: 100% !important; }

/* --------------------------------------------------------------------------
   16. Admin
   -------------------------------------------------------------------------- */
.admin-bar {
    background: var(--ink);
    color: #fff;
    padding: 12px 0;
    font-size: .92rem;
}
.admin-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-bar a { color: var(--gold); text-decoration: none; }
.admin-bar a:hover { text-decoration: underline; }
.admin-bar strong { color: #fff; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: .94rem;
    box-shadow: var(--shadow);
}
.admin-table th, .admin-table td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.admin-table thead th {
    background: var(--paper);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tr.is-vacant td { background: #FDF6F3; }
.admin-table .muted { color: var(--ink-soft); font-size: .88rem; }

.pill {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--closed-bg);
    color: var(--closed);
}
.pill-on   { background: var(--open-bg); color: var(--open); }
.pill-soon { background: var(--soon-bg); color: var(--soon); }

/* Admin: a standing to-do, not an error. */
.admin-callout {
    background: var(--soon-bg);
    border: 1px solid rgba(107,90,40,.24);
    border-left: 4px solid var(--soon);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 22px;
}
.admin-callout p { margin: 0; }
.admin-callout p + p { margin-top: 4px; }

/* Nothing outstanding — just orientation, so drop the gold. */
.admin-callout-quiet {
    background: var(--paper);
    border-color: var(--line);
    border-left-color: var(--line);
}

.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sm {
    padding: 7px 14px;
    font-size: .86rem;
    border-radius: var(--radius-sm);
}
.btn-danger { background: #A3311F; color: #fff; }
.btn-danger:hover { background: #8a2718; }

.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */
@media print {
    .site-header, .nav-toggle, .btn-row, .hero::after { display: none !important; }
    body { font-size: 11pt; }
    .hero { background: #fff !important; color: #000 !important; padding: 0 0 18pt; }
    .hero h1, .hero .lede, .crumbs, .crumbs a { color: #000 !important; }
    .section { padding: 12pt 0; }
    .detail, .fact-bar, .sport-card { box-shadow: none; break-inside: avoid; }
    .site-footer { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   18. Closed-registration notice (sport hero)
   -------------------------------------------------------------------------- */
.reg-closed {
    display: inline-block;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.22);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    margin-bottom: 18px;
    max-width: 52ch;
}
.reg-closed-head:only-child { margin: 0; }
.reg-closed-head {
    margin: 0 0 4px;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -.01em;
}
.reg-closed-sub {
    margin: 0;
    font-size: .96rem;
    color: var(--birch);
}
.reg-closed-sub strong { color: var(--gold-bright); }

/* A confirmed date that has not arrived yet reads as good news, not a refusal. */
.reg-soon {
    background: rgba(197,183,131,.16);
    border-left-color: var(--gold-bright);
}

/* Deadline reminder under a live Register button. */
.reg-deadline {
    margin: 12px 0 0;
    font-size: .95rem;
    color: var(--birch);
}
.reg-deadline strong { color: var(--gold-bright); }

/* Admin: identical column widths across the per-season tables, so they read
   as one continuous grid rather than four independently-sized tables. */
.admin-table-fixed { table-layout: fixed; }
.admin-table-fixed td,
.admin-table-fixed th { vertical-align: top; }
.admin-table-fixed .admin-actions { justify-content: flex-end; }

.url-cell {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
}

/* --------------------------------------------------------------------------
   19. Coaching page
   -------------------------------------------------------------------------- */
.req-list { list-style: none; margin: 0; padding: 0; counter-reset: req; }
.req {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}
.req:last-child { border-bottom: 0; }
.req-num {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--maroon);
    color: #fff;
    font-weight: 800;
    font-size: 1.02rem;
}
.req-body h3 { font-size: 1.12rem; color: var(--maroon); margin-bottom: 7px; }
.req-body p  { font-size: .99rem; color: var(--ink-soft); margin-bottom: 8px; }
.req-links a { font-weight: 600; }
/* --------------------------------------------------------------------------
   Registration listing (registration.php)
   -------------------------------------------------------------------------- */

/* What's open right now — given real weight, because it is why they came. */
.signup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}
.signup {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--open);
    border-radius: var(--radius-sm);
    padding: 20px 22px;
}
.signup-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    margin-bottom: 14px;
}
.signup-head .sport-ico { font-size: 1.7rem; line-height: 1; }
.signup-head h3 { font-size: 1.1rem; margin: 0 0 2px; }
.signup-head h3 a { color: var(--maroon); text-decoration: none; }
.signup-head h3 a:hover { text-decoration: underline; }
.signup-meta { margin: 0; font-size: .88rem; color: var(--ink-soft); }

.signup-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 16px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.signup-facts dt {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1px;
}
.signup-facts dd { margin: 0; font-size: 1rem; font-weight: 700; color: var(--maroon); }
.signup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.signup-note { margin: 12px 0 0; font-size: .87rem; color: var(--ink-soft); font-style: italic; }

/* Opening soon. */
.soon-list { list-style: none; margin: 0; padding: 0; }
.soon-list li {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.soon-list li:last-child { border-bottom: 0; }
.soon-ico { font-size: 1.45rem; line-height: 1; }
.soon-body a { font-weight: 700; color: var(--maroon); text-decoration: none; }
.soon-body a:hover { text-decoration: underline; }
.soon-body small { display: block; font-size: .84rem; color: var(--ink-soft); }
.soon-when { text-align: right; }
.soon-when strong { display: block; font-size: .95rem; color: var(--gold-deep); }
.soon-when small { font-size: .8rem; color: var(--ink-soft); }

/* The by-season table. */
.reg-table { display: grid; gap: 8px; }
.reg-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) 0.7fr 1.4fr auto;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 13px 18px;
}
.reg-row-open     { border-left-color: var(--open); }
.reg-row-upcoming { border-left-color: var(--gold); }
.reg-row-closed   { background: var(--paper); }
.reg-sport { display: flex; align-items: center; gap: 12px; min-width: 0; }
.reg-sport .sport-ico { font-size: 1.45rem; line-height: 1; flex: none; }
.reg-sport a { font-weight: 700; color: var(--maroon); text-decoration: none; }
.reg-sport a:hover { text-decoration: underline; }
.reg-sport small { display: block; font-size: .83rem; color: var(--ink-soft); }
.reg-cost { font-weight: 700; color: var(--ink); }
.reg-when small { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }
.reg-go { justify-self: end; }

@media (max-width: 720px) {
    .reg-row { grid-template-columns: 1fr auto; row-gap: 10px; }
    .reg-sport { grid-column: 1 / -1; }
    .reg-cost  { font-size: .95rem; }
    .reg-go    { grid-column: 2; grid-row: 2; }
    .reg-when  { grid-column: 1; grid-row: 2; }
}

/* --------------------------------------------------------------------------
   Volunteering (volunteer.php)
   -------------------------------------------------------------------------- */

/* The three promises. These carry the page, so they get real weight. */
.promise {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 22px 24px;
}
.promise svg { width: 22px; height: 22px; color: var(--gold-deep); margin-bottom: 10px; }
.promise h3 { font-size: 1.08rem; color: var(--maroon); margin-bottom: 7px; }
.promise p  { font-size: .96rem; color: var(--ink-soft); margin: 0; }

/* Scoreboard. An empty sheet stays empty; a half-full one fills. */
.progress {
    height: 10px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 auto 26px;
    max-width: var(--wrap-narrow);
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--maroon), var(--maroon-light));
    border-radius: 999px;
    transition: width .4s ease;
}

.shift-list { display: grid; gap: 10px; }
.shift-day {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 22px 0 4px;
}
.shift-day:first-child { margin-top: 0; }
.shift {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--maroon);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
}
.shift-full { border-left-color: var(--open); background: var(--paper); }
.shift-main { min-width: 240px; flex: 1 1 320px; }
.shift-main h4 { font-size: 1.04rem; color: var(--maroon); margin: 0 0 3px; }
.shift-meta  { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.shift-meta strong { color: var(--ink); }
.shift-note  { margin: 6px 0 0; font-size: .9rem; color: var(--ink-soft); font-style: italic; }
.shift-who   { margin: 6px 0 0; font-size: .87rem; color: var(--open); font-weight: 600; }
.shift-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shift-left {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fall);
    white-space: nowrap;
}
.shift-left-full { color: var(--open); }

.shift-chosen {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 18px;
}
.shift-chosen h3 { font-size: 1.1rem; color: var(--maroon); margin: 0 0 3px; }
.shift-chosen p  { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* The job menu. */
.job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.job {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 20px 22px;
}
.job-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.job-head svg { width: 22px; height: 22px; color: var(--maroon); flex: none; }
.job-head h3 { font-size: 1.05rem; color: var(--maroon); margin: 0; }
.job-time {
    margin: 0 0 10px;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.job-easy {
    background: var(--open-bg);
    color: var(--open);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: .72rem;
}
.job p { font-size: .95rem; color: var(--ink-soft); margin: 0 0 8px; }
.job-needs { font-size: .89rem !important; }
.job-needs strong { color: var(--ink); }
.job-link a { font-size: .89rem; font-weight: 600; }

/* Compact checkbox grid, used on both the volunteer and acknowledgment forms. */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 8px;
}
.check-compact { padding: 10px 12px; font-size: .93rem; }
.check-compact input[type="checkbox"] { width: 17px; height: 17px; }

/* Recognition is the only currency an all-volunteer association has. */
.thanks-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.thanks-name {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--maroon);
}
.thanks-name small { color: var(--gold-deep); font-weight: 700; }

/* --------------------------------------------------------------------------
   The Board (board.php)
   -------------------------------------------------------------------------- */

/* Next meeting — the one thing on the page with a deadline attached. */
.meeting-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
}
.meeting-label {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 4px;
}
.meeting-when { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; color: var(--maroon); }
.meeting-where {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: .96rem;
    font-weight: 600;
    color: var(--gold-deep);
}
.meeting-where svg { width: 15px; height: 15px; flex: none; }
.meeting-note { margin: 0; font-size: .94rem; color: var(--ink-soft); max-width: 60ch; }

/* Rest of the season — collapsed, because most people only want the next date. */
.schedule {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}
.schedule summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 20px;
    cursor: pointer;
    font-size: .93rem;
    font-weight: 700;
    color: var(--maroon);
    list-style: none;
}
.schedule summary::-webkit-details-marker { display: none; }
.schedule summary svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .18s ease; }
.schedule[open] summary svg { transform: rotate(-90deg); }
.schedule summary:hover { background: var(--paper); }

.schedule-list { list-style: none; margin: 0; padding: 0 20px 8px; }
.schedule-list li {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    gap: 14px;
    align-items: baseline;
    padding: 11px 0;
    border-top: 1px solid var(--line);
}
.schedule-date strong { display: block; font-size: .95rem; color: var(--maroon); }
.schedule-date small  { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.schedule-where { font-size: .94rem; color: var(--ink-soft); }
.schedule-where strong { color: var(--ink); }
.schedule-where small { display: block; font-size: .84rem; }
.schedule-time { font-size: .88rem; color: var(--ink-soft); white-space: nowrap; }

@media (max-width: 520px) {
    .schedule-list li { grid-template-columns: 60px 1fr; }
    .schedule-time { display: none; }
}

/* Roster cards. Deliberately plain — names, not headshots. */
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.member {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    transition: border-color .15s ease, transform .15s ease;
}
.member:hover { border-color: var(--gold); transform: translateY(-2px); }
.section-paper .member { background: #fff; }
.member h3 { font-size: 1.05rem; color: var(--maroon); margin: 0 0 2px; }
.member-role { margin: 0 0 12px; font-size: .9rem; color: var(--ink-soft); }
.member-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--maroon);
}
.member-link:hover { text-decoration: underline; }
.member-link svg { width: 15px; height: 15px; }

/* A single downloadable document, given more weight than a list row. */
.doc-card {
    display: grid;
    grid-template-columns: 54px 1fr 20px;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.doc-card:hover { border-color: var(--maroon); transform: translateY(-2px); }
.doc-icon {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    border-radius: var(--radius-sm);
    background: var(--maroon);
}
.doc-icon svg { width: 24px; height: 24px; color: var(--gold-bright); }
.doc-body { display: block; min-width: 0; }
.doc-title { display: block; font-size: 1.08rem; font-weight: 800; color: var(--maroon); margin-bottom: 3px; }
.doc-sub   { display: block; font-size: .94rem; color: var(--ink-soft); margin-bottom: 4px; }
.doc-meta  { display: block; font-size: .82rem; color: var(--ink-soft); }
.doc-go    { width: 18px; height: 18px; color: var(--maroon); }

@media (max-width: 520px) {
    .doc-card { grid-template-columns: 44px 1fr; gap: 14px; }
    .doc-icon { width: 44px; height: 44px; }
    .doc-go { display: none; }
}

/* Minutes list — a date block, a title, an arrow. */
.minutes-year {
    font-size: 1.05rem;
    color: var(--ink-soft);
    font-weight: 700;
    letter-spacing: .04em;
    margin: 26px 0 12px;
}
.minutes-year:first-of-type { margin-top: 0; }
.minutes-list { display: grid; gap: 10px; }
.minutes-item {
    display: grid;
    grid-template-columns: 62px 1fr 20px;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.minutes-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.minutes-date {
    display: grid;
    place-items: center;
    background: var(--maroon);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 8px 0;
    line-height: 1.1;
}
.minutes-mon { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); }
.minutes-day { font-size: 1.3rem; font-weight: 800; }
.minutes-body { display: block; min-width: 0; }
.minutes-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}
.minutes-summary { display: block; font-size: .93rem; color: var(--ink-soft); margin-bottom: 3px; }
.minutes-meta { display: block; font-size: .82rem; color: var(--ink-soft); }
.minutes-go { width: 18px; height: 18px; color: var(--maroon); }

@media (max-width: 520px) {
    .minutes-item { grid-template-columns: 52px 1fr; gap: 14px; }
    .minutes-go { display: none; }
}

/* --------------------------------------------------------------------------
   Policy documents and the acknowledgment form (code-of-conduct.php)
   -------------------------------------------------------------------------- */
.policy {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--maroon);
    border-radius: var(--radius-sm);
    padding: clamp(20px, 3vw, 30px);
    margin-bottom: 22px;
}
.policy-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.policy-head h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--maroon); }
.policy-date {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.policy .prose > :last-child { margin-bottom: 0; }

/* "Preamble", "I therefore agree:" — a lead-in, not a heading level. */
.policy-lead {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px !important;
}

/* The numbered commitments. Roomy, because people actually read these. */
.policy-list {
    margin: 0 0 20px;
    padding-left: 1.4em;
    color: var(--ink-soft);
    font-size: 1.02rem;
}
.policy-list li { margin-bottom: 10px; padding-left: 4px; }
.policy-list li::marker { color: var(--maroon); font-weight: 700; }
.policy-list-bullet li::marker { color: var(--gold-deep); }

.policy-download {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.policy-download a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .92rem;
    font-weight: 600;
}
.policy-download svg { width: 16px; height: 16px; }
/* A policy whose wording has not arrived: present but visibly not in force. */
.policy-pending { border-left-color: var(--line); background: var(--paper); }
.policy-pending .policy-head h2 { color: var(--ink-soft); }

/* Consent checkbox. Big target, and the label wraps as a block of text. */
.check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: .99rem;
    line-height: 1.6;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}
.check:hover { border-color: var(--gold); }
.check input[type="checkbox"] {
    flex: none;
    width: 20px; height: 20px;
    margin-top: 1px;
    accent-color: var(--maroon);
    cursor: pointer;
}
.check strong { color: var(--ink); }
.check-inline {
    border: 0;
    background: none;
    padding: 0;
    align-items: center;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Facility scheduling (/sched)
   -------------------------------------------------------------------------- */
.week-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.week-grid { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .87rem; }
.week-grid th, .week-grid td { vertical-align: top; }
.week-grid thead th {
    padding: 8px 6px;
    text-align: center;
    background: var(--maroon);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
}
.wg-dow  { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); }
.wg-date { display: block; font-size: .92rem; }
.week-grid th.wg-facility {
    background: var(--paper);
    color: var(--maroon);
    text-align: left;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    font-size: .88rem;
}
.week-grid td {
    position: relative;
    min-width: 118px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}
.wg-free  { background: #fff; }
.wg-busy  { background: rgba(120,47,64,.045); }
.wg-today { outline: 2px solid var(--gold); outline-offset: -2px; }

.wg-booking {
    position: relative;
    background: var(--maroon);
    color: #fff;
    border-radius: 5px;
    padding: 6px 8px;
    margin-bottom: 4px;
    line-height: 1.35;
}
.wg-time  { display: block; font-weight: 700; font-size: .82rem; color: var(--gold-bright); }
.wg-title { display: block; font-weight: 600; }
.wg-by    { display: block; font-size: .78rem; color: rgba(255,255,255,.75); }
.wg-del   { position: absolute; top: 3px; right: 4px; display: flex; align-items: center; gap: 4px; }
.wg-del button {
    background: none; border: 0; color: rgba(255,255,255,.7);
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.wg-del button:hover { color: #fff; }
.wg-series { font-size: .62rem; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 2px; }
.wg-series input { width: 11px; height: 11px; }

.wg-add {
    width: 100%;
    border: 1px dashed var(--line);
    background: none;
    color: var(--ink-soft);
    border-radius: 5px;
    padding: 4px;
    cursor: pointer;
    font: inherit;
    font-size: .95rem;
    opacity: .45;
}
.wg-add:hover { opacity: 1; border-color: var(--maroon); color: var(--maroon); background: var(--paper); }

/* Availability view. */
.free-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.free-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--open);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
}
.free-card.free-none { border-left-color: var(--closed); background: var(--paper); }
.free-card h4 { font-size: .95rem; color: var(--maroon); margin: 0 0 6px; }
.free-all  { margin: 0; font-weight: 700; color: var(--open); }
.free-busy { margin: 0; font-weight: 700; color: var(--closed); }
.free-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--ink); }
.free-list li { padding: 1px 0; }
.free-taken { margin: 6px 0 0; font-size: .78rem; color: var(--ink-soft); }

.role-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Volunteer backend: tap-to-fill job and time pickers. Big targets, because
   this gets used on a phone at the side of a field. */
.job-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.job-pick {
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    color: var(--maroon);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 16px;
    transition: background .12s ease, border-color .12s ease;
}
.job-pick:hover { border-color: var(--gold); }
.job-pick.is-on { background: var(--maroon); border-color: var(--maroon); color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mini {
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--paper);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 11px;
}
.mini:hover { border-color: var(--maroon); color: var(--maroon); }

/* Admin: filter bar and headline numbers. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.filter-bar input[type="search"],
.filter-bar select { min-width: 200px; }

.stat-row { display: flex; flex-wrap: wrap; gap: 14px; }
.stat {
    flex: 1 1 180px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
}
.stat-n { display: block; font-size: 1.9rem; font-weight: 800; color: var(--maroon); line-height: 1.1; }
.stat-l { display: block; font-size: .88rem; color: var(--ink-soft); margin-top: 2px; }

/* Emergency callout — dangerous concussion signs. Deliberately louder than a
   .detail: this is the one box on the page that must not be skimmed past. */
.detail-alert {
    border-left: 4px solid var(--maroon);
    background: linear-gradient(180deg, rgba(120,47,64,.06), transparent 60%);
}
.detail-alert h3 { color: var(--maroon); }
.detail-alert h3 svg { color: var(--maroon); }

/* AED certification line, on maroon (lindsays-law.php). */
.aed-cert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0;
    padding: 12px 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-sm);
    font-size: .97rem;
    color: var(--birch);
}
.aed-cert svg {
    flex: none;
    width: 20px; height: 20px;
    color: var(--gold-bright);
}
.aed-cert strong { color: #fff; }

/* Postal address inside a numbered step (financial-aid.php). */
.aid-address {
    font-style: normal;
    font-size: .97rem;
    line-height: 1.65;
    color: var(--ink-soft);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin: 12px 0 0;
}
.req-note {
    font-size: .92rem;
    color: var(--ink-soft);
    background: rgba(197,183,131,.16);
    border-left: 3px solid var(--gold);
    padding: 9px 13px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 10px 0 0 !important;
}
@media (max-width: 560px) {
    .req { grid-template-columns: 34px 1fr; gap: 13px; }
    .req-num { width: 32px; height: 32px; font-size: .92rem; }
}

.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 13px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    color: var(--ink-soft);
}
.tick-list li:last-child { border-bottom: 0; }
.tick-list svg { width: 20px; height: 20px; color: var(--gold-deep); margin-top: 3px; }

/* On maroon the default ink and gold-deep both disappear into the background. */
.section-maroon .tick-list li { color: var(--birch); border-bottom-color: rgba(255,255,255,.16); }
.section-maroon .tick-list li strong { color: #fff; }
.section-maroon .tick-list svg { color: var(--gold-bright); }