/* ═══════════════════════════════════════════════════════════════
   01 · BASE
   Reset · global typography · core utilities
   ═══════════════════════════════════════════════════════════════ */

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

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

html,
body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a       { color: inherit; text-decoration: none; }
button  { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
img,
svg     { display: block; max-width: 100%; }
picture { display: block; }

/* Selection */
::selection {
  background: var(--gold-500);
  color: var(--navy-900);
}

/* ─── Typography utilities ──────────────────────────────────── */
.serif { font-family: 'DM Sans', Georgia, serif; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--gold-500);
}
.eyebrow--light          { color: var(--gold-400); }
.eyebrow--light::before  { background: var(--gold-400); }

.eyebrow--center         { padding-left: 42px; }
.eyebrow--center::before { display: none; }
.eyebrow--center::after  {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--gold-500);
  margin-left: 12px;
}
.eyebrow--center.eyebrow--light::after { background: var(--gold-400); }

/* ─── Section header utility ────────────────────────────────── */
.sec-head           { max-width: 720px; margin-bottom: 56px; }
.sec-head--center   { margin-inline: auto; text-align: center; }

.sec-head__title {
  font-family: 'DM Sans', Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 18px 0;
  color: var(--navy-800);
}
.sec-head__title em {
  font-style: italic;
  color: var(--gold-600);
  font-weight: 300;
}

.section--navy .sec-head__title    { color: #fff; }
.section--navy .sec-head__title em { color: var(--gold-400); }

.sec-head__desc {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 620px;
}
.section--navy .sec-head__desc { color: rgba(255, 255, 255, 0.78); }
.sec-head--center .sec-head__desc { margin-inline: auto; }

/* ─────────────────────────────────────────────────────────────
   [data-bg] lazy background images (painted by main.js)
   Neutral placeholder tone shown on EVERY page while the image
   loads, then a gentle fade-in once painted. Prevents the blank
   gaps seen on tour cards / "You might also like" related tours.
   ───────────────────────────────────────────────────────────── */
[data-bg] {
  background-color: #e9e6df;          /* soft bone placeholder */
  background-size: cover;
  background-position: center;
}
.bg-loaded {
  animation: bgFadeIn 0.5s var(--ease, ease) both;
}
@keyframes bgFadeIn {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-loaded { animation: none; }
}