/* ============================================================
   SUNSET MEN'S SOCCER BOOSTER CLUB
   Vintage 70s Athletic — Team Colors: Purple, Gold, Grey
   ============================================================ */

/* Any element's own display value would beat the browser's default
   [hidden]{display:none}. This makes the hidden attribute always win,
   which the deadline logic (banners, donate teaser, hard-goods button)
   relies on. */
[hidden] { display: none !important; }

:root {
    --deep-purple: #2D1045;
    --purple:      #6B2D87;
    --gold:        #E7C53A;
    --warm-gold:   #D4A017;
    --charcoal:    #2A2A35;
    --steel-grey:  #8A8A9A;
    --muted-text:  #5A4870;
    --light-grey:  #ECEAF2;
    --off-white:   #F5F2FA;
    --near-black:  #140C20;

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

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

body {
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.6;
    color: var(--deep-purple);
    background: var(--off-white);
}

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

/* Present for screen readers and the document outline, not for sight. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
p { text-wrap: pretty; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   SKIP LINK — first tab stop on every page. Off-screen until
   focused, then a solid gold bar so keyboard users can't miss it.
   ============================================================ */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 200;
    padding: 12px 20px;
    background: var(--gold);
    color: var(--deep-purple);
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: 2px solid var(--deep-purple);
}

.skip-link:focus { top: 16px; }

/* ============================================================
   NAVIGATION
   Five destinations — one per way to support the club — so the
   pills collapse behind a Menu button on narrow screens rather
   than wrapping into three sticky rows.
   ============================================================ */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--off-white);
    border-bottom: 2px solid var(--deep-purple);
    padding: 14px 24px;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--deep-purple);
    text-decoration: none;
    white-space: nowrap;
}

.nav-logo svg { width: 22px; height: 22px; flex: 0 0 auto; }

.nav-links {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-btn {
    display: inline-block;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    padding: 14px 22px;
    border-radius: 999px;
    text-decoration: none;
    border: 2px solid var(--deep-purple);
    color: var(--deep-purple);
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}

.nav-btn:hover {
    background: var(--deep-purple);
    color: var(--off-white);
}

/* Where you are. Filled so it reads without relying on colour alone —
   it's the only pill with a solid dark ground. */
.nav-btn[aria-current="page"] {
    background: var(--deep-purple);
    color: var(--off-white);
}

.nav-btn-filled {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--deep-purple);
}

.nav-btn-filled:hover {
    background: var(--warm-gold);
    border-color: var(--warm-gold);
    color: var(--deep-purple);
}

.nav-btn-filled[aria-current="page"] {
    background: var(--deep-purple);
    border-color: var(--deep-purple);
    color: var(--gold);
}

/* Menu toggle — hidden on wide screens, a pill on narrow ones. */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    padding: 12px 18px;
    border-radius: 999px;
    border: 2px solid var(--deep-purple);
    background: transparent;
    color: var(--deep-purple);
    cursor: pointer;
    min-height: 44px;
    line-height: 1;
}

.nav-toggle-bars {
    display: inline-block;
    width: 18px;
    height: 12px;
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after,
.nav-toggle-bars span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span    { top: 5px; }
.nav-toggle-bars::after  { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 820px) {
    .nav-toggle { display: inline-flex; }

    .nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--off-white);
        border-bottom: 2px solid var(--deep-purple);
        padding: 8px 24px 16px;
    }

    .nav-links.is-open { display: flex; }

    .nav-links li { border-top: 1px solid rgba(107, 45, 135, 0.15); }
    .nav-links li:first-child { border-top: none; }

    .nav-btn {
        display: block;
        border: none;
        border-radius: 0;
        padding: 16px 4px;
        font-size: 1.15rem;
    }

    .nav-btn-filled { background: transparent; color: var(--deep-purple); }
    .nav-btn-filled:hover { background: var(--deep-purple); color: var(--off-white); }
    .nav-btn-filled[aria-current="page"] { background: var(--deep-purple); color: var(--gold); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    padding: 80px 24px 100px;
    background-color: var(--off-white);
    background-image: var(--grain);
    background-repeat: repeat;
    background-size: 300px 300px;
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 60px;
    align-items: end;
}

.hero-headline {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(5rem, 13vw, 10.5rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--deep-purple);
}

.hero-sub {
    color: var(--purple);
}

.hero-aside {
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.hero-aside p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--charcoal);
}

.site-logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.site-logo--large {
    width: 220px;
    height: 220px;
    object-fit: contain;
}

/* ============================================================
   CHECKERBOARD BAND
   ============================================================ */
.pattern-band {
    height: 72px;
    background-color: var(--deep-purple);
    background-image:
        linear-gradient(45deg,  var(--gold) 25%, transparent 25%),
        linear-gradient(-45deg, var(--gold) 25%, transparent 25%),
        linear-gradient(45deg,  transparent 75%, var(--gold) 75%),
        linear-gradient(-45deg, transparent 75%, var(--gold) 75%);
    background-size: 36px 36px;
    background-position: 0 0, 0 18px, 18px -18px, -18px 0;
}

/* ============================================================
   SPONSORS — one row per tier, logo size steps down by tier
   ============================================================ */
.sponsors {
    padding: 56px 24px 60px;
    background-color: var(--off-white);
    background-image: var(--grain);
    background-size: 300px 300px;
    border-bottom: 1px solid var(--light-grey);
    text-align: center;
}

.sponsors-heading {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.22em;
    color: var(--purple);
    margin-bottom: 4px;
}

.sponsors-sub {
    font-style: italic;
    color: var(--muted-text);
    margin-bottom: 28px;
}

.sponsor-rows { display: flex; flex-direction: column; gap: 22px; align-items: center; }

.sponsor-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.sponsor-row li {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 2px solid var(--deep-purple);
    padding: 14px 20px;
}

.sponsor-row a { display: flex; }
.sponsor-row img { display: block; width: auto; height: auto; object-fit: contain; }

/* The tier is the size. */
.sponsor-row--large  li { width: 300px; height: 150px; box-shadow: 6px 6px 0 var(--gold); }
.sponsor-row--medium li { width: 220px; height: 110px; }
.sponsor-row--small  li { width: 160px; height: 80px; padding: 10px 14px; }
.sponsor-row--large  img { max-width: 100%; max-height: 118px; }
.sponsor-row--medium img { max-width: 100%; max-height: 80px; }
.sponsor-row--small  img { max-width: 100%; max-height: 58px; }
/* A tier with a single sponsor gets the large treatment so the row
   doesn't look like a lone thumbnail under a full-width heading. */
.sponsor-row li:only-child { width: 300px; height: 150px; box-shadow: 6px 6px 0 var(--gold); }
.sponsor-row li:only-child img { max-height: 118px; }

.sponsors-cta {
    margin-top: 28px;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.sponsors-cta a {
    display: inline-block;
    padding: 6px 2px;
    color: var(--deep-purple);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.sponsors-cta a:hover { color: var(--purple); }

/* ============================================================
   MISSION INTRO
   ============================================================ */
.mission-intro {
    padding: 56px 24px 0;
    background-color: var(--off-white);
    background-image: var(--grain);
    background-size: 300px 300px;
}

.mission-intro .container {
    padding-bottom: 40px;
}

.mission-intro h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    color: var(--deep-purple);
    line-height: 1.2;
    text-wrap: balance;
}

.mission-sub {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--muted-text);
    margin-top: 8px;
}

/* Three short swatches in the order of the cards below, so the heading
   reads as their caption rather than a stranded line. */
.mission-swatches {
    display: flex;
    gap: 6px;
    margin-top: 28px;
}
.mission-swatches span { width: 44px; height: 8px; display: block; }
.mission-swatches span:nth-child(1) { background: var(--purple); }
.mission-swatches span:nth-child(2) { background: var(--gold); }
.mission-swatches span:nth-child(3) { background: var(--charcoal); }

/* ============================================================
   SERVICE CARDS — Flat, full-width three-column
   ============================================================ */
.services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card {
    padding: 52px 40px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

.service-label {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 36px;
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.8;
    flex: 1;
}

.service-cta {
    display: inline-block;
    margin-top: 28px;
    padding: 11px 0;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.2s;
}

.service-cta:hover { opacity: 0.65; }

.card-purple { background: var(--purple); color: var(--off-white); }
.card-purple .service-cta { color: var(--gold); }

.card-gold { background: var(--gold); color: var(--deep-purple); }
.card-gold .service-cta { color: var(--deep-purple); }

.card-charcoal { background: var(--charcoal); color: var(--off-white); }
.card-charcoal .service-cta { color: var(--gold); }

/* ============================================================
   SECTION BADGE
   ============================================================ */
.section-badge-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 36px 24px;
    background: var(--off-white);
}

.section-badge-wrap--grey {
    background: var(--light-grey);
}

.section-badge {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    color: var(--deep-purple);
    border: 2px solid var(--deep-purple);
    border-radius: 999px;
    padding: 7px 22px;
}

/* ============================================================
   STATEMENT — Big Bebas Neue with decorative shapes
   ============================================================ */
.statement {
    padding: 80px 24px 100px;
    background-color: var(--off-white);
    background-image: var(--grain);
    background-size: 300px 300px;
    border-top: 1px solid var(--light-grey);
}

.statement-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.statement-deco {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
}

.deco-bar {
    width: 12px;
    height: 68px;
    border-radius: 999px;
}

.deco-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.deco-bar--gold        { background: var(--gold); }
.deco-bar--purple      { background: var(--purple); }
.deco-circle--deep-purple { background: var(--deep-purple); }

.statement h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(3.5rem, 7vw, 6rem);
    line-height: 1.0;
    letter-spacing: 0.02em;
    color: var(--deep-purple);
    max-width: 900px;
}

/* ============================================================
   ABOUT — Two-column with decorative circle
   ============================================================ */
.about {
    padding: 90px 24px;
    background-color: var(--light-grey);
    background-image: var(--grain);
    background-size: 300px 300px;
}

.about-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
}

.about-text p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--deep-purple);
    margin-bottom: 20px;
}

.about-text p:last-of-type {
    margin-bottom: 36px;
}

.btn-pill {
    display: inline-block;
    padding: 14px 40px;
    background: var(--deep-purple);
    color: var(--off-white);
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid var(--deep-purple);
    transition: background 0.2s, transform 0.1s;
}

.btn-pill:hover {
    background: var(--purple);
    border-color: var(--purple);
    transform: translateY(-2px);
}

.about-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 380px;
}

.about-circle {
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.about-label {
    position: absolute;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    background: var(--off-white);
    border: 2px solid var(--deep-purple);
    border-radius: 999px;
    padding: 6px 18px;
    color: var(--deep-purple);
    z-index: 2;
    white-space: nowrap;
}

.about-label-1 { left: 50%; top: 50%; transform: translate(-50%, -50%); margin-left: 120px; margin-top: -120px; }
.about-label-2 { left: 50%; top: 50%; transform: translate(-50%, -50%); margin-left: -120px; margin-top: 120px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
    padding: 90px 24px;
    background-color: var(--off-white);
    background-image: var(--grain);
    background-size: 300px 300px;
}

.testimonials-inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    padding: 0 64px;
    text-align: center;
}

.testimonials-track {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-slide { display: none; }
.testimonial-slide.active { display: block; }

.testimonial-text {
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--deep-purple);
    margin-bottom: 24px;
}

.testimonial-author {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    color: var(--muted-text);
}

.testimonial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--deep-purple);
    color: var(--off-white);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    font-family: inherit;
}

.testimonial-nav:hover { background: var(--purple); }
.testimonial-prev { left: 0; }
.testimonial-next { right: 0; }

/* ============================================================
   FULL-WIDTH CTA
   ============================================================ */
.cta-full {
    padding: 100px 24px;
    background-color: var(--gold);
    background-image: var(--grain);
    background-size: 300px 300px;
}

.cta-full-inner {
    max-width: 700px;
    margin: 0 auto;
}

.cta-full p {
    font-size: 1.3rem;
    line-height: 1.75;
    color: var(--deep-purple);
    margin-bottom: 40px;
}

.cta-full-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 22px;
    background: var(--deep-purple);
    color: var(--off-white);
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: background 0.2s;
}

.cta-full-btn:hover { background: var(--near-black); }

/* Four ways to support — one tile per destination, on the one gold
   surface. Deep-purple tiles so nothing competes with the ground. */
.ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.way {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 22px 22px;
    background: var(--deep-purple);
    color: var(--off-white);
    text-decoration: none;
    border: 2px solid var(--deep-purple);
    transition: background 0.2s, transform 0.1s;
}

.way:hover { background: var(--near-black); transform: translateY(-2px); }

.way-label {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    color: var(--gold);
    line-height: 1;
}

.way p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--off-white);
    margin: 0;
    flex: 1;
}

.way-arrow {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: var(--gold);
}

.cta-full-inner--wide { max-width: 1100px; }
.cta-full-inner--wide p.cta-lede { max-width: 640px; margin: 0 auto; text-align: center; }

/* ============================================================
   FOOTER — Three-column
   ============================================================ */
footer {
    background-color: var(--near-black);
    background-image: var(--grain);
    background-size: 300px 300px;
    color: var(--steel-grey);
    border-top: 4px solid var(--gold);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav a {
    display: inline-block;
    padding: 4px 0;
    color: var(--off-white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-nav a:hover { color: var(--gold); }

.footer-logo {
    display: block;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: var(--off-white);
    margin-bottom: 8px;
}

.footer-tagline {
    display: block;
    font-style: italic;
    font-size: 0.9rem;
}

.footer-label {
    display: block;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--gold);
    margin-bottom: 10px;
}

.footer-contact a {
    display: inline-block;
    padding: 4px 0;
    color: var(--steel-grey);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-contact a:hover { color: var(--gold); }

.footer-address span:last-child {
    font-size: 0.9rem;
    line-height: 1.65;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 24px;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.8rem;
}

/* ============================================================
   DONATE PAGE
   ============================================================ */
.page-header {
    background-color: var(--deep-purple);
    background-image:
        radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.5) 100%),
        var(--grain);
    background-size: cover, 300px 300px;
    padding: 72px 24px;
    text-align: center;
}

.page-header h1 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    /* Fluid: a single long word ("Accessibility") must still fit a
       320px screen. Same 3.5rem ceiling as before on desktop. */
    font-size: clamp(2.2rem, 10vw, 3.5rem);
    letter-spacing: 0.08em;
    color: var(--gold);
}

.donate-section {
    background-color: var(--off-white);
    background-image:
        radial-gradient(circle, rgba(138,138,154,0.15) 1px, transparent 1px),
        var(--grain);
    background-size: 18px 18px, 300px 300px;
    padding: 80px 0 100px;
    min-height: 60vh;
}

.donate-intro {
    font-style: italic;
    font-size: 1.15rem;
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
    color: var(--deep-purple);
    line-height: 1.8;
}

.qr-code-container {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.qr-card {
    background: var(--off-white);
    padding: 40px;
    border: 2px solid var(--deep-purple);
    border-top: 8px solid var(--purple);
    box-shadow: 8px 8px 0 var(--gold);
    text-align: center;
    max-width: 580px;
    width: 100%;
}

.qr-card h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2rem;
    color: var(--purple);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.qr-card > p {
    font-size: 1rem;
    color: var(--muted-text);
    margin-bottom: 20px;
}

.qr-code-image {
    max-width: 480px;
    width: 100%;
    height: auto;
    margin: 20px 0;
    border: 2px solid var(--steel-grey);
}

.scan-instruction {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    color: var(--deep-purple);
    margin-top: 18px;
    margin-bottom: 12px;
}

.alternative-text {
    font-size: 1rem;
    color: var(--muted-text);
    margin-top: 8px;
}

.alternative-text strong { color: var(--purple); }

.paypal-card {
    max-width: 480px;
    padding: 48px 44px;
}

.paypal-card h2 {
    margin-bottom: 12px;
}

.paypal-card > p {
    max-width: 360px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

.paypal-button-box {
    max-width: 360px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid rgba(107, 45, 135, 0.15);
}

/* The card form is the page's focus: one wide card, then two secondary
   cards side by side, then the (seasonal) booster teaser. */
.donate-card--primary { max-width: 760px; margin: 0 auto 36px; }

.donate-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: stretch;
    max-width: 980px;
    margin: 0 auto 36px;
}
.donate-lookup { font-size: 0.98rem; line-height: 1.6; padding: 12px 16px; background: rgba(107, 45, 135, 0.07); }

.donate-card { max-width: none; display: flex; flex-direction: column; padding: 40px 36px 34px; }
.donate-card h2 { margin-bottom: 10px; }
.donate-card > p { max-width: 40ch; margin: 0 auto 22px; line-height: 1.7; }
.donate-card .btn-pill { align-self: center; font-size: 1.4rem; padding: 16px 48px; }
.donate-card--primary { border-top-color: var(--gold); }
.donate-card--primary .fundraiser-eyebrow { display: block; margin-bottom: 4px; }
.donate-fine { font-size: 0.82rem; color: var(--muted-text); margin: 18px auto 0 !important; text-align: center; }
/* In a column flexbox, auto side margins shrink-wrap the item to its
   min-content width, which squeezed PayPal's button to one letter per
   line. Give the box a real width and centre it with align-self. */
.donate-card .paypal-button-box { margin-top: auto; width: 100%; max-width: 360px; align-self: center; }

/* Five preset amounts plus "Other", all one style, two clean columns */
.amount-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 420px;
    margin: 4px auto 0;
}

.amount-btn {
    display: block;
    text-align: center;
    padding: 16px 8px;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--off-white);
    background: var(--deep-purple);
    border: 2px solid var(--deep-purple);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}

.amount-btn:hover { background: var(--purple); border-color: var(--purple); transform: translateY(-2px); }



/* Membership teaser above the donate cards; hides itself after the close date */
.member-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 32px;
    align-items: center;
    max-width: 980px;
    margin: 0 auto 44px;
    padding: 30px 34px;
    background: var(--off-white);
    border: 2px solid var(--deep-purple);
    box-shadow: 8px 8px 0 var(--gold);
}

.member-note-art {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: center;
    justify-items: center;
}

.member-note-art img { width: 100%; max-width: 120px; height: auto; object-fit: contain; }
.member-note-art img.is-centered { grid-column: 1 / -1; justify-self: center; }
.member-note-art img.is-wide { grid-column: 1 / -1; max-width: 100%; }

.member-note h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    color: var(--deep-purple);
    margin: 6px 0 10px;
}

.member-note p { line-height: 1.7; margin-bottom: 18px; }
.member-note strong { color: var(--purple); }

.back-link {
    text-align: center;
    margin-top: 48px;
}

/* ============================================================
   FUNDRAISER BANNER  (seasonal)
   ============================================================ */
.promo-banner {
    position: relative;
    background: var(--gold);
    color: var(--deep-purple);
    border-bottom: 2px solid var(--deep-purple);
    text-align: center;
}

.promo-banner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 52px;
    color: var(--deep-purple);
    text-decoration: none;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
}

.promo-banner-link strong { font-weight: 400; }
.promo-banner-icon { font-size: 1.2rem; }

.promo-banner-cta {
    background: var(--deep-purple);
    color: var(--off-white);
    padding: 4px 16px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.2s;
}

.promo-banner-link:hover .promo-banner-cta { background: var(--purple); }

.promo-banner-close {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--deep-purple);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-banner-close:hover { color: var(--purple); }

/* ============================================================
   FUNDRAISER PAGE
   ============================================================ */
.fundraiser-section {
    background-color: var(--off-white);
    background-image:
        radial-gradient(circle, rgba(138,138,154,0.15) 1px, transparent 1px),
        var(--grain);
    background-size: 18px 18px, 300px 300px;
    padding: 72px 0 96px;
}

.fundraiser-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
}

.fundraiser-card {
    background: var(--off-white);
    border: 2px solid var(--deep-purple);
    box-shadow: 10px 10px 0 var(--gold);
    padding: 36px;
}

.fundraiser-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.fundraiser-media img {
    display: block;
    width: 100%;
    height: auto;
}

.fundraiser-payment {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 520px;
    text-align: center;
}

.fundraiser-payment .stripe-wrap {
    margin: 0 0 8px;
}

.fundraiser-payment .fundraiser-list {
    text-align: left;
    max-width: 380px;
    margin: 20px auto 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(107, 45, 135, 0.15);
    border-bottom: none;
}

.fundraiser-payment h3 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.9rem;
    letter-spacing: 0.05em;
    color: var(--deep-purple);
    margin: 6px 0 14px;
}

.fundraiser-payment p {
    color: var(--deep-purple);
    line-height: 1.7;
    max-width: 380px;
    margin: 0 auto;
}

.fundraiser-eyebrow {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.16em;
    color: var(--purple);
}

.fundraiser-info h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2.8rem;
    letter-spacing: 0.05em;
    color: var(--deep-purple);
    margin: 6px 0 4px;
}

.fundraiser-price {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2.2rem;
    color: var(--purple);
    margin-bottom: 22px;
}

.fundraiser-price span {
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--muted-text);
}

.fundraiser-info p {
    margin-bottom: 18px;
    line-height: 1.8;
}

.stripe-wrap {
    margin: 28px 0;
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
}

.fundraiser-list {
    list-style: none;
    margin: 24px 0;
    padding: 20px 0;
    border-top: 1px solid rgba(107, 45, 135, 0.15);
    border-bottom: 1px solid rgba(107, 45, 135, 0.15);
}

.fundraiser-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.fundraiser-list li:last-child { margin-bottom: 0; }

.fundraiser-list li::before {
    content: "⚽" / "";
    position: absolute;
    left: 0;
    top: 0;
}

.fundraiser-list strong { color: var(--purple); }

.fundraiser-signoff {
    font-style: italic;
    color: var(--muted-text);
}

.fundraiser-signoff strong {
    font-style: normal;
    color: var(--purple);
}

/* ============================================================
   MEMBERSHIP PAGE — Tier cards
   Four flat panels. Champion is the single gold surface on the
   page (the Gold Rule), so it takes a deep-purple offset shadow
   instead — a gold shadow on gold would disappear.
   ============================================================ */
.tier-section {
    background-color: var(--off-white);
    background-image:
        radial-gradient(circle, rgba(138,138,154,0.15) 1px, transparent 1px),
        var(--grain);
    background-size: 18px 18px, 300px 300px;
    padding: 72px 0 88px;
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.tier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 28px 30px;
    border: 2px solid var(--deep-purple);
    box-shadow: 8px 8px 0 var(--gold);
}

.tier-name {
    display: block;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.16em;
}

.tier-price {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 3.2rem;
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 6px 0 22px;
}

/* CTA sits high in the card, above the benefits list. */
.tier-cta {
    display: block;
    text-align: center;
    padding: 14px 20px;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: background 0.2s, transform 0.1s;
}

.tier-cta:hover { transform: translateY(-2px); }

.tier-cta.is-disabled,
.tier-card--member .tier-cta.is-disabled,
.tier-card--supporter .tier-cta.is-disabled,
.tier-card--patron .tier-cta.is-disabled,
.tier-card--champion .tier-cta.is-disabled {
    background: transparent;
    border: 2px dashed currentColor;
    color: inherit;
    opacity: 0.7;
    cursor: not-allowed;
}

.tier-cta.is-disabled:hover { transform: none; }

.tier-list {
    list-style: none;
    flex: 1;
    margin: 26px 0 20px;
    padding-top: 22px;
    border-top: 1px solid currentColor;
}

.tier-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 0.92rem;
    line-height: 1.7;
}

.tier-list li:last-child { margin-bottom: 0; }

.tier-list li::before {
    content: "\25AA" / "";
    position: absolute;
    left: 0;
    top: 0;
}

.tier-tax {
    font-size: 0.76rem;
    line-height: 1.6;
    padding-top: 16px;
    border-top: 1px solid currentColor;
}

/* --- Member: the light card --- */
.tier-card--member {
    background: var(--off-white);
    color: var(--deep-purple);
}
.tier-card--member .tier-name  { color: var(--purple); }
.tier-card--member .tier-price { color: var(--deep-purple); }
.tier-card--member .tier-cta {
    background: var(--deep-purple);
    color: var(--off-white);
}
.tier-card--member .tier-cta:hover { background: var(--purple); }
.tier-card--member .tier-list,
.tier-card--member .tier-tax { border-color: rgba(107, 45, 135, 0.2); }

/* --- Supporter: Violet Jersey --- */
.tier-card--supporter {
    background: var(--purple);
    color: var(--off-white);
}
.tier-card--supporter .tier-name  { color: var(--gold); }
.tier-card--supporter .tier-cta {
    background: var(--gold);
    color: var(--deep-purple);
}
.tier-card--supporter .tier-cta:hover { background: var(--warm-gold); }
.tier-card--supporter .tier-list,
.tier-card--supporter .tier-tax { border-color: rgba(245, 242, 250, 0.25); }

/* --- Patron: Locker Room Charcoal --- */
.tier-card--patron {
    background: var(--charcoal);
    color: var(--off-white);
}
.tier-card--patron .tier-name  { color: var(--gold); }
.tier-card--patron .tier-cta {
    background: var(--gold);
    color: var(--deep-purple);
}
.tier-card--patron .tier-cta:hover { background: var(--warm-gold); }
.tier-card--patron .tier-list,
.tier-card--patron .tier-tax { border-color: rgba(245, 242, 250, 0.25); }

/* --- Champion: the one gold surface --- */
.tier-card--champion {
    background: var(--gold);
    color: var(--deep-purple);
    box-shadow: 8px 8px 0 var(--deep-purple);
}
.tier-card--champion .tier-name  { color: var(--deep-purple); }
.tier-card--champion .tier-cta {
    background: var(--deep-purple);
    color: var(--off-white);
}
.tier-card--champion .tier-cta:hover { background: var(--near-black); }
.tier-card--champion .tier-list,
.tier-card--champion .tier-tax { border-color: rgba(45, 16, 69, 0.25); }

.tier-flag {
    position: absolute;
    top: -14px;
    right: 18px;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    background: var(--deep-purple);
    color: var(--gold);
    padding: 5px 14px;
    border-radius: 999px;
}

.tier-fineprint {
    max-width: 720px;
    margin: 44px auto 0;
    text-align: center;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--muted-text);
}

.tier-noscript {
    max-width: 720px;
    margin: 32px auto 0;
    padding: 18px 22px;
    border: 2px solid var(--deep-purple);
    background: var(--off-white);
    text-align: center;
    font-size: 0.95rem;
}

/* ============================================================
   FORMS — Free member signup and Fan Store picker
   Flat, square, printed: 2px rules, no radius, no glow.
   ============================================================ */
.join-free {
    background-color: var(--light-grey);
    background-image: var(--grain);
    background-size: 300px 300px;
    padding: 80px 0 90px;
}

.join-card,
.welcome-card {
    background: var(--off-white);
    border: 2px solid var(--deep-purple);
    box-shadow: 10px 10px 0 var(--gold);
    padding: 44px 40px;
    max-width: 720px;
    margin: 0 auto;
}

.join-card h2,
.welcome-card h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2.2rem;
    letter-spacing: 0.05em;
    color: var(--deep-purple);
    margin: 6px 0 12px;
}

.join-intro,
.welcome-lede {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--muted-text);
    margin-bottom: 28px;
}

.join-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 20px;
}

.join-row { display: flex; flex-direction: column; }

.join-row--full { grid-column: 1 / -1; }

.join-row label {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--deep-purple);
    margin-bottom: 7px;
}

.join-optional {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted-text);
}

.join-row input[type="text"],
.join-row input[type="email"] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    color: var(--deep-purple);
    background: #FFFFFF;
    border: 2px solid var(--deep-purple);
    border-radius: 0;
    padding: 11px 13px;
    width: 100%;
    transition: border-color 0.2s;
}

.join-row input::placeholder { color: var(--muted-text); opacity: 1; }
.join-row input:hover { border-color: var(--purple); }

/* Consent checkbox reads as a row, not a column. */
.join-consent {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.join-consent input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    accent-color: var(--purple);
    flex-shrink: 0;
}

.join-consent label {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.9rem;
    letter-spacing: 0;
    line-height: 1.6;
    color: var(--muted-text);
    margin-bottom: 0;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.join-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.join-submit {
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    align-self: start;
}

.join-submit:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

.join-status {
    margin-top: 14px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--muted-text);
}

.join-status.is-error { color: #A32020; }
.join-status a { color: var(--purple); }

.join-success {
    grid-column: 1 / -1;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--deep-purple);
    padding: 22px 24px;
    border: 2px solid var(--purple);
    background: var(--light-grey);
}

.join-success strong { color: var(--purple); }

/* ============================================================
   WELCOME / POST-CHECKOUT PAGE
   ============================================================ */
.welcome-section {
    background-color: var(--off-white);
    background-image:
        radial-gradient(circle, rgba(138,138,154,0.15) 1px, transparent 1px),
        var(--grain);
    background-size: 18px 18px, 300px 300px;
    padding: 72px 0 96px;
}

.welcome-card + .welcome-card { margin-top: 40px; }

.welcome-card .fundraiser-list { margin-bottom: 0; }

/* The "don't check out at the store" warning — deliberately loud. */
/* "Just donate instead" pointer under the tier cards */
.donate-instead {
    max-width: 640px;
    margin: 34px auto 6px;
    padding: 22px 26px 26px;
    border: 2px solid var(--purple);
    background: var(--light-grey);
    text-align: center;
}
.donate-instead p { max-width: 46ch; margin: 0 auto 16px; line-height: 1.7; }

/* Blanket color chooser: two big radio tiles with product photos */
.color-choice { border: 0; padding: 0; margin: 0 0 8px; grid-column: 1 / -1; }
.color-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 560px; }
.color-option {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 12px 16px; background: var(--off-white);
    border: 2px solid var(--deep-purple); cursor: pointer; transition: box-shadow 0.15s, transform 0.1s;
}
.color-option img { width: 100%; max-width: 240px; height: auto; }
.color-option input { position: absolute; top: 12px; left: 12px; width: 22px; height: 22px; accent-color: var(--purple); }
.color-option .color-name { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.15rem; letter-spacing: 0.08em; color: var(--deep-purple); }
.color-option:hover { transform: translateY(-2px); }
.color-option:has(input:checked) { box-shadow: 6px 6px 0 var(--gold); border-color: var(--purple); }
.color-option:has(input:focus-visible) { outline: 3px solid var(--purple); outline-offset: 3px; }
@media (max-width: 480px) { .color-options { grid-template-columns: minmax(0, 1fr); } }

.fanstore-notice {
    border: 2px solid var(--purple);
    background: var(--light-grey);
    padding: 18px 22px;
    margin-bottom: 26px;
}

.fanstore-notice p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--deep-purple);
}

.fanstore-notice p + p { margin-top: 8px; }
.fanstore-notice strong { color: var(--purple); }

.fanstore-browse {
    text-align: center;
    margin-bottom: 30px;
}

/* The slots wrapper is itself a grid item of the two-column .join-form,
   so it must span both columns before its children can lay out full width. */
#pickerSlots {
    grid-column: 1 / -1;
    display: grid;
    gap: 20px;
}

.fanstore-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 20px;
    border: 2px solid var(--deep-purple);
    padding: 22px 24px 24px;
    margin-bottom: 6px;
}

.fanstore-slot legend {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.16em;
    color: var(--purple);
    padding: 0 10px;
}

/* Join-by notice above the tier cards */
.deadline-notice {
    max-width: 720px;
    margin: 0 auto 36px;
    padding: 14px 22px;
    border: 2px solid var(--deep-purple);
    background: var(--gold);
    color: var(--deep-purple);
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
}

.deadline-notice strong {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    margin-right: 6px;
}

/* Closed-season notice, shown in place of the join-by strip */
.closed-notice {
    max-width: 760px;
    margin: 0 auto 44px;
    padding: 34px 36px 30px;
    background: var(--off-white);
    border: 2px solid var(--deep-purple);
    border-top: 8px solid var(--purple);
    box-shadow: 8px 8px 0 var(--gold);
    text-align: center;
}

.closed-notice h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 0.04em;
    color: var(--deep-purple);
    margin: 6px 0 12px;
}

.closed-notice > p { max-width: 58ch; margin: 0 auto 20px; line-height: 1.75; }

.closed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.closed-fineprint { font-size: 0.92rem; color: var(--muted-text); margin-bottom: 0 !important; }

.tier-cta.is-closed,
.tier-card--supporter .tier-cta.is-closed,
.tier-card--patron .tier-cta.is-closed,
.tier-card--champion .tier-cta.is-closed {
    background: transparent;
    border: 2px solid currentColor;
    color: inherit;
    opacity: 0.75;
    cursor: default;
}

/* Once closed, the tier list is context, not an offer: tone it down. */
.membership-closed .tier-tax { display: none; }

/* Closed for the season: only the free Booster card and the decal are
   left, so the four-up grids would strand a lone tile on the left. */
.membership-closed .tier-grid,
.membership-closed .swag-grid {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

/* A small chip of what each level adds, set beside the tier name.
   The chip has its own light ground because the artwork is transparent
   and would otherwise disappear into the purple and charcoal cards. */
.tier-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.tier-head-text { min-width: 0; }

.tier-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    padding: 6px;
    background: #FFFFFF;
    border: 2px solid var(--deep-purple);
    margin-top: 2px;
}

.tier-badge img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* The scarf is a long strip; squaring it would reduce it to a thread. */
.tier-badge--wide { width: 86px; }

/* ============================================================
   WHAT'S INCLUDED — merchandise gallery
   ============================================================ */
.swag {
    background-color: var(--off-white);
    background-image: var(--grain);
    background-size: 300px 300px;
    padding: 76px 0 88px;
    border-top: 2px solid var(--deep-purple);
}

.swag-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    color: var(--deep-purple);
    line-height: 1.2;
    text-align: center;
}

.swag-sub {
    text-align: center;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--muted-text);
    max-width: 640px;
    margin: 10px auto 48px;
    line-height: 1.8;
}

.swag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
}

/* Two products in one tile: apparel and hard goods, side by side. */
.swag-media--pair { gap: 12px; }
.swag-media--pair img { max-width: calc(50% - 6px); }

.swag-item {
    display: flex;
    flex-direction: column;
    background: var(--off-white);
    border: 2px solid var(--deep-purple);
    box-shadow: 8px 8px 0 var(--gold);
}

/* Every photo box is the same height so the captions line up across the
   row, whatever shape the product photo is. */
.swag-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    height: 240px;
    border-bottom: 2px solid var(--deep-purple);
    background: #FFFFFF;
}

.swag-media img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Placeholder state — deliberately obvious so it can't ship unnoticed. */
.swag-media--empty {
    background: var(--light-grey);
    border-bottom: 2px dashed var(--deep-purple);
}

.swag-placeholder {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    line-height: 1.5;
    text-align: center;
    color: var(--muted-text);
    border: 2px dashed var(--steel-grey);
    padding: 16px 20px;
}

.swag-item figcaption {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 20px;
}

.swag-label {
    display: block;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    color: var(--purple);
    margin-bottom: 10px;
}

.swag-item figcaption p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--deep-purple);
    flex: 1;
    margin-bottom: 16px;
}

.swag-tier {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--muted-text);
    padding-top: 14px;
    border-top: 1px solid rgba(107, 45, 135, 0.2);
}

/* Privacy note on the signup card */
.join-privacy {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--deep-purple);
    background: var(--light-grey);
    border: 2px solid var(--purple);
    padding: 14px 18px;
    margin-bottom: 28px;
}

/* Two fan store buttons side by side on the welcome page */
.fanstore-browse {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* Fan Store item dropdown — matches the flat, square input vocabulary */
.fanstore-slot select {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    color: var(--deep-purple);
    background: #FFFFFF;
    border: 2px solid var(--deep-purple);
    border-radius: 0;
    padding: 11px 13px;
    width: 100%;
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--deep-purple) 50%),
        linear-gradient(135deg, var(--deep-purple) 50%, transparent 50%);
    background-position: calc(100% - 19px) 55%, calc(100% - 13px) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

.fanstore-slot select:hover { border-color: var(--purple); }
.fanstore-slot optgroup { font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 0.1em; }

/* Shown when a slot is skipped */
.fanstore-decline p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--purple);
    background: var(--light-grey);
    border: 2px solid var(--purple);
    padding: 12px 16px;
}

/* Running deduction estimate above the submit button */
.fanstore-estimate {
    grid-column: 1 / -1;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--deep-purple);
    background: var(--light-grey);
    border: 2px solid var(--deep-purple);
    padding: 16px 18px;
}

.fanstore-estimate strong { color: var(--purple); }

.fanstore-estimate-note {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--muted-text);
}

/* ============================================================
   SHOP — one hub for the scarf and both BSN stores
   ============================================================ */
.shop-section {
    background-color: var(--off-white);
    background-image:
        radial-gradient(circle, rgba(138,138,154,0.15) 1px, transparent 1px),
        var(--grain);
    background-size: 18px 18px, 300px 300px;
    padding: 72px 0 96px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
}

.shop-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--off-white);
    border: 2px solid var(--deep-purple);
    box-shadow: 10px 10px 0 var(--gold);
}

.shop-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    height: 280px;
    background: #FFFFFF;
    border-bottom: 2px solid var(--deep-purple);
}

.shop-media img {
    display: block;
    width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

.shop-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 30px 30px 28px;
}

.shop-body h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2.2rem;
    letter-spacing: 0.05em;
    color: var(--deep-purple);
    margin: 6px 0 10px;
}

.shop-body p { line-height: 1.75; margin-bottom: 16px; }
.shop-body p:last-of-type { flex: 1; }

.shop-who {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: var(--purple);
    padding: 14px 0 0;
    border-top: 1px solid rgba(107, 45, 135, 0.2);
    margin-top: 6px;
}

.shop-facts {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    flex: 1;
}

.shop-facts li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 8px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--deep-purple);
}

.shop-facts li::before {
    content: "\25AA" / "";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--purple);
}

.shop-body p:last-of-type { flex: 0; }

.shop-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.shop-body .stripe-wrap { margin: 6px 0 4px; justify-content: flex-start; }

/* Deadline chip on the hard goods card */
.shop-deadline {
    display: inline-block;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    background: var(--gold);
    color: var(--deep-purple);
    padding: 6px 14px;
    margin-bottom: 4px;
    border: 2px solid var(--deep-purple);
    margin: 4px 0 16px;
}

.shop-card.is-closed .shop-media { filter: grayscale(1); opacity: 0.55; }
.shop-card.is-closed .shop-deadline { background: var(--light-grey); }

.shop-note {
    max-width: 720px;
    margin: 8px auto 44px;
    padding: 20px 24px;
    border: 2px solid var(--purple);
    background: var(--light-grey);
    line-height: 1.75;
}

.shop-note strong { color: var(--purple); }

/* ============================================================
   AUCTION — coming soon
   ============================================================ */
.auction-section {
    background-color: var(--off-white);
    background-image: var(--grain);
    background-size: 300px 300px;
    padding: 80px 0 96px;
}

.auction-card {
    max-width: 780px;
    margin: 0 auto;
    background: var(--off-white);
    border: 2px solid var(--deep-purple);
    border-top: 8px solid var(--purple);
    box-shadow: 10px 10px 0 var(--gold);
    padding: 48px 48px 44px;
}

.auction-card h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--deep-purple);
    margin: 8px 0 18px;
}

.auction-card > p { line-height: 1.8; margin-bottom: 18px; max-width: 62ch; }

.auction-lots {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin: 30px 0 34px;
}

.lot {
    padding: 22px 22px 20px;
    border: 2px solid var(--deep-purple);
    background: #FFFFFF;
}

.lot-label {
    display: block;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    color: var(--purple);
    margin-bottom: 8px;
}

.lot p { font-size: 0.95rem; line-height: 1.7; margin: 0; }

.auction-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Accessibility statement — reuses the auction card shell */
.statement-card h3 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    color: var(--purple);
    margin: 28px 0 8px;
}

.statement-list {
    margin: 0 0 8px;
    padding-left: 22px;
    max-width: 62ch;
}

.statement-list li { margin-bottom: 8px; line-height: 1.7; }

/* Email addresses and URLs are single tokens; let them break on phones. */
.statement-card a { overflow-wrap: anywhere; }
.statement-list strong { color: var(--purple); }

.statement-date {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid rgba(107, 45, 135, 0.2);
    font-style: italic;
    color: var(--muted-text);
    font-size: 0.9rem;
}

.footer-bottom-link {
    display: inline-block;
    margin-left: 12px;
    padding: 4px 0;
    color: var(--steel-grey);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-bottom-link:hover { color: var(--gold); }
.footer-bottom-link:focus-visible { outline-color: var(--gold); }

/* ============================================================
   FOCUS STYLES — WCAG 2.4.7 Focus Visible
   Deep-purple ring works on all light surfaces (off-white, light-grey, gold).
   Gold ring overrides for dark-background contexts.
   ============================================================ */
:focus-visible {
    outline: 3px solid var(--deep-purple);
    outline-offset: 3px;
}

.card-purple .service-cta:focus-visible,
.card-charcoal .service-cta:focus-visible,
.footer-contact a:focus-visible,
.footer-nav a:focus-visible {
    outline-color: var(--gold);
}

/* .way tiles are deep purple but sit ON the gold band, and the ring
   draws outside the tile -- so the default deep-purple ring is right. */

/* The offset ring lands on the card background, not the button, so
   dark tier cards need a light ring to stay visible. */
.tier-card--supporter .tier-cta:focus-visible,
.tier-card--patron .tier-cta:focus-visible {
    outline-color: var(--off-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Four tier cards get cramped well before the global 768px break. */
@media (max-width: 1100px) {
    .ways { grid-template-columns: minmax(0, 1fr); }
    .shop-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .swag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .swag-item--stores { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        align-items: start;
    }

    .hero-aside {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .hero { padding: 48px 24px 64px; }
    .hero-headline { font-size: clamp(4rem, 18vw, 6rem); }

    .services { grid-template-columns: minmax(0, 1fr); }
    .service-card { min-height: auto; padding: 40px 28px; }

    .about-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .about-visual { min-height: 280px; }
    .about-circle { width: 240px; height: 240px; }
    .about-label { display: none; }

    .statement { padding: 60px 24px 80px; }

    .testimonials-inner { padding: 0 52px; }

    .cta-full { padding: 72px 24px; }
    .cta-full p { font-size: 1.1rem; }
    .cta-full-btn { font-size: 1.6rem; padding: 18px; }

    .footer-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 28px;
        padding: 40px 24px 28px;
    }
    .footer-inner > * { min-width: 0; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-contact a { overflow-wrap: anywhere; }

    .qr-card { padding: 28px 20px; box-shadow: 5px 5px 0 var(--gold); }

    .promo-banner-link { font-size: 1rem; padding: 12px 44px; gap: 10px; }

    .fundraiser-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .fundraiser-card { box-shadow: 6px 6px 0 var(--gold); padding: 24px; }
    .fundraiser-media { padding: 20px; }
    .fundraiser-info h2 { font-size: 2.2rem; }
    .fundraiser-payment { max-width: 100%; }

    /* --- Sponsors --- */
    .sponsors { padding: 40px 16px 44px; }
    .sponsor-row--large  li { width: min(300px, 100%); height: auto; min-height: 120px; }
    .sponsor-row--medium li { width: min(220px, 46%); height: 96px; }
    .sponsor-row--small  li { width: min(160px, 30%); height: 70px; }
    .sponsor-row li:only-child { width: min(300px, 82%); height: auto; min-height: 120px; }
    /* Phones: one short line, the whole banner is the link. */
    .promo-banner-more, .promo-banner-cta { display: none; }

    /* --- Home: ways band --- */
    .ways { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 28px; }

    /* --- Shop --- */
    .shop-section { padding: 48px 0 64px; }
    .shop-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .shop-card { box-shadow: 6px 6px 0 var(--gold); }
    .shop-media { height: 220px; }
    .shop-body { padding: 24px 22px; }
    .shop-body h2 { font-size: 1.9rem; }

    /* --- Auction --- */
    .auction-section { padding: 48px 0 64px; }
    .auction-card { padding: 28px 22px 26px; box-shadow: 6px 6px 0 var(--gold); }
    .auction-lots { grid-template-columns: minmax(0, 1fr); }

    /* --- Membership --- */
    .tier-badge { width: 54px; height: 54px; }
    .tier-badge--wide { width: 76px; }
    .tier-section { padding: 48px 0 64px; }
    .tier-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .tier-card { box-shadow: 6px 6px 0 var(--gold); padding: 30px 24px 26px; }
    .tier-card--champion { box-shadow: 6px 6px 0 var(--deep-purple); }
    .tier-price { font-size: 2.8rem; }
    .tier-fineprint { margin-top: 34px; }

    /* --- Donate --- */
    .member-note { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 20px; box-shadow: 6px 6px 0 var(--gold); }
    .member-note-art { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .member-note-art img { max-width: 64px; }
    .member-note-art img.is-wide { grid-column: 1 / -1; max-width: 240px; }
    .donate-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }

    .donate-card { padding: 28px 20px 26px; }
    .donate-card .btn-pill { font-size: 1.2rem; padding: 14px 32px; }

    /* --- Forms --- */
    .join-free { padding: 56px 0 64px; }
    .join-card,
    .welcome-card { padding: 28px 22px; box-shadow: 6px 6px 0 var(--gold); }
    .join-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .join-submit { width: 100%; text-align: center; }

    /* --- Swag gallery --- */
    .swag { padding: 48px 0 56px; }
    .swag-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .swag-item { box-shadow: 6px 6px 0 var(--gold); }
    .swag-sub { margin-bottom: 32px; }

    /* --- Welcome --- */
    .welcome-section { padding: 48px 0 64px; }
    .fanstore-browse .btn-pill { width: 100%; }
    .welcome-card + .welcome-card { margin-top: 28px; }
    .fanstore-slot { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 20px; }
}

/* ============================================================
   REDUCED MOTION — WCAG 2.3.3 Animation from Interactions
   ============================================================ */
@media (max-width: 480px) {
    .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
    .site-nav { padding: 12px 16px; }
    .nav-logo { font-size: 1.05rem; letter-spacing: 0.08em; }
    .nav-toggle { padding: 12px 14px; gap: 0; }
    .nav-toggle-text {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .nav-links { padding-left: 16px; padding-right: 16px; }
}

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