@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
    --gold: #c8a96e;
    --gold-light: #e8d5a3;
    --neon-green: #39ff6a;
    --neon-blue: #4da6ff;
    --neon-pink: #ff2fb0;
    --neon-purple: #a64dff;
    --vision-green: #00ff88;
    --panel-bg: rgba(10, 14, 20, 0.6);
    --text-main: #f0ead8;
    --text-muted: #9aa6b5;
    --space-time-banner-h: 41px;
}

* {
    box-sizing: border-box;
}

.globe-page {
    margin: 0;
    font-family: 'Georgia', serif;
    color: var(--text-main);
    background: #04060a;
    /* Safety net: without this, off-screen decorative elements (the
       moon's wide orbit swing, etc.) can silently widen the page's
       layout viewport on mobile, throwing off every 100vw/fixed-
       position element on the page. */
    overflow-x: hidden;
    /* overflow-y: auto removed — having body establish its own scroll
       container is exactly what made the position:fixed title band
       (.space-time-title-band below) scroll away with the page instead
       of staying pinned to the actual viewport. Scrolling now happens
       on the normal document/html level, where fixed positioning
       behaves as expected. */
    /* reserve room for the fixed amber/gold Maya banner pinned to the bottom */
    padding-bottom: var(--space-time-banner-h);
}

/* Height is capped lower on narrow viewports (see the max-width:768px
   override below) so the canvas doesn't claim the *entire* first
   screen on mobile -- leaving a strip of plain, normally-scrollable
   background beneath it so a visitor's first swipe scrolls the page
   instead of getting captured as a globe-rotate gesture. globe.js
   measures this element's actual CSS box so the WebGL canvas's internal
   render resolution stays in sync with it. */
#globeViz {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Use the stable viewport height. 100dvh changes continuously while
       mobile browser chrome expands/collapses, which repeatedly resized
       (and briefly cleared) the WebGL drawing buffer during a scroll. */
    height: 100svh;
    z-index: 1;
}

/* ---- Orbiting moon (decorative + clickable) ----
   Position driven by JS (see globe.js), not a CSS keyframe: a flat
   CSS rotation always renders in front of everything, so it can
   never actually pass BEHIND the globe -- just circle in front of
   it. globe.js walks .moon around an elliptical path each frame and
   toggles z-index/scale/opacity by which half of the loop it's in,
   so it wraps convincingly around the sphere from the viewer's
   side. Size (240px) and per-lap speed (6.5s) carried over as-is
   from the flat version; the orbit radius DOES now scale down on
   narrow viewports (see getOrbitRadiusX in globe.js) so the moon
   stays visible instead of spending most of its lap swung off both
   edges. This wrapper's height is kept in lockstep with #globeViz
   (see the mobile override below) so the moon's orbit center stays
   aligned with the visually-shrunk globe's center on mobile. This
   wrapper deliberately has no z-index of its own, so .moon's z-index
   compares directly against #globeViz's (z-index: 1) instead of
   being trapped in its own stacking context above/below it. */
.moon-orbit-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    pointer-events: none;
}

@media (max-width: 768px) {
    #globeViz,
    .moon-orbit-wrapper {
        height: 80vh;
        height: 80svh;
    }
}

/* The moon itself: no image, all CSS. Layered bottom-to-top as:
   (1) a lit-sphere base (light source upper-left, like the sun),
   (2) the major maria -- the dark basaltic "seas" -- placed at
   roughly their real positions on the Moon's near side (Imbrium,
   Serenitatis, Tranquillitatis, Procellarum, Crisium, Nubium/
   Humorum, Fecunditatis), each a soft cool-gray ellipse rather than
   a hard-edged blob, and (3) a scatter of small crater pockmarks
   plus one larger rayed crater (a stylized Tycho), each built from
   a highlight+shadow pair so it reads as a pit catching light on
   one rim and casting a shadow on the other, instead of a flat
   dot. All sizes are percentage-based so they scale cleanly if the
   moon's px dimensions ever change again. */
.moon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: 0;
    border-radius: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    transition: box-shadow 0.25s ease, opacity 0.4s ease;
    will-change: transform;
    background:
        /* -- small crater pockmarks (highlight/shadow pairs) -- */
        radial-gradient(circle at 68% 22%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 30%, transparent 55%),
        radial-gradient(circle at 70% 24%, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.10) 40%, transparent 65%),
        radial-gradient(circle at 30% 68%, rgba(255, 255, 255, 0.28) 0%, transparent 45%),
        radial-gradient(circle at 32% 70%, rgba(0, 0, 0, 0.28) 0%, transparent 55%),
        radial-gradient(circle at 78% 60%, rgba(255, 255, 255, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 80% 62%, rgba(0, 0, 0, 0.22) 0%, transparent 50%),
        radial-gradient(circle at 22% 30%, rgba(255, 255, 255, 0.20) 0%, transparent 35%),
        radial-gradient(circle at 24% 32%, rgba(0, 0, 0, 0.20) 0%, transparent 45%),
        radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.30) 0%, transparent 30%),
        radial-gradient(circle at 51% 17%, rgba(0, 0, 0, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 12% 52%, rgba(255, 255, 255, 0.18) 0%, transparent 32%),
        radial-gradient(circle at 13% 54%, rgba(0, 0, 0, 0.18) 0%, transparent 42%),
        /* -- one larger, brighter rayed crater (Tycho-like) -- */
        radial-gradient(circle at 46% 80%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 18%, transparent 34%),
        radial-gradient(circle at 47% 82%, rgba(0, 0, 0, 0.28) 0%, transparent 30%),
        /* -- maria: the dark "seas", roughly matching the real near side -- */
        radial-gradient(ellipse 30% 22% at 34% 33%, rgba(58, 61, 66, 0.55) 0%, transparent 75%),
        radial-gradient(ellipse 22% 18% at 52% 38%, rgba(60, 63, 68, 0.5) 0%, transparent 75%),
        radial-gradient(ellipse 20% 16% at 60% 52%, rgba(55, 58, 63, 0.5) 0%, transparent 75%),
        radial-gradient(ellipse 26% 20% at 22% 46%, rgba(56, 59, 64, 0.45) 0%, transparent 75%),
        radial-gradient(ellipse 14% 14% at 76% 30%, rgba(58, 61, 66, 0.5) 0%, transparent 75%),
        radial-gradient(ellipse 18% 14% at 38% 64%, rgba(58, 61, 66, 0.42) 0%, transparent 75%),
        radial-gradient(ellipse 18% 14% at 66% 62%, rgba(56, 59, 64, 0.4) 0%, transparent 75%),
        /* -- base: lit sphere, light source upper-left -- */
        radial-gradient(circle at 35% 30%, #ece7dc 0%, #d6d0c2 22%, #b6b0a0 45%, #8b8578 68%, #55524a 88%, #2e2c28 100%);
    box-shadow:
        0 0 16px 4px rgba(240, 234, 216, 0.4),
        0 0 40px 10px rgba(200, 200, 220, 0.12);
}

.moon:hover,
.moon:focus-visible {
    box-shadow:
        0 0 22px 6px rgba(240, 234, 216, 0.55),
        0 0 50px 14px rgba(200, 200, 220, 0.18);
    outline: none;
}

/* Title band: sits just under the navbar, right above the globe. Same
   gold shimmer treatment as the Museos title. Positioned absolutely
   (not fixed) so it stays put on the page and scrolls away with the
   hero section instead of trailing the viewport as the user scrolls. */
.space-time-title-band {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100vw;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.space-time-title-text {
    display: block;
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-size: clamp(30px, 9vw, 96px);
    letter-spacing: 0.12em;
    color: var(--gold-light);
    text-align: center;
    filter: drop-shadow(0 0 18px rgba(200, 169, 110, 0.55))
            drop-shadow(0 0 42px rgba(200, 169, 110, 0.3));
}

.space-time-title-effect {
    display: inline-flex;
}

.space-time-title-text .char {
    display: inline-block;
    white-space: pre;
    will-change: transform, opacity, background;
}

@media (max-width: 768px) {
    .space-time-title-band {
        top: 38px;
    }
}

.globe-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    width: 70vw;
    max-width: 700px;
    opacity: 0.08;
    pointer-events: none;
}

.globe-watermark-img {
    width: 100%;
    filter: invert(1) brightness(1.5) sepia(1) saturate(8) hue-rotate(280deg);
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    background: rgba(4, 6, 10, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(200, 169, 110, 0.15);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    position: relative;
    font-family: 'Georgia', serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--gold);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 22px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background: rgba(4, 6, 10, 0.96);
        padding: 20px;
        gap: 20px;
        border-bottom: 1px solid rgba(200, 169, 110, 0.15);
        z-index: 19;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        font-size: 14px;
    }
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nav-crest {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: invert(1) sepia(1) saturate(1.5) hue-rotate(5deg) brightness(0.85)
            drop-shadow(0 0 8px rgba(200, 169, 110, 0.5));
    transition: filter 0.3s ease;
}

.nav-logo:hover .nav-crest {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.1)
            drop-shadow(0 0 14px rgba(200, 169, 110, 0.8));
}

.nav-title {
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--gold);
    text-transform: uppercase;
}

.globe-info-panel {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 20;
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 22px 24px;
    background: var(--panel-bg);
    border-radius: 16px;
    backdrop-filter: blur(14px) saturate(140%);
   -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(200, 169, 110, 0.3);
    box-shadow: 0 0 40px rgba(200, 169, 110, 0.1);
}

.globe-info-panel.is-hidden {
    display: none;
}

.globe-info-content {
    padding-right: 20px;
}

/* Close button — pinned top-right, persists across content swaps
   since it lives outside #globeInfoContent. */
.globe-info-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.globe-info-close:hover,
.globe-info-close:focus-visible {
    background: rgba(200, 169, 110, 0.22);
    color: var(--text-main);
    outline: none;
}

/* Connected-works list — used when a country's real timeline entries
   are pulled in directly, rather than a single written panel. */
.globe-info-worklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.globe-info-work {
    padding: 9px 4px;
    margin: 0 -4px;
    border-bottom: 1px solid rgba(200, 169, 110, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s ease;
}

.globe-info-work:hover,
.globe-info-work:focus-visible {
    background: rgba(200, 169, 110, 0.1);
    outline: none;
}

.globe-info-work:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.globe-info-work-title {
    font-size: 13px;
    color: var(--text-main);
    margin: 0 0 2px;
    font-family: 'Georgia', serif;
}

.globe-info-work-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

/* Jump link appended to a SPECIAL_PANELS entry when it references a
   real timeline entry (e.g. Portugal -> La flor de la playa). */
.globe-info-jumplink {
    display: inline-block;
    margin: 12px 0 0;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--neon-blue);
    cursor: pointer;
}

.globe-info-jumplink:hover,
.globe-info-jumplink:focus-visible {
    text-decoration: underline;
    outline: none;
}

.globe-info-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 8px;
}

.globe-info-title {
    font-size: 18px;
    color: var(--text-main);
    margin: 0 0 10px;
}

.globe-info-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* Inline "fly the globe here" links embedded inside a SPECIAL_PANELS
   body (e.g. every country named in the China/Pandemia Global panel).
   Reset to plain inline text so a <button> reads like a hyperlink. */
.globe-info-geolink {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #ff6b6b;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.globe-info-geolink:hover,
.globe-info-geolink:focus-visible {
    color: #ff3b3b;
    text-decoration: underline solid;
    outline: none;
}

@media (max-width: 768px) {
    .navbar {
        padding: 14px 16px;
    }

    .globe-info-panel {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
        max-height: 55vh;
        padding: 18px 20px;
    }

    .globe-info-title {
        font-size: 16px;
    }

    .globe-info-body {
        font-size: 12px;
    }
}

/* ============================================
   SCROLL-DOWN INDICATOR — GLOBE HERO
   ============================================ */

.globe-scroll-cue {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    width: 64px;
    height: 64px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.globe-scroll-cue.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.globe-scroll-cue-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.5;
    animation: globe-scroll-pulse 2s ease-out infinite;
}

@keyframes globe-scroll-pulse {
    0%   { opacity: 0.6; transform: scale(0.5); }
    50%  { opacity: 0.45; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}

.globe-scroll-cue-circle {
    position: absolute;
    top: 13px;
    left: 13px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: filter 0.3s ease;
}

.globe-scroll-cue-circle::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 2px solid rgba(4, 6, 10, 0.45);
}

.globe-scroll-cue-circle svg {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 2;
    stroke: #04060a;
}

.globe-scroll-cue:hover .globe-scroll-cue-circle {
    filter: brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {
    .globe-scroll-cue-pulse {
        animation: none;
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .globe-scroll-cue {
        bottom: 150px;
        width: 52px;
        height: 52px;
    }
    .globe-scroll-cue-circle {
        width: 30px;
        height: 30px;
        top: 11px;
        left: 11px;
    }
    .globe-scroll-cue-circle svg {
        width: 13px;
        height: 13px;
    }
}

/* ============================================
   MISSION STATEMENT + FOOTER
   ============================================ */

.globe-mission {
    position: relative;
    z-index: 2;
    background: #04060a;
    padding: 80px 30px 60px;
    text-align: center;
}

.globe-mission-inner {
    max-width: 700px;
    margin: 0 auto;
}

.globe-mission-heading {
    font-family: 'Cinzel', serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .globe-mission-heading {
        font-size: 22px;
        letter-spacing: 0.06em;
        margin-bottom: 24px;
    }
}

.globe-mission-label {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

.globe-mission-text {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.8;
    color: var(--text-main);
}

.footer {
    position: relative;
    z-index: 2;
    background: #04060a;
    padding: 60px 30px;
    border-top: 1px solid rgba(200, 169, 110, 0.15);
    text-align: center;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.footer-logo-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: invert(1) sepia(1) saturate(1.5) hue-rotate(5deg) brightness(0.85);
    transition: filter 0.2s ease;
}

.footer-logo-link:hover .footer-logo {
    filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(1.1);
}

.footer-title {
    font-family: 'Georgia', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold);
    transition: color 0.2s ease;
}

.footer-logo-link:hover .footer-title {
    color: var(--neon-blue);
}

.footer-links {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--gold);
    text-decoration: underline;
}

.footer-copy {
    font-size: 12px;
    color: rgba(240, 234, 216, 0.3);
}

@media (max-width: 768px) {
    .globe-mission {
        padding: 60px 20px 40px;
    }
    .globe-mission-text {
        font-size: 17px;
    }
    .footer {
        padding: 40px 20px;
    }
}

/* ---------- MAYA BANNER (amber/gold, bottom only) ----------
   Fixed frieze strip pinned to the very bottom of the viewport, below
   everything (footer included), and never scrolls away. No top banner
   on this page — just this one strip, matching the bottom-only
   treatment used on the Audiolibros Categories page. */
.space-time-banner-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--space-time-banner-h);
    z-index: 200;
    overflow: hidden;
    background: #000;
}

.space-time-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    :root {
        --space-time-banner-h: 27px;
    }
}