:root {

    --bg: #f3efe6;

    --surface: rgba(255, 252, 245, 0.84);

    --surface-strong: rgba(255, 253, 248, 0.96);

    --surface-alt: rgba(232, 224, 206, 0.7);

    --text: #16231e;

    --muted: #395247;

    --primary: #0f6a4e;

    --primary-strong: #0b4a37;

    --accent: #d07a2a;

    --line: rgba(62, 82, 71, 0.2);

    --glow: rgba(26, 77, 55, 0.28);

    --shadow: 0 20px 40px rgba(22, 35, 29, 0.15);

    --shadow-soft: 0 8px 24px rgba(22, 35, 29, 0.1);

    --radius-xl: 24px;

    --radius-lg: 18px;

    --radius-md: 14px;

    --scroll-progress: 0%;

    --header-bg: rgba(20, 34, 29, 0.62);

    --header-border: rgba(255, 255, 255, 0.2);

}



* {

    box-sizing: border-box;

}



html,

body {

    margin: 0;

    padding: 0;

    scroll-behavior: smooth;

}



body {

    font-family: "Space Grotesk", sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.6;

    position: relative;

    min-height: 100vh;

}



body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    background:

        linear-gradient(135deg, rgba(13, 54, 40, 0.54), rgba(140, 82, 40, 0.3)),

        url("fotky/2/AA.BR.podz.A.jpg") center/cover no-repeat;

    filter: saturate(1.08) contrast(1.03);

}



body::after {

    content: "";

    position: fixed;

    top: 0;

    left: 0;

    width: var(--scroll-progress);

    height: 4px;

    z-index: 300;

    background: linear-gradient(90deg, #f3bb78, #2fb47d);

    box-shadow: 0 0 22px rgba(47, 180, 125, 0.6);

}



h1,

h2,

h3 {

    margin-top: 0;

    font-family: "Bitter", serif;

    line-height: 1.25;

}



a {

    color: inherit;

    text-decoration: none;

}



a:focus-visible,

button:focus-visible {

    outline: 2px solid #f0b46c;

    outline-offset: 2px;

}



img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 14px;

}



.site-header {

    position: sticky;

    top: 10px;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.2rem;

    width: min(1280px, 94vw);

    margin: 0 auto;

    padding: 0.68rem 1rem;

    border: 1px solid var(--header-border);

    border-radius: 16px;

    background: var(--header-bg);

    backdrop-filter: blur(16px) saturate(142%);

    color: #f7f1e2;

    box-shadow: 0 14px 26px rgba(13, 22, 19, 0.24);

    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

}



.site-header.scrolled {

    transform: translateY(-3px);

    background: rgba(16, 29, 24, 0.75);

    box-shadow: 0 16px 30px rgba(12, 21, 18, 0.32);

}



.brand {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    font-weight: 700;

    letter-spacing: 0.02em;

    flex-shrink: 0;

}



.brand-mark {

    display: inline-grid;

    place-items: center;

    width: 2.1rem;

    height: 2.1rem;

    border-radius: 999px;

    background: linear-gradient(130deg, #e6b079, #1d885f);

    color: #fff;

    font-size: 0.82rem;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);

}



.site-nav {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 0.45rem;

    padding: 0.34rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.16);

}



.site-nav a {

    padding: 0.45rem 0.8rem;

    border-radius: 999px;

    color: rgba(248, 242, 230, 0.9);

    font-size: 0.9rem;

    font-weight: 600;

    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;

}



.site-nav a:hover,

.site-nav a.active {

    background: linear-gradient(125deg, rgba(230, 177, 122, 0.92), rgba(24, 134, 95, 0.88));

    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);

}



.menu-toggle {

    display: none;

    border: 1px solid rgba(255, 255, 255, 0.26);

    background: rgba(255, 255, 255, 0.14);

    color: #f8efdc;

    padding: 0.45rem 0.7rem;

    border-radius: 8px;

    font-weight: 600;

}



main {

    width: min(1180px, 92vw);

    margin: 2.1rem auto 4rem;

}



.hero {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 2rem;

    align-items: stretch;

    background:

        linear-gradient(120deg, rgba(255, 253, 247, 0.96), rgba(236, 227, 209, 0.86));

    border: 1px solid var(--line);

    border-radius: var(--radius-xl);

    padding: 1.5rem;

    box-shadow: var(--shadow);

    animation: rise 0.75s ease both;

    backdrop-filter: blur(8px);

    position: relative;

    overflow: hidden;

    border-top-left-radius: 36px;

}



.hero::before {

    content: "";

    position: absolute;

    right: -110px;

    top: -110px;

    width: 280px;

    aspect-ratio: 1;

    border-radius: 999px;

    background: radial-gradient(circle at 40% 40%, rgba(230, 176, 121, 0.58), rgba(230, 176, 121, 0.04));

    pointer-events: none;

}



.hero-content {

    padding: 1rem;

    position: relative;

    z-index: 1;

}



.hero h1 {

    font-size: clamp(1.8rem, 3.2vw, 3rem);

    margin-bottom: 1rem;

    text-wrap: balance;

}



.eyebrow {

    text-transform: uppercase;

    letter-spacing: 0.08em;

    font-size: 0.76rem;

    color: var(--accent);

    margin-bottom: 0.6rem;

    font-weight: 700;

}



.hero-image img {

    height: 100%;

    object-fit: cover;

    border-radius: 16px;

    box-shadow: var(--shadow-soft);

    transition: transform 0.45s ease, filter 0.45s ease;

}



.hero:hover .hero-image img {

    transform: scale(1.03);

    filter: saturate(1.06);

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.7rem;

    margin-top: 1.4rem;

}



.button {

    display: inline-block;

    border-radius: 12px;

    padding: 0.7rem 1.1rem;

    font-weight: 700;

    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;

}



.button:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 20px rgba(12, 28, 23, 0.18);

}



.button-primary {

    background: linear-gradient(125deg, #14815b, #0d5a42);

    color: #fff;

}



.button-primary:hover {

    background: linear-gradient(125deg, #159367, #0d5a42);

}



.button-secondary {

    border: 1px solid var(--line);

    background: var(--surface-strong);

}



.section {

    margin-top: 2.2rem;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: var(--radius-lg);

    padding: 1.4rem;

    box-shadow: var(--shadow);

    animation: rise 0.8s ease both;

    backdrop-filter: blur(10px) saturate(120%);

    position: relative;

    overflow: hidden;

    isolation: isolate;

}



.section::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));

    pointer-events: none;

}



.section.alt {

    background: linear-gradient(120deg, rgba(248, 244, 236, 0.91), rgba(226, 216, 194, 0.84));

}



.section-heading {

    margin-bottom: 1.1rem;

    position: relative;

    padding-left: 1rem;

}



.section-heading::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0.2rem;

    width: 4px;

    height: calc(100% - 0.4rem);

    border-radius: 99px;

    background: linear-gradient(180deg, #17835d, #e1a55f);

}



.section-heading p {

    margin-top: 0.3rem;

    color: var(--muted);

}



.cards {

    display: grid;

    gap: 1rem;

}



.cards.three-col {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.cards.two-col {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}



.card {

    background: rgba(255, 252, 245, 0.8);

    border: 1px solid var(--line);

    border-radius: var(--radius-md);

    padding: 1rem;

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.card:hover {

    transform: translateY(-4px);

    border-color: rgba(24, 89, 62, 0.38);

    box-shadow: 0 14px 26px rgba(22, 35, 29, 0.14);

}



.card:hover::before {

    opacity: 1;

}



.card p {

    margin-bottom: 0;

}



.gallery-strip {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.8rem;

}



.gallery-strip figure,

.gallery-grid figure {

    position: relative;

}



.gallery-strip img,

.gallery-grid img {

    transition: transform 0.45s ease, filter 0.45s ease;

}



.gallery-strip figure:hover img,

.gallery-grid figure:hover img {

    transform: scale(1.04);

    filter: saturate(1.08);

}



.timeline {

    display: grid;

    gap: 0.9rem;

}



.timeline article {

    background: rgba(255, 251, 243, 0.86);

    border-left: 4px solid var(--accent);

    border-radius: 12px;

    padding: 0.8rem 1rem;

    transition: transform 0.25s ease;

    box-shadow: 0 6px 16px rgba(18, 34, 27, 0.07);

}



.timeline article:hover {

    transform: translateX(3px);

}



.timeline time {

    font-size: 0.86rem;

    color: var(--muted);

}



.split {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

}



.doc-list {

    display: grid;

    gap: 0.65rem;

}



.doc-item {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    flex-wrap: wrap;

    align-items: center;

    border: 1px solid var(--line);

    border-radius: 12px;

    padding: 0.75rem 0.9rem;

    background: rgba(255, 251, 243, 0.82);

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.doc-item:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 18px rgba(20, 36, 29, 0.11);

}



.doc-item a {

    color: var(--primary-strong);

    font-weight: 700;

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.9rem;

}



.gallery-grid figure {

    margin: 0;

    border: 1px solid var(--line);

    border-radius: 14px;

    overflow: hidden;

    background: rgba(255, 251, 243, 0.78);

    box-shadow: 0 8px 20px rgba(18, 35, 28, 0.12);

}



.gallery-grid figcaption {

    padding: 0.55rem 0.7rem;

    font-size: 0.9rem;

}



.wildlife-explorer {

    display: grid;

    gap: 1rem;

}



.wildlife-groups {

    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem;

}



.wildlife-group {

    border: 1px solid var(--line);

    background: rgba(255, 251, 243, 0.82);

    color: var(--text);

    font-weight: 700;

    border-radius: 999px;

    padding: 0.5rem 0.9rem;

    cursor: pointer;

    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;

}



.wildlife-group:hover,

.wildlife-group.active {

    background: linear-gradient(125deg, rgba(230, 177, 122, 0.9), rgba(24, 134, 95, 0.84));

    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 8px 18px rgba(18, 35, 28, 0.17);

}



.wildlife-body {

    display: grid;

    gap: 1rem;

    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);

}



.wildlife-species {

    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

    gap: 0.55rem;

    padding: 0.95rem;

    border: 1px solid var(--line);

    border-radius: 14px;

    background: rgba(255, 251, 243, 0.82);

    min-height: 300px;

}



.wildlife-species button {

    border: 1px solid var(--line);

    background: #fff;

    color: var(--text);

    padding: 0.55rem 0.8rem;

    border-radius: 10px;

    font-weight: 600;

    line-height: 1.35;

    white-space: normal;

    text-align: left;

    cursor: pointer;

    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;

}



.wildlife-species button:hover,

.wildlife-species button.active {

    transform: translateY(-1px);

    border-color: rgba(24, 89, 62, 0.45);

    box-shadow: 0 8px 14px rgba(18, 35, 28, 0.12);

}



.wildlife-card {

    perspective: 1200px;

    min-height: 680px;

}



.wildlife-card-inner {

    position: relative;

    width: 100%;

    min-height: 680px;

    transform-style: preserve-3d;

    transition: transform 0.7s ease;

}



.wildlife-card.is-flipped .wildlife-card-inner {

    transform: rotateY(180deg);

}



.wildlife-face {

    position: absolute;

    inset: 0;

    border-radius: 16px;

    border: 1px solid var(--line);

    background: rgba(255, 251, 243, 0.9);

    box-shadow: 0 10px 22px rgba(18, 35, 28, 0.16);

    padding: 1rem;

    backface-visibility: hidden;

    overflow: hidden;

}



.wildlife-front {

    display: grid;

    place-content: center;

    text-align: center;

}



.wildlife-front h3 {

    margin-bottom: 0.5rem;

}



.wildlife-front p {

    margin: 0;

    color: var(--muted);

}



.wildlife-back {

    transform: rotateY(180deg);

    display: grid;

    grid-template-rows: auto auto auto minmax(0, 1fr);

    align-content: start;

    gap: 0.7rem;

    min-height: 0;

}



.wildlife-back img {

    width: 100%;

    height: clamp(220px, 34vw, 360px);

    object-fit: contain;

    background: rgba(20, 34, 29, 0.08);

    border-radius: 12px;

}



.wildlife-back h3,

.wildlife-back p {

    margin: 0;

}



#wildlifeLatin {

    font-style: italic;

    color: var(--muted);

}



#wildlifeInfo {

    line-height: 1.5;

    overflow: visible;

    min-height: auto;

}



.site-footer {

    text-align: center;

    padding: 1.6rem 1rem 2rem;

    color: rgba(246, 239, 226, 0.94);

    font-size: 0.94rem;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);

}



.site-version-note {

    margin-top: 0.45rem;

    font-size: 0.86rem;

    color: rgba(246, 239, 226, 0.86);

    letter-spacing: 0.01em;

}



.weather-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem;

}



.weather-card {

    background: rgba(255, 252, 245, 0.86);

    border: 1px solid var(--line);

    border-radius: var(--radius-md);

    padding: 1rem;

    box-shadow: 0 10px 22px rgba(18, 35, 28, 0.12);

}



.weather-card h3 {

    margin-bottom: 0.2rem;

}



.weather-subtitle {

    margin-top: 0;

    color: var(--muted);

    font-size: 0.92rem;

}



.weather-main {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 0.8rem;

    padding: 0.65rem 0;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

    margin-bottom: 0.75rem;

}



.weather-temp {

    margin: 0;

    font-family: "Bitter", serif;

    font-size: clamp(1.8rem, 2.6vw, 2.5rem);

    color: var(--primary-strong);

}



.weather-status {

    margin: 0;

    font-weight: 700;

    color: var(--muted);

}



.weather-metrics {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.5rem 0.8rem;

}



.weather-metrics p {

    margin: 0;

    background: rgba(255, 255, 255, 0.7);

    border: 1px solid rgba(62, 82, 71, 0.15);

    border-radius: 10px;

    padding: 0.5rem 0.65rem;

    display: grid;

    gap: 0.1rem;

}



.weather-metrics span {

    color: var(--muted);

    font-size: 0.83rem;

}



.weather-metrics strong {

    font-size: 1rem;

}



.weather-forecast {

    margin-top: 0.85rem;

    border-top: 1px dashed rgba(62, 82, 71, 0.32);

    padding-top: 0.75rem;

}



.weather-forecast h4 {

    margin: 0 0 0.45rem;

    font-size: 1rem;

}



.weather-forecast ul {

    margin: 0;

    padding: 0;

    list-style: none;

    display: grid;

    gap: 0.3rem;

}



.weather-forecast li {

    display: grid;

    grid-template-columns: 1fr auto auto;

    gap: 0.5rem;

    align-items: baseline;

    font-size: 0.92rem;

}



.weather-forecast em {

    font-style: normal;

    color: var(--muted);

}



.reveal {

    opacity: 0;

    transform: translateY(14px);

}



.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

    transition: opacity 0.65s ease, transform 0.65s ease;

}



@keyframes rise {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@media (max-width: 1000px) {

    body::before {

        background-position: 52% center;

    }



    .site-header {

        width: min(1280px, 96vw);

        padding: 0.6rem 0.75rem;

    }



    .hero,

    .split {

        grid-template-columns: 1fr;

    }



    .cards.three-col,

    .gallery-strip,

    .gallery-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .wildlife-body {

        grid-template-columns: 1fr;

    }



    .weather-grid {

        grid-template-columns: 1fr;

    }



    .wildlife-card,

    .wildlife-card-inner {

        min-height: 610px;

    }

}



@media (max-width: 760px) {

    body::after {

        height: 3px;

    }



    .menu-toggle {

        display: inline-block;

    }



    .site-nav {

        position: absolute;

        top: calc(100% + 0.4rem);

        left: 0;

        right: 0;

        display: none;

        flex-direction: column;

        align-items: stretch;

        border-radius: 14px;

        padding: 0.7rem;

        background: rgba(18, 33, 27, 0.94);

        border-bottom: 1px solid rgba(255, 255, 255, 0.16);

    }



    .site-nav.open {

        display: flex;

    }



    .site-nav a {

        color: rgba(249, 244, 234, 0.94);

        border-radius: 10px;

        text-align: center;

    }



    .site-header {

        top: 6px;

        border-radius: 14px;

    }



    main::before {

        display: none;

    }



    .cards.two-col,

    .cards.three-col,

    .gallery-strip,

    .gallery-grid {

        grid-template-columns: 1fr;

    }



    .wildlife-back img {

        height: clamp(190px, 54vw, 280px);

    }



    .wildlife-card,

    .wildlife-card-inner {

        min-height: 560px;

    }



    .section,

    .hero {

        padding: 1rem;

    }



    .weather-metrics {

        grid-template-columns: 1fr;

    }

}



@media (prefers-reduced-motion: reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}