:root {
    --lj-earth: #3D2321;
    --lj-paper: #F2EFE9;
    --lj-accent: #C5A059;
    --lj-ink-light: rgba(61, 35, 33, 0.6);
    --font-footer: 'Lato', sans-serif;
}

.legal-links {
    display: flex;
    gap: 1.5rem;
}

.legal-links a, .ddx-attr a {
    color: var(--lj-earth);
    text-decoration: none;
    font-weight: 700;
}

.legal-links a:hover, .ddx-attr a:hover {
    text-decoration: underline;
}

.giraffe {
    display: inline-block;
    transition: transform 0.3s ease;
}

.ddx-attr:hover .giraffe {
    transform: translateY(-3px) scale(1.1);
}

.stub-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 900;
    margin: 0 0 0.5rem 0;
    color: var(--lj-accent);
}

.stub-heading {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

.stub-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stub-form input {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(61, 35, 33, 0.2);
    padding: 0.5rem 0;
    font-family: var(--font-footer);
    font-size: 0.95rem;
    color: var(--lj-earth);
    outline: none;
    transition: border-color 0.3s ease;
}

.stub-form input:focus {
    border-color: var(--lj-earth);
}

.stub-form input::placeholder {
    color: var(--lj-ink-light);
    font-style: italic;
}

.stub-form button {
    background-color: transparent;
    color: var(--lj-earth);
    border: 2px solid var(--lj-earth);
    padding: 0.6rem;
    border-radius: 6px;
    font-family: var(--font-footer);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease ease;
}

.stub-form button:hover {
    background-color: var(--lj-earth);
    color: var(--lj-paper);
}

.barcode {
    margin-top: 2rem;
    height: 30px;
    width: 100%;
    background:
        linear-gradient(90deg,
            var(--lj-earth) 0%, var(--lj-earth) 5%,
            transparent 5%, transparent 8%,
            var(--lj-earth) 8%, var(--lj-earth) 10%,
            transparent 10%, transparent 15%,
            var(--lj-earth) 15%, var(--lj-earth) 22%,
            transparent 22%, transparent 24%,
            var(--lj-earth) 24%, var(--lj-earth) 26%,
            transparent 26%, transparent 30%,
            var(--lj-earth) 30%, var(--lj-earth) 32%,
            transparent 32%, transparent 35%,
            var(--lj-earth) 35%, var(--lj-earth) 45%,
            transparent 45%, transparent 48%,
            var(--lj-earth) 48%, var(--lj-earth) 50%,
            transparent 50%, transparent 55%,
            var(--lj-earth) 55%, var(--lj-earth) 60%,
            transparent 60%, transparent 62%,
            var(--lj-earth) 62%, var(--lj-earth) 70%,
            transparent 70%, transparent 75%,
            var(--lj-earth) 75%, var(--lj-earth) 77%,
            transparent 77%, transparent 80%,
            var(--lj-earth) 80%, var(--lj-earth) 85%,
            transparent 85%, transparent 88%,
            var(--lj-earth) 88%, var(--lj-earth) 95%,
            transparent 95%, transparent 97%,
            var(--lj-earth) 97%, var(--lj-earth) 100%
        );
    opacity: 0.3;
}

.ebook-card {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,0.96); border: 1px solid rgba(61,35,33,0.08);
    border-radius: 14px; padding: 28px 20px 20px;
    text-decoration: none; color: var(--lj-earth);
    box-shadow: 0 4px 16px rgba(61,35,33,0.06);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    gap: 12px;
}

.ebook-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(61,35,33,0.12); }

.ebook-thumb { font-size: 3rem; line-height: 1; }

.ebook-info { text-align: center; }

.ebook-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }

.ebook-size { font-size: 0.78rem; color: rgba(61,35,33,0.5); }

:root {
            
            --teal: #00A896;
            --teal-dark: #088F7F;
            --teal-light: #E6F7F5;
            --warm-beige: #B7A095;
            --burnt-orange: #DD6F3E;
            --burnt-orange-dark: #C45E32;
            --deep-brown: #3D2321;
            --charcoal: #2C1A18;
            --copper-tan: #C37F58;
            --soft-sand: #F3E9D2;
            --sand-50: #FDFAF4;
            --sand-100: #FAF6EE;
            --sand-200: #F3E9D2;
            --sand-300: #E8D5BC;
            --white: #FFFFFF;
            --overlay-dark: beige;

            
            --space-xs: 0.5rem;
            --space-sm: 1rem;
            --space-md: 2rem;
            --space-lg: 4rem;
            --space-xl: 6rem;
            --space-2xl: 10rem;

            
            --shadow-sm: 0 1px 3px rgba(61,35,33,0.04), 0 1px 2px rgba(61,35,33,0.06);
            --shadow-md: 0 4px 6px rgba(61,35,33,0.04), 0 10px 15px rgba(61,35,33,0.06);
            --shadow-lg: 0 10px 25px rgba(61,35,33,0.06), 0 20px 48px rgba(61,35,33,0.08);
            --shadow-xl: 0 25px 50px rgba(61,35,33,0.1), 0 12px 24px rgba(61,35,33,0.06);

            
            --ease-out-expo: ease;
            --ease-in-out-quint: ease-in-out;
            --ease-spring: ease;

            
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 16px;
            --radius-xl: 24px;
        }

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

html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

::selection {
            background: rgba(0, 168, 150, 0.15);
            color: var(--deep-brown);
        }

body {
            font-family: 'Montserrat', 'Lato', sans-serif;
            color: var(--deep-brown);
            font-size: 16px;
            line-height: 1.7;
            letter-spacing: -0.011em;
            background-color: var(--white);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
        }

h1, h2, h3, .serif {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            color: var(--deep-brown);
            text-rendering: geometricPrecision;
            letter-spacing: -0.025em;
        }

        .reveal {
            opacity: 0;
            transform: translateY(32px);
            transition: opacity 0.3s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
        }

.reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

.reveal-delay-1 { transition-delay: 0.1s; }

.reveal-delay-2 { transition-delay: 0.2s; }

.reveal-delay-3 { transition-delay: 0.3s; }

.wave-base {
            stroke: rgba(255,255,255,0.15);
            stroke-width: 2;
            fill: none;
        }

.wave-fill {
            stroke: var(--soft-sand);
            stroke-width: 2;
            fill: none;
            stroke-dasharray: 800;
            stroke-dashoffset: 800;
            animation: waveReveal 0.8s 0.1s ease forwards;
        }

.dusty-bg, .section-light, .section-mission, .section-news, .section-updates, .split-panel {
            background-image: radial-gradient(circle at 20% 30%, rgba(221,111,62,0.03) 0%, transparent 40%),
                              radial-gradient(circle at 80% 70%, rgba(0,168,150,0.02) 0%, transparent 40%);
            background-color: var(--sand-50);
        }

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

.section { padding: 100px 0; }

.section-light { background: var(--white); }

.text-center { text-align: center; }

.mb-50 { margin-bottom: 50px; }

        .section-mission {
            padding: 60px 0 40px;
        }

.mission-layout {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 48px;
            align-items: center;
        }

.mission-accent {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding-top: 6px;
        }

.mission-accent-line {
            width: 2px;
            height: 56px;
            background: linear-gradient(180deg, var(--burnt-orange) 0%, var(--copper-tan) 100%);
            border-radius: 2px;
        }

.mission-accent-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--burnt-orange);
        }

.mission-content {
            max-width: 720px;
        }

.mission-label {
            display: inline-block;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--burnt-orange);
            margin-bottom: 16px;
        }

.mission-heading {
            font-size: clamp(2rem, 4vw, 3rem);
            letter-spacing: -0.03em;
            line-height: 1.15;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }

.mission-heading em {
            font-style: normal;
            color: var(--burnt-orange);
        }

.mission-body {
            font-size: 1.05rem;
            line-height: 1.9;
            color: #5a4a42;
            margin-bottom: 28px;
        }

.mission-stats {
            display: flex;
            gap: 40px;
            padding-top: 24px;
            border-top: 1px solid var(--sand-300);
        }

.mission-stat-num {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--deep-brown);
            line-height: 1;
        }

.mission-stat-label {
            font-size: 0.75rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--copper-tan);
            margin-top: 4px;
        }

.mission-img-wrap {
            position: relative;
            width: 260px;
            height: 260px;
            flex-shrink: 0;
        }

.mission-img-wrap::before {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 2px dashed var(--sand-300);
            animation: missionSpin 30s linear infinite;
        }

.mission-img-wrap::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 70%;
            height: 24px;
            background: radial-gradient(ellipse, rgba(61,35,33,0.15) 0%, transparent 70%);
            border-radius: 50%;
        }

.mission-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 18px 40px rgba(61,35,33,0.12), 0 6px 12px rgba(61,35,33,0.08);
            border: 4px solid var(--white);
            position: relative;
            z-index: 1;
        }

@keyframes missionSpin {
            to { transform: rotate(360deg); }
        }

@media (max-width: 900px) {
  .mission-layout { grid-template-columns: auto 1fr; gap: 32px; }

  .mission-img-wrap { grid-column: 1 / -1; justify-self: center; width: 200px; height: 200px; }
}

@media (max-width: 640px) {
  .mission-layout { grid-template-columns: 1fr; gap: 24px; }

  .mission-accent { flex-direction: row; padding-top: 0; }

  .mission-accent-line { width: 56px; height: 2px; }

  .mission-stats { gap: 24px; flex-wrap: wrap; }

  .mission-img-wrap { width: 180px; height: 180px; }
}

.card {
            background: var(--white);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: transform 0.3s var(--ease-out-expo), box-shadow 0.7s var(--ease-out-expo);
        }

.card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

.card-img { height: 250px; background-size: cover; background-position: center; }

.card-body { padding: 32px; }

.card-body h3 { margin-bottom: 16px; font-size: 1.5rem; color: var(--deep-brown); letter-spacing: -0.01em; }

.card-body p { font-size: 0.95rem; color: #666; margin-bottom: 25px; line-height: 1.75; }

.news-card {
            display: flex; flex-wrap: wrap; background: #fff; overflow: hidden;
            box-shadow: var(--shadow-lg); max-width: 960px; margin: 0 auto;
            border-radius: var(--radius-md);
            transition: box-shadow 0.3s var(--ease-out-expo);
        }

.news-card:hover {
            box-shadow: var(--shadow-xl);
        }

.news-card-body {
            flex: 1; min-width: 260px; background: var(--teal); padding: 48px 42px;
            display: flex; flex-direction: column; justify-content: center;
            position: relative;
            overflow: hidden;
        }

.news-card-body::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255,255,255,0.04);
        }

.news-card-body h3 { font-family: 'Playfair Display', serif; font-size: 1.45rem; color: #fff; margin-bottom: 16px; letter-spacing: -0.01em; line-height: 1.35; }

.news-card-body p { font-size: 14px; line-height: 1.85; color: rgba(255,255,255,0.88); }

.news-card-body a {
            display: inline-block; margin-top: 22px; font-size: 11px; font-weight: 700;
            color: #fff; text-transform: uppercase; letter-spacing: 2.5px; text-decoration: none;
            border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 3px;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
        }

.news-card-body a:hover {
            border-bottom-color: var(--burnt-orange);
            color: var(--soft-sand);
            padding-bottom: 5px;
        }

.news-card-img {
            flex: 1; min-width: 280px; min-height: 320px;
            background: url('https://i.postimg.cc/Qtcsn003/IMG-0880.jpg') center/cover no-repeat;
        }

.section-why {
            background: url('https://i.postimg.cc/tJyy0WMJ/IMG-1466.jpg') center/cover fixed;
            position: relative; padding: 120px 5%; text-align: center; color: #fff;
        }

.section-why::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(44,26,24,0.75) 0%, rgba(61,35,33,0.85) 100%);
        }

.section-why > * { position: relative; z-index: 2; }

.section-why h2 { font-family: 'Playfair Display', serif; font-size: 2.8rem; color: var(--soft-sand); letter-spacing: -0.02em; }

.section-why p { max-width: 680px; margin: 24px auto 36px; color: rgba(243,233,210,0.85); line-height: 1.85; font-size: 1.05rem; }

.btn-outline-sand {
            border: 1.5px solid var(--soft-sand); color: var(--soft-sand); background: transparent;
            padding: 14px 40px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
            text-decoration: none; display: inline-block; font-size: 0.8rem;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
        }

.btn-outline-sand:hover { background: var(--soft-sand); color: var(--deep-brown); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(243,233,210,0.2); }

.section-archives {
            background:
                radial-gradient(ellipse 80% 50% at 15% 100%, rgba(195,127,88,0.12) 0%, transparent 55%),
                radial-gradient(ellipse 60% 60% at 85% 0%, rgba(0,168,150,0.07) 0%, transparent 50%),
                linear-gradient(170deg, #0E0B08 0%, #1a0f0c 55%, #0f1410 100%);
            padding: 100px 5%;
            position: relative;
            overflow: hidden;
        }

.section-archives::before {
            content: '';
            position: absolute; inset: 0; pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 200px;
            opacity: 0.04; mix-blend-mode: overlay;
        }

.archives-inner {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(3rem, 6vw, 7rem);
            align-items: center;
            position: relative; z-index: 1;
        }

.archives-left {}

.archives-eyebrow {
            font-size: 0.62rem; letter-spacing: 5px; text-transform: uppercase;
            color: var(--teal); font-weight: 700; margin-bottom: 22px;
            display: flex; align-items: center; gap: 12px;
        }

.archives-eyebrow::before {
            content: ''; display: block; width: 28px; height: 1px; background: var(--teal);
        }

.archives-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2.4rem, 4.5vw, 3.8rem);
            color: #F3E9D2;
            line-height: 1.05; letter-spacing: -0.03em;
            margin-bottom: 24px;
        }

.archives-title em { font-style: italic; color: var(--copper-tan); }

.archives-rule {
            width: 52px; height: 2px;
            background: linear-gradient(90deg, var(--copper-tan), var(--teal));
            margin-bottom: 24px;
        }

.archives-desc {
            font-size: 1rem; font-weight: 300; line-height: 1.85;
            color: rgba(234,226,212,0.6);
            max-width: 480px; margin-bottom: 40px;
        }

.archives-meta {
            display: flex; gap: 2.5rem; margin-bottom: 40px; flex-wrap: wrap;
        }

.archives-meta-item {}

.archives-meta-num {
            font-family: 'Playfair Display', serif;
            font-size: 2.2rem; font-weight: 700; line-height: 1;
            color: #F3E9D2; letter-spacing: -0.04em;
        }

.archives-meta-label {
            font-size: 0.62rem; font-weight: 500; text-transform: uppercase;
            letter-spacing: 2.5px; color: rgba(234,226,212,0.4); margin-top: 4px;
        }

.archives-meta-sep { width: 1px; background: rgba(234,226,212,0.08); align-self: stretch; }

.btn-archive {
            display: inline-flex; align-items: center; gap: 10px;
            background: transparent;
            border: 1.5px solid rgba(195,127,88,0.55);
            color: var(--copper-tan);
            padding: 14px 36px;
            font-size: 0.75rem; font-weight: 700;
            letter-spacing: 2.5px; text-transform: uppercase;
            text-decoration: none;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease ease;
        }

.btn-archive:hover {
            background: var(--copper-tan); color: #1a0f0c;
            transform: translateY(-2px);
            box-shadow: 0 12px 36px rgba(195,127,88,0.3);
            border-color: var(--copper-tan);
        }

.btn-archive i { font-size: 10px; transition: transform 0.4s ease; }

.btn-archive:hover i { transform: translateX(4px); }

        .archives-right {
            position: relative;
            height: clamp(320px, 42vw, 500px);
        }

.arch-polaroid {
            position: absolute;
            background: #fdfaf4;
            padding: 9px 9px 38px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.55);
            transition: transform 0.3s ease, box-shadow 0.5s ease, z-index 0s 0.5s;
            cursor: pointer;
        }

.arch-polaroid:hover {
            transform: scale(1.06) rotate(0deg) !important;
            box-shadow: 0 30px 80px rgba(0,0,0,0.7);
            z-index: 10;
            transition: transform 0.3s ease, box-shadow 0.5s ease, z-index 0s;
        }

.arch-polaroid img {
            display: block; width: 100%; height: 100%;
            object-fit: cover;
            filter: saturate(0.6) brightness(0.88);
            transition: filter 0.3s ease;
        }

.arch-polaroid:hover img { filter: saturate(1.1) brightness(1.05); }

.arch-polaroid .ap-label {
            position: absolute; bottom: 0; left: 0; right: 0; height: 38px;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Playfair Display', serif;
            font-size: 0.65rem; color: #2C1A18; font-style: italic;
            text-align: center; padding: 0 8px;
            opacity: 0; transition: opacity 0.35s ease;
        }

.arch-polaroid:hover .ap-label { opacity: 1; }

        .arch-p1 { width: 52%; height: 62%; top: 0; left: 4%; transform: rotate(-4.5deg); z-index: 3; }

.arch-p2 { width: 44%; height: 52%; top: 8%; right: 0; transform: rotate(3.2deg); z-index: 2; }

.arch-p3 { width: 46%; height: 54%; bottom: 0; left: 0; transform: rotate(2.8deg); z-index: 4; }

.arch-p4 { width: 40%; height: 48%; bottom: 4%; right: 5%; transform: rotate(-3.1deg); z-index: 1; }

        .arch-dot {
            position: absolute; top: 42%; left: 48%;
            width: 10px; height: 10px; border-radius: 50%;
            background: var(--teal);
            box-shadow: 0 0 24px rgba(0,168,150,0.6);
            animation: archDotPulse 2.8s ease-in-out infinite;
            z-index: 5;
        }

@media (max-width: 900px) {
  .archives-inner { grid-template-columns: 1fr; gap: 3rem; }

  .archives-right { height: 300px; }

  .arch-p1 { width: 50%; height: 58%; }

  .arch-p2 { width: 42%; height: 50%; }
}

@media (max-width: 560px) {
  .section-archives { padding: 80px 5%; }

  .archives-right { height: 260px; }

  .archives-title { font-size: 2.2rem; }
}

.section-video {
            padding: 80px 5%;
            background: var(--teal);
            position: relative;
            overflow: hidden;
        }

.paleo-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            opacity: 0.1;
            background: repeating-linear-gradient(45deg,
                rgba(44, 26, 24, 0.08) 0px,
                rgba(44, 26, 24, 0.08) 20px,
                rgba(195, 127, 88, 0.12) 20px,
                rgba(195, 127, 88, 0.06) 40px);
            background-size: 80px 80px;
            animation: shiftStrata 30s linear infinite;
        }

@keyframes shiftStrata {
            0% { background-position: 0 0; }
            100% { background-position: 160px 160px; }
        }

.video-with-text {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

.video-text h2 {
            font-size: 2.4rem;
            margin-bottom: 22px;
            color: var(--white);
            letter-spacing: -0.02em;
        }

.video-text p {
            font-size: 1.05rem;
            color: rgba(255,255,255,0.85);
            margin-bottom: 24px;
            line-height: 1.8;
        }

.btn-outline {
            display: inline-block;
            border: 1.5px solid var(--white);
            color: var(--white);
            padding: 12px 32px;
            text-decoration: none;
            font-weight: 700;
            letter-spacing: 1.5px;
            font-size: 0.8rem;
            text-transform: uppercase;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
        }

.btn-outline:hover {
            background: var(--white);
            color: var(--teal);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

.video-col .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            background: #000;
            cursor: pointer;
            border-radius: var(--radius-md);
            overflow: hidden;
            transition: transform 0.3s var(--ease-out-expo), box-shadow 0.7s var(--ease-out-expo);
        }

.video-wrapper:hover {
            transform: scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
        }

.video-wrapper video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }

.video-wrapper::after {
            content: '\f04b';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background: rgba(221, 111, 62, 0.85);
            border-radius: 50%;
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            padding-left: 3px;
            z-index: 3;
            opacity: 0.85;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
            pointer-events: none;
            box-shadow: 0 4px 20px rgba(221,111,62,0.3);
        }

.video-wrapper:hover::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.12);
            box-shadow: 0 8px 30px rgba(221,111,62,0.4);
        }

        .video-modal {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(44,26,24,0.92);
            backdrop-filter: blur(8px);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }

.video-modal.active {
            display: flex;
        }

.modal-content {
            width: 90%;
            max-width: 1000px;
            position: relative;
        }

.modal-video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            background: #000;
        }

.modal-video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

.close-modal {
            position: absolute;
            top: -48px;
            right: 0;
            color: rgba(255,255,255,0.7);
            font-size: 32px;
            cursor: pointer;
            background: none;
            border: none;
            line-height: 1;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
        }

.close-modal:hover {
            color: var(--burnt-orange);
            transform: rotate(90deg);
        }

@media (max-width: 768px) {
  .video-with-text {
                grid-template-columns: 1fr;
                gap: 30px;
            }

  .video-text {
                order: 1;
            }

  .video-col {
                order: 2;
            }
}

.section-updates {
            background:
                linear-gradient(rgba(249, 243, 232, 0.74), rgba(241, 247, 245, 0.68)),
                radial-gradient(110% 80% at 18% 24%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 62%),
                radial-gradient(95% 75% at 82% 78%, rgba(236,245,242,0.22) 0%, rgba(236,245,242,0) 64%);
            background-repeat: no-repeat;
            background-size: cover, cover, cover, cover;
            background-position: center, center, center, center;
        }

.updates-header {
            display: flex; justify-content: space-between; align-items: flex-end;
            flex-wrap: wrap; gap: 16px; margin-bottom: 36px;
        }

.tabs {
            display: flex; border-bottom: 1.5px solid var(--sand-300); margin-bottom: 36px;
        }

.tab {
            font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
            padding: 12px 0; margin-right: 32px; cursor: pointer;
            border-bottom: 2px solid transparent; margin-bottom: -1.5px; color: #999;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
        }

.tab.active { border-color: var(--burnt-orange); color: var(--deep-brown); }

.tab:hover:not(.active) { color: var(--copper-tan); }

.cards-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px;
            transition: opacity 0.3s ease;
        }

.cards-grid.cycling-fade { opacity: 0; }

.update-card {
            overflow: hidden;
            border: 1px solid rgba(61,35,33,0.08);
            border-radius: 14px;
            background: rgba(255,255,255,0.96);
            box-shadow: 0 8px 22px rgba(61,35,33,0.06);
            transition: transform 0.32s ease, box-shadow 0.32s;
        }

.update-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(61,35,33,0.1);
        }

.update-card-inner {
            overflow: hidden;
            border-radius: var(--radius-md);
        }

.update-card img {
            width: 100%; height: 240px; object-fit: cover;
            transition: transform 0.3s var(--ease-out-expo);
        }

.update-card:hover img { transform: scale(1.06); }

.update-card-body { padding: 16px 16px 18px; }

.update-card-body h4 { font-size: 1.05rem; font-weight: 700; color: var(--deep-brown); margin-bottom: 10px; letter-spacing: -0.01em; }

.update-card-body p { color: #666; line-height: 1.7; }

.gallery-scroll {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            padding: 32px 0;
            cursor: grab;
            scrollbar-width: thin;
            scrollbar-color: var(--copper-tan) var(--sand-100);
            background: var(--sand-50);
        }

.gallery-scroll:active {
            cursor: grabbing;
        }

.gallery-scroll::-webkit-scrollbar {
            height: 6px;
        }

.gallery-scroll::-webkit-scrollbar-track {
            background: var(--sand-100);
        }

.gallery-scroll::-webkit-scrollbar-thumb {
            background-color: var(--copper-tan);
            border-radius: 20px;
        }

.gallery-track {
            display: inline-flex;
            gap: 18px;
            padding: 0 5%;
        }

.gallery-item {
            width: 340px;
            height: 230px;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
            border-radius: var(--radius-md);
            position: relative;
            z-index: 1;
            transition: transform 0.3s var(--ease-out-expo), box-shadow 0.7s var(--ease-out-expo), filter 0.7s;
            filter: saturate(0.9);
        }

.gallery-item:hover {
            transform: translateY(-4px) scale(2);
            z-index: 5;
            box-shadow: 0 16px 32px rgba(61,35,33,0.15);
            filter: saturate(1.1);
        }

@media (max-width: 768px) {
  .gallery-item {
                width: 260px;
                height: 175px;
            }
}

.section-split {
            display: grid; grid-template-columns: 1fr 1fr;
        }

.split-img-1 {
            min-height: 480px;
            background: url('https://i.postimg.cc/WzjjRgHJ/IMG-2961.jpg') center/cover no-repeat;
            transition: background-image 0.3s ease;
        }

.split-panel {
            padding: 80px 10%; background: var(--soft-sand);
            display: flex; flex-direction: column; justify-content: center;
        }

.split-panel h2 { font-size: 2.2rem; margin-bottom: 22px; letter-spacing: -0.02em; }

.split-panel > p { line-height: 1.8; color: #666; margin-bottom: 8px; }

.accordion-item {
            border-bottom: 1px solid rgba(61,35,33,0.08); padding: 20px 0; cursor: pointer;
            transition: background 0.3s;
        }

.accordion-item:hover {
            background: rgba(61,35,33,0.02);
        }

.accordion-header {
            display: flex; justify-content: space-between; align-items: center;
            font-weight: 700; color: var(--deep-brown); font-size: 0.95rem;
            text-transform: uppercase; letter-spacing: 1.5px;
        }

.accordion-header i { transition: transform 0.3s var(--ease-out-expo); color: var(--copper-tan); font-size: 0.85rem; }

.accordion-item.open .accordion-header i { transform: rotate(180deg); }

.accordion-content {
            max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease-out-expo), padding 0.7s var(--ease-out-expo);
            color: #555; font-size: 0.95rem; line-height: 1.75;
        }

.accordion-item.open .accordion-content {
            max-height: 300px; padding-top: 18px;
        }

        .newsletter-panel {
            position: fixed; bottom: 24px; left: 24px;
            width: 340px; z-index: 1001;
            background: var(--charcoal); color: var(--soft-sand);
            border-radius: var(--radius-lg);
            box-shadow: 0 12px 48px rgba(0,0,0,0.35);
            padding: 32px 28px 24px;
            transform: translateY(120%) scale(0.95);
            opacity: 0;
            transition: transform 0.3s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo);
        }

.newsletter-panel.open {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

.newsletter-close {
            position: absolute; top: 12px; right: 14px;
            background: none; border: none; color: var(--soft-sand); font-size: 18px; cursor: pointer;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
        }

.newsletter-close:hover { color: var(--burnt-orange); transform: rotate(90deg); }

.newsletter-panel h3 { font-family: 'Playfair Display', serif; color: #fff; margin-bottom: 8px; font-size: 1.15rem; }

.newsletter-panel p { font-size: 13px; color: rgba(243,233,210,0.8); line-height: 1.6; }

.newsletter-panel input[type="email"] {
            width: 100%; padding: 11px 12px; border: 1px solid rgba(183,160,149,0.3); border-radius: var(--radius-sm);
            background: rgba(255,255,255,0.06); color: #fff; margin: 16px 0 12px;
            font-size: 0.9rem;
            transition: border 0.4s var(--ease-out-expo), background 0.4s;
        }

.newsletter-panel input[type="email"]:focus {
            border-color: var(--burnt-orange);
            background: rgba(255,255,255,0.1);
            outline: none;
        }

.btn-subscribe {
            width: 100%; padding: 12px; background: var(--teal); color: #fff;
            border: none; border-radius: var(--radius-sm); font-weight: 700; text-transform: uppercase;
            letter-spacing: 1px; font-size: 0.75rem;
            cursor: pointer;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
        }

.btn-subscribe:hover { background: var(--teal-dark); transform: translateY(-1px); }

.newsletter-divider { border-color: rgba(183,160,149,0.2); margin: 18px 0; }

.older-link { color: var(--copper-tan); text-decoration: none; font-size: 12px; transition: color 0.4s; }

.older-link:hover { color: var(--burnt-orange); }

.newsletter-tab {
            position: fixed; bottom: 24px; left: 24px;
            z-index: 1000; background: var(--charcoal); color: rgba(255,255,255,0.9);
            padding: 12px 20px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
            cursor: pointer; border-radius: 50px; border: none;
            box-shadow: 0 4px 20px rgba(0,0,0,0.25);
            opacity: 0; pointer-events: none;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
        }

.newsletter-tab.visible { opacity: 1; pointer-events: all; }

.newsletter-tab:hover { background: var(--burnt-orange); color: #fff; transform: translateY(-2px); }

.newsletter-emoji { display: inline-block; margin-right: 6px; }

        .fossil-drop {
            position: fixed; z-index: 9999; font-size: 24px;
            pointer-events: none; animation: fossilFall 2.5s ease-in forwards;
        }

@keyframes fossilFall {
            0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
            80%  { opacity: 1; }
            100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
        }

        .cookie-banner {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: var(--charcoal); backdrop-filter: blur(8px);
            color: var(--soft-sand); padding: 18px 5%;
            display: flex; justify-content: space-between; align-items: center;
            gap: 20px; z-index: 999; flex-wrap: wrap;
            border-top: 1.5px solid var(--copper-tan);
            box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        }

.cookie-banner p { font-size: 13px; line-height: 1.6; }

.cookie-banner a { color: var(--burnt-orange); transition: color 0.4s var(--ease-out-expo); text-decoration: none; border-bottom: 1px solid transparent; }

.cookie-banner a:hover { color: var(--soft-sand); border-bottom-color: var(--soft-sand); }

.cookie-btns { display: flex; gap: 10px; }

.cookie-btn {
            padding: 9px 22px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
            text-transform: uppercase; cursor: pointer; border: none;
            border-radius: var(--radius-sm);
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
        }

.cookie-btn.accept { background: var(--teal); color: #fff; }

.cookie-btn.accept:hover { background: var(--teal-dark); transform: translateY(-1px); }

.cookie-btn.reject { background: transparent; color: var(--soft-sand); border: 1px solid rgba(243,233,210,0.3); }

.cookie-btn.reject:hover { background: rgba(243,233,210,0.1); border-color: var(--soft-sand); }

        footer {
            background: var(--soft-sand);
            color: var(--deep-brown);
            padding: 100px 0 0;
            position: relative;
        }

footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        }

.footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 64px;
            margin-bottom: 64px;
        }

.footer-brand p { color: rgba(61,35,33,0.75); line-height: 1.8; font-size: 0.95rem; }

@media (max-width: 992px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .section-split { grid-template-columns: 1fr; }
}

[v-cloak] {
            opacity: 0;
        }

.wrapper {
            height: calc(100vh - 50px);
            min-height: 36rem;
            position: relative;
        }

@media (max-width: 630px) {
  .wrapper {
                height: 100vh;
                min-height: 0;
            }
}

.slide-wrapper {
            background-size: cover;
            height: 100%;
            background-position: center center;
            position: absolute;
            width: 100%;
            background-blend-mode: darken;
            opacity: 0;
            transition-delay: 1.2s;
            transition-duration: 0s;
            transition-property: opacity;
            will-change: opacity, transform;
        }

.slide-wrapper:nth-child(1) {
            background-color: rgba(44, 26, 24, 0.15);
        }

.slide-wrapper:nth-child(1):before {
            background: linear-gradient(135deg, rgba(44,26,24,0.3) 0%, rgba(0,168,150,0.08) 100%);
        }

.slide-wrapper:nth-child(2) {
            background-color: transparent;
            background-size: cover;
            background-position: center center;
        }

.slide-wrapper:nth-child(2):before {
            background: linear-gradient(135deg, rgba(44,26,24,0.35) 0%, rgba(195,127,88,0.1) 100%);
        }

.slide-wrapper:nth-child(3) {
            background-color: rgba(44, 26, 24, 0.15);
        }

.slide-wrapper:nth-child(3):before {
            background: linear-gradient(135deg, rgba(44,26,24,0.3) 0%, rgba(221,111,62,0.08) 100%);
        }

.slide-wrapper:nth-child(4) {
            background-color: rgba(183, 160, 149, 0.35);
        }

.slide-wrapper:nth-child(4):before {
            background: linear-gradient(135deg, rgba(44,26,24,0.35) 0%, rgba(183,160,149,0.15) 100%);
        }

.slide-wrapper:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

.slide-wrapper:not(.active) {
            animation-name: slideLeft;
            animation-duration: : 0.4s;
            animation-timing-function: ease;
            pointer-events: none;
        }

.slide-wrapper:not(.active) .slide-content-text > span,
        .slide-wrapper:not(.active) .slide-side-text {
            animation-name: cutTextUp;
            animation-duration: 0.4s;
            animation-timing-function: ease-out;
        }

.slide-wrapper:not(.active) .slide-rect {
            display: none;
        }

.slide-wrapper.active {
            transition-delay: 0s;
            opacity: 1;
            animation: kenBurns 8s ease-out forwards;
        }

.slide-wrapper.active .slide-content-text > span {
            opacity: 0;
            animation-delay: 1s;
            animation-name: cutTextDown;
            animation-duration: 0.4s;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
        }

.slide-wrapper.active .slide-rect {
            display: none;
        }

.is-previous .slide-wrapper:not(.active) {
            animation: none;
        }

.is-previous .slide-wrapper:not(.active) .slide-rect {
            display: none;
        }

.is-previous .slide-wrapper.active {
            transform: translateX(-100%);
            animation-fill-mode: forwards;
            animation-delay: 0.5s;
            animation-name: slideRight;
            animation-duration: : 0.4s;
            animation-timing-function: ease;
        }

.is-previous .slide-wrapper.active .slide-rect {
            display: none;
        }

.first-load .slide-wrapper.active .slide-side-text,
        .first-load .slide-wrapper.active .slide-content-cta,
        .first-load .slide-wrapper.active .slide-rect,
        .first-load .controls-container {
            opacity: 0;
            animation-name: fadeIn;
            animation-delay: 0.3s;
            animation-duration: 0.4s;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in;
        }

.first-load .slide-wrapper.active .slide-content-text > span {
            animation-name: fadeIn;
            animation-delay: 0.5s;
            animation-duration: 0.4s;
        }

.slide-inner {
            position: relative;
            z-index: 2;
            height: 100%;
            overflow: hidden;
        }

.slide-bg-text {
            font-family: 'Playfair Display';
            color: #000;
            font-size: 42vh;
            line-height: 0.8;
            opacity: 0.03;
            font-weight: 900;
            margin-top: -4rem;
            position: absolute;
            top: 50%;
            left: 5vw;
            transform: translateY(-50%);
        }

.slide-bg-text > span {
            display: block;
        }

.slide-bg-text > span:last-child {
            padding-left: 4rem;
        }

.slide-content {
            color: #fff;
            margin-top: 5rem;
            position: absolute;
            top: 50%;
            left: calc(13vw + 0.7 * 48vh);
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
        }

@media (max-width: 1000px) {
  .slide-content {
                left: calc(13vw + 1rem);
            }
}

@media (max-height: 730px) {
  .slide-content {
                top: 30%;
                transform: translateY(-30%);
                left: calc(9vw + 0.7 * 16vw);
            }
}

.slide-content-text {
            font-family: 'Playfair Display';
            font-size: 9rem;
            letter-spacing: -0.03em;
            line-height: 0.87;
            font-weight: 900;
            will-change: auto;
            text-shadow: 0 2px 20px rgba(0,0,0,0.25), 0 4px 60px rgba(0,0,0,0.12);
        }

@media (max-height: 790px) {
  .slide-content-text {
                font-size: 7rem;
            }
}

@media (max-width: 1150px) {
  .slide-content-text {
                font-size: 7rem;
            }
}

@media (max-width: 840px) {
  .slide-content-text {
                font-size: 5.5rem;
            }
}

@media (max-width: 630px) {
  .slide-content-text {
                margin-bottom: 5.5rem;
            }
}

@media (max-width: 500px) {
  .slide-content-text {
                font-size: 3.5rem;
            }
}

.slide-content-text > span {
            display: block;
        }

.slide-content-text > span:last-child {
            padding-left: 3rem;
        }

.slide-content-cta {
            font-family: 'Montserrat';
            text-transform: uppercase;
            color: #fff;
            letter-spacing: 0.18rem;
            font-size: 0.68rem;
            line-height: 1;
            cursor: pointer;
            align-self: flex-start;
            margin-top: 4.5rem;
            margin-left: calc(0.3 * 48vh + 4.5rem);
            padding: 1rem 2.4rem;
            border-left: 1px solid rgba(255,255,255,0.6);
            border-right: 1px solid rgba(255,255,255,0.6);
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
            font-weight: 700;
            backdrop-filter: blur(4px);
            background: rgba(255,255,255,0.06);
        }

@media (max-width: 1000px) {
  .slide-content-cta {
                background-color: rgba(255, 255, 255, 0.3);
                padding-top: 1.2rem;
                padding-bottom: 1.2rem;
            }
}

@media (max-width: 630px) {
  .slide-content-cta {
                display: none;
            }
}

.slide-content-cta:hover {
            color: var(--deep-brown);
            background-color: #fff;
            border-color: #fff;
            transform: translateY(-1px);
        }

.slide-rect, .slide-rect-filter {
            display: none;
        }

.slide-side-text {
            font-family: 'Montserrat';
            text-transform: uppercase;
            color: #fff;
            letter-spacing: 0.12rem;
            font-size: 0.7rem;
            line-height: 1;
            position: absolute;
            left: calc(13vw - 3rem);
            writing-mode: vertical-rl;
            top: calc((50% - 31vh) + 2.5vh);
        }

@media (max-height: 790px) {
  .slide-side-text {
                left: calc(9vw - 3rem);
                top: calc((50% - 10vw) + 2.5vh);
            }
}

@media (max-height: 730px) {
  .slide-side-text {
                top: calc((40% - 10vw) + 2.5vh);
            }
}

.slide-side-text > span:first-child {
            font-weight: 700;
        }

.slide-side-text:after {
            content: "";
            width: 1px;
            background-color: #fff;
            height: 40px;
            display: block;
            position: absolute;
            top: calc(100% + 25px);
            left: 50%;
            transform: translateX(-50%);
        }

        .controls-container {
            position: absolute;
            z-index: 200;
            display: flex;
            bottom: 0;
            right: 0;
            align-items: flex-end;
        }

@media (max-width: 630px) {
  .controls-container {
                display: none;
            }
}

.controls-button {
            font-family: 'Montserrat';
            text-transform: uppercase;
            color: #fff;
            letter-spacing: 0.14rem;
            font-size: 0.68rem;
            line-height: 1;
            cursor: pointer;
            background-color: rgba(44, 26, 24, 0.25);
            backdrop-filter: blur(8px);
            border: 0;
            padding: 1.6rem 2.2rem;
            flex-basis: 0;
            flex-grow: 1;
            min-width: 15rem;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease var(--ease-out-expo);
            outline: 0;
        }

@media (max-width: 730px) {
  .controls-button {
                padding: 1.2rem 1.4rem;
                min-width: 13rem;
            }
}

.controls-button:not(.active):hover {
            color: var(--deep-brown);
            background-color: rgba(255,255,255,0.92);
        }

.controls-button.active {
            cursor: default;
            font-weight: 700;
            padding-top: 1.9rem;
            padding-bottom: 1.9rem;
            margin-bottom: -0.3rem;
            position: relative;
        }

@media (max-width: 730px) {
  .controls-button.active {
                padding-top: 1.4rem;
                padding-bottom: 1.4rem;
                margin-bottom: -0.15rem;
            }
}

.controls-button.active:after {
            content: "";
            background: linear-gradient(90deg, var(--burnt-orange), var(--copper-tan));
            height: 3px;
            width: calc(100% - 8px);
            position: absolute;
            top: 100%;
            left: 4px;
            border-radius: 2px;
        }

.controls-button:not(.active) + .controls-button {
            border-left: 1px solid rgba(255, 255, 255, 0.2);
        }

        .pagination-container {
            position: absolute;
            z-index: 200;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            right: 2rem;
            top: 50%;
            transform: translateY(-50%);
        }

@media (max-width: 920px) {
  .pagination-container {
                display: none;
            }
}

.pagination-item {
            width: 32px;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.35);
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease ease;
            border-radius: 2px;
            cursor: pointer;
        }

.pagination-item + .pagination-item {
            margin-top: 1rem;
        }

.pagination-item.active {
            background-color: #fff;
            position: relative;
            width: 48px;
            height: 3px;
            transform: translateX(-0.5rem);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
            cursor: default;
        }

.pagination-item.active:after {
            content: "";
            height: 5px;
            width: 3px;
            border-radius: 50%;
            background-color: var(--burnt-orange);
            display: inline-block;
            position: absolute;
            right: -2px;
            top: 50%;
            transform: translateY(-50%);
        }

.pagination-item:not(.active) {
            cursor: pointer;
        }

.pagination-item:not(.active):hover {
            background-color: rgba(255, 255, 255, 0.7);
            width: 40px;
            height: 2px;
        }

        @keyframes slideLeft {
            from { transform: translateX(0); }
            to { transform: translateX(-100%); }
        }

@keyframes slideRight {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }

@keyframes cutTextUp {
            from { clip-path: inset(0 0 -10% 0); }
            to { clip-path: inset(0 0 100% 0); }
        }

@keyframes cutTextDown {
            from { clip-path: inset(100% 0 0 0); }
            to { clip-path: inset(-10% 0 -20% 0); opacity: 1; }
        }

@keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

@keyframes kenBurns {
            0%   { transform: scale(1); }
            100% { transform: scale(1.08); }
        }

.atlas-section { background: #F7F2EA; padding: 50px 0 80px; position: relative; overflow: hidden; color: var(--deep-brown); }

.atlas-section::before {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(ellipse at 20% 40%, rgba(0,168,150,0.04) 0%, transparent 55%),
                        radial-gradient(ellipse at 80% 60%, rgba(221,111,62,0.03) 0%, transparent 50%);
            pointer-events: none;
        }

.atlas-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.atlas-header { text-align: center; margin-bottom: 18px; }

.atlas-header h2 { color: var(--deep-brown); font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 10px; font-family: 'Playfair Display', serif; letter-spacing: -0.02em; }

.atlas-header .atlas-sub { color: var(--teal); letter-spacing: 3px; text-transform: uppercase; font-size: 0.82rem; font-weight: 700; }

        .atlas-hint {
            display: flex; justify-content: center; align-items: center; gap: 24px;
            margin: 16px auto 36px; flex-wrap: wrap;
            font-size: 0.68rem; font-weight: 700; letter-spacing: 1px;
            text-transform: uppercase; color: rgba(61,35,33,0.45);
        }

.atlas-hint-item {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 16px;
            background: rgba(255,255,255,0.7); backdrop-filter: blur(8px);
            border: 1px solid rgba(61,35,33,0.08); border-radius: 40px;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
        }

.atlas-hint-item:hover { background: rgba(255,255,255,0.95); color: var(--teal); border-color: var(--teal); }

.atlas-hint-icon {
            width: 22px; height: 22px; border-radius: 50%;
            background: rgba(0,168,150,0.1);
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; color: var(--teal); flex-shrink: 0;
        }

.atlas-hint-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(61,35,33,0.15); }

.atlas-hint-tour { background: rgba(221,111,62,0.08) !important; border-color: rgba(221,111,62,0.2) !important; animation: buttonPulsate 2s ease-in-out infinite; }

.atlas-hint-tour:hover { background: rgba(221,111,62,0.15) !important; color: var(--burnt-orange); animation: none; }

        .tutorial-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }

.tutorial-overlay.hidden { display: none !important; }

.tutorial-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); animation: fadeIn 0.4s; }

.tutorial-spotlight { position: fixed; width: 300px; height: 300px; border-radius: 50%; border: 3px solid rgba(221,111,62,0.6); box-shadow: 0 0 0 9999px rgba(0,0,0,0.6), inset 0 0 20px rgba(0,168,150,0.3); z-index: 1; animation: spotlightPulse 2s ease-in-out infinite; }

.tutorial-card { position: relative; z-index: 2; background: rgba(255,252,248,0.98); backdrop-filter: blur(8px); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 32px; max-width: 420px; animation: slideInFromBottom 0.5s ease; }

.tutorial-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid rgba(61,35,33,0.08); padding-bottom: 16px; }

.tutorial-header h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--deep-brown); margin: 0; }

.tutorial-close { background: none; border: none; font-size: 28px; color: rgba(61,35,33,0.5); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; }

.tutorial-close:hover { color: var(--burnt-orange); transform: rotate(90deg); }

.tutorial-body { margin-bottom: 24px; }

.tutorial-body p { font-size: 0.95rem; line-height: 1.6; color: var(--deep-brown); margin: 0 0 16px 0; }

.tutorial-footer { display: flex; justify-content: space-between; align-items: center; }

.tutorial-progress { font-size: 0.75rem; color: rgba(61,35,33,0.5); font-weight: 700; letter-spacing: 1px; }

.tutorial-btn { padding: 8px 16px; border: 1px solid rgba(61,35,33,0.2); background: rgba(255,255,255,0.5); color: var(--deep-brown); border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.75rem; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; }

.tutorial-btn-secondary { background: rgba(255,255,255,0.3); }

.tutorial-btn-secondary:hover { background: rgba(255,255,255,0.5); }

.tutorial-btn-primary { background: var(--burnt-orange); color: white; border-color: var(--burnt-orange); }

.tutorial-btn-primary:hover { background: var(--teal); border-color: var(--teal); transform: translateX(4px); }

        .map-tooltip { position: absolute; background: rgba(255,252,248,0.95); backdrop-filter: blur(8px); padding: 8px 12px; border-radius: 8px; font-size: 0.7rem; font-weight: 700; color: var(--deep-brown); border: 1px solid rgba(61,35,33,0.1); white-space: nowrap; pointer-events: none; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.1); animation: slideInFromTop 0.3s ease-out; }

        .map-stats { position: absolute; bottom: 60px; left: 20px; background: rgba(255,255,255,0.75); backdrop-filter: blur(8px); border: 1px solid rgba(61,35,33,0.08); border-radius: 10px; padding: 12px 16px; z-index: 14; font-size: 0.65rem; color: var(--deep-brown); }

.stat-row { display: flex; gap: 12px; margin: 6px 0; align-items: center; }

.stat-label { font-weight: 700; color: rgba(61,35,33,0.6); min-width: 80px; }

.stat-value { font-family: 'Playfair Display', serif; color: var(--burnt-orange); font-weight: 700; }

        .map-legend-btn { position: absolute; top: 20px; right: 320px; z-index: 15; background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); border: 1px solid rgba(61,35,33,0.08); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 0.65rem; font-weight: 700; color: var(--deep-brown); transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; }

.map-legend-btn:hover { background: rgba(255,255,255,0.8); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

        .marker-hover-info { position: absolute; background: rgba(255,252,248,0.92); backdrop-filter: blur(8px); padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(61,35,33,0.1); font-size: 0.7rem; color: var(--deep-brown); pointer-events: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.08); animation: slideInFromTop 0.3s ease-out; }

#map-wrap {
            position: relative; width: 100%; height: 72vh; min-height: 620px;
            border-radius: 16px; overflow: hidden;
            background: linear-gradient(145deg, #FAFAF7 0%, #F5F0EA 40%, #EEEBE5 100%);
            box-shadow: inset 0 0 0 1px rgba(61,35,33,0.08), 0 2px 8px rgba(0,0,0,0.04);
            cursor: crosshair;
            transition: box-shadow 0.3s;
            margin: 0;
        }

#map-wrap:hover { box-shadow: inset 0 0 0 1px rgba(61,35,33,0.12), 0 4px 12px rgba(0,0,0,0.06); }

        #map-wrap::after {
            content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
            opacity: 0.008;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-repeat: repeat; mix-blend-mode: multiply; border-radius: 16px;
        }

#map-3d-layer { position: absolute; inset: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.1s; }

        #map-underlay {
            position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
            background-image: url('https://i.postimg.cc/63889hjS/turkana.png');
            background-size: cover; background-position: center; background-repeat: no-repeat;
            opacity: 0.12; pointer-events: none; mix-blend-mode: multiply;
        }

        #topo-svg { transition: transform 0.2s ease-out; }

#conn-svg { transition: transform 0.25s ease-out; }

#strata-overlay { transition: transform 0.3s ease-out; }

        #map-scanner-sweep {
            position: absolute; inset: 0; z-index: 2; pointer-events: none;
            background: conic-gradient(from 0deg, transparent 0deg,
                rgba(0,168,150,0.02) 12deg, rgba(0,168,150,0.04) 18deg,
                rgba(0,168,150,0.01) 26deg, transparent 36deg);
            opacity: 0; border-radius: 16px;
            animation: sweepRot 18s linear infinite paused;
            transition: opacity 0.3s;
        }

#map-wrap:hover #map-scanner-sweep { opacity: 0.5; animation-play-state: running; }

@keyframes sweepRot { to { transform: rotate(360deg); } }

        #scan-line {
            position: absolute; left: 0; right: 0; height: 1px; z-index: 3; pointer-events: none;
            background: linear-gradient(90deg, transparent, rgba(0,168,150,0.2), rgba(0,168,150,0.3), rgba(0,168,150,0.2), transparent);
            opacity: 0; top: 0;
            box-shadow: 0 0 6px rgba(0,168,150,0.15);
            animation: scanMove 8s ease-in-out infinite paused;
        }

#map-wrap:hover #scan-line { opacity: 0.6; animation-play-state: running; }

@keyframes scanMove {
            0%   { top: -2px; opacity: 0; }
            5%   { opacity: 0.8; }
            95%  { opacity: 0.8; }
            100% { top: calc(100% + 2px); opacity: 0; }
        }

#map-scanner {
            position: absolute; width: 320px; height: 320px; border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 65%);
            pointer-events: none; transform: translate(-50%, -50%); z-index: 4;
            mix-blend-mode: overlay; opacity: 0; transition: opacity 0.3s;
        }

#map-wrap:hover #map-scanner { opacity: 1; }

        #topo-svg { width: 100%; height: 100%; opacity: 0.78; mix-blend-mode: multiply; z-index: 1; position: relative; pointer-events: none; }

.topo-line { fill: none; stroke: var(--teal); stroke-width: 1.2; stroke-dasharray: 2000; stroke-dashoffset: 2000; opacity: 0.38; transition: opacity 0.3s; stroke-linecap: round; stroke-linejoin: round; }

.topo-line:nth-child(3n)  { stroke: var(--burnt-orange); stroke-width: 0.9; opacity: 0.26; }

.topo-line:nth-child(5n)  { stroke: rgba(0,168,150,0.5); stroke-width: 0.75; opacity: 0.28; }

.topo-line:nth-child(5n)  { stroke: var(--copper-tan); stroke-width: 1.0; opacity: 0.25; }

.topo-line-major { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-dasharray: 2000; stroke-dashoffset: 2000; opacity: 0.5; }

.topo-line-major:nth-child(3n)  { stroke: var(--burnt-orange); opacity: 0.35; }

.topo-line-major:nth-child(5n)  { stroke: var(--copper-tan); opacity: 0.4; }

.topo-line.drawn, .topo-line-major.drawn { animation: drawLine 5s ease forwards; }

.topo-line:hover, .topo-line-major:hover { opacity: 0.8 !important; stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(255,255,255,0.4)); }

.topo-water { fill: rgba(0,168,150,0.08); stroke: rgba(0,168,150,0.3); stroke-width: 0.8; opacity: 0.9; }

.topo-water:hover { opacity: 1; stroke-width: 1.2; }

.water-layer { animation: pulseLight 4s ease-in-out infinite; }

.topo-grid { stroke: rgba(61,35,33,0.06); stroke-width: 0.7; fill: none; stroke-dasharray: 4 8; opacity: 0.5; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }

        #conn-svg { position: absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; overflow:visible; }

.c-line {
            fill: none; stroke: rgba(0,168,150,0.18); stroke-width: 1.2;
            stroke-dasharray: 8 6;
            stroke-linecap: round; stroke-linejoin: round;
            animation: lineFlow 6s linear infinite;
            transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease ease;
            opacity: 0.6;
        }

.c-line.highlighted {
            stroke: rgba(0,168,150,0.9); stroke-width: 2.5; stroke-dasharray: 6 4;
            filter: drop-shadow(0 0 8px rgba(0,168,150,0.65)) drop-shadow(0 0 3px rgba(0,168,150,0.3));
            animation: lineFlowActive 3.5s linear infinite;
            opacity: 1;
        }

@keyframes lineFlow {
            0% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 14; }
        }

@keyframes lineFlowActive {
            0% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 10; }
        }

        #markers-layer { position: absolute; inset:0; width:100%; height:100%; z-index:10; pointer-events:none; }

.atlas-marker {
            position: absolute; transform: translate(-50%, -50%);
            width: 68px; height: 68px;
            display: flex; align-items: center; justify-content: center;
            pointer-events: auto; cursor: pointer;
            transition: opacity 0.3s, transform 0.5s;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
        }

.atlas-marker.dormant { opacity: 0.2; pointer-events: none; transform: translate(-50%, -50%) scale(0.5); }

.atlas-marker.entering { animation: mkBurst 0.8s ease both; }

@keyframes mkBurst {
            0%   { transform: translate(-50%,-50%) scale(0); opacity: 0; }
            65%  { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }
            100% { transform: translate(-50%,-50%) scale(1); }
        }

.marker-core {
            width: 14px; height: 14px; background: var(--burnt-orange); border-radius: 50%;
            box-shadow: 0 0 16px rgba(221,111,62,0.6), 0 4px 20px rgba(221,111,62,0.4), inset 0 0 8px rgba(255,255,255,0.3);
            position: relative; z-index: 2;
            border: 3px solid rgba(255,255,255,0.95);
            transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
        }

.marker-ring {
            position: absolute; inset: -16px; border-radius: 50%;
            border: 2px solid rgba(221,111,62,0.45);
            transition: transform 0.4s ease, border-color 0.3s;
            box-shadow: 0 0 12px rgba(221,111,62,0.2);
        }

.marker-pulse {
            position: absolute; inset: -8px; border-radius: 50%;
            border: 2px solid rgba(221,111,62,0.35);
            animation: markerPls 3.2s ease-in-out infinite;
        }

@keyframes markerPls {
            0%,100% { transform: scale(1); opacity: 0.5; }
            50%      { transform: scale(2.4); opacity: 0; }
        }

.atlas-marker:hover .marker-core { transform: scale(1.6); background: var(--teal); box-shadow: 0 0 32px rgba(0,168,150,0.8), 0 0 16px rgba(0,168,150,0.5), 0 8px 24px rgba(0,168,150,0.4), inset 0 0 12px rgba(255,255,255,0.4); animation: markerGlow 0.6s ease-in-out; }

.atlas-marker:hover .marker-ring { transform: scale(1.6); border-color: rgba(0,168,150,0.75); box-shadow: 0 0 20px rgba(0,168,150,0.5); }

.atlas-marker.selected .marker-core { background: var(--teal); box-shadow: 0 0 32px rgba(0,168,150,0.8), 0 0 16px rgba(0,168,150,0.5), inset 0 0 12px rgba(255,255,255,0.4); animation: markerGlow 0.6s ease-in-out infinite; }

.marker-label {
            position: absolute; top: 38px; left: 50%; transform: translateX(-50%);
            font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
            white-space: nowrap; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
            padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,1);
            box-shadow: 0 4px 16px rgba(61,35,33,0.1); color: var(--deep-brown);
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translateX(-50%) translateY(8px) rotateX(90deg);
            transform-origin: bottom center;
        }

.marker-age-label {
            position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
            font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.6rem;
            color: var(--burnt-orange); white-space: nowrap; opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translateX(-50%) translateY(-8px) rotateX(90deg);
            transform-origin: top center;
        }

.atlas-marker:hover .marker-label { opacity: 1; transform: translateX(-50%) translateY(0) rotateX(0deg); }

.atlas-marker:hover .marker-age-label { opacity: 1; transform: translateX(-50%) translateY(0) rotateX(0deg); }

        .atlas-marker.secret .marker-core { background: #9B3D27; }

.atlas-marker.secret .marker-pulse { border-color: rgba(155,61,39,0.4); }

        .map-hud {
            position: absolute; background: rgba(255,255,255,0.7);
            backdrop-filter: blur(8px) saturate(120%);
            border: 1px solid rgba(61,35,33,0.08); border-radius: 12px;
            padding: 12px 18px; pointer-events: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04); z-index: 15;
        }

.hud-tl { top: 20px; left: 20px; }

.hud-tr { top: 20px; right: 20px; text-align: right; }

.hud-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--deep-brown); font-weight: 700; line-height: 1; }

.hud-subtitle { font-size: 0.55rem; color: rgba(61,35,33,0.5); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 2px; }

.hud-count-num { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.4rem; color: var(--burnt-orange); font-weight: 700; line-height: 1; }

        #hud-coords {
            position: absolute; bottom: 20px; left: 20px; z-index: 15;
            background: rgba(255,255,255,0.7); backdrop-filter: blur(8px) saturate(120%);
            border: 1px solid rgba(61,35,33,0.08); border-radius: 10px;
            padding: 8px 14px; pointer-events: none;
            font-size: 0.56rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
            color: rgba(61,35,33,0.65); font-family: 'Courier New', monospace; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            transition: opacity 0.3s;
        }

#hud-coords span { color: var(--teal); }

        #compass {
            position: absolute; bottom: 140px; right: 20px; z-index: 15;
            width: 60px; height: 60px; pointer-events: none; opacity: 0.7;
        }

.compass-svg { width: 100%; height: 100%; }

        
        .atlas-stage {
            position: relative;
            display: flex;
            flex-direction: row;
            min-height: 700px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 16px 56px rgba(61,35,33,0.12), 0 4px 16px rgba(0,0,0,0.06);
        }

        #map-wrap {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-height: unset !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            z-index: 0 !important;
            opacity: 0.22;
            cursor: crosshair;
            pointer-events: auto;
            background: linear-gradient(145deg, #FAFAF7 0%, #F5F0EA 40%, #EEEBE5 100%);
        }

#map-wrap::after { border-radius: 0 !important; }

#map-wrap.tremor { animation: mapTremor 0.6s ease; }

        #map-wrap.night-mode { background: linear-gradient(145deg, #1A120E 0%, #231610 40%, #2C1A0E 100%); }

#map-wrap.night-mode #topo-svg { opacity: 0.85; mix-blend-mode: screen; }

#map-wrap.night-mode .topo-line { stroke: rgba(0,168,150,0.7); }

#map-wrap.night-mode .topo-line:nth-child(3n) { stroke: rgba(221,111,62,0.5); }

#map-wrap.night-mode .map-hud { background: rgba(20,10,8,0.8); border-color: rgba(255,255,255,0.08); }

#map-wrap.night-mode .map-hud .hud-title { color: rgba(243,233,210,0.9); }

#map-wrap.night-mode .map-hud .hud-subtitle { color: var(--teal); }

#map-wrap.night-mode .hud-count-num { color: rgba(221,111,62,0.9); }

#map-wrap.night-mode #hud-coords { background: rgba(0,168,150,0.15); border-color: rgba(0,168,150,0.2); }

        #map-info-panel {
            position: relative !important;
            z-index: 10 !important;
            flex: 3 !important;
            min-width: 0 !important;
            width: auto !important;
            height: auto !important;
            max-height: none !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            display: flex !important;
            flex-direction: column !important;
            background: rgba(255, 252, 248, 0.97) !important;
            backdrop-filter: blur(8px) saturate(150%) !important;
            border: none !important;
            border-right: 1px solid rgba(61,35,33,0.08) !important;
            border-radius: 0 !important;
            transform: none !important;
            transition: none !important;
            overflow: hidden !important;
            box-shadow: none !important;
        }

.panel-stripe { height: 3px; flex-shrink: 0; background: linear-gradient(90deg, var(--burnt-orange), var(--teal)); }

.panel-scroll {
            flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
            padding: 18px 22px 22px; scrollbar-width: thin;
            scrollbar-color: rgba(184,94,40,0.3) rgba(184,94,40,0.06);
            display: flex; flex-direction: column; gap: 10px;
        }

.panel-close { display: none !important; }

.panel-eyebrow { font-size: 0.5rem; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.panel-eyebrow::before { content: ''; display: block; width: 10px; height: 1px; background: var(--teal); flex-shrink: 0; }

.panel-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.6rem; color: var(--deep-brown); line-height: 0.95; letter-spacing: -0.02em; flex-shrink: 0; }

.panel-age-badge { display: inline-block; padding: 2px 10px; background: rgba(221,111,62,0.1); color: var(--burnt-orange); border-radius: 40px; font-size: 0.6rem; font-weight: 700; border: 1px solid rgba(221,111,62,0.2); font-family: 'Playfair Display', serif; font-style: italic; flex-shrink: 0; }

        .fossil-thumbnail-box {
            width: 100%; height: 240px; border-radius: 12px; overflow: hidden;
            background: rgba(61,35,33,0.04); border: 1px solid rgba(184,94,40,0.12); flex-shrink: 0;
        }

.fossil-thumbnail-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.fossil-thumbnail-placeholder {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; height: 100%; gap: 8px; color: rgba(61,35,33,0.3);
        }

.fossil-thumbnail-placeholder i { font-size: 2.2rem; }

.fossil-thumbnail-placeholder span { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

.fossil-thumbnail-caption { font-size: 0.62rem; opacity: 0.6; }

        .panel-fossil-box { width: 100%; height: 54px; border: 1px solid rgba(184,94,40,0.12); background: rgba(184,94,40,0.03); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; flex-shrink: 0; }

.fossil-svg { width: 85%; height: 85%; }

.panel-desc { font-size: 0.75rem; color: rgba(61,35,33,0.75); line-height: 1.45; flex-shrink: 0; }

.panel-connections { padding: 7px 9px; background: rgba(0,168,150,0.05); border-left: 2px solid rgba(0,168,150,0.3); flex-shrink: 0; }

.panel-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; border-top: 1px solid rgba(61,35,33,0.07); padding-top: 8px; flex-shrink: 0; }

.meta-item label { display: block; font-size: 0.5rem; color: var(--copper-tan); font-weight: 700; text-transform: uppercase; letter-spacing: 0.65px; margin-bottom: 1px; }

.meta-item span { color: var(--deep-brown); font-size: 0.73rem; font-weight: 700; line-height: 1.2; word-break: break-word; }

        .site-tab-col {
            position: relative; z-index: 10;
            flex: 0 0 200px;
            display: flex; flex-direction: column;
            background: rgba(247, 242, 234, 0.97);
            backdrop-filter: blur(8px) saturate(130%);
            border-left: 1px solid rgba(61,35,33,0.08);
        }

.tab-col-header { padding: 16px 14px 10px; border-bottom: 1px solid rgba(61,35,33,0.07); flex-shrink: 0; }

.tab-col-eyebrow { font-size: 0.48rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }

.tab-col-title { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--deep-brown); font-weight: 700; line-height: 1.15; margin: 3px 0 2px; }

.tab-col-count { font-size: 0.55rem; color: rgba(61,35,33,0.4); font-weight: 600; }

.tab-night-row { padding: 8px 12px; border-bottom: 1px solid rgba(61,35,33,0.05); flex-shrink: 0; }

.tab-night-toggle {
            width: 100%; background: rgba(255,255,255,0.65);
            border: 1px solid rgba(61,35,33,0.12); color: rgba(61,35,33,0.65);
            font-size: 0.54rem; font-family: 'Montserrat', sans-serif;
            letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700;
            padding: 7px 10px; border-radius: 8px;
            cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
        }

.tab-night-toggle:hover { background: rgba(255,255,255,0.95); color: var(--teal); border-color: rgba(0,168,150,0.3); }

.tab-night-toggle.on { background: rgba(44,26,24,0.85); color: rgba(243,233,210,0.9); border-color: rgba(243,233,210,0.2); }

.tab-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(184,94,40,0.25) transparent; padding: 6px 0 12px; }

.site-tab-btn {
            display: flex; align-items: center; gap: 8px;
            width: 100%; padding: 10px 12px; background: transparent; border: none;
            border-left: 3px solid transparent; cursor: pointer; text-align: left; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
        }

.site-tab-btn:hover { background: rgba(221,111,62,0.07); border-left-color: rgba(221,111,62,0.3); }

.site-tab-btn.active { background: rgba(0,168,150,0.08); border-left-color: var(--teal); }

.tab-btn-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(184,94,40,0.1); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: background 0.2s; }

.site-tab-btn:hover .tab-btn-icon { background: rgba(221,111,62,0.18); }

.site-tab-btn.active .tab-btn-icon { background: rgba(0,168,150,0.14); }

.tab-btn-info { flex: 1; min-width: 0; }

.tab-btn-id { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.4px; color: var(--burnt-orange); line-height: 1.1; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.site-tab-btn.active .tab-btn-id { color: var(--teal); }

.tab-btn-taxon { font-size: 0.54rem; color: rgba(61,35,33,0.5); font-style: italic; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tab-btn-age { flex-shrink: 0; font-size: 0.48rem; font-weight: 700; color: rgba(61,35,33,0.35); text-align: right; letter-spacing: 0.3px; }

        #map-info-panel.night-panel { background: rgba(26,18,14,0.97) !important; }

#map-info-panel.night-panel .panel-title,
        #map-info-panel.night-panel .panel-desc { color: rgba(243,233,210,0.85); }

#map-info-panel.night-panel .panel-eyebrow { color: rgba(0,168,150,0.8); }

#map-info-panel.night-panel .panel-age-badge { background: rgba(221,111,62,0.15); }

#map-info-panel.night-panel .meta-item label { color: rgba(197,160,89,0.7); }

#map-info-panel.night-panel .meta-item span { color: rgba(243,233,210,0.8); }

#map-info-panel.night-panel .panel-connections { border-left-color: rgba(0,168,150,0.4); }

.site-tab-col.night-tab { background: rgba(20,12,10,0.97); }

.site-tab-col.night-tab .tab-col-title { color: rgba(243,233,210,0.9); }

.site-tab-col.night-tab .tab-col-count { color: rgba(183,160,149,0.4); }

.site-tab-col.night-tab .site-tab-btn:hover { background: rgba(221,111,62,0.08); }

.site-tab-col.night-tab .site-tab-btn.active { background: rgba(0,168,150,0.1); }

.site-tab-col.night-tab .tab-btn-taxon,
        .site-tab-col.night-tab .tab-btn-age { color: rgba(183,160,149,0.45); }

        @keyframes mapTremor { 0%,100% { transform: translateX(0); } 10% { transform: translateX(-3px) rotate(-0.3deg); } 20% { transform: translateX(3px) rotate(0.3deg); } 30% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 50% { transform: translateX(-1px) rotate(-0.1deg); } }

.fossil-pop { position: absolute; pointer-events: none; z-index: 40; font-size: 2rem; transform: translate(-50%,-50%); animation: fossilReveal 2.5s ease forwards; }

@keyframes fossilReveal { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(-20deg); } 30% { opacity: 1; transform: translate(-50%,-50%) scale(1.3) rotate(5deg); } 60% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.8) translateY(-40px); } }

        .map-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 30; border: 1.5px solid var(--burnt-orange); transform: translate(-50%, -50%) scale(0); animation: rippleOut 1.2s ease forwards; }

@keyframes rippleOut { to { transform: translate(-50%,-50%) scale(6); opacity: 0; } }

        #map-night-btn { display: none; }

        @media (max-width: 800px) {
            .atlas-stage { flex-direction: column; min-height: unset; border-radius: 12px; }
            #map-wrap { position: relative !important; inset: auto !important; height: 200px !important; width: 100% !important; min-height: unset !important; opacity: 0.45; }
            .site-tab-col { flex: 0 0 auto; border-left: none; border-top: 1px solid rgba(61,35,33,0.08); }
            .tab-col-header, .tab-night-row { display: none; }
            .tab-list { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 4px; padding: 6px 8px; }
            .site-tab-btn { flex-direction: column; min-width: 80px; border-left: none; border-bottom: 3px solid transparent; padding: 8px 8px; }
            .site-tab-btn.active { border-bottom-color: var(--teal); }
            .tab-btn-age { display: none; }
        }

        #atlas-secret-msg {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            z-index: 50; text-align: center; pointer-events: none; opacity: 0;
            transition: opacity 0.3s;
        }

#atlas-secret-msg.show { opacity: 1; }

.secret-msg-inner { background: rgba(44,26,24,0.92); backdrop-filter: blur(8px); border-radius: 20px; padding: 32px 40px; border: 1px solid rgba(221,111,62,0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }

.secret-msg-inner h3 { font-family: 'Playfair Display', serif; color: var(--soft-sand); font-size: 1.5rem; margin-bottom: 8px; }

.secret-msg-inner p { color: rgba(243,233,210,0.7); font-size: 0.85rem; }

@media (max-width: 800px) {
  #map-wrap { height: 520px; min-height: auto; border-radius: 12px; }

  .map-scrubber { width: 94%; padding: 16px 18px; bottom: 10px; }

  .map-hud { padding: 10px 12px; }

  .hud-title { font-size: 1.1rem; }

  #map-info-panel { width: calc(100% - 20px); }

  #compass, #hud-coords, #map-night-btn { display: none; }

  .atlas-hint { gap: 12px; }

  .atlas-hint-item { padding: 7px 12px; font-size: 0.63rem; }
}

        
        
        .icon-pop-container {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
            
            transform: translate(-50%, -50%);
        }

.icon-pop-container.active { pointer-events: all; }

        .icon-pop {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            opacity: 0;
            transform: scale(0.3);
            transition: opacity 0.45s ease,
                        transform 0.45s ease;
        }

.icon-pop-container.active .icon-pop {
            opacity: 1;
            transform: scale(1);
            animation: ipFloat 4s ease-in-out infinite;
        }

.icon-pop-container.closing .icon-pop {
            opacity: 0;
            transform: scale(0.6);
            filter: blur(6px);
            transition: opacity 0.3s ease, transform 0.8s ease, filter 0.8s ease;
            animation: none;
        }

        .icon-pop-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            text-decoration: none;
            background: radial-gradient(circle at 38% 36%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%),
                        rgba(255,255,255,0.08);
            backdrop-filter: blur(0px);
            
            box-shadow:
                0 0 0 1.5px rgba(255,255,255,0.35),
                0 0 0 3px rgba(0,168,150,0.18),
                0 8px 30px rgba(0,107,98,0.28),
                inset 0 1px 0 rgba(255,255,255,0.4);
            transition: transform 0.25s ease,
                        box-shadow 0.25s ease;
            cursor: pointer;
            position: relative;
        }

.icon-pop-link:hover {
            transform: scale(1.18);
            box-shadow:
                0 0 0 1.5px rgba(255,255,255,0.5),
                0 0 0 4px rgba(0,168,150,0.35),
                0 14px 40px rgba(0,107,98,0.42),
                inset 0 1px 0 rgba(255,255,255,0.5);
        }

        .icon-pop-icon {
            font-size: 30px;
            line-height: 1;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
            animation: ipWiggle 3s ease-in-out infinite;
            user-select: none;
        }

@keyframes ipWiggle {
            0%,100% { transform: rotate(0deg) scale(1); }
            18%      { transform: rotate(-10deg) scale(1.12); }
            36%      { transform: rotate(7deg) scale(1.06); }
            54%      { transform: rotate(-5deg) scale(1.09); }
            72%      { transform: rotate(4deg) scale(1.03); }
        }

        .icon-pop-ring {
            position: absolute;
            inset: -7px;
            border-radius: 50%;
            border: 1.5px solid transparent;
            background: linear-gradient(135deg, rgba(0,168,150,0.6), rgba(221,111,62,0.4), rgba(0,168,150,0)) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            animation: ipRingOrbit 3s linear infinite;
            pointer-events: none;
        }

@keyframes ipRingOrbit {
            to { transform: rotate(360deg); }
        }

        .icon-pop-text {
            margin-top: 8px;
            padding: 4px 12px;
            background: rgba(15,15,15,0.72);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 50px;
            border: 1px solid rgba(255,255,255,0.12);
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 600;
            color: rgba(255,255,255,0.92);
            letter-spacing: 0.4px;
            white-space: nowrap;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 0.2s ease, transform 0.2s ease;
            pointer-events: none;
        }

.icon-pop-container:hover .icon-pop-text,
        .icon-pop-container.active .icon-pop-text {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.15s;
        }

        .icon-pop-close {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 18px;
            height: 18px;
            background: rgba(20,20,20,0.75);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            color: rgba(255,255,255,0.8);
            font-size: 9px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0.6);
            transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s;
            z-index: 2;
            line-height: 1;
        }

.icon-pop-link:hover .icon-pop-close,
        .icon-pop-container:hover .icon-pop-close {
            opacity: 1;
            transform: scale(1);
        }

.icon-pop-close:hover {
            background: rgba(221,111,62,0.85);
            border-color: rgba(221,111,62,0.6);
            color: #fff;
        }

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