/* Shared component styles. */

/* campaigns_unified.html */
@media (max-width: 767px) {
    .campaign-card__banner-row { gap: 1rem; }
    .campaign-card__title-row h3 {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .campaign-card__stat > .flex { align-items: center; }
    .campaign-card__support-grid > div {
        min-height: 44px;
        padding-block: 0.7rem;
    }
}

@media (max-width: 479px) {
    .campaign-card__banner-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .campaign-card__duration { text-align: left; }
    .campaign-card__title-row { gap: 0.75rem; }
}

/* featured_orphan_card.html */
.animate-pulse-slow {
        animation: pulse 2s ease-in-out infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* floating_orphan_banner.html */
/* Heartbeat Animation for CTA Button */
    @keyframes banner-heartbeat {
        0%, 100% { transform: scale(1); }
        15% { transform: scale(1.1); }
        30% { transform: scale(1); }
        45% { transform: scale(1.08); }
        60% { transform: scale(1); }
    }
    
    .banner-heartbeat-animation {
        animation: banner-heartbeat 2s ease-in-out infinite;
    }
    
    /* Glow Animation for Card */
    @keyframes banner-glow {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 0.7; }
    }
    
    .banner-glow-animation {
        animation: banner-glow 3s ease-in-out infinite;
    }
    
    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
        .banner-heartbeat-animation,
        .banner-glow-animation,
        .banner-glow-animation {
            opacity: 0.5;
        }
    }

/* image_carousel.html */
.carousel-slide {
        backface-visibility: hidden;
    }
    .carousel-slide.active {
        opacity: 1;
        z-index: 10;
    }
    .carousel-slide:not(.active) {
        opacity: 0;
        z-index: 0;
    }
    .carousel-dot.active {
        background-color: rgb(34 197 94);
        transform: scale(1.1);
    }

/* impact_carousel.html */
.impact-carousel {
        position: relative;
        overflow: hidden;
        /* Full-bleed: break out of the parent container to span the viewport. */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: var(--hog-section-space) 0;
        background: var(--hog-paper);
        border-block: 1px solid var(--hog-border);
    }
    .impact-carousel-glow { position: relative; z-index: 1; }

    .impact-carousel__header {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(1rem, 2vw, 1.5rem);
        width: min(1400px, calc(100% - 2rem));
        margin-inline: auto;
    }

    .impact-carousel__eyebrow {
        grid-column: 1 / span 3;
        margin: 0;
        padding-top: 0.75rem;
        color: var(--ic-red);
        border-top: 2px solid var(--ic-red);
        font-size: 0.78rem;
        font-weight: 800;
    }

    .impact-carousel__header > div { grid-column: 5 / -1; }

    .impact-carousel__header h2 {
        max-width: 15ch;
        margin: 0;
        color: var(--hog-ink);
        font-size: clamp(2.25rem, 4.5vw, 4rem);
        font-weight: 800;
        line-height: 1.04;
        text-wrap: balance;
    }

    .impact-carousel__header > div > p {
        max-width: 58ch;
        margin: 1.2rem 0 0;
        color: var(--hog-muted);
        font-size: clamp(1rem, 1.3vw, 1.125rem);
        line-height: 1.7;
        text-wrap: pretty;
    }

    .impact-carousel-viewport {
        position: relative;
        margin-top: clamp(2.5rem, 5vw, 4.5rem);
        overflow: hidden;
        touch-action: pan-y;
        direction: ltr;            /* keep geometry left-to-right; centering is RTL-stable */
    }
    /* Track stays in normal document flow. JS centers slides by scrolling the
       viewport, so navigation never applies a transform to the carousel. */
    .impact-carousel-track {
        position: relative;
        width: max-content;
        white-space: nowrap;
        font-size: 0;
        padding-inline: .65rem;
    }

    /* Modus width-morph: every slide same height; inactive are thin strips,
       active expands wide while the viewport scrolls to its center. */
    .impact-slide {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin-right: .65rem;       /* gap */
        width: 30vw;                /* inactive (mobile) */
        height: 62vh;
        min-height: 360px;
        border-radius: var(--hog-radius);
        overflow: hidden;
        opacity: .92;
        white-space: normal;
        transition: width 900ms cubic-bezier(.16,1,.3,1), opacity 900ms ease;
    }
    .impact-slide.is-active { width: 84vw; opacity: 1; }

    /* Mobile: one complete story at a time. Inactive slides stay in the loop
       for carousel geometry but no longer become tall image slivers. */
    @media (max-width: 767px) {
        .impact-carousel {
            --ic-mobile-slide-width: min(92vw, 36rem);
            padding: var(--hog-section-space) 0;
        }
        .impact-carousel__header { grid-template-columns: 1fr; gap: 1.5rem; }
        .impact-carousel__eyebrow,
        .impact-carousel__header > div { grid-column: 1; }
        .impact-carousel__eyebrow { max-width: 12rem; }
        .impact-carousel-viewport { margin-top: 2rem; }
        .impact-carousel-track {
            padding-inline: calc((100vw - var(--ic-mobile-slide-width)) / 2);
        }
        .impact-slide {
            width: 0;
            height: clamp(22rem, 64dvh, 34rem);
            min-height: 0;
            margin-right: 0;
            border-radius: 0.75rem;
            opacity: 0;
            pointer-events: none;
        }
        .impact-slide.is-active {
            width: var(--ic-mobile-slide-width);
            opacity: 1;
            pointer-events: auto;
        }
        .impact-slide.is-active:hover .impact-slide-img { transform: none; }
        .impact-arrow {
            width: 3rem;
            height: 3rem;
        }
    }

    @media (min-width: 768px)  {
        .impact-slide { width: 22vw; }
        .impact-slide.is-active { width: 70vw; }
    }
    @media (min-width: 1024px) {
        .impact-slide { width: 14vw; }
        .impact-slide.is-active { width: 52vw; }
    }

    .impact-slide-img {
        position: absolute; inset: 0;
        height: 100%; width: 100%;
        object-fit: cover;
        transition: transform 1200ms cubic-bezier(.16,1,.3,1);
    }
    .impact-slide.is-active:hover .impact-slide-img { transform: scale(1.05); }

    /* Caption only legible/visible on the active slide */
    .impact-slide-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(5, 25, 19, .9), rgba(5, 25, 19, .08) 62%, transparent);
        opacity: 0;
        transition: opacity .6s ease;
    }
    .impact-slide.is-active .impact-slide-overlay { opacity: 1; }

    .impact-slide-caption {
        position: absolute;
        left: clamp(1.25rem, 3vw, 2.5rem);
        right: clamp(1.25rem, 3vw, 2.5rem);
        bottom: clamp(1.25rem, 3vw, 2.25rem);
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .6s ease .2s, transform .6s cubic-bezier(.16,1,.3,1) .2s;
        white-space: normal;
        overflow: hidden;
        unicode-bidi: plaintext;   /* auto LTR/RTL per caption language */
        text-align: start;
    }
    .impact-slide.is-active .impact-slide-caption { opacity: 1; transform: translateY(0); }

    .impact-slide-caption > p {
        margin: 0 0 0.65rem;
        color: rgba(255,255,255,.78);
        font-size: 0.72rem;
        font-weight: 800;
        text-shadow: 0 2px 12px rgba(0,0,0,.85);
    }

    .impact-slide-title {
        font-size: clamp(1.5rem, 3vw, 2.6rem);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -.01em;
        color: #fff;
        text-overflow: ellipsis;
        overflow: hidden;
        text-shadow: 0 2px 18px rgba(0,0,0,.9);
        text-wrap: balance;
    }
    .impact-slide-loc { margin-top: .4rem; font-size: .95rem; color: rgba(255,255,255,.75); }

    .impact-carousel__controls {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 2rem;
    }

    .impact-arrow {
        display: inline-flex; align-items: center; justify-content: center;
        height: 2.9rem; width: 2.9rem;
        border-radius: var(--hog-radius);
        color: var(--ic-green);
        background: var(--hog-canvas);
        border: 1px solid rgba(11,61,46,.18);
        box-shadow: 0 6px 18px -8px rgba(11,61,46,.25);
        transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform 120ms ease;
    }
    .impact-arrow:hover { background: var(--ic-red); border-color: var(--ic-red); color: #fff; }
    .impact-arrow:active { transform: scale(.96); }

    /* Used by JS to snap to a layout for measurement without animating. */
    .ic-no-anim .impact-slide,
    .ic-no-anim .impact-slide-img,
    .ic-no-anim .impact-slide-caption,
    .ic-no-anim .impact-slide-overlay { transition: none !important; }

    @media (prefers-reduced-motion: reduce) {
        .impact-slide, .impact-slide-img, .impact-slide-caption, .impact-slide-overlay { transition: none; }
    }

/* impact_dashboard.html */
.impact-story {
        width: min(var(--hog-content-max), 100%);
        margin-inline: auto;
        color: var(--hog-ink);
        border-block: 1px solid var(--hog-border);
        font-synthesis: none;
    }

    .impact-story__masthead {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(1rem, 2vw, 1.5rem);
        align-items: start;
        padding-block: var(--hog-section-space);
    }

    .impact-story__eyebrow {
        grid-column: 1 / span 3;
        margin: 0;
        padding-top: 0.75rem;
        color: var(--hog-red);
        border-top: 2px solid var(--hog-red);
        font-size: 0.78rem;
        font-weight: 800;
    }

    .impact-story__masthead > div {
        grid-column: 5 / -1;
    }

    .impact-story__masthead h2 {
        max-width: 14ch;
        margin: 0;
        color: var(--hog-ink);
        font-size: clamp(2.35rem, 5vw, 4.75rem);
        font-weight: 800;
        line-height: 1.02;
        text-wrap: balance;
    }

    .impact-story__masthead > div > p {
        max-width: 58ch;
        margin: 1.25rem 0 0;
        color: var(--hog-muted);
        font-size: clamp(1rem, 1.3vw, 1.125rem);
        line-height: 1.65;
        text-wrap: pretty;
    }

    .impact-story__tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        padding: 1px;
        background: var(--hog-green);
    }

    .impact-story__tabs button {
        min-height: 52px;
        padding: 0.8rem 1rem;
        color: oklch(0.96 0.018 85 / 0.74);
        border: 0;
        background: var(--hog-green);
        font-size: 0.82rem;
        font-weight: 800;
        text-align: center;
        cursor: pointer;
        transition: color 180ms ease, background-color 180ms ease, transform 180ms var(--hog-ease);
    }

    .impact-story__tabs button[aria-selected="true"] {
        color: var(--hog-canvas);
        background: var(--hog-red);
    }

    .impact-story__tabs button:hover,
    .impact-story__tabs button:focus-visible {
        color: var(--hog-canvas);
        background: oklch(1 0 0 / 0.12);
    }

    .impact-story__tabs button:active {
        transform: scale(0.96);
    }

    .impact-story__stage {
        position: relative;
        min-height: clamp(38rem, 56vw, 50rem);
        padding: clamp(8rem, 13vw, 12rem) clamp(1.25rem, 5vw, 5rem) clamp(2rem, 6vw, 5rem);
        overflow: hidden;
        background: var(--hog-green);
    }

    .impact-story__word {
        position: absolute;
        inset-block-start: clamp(1rem, 2vw, 2rem);
        inset-inline: 0;
        margin: 0;
        width: 100%;
        color: oklch(0.96 0.018 85 / 0.1);
        font-size: clamp(7rem, 19vw, 18rem);
        font-weight: 900;
        letter-spacing: -0.08em;
        line-height: 0.72;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
        user-select: none;
    }

    .impact-story__panels {
        position: relative;
        z-index: 1;
        display: grid;
        width: min(100%, 76rem);
        margin-inline: auto;
        border-top: 6px solid var(--hog-red);
        background: var(--hog-paper);
        box-shadow: 0 28px 70px oklch(0.12 0.03 160 / 0.28);
    }

    .impact-story__panel {
        grid-area: 1 / 1;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(2rem, 4vw, 4rem);
        align-items: center;
        min-height: clamp(28rem, 40vw, 36rem);
        padding: clamp(2rem, 4.5vw, 4rem);
        animation: impact-panel-in 220ms var(--hog-ease) both;
    }

    .impact-story__metric {
        grid-column: 1 / span 6;
        min-width: 0;
    }

    .impact-story__detail {
        grid-column: 8 / -1;
        min-width: 0;
        padding-inline-start: clamp(1.5rem, 3vw, 3rem);
        border-inline-start: 1px solid var(--hog-border);
    }

    .impact-story__panel[hidden] { display: none; }

    .impact-story__kicker {
        margin: 0;
        padding-inline-start: 0.85rem;
        color: var(--hog-red-dark);
        border-inline-start: 3px solid var(--hog-red);
        font-size: 0.82rem;
        font-weight: 800;
        line-height: 1.4;
    }

    .impact-story__value {
        margin: clamp(1.75rem, 4vw, 3rem) 0 0;
        color: var(--hog-red);
        font-size: clamp(4.5rem, 9vw, 8.5rem);
        font-weight: 900;
        letter-spacing: -0.07em;
        line-height: 0.82;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .impact-story__value span {
        font-size: 0.38em;
        vertical-align: top;
    }

    .impact-story__panel h3 {
        max-width: 14ch;
        margin: 1.25rem 0 0;
        font-size: clamp(2rem, 3.8vw, 3.7rem);
        font-weight: 800;
        letter-spacing: -0.045em;
        line-height: 1;
        text-wrap: balance;
    }

    .impact-story__copy {
        max-width: 46ch;
        margin: 0;
        color: var(--hog-muted);
        font-size: clamp(1rem, 1.3vw, 1.1rem);
        line-height: 1.65;
        text-wrap: pretty;
    }

    .impact-story__facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin: 2rem 0;
    }

    .impact-story__facts div {
        padding-block-start: 1rem;
        border-block-start: 1px solid var(--hog-border);
    }

    .impact-story__facts dt {
        color: var(--hog-muted);
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .impact-story__facts dd {
        margin: 0.5rem 0 0;
        overflow-wrap: anywhere;
        color: var(--hog-ink);
        font-size: clamp(1.25rem, 2vw, 1.75rem);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .impact-story__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0.8rem 1.25rem;
        color: var(--hog-canvas) !important;
        background: var(--hog-red);
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
        user-select: none;
        transition: transform 180ms var(--hog-ease), background-color 180ms ease;
    }

    .impact-story__cta:hover,
    .impact-story__cta:focus-visible {
        background: var(--hog-red-dark);
        transform: translateY(-2px);
    }

    .impact-story__cta:active { transform: scale(0.96); }

    @keyframes impact-panel-in {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 900px) {
        .impact-story__stage {
            min-height: 0;
            padding: clamp(7rem, 18vw, 10rem) clamp(1rem, 4vw, 2rem) 2rem;
        }
        .impact-story__panels {
            width: 100%;
        }
        .impact-story__panel {
            grid-template-columns: 1fr;
            min-height: 0;
        }
        .impact-story__metric,
        .impact-story__detail {
            grid-column: 1;
        }
        .impact-story__detail {
            padding-block-start: 2rem;
            padding-inline-start: 0;
            border-block-start: 1px solid var(--hog-border);
            border-inline-start: 0;
        }
        .impact-story__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 600px) {
        .impact-story { width: 100%; }
        .impact-story__masthead {
            grid-template-columns: 1fr;
            gap: 1.5rem;
            padding-block: 3rem;
        }
        .impact-story__eyebrow,
        .impact-story__masthead > div { grid-column: 1; }
        .impact-story__eyebrow { max-width: 12rem; }
        .impact-story__tabs {
            grid-template-columns: 1fr;
        }
        .impact-story__stage { padding: 5.5rem 1rem 1rem; }
        .impact-story__word {
            font-size: clamp(5.5rem, 29vw, 9rem);
            line-height: 0.76;
        }
        .impact-story__panel { padding: 2.25rem 1.25rem; }
        .impact-story__value { font-size: clamp(3.75rem, 20vw, 6rem); }
        .impact-story__panel h3 { font-size: clamp(2rem, 10vw, 3rem); }
        .impact-story__facts { gap: 0.75rem; }
    }

    @media (prefers-reduced-motion: reduce) {
        .impact-story__panel { animation: none; }
        .impact-story__tabs button,
        .impact-story__cta { transition: none; }
        .impact-story__cta:hover,
        .impact-story__cta:focus-visible { transform: none; }
    }

/* media_gallery.html */
.media-carousel-track {
        cursor: grab;
        overscroll-behavior-inline: contain;
        scroll-behavior: auto;
        touch-action: pan-y;
    }

    .media-carousel-track.is-dragging {
        cursor: grabbing;
        user-select: none;
    }

    .media-carousel-card {
        animation: media-card-enter .35s cubic-bezier(.2, .8, .2, 1) both;
        animation-delay: calc(var(--card-index, 0) * 25ms);
        transform-origin: center bottom;
        transform: translate3d(0, 0, 0) scale(1);
        transition: transform .48s cubic-bezier(.22, .61, .36, 1);
        backface-visibility: hidden;
        will-change: transform;
    }

    .media-carousel-card:hover,
    .media-carousel-card:focus-visible {
        transform: translate3d(0, -5px, 0) scale(1.012);
    }

    .media-carousel-card.is-active {
        transform: translate3d(0, -7px, 0) scale(1.02);
    }

    .media-carousel-image {
        backface-visibility: hidden;
        transform: scale(1.01);
        transform-origin: center;
        transition: transform .6s cubic-bezier(.22, .61, .36, 1), filter .45s ease;
        will-change: transform;
    }

    .media-carousel-card:hover .media-carousel-image,
    .media-carousel-card.is-active .media-carousel-image {
        transform: scale(1.08);
        filter: saturate(1.05);
    }

    @keyframes media-card-enter {
        from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.96); }
        to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    /* Lightbox transitions */
    #media-lightbox { transition: opacity .25s ease; opacity: 0; }
    #media-lightbox.is-open { opacity: 1; }
    #media-lightbox .lightbox-stage {
        transform: scale(.96);
        opacity: 0;
        transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
    }
    #media-lightbox.is-open .lightbox-stage { transform: scale(1); opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
        .media-carousel-card,
        .media-carousel-image,
        .media-carousel-arrow,
        #media-lightbox,
        #media-lightbox .lightbox-stage {
            animation: none;
            transition: none;
        }
        .media-carousel-card,
        .media-carousel-card.is-active,
        .media-carousel-card:hover,
        .media-carousel-card:focus-visible { transform: none; }
        .media-carousel-image,
        .media-carousel-card:hover .media-carousel-image,
        .media-carousel-card.is-active .media-carousel-image { transform: scale(1); }
    }

    html.rtl .media-carousel [data-carousel-prev],
    html[dir="rtl"] .media-carousel [data-carousel-prev] { left: auto; right: .75rem; }
    html.rtl .media-carousel [data-carousel-next],
    html[dir="rtl"] .media-carousel [data-carousel-next] { right: auto; left: .75rem; }
    html.rtl .media-carousel-fade-start,
    html[dir="rtl"] .media-carousel-fade-start { left: auto; right: 0; background: white; }
    html.rtl .media-carousel-fade-end,
    html[dir="rtl"] .media-carousel-fade-end { right: auto; left: 0; background: white; }

/* media_slider.html */
.media-slide {
        backface-visibility: hidden;
    }
    .media-slide.active {
        opacity: 1 !important;
        z-index: 10;
    }
    .media-slide:not(.active) {
        z-index: 0;
    }
    .slider-dot.active {
        background-color: rgb(34 197 94);
        transform: scale(1.1);
    }
    .slider-dot.active svg {
        color: white;
    }

/* orphan_info.html */
.orphan-profile-template {
    position: relative;
    margin: -2.5rem calc(50% - 50vw) 0;
    min-height: calc(100dvh - 4rem);
    overflow: hidden;
    background: var(--hog-green);
    color: var(--hog-ink);
    background-color: var(--hog-green);
}

.orphan-profile-template::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--hog-green) 82%, transparent);
    pointer-events: none;
}

.orphan-profile-wrap {
    position: relative;
    margin-inline: auto;
    max-width: 86rem;
    padding: clamp(1.5rem, 4vw, 4rem);
}

.orphan-media-card {
    border-radius: 1rem;
    overflow: hidden;
    background: var(--hog-ink);
    box-shadow: 0 30px 80px color-mix(in srgb, var(--hog-ink) 42%, transparent);
}

.orphan-media-frame {
    height: 100%;
    border: 1px solid color-mix(in srgb, var(--hog-canvas) 22%, transparent);
    border-radius: 1rem;
    overflow: hidden;
    transform: translateZ(0);
}

.orphan-media-card .media-slider-container,
.orphan-media-card .media-slide,
.orphan-media-card img {
    height: 100%;
    max-height: 100%;
    width: 100%;
}

.orphan-media-card img {
    display: block;
    object-fit: cover;
    filter: saturate(.92) contrast(1.02);
}

.orphan-media-card .media-slider-container > div:first-child {
    border-radius: 1rem;
    box-shadow: none;
    overflow: hidden;
}

.orphan-profile-panel,
.orphan-profile-action,
.orphan-profile-checkout {
    border: 1px solid color-mix(in srgb, var(--hog-canvas) 28%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--hog-paper) 96%, transparent);
    box-shadow: 0 24px 70px color-mix(in srgb, var(--hog-ink) 24%, transparent);
}

.orphan-profile-panel {
    color: var(--hog-ink);
}

.orphan-profile-status {
    border: 1px solid color-mix(in srgb, var(--hog-green) 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--hog-canvas) 88%, transparent);
    color: var(--hog-green);
}

.orphan-profile-status--open {
    border-color: color-mix(in srgb, var(--hog-red) 42%, transparent);
    background: var(--hog-red-soft);
    color: var(--hog-red-dark);
}

.orphan-profile-fact {
    border: 1px solid color-mix(in srgb, var(--hog-green) 16%, transparent);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--hog-canvas) 90%, transparent);
}

.orphan-profile-story {
    border-top: 1px solid color-mix(in srgb, var(--hog-green) 18%, transparent);
    padding-top: 1.25rem;
}

.orphan-profile-progress {
    border: 1px solid color-mix(in srgb, var(--hog-green) 16%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--hog-canvas) 90%, transparent);
}

.orphan-profile-progress-bar {
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hog-green) 16%, transparent);
    overflow: hidden;
}

.orphan-profile-progress-bar span {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: var(--hog-red);
}

.sponsor-btn {
    position: relative;
    overflow: hidden;
    background: var(--hog-red);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.sponsor-btn:hover {
    transform: translateY(-2px);
    background: var(--hog-red-dark);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--hog-red) 30%, transparent);
}

.sponsor-btn:active { transform: translateY(0) scale(.99); }

.sponsor-btn__shine {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--hog-canvas) 30%, transparent);
    transform: translateX(-120%);
    transition: transform .6s ease;
}

.sponsor-btn:hover .sponsor-btn__shine { transform: translateX(120%); }

.sponsor-burst {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.sponsor-burst__ripple {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    transform: translate(-50%, -50%) scale(0);
    background: color-mix(in srgb, var(--hog-red) 44%, transparent);
    animation: burst-ripple .75s ease-out forwards;
}

.orphan-profile-heading,
.orphan-profile-value {
    color: var(--hog-ink);
}

.orphan-profile-copy {
    color: var(--hog-muted);
}

.orphan-profile-label,
.orphan-profile-link {
    color: var(--hog-green-mid);
}

.orphan-profile-accent {
    color: var(--hog-red-dark);
}

.orphan-profile-success {
    color: var(--hog-success);
}

.orphan-gift-btn,
.orphan-checkout-header {
    color: var(--hog-canvas);
    background: var(--hog-green);
}

.orphan-gift-btn {
    box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--hog-green) 34%, transparent);
}

.orphan-gift-btn:hover {
    background: var(--hog-green-mid);
}

.orphan-checkout-subtitle {
    color: color-mix(in srgb, var(--hog-canvas) 82%, transparent);
}

.orphan-checkout-header h2 {
    color: var(--hog-canvas);
}

.orphan-profile-back {
    color: var(--hog-green);
    background: color-mix(in srgb, var(--hog-paper) 94%, transparent);
}

.orphan-profile-back:hover {
    background: var(--hog-paper);
}

.orphan-profile-safety {
    color: var(--hog-canvas);
    border: 1px solid color-mix(in srgb, var(--hog-canvas) 20%, transparent);
    background: color-mix(in srgb, var(--hog-ink) 48%, transparent);
}

.orphan-profile-safety svg {
    color: color-mix(in srgb, var(--hog-canvas) 72%, transparent);
}

@keyframes burst-ripple {
    to { transform: translate(-50%, -50%) scale(48); opacity: 0; }
}

@media (max-width: 767px) {
    .orphan-profile-template {
        margin-inline: calc(50% - 50vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sponsor-btn,
    .sponsor-btn__shine,
    .sponsor-burst__ripple {
        animation: none !important;
        transition: none !important;
    }
}

/* orphan_info.html */
body.sponsor-flash { animation: sponsor-page-flash .6s ease-out; }
@keyframes sponsor-page-flash {
    0% { box-shadow: inset 0 0 0 0 transparent; }
    35% { box-shadow: inset 0 0 220px 40px color-mix(in srgb, var(--hog-red) 28%, transparent); }
    100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* program_info_lists.html */
.program-brief {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        width: min(var(--hog-content-max), 100%);
        margin: var(--hog-section-space) auto;
        overflow: hidden;
        color: var(--hog-ink);
        border: 1px solid var(--hog-border);
        border-radius: var(--hog-radius);
        background: var(--hog-paper);
    }

    .program-brief__art {
        position: relative;
        min-height: clamp(34rem, 52vw, 48rem);
        margin: 0;
        overflow: hidden;
        background: var(--hog-green);
    }

    .program-brief__art::after {
        position: absolute;
        inset: 0;
        content: "";
        pointer-events: none;
        background: linear-gradient(to top, oklch(0.15 0.03 160 / 0.4), transparent 48%);
        box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.12);
    }

    .program-brief__art img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .program-brief--food .program-brief__art img { object-position: center 58%; }
    .program-brief--orphan .program-brief__art img { object-position: 66% center; }

    .program-brief__content {
        display: grid;
        grid-template-rows: auto auto;
        align-content: stretch;
        min-width: 0;
    }

    .program-brief__highlights,
    .program-brief__provisions {
        padding: clamp(2rem, 5vw, 4.5rem);
    }

    .program-brief__highlights {
        align-self: center;
    }

    .program-brief h2 {
        max-width: 14ch;
        margin: 0;
        color: var(--hog-ink);
        font-size: clamp(2rem, 3.5vw, 3.4rem);
        font-weight: 800;
        line-height: 1.04;
        text-wrap: balance;
    }

    .program-brief__highlights ol,
    .program-brief__provisions ul {
        list-style: none;
        margin: clamp(2rem, 4vw, 3.5rem) 0 0;
        padding: 0;
    }

    .program-brief__highlights li {
        display: grid;
        grid-template-columns: 2.35rem minmax(0, 1fr);
        gap: clamp(0.8rem, 2vw, 1.4rem);
        align-items: baseline;
        padding-block: 1.1rem;
        border-bottom: 1px solid var(--hog-border);
    }

    .program-brief__highlights li:first-child { padding-top: 0; }
    .program-brief__highlights li:last-child { padding-bottom: 0; border-bottom: 0; }

    .program-brief__highlights li > span {
        color: var(--hog-red);
        font-family: "Geist Mono", ui-monospace, monospace;
        font-size: 0.78rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .program-brief li p { margin: 0; }

    .program-brief__highlights li p {
        max-width: 34ch;
        color: var(--hog-ink);
        font-size: clamp(1.1rem, 1.8vw, 1.45rem);
        font-weight: 700;
        line-height: 1.38;
        text-wrap: pretty;
    }

    .program-brief__provisions {
        align-self: end;
        color: var(--hog-canvas);
        background: var(--hog-green);
        border-top: 4px solid var(--hog-red);
    }

    .program-brief__provisions h2 { color: var(--hog-canvas); }

    .program-brief__provisions ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem clamp(1rem, 3vw, 2.5rem);
    }

    .program-brief__provisions li {
        display: grid;
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
        padding-top: 0.9rem;
        border-top: 1px solid oklch(0.96 0.018 85 / 0.2);
    }

    .program-brief__provisions li > span {
        width: 1.5rem;
        height: 2px;
        margin-top: 0.72rem;
        background: var(--hog-red);
    }

    .program-brief__provisions li p {
        color: oklch(0.96 0.018 85 / 0.86);
        font-size: clamp(0.95rem, 1.4vw, 1.08rem);
        line-height: 1.55;
        text-wrap: pretty;
    }

    @media (max-width: 900px) {
        .program-brief { grid-template-columns: 1fr; }
        .program-brief__art {
            min-height: 0;
            aspect-ratio: 16 / 10;
        }
    }

    @media (max-width: 600px) {
        .program-brief {
            width: 100%;
            margin-block: var(--hog-section-space);
        }

        .program-brief__art { aspect-ratio: 4 / 3; }
        .program-brief--food .program-brief__art { aspect-ratio: 3 / 4; }

        .program-brief__highlights,
        .program-brief__provisions { padding: 2.25rem 1.25rem; }

        .program-brief h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
        .program-brief__provisions ul { grid-template-columns: 1fr; }
    }