/* =========================================================================
   FOSHA - site styles
   Mobile first. Two breakpoints: 700px (tablet) and 1000px (desktop).
   No frameworks, no web fonts, no external requests.
   ========================================================================= */

/* --- Design tokens ------------------------------------------------------ */

:root {
    /* Brand red sampled from the FOSHA logo */
    --brand:        #993333;
    --brand-dark:   #7d2727;
    --brand-deep:   #4f1b1b;
    --brand-tint:   #f6eae8;
    --brand-tint-2: #ecd8d5;

    --gold:      #b0782a;
    --gold-tint: #fbf2e2;

    --ink:      #2c2523;
    --ink-soft: #5d524e;
    --ink-mute: #7d716c;

    --paper: #fffdfb;
    --tint:  #f8f2ed;
    --line:  #e6dcd5;

    /* Vertical rhythm. Every section's top and bottom padding comes from
       this one value, so the whole page tightens or loosens from here.
       Doubles between two bands: 18px each gives 36px of separation. */
    --section-space:  clamp(.75rem, 1.5vw, 1.15rem);
    --section-space-l: clamp(1.25rem, 2.5vw, 1.75rem);   /* hero */

    --radius:    14px;
    --radius-sm: 9px;
    --shadow:    0 1px 2px rgba(44, 37, 35, .05), 0 8px 24px -12px rgba(44, 37, 35, .18);
    --shadow-lg: 0 2px 4px rgba(44, 37, 35, .05), 0 18px 40px -18px rgba(44, 37, 35, .28);

    --font-head: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --wrap: 1120px;
    --gap:  clamp(1.15rem, 3.5vw, 2rem);
}

/* --- Reset -------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 .5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.2vw, 3rem); }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.15rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.4rem); }

p, ul, ol { margin: 0 0 1.1em; }
p { text-wrap: pretty; }
:where(p, li) { max-width: 68ch; }

a { color: var(--brand-dark); text-underline-offset: 2px; }
a:hover { color: var(--brand); }

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

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.5rem 0;
}

/* --- Layout primitives -------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.section { padding-block: var(--section-space); }
.section--tint { background: var(--tint); }

/* Safety net. section_class() alternates the banding so this should never
   fire, but if two bands of the same colour ever do end up adjacent, collapse
   the doubled padding rather than leaving a void between them. */
.section + .section:not(.section--tint),
.section--tint + .section--tint { padding-top: 0; }

/* The hero and the page banner are bands too. Their BOTTOM padding matches a
   section's, so the junction into the first section is the same on every page
   - 18px + 18px, whether the page opens with the hero or with a banner.
   The hero keeps a larger top padding, sitting under the header. */
.section--tint + .section:not(.section--tint) { padding-top: var(--section-space); }

/* Trailing button or note under a section's content. */
.section__after { margin: .9rem 0 0; }
.section--brand { background: var(--brand-tint); }
.section__title { margin-bottom: .5rem; }
.section__lede {
    font-size: 1.125rem;
    color: var(--ink-soft);
    max-width: 60ch;
    margin-bottom: 1rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand);
    color: #fff;
    padding: .75rem 1.25rem;
    z-index: 100;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Text for screen readers only. Used for the "(opens an email)" hints on the
   Support Us page, where the meaning is carried by a small icon. */
.u-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Header ------------------------------------------------------------- */

.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
    padding-block: .7rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
}
.brand__mark { width: 44px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: .01em;
}
.brand__sub {
    font-size: .72rem;
    color: var(--ink-mute);
    letter-spacing: .02em;
    max-width: 15rem;
}

/* Mobile menu button */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--brand-tint);
    border: 1px solid var(--brand-tint-2);
    color: var(--brand-dark);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    padding: .55rem .85rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Nav: hidden behind the button on small screens, inline from 900px */
.nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
}
.nav.is-open { display: block; }

.nav__list {
    list-style: none;
    margin: 0;
    padding: .5rem clamp(1.1rem, 4vw, 2.5rem) 1rem;
    max-width: var(--wrap);
    margin-inline: auto;
}
.nav__link {
    display: block;
    padding: .8rem .25rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
.nav__list li:last-child .nav__link { border-bottom: 0; }
.nav__link.is-active { color: var(--brand); }

/* No JavaScript? Show the links rather than trapping people. */
.no-js .nav { display: block; position: static; box-shadow: none; border: 0; }
.no-js .nav-toggle { display: none; }

/* --- Promo banner (placement: banner) ----------------------------------- */

.promo-banner {
    background: var(--brand);
    color: #fff;
}
.promo-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    padding-block: .7rem;
}
.promo-banner__text {
    margin: 0;
    font-weight: 600;
    font-size: .975rem;
    max-width: none;
}
.promo-banner__link {
    color: #fff;
    font-weight: 700;
    font-size: .925rem;
    text-decoration: underline;
    white-space: nowrap;
}
.promo-banner__link:hover { color: #fff; opacity: .85; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    padding: .85rem 1.4rem;
    border: 1px solid var(--brand);
    border-radius: 999px;
    transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn--ghost {
    background: transparent;
    color: var(--brand-dark);
    border-color: var(--brand-tint-2);
}
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-dark); }

.btn--panel { padding: .7rem 1.2rem; font-size: .95rem; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
/* When the buttons are the last thing in a block, their bottom margin adds to
   the container's padding and the gap below reads larger than the same
   junction elsewhere. The padding alone is the spacing. */
.btn-row:last-child { margin-bottom: 0; }

/* --- Hero (homepage) ---------------------------------------------------- */

.hero {
    background:
        radial-gradient(120% 100% at 15% 0%, #fff 0%, var(--brand-tint) 55%, var(--brand-tint-2) 100%);
    border-bottom: 1px solid var(--brand-tint-2);
    /* Larger at the top, sitting under the header. Bottom matches a section's
       so the junction into the first section is identical to a page banner's. */
    padding-top: var(--section-space-l);
    padding-bottom: var(--section-space);
}
.hero__grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
}
.hero__eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .6rem;
}
.hero__title { margin-bottom: .5em; }
.hero__lede {
    font-size: clamp(1.075rem, 2vw, 1.2rem);
    color: var(--ink-soft);
    max-width: 46ch;
}
.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    font-size: .9rem;
    color: var(--ink-mute);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--brand-tint-2);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .4rem; }

/* --- Page banner (inner pages) ------------------------------------------ */

.page-banner {
    background: var(--brand-tint);
    border-bottom: 1px solid var(--brand-tint-2);
    padding-block: var(--section-space);
}
.page-banner__title { margin-bottom: .35em; }
.page-banner__intro {
    font-size: clamp(1.05rem, 2vw, 1.175rem);
    color: var(--ink-soft);
    max-width: 58ch;
    margin: 0;
}

/* --- Panels ------------------------------------------------------------- */

.panel {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    padding: 1.4rem 1.4rem 1.25rem;
    box-shadow: var(--shadow);
}
.panel__kicker {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 .45rem;
}
.panel__title { font-size: 1.25rem; margin-bottom: .45rem; }
.panel__body { margin: 0 0 1rem; color: var(--ink-soft); font-size: .975rem; }
.panel__cta { margin: 0; }

.panel--gold { border-left-color: var(--gold); background: var(--gold-tint); }
.panel--gold .panel__kicker { color: #8c6020; }
.panel--gold .btn--panel { background: var(--gold); border-color: var(--gold); }
.panel--gold .btn--panel:hover { background: #8c6020; border-color: #8c6020; }

.panel--quiet { border-left-color: var(--ink-mute); }
.panel--quiet .panel__kicker { color: var(--ink-mute); }
.panel--quiet .btn--panel {
    background: transparent;
    color: var(--brand-dark);
    border-color: var(--brand-tint-2);
}
.panel--quiet .btn--panel:hover { background: var(--brand-tint); color: var(--brand-dark); }

/* The hero card gets a bit more presence */
.panel--hero {
    box-shadow: var(--shadow-lg);
    border-left-width: 5px;
    padding: 1.6rem;
}
.panel--hero .panel__title { font-size: clamp(1.35rem, 2.6vw, 1.6rem); }

.panel--aside { padding: 1.25rem; }
.panel--aside .panel__title { font-size: 1.1rem; }

.panel-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

/* --- Cards -------------------------------------------------------------- */

.card-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}
.card__title { font-size: 1.2rem; margin-bottom: .4rem; }
.card__text { color: var(--ink-soft); font-size: .975rem; margin-bottom: 1rem; }
.card__link {
    margin-top: auto;
    font-weight: 600;
    text-decoration: none;
    font-size: .95rem;
}
.card__link:hover { text-decoration: underline; }
.card__when {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .5rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--brand);
    font-size: .95rem;
    margin-bottom: .35rem;
}
/* Keep the date itself on one line. If the badge cannot fit beside it the
   badge drops below, rather than the date splitting across two lines. */
.card__when > time { white-space: nowrap; }
.card__meta {
    color: var(--ink-mute);
    font-size: .875rem;
    margin-bottom: .6rem;
}

.card__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    background: var(--brand-tint);
    color: var(--brand);
    border-radius: 50%;
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .9rem;
}

/* --- Ways to support (Support Us page) ---------------------------------- */

/* Each group card carries one tone. --ways-tone drives the top rule, the
   kicker and the icons, so a new group only needs a modifier here. */
.ways-card {
    --ways-tone: var(--brand);
    border-top: 4px solid var(--ways-tone);
}
.ways-card--gold { --ways-tone: var(--gold); }
.ways-card--deep { --ways-tone: var(--brand-deep); }

.ways__kicker {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ways-tone);
    margin: 0 0 .4rem;
}

.ways {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.15rem;
}

.ways__item {
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr);
    gap: .75rem;
    max-width: none;
}

.ways__icon {
    width: 1.3rem;
    height: 1.3rem;
    margin-top: .15rem;
    color: var(--ways-tone);
}

.ways__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .2rem;
}
.ways__title a { text-decoration: none; color: inherit; }
.ways__title a:hover { color: var(--brand); text-decoration: underline; }

.ways__text {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

/* Link-type hint after a title: envelope for mailto, arrow for off-site.
   Quiet on purpose - it is a warning, not a decoration. */
.ways__kind {
    width: .78em;
    height: .78em;
    display: inline-block;
    margin-left: .35em;
    vertical-align: -0.04em;
    color: var(--ink-mute);
}
.ways__title a:hover .ways__kind { color: var(--brand); }

/* The lead ask. The legal line sits under the button, quiet and small. */
.ways-lead__note { margin: .75rem 0 0; }

/* --- Stats -------------------------------------------------------------- */

.stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}
.stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.35rem 1.4rem;
    max-width: none;
}
.stat__value {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(1.9rem, 4.5vw, 2.4rem);
    font-weight: 700;
    color: var(--brand);
    line-height: 1.05;
}
.stat__label {
    display: block;
    margin-top: .3rem;
    color: var(--ink-soft);
    font-size: .95rem;
}

/* --- Two-column layout with sidebar ------------------------------------- */

.layout {
    display: grid;
    gap: clamp(2rem, 5vw, 3.25rem);
    align-items: start;
}
.layout__aside { display: grid; gap: 1.25rem; }

.aside-box {
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.35rem;
}
.aside-box h2, .aside-box h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.aside-box p, .aside-box li { font-size: .95rem; color: var(--ink-soft); }
.aside-box :last-child { margin-bottom: 0; }

/* --- Prose blocks ------------------------------------------------------- */

.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--brand); }

.lede {
    font-size: clamp(1.1rem, 2.2vw, 1.25rem);
    color: var(--ink-soft);
    line-height: 1.6;
}

.callout {
    background: var(--brand-tint);
    border-radius: var(--radius);
    padding: 1.35rem 1.5rem;
    margin: 1.75rem 0;
}
.callout :last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

/* --- Ticket terms (ticket-terms.php) ------------------------------------ */

.terms__version { font-size: .9rem; color: var(--ink-mute); overflow-wrap: anywhere; }
.terms__party { border-left: 3px solid var(--brand); padding-left: 1rem; margin: 1.5rem 0; }
.terms__party p { color: var(--ink-soft); }
.terms .callout h2 { margin-top: 0; font-size: 1.2rem; }
.terms .callout { max-width: calc(68ch + 3rem); }
.terms .callout ol { margin-bottom: 0; }
/* Clause numbers hang in the margin so the text lines up down the page. */
.terms__clause { position: relative; padding-left: 2.6rem; max-width: calc(68ch + 2.6rem); }
.terms__no { position: absolute; left: 0; font-weight: 700; color: var(--brand); }
div.terms__clause > p { margin-bottom: .5rem; }
div.terms__clause > ul { margin-top: 0; margin-bottom: .5rem; }

@media print {
    .terms .callout { background: none; border: 1px solid #999; }
}

/* --- Events ------------------------------------------------------------- */

.event-list { list-style: none; margin: 0; padding: 0; }

.event {
    display: grid;
    gap: .35rem 1.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
    max-width: none;
}
.event:first-child { border-top: 0; padding-top: .5rem; }

.event__date {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--brand);
    font-size: 1rem;
    letter-spacing: .01em;
}
.event__day {
    display: block;
    font-size: 2rem;
    line-height: 1;
}
.event__title { font-size: 1.25rem; margin-bottom: .3rem; }
.event__meta {
    color: var(--ink-mute);
    font-size: .9rem;
    margin-bottom: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
}
.event__body { margin-bottom: .85rem; color: var(--ink-soft); }
.event :last-child { margin-bottom: 0; }

.tag {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 999px;
    vertical-align: .1em;
}
.tag--quiet { background: var(--ink-mute); }
.tag--gold  { background: var(--gold); }

.event--past .event__date { color: var(--ink-mute); }

/* --- Event detail pop-out ----------------------------------------------- */

/* A native <details>, so it works with no JavaScript at all. site.js only
   adds one thing: opening the right one when the page is loaded with an
   event's anchor in the URL, e.g. events.php#e-20261119-paint-and-sip. */

.event__more { margin-bottom: .85rem; }

.event__more-toggle {
    display: inline-block;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--brand-dark);
    padding: .3rem 0;
    /* The default disclosure triangle, hidden three ways because the three
       engines each want a different one. Ours is the ::before below, which
       can rotate. */
    list-style: none;
}
.event__more-toggle::-webkit-details-marker { display: none; }
.event__more-toggle::marker { content: ""; }
.event__more-toggle:hover { color: var(--brand); }

.event__more-toggle::before {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-right: .55rem;
    vertical-align: .14em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.event__more[open] > .event__more-toggle::before { transform: rotate(45deg); }

.event__detail {
    padding: .7rem 0 .1rem;
    color: var(--ink-soft);
    font-size: .95rem;
}
.event__detail > :last-child { margin-bottom: 0; }
/* list-style is set because the pop-out sits inside the event's own <li>,
   which makes the browser treat this as a nested list and use hollow
   circles for the markers. */
.event__detail ul:not(.event__notes) {
    padding-left: 1.2rem;
    margin-bottom: .9rem;
    /* Set explicitly: the pop-out sits inside the event's own <li>, so the
       browser counts this as a nested list and would use hollow circles.
       The :not() keeps it off the notes box below, which draws its own. */
    list-style: disc;
}
.event__detail li { margin-bottom: .3em; }
.event__detail li::marker { color: var(--brand); }

/* The short "need to know" lines. Boxed and last, so they read as a
   footnote to the description rather than part of it. */
.event__notes {
    list-style: none;
    margin: .95rem 0 0;
    padding: .85rem 1rem;
    background: var(--tint);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    max-width: none;
}
.event__notes li {
    position: relative;
    margin: 0 0 .4em;
    padding-left: 1.05rem;
    max-width: none;
}
.event__notes li:last-child { margin-bottom: 0; }
.event__notes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--gold);
}

/* Tickets first, any second action beside it. */
.event__actions { margin-top: .1rem; }

/* Shown in place of the button until an event's tickets_from date.
   A flat gold chip: clearly not a button, and clearly not another bullet -
   the notes box directly above it already uses gold dots. */
.event__tickets-from {
    display: inline-block;
    margin: .1rem 0 .85rem;
    padding: .45rem .8rem;
    /* Square-ish on purpose. A fully rounded pill sitting above an outlined
       pill button reads as a second button; this cannot be mistaken for one. */
    border-radius: var(--radius-sm);
    background: var(--gold-tint);
    color: #8c6020;
    font-size: .9rem;
    font-weight: 600;
    max-width: none;
}

/* --- Forms -------------------------------------------------------------- */

.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field input, .field textarea, .field select {
    font: inherit;
    font-size: 1rem;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: inherit;
    width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field__hint { font-size: .85rem; color: var(--ink-mute); }

.form-note {
    background: var(--tint);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    font-size: .925rem;
    color: var(--ink-soft);
}
.form-message {
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}
.form-message--ok    { background: #eaf3ec; color: #235c36; }
.form-message--error { background: var(--brand-tint); color: var(--brand-dark); }

/* --- Contact details list ----------------------------------------------- */

.detail-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.detail-list li {
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
    max-width: none;
}
.detail-list li:last-child { border-bottom: 0; }
.detail-list strong { display: block; font-size: .85rem; color: var(--ink-mute); font-weight: 600; }

/* --- Committee ---------------------------------------------------------- */

.people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
.person {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    max-width: none;
}
.person__name {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.25;
}
.person__role {
    display: block;
    margin-top: .15rem;
    color: var(--brand);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Committee headshots. The whole row switches to the photo layout only when
   at least one member actually has a picture - see about.php. Photos are
   200x200 JPGs in assets/img/committee/, drawn at 96px on wider screens. */

img.person__photo { display: block; }

.person__photo {
    border-radius: 50%;
    object-fit: cover;
    background: var(--tint);
    border: 1px solid var(--line);
}

/* Narrow screens: the picture sits beside the name. Stacking a 96px circle
   above every name would turn eight committee members into a long scroll. */
.people--photos .person {
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 1rem;
}
.people--photos .person__photo {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 4.25rem;
    height: 4.25rem;
}
.people--photos .person__name { grid-column: 2; align-self: end; }
.people--photos .person__role { grid-column: 2; align-self: start; }

/* The fallback for anyone without a photo yet. */
.person__photo--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
    letter-spacing: .02em;
    user-select: none;
    /* Georgia's line box carries descender space the capitals never use, so
       centring alone leaves the initials sitting high. Nudge them down. */
    padding-top: .1em;
}

@media (min-width: 700px) {
    .people--photos .person {
        display: block;
        text-align: center;
        /* The mobile rule above sets align-content: center for its grid.
           Browsers now honour align-content on block containers too, so
           without this a card with a one-line role (Amy) gets its content
           vertically centred in the stretched card and its photo sits lower
           than the rest of the row. Cards are top-aligned. */
        align-content: normal;
    }
    /* No display here on purpose: the initials circle is a flex box and must
       stay one, or the letters fall to the top of the circle. margin auto
       centres it either way. */
    .people--photos .person__photo {
        width: 6rem;
        height: 6rem;
        margin: 0 auto .75rem;
    }
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
    background: var(--brand-deep);
    color: #f0e3e1;
    margin-top: clamp(3rem, 8vw, 5rem);
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; opacity: .8; }

.site-footer__grid {
    display: grid;
    gap: 2.25rem;
    padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
.site-footer__mark { width: 64px; margin-bottom: 1rem; }
.site-footer__blurb { color: #e3cfcd; font-size: .95rem; }
.site-footer__charity { font-size: .875rem; color: #c9adaa; margin: 0; }

.site-footer__heading {
    font-size: .8rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-family: var(--font-body);
    color: #d6b7b4;
    margin-bottom: .9rem;
}
.site-footer ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.site-footer li { margin-bottom: .55rem; font-size: .95rem; }
.site-footer__address {
    font-style: normal;
    font-size: .9rem;
    color: #c9adaa;
    line-height: 1.7;
}

/* =========================================================================
   Tablet - 700px and up
   ========================================================================= */

@media (min-width: 700px) {
    .brand__mark { width: 52px; }
    .brand__sub { font-size: .78rem; max-width: none; }

    .panel-grid { grid-template-columns: repeat(2, 1fr); }
    .card-grid  { grid-template-columns: repeat(2, 1fr); }
    .stats      { grid-template-columns: repeat(3, 1fr); }
    .people     { grid-template-columns: repeat(2, 1fr); }

    .event {
        grid-template-columns: 7.5rem 1fr;
        padding: 1.75rem 0;
    }
    .event__date { padding-top: .2rem; }

    .site-footer__grid { grid-template-columns: 1.5fr 1fr 1.3fr; }
}

/* =========================================================================
   Desktop - 900px and up (nav goes inline)
   ========================================================================= */

@media (min-width: 900px) {
    .nav-toggle { display: none; }

    .nav {
        display: block;
        position: static;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .nav__list {
        display: flex;
        gap: .35rem;
        padding: 0;
        margin: 0;
    }
    .nav__link {
        border-bottom: 0;
        padding: .5rem .75rem;
        border-radius: var(--radius-sm);
        font-size: .975rem;
    }
    .nav__link:hover { background: var(--brand-tint); color: var(--brand-dark); }
    .nav__link.is-active {
        background: var(--brand-tint);
        color: var(--brand-dark);
    }
    .nav__list li:last-child .nav__link { border-bottom: 0; }
}

/* =========================================================================
   Desktop - 1000px and up
   ========================================================================= */

@media (min-width: 1000px) {
    .hero__grid { grid-template-columns: 1.15fr .85fr; align-items: center; }

    .panel-grid { grid-template-columns: repeat(3, 1fr); }
    .card-grid--3 { grid-template-columns: repeat(3, 1fr); }

    .layout { grid-template-columns: minmax(0, 1fr) 20rem; }

    .people { grid-template-columns: repeat(4, 1fr); }
}

/* --- Preferences -------------------------------------------------------- */

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

@media print {
    .site-header, .nav, .promo-banner, .site-footer, .btn, .layout__aside { display: none !important; }
    body { background: #fff; color: #000; }
    .hero, .page-banner { background: none; border: 0; }

    /* A printed events page shows every event's details whether or not the
       reader had expanded them on screen, and drops the "More details"
       affordance, which means nothing on paper. */
    .event__more > * { display: block !important; }
    .event__more-toggle { display: none !important; }
}