/* Final mobile overrides loaded after the main visual system. */
@media (max-width: 650px) {
    .home-hero {
        background:
            radial-gradient(circle at 78% 10%, rgba(200, 184, 223, .34), transparent 24%),
            linear-gradient(160deg, var(--bg) 0 57%, #ded3c5 57% 100%);
    }

    .home-hero .hero-grid {
        padding-top: 48px;
    }

    .hero-copy {
        isolation: isolate;
    }

    .hero-copy::before {
        content: '';
        position: absolute;
        top: -68px;
        right: -105px;
        z-index: -2;
        width: 260px;
        height: 260px;
        border: 1px solid rgba(31, 30, 27, .15);
        border-radius: 50%;
    }

    .hero-copy .eyebrow {
        display: inline-flex;
        margin-bottom: 24px;
        padding: 8px 11px;
        border: 1px solid rgba(31, 30, 27, .35);
        border-radius: 999px;
        background: rgba(251, 250, 247, .55);
        backdrop-filter: blur(8px);
    }

    .hero-copy .eyebrow::before {
        display: none;
    }

    .home-hero h1 {
        isolation: isolate;
        width: max-content;
        max-width: 100%;
        margin-left: -3px;
        font-size: clamp(92px, 29vw, 126px);
        letter-spacing: -.075em;
        animation: mobile-title-in .8s cubic-bezier(.2, .8, .2, 1) both;
    }

    .home-hero h1::after {
        content: '';
        position: absolute;
        right: -10px;
        bottom: -13px;
        left: 5px;
        z-index: -1;
        height: 18px;
        background: linear-gradient(100deg, var(--taupe) 0 34%, var(--sand) 52%, var(--taupe) 72% 100%);
        background-size: 220% 100%;
        box-shadow: 0 7px 16px rgba(88, 87, 71, .13);
        opacity: 0;
        transform: translateY(9px) rotate(-4deg) scaleX(0);
        transform-origin: left;
        animation: mobile-ribbon-in 1.05s .38s cubic-bezier(.16, 1, .3, 1) forwards;
    }

    .home-hero .lead {
        position: relative;
        margin: 44px 0 22px;
        padding: 3px 0 3px 18px;
        border-left: 2px solid var(--olive);
        font-size: 16px;
        line-height: 1.62;
        animation: mobile-copy-in .7s .18s ease both;
    }

    .home-hero .btn {
        box-shadow: 5px 5px 0 var(--taupe);
    }

    .editorial-grid {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 0;
    }

    .editorial-grid > div {
        padding: 28px 22px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .editorial-grid .section-title {
        font-size: clamp(43px, 13vw, 58px);
        line-height: .94;
    }

    .editorial-grid .text-muted {
        font-size: 14px;
        line-height: 1.65;
    }

    .editorial-grid .btn {
        width: 100%;
        white-space: normal;
    }

    .editorial-grid img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-position: center 42%;
    }

    .quote {
        width: min(100%, 340px);
        margin-inline: auto;
        padding: 0 8px;
        font-size: clamp(36px, 10.5vw, 46px);
        line-height: 1.04;
        letter-spacing: -.025em;
        text-align: center;
        text-wrap: balance;
    }

    .cards > .card > img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
    }

    .cards > .card:nth-child(3) > img {
        object-position: center 38%;
    }

    .upcoming-list {
        gap: 10px;
    }

    .upcoming-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 18px;
        min-height: 0;
        padding: 21px;
    }

    .upcoming-row.is-next {
        padding-top: 64px;
        box-shadow: inset 4px 0 0 var(--olive);
    }

    .next-event-badge {
        top: 18px;
        right: auto;
        left: 21px;
    }

    .upcoming-info {
        align-self: start;
    }

    .upcoming-info h3 {
        margin-bottom: 7px;
        font-size: clamp(34px, 10vw, 42px);
        line-height: .95;
    }

    .upcoming-info p {
        font-size: 13px;
        line-height: 1.5;
    }

    .upcoming-date {
        padding: 8px 11px;
        font-size: 10px;
    }

    .upcoming-row a {
        display: flex;
        min-height: 38px;
        align-items: center;
        margin-top: -4px;
    }

    .events-toggle {
        width: 100%;
        min-height: 48px;
        margin-top: 20px;
    }
}

@keyframes mobile-title-in {
    from { opacity: 0; transform: translateY(22px) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes mobile-ribbon-in {
    0% {
        opacity: 0;
        background-position: 100% 0;
        transform: translateY(9px) rotate(-4deg) scaleX(0)
    }
    50% {
        opacity: 1;
        transform: translateY(-2px) rotate(-1deg) scaleX(1.06)
    }
    72% {
        background-position: 0 0;
        transform: translateY(1px) rotate(-2.5deg) scaleX(.985)
    }
    100% {
        opacity: 1;
        background-position: 0 0;
        transform: translateY(0) rotate(-2deg) scaleX(1)
    }
}

@keyframes mobile-copy-in {
    from { opacity: 0; transform: translateY(14px) }
    to { opacity: 1; transform: translateY(0) }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero h1,
    .home-hero h1::after,
    .home-hero .lead {
        animation: none;
    }

    .home-hero h1::after {
        opacity: 1;
        transform: translateY(0) rotate(-2deg) scaleX(1);
    }
}