/* ═══════════════════════════════════════════════════
   BASE — Reset, tokens, typography
═══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; }

:root {
  /* Unified dark surface — matches the destinations page hero (#111) */
  --black:   #111111;
  --black2:  #111111;
  --black3:  #111111;
  --white:   #FFFFFF;
  --grey1:   #F4F4F4;
  --grey2:   #EBEBEB;
  --grey3:   #666666;
  --grey4:   #999999;
  --pad-x:   clamp(24px, 6vw, 100px);
  --pad-y:   clamp(80px, 10vw, 140px);
  --serif:   'Cormorant Garamond', serif;
  --display: 'Cinzel', serif;
  --sans:    'Montserrat', sans-serif;
}

body {
  font-family: var(--sans);
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  cursor: none;

  /* Content protection (deterrent) — text not selectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Images can't be dragged or long-pressed to save */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* Re-enable pointer events on images that ARE links/buttons */
a img, button img { pointer-events: auto; }

.sec { padding: var(--pad-y) var(--pad-x); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 9px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 18px;
}
.eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: rgba(255,255,255,.3); }

.sec-title {
  font-family: var(--display);
  font-size: clamp(30px, 3.8vw, 56px);
  font-weight: 400; line-height: 1.1; letter-spacing: .04em;
  color: var(--white);
}
.sec-title em { font-style: italic; font-family: var(--serif); color: var(--white); font-size: 1.05em; }

.rule { width: 40px; height: 1px; background: rgba(255,255,255,.35); margin: 28px 0; }

.body-p {
  font-size: 13.5px; font-weight: 300; line-height: 2;
  color: rgba(255,255,255,.45); max-width: 560px;
}

/* Light section overrides */
.light-section .eyebrow         { color: rgba(0,0,0,.5); }
.light-section .eyebrow::before { background: rgba(0,0,0,.2); }
.light-section .sec-title       { color: var(--black); }
.light-section .sec-title em    { color: var(--black); }
.light-section .rule            { background: rgba(0,0,0,.2); }
.light-section .body-p          { color: rgba(0,0,0,.55); }
.light-section .body-p.dk       { color: rgba(0,0,0,.6); }

/* Reveal */
.rv  { opacity: 0; transform: translateY(28px);  transition: opacity .85s ease, transform .85s ease; }
.rv.in  { opacity: 1; transform: none; }
.rvL { opacity: 0; transform: translateX(-28px); transition: opacity .85s ease, transform .85s ease; }
.rvL.in { opacity: 1; transform: none; }
.rvR { opacity: 0; transform: translateX(28px);  transition: opacity .85s ease, transform .85s ease; }
.rvR.in { opacity: 1; transform: none; }