@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Montserrat:wght@300;400;600&display=swap');

    :root{
      --gold:#d4af37;
      --gold-deep:#b8860b;
      --ink:#0a0a0a;
    }

    *{box-sizing:border-box}

    body{
      font-family:'Montserrat',sans-serif;
      letter-spacing:.2px;
      overflow-x:hidden;
      background:#0b0b0b;
       width: 100%;
      margin: 0;
      padding: 0;
    }

    /* ========== CUSTOM SCROLLBAR STYLING ========== */
    /* Webkit browsers (Chrome, Safari, Edge) */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: #0b0b0b;
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb {
        background: #d4af37;
        border-radius: 5px;
        border: 2px solid #0b0b0b;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #b8860b;
    }

    ::-webkit-scrollbar-corner {
        background: #0b0b0b;
    }

    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: #d4af37 #0b0b0b;
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Ensure proper scrolling containers */
    .scrollable {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .scrollable-x {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .scrollable-both {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cormorant{font-family:'Cormorant Garamond',serif}

    /* Hero */
    .hero-gradient{
      background: radial-gradient(1200px 600px at 10% 10%, rgba(212,175,55,.12), transparent 80%),
                  radial-gradient(1000px 500px at 90% 20%, rgba(184,134,11,.10), transparent 80%),
                  linear-gradient(135deg, #0b0b0b 0%, #111111 55%, #1a1a1a 100%);
      position:relative;
    }
    .hero-pattern:before{
      content:'';
      position:absolute; inset:0;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><g fill="%23d4af37" fill-opacity=".08"><circle cx="20" cy="20" r="1.2"/><circle cx="80" cy="40" r="1"/><circle cx="40" cy="120" r="1"/><circle cx="120" cy="80" r="1"/></g></svg>') repeat;
      opacity:.25;
      pointer-events:none;
    }

    /* Subtle float */
    .float-slow{animation:float 8s ease-in-out infinite}
    .float-slower{animation:float 10s ease-in-out infinite 1.2s}
    @keyframes float{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-10px)}
    }

    /* Reveal */
    .reveal{opacity:0; transform:translateY(24px); transition:all .8s cubic-bezier(.25,.46,.45,.94)}
    .reveal.show{opacity:1; transform:translateY(0)}

    /* Luxury card hover */
    .lux-card{transition:transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s}
    .lux-card:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,.18)}

    /* Gold outline on hover */
    .lux-glow{position:relative}
    .lux-glow:before{
      content:''; position:absolute; inset:-2px; border-radius:999px;
      background:linear-gradient(45deg,var(--gold),#f0d97c,var(--gold-deep));
      z-index:-1; opacity:0; transition:opacity .3s;
    }
    .lux-glow:hover:before{opacity:.6}

    /* Fluid headings (keeps proportions on mobile) */
    .h1-fluid{font-size:clamp(2.2rem, 5.5vw, 5rem)}
    .h2-fluid{font-size:clamp(1.8rem, 3.8vw, 3rem)}
    .h3-fluid{font-size:clamp(1.25rem, 2.2vw, 1.75rem)}

    /* Navbar blur on scroll */
    .nav-blur{backdrop-filter:blur(14px); background:rgba(12,12,12,.75); border-bottom:1px solid rgba(212,175,55,.15)}

    /* Bottle subtle glow */
    .bottle-glow{filter:drop-shadow(0 0 22px rgba(212,175,55,.28))}
/* Mobile menu animation */
.mobile-panel {
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: transform .3s ease, opacity .3s ease, max-height .3s ease;
}

.mobile-panel.open {
    transform: scaleY(1);
    opacity: 1;
    max-height: 500px; /* adjust if menu is taller */
    pointer-events: auto;
}

  #map-body {
      margin: 0;
      background: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .map-container {
      position: relative;
      width: 90vw;
      max-width: 1365px;
      aspect-ratio: 1365 / 668;
    }
    .map-container {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: #fff; /* or any fallback color for empty space */
}

    .map-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #map-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .debug-path {
      fill: none;
    } 
    .map_text-overlay, .map_text-overlay2 {
      position: absolute;
      font-weight: bold;
      font-size: 20px;
      color: rgb(0, 0, 0);
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0);
    }
    .map_text-overlay {
      top: 33%;
      left: 23%;
      transform: translate(-50%, -50%) rotate(-8deg);
    }
    .map_text-overlay2 {
      top: 70%;
      left: 92%;
      transform: translate(-50%, -50%) rotate(-7deg);
    }
    .timeline-container {
  position: relative;
  width: 90vw;
  max-width: 1365px;
  aspect-ratio: 1365 / 668;
  max-height: 80vh;
  }
  @media (max-width: 600px) {
  .text-overlay,
  .text-overlay2 {
    font-size: 14px;
    }

  }

  .timeline-container {
  max-height: 60vh;
  }

/* ========== COMPREHENSIVE RESPONSIVE STYLES ========== */

/* Large Tablets and Small Desktops (769px - 1024px) */
@media (max-width: 1024px) {
  .hero-gradient {
    padding: 3rem 1.5rem;
  }
  
  .h1-fluid {
    font-size: clamp(2rem, 4.5vw, 4rem);
  }
  
  .h2-fluid {
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  }
  body {
      scroll-padding-top: 100px;
      /* Account for fixed header */
    }

    /* Smooth scroll behavior for anchor links */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      overflow-y: auto;
    }
}

/* Tablets (481px - 768px) */
@media (max-width: 768px) {
  .hero-gradient {
    padding: 2.5rem 1rem;
  }
  
  .h1-fluid {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
  }
  
  .h2-fluid {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
  }
  
  .h3-fluid {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
  }
  
  .map-container,
  .timeline-container {
    width: 95vw;
    max-height: 70vh;
  }
  
  .map_text-overlay,
  .map_text-overlay2 {
    font-size: 16px;
  }
  body {
      scroll-padding-top: 100px;
      /* Account for fixed header */
    }

    /* Smooth scroll behavior for anchor links */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      overflow-y: auto;
    }
}

/* Mobile Devices (up to 480px) */
@media (max-width: 480px) {
  
  
  .hero-gradient {
    padding: 2rem 0.75rem;
  }
  
  .h1-fluid {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    line-height: 1.2;
  }
  
  .h2-fluid {
    font-size: clamp(1.25rem, 4vw, 2rem);
    line-height: 1.3;
  }
  
  .h3-fluid {
    font-size: clamp(1rem, 3.5vw, 1.4rem);
  }
  
  .map-container,
  .timeline-container {
    width: 100vw;
    max-height: 60vh;
  }
  
  .map_text-overlay {
    top: 30%;
    left: 20%;
    font-size: 12px;
  }
  
  .map_text-overlay2 {
    top: 68%;
    left: 90%;
    font-size: 12px;
  }
  
  .text-overlay,
  .text-overlay2 {
    font-size: 12px;
  }
}

/* Extra Small Devices (up to 360px) */
@media (max-width: 360px) {
  .h1-fluid {
    font-size: clamp(1.3rem, 6vw, 2rem);
  }
  
  .h2-fluid {
    font-size: clamp(1.1rem, 5vw, 1.75rem);
  }
  
  .map_text-overlay,
  .map_text-overlay2 {
    font-size: 10px;
  }
  body {
      scroll-padding-top: 100px;
      /* Account for fixed header */
    }

    /* Smooth scroll behavior for anchor links */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      overflow-y: auto;
    }
}

/* Landscape Orientation for Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-gradient {
    padding: 1.5rem 1rem;
  }
  
  .map-container,
  .timeline-container {
    max-height: 50vh;
  }
  body {
      scroll-padding-top: 100px;
      /* Account for fixed header */
    }

    /* Smooth scroll behavior for anchor links */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      overflow-y: auto;
    }
}