:root {
    --tf-green: #2f6f53;
    --tf-green-dark: #20523d;
    --tf-mint: #effaf2;
    --tf-soft: #f8f3fb;
    --tf-text: #191720;
    --tf-muted: #6c6a70;
    --tf-red: #f1473f;
    --tf-orange: #ff920d;
    --tf-teal: #009c91;
    --tf-purple: #8f2db4;
    --tf-shadow: 0 20px 45px rgba(28, 61, 44, .16);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--tf-mint);
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--tf-text);
}

body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at 12% 0%, rgba(177, 235, 191, .55), transparent 22rem),
        linear-gradient(180deg, #f4fff6 0%, #effaf2 52%, #f7fff9 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

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

.app-shell {
    min-height: 100vh;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 5rem;
    padding: 1rem clamp(1rem, 4vw, 3rem);
    background: rgba(47, 111, 83, .96);
    color: #fff;
    box-shadow: 0 12px 35px rgba(22, 65, 43, .18);
    backdrop-filter: blur(18px);
}

.app-return-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .85rem 1rem;
    background: #fff7db;
    color: #4b3512;
    border-bottom: 1px solid rgba(255, 146, 13, .28);
    font-weight: 850;
    text-align: center;
}

.app-return-notice strong {
    color: var(--tf-green-dark);
}

.field-hint {
    display: block;
    margin-top: .45rem;
    color: var(--tf-muted);
    font-size: .92rem;
    font-weight: 750;
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.brand-back {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    font-size: 2rem;
    line-height: 1;
    transition: background .2s ease, transform .2s ease;
}

.brand-back:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateX(-.15rem);
}

.brand-title {
    min-width: 0;
    font-size: clamp(1.45rem, 5vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
}

.brand-title span {
    color: #b7df5a;
}

.mobile-menu-toggle {
    display: none;
    min-height: 2.8rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    padding: .65rem .9rem;
    font: inherit;
    font-weight: 950;
    cursor: pointer;
}

.mobile-nav {
    display: none !important;
}

.mobile-nav summary,
.mobile-submenu summary {
    list-style: none;
}

.mobile-nav summary::-webkit-details-marker,
.mobile-submenu summary::-webkit-details-marker {
    display: none;
}

.top-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.top-nav a,
.nav-dropdown > button {
    border-radius: 999px;
    border: 0;
    background: transparent;
    padding: .65rem .95rem;
    font: inherit;
    font-weight: 800;
    color: rgba(255, 255, 255, .86);
    cursor: pointer;
}

.top-nav a:hover,
.nav-dropdown:hover > button,
.nav-dropdown:focus-within > button {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.top-nav a.nav-found,
.mobile-nav-panel > a.nav-found {
    border: 1px solid rgba(255, 255, 255, .48);
    background: linear-gradient(135deg, #ffdf4d 0%, #ff8a2b 100%);
    color: #2b1700;
    box-shadow: 0 10px 24px rgba(255, 146, 13, .28);
}

.top-nav a.nav-found:hover,
.mobile-nav-panel > a.nav-found:hover {
    background: linear-gradient(135deg, #ffe873 0%, #ff9b45 100%);
    color: #201100;
    transform: translateY(-1px);
}

.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    z-index: 40;
    display: grid;
    min-width: 220px;
    border-radius: 1rem;
    background: var(--tf-green-dark);
    padding: .55rem;
    box-shadow: 0 18px 36px rgba(16, 44, 30, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.35rem);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    border-radius: .75rem;
    padding: .75rem .85rem;
    color: #fff;
}

.page-wrap {
    width: min(1180px, calc(100% - 1.5rem));
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem) 0 4rem;
}

.hero-card,
.feature-card,
.animal-card,
.content-card,
.link-panel {
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: #fff;
    box-shadow: var(--tf-shadow);
}

.hero-card {
    overflow: hidden;
    border: .24rem solid var(--theme, var(--tf-green));
}

.hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.hero-card-body {
    padding: clamp(2rem, 7vw, 4.5rem) clamp(1rem, 5vw, 3rem);
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    color: var(--theme, var(--tf-green));
    font-size: clamp(2rem, 7vw, 4.2rem);
    font-weight: 950;
    line-height: 1.05;
}

.hero-card-body p,
.feature-card p {
    margin: 1.4rem auto 0;
    max-width: 780px;
    color: var(--tf-text);
    font-size: clamp(1.35rem, 4.6vw, 2.65rem);
    font-weight: 900;
    line-height: 1.35;
}

.hero-card-body p + p {
    margin-top: .9rem;
    font-size: clamp(1.1rem, 3.6vw, 2rem);
}

.section-stack {
    display: grid;
    gap: clamp(1.6rem, 5vw, 2.8rem);
}

.action-strip {
    display: grid;
    gap: .85rem;
}

@media (min-width: 760px) {
    .action-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.action-tile {
    display: grid;
    gap: .3rem;
    min-height: 7rem;
    align-content: center;
    border-radius: 1.35rem;
    padding: 1.2rem;
    color: #fff;
    box-shadow: var(--tf-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.action-tile:hover {
    transform: translateY(-.18rem);
    box-shadow: 0 26px 55px rgba(28, 61, 44, .22);
}

.action-tile span {
    font-size: .85rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .86;
}

.action-tile strong {
    font-size: clamp(1.45rem, 4vw, 2.25rem);
    font-weight: 950;
    line-height: 1.04;
}

.action-tile.primary {
    background: linear-gradient(135deg, #2f6f53, #48af4f);
}

.action-tile.alert {
    background: linear-gradient(135deg, #ff8a2b, #f1473f);
}

.action-tile.donate {
    background: linear-gradient(135deg, #8f2db4, #48af4f);
}

.intro-panel {
    display: grid;
    gap: 1rem;
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: rgba(255, 255, 255, .84);
    padding: clamp(1.6rem, 5vw, 3rem);
    box-shadow: var(--tf-shadow);
    text-align: center;
}

.intro-panel span {
    color: var(--tf-green);
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.intro-panel h1 {
    max-width: 920px;
    margin: 0 auto;
    color: var(--tf-text);
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 950;
    line-height: 1.08;
}

.intro-panel p {
    max-width: 820px;
    margin: 0 auto;
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    font-weight: 800;
    line-height: 1.65;
}

.intro-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
    margin-top: .5rem;
}

.heart-stories-empty {
    margin-top: 1.5rem;
}

.card-grid {
    display: grid;
    gap: clamp(1.4rem, 4vw, 2.25rem);
    margin-top: clamp(1.4rem, 5vw, 2.8rem);
}

@media (min-width: 860px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.feature-card {
    overflow: hidden;
    border: .22rem solid var(--theme, var(--tf-green));
    transition: transform .2s ease, box-shadow .2s ease;
}

.feature-card:hover {
    transform: translateY(-.25rem);
    box-shadow: 0 26px 55px rgba(28, 61, 44, .22);
}

.spotlight-card {
    display: grid;
    overflow: hidden;
    border: .24rem solid var(--theme, var(--tf-red));
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: #fff;
    box-shadow: var(--tf-shadow);
    align-items: center;
}

.spotlight-media {
    display: grid;
    align-items: center;
    padding: clamp(.8rem, 2.5vw, 1.4rem);
    background: #fff;
}

@media (min-width: 880px) {
    .spotlight-card {
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    }
}

.spotlight-media img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 18px 38px rgba(28, 61, 44, .12);
}

.spotlight-body {
    display: grid;
    align-content: center;
    gap: 1rem;
    padding: clamp(1.5rem, 5vw, 3rem);
}

.spotlight-body h2 {
    margin: 0;
    color: var(--tf-red);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 950;
    line-height: 1.05;
}

.spotlight-body p {
    margin: 0;
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    font-weight: 800;
    line-height: 1.65;
}

.feature-card img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.feature-card-body {
    padding: clamp(1.7rem, 5vw, 3.2rem) clamp(1.1rem, 4vw, 2.2rem);
    text-align: center;
}

.feature-card h2 {
    margin: 0;
    color: var(--theme, var(--tf-green));
    font-size: clamp(1.8rem, 4.6vw, 3.15rem);
    font-weight: 950;
    line-height: 1.08;
    hyphens: auto;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.feature-card p {
    font-size: clamp(1.15rem, 3.6vw, 2rem);
}

.animal-grid {
    display: grid;
    gap: 1.15rem;
    margin-top: 1.4rem;
}

@media (min-width: 760px) {
    .animal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .animal-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.home-news-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 760px) {
    .home-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.trust-band {
    display: grid;
    gap: 1.3rem;
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(239, 250, 242, .9));
    padding: clamp(1.4rem, 5vw, 2.6rem);
    box-shadow: var(--tf-shadow);
}

@media (min-width: 980px) {
    .trust-band {
        grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr);
        align-items: center;
    }
}

.trust-band > div > span {
    color: var(--tf-green);
    font-size: .9rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.trust-band h2 {
    margin: .45rem 0 0;
    color: var(--tf-green-dark);
    font-size: clamp(1.9rem, 5vw, 3.2rem);
    font-weight: 950;
    line-height: 1.08;
}

.trust-grid {
    display: grid;
    gap: .85rem;
}

@media (min-width: 720px) {
    .trust-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.trust-grid article {
    border: 1px solid rgba(47, 111, 83, .12);
    border-radius: 1.1rem;
    background: #fff;
    padding: 1rem;
}

.trust-grid strong {
    display: block;
    color: var(--tf-green);
    font-size: 1.15rem;
    font-weight: 950;
}

.trust-grid p {
    margin: .45rem 0 0;
    color: var(--tf-text);
    font-weight: 800;
    line-height: 1.55;
}

.board-photo-card {
    padding: 0;
    overflow: hidden;
}

.board-photo-card img {
    width: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
}

@media (min-width: 900px) {
    .board-photo-card {
        grid-column: 1 / -1;
    }

    .board-photo-card img {
        max-height: 520px;
    }
}

.happy-preview {
    display: grid;
    overflow: hidden;
    border: .22rem solid var(--tf-teal);
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: #fff;
    box-shadow: var(--tf-shadow);
}

@media (min-width: 900px) {
    .happy-preview {
        grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    }
}

.happy-preview-media img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

.happy-preview-body {
    display: grid;
    align-content: center;
    gap: 1rem;
    padding: clamp(1.5rem, 5vw, 3rem);
}

.happy-preview-body span {
    color: var(--tf-teal);
    font-size: .9rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.happy-preview-body h2 {
    margin: 0;
    color: var(--tf-teal);
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 950;
    line-height: 1.04;
}

.happy-preview-body p {
    margin: 0;
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.3rem);
    font-weight: 820;
    line-height: 1.65;
}

@media (min-width: 1120px) {
    .home-news-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.mini-card {
    display: grid;
    align-content: start;
    gap: .9rem;
    overflow: hidden;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .9);
    padding: 1.1rem;
    box-shadow: 0 16px 36px rgba(28, 61, 44, .13);
}

.mini-card.urgent {
    border: .18rem solid var(--tf-red);
    background: #fff5f5;
}

.mini-card.foster-card {
    border: .18rem solid #48af4f;
    background:
        linear-gradient(145deg, rgba(240, 253, 244, .96), rgba(255, 255, 255, .92));
}

@media (min-width: 1120px) {
    .mini-card.foster-card {
        grid-column: span 4;
        grid-template-columns: minmax(0, 1.25fr) minmax(340px, .8fr);
        align-items: center;
        padding: 1.35rem;
    }

    .mini-card.foster-card img {
        grid-row: 1 / 4;
        min-height: 320px;
        aspect-ratio: auto;
        object-fit: contain;
        background: #fff;
    }

    .mini-card.foster-card h2,
    .mini-card.foster-card p,
    .mini-card.foster-card .btn {
        grid-column: 2;
    }
}

.sponsor-card {
    color: inherit;
    text-decoration: none;
}

.sponsor-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
    background: var(--tf-soft);
}

.sponsor-slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: sponsorCardFade 16s infinite;
}

.sponsor-slider img:nth-child(1) {
    animation-delay: 0s;
}

.sponsor-slider img:nth-child(2) {
    animation-delay: 4s;
}

.sponsor-slider img:nth-child(3) {
    animation-delay: 8s;
}

.sponsor-slider img:nth-child(4) {
    animation-delay: 12s;
}

@keyframes sponsorCardFade {
    0%, 20% {
        opacity: 1;
    }

    25%, 95% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.mini-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
    object-fit: cover;
}

.mini-card h2 {
    margin: 0;
    color: var(--tf-green);
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 950;
    line-height: 1.08;
}

.mini-card p {
    margin: 0;
    color: var(--tf-text);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.55;
}

.text-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 1rem;
    color: var(--tf-green);
    font-size: 1.05rem;
    font-weight: 950;
}

.animal-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(47, 111, 83, .12);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.animal-card:hover {
    transform: translateY(-.16rem);
    box-shadow: 0 26px 55px rgba(28, 61, 44, .22);
}

.animal-card.is-emergency {
    border-color: rgba(241, 71, 63, .36);
}

.animal-card.is-reserved {
    border-color: rgba(249, 115, 22, .34);
}

.animal-media {
    position: relative;
    overflow: hidden;
    background: #fff8ef;
}

.animal-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.animal-status {
    position: absolute;
    left: 1rem;
    top: 1rem;
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    border-radius: 999px;
    padding: .55rem .85rem;
    background: var(--tf-green);
    color: #fff;
    font-size: .86rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.animal-status.is-emergency {
    background: var(--tf-red);
}

.animal-status.is-reserved {
    background: linear-gradient(135deg, #f97316, #facc15);
    color: #fff;
}

.animal-status.is-adopted {
    background: var(--tf-teal);
}

.animal-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .85rem;
    padding: 1.1rem;
    background:
        linear-gradient(180deg, #fff 0%, var(--tf-soft) 100%);
}

.animal-profile-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.animal-kicker {
    display: block;
    margin-bottom: .35rem;
    color: var(--tf-muted);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.animal-share {
    flex: none;
    border-radius: 999px;
    background: #fff;
    color: var(--tf-green);
    padding: .48rem .75rem;
    font-size: .82rem;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px rgba(47, 111, 83, .12);
}

.animal-card h2,
.animal-card h3 {
    margin: 0;
    color: var(--tf-green);
    font-size: clamp(1.55rem, 3.2vw, 2.15rem);
    font-weight: 950;
    line-height: 1.05;
}

.animal-card.is-emergency h2 {
    color: var(--tf-red);
}

.animal-card.is-adopted h2 {
    color: var(--tf-teal);
}

.animal-card.is-reserved h2 {
    color: #c2410c;
}

.animal-card p {
    margin: 0;
    min-height: 4.65rem;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.55;
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.animal-meta {
    margin-top: .75rem;
}

.pill {
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    padding: .48rem .75rem;
    color: var(--tf-green-dark);
    font-size: .86rem;
    font-weight: 900;
    box-shadow:
        0 8px 18px rgba(28, 61, 44, .06),
        inset 0 0 0 1px rgba(47, 111, 83, .12);
}

.pill.reserved {
    background: #fff7ed;
    color: #c2410c;
    box-shadow: inset 0 0 0 1px rgba(194, 65, 12, .18);
}

.pill.reserved-main {
    background: linear-gradient(135deg, #f97316, #facc15);
    color: #fff;
    text-shadow: 0 1px 1px rgba(92, 38, 0, .35);
    box-shadow:
        0 10px 22px rgba(249, 115, 22, .28),
        inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.reserved-note {
    border-radius: 1rem;
    background: #fff7ed;
    color: #9a3412;
    padding: 1rem;
    font-weight: 900;
    line-height: 1.55;
}

.animal-detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .85rem;
    margin-top: 1rem;
}

.animal-detail-gallery a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--tf-soft);
    box-shadow: 0 12px 26px rgba(28, 61, 44, .12);
}

.animal-detail-gallery a::after {
    content: "Groß ansehen";
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    padding: .35rem .6rem;
    font-size: .78rem;
    font-weight: 900;
    opacity: 0;
    transform: translateY(.25rem);
    transition: opacity .2s ease, transform .2s ease;
}

.animal-detail-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .2s ease;
}

.animal-detail-gallery a:hover img {
    transform: scale(1.04);
}

.animal-detail-gallery a:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: none;
    place-items: center;
    padding: 2rem;
    background: rgba(12, 30, 24, .88);
}

.gallery-lightbox:target {
    display: grid;
}

.gallery-lightbox img {
    max-width: min(1100px, 94vw);
    max-height: 82vh;
    border-radius: 1.2rem;
    object-fit: contain;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}

.gallery-lightbox-close {
    position: absolute;
    inset: 0;
}

.gallery-lightbox-button {
    position: fixed;
    right: 1.2rem;
    top: 1.2rem;
    z-index: 1;
    border-radius: 999px;
    background: #fff;
    color: var(--tf-green-dark);
    padding: .75rem 1rem;
    font-weight: 950;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}

.animal-video-card {
    overflow: hidden;
}

.animal-video-card video {
    width: 100%;
    max-height: 680px;
    margin-top: 1rem;
    border-radius: 1.2rem;
    background: #0f172a;
    box-shadow: 0 16px 36px rgba(25, 23, 32, .18);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    background: var(--tf-green);
    color: #fff;
    padding: .42rem .8rem;
    font-size: .82rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge.danger {
    background: var(--tf-red);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.animal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
}

.animal-actions .btn:first-child {
    grid-column: 1 / -1;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.35rem;
    max-width: 100%;
    border: 0;
    border-radius: 1rem;
    padding: .85rem 1.1rem;
    background: var(--tf-green);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(47, 111, 83, .24);
}

.animal-card .btn {
    min-height: 2.75rem;
    padding: .6rem .8rem;
    font-size: .92rem;
}

@media (max-width: 440px) {
    .animal-actions {
        grid-template-columns: 1fr;
    }
}

.happy-share-card {
    border: .18rem solid var(--tf-teal);
    background:
        linear-gradient(145deg, rgba(255, 248, 239, .98), rgba(240, 253, 250, .94));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.happy-share-card h1 {
    margin-bottom: .55rem;
}

.happy-share-card p {
    margin: 0;
    max-width: 720px;
}

.happy-end-band {
    display: grid;
    gap: .2rem;
    width: fit-content;
    border-radius: 1rem;
    background: linear-gradient(135deg, #fff7ed, #ecfdf5);
    color: #14532d;
    padding: .8rem 1rem;
    box-shadow: inset 0 0 0 1px rgba(20, 83, 45, .12);
}

.happy-end-band strong {
    color: var(--tf-teal);
    font-size: .85rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.happy-end-band span {
    font-weight: 900;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .75rem;
}

.detail-info-grid span {
    display: grid;
    gap: .18rem;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .78);
    padding: .75rem;
    color: var(--tf-green-dark);
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(47, 111, 83, .11);
}

.detail-info-grid strong {
    color: var(--tf-muted);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.animal-story-card {
    max-width: 980px;
}

.animal-story-card.is-happy-end-story {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(255, 248, 239, .96));
}

.animal-description {
    color: var(--tf-ink);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.75;
}

.animal-description p {
    margin-top: 0;
}

.animal-request-card {
    max-width: 980px;
}

@media (max-width: 720px) {
    .happy-share-card {
        align-items: stretch;
        flex-direction: column;
    }

    .gallery-lightbox {
        padding: 1rem;
    }

    .gallery-lightbox-button {
        right: .8rem;
        top: .8rem;
    }
}

.btn.secondary {
    background: #48af4f;
}

.btn.whatsapp-btn {
    background: #25d366;
    color: #fff;
    box-shadow: 0 12px 26px rgba(37, 211, 102, .28);
}

.btn.facebook-btn {
    background: #1877f2;
    color: #fff;
    box-shadow: 0 12px 26px rgba(24, 119, 242, .25);
}

.btn.light {
    background: #fff;
    color: var(--tf-green);
    box-shadow: inset 0 0 0 1px rgba(47, 111, 83, .12);
}

.filter-card {
    display: grid;
    gap: .8rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 35px rgba(28, 61, 44, .1);
}

@media (min-width: 760px) {
    .filter-card {
        grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(0, 1fr)) auto auto;
        align-items: end;
    }
}

.filter-card label {
    display: grid;
    gap: .35rem;
    color: var(--tf-muted);
    font-size: .9rem;
    font-weight: 900;
}

.filter-card select,
.filter-card input,
.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
    border: 1px solid rgba(47, 111, 83, .14);
    border-radius: .9rem;
    background: #fff;
    padding: .9rem 1rem;
    color: var(--tf-text);
    font: inherit;
    font-weight: 750;
}

.detail-grid {
    display: grid;
    gap: 1.5rem;
}

.animal-profile-detail {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 920px) {
    .detail-grid,
    .animal-profile-detail {
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
        align-items: start;
    }
}

.detail-image {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: var(--tf-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(360px, 44vw, 620px);
    padding: 1rem;
    background: #fff8ef;
}

.detail-image img {
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: contain;
    border-radius: 1.4rem;
}

.animal-profile-image {
    background: #fff;
}

.animal-profile-card {
    align-self: stretch;
    display: grid;
    align-content: start;
    gap: 1rem;
}

.animal-profile-card h1 {
    margin-bottom: 0;
}

.animal-description {
    color: var(--tf-text);
    font-size: clamp(1rem, 2.6vw, 1.18rem);
    font-weight: 720;
    line-height: 1.75;
}

.animal-description p:first-child {
    margin-top: 0;
}

.detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.content-card {
    padding: clamp(1.4rem, 5vw, 2.5rem);
}

.content-card h1 {
    margin: 0 0 1rem;
    color: var(--tf-green);
    font-size: clamp(2.3rem, 8vw, 4rem);
    font-weight: 950;
    line-height: 1.05;
}

.content-card p,
.content-card li {
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    font-weight: 750;
    line-height: 1.75;
}

.form-grid {
    display: grid;
    gap: .85rem;
}

.form-grid label {
    display: grid;
    gap: .4rem;
    color: var(--tf-muted);
    font-weight: 900;
}

.form-grid .full {
    grid-column: 1 / -1;
}

@media (min-width: 760px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-grid textarea {
    min-height: 14rem;
    line-height: 1.55;
    resize: vertical;
}

.donation-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 860px) {
    .donation-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.donation-impact {
    display: grid;
    gap: 1rem;
}

@media (min-width: 760px) {
    .donation-impact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.donation-impact article {
    display: grid;
    gap: .55rem;
    border-radius: 1.35rem;
    background: #fff;
    padding: 1.2rem;
    box-shadow: var(--tf-shadow);
}

.donation-impact span {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    padding: .45rem .7rem;
    font-weight: 950;
}

.donation-impact h2 {
    margin: 0;
    color: var(--tf-green);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 950;
}

.donation-impact p {
    margin: 0;
    color: var(--tf-text);
    font-weight: 820;
    line-height: 1.58;
}

.donation-card {
    display: grid;
    align-content: start;
    gap: .85rem;
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: rgba(255, 255, 255, .88);
    padding: clamp(1.4rem, 5vw, 2.3rem);
    box-shadow: var(--tf-shadow);
}

.donation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    min-height: 3.2rem;
    border-radius: 1rem;
    background: var(--tf-green);
    color: #fff;
    padding: .35rem .65rem;
    font-size: .9rem;
    font-weight: 950;
}

.donation-card h1 {
    margin: .35rem 0 0;
    color: var(--tf-green);
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.05;
}

.donation-card p {
    margin: 0;
    color: var(--tf-text);
    font-weight: 820;
    line-height: 1.6;
}

.paypal-donation-card {
    border: .18rem solid #48af4f;
    background:
        linear-gradient(145deg, rgba(240, 253, 244, .96), rgba(255, 255, 255, .92));
}

.goods-card {
    border: .18rem solid #8f2db4;
    background:
        radial-gradient(circle at top right, rgba(255, 190, 72, .22), transparent 32%),
        linear-gradient(145deg, rgba(248, 243, 251, .96), rgba(255, 255, 255, .92));
}

.goods-card .donation-icon {
    background: linear-gradient(135deg, #8f2db4, #ff9f1c);
}

.goods-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
}

.goods-list li {
    border-radius: 999px;
    background: rgba(143, 45, 180, .1);
    color: #6b2188;
    padding: .55rem .8rem;
    font-size: .9rem;
    font-weight: 950;
}

.bank-details {
    display: grid;
    gap: .75rem;
    margin: 1rem 0 0;
}

.bank-details div {
    border-radius: 1rem;
    background: var(--tf-soft);
    padding: .9rem 1rem;
}

.bank-details dt {
    color: var(--tf-muted);
    font-size: .8rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bank-details dd {
    margin: .15rem 0 0;
    color: var(--tf-text);
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 950;
    overflow-wrap: anywhere;
}

.donation-form-card {
    margin-top: 1.5rem;
}

.small-eyebrow {
    font-size: 1rem;
}

.news-block {
    position: relative;
    overflow: hidden;
    margin-top: 1.5rem;
    border: .2rem solid var(--tf-green);
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background:
        linear-gradient(145deg, rgba(223, 255, 224, .92), rgba(255, 247, 229, .94));
    padding: clamp(1.5rem, 5vw, 3rem);
    box-shadow: var(--tf-shadow);
}

.news-block::before,
.news-block::after {
    display: block;
    color: var(--tf-green);
    content: "💚 🐾 💚";
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight: 950;
    text-align: center;
}

.news-block::before {
    margin-bottom: 1rem;
}

.news-block::after {
    margin-top: 1rem;
}

.news-block h1 {
    margin: 0 0 1.2rem;
    color: var(--tf-green);
    font-size: clamp(2rem, 6vw, 3.6rem);
    font-weight: 950;
    line-height: 1.08;
    text-align: center;
}

.news-block p {
    max-width: 920px;
    margin: 0 auto 1rem;
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    font-weight: 760;
    line-height: 1.75;
}

.news-feature-image {
    width: min(100%, 760px);
    margin: 0 auto 1.5rem;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 14px 34px rgba(25, 23, 32, .2);
}

.news-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.news-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 12px 28px rgba(28, 61, 44, .14);
}

.about-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 760px) {
    .about-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.about-card,
.member-panel {
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: rgba(255, 255, 255, .9);
    padding: clamp(1.4rem, 5vw, 2.4rem);
    box-shadow: var(--tf-shadow);
}

.about-card h1,
.member-panel h1 {
    margin: 0 0 1rem;
    color: var(--tf-green);
    font-size: clamp(1.8rem, 5vw, 2.9rem);
    font-weight: 950;
    line-height: 1.08;
}

.about-card p,
.member-panel p {
    margin: 0;
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    font-weight: 780;
    line-height: 1.7;
}

.member-panel {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
    border: .2rem solid var(--tf-green);
    background:
        linear-gradient(145deg, rgba(223, 255, 224, .92), rgba(255, 247, 229, .94));
}

@media (min-width: 860px) {
    .member-panel {
        grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
        align-items: center;
    }
}

.supporter-intro {
    margin-top: 1.5rem;
}

.supporter-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 720px) {
    .supporter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .supporter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.supporter-card {
    overflow: hidden;
    border-radius: clamp(1.2rem, 4vw, 2rem);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--tf-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}

.supporter-card > a {
    display: grid;
    height: 100%;
}

.supporter-card:hover {
    box-shadow: 0 28px 58px rgba(28, 61, 44, .22);
    transform: translateY(-.2rem);
}

.supporter-card img,
.supporter-placeholder {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.supporter-placeholder {
    display: grid;
    align-content: center;
    gap: .5rem;
    background:
        linear-gradient(135deg, rgba(47, 111, 83, .95), rgba(143, 45, 180, .78)),
        url("../images/banner.jpg") center / cover;
    color: #fff;
    padding: clamp(1.2rem, 4vw, 2rem);
    text-align: center;
}

.supporter-placeholder span {
    font-size: .95rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.supporter-placeholder strong {
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 950;
    line-height: 1.18;
}

.supporter-copy {
    display: grid;
    align-content: start;
    gap: .7rem;
    padding: clamp(1.15rem, 4vw, 1.7rem);
}

.supporter-copy h1 {
    margin: 0;
    color: var(--tf-green);
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 950;
    line-height: 1.16;
}

.supporter-copy p {
    margin: 0;
    color: var(--tf-text);
    font-size: clamp(1rem, 2.6vw, 1.13rem);
    font-weight: 780;
    line-height: 1.62;
}

.supporter-certificate img {
    object-fit: contain;
    background: #fff;
    padding: 1rem;
}

.quiet-support-panel {
    display: grid;
    gap: .9rem;
    margin-top: 1.5rem;
    border: .2rem solid var(--tf-green);
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background:
        linear-gradient(145deg, rgba(223, 255, 224, .92), rgba(255, 247, 229, .94));
    padding: clamp(1.5rem, 5vw, 3rem);
    box-shadow: var(--tf-shadow);
    text-align: center;
}

.quiet-support-panel span {
    color: var(--tf-green);
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.quiet-support-panel h1 {
    margin: 0;
    color: var(--tf-green-dark);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 950;
    line-height: 1.1;
}

.quiet-support-panel p {
    max-width: 880px;
    margin: 0 auto;
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    font-weight: 780;
    line-height: 1.7;
}

.vet-intro {
    margin-top: 1.5rem;
}

.vet-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 840px) {
    .vet-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vet-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    border-radius: clamp(1.3rem, 4vw, 2rem);
    background: rgba(255, 255, 255, .93);
    padding: clamp(1.25rem, 4vw, 2rem);
    box-shadow: var(--tf-shadow);
}

.vet-card-head {
    display: grid;
    gap: .65rem;
}

.vet-card-head span {
    justify-self: start;
    border-radius: 999px;
    background: rgba(47, 111, 83, .12);
    color: var(--tf-green);
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.vet-card h1 {
    margin: 0;
    color: var(--tf-green);
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 950;
    line-height: 1.12;
}

.vet-card address {
    display: grid;
    gap: .28rem;
    margin: 0;
    color: var(--tf-text);
    font-style: normal;
    font-size: clamp(1rem, 2.6vw, 1.12rem);
    font-weight: 780;
    line-height: 1.5;
}

.vet-card dl {
    display: grid;
    gap: .7rem;
    margin: 0;
}

.vet-card dl div {
    border-radius: 1rem;
    background: var(--tf-soft);
    padding: .8rem .9rem;
}

.vet-card dt {
    color: var(--tf-muted);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vet-card dd {
    margin: .16rem 0 0;
    color: var(--tf-text);
    font-size: 1.08rem;
    font-weight: 950;
    line-height: 1.4;
}

.vet-card dd a {
    color: var(--tf-green-dark);
}

.vet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: auto;
}

.member-actions {
    display: grid;
    gap: .85rem;
}

.download-note {
    display: block;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .75);
    padding: 1rem;
    color: var(--tf-muted);
    font-weight: 900;
    line-height: 1.45;
}

.project-callout,
.project-card,
.sticky-donate-panel {
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: rgba(255, 255, 255, .92);
    padding: clamp(1.4rem, 5vw, 2.5rem);
    box-shadow: var(--tf-shadow);
}

.project-callout {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
    border: .2rem solid var(--tf-orange);
    background:
        linear-gradient(145deg, rgba(255, 248, 240, .96), rgba(255, 252, 224, .95));
}

.project-callout h1,
.project-card h1 {
    margin: 0;
    color: var(--tf-green);
    font-size: clamp(2rem, 6vw, 3.4rem);
    font-weight: 950;
    line-height: 1.08;
}

.project-callout p,
.project-card p,
.sticky-donate-panel p {
    margin: 0;
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    font-weight: 780;
    line-height: 1.7;
}

.project-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 860px) {
    .project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.project-card {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.bank-card {
    border: .16rem dashed var(--tf-green);
    background: #f3fff3;
}

.sticky-donate-panel {
    position: sticky;
    bottom: 1rem;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    border: .16rem solid rgba(47, 111, 83, .18);
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .85rem;
}

.project-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(28, 61, 44, .14);
}

.sponsor-animal-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 860px) {
    .sponsor-animal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sponsor-animal-card {
    overflow: hidden;
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--tf-shadow);
}

.sponsor-animal-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.sponsor-animal-card > div {
    display: grid;
    gap: .9rem;
    padding: clamp(1.2rem, 4vw, 2rem);
}

.sponsor-animal-card h1 {
    margin: 0;
    color: var(--tf-green);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 950;
    line-height: 1.06;
}

.sponsor-animal-card p {
    margin: 0;
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.2rem);
    font-weight: 780;
    line-height: 1.65;
}

.events-card {
    display: grid;
    justify-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: rgba(255, 255, 255, .92);
    padding: clamp(1.4rem, 5vw, 2.6rem);
    text-align: center;
    box-shadow: var(--tf-shadow);
}

.events-card h1 {
    margin: 0;
    color: var(--tf-green);
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 950;
    line-height: 1.08;
}

.events-card p {
    max-width: 880px;
    margin: 0;
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    font-weight: 780;
    line-height: 1.75;
}

.events-list {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.event-card {
    overflow: hidden;
    border-radius: clamp(1.4rem, 5vw, 2.2rem);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--tf-shadow);
}

.event-card-body {
    display: grid;
    gap: 1rem;
    padding: clamp(1.3rem, 4vw, 2rem);
}

.event-card h1 {
    margin: 0;
    color: var(--tf-green);
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 950;
    line-height: 1.08;
}

.event-card p {
    max-width: 900px;
    margin: 0;
    color: var(--tf-text);
    font-size: clamp(1.02rem, 2.4vw, 1.18rem);
    font-weight: 780;
    line-height: 1.7;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.event-meta span {
    display: grid;
    gap: .2rem;
    min-width: min(100%, 220px);
    border-radius: 1rem;
    background: #f8fffb;
    padding: .75rem .9rem;
    color: var(--tf-green-dark);
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(47, 111, 83, .12);
}

.event-meta strong {
    color: var(--tf-muted);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.event-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    padding: 0 clamp(1.3rem, 4vw, 2rem) clamp(1.3rem, 4vw, 2rem);
}

.event-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
    background: #f8fffb;
    object-fit: cover;
    box-shadow: 0 12px 26px rgba(28, 61, 44, .12);
}

.emoji-row {
    width: min(100%, 900px);
    border: 2px dashed #ffd700;
    border-radius: 1rem;
    background: #f0fff0;
    padding: .8rem;
    color: var(--tf-green);
    font-size: clamp(1.25rem, 4vw, 1.8rem);
    box-shadow: 0 0 14px rgba(255, 215, 0, .28);
}

.contact-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 920px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
        align-items: start;
    }
}

.contact-card {
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: rgba(255, 255, 255, .92);
    padding: clamp(1.4rem, 5vw, 2.5rem);
    box-shadow: var(--tf-shadow);
}

.contact-card h1 {
    margin: 0 0 1rem;
    color: var(--tf-green);
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 950;
    line-height: 1.08;
}

.contact-card p {
    color: var(--tf-text);
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    font-weight: 780;
    line-height: 1.7;
}

.contact-info-card {
    border: .18rem solid rgba(47, 111, 83, .18);
    background:
        linear-gradient(145deg, rgba(223, 255, 224, .92), rgba(255, 247, 229, .94));
}

.privacy-note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--tf-muted);
    font-size: .95rem;
    font-weight: 800;
}

.privacy-note a {
    color: var(--tf-green);
    font-weight: 950;
    text-decoration: underline;
}

.honeypot {
    display: none;
}

.legal-card {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
    border-radius: clamp(1.4rem, 5vw, 2.4rem);
    background: rgba(255, 255, 255, .94);
    padding: clamp(1.4rem, 5vw, 2.8rem);
    box-shadow: var(--tf-shadow);
}

.legal-card section {
    border-bottom: 1px solid rgba(47, 111, 83, .12);
    padding-bottom: 1.15rem;
}

.legal-card section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.legal-card h1 {
    margin: 0 0 .75rem;
    color: var(--tf-green);
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 950;
    line-height: 1.15;
}

.legal-card p,
.legal-card li {
    color: var(--tf-text);
    font-size: clamp(1rem, 2.6vw, 1.12rem);
    font-weight: 720;
    line-height: 1.7;
}

.legal-card a {
    color: var(--tf-green);
    font-weight: 950;
    text-decoration: underline;
}

.paypal-panel {
    display: grid;
    justify-items: center;
    gap: 1rem;
    margin: 1.5rem 0 0;
    text-align: center;
}

.paypal-panel p {
    margin: 0;
    color: var(--tf-text);
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 950;
}

.paypal-btn {
    background: #48af4f;
    font-size: clamp(1.15rem, 4vw, 1.8rem);
}

.success {
    border-radius: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #dcfce7;
    color: #166534;
    font-weight: 900;
}

nav[role="navigation"] {
    display: grid;
    gap: 1rem;
    color: var(--tf-muted);
    font-weight: 850;
}

nav[role="navigation"] > div:first-child {
    display: none;
}

nav[role="navigation"] > div:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .65rem;
}

nav[role="navigation"] a,
nav[role="navigation"] span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.85rem;
    min-height: 2.85rem;
    border-radius: 999px;
    background: #fff;
    color: var(--tf-green);
    padding: .55rem .85rem;
    box-shadow: 0 8px 20px rgba(28, 61, 44, .1);
}

nav[role="navigation"] [aria-current="page"] span,
nav[role="navigation"] span[aria-current="page"] {
    background: var(--tf-green);
    color: #fff;
}

.link-panel {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
    padding: clamp(1.5rem, 5vw, 2.4rem);
    border: .2rem solid #48af4f;
}

.quick-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.4rem;
    border-radius: 1.2rem;
    background: var(--tf-soft);
    color: #6e55ad;
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight: 950;
    box-shadow: 0 8px 20px rgba(25, 23, 32, .12);
}

.site-footer {
    padding: 1rem 0 3rem;
    text-align: center;
    color: #6a6a6a;
}

.site-footer .donate {
    display: inline-flex;
    min-width: min(82vw, 520px);
    margin-bottom: 1.4rem;
    border-radius: 1.3rem;
    background: #48af4f;
    color: #fff;
    font-size: clamp(1.6rem, 5vw, 2.5rem);
}

.site-footer p {
    margin: .35rem 0;
    font-size: clamp(1.05rem, 3.5vw, 1.6rem);
    font-weight: 900;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 0 0 1rem;
}

.footer-links a {
    color: var(--tf-green);
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 950;
    text-decoration: underline;
}

.theme-green { --theme: #48af4f; }
.theme-red { --theme: var(--tf-red); }
.theme-teal { --theme: var(--tf-teal); }
.theme-orange { --theme: var(--tf-orange); }
.theme-purple { --theme: var(--tf-purple); }

@media (max-width: 900px) {
    .app-topbar {
        flex-wrap: wrap;
        align-items: center;
        min-height: 4.35rem;
    }

    .mobile-nav {
        display: block !important;
        width: 100%;
        order: 3;
    }

    .mobile-nav > summary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.8rem;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: .9rem;
        background: rgba(255, 255, 255, .12);
        color: #fff;
        padding: .65rem .95rem;
        font-weight: 950;
        cursor: pointer;
    }

    .mobile-nav[open] > summary {
        margin-bottom: .6rem;
        background: rgba(255, 255, 255, .2);
    }

    .mobile-nav-panel {
        display: grid;
        gap: .35rem;
        border-radius: 1rem;
        background: rgba(22, 65, 43, .48);
        padding: .65rem;
    }

    .mobile-nav-panel > a,
    .mobile-submenu > summary,
    .mobile-submenu div a {
        display: block;
        border-radius: .8rem;
        color: #fff;
        padding: .8rem .9rem;
        font-weight: 900;
    }

    .mobile-nav-panel > a,
    .mobile-submenu > summary {
        background: rgba(255, 255, 255, .06);
    }

    .mobile-submenu > summary {
        cursor: pointer;
    }

    .mobile-submenu > summary::after {
        content: "+";
        float: right;
    }

    .mobile-submenu[open] > summary::after {
        content: "-";
    }

    .mobile-submenu div {
        display: grid;
        gap: .25rem;
        margin: .25rem 0 .45rem;
        border-radius: .8rem;
        background: var(--tf-green-dark);
        padding: .35rem;
    }

    .mobile-submenu div a {
        padding-left: 1.15rem;
    }

    .top-nav {
        display: none;
    }
}

@media (min-width: 901px) {
    .mobile-nav,
    .mobile-menu-toggle {
        display: none !important;
    }
}

@media (max-width: 720px) {
    .page-wrap {
        width: min(100% - 1rem, 760px);
    }

    .hero-card img,
    .feature-card img {
        aspect-ratio: auto;
    }
}