:root {
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Inter', system-ui, sans-serif;
  --ink: #1A1612;
  --ink-06: rgba(26,22,18,0.06);
  --ink-15: rgba(26,22,18,0.15);
  --ink-40: rgba(26,22,18,0.55);
  --ink-70: rgba(26,22,18,0.75);
  --cream: #FAF8F4;
  --gold: #C9A86C;
  --gold-light: #DCC08E;
  --gold-soft: rgba(201,168,108,0.16);
  --gold-dim: #a9895a;
  /* gold is 2.13:1 on cream — unreadable as small text. This is the same
     hue darkened until it passes AA (4.59:1). Use it for type on light
     backgrounds; keep --gold for type on dark and for fills. */
  --gold-ink: #856E44;
  /* one caution colour — used where a drive is too long to be sensible.
     Rust rather than red, so it advises rather than alarms. */
  --warn: #B0642F;
  /* muted type on dark surfaces, at 4.83:1 on --dark */
  --paper: #f0ebe3;
  /* the brighter paper used for hero headlines on dark — social sets it too */
  --paper-hi: #F5F0E8;
  /* the tone between --cream and --white, for section headers on light */
  --sand: #F4F1EB;
  /* a softer warn, for a remove action on dark */
  --warn-soft: #e08a6f;
  --paper-mid: #8C837A;
  --paper-dim: #6E6459;
  /* dark text on a gold fill, for secondary lines inside a gold chip */
  --on-gold-dim: #4A3B22;
  /* one radius scale: square, a whisper, a circle, and one pill for the
     nav CTA. Everything else was 99px/100px/999px/20px/30px noise. */
  --r-soft: 3px;      /* cards — the site's original .dcard value */
  --r-pill: 100px;    /* every button and chip, same as .nav-cta */
  --r-round: 50%;     /* dots and avatars */
}
/* Text selection — the browser default blue fought the palette. Gold wash,
   dark ink for contrast. Applies to text and to anything dragged over,
   images included. */
::selection { background: rgba(201,168,108,0.38); color: #1A1612; }
::-moz-selection { background: rgba(201,168,108,0.38); color: #1A1612; }
/* On dark surfaces the ink colour disappears, so lift the type to paper. */
.dark ::selection, .sec--dark ::selection, footer ::selection,
.hero ::selection, .reader-media ::selection {
  background: rgba(201,168,108,0.42); color: #F5F0E8;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
/* Browsers give <button> a 2px outset border. Several buttons on the site
   set background:none but never cleared it, so the browser's 3D ridge was
   showing through — that was the boxed look on the category tabs. */
button { font: inherit; border: 0; background: none; color: inherit; }
button:not(:disabled) { cursor: pointer; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; background: #14110C; height: 60px; padding: 0 56px; border-bottom: 1px solid rgba(201,168,108,0.15); font-family: var(--sans); font-size: 13px; transform: translate3d(0,0,0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.nav-logo-img { display: block; width: 176px; height: 26px; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.nav-link { color: #FFFFFFA8; font-family: var(--sans); font-size: 11px; padding: 8px 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; transition: color .2s; }
.nav-link:hover { color: #fff; }
.nav-link--live { display: inline-flex; align-items: center; gap: 6px; }
.nav-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-search { background: transparent; border: none; color: #fff; cursor: pointer; display: none; align-items: center; padding: 8px; }
.nav-cta { background: var(--gold); color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 11px 22px; border-radius: var(--r-pill); white-space: nowrap; }
.nav-burger { background: transparent; border: none; color: #fff; cursor: pointer; display: none; }
/* 44px hit areas on the two controls that open and close mobile navigation.
   Padding grows the touch target; negative margin keeps the icon sitting where
   it did, so nothing moves visually. */
.nav-burger { padding: 11px; margin: -11px; }
.mobile-menu-close { padding: 9px; margin: -9px; }

/* ── Scrolling news ticker — shared across every page (was previously only
   defined on the homepage, so it rendered unstyled/static everywhere else) ── */
.ticker { background: #0E0B08; overflow: hidden; height: 34px; display: flex; align-items: center; border-bottom: 1px solid rgba(201,168,108,0.15); }
.ticker-track { display: flex; gap: 0; white-space: nowrap; animation: pearl-ticker 38s linear infinite; }
.ticker-item { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,235,227,0.55); padding: 0 32px; }
.ticker-dot { color: var(--gold); margin-right: 8px; }
@keyframes pearl-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .ticker { display: none; }
  .nav { padding: 0 20px; }
}

.mobile-menu { position: fixed; inset: 0; z-index: 400; background: var(--cream); transform: translateX(100%); transition: transform .35s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; }
.mobile-menu-close { background: none; border: none; font-size: 26px; cursor: pointer; }
.mobile-menu-body { display: flex; flex-direction: column; gap: 4px; padding: 0 24px 40px; }
.mobile-menu-body a { font-family: var(--serif); padding: 18px 0; font-size: 23px; border-bottom: 1px solid var(--ink-06); }
.mobile-menu-body .grp-t { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin: 30px 0 6px; }
.mobile-menu-body .sub { font-family: var(--sans); font-size: 15px; font-weight: 400; padding: 12px 0; border-bottom: 1px solid var(--ink-06); }

.hero-weather { display: flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hero-weather::-webkit-scrollbar { display: none; }
.hw-row { display: flex; align-items: center; gap: 28px; }
.hw-place { text-align: center; flex-shrink: 0; }
.hw-sep { width: 0.5px; align-self: stretch; background: rgba(240,235,227,0.22); flex-shrink: 0; }
.hw-name { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,235,227,0.6); margin-bottom: 8px; }
.hw-cond { display: flex; align-items: center; justify-content: center; }
.hw-temp { font-family: var(--serif); font-size: 23px; color: var(--cream); }
@media (max-width: 480px) {
  .hw-row { gap: 16px; }
  .hw-name { font-size: 11px; margin-bottom: 6px; }
  .hw-temp { font-size: 17px; }
}


@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-search { display: none; }
  .nav-burger { display: flex; }
}

/* ── Shared across all pages (added when Destinations page was integrated) ── */
:root {
  --white: #FFFFFF;
  --image-card-radius: 6px;
}

/* Breadcrumb */
.crumb { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; color: rgba(255,255,255,0.45); padding: 20px clamp(24px,5vw,80px) 6px; background: #0A0805; }
.crumb a { color: rgba(255,255,255,0.4); }
.crumb a:hover { color: var(--gold); }
.crumb span { margin: 0 8px; opacity: 0.4; }

/* Generic inner-page hero ("phero") — used by Destinations, Experiences, etc. */
.phero { position: relative; isolation: isolate; min-height: clamp(580px, 90vh, 880px); display: flex; align-items: flex-start; overflow: hidden; padding: clamp(48px,7vh,90px) clamp(24px,5vw,80px) clamp(48px,7vh,72px); color: var(--white); }
.phero-bg { background-color: #E8E2D6; position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.phero-ov { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,7,5,0.5) 0%, rgba(8,7,5,0.22) 40%, rgba(8,7,5,0.86) 100%); }
.phero-in { position: static; width: 100%; max-width: 1100px; }
.phero-eye { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.phero-h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(36px,6vw,72px); line-height: 1.08; }
.phero-h1 em { font-style: italic; color: var(--gold); }
.phero-sub { font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.7; color: rgba(250,248,244,0.82); max-width: 560px; margin-top: 14px; }
.phero-stats { position: absolute; left: clamp(24px,5vw,80px); right: clamp(24px,5vw,80px); bottom: clamp(48px,7vh,72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: clamp(20px,3.5vw,44px); align-items: start; margin-top: 0; }
.phero-stat { display: flex; flex-direction: column; gap: 6px; }
.phero-stat b { font-family: var(--serif); font-weight: 300; font-size: clamp(24px,3vw,34px); color: var(--white); }
.phero-stat > span { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250,248,244,0.6); }
.phero-stat b .t-val { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }

/* Shared buttons */
.btn-ghost { color: var(--white); }
.btn-p { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 15px 34px; border-radius: var(--r-pill); transition: gap .28s ease, background .25s ease, transform .25s ease; }
.btn-p:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gold); color: var(--ink); border: none; }

/* Itinerary length picker (shared across Destinations/Experiences/Customize) */
.plan-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px 0; }
.plan-opt { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; padding: 11px 22px; border-radius: var(--r-pill); cursor: pointer; transition: all 0.2s; }

/* Footer (shared) */
.footer { background: #0E0B08; color: #F0EBE3; padding: 60px 56px 36px; border-top: 1px solid rgba(201,168,108,0.18); font-family: var(--sans); font-size: 13px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-logo-img { display: block; width: auto; height: 24px; margin-bottom: 12px; }
.footer-tagline { font-size: 13px; color: rgba(240,235,227,0.4); line-height: 1.65; margin-bottom: 22px; }
.footer-soc { width: 30px; height: 30px; border: 1px solid rgba(201,168,108,0.28); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(240,235,227,0.5); font-size: 11px; transition: all 0.15s; font-style: normal; }
.footer-soc:hover { border-color: var(--gold); color: var(--gold); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 13px; color: rgba(240,235,227,0.55); transition: color 0.15s; }
.footer-links a:hover { color: var(--gold); }
.footer-bot { border-top: 1px solid rgba(201,168,108,0.14); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-size: 13px; color: rgba(240,235,227,0.3); }
.footer-bot-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.footer-bot-links a { font-size: 13px; color: rgba(240,235,227,0.3); transition: color 0.15s; }
.footer-bot-links a:hover { color: var(--gold); }
@media (max-width: 1080px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) {
  .footer { padding: 48px 22px 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bot { flex-direction: column; gap: 12px; text-align: center; }
  .phero { min-height: 70vh; padding: 56px 22px 40px; }
  .phero-stats { left: 22px; right: 22px; bottom: 40px; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .phero-stat b { font-size: 26px; }
  .phero-stat > span { font-size: 11px; letter-spacing: 0.08em; line-height: 1.35; }
}

/* ── Destination jump-rail ("srail") — circular avatar row + theme chips ── */
.srail { padding: 14px clamp(24px,5vw,80px) 6px; background: #0A0805; }
.srail-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.srail-eye { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.srail-hint { font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,0.4); }
/* overflow-x: auto makes the browser clip vertically as well, and the avatar
   grows to 1.06 when active or hovered — about 2px past its box on every side
   on a 66px circle. The bottom already had 6px to absorb that; the top had
   none, so the gold ring was sliced flat where it crossed the edge. */
.srail-row { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-top: 6px; padding-bottom: 6px; }
.srail-row::-webkit-scrollbar { display: none; }
.srail-item { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; text-decoration: none; }
.srail-avatar { width: 66px; height: 66px; border-radius: 50%; padding: 2.5px; box-sizing: border-box; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)); transition: transform 0.2s ease; }
.srail-item:hover .srail-avatar { transform: scale(1.06); }
.srail-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; filter: grayscale(0.35) brightness(0.92); transition: filter 0.3s ease; }
.srail-item:hover .srail-avatar img { filter: grayscale(0) brightness(1); }
.srail-label { font-family: var(--sans); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.62); white-space: nowrap; transition: color 0.2s ease; }
.srail-item--active .srail-label, .srail-item[aria-current="true"] .srail-label { color: #fff; font-weight: 500; }
.srail-item--active .srail-avatar, .srail-item[aria-current="true"] .srail-avatar { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); }
.dsc-filter { display: flex; gap: 8px; align-items: center; padding: 6px 0 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: #0A0805; }
.dsc-filter::-webkit-scrollbar { display: none; }
.dsc-pill { flex: 0 0 auto; white-space: nowrap; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.62); background: transparent; border: 1px solid rgba(255,255,255,0.16); padding: 8px 15px; border-radius: var(--r-pill); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.dsc-pill:not(.is-active):hover { color: #fff; border-color: var(--gold); background: rgba(201,168,108,0.12); }
.dsc-pill.is-active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.srail-chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 15px; scrollbar-width: none; -ms-overflow-style: none; }
.srail-chips::-webkit-scrollbar { display: none; }
.srail-chip { flex: 0 0 auto; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 15px; border: 1px solid var(--ink-15); border-radius: var(--r-pill); color: var(--ink-70); white-space: nowrap; transition: all 0.2s; }
.srail-chip:hover { border-color: var(--gold); color: var(--gold-dim); }
@media (max-width: 760px) {
  .srail { padding: 18px 22px 4px; }
  .srail-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Generic layout primitives shared across inner pages ── */
.wrap { max-width: 1280px; margin: 0 auto; }
.sec { padding: 96px 56px; }
@media (max-width: 760px) { .sec { padding: 64px 22px; } }

/* ── srail variant: ring-style avatars (Experiences, category browsing) ── */
.srail-in { display: flex; gap: 22px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -ms-overflow-style: none; padding: 14px 0 6px; }
.srail-in::-webkit-scrollbar { display: none; }
.srail-ring { display: block; width: 66px; height: 66px; border-radius: 50%; padding: 2.5px; box-sizing: border-box; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)); transition: transform 0.2s ease, background 0.25s ease, box-shadow 0.25s ease; }
.srail-item--active .srail-ring, .srail-item[aria-current="true"] .srail-ring { background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, #b78f4f); box-shadow: 0 0 0 1px rgba(201,168,108,0.5); }
.srail-item:hover .srail-ring { transform: scale(1.06); }
.srail-ph { display: block; width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; filter: grayscale(0.35) brightness(0.92); transition: filter 0.3s ease; }
.srail-item:hover .srail-ph, .srail-item--active .srail-ph, .srail-item[aria-current="true"] .srail-ph { filter: grayscale(0) brightness(1); }
.srail-themes { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 15px; scrollbar-width: none; -ms-overflow-style: none; }
.srail-themes::-webkit-scrollbar { display: none; }

/* ── Secondary button variant ── */
.btn-s { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 15px 34px; border-radius: var(--r-pill); border: 1px solid var(--ink-15); transition: border-color 0.25s, color 0.25s; }
.btn-s.btn-ghost { background: transparent; color: var(--ink); }
.btn-s.btn-ghost:hover { border-color: var(--gold); color: var(--gold-dim); }

/* ── Plan / itinerary section (light variant, used when not on a dark bg) ── */
.plan-sec { padding: 90px clamp(24px,5vw,80px); text-align: center; background: var(--cream); }
.plan-eye { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.plan-title { font-family: var(--serif); font-weight: 300; font-size: clamp(30px,4vw,48px); color: var(--ink); margin-top: 14px; line-height: 1.15; }
.plan-title em { font-style: italic; color: var(--gold); }
.plan-sub { font-family: var(--sans); color: var(--ink-40); margin-top: 14px; }
.plan-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }

/* ── Ceylon-naming bridge (Hotels + Flights page uses a different variable
   scheme than the rest of the site — alias it onto the same real values so
   both naming conventions render identically from one shared stylesheet) ── */
:root {
  --dark: var(--ink);
  /* the deeper black used on social, stories, experience and hotels-flights.
     --dark (#1A1612) reads brown beside it. */
  --night: #0A0805;
  --night-2: #060503;
  --dark-2: #14110d;
  --dark-3: #1c1812;
  --off-white: var(--cream);
  --font-sans: var(--sans);
  --font-serif: var(--serif);
  --text-dark: var(--ink);
  --text-mid: var(--ink-70);
  --text-light: var(--ink-40);
  --gold-pale: rgba(201,168,108,0.10);
}

/* Section headers used on the Hotels + Flights page */
.section-header { margin-bottom: 8px; }
.section-title-light { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(30px,3.2vw,42px); color: var(--text-dark); }
.section-title-dark { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(30px,3.2vw,42px); color: #f0ebe3; }

/* Button variants used alongside btn-primary / btn-ghost */
.btn-dark { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 24px; border-radius: var(--r-soft); background: var(--gold); color: var(--dark); transition: background 0.2s; }
.btn-dark:hover { background: var(--gold-light); }
.btn-outline-light { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 11px 22px; border: 1px solid rgba(240,235,227,0.3); color: rgba(240,235,227,0.85); border-radius: var(--r-soft); transition: border-color 0.2s, color 0.2s; }
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline-dark { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 11px 22px; border: 1px solid var(--ink-15); color: var(--text-dark); border-radius: var(--r-soft); transition: border-color 0.2s, color 0.2s; }
.btn-outline-dark:hover { border-color: var(--gold); color: var(--gold-dim); }
.footer-credits { padding: 16px 56px; background: #0E0B08; border-top: 1px solid rgba(201,168,108,0.08); }
.footer-credits p { margin: 0; font-family: var(--sans); font-size: 11px; line-height: 1.6; letter-spacing: 0.01em; color: rgba(240,235,227,0.34); max-width: 900px; }
.footer-credits .fc-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-credits .fc-list li { font-family: var(--sans); font-size: 11px; line-height: 1.6; color: rgba(240,235,227,0.28); }
.footer-credits .fc-list em { font-style: normal; color: rgba(240,235,227,0.42); }
.footer-credits a { color: rgba(240,235,227,0.5); text-decoration: none; border-bottom: 1px solid rgba(201,168,108,0.28); }
.footer-credits a:hover { color: var(--gold); border-color: var(--gold); }
/* Affiliate disclosure. Deliberately quiet, but full size and above the
   booking buttons rather than shrunk into the footer — the FTC wants it
   conspicuous and near the links, and Booking/Agoda's terms require it. */
.aff-note { font-family: var(--sans); font-size: 12px; line-height: 1.65;
  letter-spacing: 0.01em; color: var(--ink-50, rgba(26,22,18,0.5));
  max-width: 560px; margin: 18px auto 34px; padding: 0 22px;
  text-align: center; }
@media (max-width: 900px) { .aff-note {
  /* Sits at the foot of the hotel list now, not under the heading — it is a
     legal note, not the introduction to the section. */
  max-width: 660px;
  margin: 48px auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-40);
} }
.footer-credits .footer-mail { margin: 0 0 10px; }
.footer-credits .footer-mail a { color: rgba(240,235,227,0.58); font-size: 12px; letter-spacing: 0.02em; }
@media (max-width: 900px) { .footer-credits { padding: 14px 22px; } .footer-credits p { font-size: 11px; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; padding: 48px 22px 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Rounded WhatsApp float variant used on this page */
.wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 500; width: 56px; height: 56px; display: block; border-radius: 50%; box-shadow: 0 4px 20px rgba(26,22,18,0.28); transition: transform 0.2s; -webkit-tap-highlight-color: transparent; }
.wa-float:hover { transform: scale(1.08); }
/* the badge is one SVG now — circle and glyph together — so the button
   draws no background of its own and simply carries the artwork. */
.wa-float img { display: block; width: 100%; height: 100%; }
@media (max-width: 600px) { .wa-float { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 18px; } }

/* ── Additional ceylon-naming bridge for Customize page ── */
:root {
  --border-light: rgba(26,22,18,0.09);
  --border-dark: rgba(240,235,227,0.1);
}

/* ── Gold divider rule, used under section intros on editorial pages ── */
.divider-gold { width: 46px; height: 2px; background: var(--gold); margin: 0 0 22px; }

/* ── Gold text link used in section headers (e.g. "Show all regions →") ── */
.section-link-gold { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); text-decoration: none; border: none; transition: color 0.2s; }
.section-link-gold:hover { color: var(--gold); }

/* --- shared section header pattern (was inline on the homepage only) --- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 48px; }
.sec-eyebrow { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.sec-title { font-family: var(--serif); font-size: clamp(34px,4.4vw,56px); font-weight: 300; line-height: 1.04; letter-spacing: -0.015em; color: var(--ink); }
.sec-title em { font-family:var(--serif); font-style: italic; color: var(--gold); }
.dest-intro { font-family: var(--sans); font-size: 15px; line-height: 1.7; color: var(--ink-40); max-width: 42ch; margin-top: 20px; }
.sec-link { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; flex-shrink: 0; position: relative; padding-bottom: 4px; }
@media (max-width: 760px) { .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; } }

/* ── add a hotel straight to the journey builder ──
   Sits with the booking buttons on every destination page. Gold, because it
   goes to our own builder rather than out to an affiliate. */

/* ── the two affiliate buttons ──
   These are the revenue actions, so they carry the gold outline → gold fill
   treatment rather than the grey secondary one, matching READ MORE.
   Two classes deep on purpose. The destination pages' own <style> loads after
   this file and sets `border: 0.5px solid transparent` on .stay-book-btn — a
   single-class rule here loses on source order, so this one out-specifies it
   instead of relying on position. */
/* Side by side and equal width all the way down — a matched pair reads as one
   choice, not a hierarchy. `white-space: nowrap` is set by the per-page button
   block, so an overflow would clip rather than wrap; type steps down at each
   breakpoint to keep the longer label comfortably inside half the row. */

/* ══════════ OUTLINED BUTTONS ══════════
   The per-page button system sets `border: 0.5px solid transparent` on a long
   list of classes and nothing ever gave those borders a colour, so these all
   rendered as bare text: "Browse stays", "Book on Booking.com", "Enquire on
   WhatsApp", the filter pills. Declared here with !important because the pages'
   own <style> loads after this file and would otherwise win on source order. */
.btn-ghost, .dsc-pill, .hr-foot-btn, .btn-s, .re-filter-btn {
  border: 0.5px solid var(--ink-15) !important; color: var(--ink); }
.btn-ghost:hover, .dsc-pill:hover, .hr-foot-btn:hover, .btn-s:hover,
.re-filter-btn:hover {
  border-color: var(--ink) !important; background: var(--ink); color: var(--cream); }
/* active filter pills read as chosen, not merely hovered */
.dsc-pill.active, .re-filter-btn.active {
  border-color: var(--gold) !important; background: var(--gold-soft);
  color: var(--gold-ink); }
/* the primary action is filled, so it needs no outline */
.btn-p { border: 0.5px solid var(--gold) !important; background: var(--gold);
  color: var(--dark); }
.btn-p:hover { background: var(--gold-light); border-color: var(--gold-light) !important; }

/* ── the last shape and tracking outliers ──
   Everything button-shaped sits on the pill radius and 0.14em tracking. These
   were the strays: four on the 3px card radius, and a handful on 0.1em, 0.08em
   or a raw 2px. The nav's PLAN TRIP keeps its own tighter 0.05em — it's set in
   a tighter space and reads as part of the masthead. */
.btn-dark, .hero-cta--quiet, .hotel-book, .boi-cta, .refresh-btn, .platform-btn {
  border-radius: var(--r-pill) !important; }
.boi-cta, .refresh-btn, .lf-empty-cta, .platform-btn, .jr-journey-btn,
.reader-book-btn, .reader-comment-submit, .reader-media-cta {
  letter-spacing: 0.14em !important; }

/* live footer classes restored — an over-eager cleanup took these with the
   dead grid/col rules they sat beside */
.footer-socials { display: flex; gap: 10px; }
.footer-col-t { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   TRIP CARRY BAR
   Appears once a stay is added, on destination pages onward. Not on the
   homepage — nothing is in the trip yet there.

   The dock is a flex row holding the bar and, on mobile, the WhatsApp
   button moved in beside it. One container means the browser centres the
   pair and holds the gap, whatever the text length or font-load timing.
═══════════════════════════════════════════════════════════════════ */
.trip-dock{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  z-index:400; display:flex; align-items:center; gap:12px;
  max-width:calc(100vw - 32px);
  animation:tripBarIn .35s ease both;
}
.trip-dock[hidden]{ display:none; }
@keyframes tripBarIn{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }

.trip-bar{
  display:flex; align-items:center; gap:18px; min-width:0;
  background:var(--ink); color:var(--cream);
  border-radius:var(--r-pill); padding:12px 14px 12px 24px;
  box-shadow:0 6px 28px rgba(26,22,18,.28);
}
.trip-bar-t{
  display:flex; align-items:baseline; min-width:0;
  font-family:var(--sans); font-size:12.5px; font-weight:300;
  letter-spacing:.04em; white-space:nowrap; opacity:.92;
}
.tb-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tb-x{ flex:0 0 auto; }
.trip-bar-a{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:var(--gold);
  border-radius:var(--r-pill); padding:11px 17px;
  text-decoration:none; white-space:nowrap; flex:0 0 auto;
  transition:background .25s ease;
}
.trip-bar-a:hover{ background:var(--gold-light); }
.trip-bar-a:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }

/* WhatsApp button while it lives inside the dock: static, so flex places
   it rather than its own fixed corner. */
.trip-dock.has-fab .wa-float,
.trip-dock.has-fab .wa-btn{
  position:static; flex:0 0 auto;
  width:46px; height:46px; bottom:auto; right:auto;
  box-shadow:0 6px 28px rgba(26,22,18,.28);
}

@media (max-width:600px){
  /* Same label as desktop, so the phone needs every pixel: tighter gaps and
     padding, slightly smaller type, and the button trimmed — the place names
     get the remaining width. */
  .trip-dock{
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    gap:8px; max-width:calc(100vw - 24px);
  }
  .trip-bar{ gap:9px; padding:10px 9px 10px 15px; min-width:0; }
  .trip-bar-t{ font-size:11px; letter-spacing:.01em; }
  .trip-bar-a{ font-size:9.5px; padding:9px 11px; letter-spacing:.06em; }
  .trip-dock.has-fab .wa-float,
  .trip-dock.has-fab .wa-btn{ width:42px; height:42px; }
}
@media (prefers-reduced-motion:reduce){ .trip-dock{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL BUTTON BEHAVIOUR
   One place for how every button feels, so the rules can't drift per
   page. Colour still comes from the tokens above — deliberately not
   hardcoded, or the next palette change leaves orphans behind.

   Text on gold stays --ink (#1A1612): 7.97:1 against --gold. White
   would be 2.26:1 and fails WCAG AA, which matters most in daylight
   on a phone — the exact context this site is read in.

   Only colour transitions. Nothing here changes padding, margin,
   border-width, font-weight or gap on :hover, so a button can never
   resize under the cursor and shift the layout around it.
═══════════════════════════════════════════════════════════════════ */
.hero-cta, .section-cta, .nav-cta, .dest-cta, .xp-cta, .exp-cta,
.dsc-story-cta, .jr-cta, .jr-card-cta, .jr-journey-btn, .jr-journey-cta,
.lstory-btn, .lstories-cta, .reader-end-cta, .reader-media-cta,
.reader-book-btn, .hr-foot-btn, .boi-cta, .btn-primary, .btn-ghost,
.btn-s, .stay-itin, .stay-more, .stay-alt, .trip-bar-a, .pj-city-add,
.platform-btn, .re-filter-btn, .refresh-btn, .lf-empty-cta, .dcard-cta,
.social-cta, .hr-dot, .carousel-dot, .dispatch-dot {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Press feedback. transform is composited, so it scales the pixels
   without reflowing anything around the button.

   The bare `button:active` that used to head this list is gone. Scaling text
   by a fraction renders it off the pixel grid, so letters thin and blur for
   the length of the press — barely visible on a small label, obvious on a
   large letterspaced one like the journey bar's action, which was caught by
   this rule only because the selector reached every button on the site. The
   named CTAs below keep it deliberately; anything else uses a colour change. */
a.btn:active,
.hero-cta:active, .section-cta:active, .nav-cta:active, .dest-cta:active,
.xp-cta:active, .exp-cta:active, .dsc-story-cta:active, .jr-cta:active,
.jr-journey-btn:active, .lstory-btn:active, .lstories-cta:active,
.reader-end-cta:active, .reader-media-cta:active, .reader-book-btn:active,
.hr-foot-btn:active, .boi-cta:active, .btn-primary:active, .btn-ghost:active,
.stay-itin:active, .trip-bar-a:active {
  transform: scale(0.98);
  transition: transform .1s ease;
}

/* Buttons that carry an arrow keep the slide on hover — moved from `gap`,
   which resized the button, to a transform on the arrow itself. */
.hero-cta span, .section-cta span, .dest-cta span, .xp-cta span,
.dsc-story-cta span, .jr-cta span, .stay-more .arw {
  transition: transform .25s ease;
}
.hero-cta:hover span, .section-cta:hover span, .dest-cta:hover span,
.xp-cta:hover span, .dsc-story-cta:hover span, .jr-cta:hover span {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta:hover span, .section-cta:hover span, .dest-cta:hover span,
  .xp-cta:hover span, .dsc-story-cta:hover span, .jr-cta:hover span { transform: none; }
  button:active, a.btn:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE TOUCH — no grey box on tap
   The destination, experience, journal and event cards are each a single
   <a> wrapping the whole card, so iOS and Android paint their tap
   highlight across the entire card. Clearing the highlight colour on every
   element removes it without touching anything else.

   Text stays selectable. user-select:none is applied to buttons only, in
   the block above — a reader copying a hotel name, an address or a date is
   normal behaviour on a travel site and should keep working.
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}
a, .dest-card, .xp-card, .exp-card, .lstory, .ecal-row, .stay-card2, .hr-slide,
.pj-panel, .pj-grp, .pj-li, .pj-opt, .pj-pc, .pj-tag, .pj-chip {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Focus ring: hidden for pointer and touch, kept for keyboard.
   :focus-visible is the whole point — `outline: none` on :focus would
   strip the ring for Tab users too and leave them with no idea where
   they are on the page. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Only the elements that actually animate get their own layer. Promoting
   every button would create 130+ composited layers on a destination page,
   which costs memory and can soften text rendering. */
.trip-dock, .hotel-reader, .hr-track, .stay-row, .carousel-dots {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── CTA pair on dark panels ──────────────────────────────────────────
   .btn-ghost resolves to color: var(--ink) further down this file, which
   is invisible on the dark pre-footer. These two variants are explicit so
   neither depends on which .btn-ghost rule happens to win. */
.cta-add {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  border: 1px solid var(--gold); border-radius: 100px;
  padding: 15px 32px; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* Filled gold buttons lighten on hover across the site — reader CTAs, the
   comment submit, the trip bar, btn-primary. This one darkened instead,
   which read as a different component. --gold-dim stays for text and
   outline hovers, where it is the right treatment. */
.cta-add:hover { background: var(--gold-light); border-color: var(--gold-light); }
.cta-add:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.cta-add[data-added="1"] { background: transparent; color: var(--gold); }

.btn-ghost--onink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: #fff !important; background: transparent;
  border: 1px solid var(--gold) !important; border-radius: 100px;
  padding: 15px 32px; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn-ghost--onink:hover { background: var(--gold); color: var(--ink) !important; }



/* ═══════════════════════════════════════════════════════════════════
   AUTO-HIDE HEADER
   The bar slides out of the way as the reader moves down a phone screen
   and returns as soon as they move back up. assets/nav.js decides when;
   this is the whole of the visual change.

   translate3d gives the bar its own compositing layer, so sliding it
   never repaints the logo and buttons. The transition is withheld until
   body.nav-ready lands after first paint, or it animates in on load.
═══════════════════════════════════════════════════════════════════ */
body.nav-ready .nav { transition: transform .34s cubic-bezier(.22, .61, .36, 1); }
body.nav-hidden .nav { transform: translate3d(0, -100%, 0); }

/* The story reader is a full-screen overlay; the bar stays put beneath it. */
body.reader-locked .nav { transform: translate3d(0, 0, 0) !important; }

@media (prefers-reduced-motion: reduce) {
  body.nav-ready .nav { transition: none; }
}
@media (min-width: 901px) {
  body.nav-hidden .nav { transform: translate3d(0, 0, 0); }
}

/* ═══════════════════════════════════════════════════════════════════
   OVERSCROLL COLOUR
   The browser paints the rubber-band area beyond the document using the
   html background, falling back to body when html has none. body is
   cream, so bouncing past the footer showed a pale band under a
   near-black footer.

   html takes the footer colour; body stays cream and still paints every
   section, so nothing inside the page changes. Top overscroll now shows
   the nav colour, bottom shows the footer, and neither flashes.
═══════════════════════════════════════════════════════════════════ */
html {
  background: #0E0B08;
  /* Chrome and Android honour this and simply do not bounce the document.
     iOS Safari ignores it at document level, which is why the background
     above is the real fix — this only removes the movement where it can. */
  overscroll-behavior-y: none;
}

/* ═══════════════════════════════════════════════════════════════════
   FORM FIELDS — touch and focus
   Applies site-wide, not just the partner page: the customize enquiry
   form and the real-estate form have the same fields.

   16px on every input is the iOS threshold — below it Safari zooms the
   viewport on focus and the reader has to pinch back out between fields.

   The focus ring is kept, not removed. A form is the one place a visible
   focus state matters most, and anyone tabbing through eight fields
   without one is lost. It is drawn in gold so it reads as intentional.
═══════════════════════════════════════════════════════════════════ */
input, select, textarea, button {
  -webkit-tap-highlight-color: transparent;
  font-size: 16px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* pointer and touch focus gets the field's own gold border instead */
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }


/* ══════════════ DESTINATION CARDS ══════════════
   Portrait cards in horizontal scroll rows, used by the region sections
   at the foot of the Colombo page. These rules used to live inline on the
   old /discover/ hub; they were moved here when that page was folded in,
   so any page can carry the region browser without copying CSS. */
.dsc-sub { font-family: var(--sans); font-weight: 300; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; color: rgba(250,248,244,0.82); max-width: 560px; }
.dsc-sec { padding: clamp(80px, 11vh, 144px) clamp(24px, 5vw, 80px); position: relative; }
.dsc-sec--alt { background: var(--white); }
.dsc-sec-head { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 44px); margin-bottom: clamp(40px, 5vw, 68px); padding-bottom: 30px; border-bottom: 1px solid var(--ink-15); }
.dsc-num { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(42px, 5.4vw, 78px); line-height: 0.78; color: var(--gold); flex-shrink: 0; }
.dsc-head-text { padding-top: 4px; }
.dsc-sec-count { margin-left: auto; align-self: flex-end; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40); white-space: nowrap; padding-bottom: 4px; }
.dsc-card { position: relative; display: flex; flex-direction: column; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; transition: none; flex: 0 0 300px; }
.dsc-card:hover { transform: none; box-shadow: none; }
.dsc-card-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; flex-shrink: 0; border-radius: var(--image-card-radius); box-shadow: none; }
.dsc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.dsc-card:hover img { transform: scale(1.04); }
.dsc-card-body { padding: 18px 0 0; display: flex; flex-direction: column; flex: 1; }
.dsc-card-title { font-family: var(--serif); font-size: 23px; font-weight: 400; color: var(--ink); line-height: 1.1; margin-bottom: 10px; }
.dsc-card-desc { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--ink-70); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dsc-card-meta { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-40); margin-bottom: 14px; }
.dsc-card-meta::before { content: '★ '; color: var(--gold-dim); }
.dsc-cta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: normal; text-transform: none; text-decoration: none; color: var(--ink-70); margin-top: auto; align-self: flex-start; position: relative; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.dsc-cta::after { content: none; }
.dsc-card:hover .dsc-cta { color: var(--gold-dim); }
.dsc-cta span { transition: transform 0.28s ease; }
.dsc-card:hover .dsc-cta span { transform: translateX(3px); }
.dsc-row3, .dsc-grid2, .dsc-east-top, .dsc-east-bot { display: flex; gap: 32px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; }
.dsc-row3::-webkit-scrollbar, .dsc-grid2::-webkit-scrollbar, .dsc-east-top::-webkit-scrollbar, .dsc-east-bot::-webkit-scrollbar { display: none; }
.dsc-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.2,0.7,0.2,1), transform 0.8s cubic-bezier(0.2,0.7,0.2,1); will-change: opacity, transform; }
.dsc-reveal.is-in { opacity: 1; transform: none; }
.dsc-row3.dsc-reveal.is-in .dsc-card,
    .dsc-grid2.dsc-reveal.is-in .dsc-card { animation: dscRise 0.8s cubic-bezier(0.2,0.7,0.2,1) backwards; }
.dsc-row3.dsc-reveal.is-in .dsc-card:nth-child(2) { animation-delay: 0.1s; }
.dsc-row3.dsc-reveal.is-in .dsc-card:nth-child(3) { animation-delay: 0.2s; }
.dsc-grid2.dsc-reveal.is-in .dsc-card:nth-child(2) { animation-delay: 0.08s; }
.dsc-grid2.dsc-reveal.is-in .dsc-card:nth-child(3) { animation-delay: 0.16s; }
.dsc-grid2.dsc-reveal.is-in .dsc-card:nth-child(4) { animation-delay: 0.24s; }
.dsc-sec[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
      .dsc-hero-bg { animation: none; transform: none; }
      .dsc-hero-inner > * { opacity: 1; transform: none; animation: none; }
      .dsc-reveal { opacity: 1; transform: none; transition: none; }
      .dsc-row3.dsc-reveal.is-in .dsc-card,
      .dsc-grid2.dsc-reveal.is-in .dsc-card { animation: none; }
    }
@media (max-width: 900px) {
      .dsc-hero { min-height: 70vh; padding: 76px 24px 40px; align-items: flex-start; }
      .dsc-hero-inner { position: static; }
      .dsc-stats { position: absolute; left: 24px; right: 24px; bottom: 40px; gap: 22px; margin-top: 0; }
      .dsc-stat { padding-left: 22px; }
      .dsc-sec { padding: 64px 22px; }
      .dsc-sec-head { flex-wrap: wrap; gap: 16px; }
      .dsc-sec-count { width: 100%; margin-left: 0; align-self: flex-start; }
      .dsc-plan { padding: 48px 24px; }
      .dsc-row3, .dsc-grid2, .dsc-east-top, .dsc-east-bot { gap: 24px; scroll-snap-type: x mandatory; scroll-padding-left: 22px; padding: 4px 22px 8px; margin: 0 -22px; }
      .dsc-card { flex: 0 0 78vw; flex-direction: column; gap: 0; scroll-snap-align: start; }
      .dsc-card-photo { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 5; height: auto; border-radius: var(--image-card-radius); box-shadow: none; }
      .dsc-card-body { padding-top: 18px; }
      .dsc-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
      .dsc-card-desc { -webkit-line-clamp: 2; }
    }
@media (max-width: 560px) {
      .dsc-stat dd { max-width: 12ch; }
      .dsc-num { font-size: 44px; }
    }
/* ══════════════ BUTTON SYSTEM ══════════════
   Declared last so it settles every earlier rule. Before this the site had
   seven letter-spacing values, two type sizes, six paddings and three
   heights across its buttons — and the gold primaries had no radius at all,
   so they rendered square next to pills. One spec now, three heights. */
.cj-btn-primary,
.btn-primary,
.btn-p,
.hero-cta,
.section-cta,
.cj-btn-alt,
.cj-clear-btn,
.btn-s,
.btn-ghost,
.cj-btn-ghost,
.xp-cta,
.dest-cta,
.exp-cta,
.dsc-story-cta,
.reader-media-cta,
.stay-book-btn,
.hr-foot-btn,
.cj-how-cta,
.cj-showmore,
.dsc-cta,
.cj-add,
.cj-chip,
.srail-chip,
.dsc-pill,
.plan-opt,
.re-filter-btn,
.tab-btn,
.cj-sig-load {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans, var(--font-sans)); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  border-radius: var(--r-pill); border: 0.5px solid transparent;
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.cj-btn-alt, .cj-clear-btn, .btn-s, .btn-ghost, .cj-btn-ghost, .xp-cta, .dest-cta, .exp-cta, .dsc-story-cta, .reader-media-cta, .stay-book-btn, .hr-foot-btn, .cj-how-cta, .cj-showmore, .dsc-cta   { min-height: 42px; padding: 0 26px; }


/* ══════════════ REGION PILLS ON THE DARK RAIL ══════════════
   The button-system block above styles .dsc-pill for light sections, with
   !important on the border and a dark ink colour. On the destination rail
   (#0A0805) that renders dark-on-dark and the pills disappear.

   Scoped to .srail and matched to .srail-chip on the Experiences page so
   the two rails read identically. Everything outside the rail is untouched. */
.srail .dsc-pill {
  background: transparent !important;
  color: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
.srail .dsc-pill:hover {
  color: #fff !important;
  border-color: var(--gold) !important;
  background: rgba(201,168,108,0.12) !important;
}
.srail .dsc-pill.is-active {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}



/* The "swipe to jump to a place" hint has gone — Instagram taught everyone
   what a row of circles does. On desktop the head was a baseline row, so
   losing it changes nothing. On mobile it was a stacked column, so its line
   plus the 4px gap came out of the height; this puts that back so the space
   between the label and the circles is unchanged. */
@media (max-width: 760px) {
  .srail-head { margin-bottom: 38px; }
}


/* Destination pages dropped the visible breadcrumb in favour of BreadcrumbList
   schema, which left the rail sitting ~44px higher than everywhere else. This
   gives that space back so the header depth is unchanged. Pages that still
   show a crumb are untouched. */
.srail--top { padding-top: 58px; }
@media (max-width: 760px) { .srail--top { padding-top: 62px; } }





/* ══════════════ DESTINATION RAIL ══════════════
   The rail sits inside the section's side padding, so a circle scrolling out
   was being sliced ~80px in from the screen edge — a cut hanging in open
   canvas, which reads as a mistake rather than as scrolling.

   Instagram's story tray avoids this by running to the screen edge: the cut
   still happens, you just never see it, because it lands where the screen
   ends. Same idea here — the row is pulled out to the full width with
   negative margins and given the padding back on the inside, so the first
   circle still lines up under the label but the scroll runs edge to edge.

   Snapping is proximity rather than mandatory: a long deliberate swipe runs
   free, it only tidies where the swipe was stopping anyway. */
.srail-row {
  margin-left: calc(-1 * clamp(24px, 5vw, 80px));
  margin-right: calc(-1 * clamp(24px, 5vw, 80px));
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
  scroll-padding-left: clamp(24px, 5vw, 80px);
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}
.srail-item { scroll-snap-align: start; }
@media (max-width: 760px) {
  .srail-row {
    margin-left: -22px; margin-right: -22px;
    padding-left: 22px; padding-right: 22px;
    scroll-padding-left: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .srail-row { scroll-behavior: auto; }
}

/* The region pills sit in the same rail, so they were being sliced by the
   same inset line. Matching the circles: full width, padding back inside,
   so a pill leaves at the screen edge rather than mid-word. */
.dsc-filter {
  margin-left: calc(-1 * clamp(24px, 5vw, 80px));
  margin-right: calc(-1 * clamp(24px, 5vw, 80px));
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
  scroll-padding-left: clamp(24px, 5vw, 80px);
  scroll-snap-type: x proximity;
}
.dsc-filter .dsc-pill { scroll-snap-align: start; }
@media (max-width: 760px) {
  .dsc-filter {
    margin-left: -22px; margin-right: -22px;
    padding-left: 22px; padding-right: 22px;
    scroll-padding-left: 22px;
  }
}

/* Pages that dropped the breadcrumb but open straight onto a hero need the
   ~44px that bar occupied put back, or the hero jumps up relative to the
   pages that still have one. */
.phero--nocrumb { padding-top: 44px; }

/* The Experiences page has a third scrolling rail — the theme chips. Same
   inset-cut problem as the circles and the region pills, same fix. */
/* Matched on .srail .srail-chips, not .srail-chips alone: the Experiences
   page sets `.srail .srail-chips { padding: 4px 0 16px }`, which is the more
   specific selector and was zeroing the horizontal padding — so the row got
   pulled out to the edge but never got the inset back, and the chips started
   flush left while the circles above them started at the section margin. */
.srail .srail-chips {
  margin-left: calc(-1 * clamp(24px, 5vw, 80px));
  margin-right: calc(-1 * clamp(24px, 5vw, 80px));
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
  scroll-padding-left: clamp(24px, 5vw, 80px);
  scroll-snap-type: x proximity;
}
.srail-chips .srail-chip { scroll-snap-align: start; }
@media (max-width: 760px) {
  .srail .srail-chips {
    margin-left: -22px; margin-right: -22px;
    padding-left: 22px; padding-right: 22px;
    scroll-padding-left: 22px;
  }
}

/* The journal rail is sticky, so it can't take the crumb's space as top
   padding — that padding would ride down the screen with it. The space goes
   above the rail instead, where the crumb actually was. */
.srail.jr-rail { margin-top: 44px; }

/* Empty trip bar: a prompt, not a control. Quieter than the filled state so
   it reads as an invitation rather than something demanding attention, and
   no gold button since there is nothing to plan yet. */
.trip-bar--empty .trip-bar-t { color: rgba(244, 241, 236, 0.7); }

/* The gold half is a real button here, not a link, so it needs the anchor's
   styling. Same size and position in both states — the bar must not resize
   when the first stay is added. */
.trip-bar--empty .trip-bar-a {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* The rails are pulled out past their padding with negative margins so they
   run to the screen edge. Without a clip on the container that overflow
   escapes to the document, the page ends up wider than the window, and
   everything floats away from the right edge.

   overflow-x: clip rather than hidden — hidden would create a scroll
   container and break the sticky journal rail and any anchor jump inside. */
.srail { overflow-x: clip; }
@supports not (overflow-x: clip) { .srail { overflow-x: hidden; } }

/* Same reasoning for the sections that hold the destination and card rows. */
.stay-sec { overflow-x: clip; }
.sec.exp-sec { overflow-x: clip; }
@supports not (overflow-x: clip) {
  .stay-sec, .sec.exp-sec { overflow-x: hidden; }
}


/* ══════════════ SECTION CTA ══════════════
   Lifted verbatim from the destination pages, where these rules were inline
   and therefore unavailable anywhere else. The same markup on an experience
   or world page rendered unstyled, which is why those CTAs had a different
   type scale to the one on /destinations/. Now shared, so every closing CTA
   on the site sets the same way on both breakpoints. */
.dst-cta-sec { padding: 96px clamp(24px,5vw,80px); background: var(--dark); text-align: center; overflow: hidden; }
@media (max-width: 760px) {
  /* Taller on a phone. At 64px the section was barely deeper than the copy
     inside it, so the type had nothing to sit in. On desktop the 96px does
     that work; a narrow column needs proportionally more, not less. */
  .dst-cta-sec { padding: 104px 26px 96px; }
  .dst-cta-eye { margin-bottom: 26px; }
  .dst-cta-h { margin-bottom: 22px; line-height: 1.16; }
  .dst-cta-p { margin-bottom: 42px; line-height: 1.85; }
  /* Buttons stack full width on a phone, so they need space between them and
     a measure narrower than the text above. */
  .dst-cta-actions { flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; }
  .dst-cta-actions > * { width: 100%; }
}
.dst-cta-eye { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 20px; }
.dst-cta-h { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(30px,4vw,46px); color: #f0ebe3; margin-bottom: 18px; line-height: 1.15; }
.dst-cta-p { font-family: var(--sans); font-size: 13px; color: rgba(240,235,227,0.5); max-width: 480px; margin: 0 auto 34px; line-height: 1.8; }
.dst-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ══════════════ REFINE CHIPS — MATCHED TO THE DESTINATION PILLS ══════════════
   The destination rail already had the right behaviour: gold outline and a
   faint gold wash on hover, solid gold fill when active. The experience chips
   had gold text on hover and no active fill at all, so a selected chip looked
   the same as an unselected one.

   These are lifted from .srail .dsc-pill so the two rails behave identically.
   Scoped to .srail and carrying !important for the same reason that rule does
   — the shared button system sets .srail-chip borders with !important for
   light sections, and this rail is on #0A0805. */
.srail .srail-chip {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.62) !important;
}
.srail .srail-chip:not(.is-active):hover {
  color: #fff !important;
  border-color: var(--gold) !important;
  background: rgba(201,168,108,0.12) !important;
}
.srail .srail-chip.is-active {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
/* Touch has no hover, so the pressed state has to carry it there. */
.srail .srail-chip:not(.is-active):active {
  border-color: var(--gold) !important;
  background: rgba(201,168,108,0.12) !important;
}
.srail .srail-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ══════════════ EXPERIENCE CARDS — SHARED ══════════════
   These rules were inline on /experience/ only, which meant the same card
   markup rendered unstyled anywhere else. Destination pages now show a few
   experience cards, so the rules have to be available site-wide. Lifted
   verbatim — the cards themselves are unchanged. */
.exp-empty { display: none; text-align: center; padding: 60px 20px; color: var(--ink-40); font-size: 15px; }
.exp-empty.show { display: block; }
.exp-rows { display: flex; flex-direction: column; gap: 0; }
.exp-chapter { padding: 0 0 44px; }
.exp-ch-head { display: flex; align-items: baseline; gap: 18px; margin: 0 0 24px; }
.exp-ch-h { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; color: var(--ink); margin: 0; white-space: nowrap; }
.exp-ch-rule { flex: 1; height: 1px; background: var(--ink-06); }
.exp-ch-note { font-family: var(--sans); font-size: 13px; color: var(--ink-40); white-space: nowrap; }
.exp-card { position: relative; flex: 0 0 calc(25% - 24px); min-width: 0; cursor: pointer; display: block; text-decoration: none; color: inherit; }
.exp-grid { display: flex; gap: 28px; overflow: visible; }
.exp-grid::-webkit-scrollbar { display: none; }
.exp-photo { position: relative; border-radius: var(--r-soft); overflow: hidden; margin-bottom: 18px; height: 400px; background: #EDE8DF; }
.exp-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,11,8,0.55) 0%, transparent 32%); pointer-events: none; }
.exp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.9s ease; will-change: opacity; }
.exp-photo img.active { opacity: 1; }
.exp-dots { position: absolute; top: 12px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.exp-dots .dd { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: all 0.4s ease; }
.exp-dots .dd.active { background: var(--gold); width: 16px; border-radius: var(--r-soft); }
.exp-body { padding: 0 2px; }
.exp-name { font-family: var(--serif); font-size: 23px; font-weight: 400; color: var(--ink); line-height: 1.1; margin-bottom: 10px; }
/* Same treatment as .stay-desc-txt on the destination cards: clamp to a
       whole number of lines and reserve that height so cards in a row end
       level. margin-bottom is 0 — the 12px gap before Read more comes from
       the link alone, so the two margins can't stack into 24px. */
    .exp-card { --card-gap: 14px; }
/* No height reserve: 4 of the 15 descriptions run to 3 lines, and a
       4-line floor left a blank line sitting between them and Read more.
       The clamp stays at 4 so nothing is cut; the link now always sits
       12px under the last line of copy, as on the hotel cards. */
    .exp-desc { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--ink-70);
      margin: 13px 0 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
      overflow: hidden; }
.exp-card:hover .exp-cta { background: var(--gold); }
.exp-card:hover .exp-cta span { transform: translateX(3px); }
.exp-place { position: absolute; bottom: 12px; left: 12px; z-index: 2; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #FAF8F4; background: rgba(14,11,8,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 6px 12px; border-radius: var(--r-pill); }
.exp-wx { position: absolute; bottom: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: #FAF8F4; background: rgba(14,11,8,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(250,248,244,0.16); padding: 6px 12px; border-radius: var(--r-pill); }
.exp-wx .wx-i { font-size: 13px; line-height: 1; }
.exp-grid::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
      .exp-chapter { padding: 0 0 30px; }
      .exp-ch-head { margin-bottom: 16px; }
      .exp-ch-h { font-size: 26px; }
      .exp-ch-note { display: none; }
      .exp-grid { margin: 0 -22px; padding: 4px 8px; scroll-padding-left: 8px; overflow-x: auto; overflow-y: hidden; gap: 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; }
      .exp-grid::-webkit-scrollbar { display: none; }
      .exp-card { flex: 0 0 96%; scroll-snap-align: start; border-radius: var(--r-soft); box-shadow: none; overflow: hidden; background: #fff; }
      .exp-photo { border-radius: var(--r-soft); margin-bottom: 14px; aspect-ratio: 1 / 1; height: auto; }
      .exp-body { padding: 0 24px 20px; }
      .exp-name { margin: 14px 0 6px; overflow: visible; }
      .exp-desc { display: block; overflow: visible; -webkit-line-clamp: unset; margin-bottom: 0; min-height: 0; }
      /* Hover fills the outline with gold; press deepens it. --gold-dim (#a9895a)
       is the site's existing deeper gold, closest token to #b08e54 — using the
       token rather than a new hex keeps one source of truth for the palette.
       Colour only: nothing here changes padding, border-width or font-weight,
       so the button cannot resize under the cursor. */
    .exp-cta:hover { background: var(--gold); color: var(--ink); }
    .exp-cta:active { background: var(--gold-dim); color: var(--ink); }

    }
/* ── card actions ────────────────────────────────────────────────
       Read more is a plain gold text link sitting under the description;
       the gold outline pill below the meta line is the only button, so
       the card has one clear action. Both change colour only on hover —
       nothing alters padding, border-width or font-weight, so a card can
       never resize under the cursor. */
    .exp-media { display: block; text-decoration: none; }
.exp-title-link { text-decoration: none; color: inherit; display: block; }
.exp-more {
      display: inline-flex; align-items: center; gap: 5px; margin: 12px 0 var(--card-gap);
      font-family: var(--sans); font-size: 11.5px; font-weight: 500;
      letter-spacing: 0.01em; color: var(--gold-ink); text-decoration: none;
      transition: color .22s ease;
    }
.exp-more:hover { color: var(--gold-dim); }
.exp-more .arw { display: inline-block; transition: transform .22s ease; }
.exp-more:hover .arw { transform: translateX(3px); }
.exp-add {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
      font-family: var(--sans); font-size: 11px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--ink); background: transparent;
      border: 1px solid var(--gold); border-radius: var(--r-pill);
      padding: 11px 17px; cursor: pointer; white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      user-select: none; -webkit-user-select: none;
      transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    }
.exp-add:hover { background: var(--gold); color: var(--ink); }
.exp-add:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.exp-add[data-added="1"] { background: var(--gold-soft); color: var(--gold-ink); }
@media (max-width: 760px) {
      .exp-add { width: 100%; justify-content: center; }
    }
/* ── card meta ───────────────────────────────────────────────────
       The stacked, labelled rows from the hotel cards: hairline rule,
       key/value pairs, price, action. Values copied from .stay-facts and
       .stay-price-row in stays.css so both card types read as one system. */
    .exp-facts { margin-bottom: var(--card-gap); border-top: 1px solid rgba(201,168,108,0.25); padding-top: var(--card-gap); }
.exp-fact { margin-bottom: var(--card-gap); }
.exp-fact:last-child { margin-bottom: 0; }
.exp-fact-k { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); display: block; margin-bottom: 3px; }
.exp-fact-v { font-family: var(--sans); font-size: 12.5px; color: var(--ink-70); line-height: 1.5; }
.exp-price-row { display: flex; align-items: baseline; gap: 7px; margin-bottom: var(--card-gap); }
.exp-price-k { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); }
.exp-price-v { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--ink); line-height: 1; }
.exp-price-u { font-family: var(--sans); font-size: 11px; color: var(--ink-40); }
.exp-add { margin-top: 0; }


/* ══════════════ ARTICLE INTRO ══════════════
   The two-column intro used on every experience page: eyebrow, serif italic
   headline, body copy left, and the fact panel with its gold top rule right.
   These lived inline on experience pages only, so the same markup on a world
   page rendered unstyled — which is why the world pages ended up using a
   different section entirely. Shared now, so both set identically. */
.dst-intro { padding: 88px clamp(24px,5vw,80px); background: var(--cream); }
.dst-intro-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; max-width: 1280px; margin: 0 auto; }
.dst-intro-eye { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 20px; }
.dst-intro-h { font-family: var(--serif); font-weight: 300; font-size: clamp(30px,3.6vw,44px); line-height: 1.04; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 20px; }
.dst-intro-h em {font-family:var(--serif); font-style: italic; color: var(--gold); }
.dst-intro-p { font-size: 15px; line-height: 1.9; color: var(--ink-70); margin-bottom: 18px; }
.dst-facts { background: var(--white); border-top: 2px solid var(--gold); padding: 30px 28px; }
.dst-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--ink-06); }
.dst-fact:last-child { border-bottom: none; }
.dst-fact-k { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); white-space: nowrap; flex-shrink: 0; }
.dst-fact-v { font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--ink); text-align: right; }
@media(max-width:900px){ .dst-intro-grid{grid-template-columns:1fr; gap:36px} .highlights-grid{grid-template-columns:1fr 1fr} .plan-info-grid{grid-template-columns:1fr 1fr} }

/* ══════════════ THE ALL CIRCLE ══════════════
   Defined inline on the hub only, so on every experience page it rendered as
   a dark disc with a star on it. Same gold as an active world circle. */
.srail-avatar--all {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, #b78f4f);
  color: #fff;
  font-size: 23px;
  line-height: 1;
}
.srail-avatar--all svg { display: block; }

/* ══════════════ CLOSING CTA BUTTONS ══════════════
   The gold one is a <button class="cta-add"> and the others are <a
   class="btn-ghost">. The shared button system sets min-height 42px and
   padding 0 26px on .btn-ghost but not on .cta-add, which keeps 15px 32px —
   so the three sat at different heights and widths in the same row.
   Sized here together, scoped to this row so nothing else moves. */
/* Three classes deep on purpose. Every experience page carries its own
   button-system block inline, declared last, which sets .btn-ghost to
   min-height 42px — and inline styles load after this file, so a
   single-class rule here loses no matter what it says. A more specific
   selector wins on specificity rather than on source order, which avoids
   an !important war with a rule that is repeated on 36 pages. */
.dst-cta-sec .dst-cta-actions .cta-add,
.dst-cta-sec .dst-cta-actions .btn-primary,
.dst-cta-sec .dst-cta-actions .btn-ghost,
.dst-cta-sec .dst-cta-actions .btn-ghost--onink {
  min-height: 52px;
  padding: 0 32px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  border-radius: 100px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════ THE RING ARRIVES AT ONCE ══════════════
   .srail-ring carries a 0.25s background transition, which is right for the
   hover polish and wrong for a tap: the reader has already committed, and a
   quarter second of gold fading up reads as lag. The selected state lands
   instantly; hover keeps its ease. */
.srail-item--active .srail-ring,
.srail-item[aria-current="true"] .srail-ring,
.srail-item--active .srail-avatar,
.srail-item[aria-current="true"] .srail-avatar {
  transition: none;
}
.srail-item--active .srail-label,
.srail-item[aria-current="true"] .srail-label {
  transition: none;
}
/* the press itself, so a tap is felt before the page moves */
.srail-item:active .srail-avatar,
.dsc-pill:active {
  transform: scale(0.96);
  transition: transform .08s ease;
}

/* ══════════════ EVERY TAP IS FELT ══════════════
   Most buttons on the site are links, so nothing visibly happened between the
   tap and the next page rendering — a few hundred milliseconds that reads as
   the tap not registering. A small press response costs nothing and makes the
   whole site feel immediate.

   Buttons and pills scale; text links do not, because scaling a line of type
   looks like a wobble rather than a press. */
.btn-primary:active,
.btn-dark:active,
.btn-ghost:active,
.btn-ghost--onink:active,
.btn-s:active,
.cta-add:active,
.hero-cta:active,
.hero-cta--quiet:active,
.section-cta:active,
.nav-cta:active,
.exp-add:active,
.stay-more:active,
.reader-book-btn:active,
.reader-media-cta:active,
.jr-journey-btn:active,
.re-filter-btn:active,
.re-enquire-cta:active,
.offmkt-cta:active,
.earn-cta:active,
.boi-cta:active,
.lf-empty-cta:active,
.pj-city-add:active,
.refresh-btn:active,
.xp-arrow:active,
.lstories-arrow:active,
.wa-btn:active,
.jr-chip:active,
.lf-chip:active,
.pf-chip:active,
.srail-chip:active,
.pj-tag:active {
  transform: scale(0.96);
  transition: transform .08s ease;
}

/* Text links get a tone shift instead of a scale. */
.exp-more:active,
.exp-title-link:active,
.sec-link:active,
.section-link-gold:active,
.rpost-link:active,
.partner-contact-link:active,
.reader-share-item:active,
.nav-link:active {
  opacity: 0.62;
  transition: opacity .08s ease;
}

/* A tap must never leave a grey box behind on iOS. */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:active, .btn-ghost:active, .cta-add:active,
  .hero-cta:active, .section-cta:active, .nav-cta:active,
  .srail-chip:active, .xp-arrow:active { transform: none; }
}

/* ══════════════ JOURNAL CHIPS ══════════════
   The stories row uses .jr-chip and the experiences row uses .srail-chip.
   They sit in the same place on the page and do the same job, so they are
   matched here rather than left to drift apart — resting, hover, selected
   and press all take their values from the experiences row. */
.srail .jr-chips .jr-chip,
.jr-chips .jr-chip {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.62) !important;
  border-radius: 100px;
}
.jr-chips .jr-chip:not(.jr-chip--on):hover {
  color: #fff !important;
  border-color: var(--gold) !important;
  background: rgba(201,168,108,0.12) !important;
}
.jr-chips .jr-chip.jr-chip--on {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
  transition: none;
}
.jr-chips .jr-chip:not(.jr-chip--on):active {
  border-color: var(--gold) !important;
  background: rgba(201,168,108,0.12) !important;
}
.jr-chips .jr-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


@media (max-width: 900px) {
  .st-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  }
@media (max-width: 600px) {
  .st-grid { grid-template-columns: 1fr; }
  }

/* The card headline is now an anchor so the story can be crawled and shared;
   it should still look like the heading it replaced. */
.jr-card-link { color: inherit; text-decoration: none; }
.jr-card-link:hover { color: var(--gold); }
.jr-card-link:active { opacity: 0.62; transition: opacity .08s ease; }

/* Topics a story belongs to, at the foot of the article. These are the route
   into the topic pages — quieter than a row of chips above the feed, and the
   links come from related content rather than from navigation. */
.st-topics {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 44px 0 0; padding-top: 28px; border-top: 1px solid rgba(26,22,18,0.1);
}
.st-topics-k {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(26,22,18,0.45); margin-right: 6px;
}
.st-topic-tag {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 8px 15px; border-radius: 100px;
  border: 1px solid rgba(26,22,18,0.16); color: var(--ink-70);
}
.st-topic-tag:hover { border-color: var(--gold); color: var(--ink); background: rgba(201,168,108,0.1); }
.st-topic-tag:active { transform: scale(0.96); transition: transform .08s ease; }

/* ══════════════ STORY PAGE ══════════════
   The reader's layout, standing on its own. Every inner class — the media
   column, the article column, the type — is already styled for the overlay;
   only .reader-panel was modal-positioned, so this is the wrapper that was
   missing. Nothing about the design is re-specified here. */
.story-page {
  display: flex;
  background: #0A0805;
  min-height: 100vh;
}
.story-page .reader-media { position: sticky; top: 0; height: 100vh; }
.story-page .reader-next { text-decoration: none; }

/* the topics a story belongs to, on the dark article column */
.st-topics {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 34px 0 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.1);
}
.st-topics-k {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin-right: 6px;
}
.st-topic-tag {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 9px 15px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.72);
}
.st-topic-tag:hover { border-color: var(--gold); color: #fff; background: rgba(201,168,108,0.12); }
.st-topic-tag:active { transform: scale(0.96); transition: transform .08s ease; }

@media (max-width: 760px) {
  .story-page { flex-direction: column; }
  .story-page .reader-media {
    position: relative; flex: 0 0 auto; height: auto; aspect-ratio: 4 / 5;
  }
  .story-page .reader-wrap { padding: 32px 22px 56px; }
}

/* topic listing */
.st-topic { background: var(--cream); padding: clamp(64px,8vw,104px) 0; }
.st-topic-eye {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 16px;
}
.st-topic-h {
  font-family: var(--serif); font-weight: 300; font-size: clamp(34px,5vw,60px);
  line-height: 1.06; color: var(--ink); margin: 0 0 14px;
}
.st-topic-sub { font-size: 15px; line-height: 1.8; color: var(--ink-70); margin: 0 0 46px; }
.st-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.st-card { text-decoration: none; display: block; }
.st-card-img {
  display: block; aspect-ratio: 4/5; background-size: cover; background-position: center;
  border-radius: var(--r-soft); margin-bottom: 16px;
}
.st-card-cat {
  display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 9px;
}
.st-card-t {
  display: block; font-family: var(--serif); font-size: 20px; line-height: 1.28;
  color: var(--ink); margin-bottom: 9px;
}
.st-card-d { display: block; font-size: 14px; line-height: 1.7; color: var(--ink-70); margin-bottom: 12px; }
.st-card-m {
  display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.05em;
  color: rgba(26,22,18,0.45);
}
.st-topic-back { margin: 48px 0 0; }
.st-topic-back a {
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
}
@media (max-width: 900px) { .st-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 600px) { .st-grid { grid-template-columns: 1fr; } }

/* Back to stories. It was fixed at 84px, which put it on top of the sticky
   header — the ticker and nav together are taller than that. It sits in the
   flow at the head of the article column instead, so it can never cover the
   header at any width and simply scrolls away with the copy. */
.story-back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 26px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.6);
  transition: color .25s ease;
}
.story-back:hover { color: var(--gold); }
.story-back:active { opacity: 0.62; transition: opacity .08s ease; }

/* The story card became a single link, so the whole card navigates rather
   than the headline alone. As an anchor it inherits the browser underline,
   which it never had as an article. */
.jr-card { text-decoration: none; color: inherit; }
.jr-card:active { opacity: 0.82; transition: opacity .08s ease; }

/* ══════════════ THE EVENTS CALENDAR ══════════════
   A year read as a list rather than a grid. A month is a heading, an event is
   a row: when on the left, what on the right. Dated entries carry a gold rule;
   seasonal ones a quiet one, so a reader can see at a glance which dates they
   can book a flight around. */
.ev-hero {
  position: relative; min-height: 66vh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; background-color: var(--ink);
  padding: clamp(48px,7vw,104px) clamp(24px,5vw,80px);
}
.ev-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,5,0.94) 6%, rgba(10,8,5,0.3) 62%, rgba(10,8,5,0.55));
}
.ev-hero-in { position: relative; z-index: 1; max-width: 780px; }
.ev-eye {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 20px;
}
.ev-h1 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(36px,5.6vw,68px);
  line-height: 1.04; letter-spacing: -0.015em; color: #fff; margin: 0 0 22px;
}
.ev-h1 em { font-family: var(--serif); font-style: italic; color: var(--gold); }
.ev-sub { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.66); margin: 0; max-width: 56ch; }

.ev-nav {
  display: flex; gap: 6px; overflow-x: auto; background: #0A0805;
  padding: 16px clamp(24px,5vw,80px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  scrollbar-width: none; -ms-overflow-style: none;
  position: sticky; top: 0; z-index: 30;
}
.ev-nav::-webkit-scrollbar { display: none; }
.ev-jump {
  flex: 0 0 auto; text-decoration: none;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); padding: 8px 14px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.14);
}
.ev-jump:hover { color: #fff; border-color: var(--gold); background: rgba(201,168,108,0.12); }
.ev-jump:active { transform: scale(0.96); transition: transform .08s ease; }

.ev-body { background: var(--cream); }
.ev-month {
  padding: clamp(48px,6vw,84px) clamp(24px,5vw,80px);
  border-bottom: 1px solid rgba(26,22,18,0.09);
  scroll-margin-top: 72px;
}
.ev-month-head { margin-bottom: clamp(26px,3vw,40px); }
.ev-month-h {
  font-family: var(--serif); font-weight: 300; font-size: clamp(30px,4vw,50px);
  line-height: 1; color: var(--ink); margin: 0 0 10px;
}
.ev-month-note {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em;
  color: rgba(26,22,18,0.5); margin: 0;
}
.ev-list { display: flex; flex-direction: column; gap: 0; }
.ev-row {
  display: grid; grid-template-columns: 190px 1fr; gap: clamp(20px,4vw,56px);
  padding: 26px 0; border-top: 1px solid rgba(26,22,18,0.1);
}
.ev-row:first-child { border-top: none; }
.ev-when {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; padding-top: 4px;
}
.ev-row--fixed .ev-when { color: var(--gold-ink, #8a6d3b); }
.ev-row--season .ev-when { color: rgba(26,22,18,0.42); }
.ev-name {
  font-family: var(--serif); font-weight: 400; font-size: clamp(19px,2.2vw,25px);
  line-height: 1.25; color: var(--ink); margin: 0 0 6px;
}
.ev-where {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(26,22,18,0.45); margin: 0 0 10px;
}
.ev-note { font-size: 15px; line-height: 1.8; color: var(--ink-70); margin: 0; max-width: 58ch; }

.ev-note-sec { background: var(--cream); padding: clamp(48px,6vw,84px) 0; }
.ev-note-eye {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 18px;
}
.ev-note-p { font-size: 15px; line-height: 1.85; color: var(--ink-70); margin: 0 0 16px; max-width: 68ch; }

@media (max-width: 760px) {
  .ev-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .ev-when { padding-top: 0; }
  .ev-hero { min-height: 58vh; }
}

/* ══════════════ THE PLANNER'S BUTTONS ══════════════
   Plan Your Trip builds its controls in script, so a scan of the HTML never
   saw them and they were left out when press feedback went in everywhere else.
   The step chips and the option rows are the most-tapped controls on the site
   after the nav — every answer in the questionnaire goes through them.

   .pj-tag-k is a 10px colour dot inside a tag, and .add is a modifier, so
   neither takes a state of its own. */
.pj-chip:active {
  transform: scale(0.96);
  transition: transform .08s ease;
}
.pj-opt:active {
  background: rgba(201,168,108,0.07);
  transition: background .08s ease;
}
@media (prefers-reduced-motion: reduce) {
  .pj-chip:active { transform: none; }
}


/* ── Experiences section head ─────────────────────────────────────────
   The generic .sec-head is a bottom-aligned flex row: the eyebrow and
   title stack left, the "All experiences" link pins bottom-right, and on
   a destination page that leaves a wide dead band between them. Every
   other head on these pages (.highlights-head, .plan-head) is a centred
   block, so this matches that treatment and keeps the page consistent.
   Scoped to .exp-sec, so the one .sec-head elsewhere is untouched.
   .sec-eyebrow also used --gold, which is 2.13:1 on cream; --gold-ink is
   the same hue at AA, as the note at the top of this file describes. */
.exp-sec .sec-head {
  display: block;
  max-width: 680px;
  margin: 0 auto 44px;
  text-align: center;
}
.exp-sec .sec-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--gold-ink);
  margin-bottom: 20px;
}
.exp-sec .sec-title {
  margin: 0;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px,3.2vw,38px);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.exp-sec .dest-intro {
  max-width: 52ch;
  margin: 16px auto 0;
  font-size: 14px;
  line-height: 1.8;
}
@media (max-width: 760px) {
  .exp-sec .sec-head { margin-bottom: 34px; padding: 0 4px; }
  .exp-sec .sec-title { font-size: clamp(26px,7vw,32px); }
  .exp-sec .dest-intro { font-size: 13.5px; margin-top: 14px; }
}


/* The facts panel: label on one line, value right-aligned to match the
   stacked tables elsewhere. Without nowrap a two-word label like "Best for"
   breaks across two lines as soon as the value is long. */
@media (max-width: 720px) {
  .dst-facts { padding: 26px 22px; }
  .dst-fact { gap: 16px; }
  .dst-fact-k { font-size: 10.5px; letter-spacing: 0.12em; }
  .dst-fact-v { font-size: 16px; }
}

/* Story subheadings — see note in the story pages. */

/* ── Subheadings inside a story ────────────────────────────────────
   The reader has no h2 rule because the original stories were short
   enough never to need one. Browser default is near-black, which is
   invisible on this dark panel. Matched to the site's editorial
   serif rather than the body sans. */
.reader-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px,2.6vw,31px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--paper-hi, #F5F0E8);
  margin: 46px 0 18px;
}
.reader-body h2:first-child { margin-top: 0; }
.reader-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px,2.1vw,24px);
  line-height: 1.3;
  color: var(--paper-hi, #F5F0E8);
  margin: 34px 0 14px;
}
.reader-body strong { font-weight: 500; color: rgba(250,248,244,0.95); }
@media (max-width: 760px) {
  .reader-body h2 { font-size: 22px; margin: 34px 0 14px; }
  .reader-body h3 { font-size: 19px; margin: 26px 0 12px; }
}


/* Reader CTA hover. Gold buttons across the site lighten on hover rather
   than hollowing out; pages without their own rule had no hover feedback
   at all, so it lives here for everything that doesn't override it. */
.reader-media-cta:hover {
  background: var(--gold-light);
  color: var(--ink);
  border-color: var(--gold-light);
}

/* Pull quotes — see note in the story pages. */

/* Pull quotes. The markup is <blockquote class="reader-pull">, and
   `.reader-body blockquote` outranks `.reader-pull` on specificity — so the
   gold never applied and mobile fell to 19px white. Scoped here to win
   cleanly rather than with !important. */
.reader-body blockquote.reader-pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.9vw, 32px);
  line-height: 1.32;
  color: var(--gold-light);
  margin: 38px 0;
  padding-left: 24px;
  border-left: 2px solid var(--gold);
}
@media (max-width: 760px) {
  .reader-body blockquote.reader-pull {
font-size: 23px;
line-height: 1.35;
padding-left: 18px;
margin: 30px 0;
  }
}


/* ── Reader CTA sizing ─────────────────────────────────────────────────
   This class picks up declarations from five places: its own base rule, a
   shared letter-spacing group, a shared min-height/padding group, and two
   page-level rules. The result matched nothing else on the site. Sized
   here against .nav-cta — the site's small gold pill — then a step down,
   and declared last so it settles. */
.reader-media-cta,
.reader-follow-row .reader-media-cta,
.reader-end-cta .reader-media-cta {
  min-height: 34px !important;
  padding: 0 18px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  gap: 7px !important;
  border-radius: var(--r-pill) !important;
}