/* =========================================================================
   Research For The Kids
   -------------------------------------------------------------------------
   The visual language is taken from things the committee already makes: the
   kelly-green vinyl banner with black lettering, the event poster, the ride
   shirts, the black number cards they hold up on stage to reveal the year's
   total, and the playing cards riders collect at each stop.

   Two rules follow from that, and most of this file is downstream of them:

   1. Green is a block fill carrying BLACK type, never a gradient carrying
      white type. Black on #47aa42 measures 6:1, which is why the banner reads
      in daylight from across a parking lot.
   2. Edges are hard. Printed matter has rules, borders and solid blocks, not
      soft shadows and pill buttons.
   ========================================================================= */

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

:root {
    color-scheme: light;

    /* Paper */
    --ground: #ddd4bf;
    --paper: #fbf9f4;
    --cream: #f4efe2;
    --surface: #ffffff;
    --sunk: #eae3d2;

    /* Ink */
    --ink: #1a1714;
    --ink-soft: #3d3831;
    --ink-muted: #57514a;
    --rule: #ddd4be;
    --rule-strong: #b9ae93;

    /* Brand, straight off the banner and the logo */
    --green: #47aa42;
    --lime: #8cc63f;
    --green-ink: #2a7230;
    --green-deep: #1d5220;
    --green-wash: #eaf5e5;
    --red: #c8102e;
    --red-bright: #ed1b2c;
    --red-wash: #fceff0;
    --card-black: #14120f;
    --gold: #ffcd00;

    --focus: #1256c4;

    /*
     * Text that sits on a brand fill (kelly green, lime, the red donate
     * button). It does NOT flip with the theme: the fills do not flip either,
     * so flipping the type on them drops kelly green to 2.9:1.
     */
    --on-brand: #1a1714;

    /*
     * The colour of a deliberately dark block (the footer, the announcement
     * bar, the number cards). Separate from --ink on purpose: --ink is a TEXT
     * colour and flips to near-white in the dark theme, so reusing it as a
     * block background turned the footer into a white panel carrying its own
     * light grey text. Roles, not values.
     */
    --block: #1a1714;
    --on-block: #cfcabe;
    /*
     * Accent colour for text sitting ON the dark block. Separate from --green
     * because a skin's green is tuned for light surfaces: the clean skin's
     * #17683a measures 2.6:1 against the footer, which is unreadable.
     */
    --block-accent: #47aa42;

    /* Geometry. Printed things have corners. */
    --radius: 3px;
    --radius-lg: 5px;

    --wrap: 1180px;
    --wrap-narrow: 700px;
    --gutter: clamp(1rem, 4vw, 2.75rem);
    --section-y: clamp(2.25rem, 5vw, 4.25rem);

    /* Type */
    --font-display: "Anton", "Arial Narrow", Haettenschweiler, sans-serif;
    --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    --step--1: clamp(0.85rem, 0.83rem + 0.12vw, 0.92rem);
    --step-0: clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
    --step-1: clamp(1.12rem, 1.06rem + 0.32vw, 1.3rem);
    --step-2: clamp(1.4rem, 1.24rem + 0.8vw, 1.9rem);
    --step-3: clamp(1.85rem, 1.5rem + 1.7vw, 2.9rem);
    --step-4: clamp(2.4rem, 1.7rem + 3.2vw, 4.2rem);
    --step-5: clamp(2.6rem, 1.7rem + 4.1vw, 4.4rem);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 160ms;

    --z-sticky: 20;
    --z-drawer: 30;
    --z-header: 40;
    --z-overlay: 50;
}

/*
 * A dark theme exists because people ask for one, and it applies ONLY when a
 * visitor asks for it with the toggle. It deliberately ignores
 * prefers-color-scheme: this site is a green banner in a bar parking lot, the
 * photography is September daylight, and most of the audience lands here from
 * a Facebook post on a phone in the sun. Following the OS setting meant
 * everyone with dark mode on saw a black poster, which is not the poster.
 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #17171a;
    --cream: #1e1e21;
    --surface: #202023;
    --sunk: #131315;
    --ground: #0e0e10;
    --ink: #f2efe8;
    --ink-soft: #d4cfc5;
    --ink-muted: #a8a299;
    --rule: #35353a;
    --rule-strong: #4e4e54;
    --green-ink: #7bcf73;
    --green-deep: #a3e29b;
    --green-wash: #1c2a1a;
    --red: #ff7a83;
    --red-wash: #2b1618;
    --card-black: #0d0d0f;
    --focus: #8cb7ff;
}

/* ------------------------------------------------------------------- reset */

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

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

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

/*
 * Anton is a poster face: one weight, condensed, drawn for capitals. Headlines
 * are set tight and upper-case so they read the way the ride poster does.
 */
h1,
h2,
h3,
.display {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.94;
    letter-spacing: 0.005em;
    margin: 0 0 0.45em;
}

h1 {
    font-size: var(--step-4);
}

h2 {
    font-size: var(--step-3);
}

h3 {
    font-size: var(--step-2);
}

/* Sentence-case sub-headings stay in the text face. */
h4,
.subhead {
    font-family: var(--font-body);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
}

p {
    margin: 0 0 1.1em;
}

a {
    color: var(--green-ink);
    text-underline-offset: 0.16em;
    text-decoration-thickness: from-font;
}

a:hover {
    color: var(--green-deep);
}

ul,
ol {
    margin: 0 0 1.2em;
    padding-left: 1.2em;
}

li + li {
    margin-top: 0.3em;
}

strong,
b {
    font-weight: 700;
}

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

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

::selection {
    background: var(--lime);
    color: var(--on-brand);
}

/* ------------------------------------------------------------------- sheet */

/*
 * The whole site is one boxed sheet on a ground, rather than a stack of
 * full-bleed colour fields. Nothing runs edge to edge: the photo bands, the
 * green banner and the tinted sections are all panels inside this box.
 */
.page {
    max-width: 1260px;
    margin: clamp(0.75rem, 2.5vw, 2.5rem) auto;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 12px 12px 0 rgba(26, 23, 20, 0.16);
}

/* On a phone the gutter is worth more than the frame. */
@media (max-width: 720px) {
    .page {
        margin: 0;
        border-inline: 0;
        border-top: 0;
        box-shadow: none;
    }
}

/* ---------------------------------------------------------------- utilities */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap--narrow {
    max-width: var(--wrap-narrow);
}

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

.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: var(--z-overlay);
    background: var(--ink);
    color: var(--paper);
    padding: 0.8rem 1.2rem;
    font-weight: 700;
    text-decoration: none;
    transition: top var(--dur) var(--ease);
}

.skip-link:focus {
    top: 1rem;
}

.icon {
    width: 1.2em;
    height: 1.2em;
    flex: none;
}

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

.section {
    padding-block: var(--section-y);
}

/*
 * Tinted blocks are panels inset from the sheet, not colour fields running the
 * full width of it. The parent carries the page gutter and the panel carries
 * its own padding, so the two do not stack.
 */
.section--cream,
.hero,
.page-head {
    padding-inline: var(--gutter);
}

.section--cream > .wrap,
.hero > .wrap,
.page-head > .wrap {
    background: var(--cream);
    border: 2px solid var(--ink);
    padding-inline: clamp(1.25rem, 3vw, 2.25rem);
    max-width: calc(var(--wrap) + var(--gutter) * 2);
}

.section--cream > .wrap {
    padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
}

.page-head > .wrap {
    padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* A photo header is its own panel, so the image must be clipped to it. */
.page-head--photo > .wrap {
    background: transparent;
    border-color: transparent;
}

.section--tight {
    padding-block: clamp(2rem, 4vw, 3rem);
}

/*
 * Section openers carry a rule and a headline. There is no small capitalised
 * category label above every heading: that pattern is the fastest way to make
 * a page look like it came out of a template.
 */
.section__head {
    max-width: 32ch;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.section__head--wide {
    max-width: 48ch;
}

.section__head h2 {
    border-top: 4px solid var(--ink);
    padding-top: 0.55rem;
}

.section__head p {
    font-size: var(--step-1);
    color: var(--ink-soft);
    margin-bottom: 0;
    max-width: 58ch;
}

.lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-soft);
}

.kicker {
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 0.6rem;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.7rem 1.3rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.btn:hover {
    background: #1d5220;
    border-color: #1d5220;
    color: #fff;
}

.btn .icon {
    width: 1.1em;
    height: 1.1em;
}

/* The ride action: green block, black type, like the banner. */
.btn--go {
    background: var(--green);
    border-color: var(--ink);
    color: var(--on-brand);
}

.btn--go:hover {
    background: var(--lime);
    border-color: var(--ink);
    color: var(--on-brand);
}

.btn--donate {
    background: var(--red);
    border-color: var(--ink);
    color: #fff;
}

.btn--donate:hover {
    background: #a20d24;
    border-color: var(--ink);
    color: #fff;
}

.btn--donate .icon {
    fill: currentColor;
    stroke: none;
}

.btn--outline {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}

.btn--outline:hover {
    background: var(--ink);
    color: var(--paper);
}

.btn--block {
    width: 100%;
}

.btn--lg {
    min-height: 56px;
    padding: 0.85rem 1.7rem;
    font-size: var(--step-1);
}

.btn--sm {
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    font-size: var(--step--1);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.textlink {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    gap: 0.4rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 currentColor;
    transition: box-shadow var(--dur) var(--ease);
}

.textlink:hover {
    box-shadow: inset 0 -4px 0 currentColor;
}

.textlink .icon {
    width: 1em;
    height: 1em;
}

/* ------------------------------------------------------------- announce bar */

.announce {
    background: var(--block);
    color: #f4f1ea;
    font-size: var(--step--1);
    font-weight: 600;
}

.announce__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding-block: 0.55rem;
    text-align: center;
}

.announce p {
    margin: 0;
}

.announce a {
    display: inline-block;
    min-height: 24px;
    padding-block: 0.15rem;
    color: var(--block-accent);
    font-weight: 800;
    white-space: nowrap;
}

.announce a:hover {
    color: #fff;
}

.announce__icon {
    flex: none;
    color: var(--block-accent);
}

@media (max-width: 640px) {
    .announce__icon {
        display: none;
    }
}

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

.site-header {
    position: sticky;
    top: -2px;
    z-index: var(--z-header);
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 70px;
    min-width: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;
}

.brand__mark {
    width: 58px;
    height: auto;
    flex: none;
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
}

.brand__name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.brand__name em {
    font-style: normal;
    color: var(--red);
}

.brand__sub {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
    margin-top: 0.25rem;
}

.site-nav {
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list li {
    margin: 0;
}

.site-nav__list a {
    display: block;
    padding: 0.5rem 0.65rem;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: border-color var(--dur) var(--ease);
}

.site-nav__list a:hover {
    border-bottom-color: var(--rule-strong);
}

.site-nav__list a.is-current {
    border-bottom-color: var(--green);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.site-nav + .site-header__actions {
    margin-left: 0.75rem;
}

.theme-toggle,
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.theme-toggle:hover,
.nav-toggle:hover {
    background: var(--ink);
    color: var(--paper);
}

.theme-toggle--menu {
    display: none;
}

.theme-toggle__moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__moon {
    display: block;
}

.nav-toggle {
    display: none;
}

.nav-toggle__close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: block;
}

@media (max-width: 1080px) {
    .site-nav {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* Frees 52px so the donate button keeps its label on a 411px phone. */
    .theme-toggle--header {
        display: none;
    }

    .theme-toggle--menu {
        display: inline-flex;
        justify-content: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 560px) {
    .brand__sub {
        display: none;
    }

    .brand__mark {
        width: 44px;
    }

    .brand__name {
        font-size: 0.95rem;
    }

    .brand__text {
        max-width: 8em;
    }

    .site-header__inner {
        gap: 0.6rem;
        min-height: 62px;
    }

    .site-header__actions {
        gap: 0.4rem;
    }

    .site-header .btn--donate {
        padding-inline: 0.85rem;
    }
}

@media (max-width: 360px) {
    .brand__text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

/* --------------------------------------------------------------- mobile nav */

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: var(--paper);
    overflow-y: auto;
    padding-top: 5.5rem;
    padding-bottom: 3rem;
}

.mobile-nav[hidden] {
    display: none;
}

.mobile-nav__list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    border-top: 2px solid var(--ink);
}

.mobile-nav__list li {
    margin: 0;
    border-bottom: 1px solid var(--rule);
}

.mobile-nav__list a {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0.7rem 0.15rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}

.mobile-nav__list a.is-current {
    color: var(--green-ink);
}

.mobile-nav__cta {
    display: grid;
    gap: 0.6rem;
}

body.nav-open {
    overflow: hidden;
}

/* ==================================================================== hero = */

/*
 * The hero is a poster, not a darkened photograph. The previous version put
 * white type over a 75% black scrim, which buried the only thing on the page
 * worth looking at.
 */
.hero {
    background: var(--paper);
    padding-block: clamp(1rem, 2.5vw, 1.75rem);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: center;
    padding-block: clamp(2rem, 5vw, 3.75rem);
}

@media (max-width: 1080px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

.hero__stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--green);
    color: var(--on-brand);
    border: 2px solid var(--ink);
    padding: 0.3rem 0.8rem;
    font-weight: 800;
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.hero h1 {
    font-size: var(--step-5);
    margin-bottom: 0.25em;
}

.hero h1 .hl {
    display: block;
    color: var(--green-ink);
}

.hero__when {
    font-size: var(--step-1);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.hero__lede {
    max-width: 44ch;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
}

/* The two riders are the committee's own artwork, drawn by Guy Green. */
.hero__art {
    background: var(--green);
    border: 2px solid var(--ink);
    padding: clamp(1.1rem, 3vw, 2.25rem);
    margin: 0;
}

.hero__art img {
    width: 100%;
}

.hero__art figcaption {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-brand);
}

@media (max-width: 1080px) {
    .hero__art {
        max-width: 520px;
    }
}

/* -------------------------------------------------------------- number cards */

/*
 * Every September the committee lines up on stage holding black cards with
 * white numerals to reveal the year's total. The countdown and the money
 * figures on this site are the same object.
 */
.numcards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.numcards li {
    margin: 0;
    min-width: 66px;
    flex: 0 1 auto;
    padding: 0.5rem 0.7rem 0.45rem;
    background: var(--card-black);
    border: 2px solid var(--ink);
    text-align: center;
    box-shadow: 3px 3px 0 var(--rule-strong);
}

.numcards__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4.5vw, 2.4rem);
    line-height: 0.95;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.numcards__label {
    display: block;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a9a49a;
    margin-top: 0.3rem;
    font-weight: 700;
}

.numcards--done li {
    min-width: 0;
    padding-inline: 1rem;
}

/* A money figure spelled out in the same cards. */
.reveal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
}

.reveal span {
    margin: 0;
    display: grid;
    place-items: center;
    min-width: 2.4rem;
    padding: 0.45rem 0.3rem;
    background: var(--card-black);
    border: 2px solid var(--ink);
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4.6vw, 2.75rem);
    line-height: 1;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.16);
}

.reveal span.is-punct {
    min-width: 1.1rem;
    background: transparent;
    border-color: transparent;
    color: var(--ink);
    box-shadow: none;
}

.reveal__caption {
    margin: 1rem 0 0;
    font-weight: 700;
}

/* ------------------------------------------------------------- detail block */

/*
 * A plain ruled list of facts. The version this replaced put every line behind
 * a tinted rounded square with a line icon in it, which is the single most
 * template-looking component on the web.
 */
.details {
    margin: 0;
    border-top: 2px solid var(--ink);
}

.details > div {
    display: grid;
    grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
    gap: 0.4rem 1.25rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule);
}

.details dt {
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-top: 0.15rem;
}

.details dd {
    margin: 0;
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.3;
}

.details dd small {
    display: block;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-muted);
    margin-top: 0.2rem;
    line-height: 1.45;
}

@media (max-width: 520px) {
    .details > div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

/* ---------------------------------------------------------------- the split */

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

.split--wide-left {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.split--wide-right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.split--center {
    align-items: center;
}

/* Matches the hero and the footer: the boxed sheet leaves no room for two
   columns much below 1080px. */
@media (max-width: 1080px) {
    .split,
    .split--wide-left,
    .split--wide-right {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------ poster figure */

.poster {
    margin: 0;
    display: inline-block;
    background: var(--surface);
    border: 2px solid var(--ink);
    padding: 0.55rem;
    box-shadow: 8px 8px 0 var(--green);
    max-width: 100%;
}

.poster img {
    width: 100%;
    max-width: 340px;
}

.poster figcaption {
    margin-top: 0.55rem;
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------ playing cards */

/* It is a poker run: you draw a card at each stop. So the stops are cards. */
.hand {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
    gap: 0.85rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.card-stop {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--surface);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 0.8rem 0.85rem 0.9rem;
    min-height: 13rem;
    box-shadow: 4px 4px 0 var(--rule-strong);
}

.card-stop--end {
    box-shadow: 4px 4px 0 var(--red-bright);
}

.card-stop__pip {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--ink);
}

.card-stop__pip .suit {
    font-family: var(--font-body);
    font-size: 1.05rem;
}

.card-stop--red .card-stop__pip {
    color: var(--red);
}

.card-stop__pip--flip {
    margin-top: auto;
    align-self: flex-end;
    transform: rotate(180deg);
}

.card-stop h3 {
    font-size: 1.3rem;
    margin: 0.7rem 0 0.25rem;
}

.card-stop p {
    margin: 0 0 0.4rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
    line-height: 1.45;
}

.card-stop .addr {
    font-size: var(--step--1);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    gap: 0.3rem;
}

/* ------------------------------------------------------------- green banner */

/*
 * Modelled on the vinyl banner they hang at the start: flat green, black
 * lettering, the riders at one end. Replaces the gradient call-to-action
 * panel, which could have belonged to any product on the internet.
 */
.banner {
    background: var(--green);
    border: 2px solid var(--ink);
    color: var(--on-brand);
    box-shadow: 8px 8px 0 rgba(26, 23, 20, 0.14);
}

.banner__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.banner h2 {
    font-size: var(--step-3);
    margin-bottom: 0.3em;
    max-width: 18ch;
}

.banner p {
    max-width: 48ch;
    margin-bottom: 1.4rem;
    font-weight: 600;
}

.banner p a,
.banner h2 a {
    color: var(--on-brand);
}

.banner__art {
    width: min(320px, 34vw);
}

@media (max-width: 800px) {
    .banner__inner {
        grid-template-columns: 1fr;
    }

    .banner__art {
        width: min(260px, 58vw);
        justify-self: end;
    }
}

.banner .btn--outline {
    border-color: var(--on-brand);
    color: var(--on-brand);
}

.banner .btn--outline:hover {
    background: var(--on-brand);
    color: var(--green);
}

/*
 * The donate button keeps one fill in both themes. --red flips light in the
 * dark theme, which would leave white type on salmon at 2.3:1.
 */
:root[data-theme="dark"] .btn--donate {
    background: #c8102e;
    color: #fff;
}

:root[data-theme="dark"] .btn--donate:hover {
    background: #a20d24;
    color: #fff;
}

/* -------------------------------------------------------------- the letter */

/*
 * A signed note in the committee's own words. Borrowed from the way the Kyle
 * Petty ride opens with a message from Kyle: a named human saying why, in
 * first person, beats any amount of third-person copywriting.
 */
.letter {
    background: var(--surface);
    border: 2px solid var(--ink);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    box-shadow: 10px 10px 0 var(--cream);
}

.letter p {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
    line-height: 1.6;
}

.letter p:last-of-type {
    margin-bottom: 0;
}

.letter__sign {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 2px solid var(--ink);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--ink-muted);
}

.letter__sign img {
    width: 54px;
    flex: none;
}

/* ------------------------------------------------------------- ways to help */

/*
 * A ruled list with large numerals, rather than a grid of line icons in tinted
 * rounded squares.
 */
.ways {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--ink);
    counter-reset: way;
}

.ways li {
    margin: 0;
    border-bottom: 1px solid var(--rule);
}

.way {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 0.3rem 1.25rem;
    align-items: baseline;
    padding: 1.1rem 0;
    text-decoration: none;
    color: inherit;
}

.way:hover {
    color: inherit;
}

.way:hover .way__title {
    color: var(--green-ink);
}

.way::before {
    counter-increment: way;
    content: counter(way, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--green);
}

.way__title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    text-transform: uppercase;
    line-height: 1;
    transition: color var(--dur) var(--ease);
}

.way__body {
    grid-column: 2 / -1;
    margin: 0.3rem 0 0;
    color: var(--ink-muted);
    font-size: var(--step--1);
    max-width: 60ch;
}

.way__go {
    font-weight: 800;
    font-size: var(--step--1);
    white-space: nowrap;
    color: var(--green-ink);
}

@media (max-width: 620px) {
    .way {
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    .way__go {
        grid-column: 2;
    }
}

/* -------------------------------------------------------------- photo wall */

/*
 * A dense grid of real photographs, the way a long-running event site shows
 * that hundreds of people turn up. Lifted from how RAGBRAI puts a wall of
 * ride photos on its home page instead of one hero image.
 */
.wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    border: 2px solid var(--ink);
    background: var(--ink);
}

.wall a,
.wall span {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--sunk);
}

.wall img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
    transition: transform 320ms var(--ease);
}

.wall a:hover img {
    transform: scale(1.05);
}

@media (max-width: 720px) {
    .wall {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ------------------------------------------------------------ impact chart */

.chart {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.chart__row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.chart__year {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.chart__track {
    position: relative;
    height: 1.9rem;
    background: var(--sunk);
    border: 1px solid var(--rule-strong);
}

.chart__bar {
    display: block;
    height: 100%;
    background: var(--green);
    border-right: 2px solid var(--ink);
    animation: bar-grow 700ms var(--ease) both;
    transform-origin: left center;
}

.chart__row--peak .chart__bar {
    background: var(--red-bright);
}

@keyframes bar-grow {
    from {
        transform: scaleX(0);
    }
}

.chart__value {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .chart__row {
        grid-template-columns: 3rem minmax(0, 1fr);
        grid-template-areas: "year value" "bar bar";
        gap: 0.2rem 0.6rem;
    }

    .chart__year {
        grid-area: year;
    }

    .chart__value {
        grid-area: value;
        text-align: right;
    }

    .chart__track {
        grid-area: bar;
        height: 1.4rem;
        margin-bottom: 0.35rem;
    }
}

.chart__note {
    margin-top: 1.25rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

/* ----------------------------------------------------------------- timeline */

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--ink);
}

.timeline li {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
    gap: 0.2rem 1.25rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule);
}

.timeline__time {
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.timeline li.is-key .timeline__time {
    color: var(--green-ink);
}

.timeline__what {
    color: var(--ink-soft);
    font-size: var(--step--1);
    line-height: 1.5;
}

@media (max-width: 520px) {
    .timeline li {
        grid-template-columns: 1fr;
    }
}

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

#route-map {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 520px;
    border: 2px solid var(--ink);
    background: var(--sunk);
}

@media (max-width: 560px) {
    #route-map {
        aspect-ratio: 1 / 1;
    }
}

.map-note {
    margin-top: 0.75rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.leaflet-container {
    font: inherit;
}

.map-pin {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--green);
    color: var(--on-brand);
    font-family: var(--font-display);
    font-size: 0.95rem;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

.map-pin--end {
    background: var(--red);
    color: #fff;
}

.map-pin--wide {
    width: auto;
    min-width: 30px;
    padding-inline: 0.3rem;
}

/* ------------------------------------------------------------------- people */

.person {
    margin: 0;
    background: var(--surface);
    border: 2px solid var(--ink);
}

.person img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-bottom: 2px solid var(--ink);
}

.person__body {
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.person__kicker {
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.3rem;
}

.person h3 {
    margin-bottom: 0.4rem;
}

.person p {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.pullquote {
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-style: italic;
    line-height: 1.35;
    border-left: 4px solid var(--green);
    padding-left: 1.1rem;
    margin: 2rem 0 1.25rem;
    max-width: 32ch;
}

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

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 0.6rem;
}

.gallery-grid button {
    position: relative;
    display: block;
    padding: 0;
    border: 2px solid var(--ink);
    overflow: hidden;
    background: var(--sunk);
    cursor: pointer;
    width: 100%;
    aspect-ratio: 4 / 3;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms var(--ease);
}

.gallery-grid button:hover img {
    transform: scale(1.04);
}

.gallery-grid figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.25rem 0.6rem 0.5rem;
    background: linear-gradient(to top, rgba(10, 10, 8, 0.88), transparent);
    color: #fff;
    font-size: var(--step--1);
    font-weight: 600;
    text-align: left;
}

.album-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 2px solid var(--ink);
    transition: box-shadow var(--dur) var(--ease);
}

.album-card:hover {
    box-shadow: 6px 6px 0 var(--green);
    color: inherit;
}

.album-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-bottom: 2px solid var(--ink);
}

.album-card__body {
    padding: 1rem 1.1rem 1.2rem;
}

.album-card__body h3 {
    margin-bottom: 0.25rem;
}

.album-card__body p {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--step--1);
}

/* ---------------------------------------------------------------- lightbox */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: rgba(8, 8, 6, 0.95);
}

.lightbox[hidden] {
    display: none;
}

.lightbox__bar {
    display: flex;
    justify-content: flex-end;
    padding: 0.7rem;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: #fff;
    color: #14120f;
}

.lightbox__stage {
    position: relative;
    display: grid;
    place-items: center;
    padding: 0 0.7rem;
    min-height: 0;
}

.lightbox__stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox__prev,
.lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__prev {
    left: 0.7rem;
}

.lightbox__next {
    right: 0.7rem;
}

.lightbox__prev .icon {
    transform: rotate(180deg);
}

.lightbox__caption {
    padding: 0.9rem 1.2rem 1.6rem;
    color: rgba(255, 255, 255, 0.86);
    text-align: center;
    font-size: var(--step--1);
}

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

.prose {
    max-width: 66ch;
}

.prose > h2 {
    margin-top: 2em;
    font-size: var(--step-2);
    border-top: 3px solid var(--ink);
    padding-top: 0.5rem;
}

.prose > h2:first-child {
    margin-top: 0;
}

.prose p,
.prose li {
    line-height: 1.7;
}

.prose .lead,
.prose > p:first-child {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-soft);
}

.prose img {
    margin-block: 1.5rem;
    border: 2px solid var(--ink);
}

.prose blockquote {
    margin: 1.75rem 0;
    padding-left: 1.1rem;
    border-left: 4px solid var(--green);
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink-soft);
}

.prose .fact-list {
    list-style: none;
    padding: 0;
    margin-block: 1.75rem;
    border-top: 2px solid var(--ink);
}

.prose .fact-list li {
    margin: 0;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rule);
    font-weight: 700;
}

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

.page-head {
    padding-block: clamp(1rem, 2.5vw, 1.75rem);
    background: var(--paper);
}

.page-head--photo > .wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: #1a1c14;
    border-color: var(--ink);
}

.page-head--photo img.page-head__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 36%;
}

.page-head--photo > .wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, rgba(10, 12, 8, 0.82), rgba(10, 12, 8, 0.42));
}

.page-head--photo h1,
.page-head--photo .lede {
    color: #fff;
}

.page-head--photo .lede {
    color: rgba(255, 255, 255, 0.9);
}

.page-head--photo .breadcrumbs,
.page-head--photo .breadcrumbs a {
    color: rgba(255, 255, 255, 0.88);
}

.page-head h1 {
    margin-bottom: 0.3em;
    max-width: 20ch;
}

.page-head .lede {
    max-width: 52ch;
    margin-bottom: 0;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-muted);
}

.breadcrumbs li {
    margin: 0;
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 0.35rem;
    opacity: 0.55;
}

/* -------------------------------------------------------------------- lists */

.post-list {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--ink);
}

.post-list li {
    margin: 0;
    border-bottom: 1px solid var(--rule);
}

.post {
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    padding: 1.25rem 0;
    text-decoration: none;
    color: inherit;
}

.post:hover {
    color: inherit;
}

.post:hover h3 {
    color: var(--green-ink);
}

.post img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 2px solid var(--ink);
}

.post h3 {
    margin: 0.2rem 0 0.35rem;
    font-size: var(--step-2);
    transition: color var(--dur) var(--ease);
}

.post p {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--step--1);
}

.post time {
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-ink);
}

@media (max-width: 640px) {
    .post {
        grid-template-columns: 1fr;
    }
}

.event-list {
    border-top: 2px solid var(--ink);
}

.event-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--rule);
}

.event-row--featured {
    background: var(--green-wash);
    border-bottom: 2px solid var(--ink);
    padding-inline: 1rem;
}

.event-row__date {
    display: grid;
    place-items: center;
    padding: 0.5rem 0.25rem;
    background: var(--ink);
    color: var(--paper);
    text-align: center;
    line-height: 1;
}

.event-row--featured .event-row__date {
    background: var(--green);
    color: var(--on-brand);
    border: 2px solid var(--ink);
}

.event-row__month {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 800;
}

.event-row__day {
    font-family: var(--font-display);
    font-size: 1.8rem;
    margin-top: 0.2rem;
}

.event-row h3 {
    margin: 0 0 0.2rem;
    font-size: var(--step-2);
}

.event-row p {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--step--1);
}

@media (max-width: 640px) {
    .event-row {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .event-row > .btn {
        grid-column: 1 / -1;
    }
}

.list-plain {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.list-plain li {
    margin: 0;
}

.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 2px solid var(--ink);
}

.checklist li {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.7rem;
    align-items: start;
    margin: 0;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
}

.checklist .icon {
    color: var(--green-ink);
    margin-top: 0.2rem;
    width: 1.05rem;
    height: 1.05rem;
}

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

.form {
    display: grid;
    gap: 1rem;
    max-width: 36rem;
}

.field {
    display: grid;
    gap: 0.35rem;
}

.field label {
    font-weight: 800;
    font-size: var(--step--1);
}

.field .hint {
    font-size: var(--step--1);
    color: var(--ink-muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.55;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
}

.field--error input,
.field--error textarea {
    border-color: var(--red);
    background: var(--red-wash);
}

.field__error {
    color: var(--red);
    font-size: var(--step--1);
    font-weight: 700;
}

.honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notice {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.9rem 1.1rem;
    border: 2px solid var(--ink);
    background: var(--cream);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.notice > p {
    margin: 0;
}

.notice--ok {
    background: var(--green-wash);
}

.notice--error {
    background: var(--red-wash);
}

.notice .icon {
    flex: none;
    margin-top: 0.15rem;
}

/* --------------------------------------------------------------------- faq */

.faq {
    display: grid;
    gap: 0;
    max-width: 68ch;
    border-top: 2px solid var(--ink);
}

.faq details {
    border-bottom: 1px solid var(--rule);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    min-height: 48px;
    font-weight: 800;
    font-size: var(--step-0);
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "";
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 3px solid var(--green-ink);
    border-bottom: 3px solid var(--green-ink);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

.faq summary:hover {
    color: var(--green-ink);
}

.faq__body {
    padding: 0 0 1.1rem;
    color: var(--ink-soft);
}

.faq__body > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- sponsors */

.sponsor-tier + .sponsor-tier {
    margin-top: 2.25rem;
}

.sponsor-tier h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--step-2);
}

.sponsor-tier h3::after {
    content: "";
    flex: 1;
    height: 3px;
    background: var(--ink);
}

.sponsor-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--rule);
}

.sponsor-list li {
    margin: 0;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--rule);
    font-weight: 700;
}

/* ------------------------------------------------------------------- merch */

.merch {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

@media (max-width: 800px) {
    .merch {
        grid-template-columns: 1fr;
    }
}

.merch img {
    width: 100%;
    background: var(--surface);
    border: 2px solid var(--ink);
    padding: 0.5rem;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    border-top: 2px solid var(--ink);
}

.price-table td {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--rule);
}

.price-table td:last-child {
    text-align: right;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ figures */

.figure-bleed {
    width: 100%;
    max-width: min(var(--fig-max, 480px), 100%);
    border: 2px solid var(--ink);
}

.figure-caption {
    margin-top: 0.7rem;
    max-width: min(var(--fig-max, 480px), 100%);
    color: var(--ink-muted);
    font-size: var(--step--1);
}

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

.site-footer {
    background: var(--block);
    color: var(--on-block);
    padding-block: clamp(2.25rem, 5vw, 3.5rem) 1.75rem;
    margin-top: var(--section-y);
    font-size: var(--step--1);
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(1.75rem, 5vw, 4rem);
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 1080px) {
    .site-footer__top {
        grid-template-columns: 1fr;
    }
}

.site-footer__brand img {
    width: 140px;
    margin-bottom: 0.9rem;
}

.site-footer__mission {
    color: #f2efe6;
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height: 1.05;
    max-width: 16ch;
}

.site-footer__benefit {
    max-width: 44ch;
}

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.45rem 0.85rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius);
    color: #f2efe6;
    text-decoration: none;
    font-weight: 700;
    transition: background-color var(--dur) var(--ease);
}

.site-footer__social a:hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--on-brand);
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
    gap: 1.25rem 2rem;
}

.site-footer__cols h2 {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--block-accent);
    margin-bottom: 0.7rem;
}

.site-footer__cols ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__cols li + li {
    margin-top: 0.1rem;
}

.site-footer__cols a {
    display: inline-block;
    padding: 0.3rem 0;
    color: #cfcabe;
    text-decoration: none;
}

.site-footer__cols a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem 1.5rem;
    padding-top: 1.35rem;
    color: #9c978d;
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__legal li {
    margin: 0;
}

.site-footer__legal a {
    color: #cfcabe;
    text-decoration: none;
    padding: 0.3rem 0;
    display: inline-block;
}

.site-footer__legal a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer__count strong {
    color: var(--block-accent);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .site-footer__social {
        display: grid;
        gap: 0.45rem;
    }

    .site-footer__social a {
        justify-content: flex-start;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .site-footer__legal {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        column-gap: 1.5rem;
    }
}

/* ------------------------------------------------------------ narrow tweaks */

@media (max-width: 560px) {
    .hero__actions,
    .btn-row {
        display: grid;
        gap: 0.55rem;
    }

    .hero__actions .btn,
    .btn-row .btn {
        width: 100%;
    }

    .numcards {
        gap: 0.35rem;
    }

    .numcards li {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 0.3rem;
    }
}

/* --------------------------------------------------------------- reveal anim */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .gallery-grid button:hover img,
    .wall a:hover img {
        transform: none;
    }
}

/* -------------------------------------------------------------------- print */

@media print {
    .site-header,
    .mobile-nav,
    .announce,
    .site-footer,
    .theme-toggle,
    .nav-toggle,
    .skip-link,
    .banner__art {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }
}

/* Caption on the lead tile of the photo wall. */
.wall__caption {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 0.15rem;
    padding: 2rem 1rem 0.9rem;
    background: linear-gradient(to top, rgba(10, 10, 8, 0.92), rgba(10, 10, 8, 0.5) 55%, transparent);
    color: #fff;
}

.wall__caption strong {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    line-height: 1;
}

.wall__caption span {
    font-size: var(--step--1);
    color: rgba(255, 255, 255, 0.86);
}

.hero h1 .nowrap {
    display: block;
}

/*
 * The hero art panel fills its column rather than floating in the middle of
 * it, so the green block reads as a printed panel beside the headline.
 */
@media (min-width: 1081px) {
    .hero__art {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: clamp(1.5rem, 4vw, 3rem);
    }
}

/* Split the headline into even lines rather than orphaning one word. */
.hero h1 .nowrap,
.hero h1 .hl {
    text-wrap: balance;
}

/*
 * A dollar figure must never wrap mid-number. On a narrow phone the fixed card
 * width pushed the last digit onto a second line, which read as two amounts.
 */
@media (max-width: 480px) {
    .reveal {
        gap: 0.2rem;
        flex-wrap: nowrap;
    }

    .reveal span {
        min-width: 0;
        padding: 0.35rem 0.28rem;
        font-size: clamp(1.05rem, 5.6vw, 1.9rem);
    }

    .reveal span.is-punct {
        padding-inline: 0.05rem;
    }
}

/* ------------------------------------------------------------- photo bands */

/*
 * Full-bleed photography between sections. Harley's pages change gear with an
 * edge-to-edge photograph rather than another centred container, and this site
 * has better photographs than it has words.
 */
.band {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    margin: 0;
    min-height: clamp(220px, 34vw, 420px);
    border: 2px solid var(--ink);
    background: var(--block);
    overflow: hidden;
}

.band picture,
.band__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
}

.band__img {
    object-fit: cover;
}

.band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(10, 10, 8, 0.85), rgba(10, 10, 8, 0.2) 55%, rgba(10, 10, 8, 0.1));
}

.band__inner {
    padding: clamp(1.25rem, 3vw, 2rem);
    color: #fff;
}

.band__kicker {
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--block-accent);
    margin: 0 0 0.4rem;
}

.band__heading {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(1.6rem, 4.5vw, 3.2rem);
    line-height: 0.95;
    color: #fff;
    margin: 0;
    max-width: 22ch;
}

/* The wall's picture elements must not break the grid cell. */
.wall picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------- sponsor strip */

/*
 * The event-landing pattern puts sponsors just before the closing call to
 * action, and for a charity whose sponsors pay for the day, leaving them off
 * the home page is a real omission.
 */
.sponsor-strip {
    border-top: 4px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding-block: 1.25rem 1.5rem;
}

.sponsor-strip h2 {
    font-size: var(--step-2);
    margin-bottom: 0.6rem;
}

.sponsor-strip p {
    max-width: 62ch;
    color: var(--ink-muted);
}

.sponsor-strip ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.sponsor-strip li {
    margin: 0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--step--1);
    letter-spacing: 0.04em;
}

/* --------------------------------------------------- home page compaction */

/*
 * The home page ran eleven screens. These three blocks carried most of that
 * height, and none of them needed it: square photo tiles, 4:3 portraits and
 * three-line rows in the help list.
 */
.wall img {
    aspect-ratio: 4 / 3;
}

.person img {
    aspect-ratio: 3 / 2;
}

.way {
    padding: 0.85rem 0;
    row-gap: 0.15rem;
}

.way__body {
    margin-top: 0.15rem;
}

.section__head {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
}

/* The footer's bottom row wraps one item onto a line of its own from about
   860px down, not just on a phone. */
@media (max-width: 860px) {
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --------------------------------------------------- header social button */

.header-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    color: var(--ink);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.header-social:hover {
    background: var(--ink);
    color: var(--paper);
}

.header-social .icon {
    fill: currentColor;
    stroke: none;
}

/* The drawer already carries a Facebook link, so the header drops it once the
   nav collapses and the row gets tight. */
@media (max-width: 1080px) {
    .header-social {
        display: none;
    }
}

/* ------------------------------------------------------ route stop buttons */

.card-stop__addr {
    margin: 0 0 0.6rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.card-stop__dir {
    align-self: flex-start;
}