@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink: #1C2620;
  --sand: #EDE3D0;
  --gold: #C1892E;
  --clay: #9C4A2B;
  --foliage: #2F4A3C;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Work Sans', sans-serif;
  background-color: var(--sand);
  color: var(--ink);
}

.font-display {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
}

/* Hero entrance - single orchestrated moment, not per-card fades */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-enter { animation: hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-enter-delay-1 { animation-delay: 0.12s; }
.hero-enter-delay-2 { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .hero-enter, .hero-enter-delay-1, .hero-enter-delay-2 { animation: none; }
  html { scroll-behavior: auto; }
}

/* Tour card image zoom on hover - functional signal, not decorative fade */
.tour-card-image { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.tour-card:hover .tour-card-image { transform: scale(1.06); }

/* Underline-grow nav links */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 0; height: 1.5px;
  background: currentColor;
  transition: width 0.25s ease;
}
.nav-link:hover::after { width: 100%; }

/* Category chip strip - horizontal scroll on mobile */
.chip-strip { scrollbar-width: none; -ms-overflow-style: none; }
.chip-strip::-webkit-scrollbar { display: none; }

/* Rating stars */
.star-fill { color: var(--gold); }
.star-empty { color: #D8CCB0; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Prose content for blog/description */
.prose-safari p { margin-bottom: 1rem; line-height: 1.75; }
.prose-safari h2 { font-family: 'Fraunces', serif; font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.75rem; color: var(--ink); }

/* Timeline connector for itinerary days */
.itinerary-line { background: linear-gradient(to bottom, var(--gold), transparent); }