/* =============================================================================
   NILE SPIRIT DAHABIYA — main stylesheet
   Ported verbatim from the approved HTML mockups
   (Website HTML Designs/Nile-Spirit-*.html). No build step: this file is
   hand-assembled and enqueued directly by functions.php.

   Structure:
     1. Design tokens / reset / typography / layout   (global master)
     2. Buttons, utility bar, header, hero, footer    (global master)
     3. Site-wide polish
     4. One clearly-marked section per page template

   Rule: do NOT refactor or dedupe. Per-site colour overrides go through the
   Customizer (:root injected after this file), never by editing here.
   ============================================================================= */


/* =============================================================================
   NILE SPIRIT — Master Stylesheet (single-file build)
   ============================================================================= */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --ink:       #0E1A2B;
  --ink-soft:  #1B2940;
  --cream:     #F4EDE0;
  --cream-warm:#EFE6D4;
  --ivory:     #FAF7F2;
  --gold:      #C9A96E;
  --gold-deep: #B89456;
  --brass:     #7A6136;  /* 4.7:1+ on ivory, cream and cream-warm */
  --reed:      #3F5544;
  --text:      #1F2937;
  --text-soft: #4B5563;
  --muted:     #5F6673;  /* 4.6:1+ on every light ground */
  --hairline:  #D9CFB8;

  /* Day-Aboard atmospheric backgrounds */
  --t-dawn:    #DBD4C2;
  --t-morning: #F4EDE0;
  --t-midday:  #EFE6D4;
  --t-aft:     #E8D9B7;
  --t-dusk:    #2E2A37;
  --t-night:   #0E1A2B;

  /* Type scale */
  --t-hero:    clamp(56px, 9.5vw, 144px);
  --t-h1:      clamp(40px, 5.4vw, 80px);
  --t-h2:      clamp(32px, 4vw, 60px);
  --t-h3:      clamp(22px, 2.4vw, 32px);
  --t-quote:   clamp(26px, 3.2vw, 44px);
  --t-body-lg: 19px;
  --t-body:    17px;
  --t-small:   15px;
  --t-cap:     13px;
  --t-micro:   11px;

  /* Spacing */
  --s-section:    160px;
  --s-section-md: 96px;
  --s-section-sm: 64px;
  --s-block:      48px;
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px;

  /* Containers */
  --max-text:    660px;
  --max-content: 1180px;
  --max-wide:    1440px;

  /* Header */
  --header-h:    78px;

  /* Transitions */
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:  240ms;
  --t-base:  600ms;
  --t-slow:  1200ms;
  /* Image URLs are injected per-page as inline custom properties
     (--img-hero / --img-reserve-bg) by the page templates. */
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Figtree', -apple-system, sans-serif;
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*
 * height:auto is the half of the reset that matters most here.
 * wp_get_attachment_image() writes width="1450" height="950" on every
 * image; without an author height those attributes win, which silently
 * cancels any aspect-ratio the layout asks for -- a 4/3 tile came out
 * 950px tall. Wrappers that want a filled box set height:100% themselves
 * and are more specific, so they are unaffected.
 */
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--ink); }

body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.08;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); line-height: 1.25; }
p {
  font-size: var(--t-body); line-height: 1.78; color: var(--text-soft);
}

.eyebrow {
  font-family: 'Marcellus', serif;
  font-size: var(--t-micro);
  /* Plain brass reads 4.05:1 on cream at this size. The dark panels
     below override to gold, so this only affects the light grounds -- 
     which are the ones that were failing. */
  text-transform: uppercase; color: var(--brass-legible);
  display: inline-block;
}

.link-thin {
  display: inline-block; position: relative;
  font-family: 'Marcellus', serif;
  font-size: var(--t-cap);
  text-transform: uppercase; color: var(--ink);
  padding-bottom: 6px; cursor: pointer;
  transition: color var(--t-base) var(--ease)) var(--ease);
}
.link-thin::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform-origin: left; transition: transform var(--t-base) var(--ease);
}
.link-thin:hover { color: var(--brass); }
.link-thin:hover::after { transform: scaleX(1.06); }

.accent {
  font-family: 'Fraunces', serif;
  font-style: italic; color: var(--brass);
  font-weight: 400; font-size: 1.08em;
}

.rule {
  display: block; width: 80px; height: 1px;
  background: var(--gold); margin: var(--s-3) auto; border: 0;
}

/* ---------- LAYOUT ---------- */
.container       { max-width: var(--max-content); margin: 0 auto; padding: 0 var(--s-5); }
.section         { padding: var(--s-section) 0; position: relative; }

/* =============================================================================
   BUTTONS  —  filled + outlined (used in header CTA + hero)
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 14px 28px;
  font-family: 'Marcellus', serif;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn--filled {
  background: var(--gold-deep);
  color: var(--ink);
  border-color: var(--gold-deep);
  font-weight: 500;
}
.btn--filled:hover {
  background: var(--brass);
  color: var(--cream);
  border-color: var(--brass);
}
.btn--outline {
  background: transparent;
  color: var(--cream);
  border-color: rgba(244, 237, 224, 0.5);
}
.btn--outline:hover {
  background: rgba(244, 237, 224, 0.08);
  border-color: var(--cream);
}
.btn--sm { padding: 11px 22px; font-size: 10px; }
/* Header CTA: the one action every page offers, so it reads at body size. */
.btn--header { padding: 13px 26px; font-size: 13px; letter-spacing: .08em; }
.btn svg { width: 12px; height: 12px; }

/* =============================================================================
   UTILITY BAR  —  thin top bar with phone, currency, brochure, account
   ============================================================================= */
.utility-bar {
  background: var(--ink);
  color: var(--cream);
  border-top: 2px solid var(--gold-deep);
  padding: 10px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  position: relative; z-index: 101;
}
.utility-bar > div { display: flex; align-items: center; gap: 18px; }
.utility-bar a, .utility-bar span.utility-text, .utility-bar button {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--cream); opacity: 0.85;
  transition: opacity var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.utility-bar a:hover, .utility-bar button:hover { opacity: 1; color: var(--gold); }
.utility-bar svg { width: 13px; height: 13px; flex-shrink: 0; }
.utility-divider { opacity: 0.25; user-select: none; }
.utility-text { opacity: 0.7; font-style: italic; font-family: 'Fraunces', serif; font-size: 14px; }

@media (max-width: 900px) {
  .utility-bar { padding: 8px 16px; font-size: 11px; flex-wrap: nowrap; }
  .utility-bar .utility-text, .utility-bar .utility-hide-mobile { display: none !important; }
  .utility-bar > div { gap: 10px; }
  .utility-bar a, .utility-bar button { white-space: nowrap; }
}

/* =============================================================================
   SITE HEADER  —  STICKY, with hamburger + brand + nav + filled CTA
   ============================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  padding: var(--s-3) var(--s-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  border-bottom: 1px solid var(--hairline);
  height: var(--header-h);
  transition: box-shadow var(--t-base) var(--ease);
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(139,111,63,0.08), 0 8px 24px -16px rgba(14,26,43,0.12);
}

/* Header left cluster: hamburger + brand. The full nav is visible on
   desktop, so the hamburger only appears once the nav collapses. */
.header__left { display: flex; align-items: center; gap: var(--s-3); }
@media (min-width: 901px) { .menu-toggle { display: none; } }
.menu-toggle {
  width: 24px; height: 18px; position: relative;
  flex-shrink: 0;
}
.menu-toggle span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--ink); transition: all var(--t-base) var(--ease);
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 8px; width: 70%; }
.menu-toggle span:nth-child(3) { top: 16px; }
.menu-toggle:hover span { background: var(--brass); }
.menu-toggle:hover span:nth-child(2) { width: 100%; }

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.brand .glyph { width: 22px; height: 22px; flex-shrink: 0; }
.brand .glyph path {
  stroke: var(--brass); fill: none; stroke-width: 1;
}
.brand .wordmark {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 400;
  font-size: 22px;
  color: var(--ink); line-height: 1;
}

/* Header center: nav */
.nav-list {
  display: flex; gap: var(--s-5);
  justify-self: center;
}
.nav-list a {
  font-family: 'Marcellus', serif;
  font-size: 15px;
  /* Title case needs far less tracking than caps did, and carries a
     little more size for the same optical weight. */
  letter-spacing: .045em;
  text-transform: capitalize; color: var(--ink);
  white-space: nowrap;
  position: relative; padding: var(--s-1) 0;
  transition: color var(--t-base) var(--ease);
}
.nav-list a > span { position: relative; }
/* The rule sits under the word rather than the whole link. That is
   also what keeps it right in the drawer, where the link carries an
   icon in front of the word. */
.nav-list a > span::after {
  content: ''; position: absolute; bottom: -3px; left: 50%;
  width: 0; height: 1px; background: var(--gold);
  transition: width var(--t-base) var(--ease), left var(--t-base) var(--ease);
}
.nav-list a:hover { color: var(--brass); }
.nav-list a:hover > span::after { width: 100%; left: 0; }

/* Header right: filled CTA (uses base .btn--filled styles) */

.mobile-nav  { display: none; }

/* The header is brand + nav + button on one row; six title-case
   labels stop fitting at full size around 1150px and again near 950,
   where the window is only just wider than the three of them. Each
   step takes the type and the spacing down together. The switches sit
   above where the row actually breaks, so the widths just inside a
   breakpoint are not the ones that overflow. */
@media (max-width: 1150px) {
  .nav-list { gap: var(--s-3); }
  .nav-list a { font-size: 13px; letter-spacing: .03em; }
}
@media (max-width: 950px) {
  .nav-list { gap: 18px; }
  .nav-list a { font-size: 12px; letter-spacing: .02em; }
}
@media (max-width: 900px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    padding: var(--s-2) var(--s-4);
  }
  .nav-list, .btn--header { display: none; }
  .brand .wordmark { font-size: 18px; }

  .mobile-nav {
    display: flex; position: fixed; inset: 0;
    background: var(--cream); z-index: 200;
    padding: var(--s-7) var(--s-5);
    transform: translateY(-100%);
    transition: transform var(--t-base) var(--ease);
    flex-direction: column; justify-content: center;
    align-items: center; gap: var(--s-4);
  }
  .mobile-nav.is-open { transform: translateY(0); }
  .mobile-nav a {
    display: flex; align-items: center; gap: 14px;
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 32px; color: var(--ink);
  }
  .mobile-nav a .ph-ico {
    width: 24px; height: 24px; flex: none;
    color: var(--brass-legible, var(--brass)); opacity: .6;
  }
  .mobile-nav a[aria-current="page"] .ph-ico { opacity: 1; }
  /* The drawer centres each link on its own, which with an icon in
     front left the icons in a ragged column. One shared width centres
     the block instead, so the icons line up and the words start
     together. */
  .mobile-nav a { width: min(100%, 248px); }
  .mobile-close {
    position: absolute; color: var(--brass);
    background: none; border: 0; cursor: pointer;
  }
}

/* =============================================================================
   HERO  —  cinematic image + eyebrow + giant title + subtitle + CTAs + brand badge
   ============================================================================= */
.hero {
  position: relative;
  height: calc(75vh - var(--header-h));
  min-height: 680px;
  overflow: hidden;
  background: var(--ink); color: var(--cream);
}
.hero__bg {
  position: absolute; inset: 0;
  background-image: var(--img-hero);
  background-size: cover;
  background-position: center;
  animation: hero-zoom 22s var(--ease-out) forwards;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(14,26,43,0.65) 0%, rgba(14,26,43,0.30) 45%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 50%, rgba(14,26,43,0.45) 100%);
  pointer-events: none;
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.hero__inner {
  position: relative; z-index: 2;
  height: 100%;
  max-width: var(--max-wide); margin: 0 auto;
  padding: 0 var(--s-7);
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hero__content {
  max-width: 860px;
  opacity: 0; transform: translateY(28px);
  animation: rise 1400ms var(--ease-out) 400ms forwards;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Marcellus', serif;
  font-size: 11px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.hero__eyebrow svg { width: 14px; height: 14px; }
.hero__rule {
  display: block; width: 56px; height: 2px;
  background: var(--gold-deep);
  margin-bottom: 28px;
}

.hero__title {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 1.02;
  color: var(--cream);
  margin-bottom: 22px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.hero__subtitle {
  font-family: 'Figtree', sans-serif; font-weight: 300;
  font-size: 17px; line-height: 1.7;
  color: rgba(244, 237, 224, 0.92);
  max-width: 520px;
  margin-bottom: 36px;
}
.hero__ctas {
  display: flex; gap: 14px;
  flex-wrap: wrap;
}

@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* Brand badge bottom-left */
.hero__badge {
  position: absolute; bottom: 32px; left: 32px;
  z-index: 4;
  display: flex; align-items: center; gap: 24px;
  opacity: 0; transform: translateY(20px);
  animation: rise 1400ms var(--ease-out) 1400ms forwards;
}
.hero__badge-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.hero__badge-circle svg { width: 22px; height: 22px; }
.hero__badge-circle svg path { stroke: var(--cream); fill: none; stroke-width: 1.2; }

/* Scroll indicator bottom-right (kept) */
.hero__scroll {
  position: absolute; bottom: 32px; right: 32px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: 'Marcellus', serif;
  font-size: 10px;
  text-transform: uppercase; color: var(--cream); opacity: 0.85;
  opacity: 0; animation: rise 1200ms var(--ease-out) 1600ms forwards;
}
.hero__scroll-line {
  width: 1px; height: 56px; background: var(--gold);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%; background: var(--cream);
  animation: scroll-pulse 2400ms ease-in-out infinite;
}
@keyframes scroll-pulse { 0% { top: -100%; } 100% { top: 100%; } }

@media (max-width: 900px) {
  .hero { height: calc(100vh - var(--header-h)); min-height: 600px; }
  .hero__inner { padding: 0 var(--s-4); justify-content: flex-end; padding-bottom: 120px; }
  .hero__title { font-size: clamp(40px, 9vw, 64px); }
  .hero__subtitle { font-size: 15px; }
  .hero__ctas .btn { padding: 13px 22px; font-size: 12px; }
  .hero__badge { bottom: 24px; left: 16px; right: 16px; gap: 14px; }
  .hero__scroll { display: none; }
}

/* =============================================================================
   INVITATION
   ============================================================================= */
.invitation {
  background: var(--cream);
  text-align: center;
  padding: var(--s-section) var(--s-5);
}
.invitation .pull-quote { font-size: var(--t-quote); }

/* =============================================================================
   THE VESSEL
   ============================================================================= */
.vessel {
  background: var(--ivory);
  padding: var(--s-section) 0;
}
.vessel__grid {
  display: grid; grid-template-columns: 45fr 55fr;
  gap: var(--s-7); align-items: center;
  max-width: var(--max-wide); margin: 0 auto;
  padding: 0 var(--s-5);
}
.vessel__img {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--ink);
}
.vessel__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0.05) 0%, rgba(139,111,63,0.18) 100%);
  pointer-events: none; z-index: 1;
  mix-blend-mode: multiply;
}
.vessel__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
  filter: sepia(8%) saturate(0.94) brightness(0.96) contrast(1.03);
}
.vessel__img:hover img { transform: scale(1.04); }

/* Vessel slider: slides stack and cross-fade; the active one drifts in
   slowly so a still photograph reads as a moment on board. */
.vessel-slider__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1100ms var(--ease), visibility 0s linear 1100ms;
}
.vessel-slider__slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 1100ms var(--ease), visibility 0s;
}
.vessel-slider__slide img { transform: scale(1.06); transition: transform 7000ms cubic-bezier(0.16, 1, 0.3, 1); }
.vessel-slider__slide.is-active img { transform: scale(1); }
.vessel-slider:hover .vessel-slider__slide.is-active img { transform: scale(1.02); }
.vessel-slider::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, rgba(14,26,43,0) 0%, rgba(14,26,43,0.7) 100%);
  pointer-events: none; z-index: 2;
}
.vessel-slider__dots {
  position: absolute; left: 0; right: 0; bottom: var(--s-4); z-index: 3;
  display: flex; justify-content: center; gap: 6px;
}
.vessel-slider__dot {
  position: relative; width: 28px; padding: 0;
  background: none; border: 0; cursor: pointer;
  transition: width var(--t-base) var(--ease);
}
.vessel-slider__dot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  background: var(--cream); opacity: 0.6;
  box-shadow: 0 1px 3px rgba(14,26,43,0.45);
  transition: opacity var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.vessel-slider__dot:hover::before { opacity: 0.9; }
.vessel-slider__dot.is-active { width: 52px; }
.vessel-slider__dot.is-active::before { opacity: 1; background: var(--gold); }
.vessel-slider__dot:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .vessel-slider__slide, .vessel-slider__slide img { transition: none; transform: none; }
}
.vessel__txt { padding-right: var(--s-5); }
.vessel__title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: var(--t-h2); color: var(--ink);
  margin: var(--s-2) 0 var(--s-3); line-height: 1.1;
}
.vessel__body { margin-bottom: var(--s-5); max-width: 480px; }
@media (max-width: 900px) {
  .vessel__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .vessel__txt { padding-right: 0; }
}

/* =============================================================================
   FOUR VOYAGES  —  3:2 landscape cards
   ============================================================================= */
.voyages {
  background: var(--cream);
  padding: var(--s-section) 0;
  text-align: center;
}
.voyages__head { margin-bottom: var(--s-7); }
.voyages__head h2 { font-style: italic; margin-top: var(--s-2); }
.voyage { cursor: pointer; }
.voyage:hover .voyage__img::before { opacity: 0.5; }
.voyage:hover .voyage__img img { filter: none;
}
.voyage__days { margin-bottom: var(--s-1);
}

/* =============================================================================
   THE ROUTE  —  expanded with map + 7-chapter port timeline
   ============================================================================= */
.nile-map { background: var(--ivory); padding: var(--s-section) 0; }
.nile-map__head { text-align: center; max-width: 720px; margin: 0 auto var(--s-7); padding: 0 var(--s-5); }
.nile-map__head h2 { font-style: italic; margin: var(--s-2) 0 var(--s-3); }
.nile-map__head p { color: var(--muted); }

.nile-map__svg { max-width: 1200px; margin: 0 auto var(--s-7); padding: 0 var(--s-5); }
.nile-map__svg svg { width: 100%; height: auto; }
.port { cursor: pointer; }
.port circle.dot {
  fill: var(--gold);
  transition: r var(--t-base) var(--ease), fill var(--t-base) var(--ease);
}
.port:hover circle.dot { r: 8; fill: var(--brass); }
.port .label {
  font-family: "Manrope", sans-serif; font-weight: 500;
  font-size: 14px; fill: var(--ink);
}
.port .label--small { font-size: 12px; fill: var(--ink); font-family: "Manrope", sans-serif; font-weight: 400; font-style: normal; }
.route-list__intro .eyebrow { margin-bottom: var(--s-2); }
.port-meta .day {
  font-family: 'Marcellus', serif;
  font-size: var(--t-micro);
  text-transform: uppercase; color: var(--brass);
}
.port-meta .km {
  font-family: 'Fraunces', serif;
  font-size: 28px; color: var(--ink); font-weight: 300;
  font-feature-settings: "tnum";
}

@media (max-width: 900px) {
  .port-meta .km { font-size: 18px; }
}

/* =============================================================================
   SUITES SPLIT
   ============================================================================= */
.suites-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 60vh; }
.suites-split__img {
  position: relative; background: var(--ink); overflow: hidden;
}
.suites-split__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
  filter: sepia(8%) saturate(0.94) brightness(0.96) contrast(1.03);
}
.suites-split:hover .suites-split__img img { transform: scale(1.03); }
.suites-split__txt {
  background: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-7); max-width: 640px;
}
.suites-split__txt h2 {
  font-style: italic; margin: var(--s-2) 0 var(--s-3);
}
.suites-split__txt p { margin-bottom: var(--s-5); max-width: 460px; }
@media (max-width: 900px) {
  .suites-split { grid-template-columns: 1fr; }
  .suites-split__img { min-height: 60vh; }
  .suites-split__txt { padding: var(--s-6) var(--s-5); }
}

/* =============================================================================
   A DAY ABOARD
   ============================================================================= */
.day-aboard { background: var(--cream); }
.day-aboard__head {
  text-align: center; padding: var(--s-section) var(--s-5) var(--s-7);
}
.day-aboard__head h2 { font-style: italic; margin-top: var(--s-2); }

.moment {
  padding: var(--s-7) var(--s-5);
  transition: background var(--t-slow) var(--ease);
  position: relative;
}
.moment__inner {
  max-width: var(--max-content); margin: 0 auto;
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--s-7); align-items: baseline;
}
.moment__time {
  font-family: 'Marcellus', serif;
  font-size: 14px; color: #5E4A26;
  border-top: 1px solid var(--gold);
  padding-top: var(--s-2); width: 80px;
}
.moment__text {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.25;
  color: var(--ink); max-width: 720px;
}
.moment--m1  { background: var(--t-dawn);    }
.moment--m2  { background: var(--t-morning); }
.moment--m3  { background: var(--t-midday);  }
.moment--m4  { background: var(--t-aft);     }
.moment--m5  { background: var(--t-dusk);    color: var(--cream); }
.moment--m6  { background: var(--t-night);   }
.moment--m5 .moment__time, .moment--m6 .moment__time { color: var(--gold); border-top-color: var(--gold); }
.moment--m5 .moment__text, .moment--m6 .moment__text { color: var(--cream); }

@media (max-width: 760px) {
  .moment__inner { grid-template-columns: 1fr; gap: var(--s-3); }
  .moment__time { padding-bottom: var(--s-2); }
}

/* =============================================================================
   TESTIMONIALS CAROUSEL  —  "CHAPTER V — WHAT THEY SAY"
   ============================================================================= */
.testimonials {
  background: var(--cream);
  padding: var(--s-section) var(--s-5) var(--s-section);
  position: relative;
}
.testimonials__inner {
  max-width: 980px; margin: 0 auto;
  position: relative;
}
.testimonials__chapter {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.testimonials__chapter .eyebrow { color: var(--brass-legible); white-space: nowrap; }
.testimonials__chapter::after {
  content: ''; flex: 1; height: 1px;
  background: var(--gold); opacity: 0.4;
}

/* Slide stack */
.testimonials__stack {
  position: relative;
  min-height: 280px;
}
.testimonial {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  pointer-events: none;
}
.testimonial.is-active {
  position: relative; opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.testimonial__quote {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.5; color: var(--ink);
  position: relative;
  padding-left: 56px;
  max-width: 820px;
}
.testimonial__quote::before {
  content: '\201C';
  position: absolute; left: 0; top: -18px;
  font-family: 'Fraunces', serif;
  font-style: normal; font-weight: 400;
  font-size: 96px; line-height: 1;
  color: var(--gold);
}
.testimonial__attr {
  margin-top: var(--s-4);
  font-family: 'Marcellus', serif;
  font-size: 11px;
  text-transform: uppercase;
  padding-left: 56px;
}

/* Carousel controls — gold rule + arrows + dash indicators */
.testimonials__controls {
  margin-top: var(--s-7);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3);
}
.testimonials__rule {
  width: 280px; height: 1px;
  background: var(--gold); opacity: 0.35;
}
.testimonials__nav {
  display: flex; align-items: center; gap: var(--s-3);
}
.t-arrow {
  width: 36px; height: 36px;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--brass);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.t-arrow:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.t-arrow svg { width: 12px; height: 12px; }
.t-arrow:disabled { opacity: 0.3; cursor: default; }
.t-arrow:disabled:hover { background: transparent; color: var(--brass); }

.t-dots {
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--s-3);
}
.t-dot {
  width: 18px; height: 1px;
  background: var(--gold); opacity: 0.35;
  transition: width var(--t-base) var(--ease), opacity var(--t-base) var(--ease), background var(--t-base) var(--ease);
  cursor: pointer;
  display: block;
}
.t-dot.is-active {
  width: 44px; opacity: 1; background: var(--gold-deep);
}

@media (max-width: 700px) {
  .testimonial__quote { padding-left: 40px; font-size: 20px; }
  .testimonial__quote::before { font-size: 72px; top: -10px; }
  .testimonial__attr { padding-left: 40px; }
  .testimonials__rule { width: 200px; }
}

/* =============================================================================
   PRESS
   ============================================================================= */
.press {
  padding: var(--s-section-md) var(--s-5);
  background: var(--ivory);
  text-align: center;
}
.press__label { display: block; margin-bottom: var(--s-5); }
.press__row {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: var(--s-7);
  max-width: 1100px; margin: 0 auto;
}
.press__logo {
  font-family: 'Fraunces', serif;
  font-size: 22px; font-style: italic;
  color: var(--ink); opacity: 0.42;
  transition: opacity var(--t-base) var(--ease);
}
.press__logo:hover { opacity: 0.8; }
.press__logo--cap {
  font-family: 'Marcellus', serif; font-style: normal;
  font-size: 13px; text-transform: uppercase;
}

/* =============================================================================
   RESERVATION INVITATION  —  with moody background image
   ============================================================================= */
.reserve-invite {
  position: relative;
  padding: var(--s-section) var(--s-5);
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  background: var(--ink);
}
.reserve-invite__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--img-reserve-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  filter: contrast(1.1) saturate(0.7);
}
.reserve-invite__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,26,43,0.85) 0%, rgba(14,26,43,0.65) 50%, rgba(14,26,43,0.92) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(201,169,110,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.reserve-invite > *:not(.reserve-invite__bg):not(.reserve-invite__overlay) {
  position: relative; z-index: 2;
}
.reserve-invite h2 {
  font-style: italic; color: var(--cream);
  font-size: var(--t-h1);
  max-width: 920px; margin: 0 auto;
  line-height: 1.18;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.reserve-invite .rule { background: var(--gold); margin: var(--s-5) auto; }
.reserve-invite__contact {
  font-family: 'Marcellus', serif;
  font-size: var(--t-cap);
  text-transform: uppercase; color: var(--cream);
  display: flex; flex-wrap: wrap; justify-content: center;
  /* Without this the spans stretch to the button's height and their
     text sits at the top of that box, a few pixels above the button's
     own centre line. */
  align-items: center;
  gap: var(--s-3) var(--s-4); margin-top: var(--s-4);
}
.reserve-invite__contact span:not(:first-child)::before {
  content: '·'; color: var(--gold); margin-right: var(--s-3);
}
.reserve-invite__contact a {
  color: var(--cream);
  transition: color var(--t-base) var(--ease);
}
.reserve-invite__contact a:hover { color: var(--gold); }

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer {
  background: var(--cream);
  padding: var(--s-7) 0 var(--s-4);
  border-top: 1px solid var(--hairline);
}
.site-footer__grid {
  display: grid;
  gap: var(--s-7);
  max-width: var(--max-content); margin: 0 auto;
  padding: 0 var(--s-5);
}
.site-footer__brand .glyph { margin-bottom: var(--s-2); }
.site-footer__brand .glyph path { fill: none; stroke-width: 1; }
.site-footer__brand .wordmark {
  font-family: 'Marcellus', serif;
  text-transform: uppercase;
}
.site-footer__brand p {
  margin-top: var(--s-2);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 17px;
  max-width: 280px; line-height: 1.5;
}
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2) var(--s-3); }
.footer-nav h4 { grid-column: 1 / -1;
}

.site-footer__contact h4 {
  font-family: 'Marcellus', serif;
  font-size: var(--t-micro);
  text-transform: uppercase; color: var(--brass);
  margin-bottom: var(--s-2);
}
.site-footer__contact a {
  display: block; font-size: 14px; color: var(--text-soft);
  margin-bottom: 6px;
  transition: color var(--t-base) var(--ease);
}
.site-footer__contact a:hover { color: var(--brass); }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-4); }
.site-footer .social-row a {
  /* A round plate, so the icons read as a row of buttons rather than
     four marks floating on the panel. 40px is also the tap target —
     the glyph alone was 18px, under the 24px minimum. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(201, 169, 110, 0.10);
  border: 1px solid rgba(201, 169, 110, 0.28);
  /* Brass at the old 0.6 opacity measured 2.12:1 on the ink footer,
     under the 3:1 a meaningful icon needs. Gold reaches 4.9:1. */
  color: var(--gold); opacity: 0.9;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.site-footer .social-row a:hover,
.site-footer .social-row a:focus-visible {
  opacity: 1; transform: translateY(-2px);
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
.site-footer .social-row svg { width: 20px; height: 20px; fill: currentColor; display: block; }

.colophon {
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-5) 0;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-family: 'Marcellus', serif;
  font-size: var(--t-micro);
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}


/* =============================================================================
   AVAILABILITY BAR  —  sits between hero and invitation
   ============================================================================= */
.availability {
  background: var(--cream-warm);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 28px var(--s-5);
  position: relative;
  z-index: 5;
}
.availability__form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 28px;
  align-items: end;
  max-width: var(--max-wide);
  margin: 0 auto;
}
.avail-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.avail-field label {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 500;
}
.avail-field input,
.avail-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 8px 0;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  width: 100%;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease);
}
.avail-field input:focus,
.avail-field select:focus,
.avail-field input:hover,
.avail-field select:hover {
  outline: none;
  border-bottom-color: var(--gold);
}
.avail-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238B6F3F' stroke-width='1.5'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 8px;
  padding-right: 24px;
}
.avail-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  filter: invert(0.4) sepia(0.6) saturate(2) hue-rotate(10deg);
}
.avail-btn {
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--brass);
  font-family: 'Figtree', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 28px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
  white-space: nowrap;
  align-self: end;
  height: 47px;
}
.avail-btn:hover { background: var(--gold); color: var(--ink); }
@media (max-width: 1100px) {
  .availability__form {
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
  }
  .avail-field--voyage { grid-column: 1 / -1; }
  .avail-btn { grid-column: 1 / -1; justify-self: stretch; margin-top: 8px; }
}
@media (max-width: 600px) {
  .availability { padding: 22px var(--s-5); }
  .availability__form { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .avail-btn { grid-column: 1 / -1; }
}

/* =============================================================================
   SCROLL REVEAL
   ============================================================================= */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 120ms; }
.reveal--delay-2 { transition-delay: 240ms; }
.reveal--delay-3 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@media print {
  body::before, .hero__bg, .reserve-invite__bg, .reserve-invite__overlay { display: none; }
  .site-header { position: static; }
}


/* ==========================================================================
   SITE-WIDE POLISH (footer & nav)
   ========================================================================== */
/* ===== footer polish ===== */
.site-footer{background:var(--ink);border-top:2px solid var(--gold);padding:var(--s-7) 0 var(--s-4);color:var(--cream)}
.site-footer__grid{grid-template-columns:2.2fr 2.6fr 2fr;align-items:start}
.site-footer__brand .glyph{width:30px;height:30px}
.site-footer__brand .glyph path{stroke:var(--gold)}
.site-footer__brand .wordmark{color:var(--cream);font-size:15px;letter-spacing:.18em}
.site-footer__brand p{color:var(--cream);opacity:.75}
.footer-nav h4, .site-footer h4{color:var(--gold);font-family:'Marcellus',serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:var(--s-2)}
.footer-nav a, .site-footer a{color:var(--cream);opacity:.8;font-family:'Figtree',sans-serif;font-size:14.5px;transition:opacity .2s,color .2s;padding:4px 0;display:inline-block}
.footer-nav a:hover, .site-footer a:hover{opacity:1;color:var(--gold)}
.site-footer .legal{color:var(--cream);opacity:.55;border-top:1px solid rgba(201,169,110,.25);margin-top:var(--s-6);padding-top:var(--s-3)}
.site-footer .legal a{opacity:.7}
@media(max-width:860px){.site-footer__grid{grid-template-columns:1fr;gap:var(--s-5)}}

/* ============================================================
   COMPACT SPACING — site-wide tightening
   ============================================================ */
:root{
  --s-section:    96px;
  --s-section-md: 64px;
  --s-section-sm: 48px;
  --s-7: 64px;
}
/* heads: less air after section titles */
.voyages__head, .nile-map__head { margin-bottom: var(--s-6) !important; }
.nile-map__svg { margin-bottom: var(--s-5) !important; }
/* .voyages__foot sets margin-top:0 further down, where the row became
   arrows plus the button; this !important was quietly overriding it
   and holding 64px of the 190px gap under the cards. */
.mcards { margin-top: var(--s-4) !important; }

/* ============================================================
   MOBILE POLISH  ≤900px
   ============================================================ */
@media (max-width: 900px){
  :root{
    --s-section:    56px;
    --s-section-md: 44px;
    --s-section-sm: 36px;
    --s-7: 40px; --s-6: 36px; --s-5: 22px;
    --header-h: 64px;
    --t-hero: clamp(40px, 11vw, 64px);
    --t-h1:  clamp(32px, 8.5vw, 44px);
    --t-h2:  clamp(27px, 7vw, 36px);
    --t-quote: clamp(21px, 5.6vw, 27px);
    --t-body-lg: 17px; --t-body: 16px;
  }
  body{ -webkit-text-size-adjust:100%; }
  .site-header{ height:auto; min-height:60px; padding:10px 16px; gap:14px; }
  .brand .wordmark{ font-size:16px; line-height:1.2; }
  .menu-toggle span{ width:22px; }
  .btn, .btn--filled, .vp-cta-btn, .sp-cta-btn, .ep-cta-btn, .jp-cta-btn{
    padding:14px 22px; font-size:12px; }
  /* hero */
  .hero{ min-height:88svh; }
  .hero__content{ padding-left:0; padding-right:0; }
  /* voyages */
  .voyages__grid{ gap:16px; padding:0 16px; }
  .voyage{ aspect-ratio: 3/3.2; }
  .voyage__num{ font-size:40px; top:18px; left:20px; }
  .voyage__info{ padding:0 20px 20px; }
  .voyage__go{ max-height:30px; opacity:1; transform:none; }  /* no hover on touch — always show */
  .voyages__lead{ padding:0 16px; }
  /* map */
  .nile-map__svg{ padding:0 8px; }
  .mcards{ grid-template-columns:repeat(2,1fr); gap:8px; padding:0 16px; }
  .mcard{ padding:12px 8px; }
  .mcard .mc-site{ min-height:0; }
  /* ports */
  .port-row{ grid-template-columns:44px 64px 1fr; gap:12px 14px; padding:18px 0; align-items:start; }
  .port-numeral{ font-size:30px; }
  .port-thumb{ width:64px; height:64px; }
  .port-row > div:nth-child(4){ grid-column:3; }
  .port-row .port-meta{ grid-column:3; display:flex; gap:8px; align-items:baseline; }
  /* footer */
  .site-footer__grid{ grid-template-columns:1fr; gap:26px; padding:0 20px; }
  .site-footer{ padding:40px 0 22px; }
  .footer-nav{ grid-template-columns:repeat(2,1fr); }
  /* generic containers */
  .container, .voyages__head, .nile-map__head{ padding-left:16px; padding-right:16px; }
}
@media (max-width: 520px){
  .mcards{ grid-template-columns:repeat(2,1fr); }
  .voyage{ aspect-ratio: 3/3.4; }
}

/* ----- HERO ----- */
.sp-hero {
  position: relative;
  background: var(--ink);
  color: var(--cream);
}
.sp-hero__bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(14,26,43,0.30) 0%, rgba(14,26,43,0.65) 100%),
    var(--simg-hero);
  background-size: cover;
  background-position: center;
  animation: hero-zoom 22s var(--ease-out) forwards;
}
.sp-hero__inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--s-7) var(--s-7);
  max-width: var(--max-wide); margin: 0 auto;
}
.sp-hero__chapter {
  font-family: 'Figtree', sans-serif; text-transform: uppercase; font-weight: 500;
  margin-bottom: var(--s-2);
  display: flex; align-items: center; gap: 12px;
}
.sp-hero__chapter::after {
  content: ''; flex: 0 0 64px; height: 1px; background: var(--gold);
}
.sp-hero__title {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1.0; color: var(--cream);
  max-width: 18ch;
  opacity: 0; transform: translateY(40px);
  animation: rise 1600ms var(--ease-out) 400ms forwards;
}
.sp-hero__sub {
  margin-top: var(--s-3);
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--cream); opacity: 0.9;
  max-width: 580px; line-height: 1.5;
  opacity: 0; transform: translateY(20px);
  animation: rise 1400ms var(--ease-out) 1200ms forwards;
}

/* ----- CONCEPT INTRODUCTION ----- */
.suite-intro {
  background: var(--cream);
  padding: var(--s-section) 0;
}
.suite-intro__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7); align-items: center;
  max-width: var(--max-wide); margin: 0 auto;
  padding: 0 var(--s-5);
}
.suite-intro__img {
  position: relative; aspect-ratio: 1 / 1;
  overflow: hidden; background: var(--ink);
}
.suite-intro__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0.04) 0%, rgba(139,111,63,0.16) 100%);
  pointer-events: none; z-index: 1; mix-blend-mode: multiply;
}
.suite-intro__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(8%) saturate(0.93) brightness(0.96) contrast(1.04);
}
.suite-intro__txt { padding: 0 var(--s-3); max-width: 560px; }
.suite-intro__title {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(36px, 4.4vw, 56px);
  color: var(--ink); line-height: 1.1;
  margin: var(--s-2) 0 var(--s-4);
}
.suite-intro__txt p {
  font-size: 17px; line-height: 1.85; color: var(--text-soft);
  margin-bottom: var(--s-3);
}
@media (max-width: 900px) {
  .suite-intro__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ----- WIND COMPASS ----- */
.winds {
  background: var(--ivory);
  padding: var(--s-section) var(--s-5);
  text-align: center;
}

/* ----- TEN CABINS GRID ----- */
.cabins {
  background: var(--cream);
  padding: var(--s-section) 0;
}
.cabins__head {
  text-align: center; max-width: 720px; margin: 0 auto var(--s-7);
  padding: 0 var(--s-5);
}
.cabins__head h2 { font-style: italic; margin-top: var(--s-2); }
.cabins__head p { color: var(--muted); margin-top: var(--s-3); }

.cabins__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--hairline);
  max-width: var(--max-content); margin: 0 auto;
  border: 1px solid var(--hairline);
}
.cabin {
  background: var(--ivory);
  padding: var(--s-5);
  display: grid; grid-template-columns: 60px 1fr 90px;
  gap: var(--s-3); align-items: start;
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.cabin:hover { background: var(--cream-warm); }
.cabin__num {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 300; color: var(--brass);
  font-size: 32px; line-height: 1;
}
.cabin__body { min-width: 0; }
.cabin__name {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 300; color: var(--ink);
  font-size: 26px; line-height: 1.2;
  margin-bottom: 4px;
}
.cabin__origin {
  font-family: 'Figtree', sans-serif;
  font-size: 12px; text-transform: uppercase;
  color: var(--brass); font-weight: 500;
  margin-bottom: var(--s-2);
}
.cabin__desc {
  font-size: 14px; line-height: 1.65; color: var(--text-soft);
}
@media (max-width: 760px) {
  .cabins__grid { grid-template-columns: 1fr; }
  .cabin { padding: var(--s-4); grid-template-columns: 48px 1fr 72px; gap: var(--s-2); }
  .cabin__name { font-size: 22px; }
}

/* ----- ROYAL SUITE FEATURE ----- */
.royal {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  padding: var(--s-section) 0;
  overflow: hidden;
}
.royal__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7); align-items: center;
  max-width: var(--max-wide); margin: 0 auto;
  padding: 0 var(--s-5);
}
.royal__img {
  position: relative; aspect-ratio: 7 / 4;
  overflow: hidden; background: var(--ink-soft);
}
.royal__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(201,169,110,0.12) 0%, rgba(14,26,43,0.20) 100%);
  pointer-events: none; z-index: 1; mix-blend-mode: multiply;
}
.royal__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(10%) saturate(0.85) brightness(0.9) contrast(1.05);
}
.royal__eyebrow {
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.royal__title {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  color: var(--cream); line-height: 1.05;
  margin: var(--s-2) 0 var(--s-4);
}
.royal__txt p {
  color: var(--cream); opacity: 0.85;
  font-size: 17px; line-height: 1.78;
  margin-bottom: var(--s-3);
}
.royal__txt p .accent { color: var(--gold); }
.royal__features {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(201,169,110,0.3);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
}
.royal__feature {
  font-family: 'Figtree', sans-serif;
  font-size: 13px; color: var(--cream);
  display: flex; align-items: baseline; gap: 8px;
}
.royal__feature::before {
  content: '—'; color: var(--gold); font-weight: 400;
}
@media (max-width: 900px) {
  .royal__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ----- INSIDE EVERY SUITE ----- */
.inside {
  background: var(--ivory);
  padding: var(--s-section) var(--s-5);
  text-align: center;
}
.inside__head { max-width: 720px; margin: 0 auto var(--s-7); }
.inside__head h2 { font-style: italic; margin-top: var(--s-2); }

.inside__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  max-width: var(--max-content); margin: 0 auto;
  text-align: left;
}
.inside-item {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--gold);
}
.inside-item__name {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 300; color: var(--ink);
  font-size: 22px; margin-bottom: var(--s-1);
}
.inside-item p {
  font-size: 14px; line-height: 1.7; color: var(--text-soft);
}
@media (max-width: 900px) { .inside__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .inside__grid { grid-template-columns: 1fr; } }

/* ----- CTA ----- */
.sp-cta {
  position: relative;
  padding: var(--s-section) var(--s-5);
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  background: var(--ink);
}
.sp-cta__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--simg-cta-bg);
  background-size: cover; background-position: center;
  opacity: 0.5;
  filter: contrast(1.05) saturate(0.75);
}
.sp-cta__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,26,43,0.85) 0%, rgba(14,26,43,0.65) 50%, rgba(14,26,43,0.92) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(201,169,110,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.sp-cta > *:not(.sp-cta__bg):not(.sp-cta__overlay) {
  position: relative; z-index: 2;
}
.sp-cta h2 {
  font-style: italic; color: var(--cream);
  font-size: var(--t-h1);
  max-width: 920px; margin: 0 auto;
  line-height: 1.18;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.sp-cta__sub {
  margin-top: var(--s-3);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 22px; color: var(--cream); opacity: 0.9;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.sp-cta .rule { background: var(--gold); margin: var(--s-5) auto; }
.sp-cta__btns {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center;
}
.sp-cta-btn {
  border: 1px solid var(--gold);
  color: var(--cream);
  font-family: 'Figtree', sans-serif;
  font-size: 12px; text-transform: uppercase;
  font-weight: 500;
  padding: 14px 28px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.sp-cta-btn:hover { background: var(--gold); color: var(--ink); }
.sp-cta-btn--filled { background: var(--gold); color: var(--ink); }
.sp-cta-btn--filled:hover { background: var(--gold-deep); }


/* ==========================================================================
   EXPERIENCE PAGE
   ========================================================================== */
/* ============================================================
   EXPERIENCE PAGE
   ============================================================ */

:root {
  --eimg-hero:    none;
  --eimg-cta-bg:  none;
}

/* ----- HERO ----- */
.ep-hero {
  position: relative;
  background: var(--ink);
  color: var(--cream);
}
.ep-hero__bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(14,26,43,0.30) 0%, rgba(14,26,43,0.65) 100%),
    var(--eimg-hero);
  background-size: cover; background-position: center;
  animation: hero-zoom 22s var(--ease-out) forwards;
}
.ep-hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--s-7) var(--s-7);
  max-width: var(--max-wide); margin: 0 auto;
}
.ep-hero__chapter {
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  margin-bottom: var(--s-2);
  display: flex; align-items: center; gap: 12px;
}
.ep-hero__chapter::after {
  content: ''; flex: 0 0 64px; height: 1px; background: var(--gold);
}
.ep-hero__title {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1.0; color: var(--cream);
  max-width: 18ch;
  opacity: 0; transform: translateY(40px);
  animation: rise 1600ms var(--ease-out) 400ms forwards;
}
.ep-hero__sub {
  margin-top: var(--s-3);
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--cream); opacity: 0.9;
  max-width: 580px; line-height: 1.5;
  opacity: 0; transform: translateY(20px);
  animation: rise 1400ms var(--ease-out) 1200ms forwards;
}

/* ----- INTRO MANIFESTO ----- */
.exp-intro {
  background: var(--cream);
  padding: var(--s-section) var(--s-5);
  text-align: center;
}
.exp-intro__inner { max-width: 820px; margin: 0 auto; }
.exp-intro__quote {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.3;
  color: var(--ink);
  position: relative;
  padding: var(--s-4) 0;
}
.exp-intro__quote::before, .exp-intro__quote::after {
  content: ''; display: block;
  width: 48px; height: 1px; background: var(--gold);
  margin: var(--s-3) auto;
}
.exp-intro__body {
  margin-top: var(--s-5);
  font-size: 17px; line-height: 1.85;
  color: var(--text-soft);
}
.exp-intro__body p { margin-bottom: var(--s-3); }
.exp-intro__body .accent { color: var(--brass); font-style: italic; }

/* ----- CHAPTER (themed sections) ----- */
.chapter {
  padding: var(--s-section) 0;
  position: relative;
}
.chapter--cream { background: var(--cream); }
.chapter--ivory { background: var(--ivory); }
.chapter--ink   { background: var(--ink); color: var(--cream); }

.chapter__inner {
  max-width: var(--max-wide); margin: 0 auto;
  padding: 0 var(--s-5);
}
.chapter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.chapter__grid--reverse { direction: rtl; }
.chapter__grid--reverse > * { direction: ltr; }

.chapter__img {
  position: relative; aspect-ratio: 4 / 5;
  overflow: hidden; background: var(--ink);
}
.chapter__img--landscape { aspect-ratio: 7 / 4; }
.chapter__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0.05) 0%, rgba(139,111,63,0.16) 100%);
  z-index: 1; pointer-events: none; mix-blend-mode: multiply;
}
.chapter__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
  filter: sepia(8%) saturate(0.93) brightness(0.96) contrast(1.04);
}
.chapter__img:hover img { transform: scale(1.04); }

.chapter__txt { padding: 0 var(--s-3); max-width: 580px; }
.chapter--ink .chapter__num { color: var(--gold); }
.chapter__theme {
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--brass); font-weight: 500;
  margin-bottom: var(--s-2);
}
.chapter--ink .chapter__theme { color: var(--gold); }
.chapter__title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(36px, 4.4vw, 56px);
  color: var(--ink); line-height: 1.1; font-weight: 300;
  margin-bottom: var(--s-4);
}
.chapter--ink .chapter__title { color: var(--cream); }
.chapter__txt p {
  font-size: 17px; line-height: 1.85; color: var(--text-soft);
  margin-bottom: var(--s-3);
}
.chapter--ink .chapter__txt p { color: var(--cream); opacity: 0.85; }
.chapter__txt p .accent { color: var(--brass); font-style: italic; }
.chapter--ink .chapter__txt p .accent { color: var(--gold); }

/* List of details/options inside a chapter */
.chapter__list {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
}
.chapter--ink .chapter__list { border-top-color: rgba(201,169,110,0.3); }
.chapter__item {
  font-family: 'Figtree', sans-serif;
  font-size: 13px; line-height: 1.6;
  color: var(--ink-soft);
  display: grid; grid-template-columns: 14px 1fr;
  gap: 8px; align-items: baseline;
}
.chapter--ink .chapter__item { color: var(--cream); }
.chapter__item::before {
  content: '—'; color: var(--gold); display: block;
  font-family: 'Figtree', sans-serif; font-weight: 400;
}

@media (max-width: 900px) {
  .chapter__grid, .chapter__grid--reverse {
    grid-template-columns: 1fr; gap: var(--s-5); direction: ltr;
  }
  .chapter__img { aspect-ratio: 5 / 4; }
  .chapter__list { grid-template-columns: 1fr; }
}

/* ----- SAMPLE MENU CARD (inside Dining chapter) ----- */
.menu-card {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--ivory);
  border: 1px solid var(--hairline);
}
.menu-card__title {
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--brass); font-weight: 500;
  text-align: center;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--gold);
}
.menu-card__course {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 15px; color: var(--ink); line-height: 1.5;
  text-align: center; padding: 6px 0;
}
.menu-card__sep {
  text-align: center; color: var(--brass);
  font-style: italic; font-size: 12px;
  padding: 4px 0;
  font-family: 'Fraunces', serif;
}

/* ----- BESPOKE GRID ----- */
.bespoke {
  background: var(--cream);
  padding: var(--s-section) var(--s-5);
}
.bespoke__head {
  text-align: center; max-width: 720px; margin: 0 auto var(--s-7);
}
.bespoke__head h2 { font-style: italic; margin-top: var(--s-2); }
.bespoke__head p { color: var(--muted); margin-top: var(--s-3); }

.bespoke__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hairline);
  max-width: var(--max-content); margin: 0 auto;
  border: 1px solid var(--hairline);
}
.bespoke-item {
  background: var(--ivory);
  padding: var(--s-5);
  text-align: left;
  display: flex; flex-direction: column;
  gap: var(--s-2);
  transition: background var(--t-base) var(--ease);
}
.bespoke-item:hover { background: var(--cream-warm); }
.bespoke-item__num {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--gold); font-size: 28px; line-height: 1;
  font-weight: 300;
}
.bespoke-item__name {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 24px; color: var(--ink); line-height: 1.2;
  font-weight: 300;
}
.bespoke-item__price {
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--brass); font-weight: 500;
}
.bespoke-item p {
  font-size: 14px; line-height: 1.65; color: var(--text-soft);
  margin-top: var(--s-1);
}
@media (max-width: 900px) { .bespoke__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bespoke__grid { grid-template-columns: 1fr; } }

/* ----- CTA ----- */
.ep-cta {
  position: relative;
  padding: var(--s-section) var(--s-5);
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  background: var(--ink);
}
.ep-cta__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--eimg-cta-bg);
  background-size: cover; background-position: center;
  opacity: 0.5; filter: contrast(1.05) saturate(0.75);
}
.ep-cta__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,26,43,0.85) 0%, rgba(14,26,43,0.65) 50%, rgba(14,26,43,0.92) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(201,169,110,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.ep-cta > *:not(.ep-cta__bg):not(.ep-cta__overlay) {
  position: relative; z-index: 2;
}
.ep-cta h2 {
  font-style: italic; color: var(--cream);
  font-size: var(--t-h1);
  max-width: 920px; margin: 0 auto;
  line-height: 1.18;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.ep-cta__sub {
  margin-top: var(--s-3);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 22px; color: var(--cream); opacity: 0.9;
  max-width: 620px; margin-left: auto; margin-right: auto;
}
.ep-cta .rule { background: var(--gold); margin: var(--s-5) auto; }
.ep-cta__btns {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center;
}
.ep-cta-btn {
  border: 1px solid var(--gold);
  color: var(--cream);
  font-family: 'Figtree', sans-serif;
  font-size: 12px; text-transform: uppercase;
  font-weight: 500;
  padding: 14px 28px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.ep-cta-btn:hover { background: var(--gold); color: var(--ink); }
.ep-cta-btn--filled { background: var(--gold); color: var(--ink); }
.ep-cta-btn--filled:hover { background: var(--gold-deep); }


/* ==========================================================================
   JOURNEYS PAGE
   ========================================================================== */
/* ============================================================
   JOURNEYS PAGE - page-specific styles
   ============================================================ */

:root {
  --jimg-hero:    none;
  --jimg-cta-bg:  none;
}

/* ----- HERO ----- */
.jp-hero {
  position: relative;
  background: var(--ink);
  color: var(--cream);
}
.jp-hero__bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(14,26,43,0.30) 0%, rgba(14,26,43,0.65) 100%),
    var(--jimg-hero);
  background-size: cover; background-position: center;
  animation: hero-zoom 22s var(--ease-out) forwards;
}
.jp-hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--s-7) var(--s-7);
  max-width: var(--max-wide); margin: 0 auto;
}
.jp-hero__chapter {
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  margin-bottom: var(--s-2);
  display: flex; align-items: center; gap: 12px;
}
.jp-hero__chapter::after {
  content: ''; flex: 0 0 64px; height: 1px; background: var(--gold);
}
.jp-hero__title {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1.0; color: var(--cream);
  max-width: 16ch;
  opacity: 0; transform: translateY(40px);
  animation: rise 1600ms var(--ease-out) 400ms forwards;
}
.jp-hero__sub {
  margin-top: var(--s-3);
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--cream); opacity: 0.9;
  max-width: 580px; line-height: 1.5;
  opacity: 0; transform: translateY(20px);
  animation: rise 1400ms var(--ease-out) 1200ms forwards;
}

/* ----- COMPARISON TABLE ----- */
.compare {
  background: var(--cream);
  padding: var(--s-section) 0;
}
.compare__head {
  text-align: center; max-width: 720px; margin: 0 auto var(--s-7);
  padding: 0 var(--s-5);
}
.compare__head h2 { font-style: italic; margin-top: var(--s-2); }
.compare__head p { color: var(--muted-legible); margin-top: var(--s-3); }

.compare__grid {
  /* The mockup drew four voyages and this was repeat(4, 1fr). There are
     five now, and auto-fit means the row simply holds as many as fit
     rather than stranding the last one beside three empty cells. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0; background: var(--ivory);
  max-width: var(--max-content); margin: 0 auto;
  border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
}
.compare__col {
  background: var(--ivory);
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: var(--s-5) var(--s-2);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--s-2);
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.compare__col:hover { background: var(--cream-warm); }
.compare__num {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--brass); font-size: 32px; font-weight: 300; line-height: 1;
}
.compare__days {
  font-family: 'Fraunces', serif;
  font-size: 26px; color: var(--ink); line-height: 1.1;
  font-weight: 300;
}
.compare__title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 18px; color: var(--ink-soft); line-height: 1.3;
  margin: 8px 0;
}
.compare__route {
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--brass); font-weight: 500;
  margin-top: 6px;
}
.compare__price {
  margin-top: auto; padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.compare__price strong {
  display: block; margin-top: 4px;
  font-family: 'Fraunces', serif;
  font-style: italic; font-size: 22px;
  color: var(--ink); font-weight: 400;
}
/* auto-fit covers narrow screens; an explicit column count here would
   override it and put us back where we started. Only the very narrowest
   needs forcing, where 210px no longer fits beside a gutter. */
@media (max-width: 480px) { .compare__grid { grid-template-columns: 1fr; } }

/* ----- VOYAGE DETAIL ----- */
.voyage-detail {
  padding: var(--s-section) 0;
}
.voyage-detail--cream { background: var(--cream); }
.voyage-detail__inner {
  max-width: var(--max-wide); margin: 0 auto;
  padding: 0 var(--s-5);
}
.voyage-detail__head {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-5); align-items: end;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.voyage-detail__title-block .vd-roman {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--gold); font-size: 36px; line-height: 1; font-weight: 300;
  margin-bottom: 8px;
}
.voyage-detail__title-block h2 {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(36px, 4.4vw, 56px);
  color: var(--ink); line-height: 1.05; font-weight: 300;
}
.voyage-detail__title-block .vd-route {
  margin-top: var(--s-2);
  font-family: 'Figtree', sans-serif;
  font-size: 12px; text-transform: uppercase;
  /* brass is 4.06:1 on cream at this size; the legible variant is 5.02:1 */
  color: var(--brass-legible); font-weight: 500;
}

.voyage-detail__intro {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--ink-soft); line-height: 1.5;
  margin-bottom: var(--s-5);
  max-width: 820px;
  font-weight: 300;
}

/* Day-by-day itinerary */
.itinerary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5) var(--s-7);
  margin-bottom: var(--s-5);
}
.day-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.day-row:last-child { border-bottom: 0; }
.day-row__num {
  font-family: 'Fraunces', serif; font-style: italic;
  /* gold reads 1.92:1 on cream — below even the large-text floor, and
     this numeral is what tells you which day you are on. */
  color: var(--brass-legible); font-size: 28px; line-height: 1;
  font-weight: 300;
}
.day-row__body { min-width: 0; }
.day-row__day {
  font-family: 'Figtree', sans-serif; text-transform: uppercase;
  color: var(--brass-legible); font-weight: 500;
  margin-bottom: 2px;
}
.day-row__title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 22px; color: var(--ink); line-height: 1.25;
  margin-bottom: 4px; font-weight: 400;
}
.day-row p {
  font-size: 14px; line-height: 1.65; color: var(--text-soft);
}
@media (max-width: 760px) {
  .itinerary { grid-template-columns: 1fr; gap: var(--s-3); }
  .voyage-detail__head { grid-template-columns: 1fr; }
}

/* Voyage CTA bar */
.vd-cta {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--cream-warm);
  border: 1px solid var(--gold);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--s-3);
}
.vd-cta__from {
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--brass-legible); font-weight: 500;
}
.vd-cta__price {
  font-family: 'Fraunces', serif;
  font-size: 28px; color: var(--ink);
  font-feature-settings: "tnum"; font-weight: 400;
}
.vd-cta__price-note {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-size: 11px; color: var(--muted-legible);
  font-weight: 300; margin-top: 2px;
  text-transform: none;
}
.vd-cta__btn {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  font-family: 'Figtree', sans-serif;
  font-size: 12px; text-transform: uppercase;
  font-weight: 500;
  padding: 14px 28px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-base) var(--ease);
}
.vd-cta__btn:hover { background: var(--gold-deep); }

/* ----- INCLUSIONS SECTION ----- */
.inclusions {
  background: var(--ivory);
  padding: var(--s-section) var(--s-5);
}
.inclusions__head {
  text-align: center; max-width: 720px; margin: 0 auto var(--s-7);
}
.inclusions__head h2 { font-style: italic; margin-top: var(--s-2); }

.inclusions__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: var(--max-content); margin: 0 auto;
  border: 1px solid var(--hairline);
  background: var(--hairline);
}
.inclusions__col {
  background: var(--cream);
  padding: var(--s-5);
}
.inclusions__col h3 {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 26px; color: var(--ink);
  margin-bottom: var(--s-3); font-weight: 300;
}
.inclusions__list {
  display: flex; flex-direction: column; gap: 0;
}
.incl-item {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 16px; align-items: center;
  font-size: 14px; color: var(--text-soft); line-height: 1.55;
  padding: 13px 0;
  border-bottom: 1px solid rgba(139,111,63,.10);
  transition: color .35s ease, transform .35s ease;
}
.incl-item:last-child { border-bottom: none; }
.incl-item:hover {
  color: var(--ink);
  transform: translateX(3px);
}
.incl-item:hover .incl-ico { color: var(--ink); }
.incl-ico {
  width: 28px; height: 28px;
  color: var(--gold);
  display: block;
  transition: color .35s ease;
}
.incl-ico svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}
.incl-ico svg * {
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 760px) { .inclusions__grid { grid-template-columns: 1fr; } }

/* ----- SAILING SEASON ----- */
.season {
  background: var(--cream);
  padding: var(--s-section) var(--s-5);
  text-align: center;
}
.season__head { max-width: 720px; margin: 0 auto var(--s-7); }
.season__head h2 { font-style: italic; margin-top: var(--s-2); }
.season__head p { color: var(--muted); margin-top: var(--s-3); }

.season-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 0;
  max-width: var(--max-content); margin: 0 auto;
  border: 1px solid var(--hairline);
}
.season-month {
  background: var(--ivory);
  padding: var(--s-4) var(--s-2);
  text-align: center;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 6px;
}
.season-month:last-child { border-right: 0; }
.season-month__name {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 22px; color: var(--ink); line-height: 1; font-weight: 300;
}
.season-month__sub {
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--brass); font-weight: 500;
}
.season-month__weather {
  margin-top: var(--s-2);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 14px; color: var(--text-soft); line-height: 1.4;
}
@media (max-width: 900px) { .season-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .season-grid { grid-template-columns: repeat(2, 1fr); } }

/* ----- CTA ----- */
.jp-cta {
  position: relative;
  padding: var(--s-section) var(--s-5);
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  background: var(--ink);
}
.jp-cta__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--jimg-cta-bg);
  background-size: cover; background-position: center;
  opacity: 0.5; filter: contrast(1.05) saturate(0.75);
}
.jp-cta__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,26,43,0.85) 0%, rgba(14,26,43,0.65) 50%, rgba(14,26,43,0.92) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(201,169,110,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.jp-cta > *:not(.jp-cta__bg):not(.jp-cta__overlay) {
  position: relative; z-index: 2;
}
.jp-cta h2 {
  font-style: italic; color: var(--cream);
  font-size: var(--t-h1);
  max-width: 920px; margin: 0 auto;
  line-height: 1.18;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.jp-cta__sub {
  margin-top: var(--s-3);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 22px; color: var(--cream); opacity: 0.9;
  max-width: 620px; margin-left: auto; margin-right: auto;
}
.jp-cta .rule { background: var(--gold); margin: var(--s-5) auto; }
.jp-cta__btns {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center;
}
.jp-cta-btn {
  border: 1px solid var(--gold);
  color: var(--cream);
  font-family: 'Figtree', sans-serif;
  font-size: 12px; text-transform: uppercase;
  font-weight: 500;
  padding: 14px 28px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.jp-cta-btn:hover { background: var(--gold); color: var(--ink); }
.jp-cta-btn--filled { background: var(--gold); color: var(--ink); }
.jp-cta-btn--filled:hover { background: var(--gold-deep); }


/* ==========================================================================
   THE VESSEL PAGE
   ========================================================================== */
/* ============================================================
   THE VESSEL PAGE — page-specific styles
   ============================================================ */

:root {
  --vimg-hero:     none;
  --vimg-cta-bg:   none;
}

/* ----- VESSEL HERO ----- */
.vp-hero {
  position: relative;
  background: var(--ink);
  color: var(--cream);
}
.vp-hero__bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(14,26,43,0.30) 0%, rgba(14,26,43,0.65) 100%),
    var(--vimg-hero);
  background-size: cover;
  background-position: center;
  animation: hero-zoom 22s var(--ease-out) forwards;
}
.vp-hero__inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--s-7) var(--s-7);
  max-width: var(--max-wide); margin: 0 auto;
}
.vp-hero__chapter {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: var(--s-2);
  display: flex; align-items: center; gap: 12px;
}
.vp-hero__chapter::after {
  content: ''; flex: 0 0 64px; height: 1px; background: var(--gold);
}
.vp-hero__title {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1.0; color: var(--cream);
  max-width: 16ch;
  opacity: 0; transform: translateY(40px);
  animation: rise 1600ms var(--ease-out) 400ms forwards;
}
.vp-hero__sub {
  margin-top: var(--s-3);
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--cream); opacity: 0.9;
  max-width: 580px; line-height: 1.5;
  opacity: 0; transform: translateY(20px);
  animation: rise 1400ms var(--ease-out) 1200ms forwards;
}

@media (max-width: 900px) {
  .vp-hero__inner { padding: 0 var(--s-5) var(--s-6); }
}

/* ----- HERITAGE SECTION ----- */
.heritage {
  background: var(--cream);
  padding: var(--s-section) 0;
}
.heritage__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7); align-items: center;
  max-width: var(--max-wide); margin: 0 auto;
  padding: 0 var(--s-5);
}
.heritage__txt { padding-right: var(--s-5); max-width: 560px; }
.heritage__title {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(36px, 4.4vw, 56px);
  color: var(--ink); line-height: 1.1;
  margin: var(--s-2) 0 var(--s-4);
}
.heritage__txt p {
  font-size: 17px; line-height: 1.85; color: var(--text-soft);
  margin-bottom: var(--s-3);
}
.heritage__quote {
  margin-top: var(--s-5);
  padding: var(--s-4) 0 var(--s-4) var(--s-4);
  border-left: 1px solid var(--gold);
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: 22px; line-height: 1.5;
  color: var(--ink-soft);
}
.heritage__quote-attr {
  display: block; margin-top: var(--s-2);
  font-family: 'Figtree', sans-serif;
  font-size: 11px; text-transform: uppercase;
  color: var(--brass); font-weight: 500;
  font-style: normal;
}
.heritage__img {
  position: relative; aspect-ratio: 4 / 5;
  overflow: hidden; background: var(--ink);
}
.heritage__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0.04) 0%, rgba(139,111,63,0.16) 100%);
  pointer-events: none; z-index: 1;
  mix-blend-mode: multiply;
}
.heritage__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(8%) saturate(0.93) brightness(0.96) contrast(1.04);
}
@media (max-width: 900px) {
  .heritage__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .heritage__txt { padding-right: 0; }
}

/* ----- SPECIFICATIONS / DIMENSIONS ----- */
.dimensions {
  background: var(--ivory);
  padding: var(--s-section) 0;
  text-align: center;
}
.dimensions__head {
  max-width: 720px; margin: 0 auto var(--s-7);
  padding: 0 var(--s-5);
}
.dimensions__head h2 {
  font-style: italic; margin-top: var(--s-2);
}
.dimensions__head p { color: var(--muted); margin-top: var(--s-3); }

.dim-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  max-width: var(--max-content);
  margin: 0 auto;
  border: 1px solid var(--hairline);
}
.dim {
  background: var(--ivory);
  padding: var(--s-5) var(--s-3);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-1);
}
.dim__num {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--ink); line-height: 1;
  font-feature-settings: "tnum";
}
.dim__num .dim__unit {
  font-size: 0.4em; color: var(--brass);
  margin-left: 4px; vertical-align: middle;
  font-style: italic;
}
.dim__label {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
  margin-top: 4px;
}
@media (max-width: 760px) { .dim-grid { grid-template-columns: repeat(2, 1fr); } }

/* ----- DECK PLAN SVG ----- */
.deck-plan {
  background: var(--cream);
  padding: var(--s-section) 0;
  text-align: center;
}
.deck-plan__head { margin-bottom: var(--s-7); padding: 0 var(--s-5); }
.deck-plan__head h2 { font-style: italic; margin-top: var(--s-2); }
.deck-plan__svg {
  max-width: 1100px; margin: 0 auto;
  padding: 0 var(--s-5);
}
.deck-plan__svg svg { width: 100%; height: auto; }

/* ---------- The real drawings ----------
   The plans are drawn on black, so the band goes dark around them and
   the sheets read as one piece rather than as three photographs pasted
   onto cream. */
.deck-plan:has(.deck-plan__sheets) { background: var(--ink); }
.deck-plan:has(.deck-plan__sheets) .deck-plan__head h2 { color: var(--cream); }
.deck-plan:has(.deck-plan__sheets) .deck-plan__head .eyebrow { color: var(--gold); }
.deck-plan__sheets {
  /* The drawings are 2285px wide at source, so the band can run to the
     site's full width without softening them -- 1344px on a 1440
     screen, where 1100px was leaving a third of the detail too small
     to read. */
  max-width: var(--max-wide); margin: 0 auto;
  padding: 0 var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-6);
}
.deck-sheet { margin: 0; }
.deck-sheet__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: 12px;
  font-family: 'Figtree', sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.deck-sheet__name { color: var(--gold); }
.deck-sheet__note { color: rgba(244,237,224,.6); text-align: right; }
.deck-sheet img {
  width: 100%; height: auto; display: block;
  /* The drawings carry their own black field; a hairline separates it
     from the band without boxing the hull in. */
  border-top: 1px solid rgba(201,169,110,.28);
  border-bottom: 1px solid rgba(201,169,110,.28);
}
.deck-sheet__ends {
  display: flex; justify-content: space-between;
  font-family: 'Fraunces', serif; font-style: italic;
  /* Brass is the cream-background gold; on ink it reads 2.98:1. */
  font-size: 15px; color: var(--gold);
  margin-top: 4px;
}
/* A deck is five times as wide as it is tall, so on a phone the whole
   drawing shrinks to a 62px ribbon with nothing legible in it. It keeps
   960px and is panned instead, up to the width where 960px fits in the
   band on its own -- 960 plus the two 48px gutters. Switching at 900
   left a dead spot just above it where the drawing was shrunk to 790px
   and could not be panned either. */
@media (max-width: 1055px) {
  .deck-sheet__frame {
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--brass) transparent;
  }
  .deck-sheet__frame img { min-width: 960px; }
  .deck-sheet__pan {
    display: block; margin-top: 8px;
    font-family: 'Figtree', sans-serif; font-size: 11.5px;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(244,237,224,.55);
  }
}
@media (min-width: 1056px) { .deck-sheet__pan { display: none; } }
@media (max-width: 760px) {
  .deck-plan__sheets { gap: var(--s-5); padding: 0 16px; }
  .deck-sheet__head { font-size: 10.5px; letter-spacing: .12em; }
}
.deck-label {
  font-family: 'Figtree', sans-serif; font-weight: 500;
  font-size: 12px; fill: var(--brass);
  text-transform: uppercase;
}
.deck-room {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 14px; fill: var(--ink-soft);
}
.deck-outline { fill: var(--ivory); stroke: var(--brass); stroke-width: 1; }
.deck-divider { stroke: var(--hairline); stroke-width: 0.5; }

/* ----- WALK ABOARD ----- */
.walk { background: var(--ivory); padding: var(--s-section) 0 var(--s-section-md); }
.walk__head {
  text-align: center; margin-bottom: var(--s-7);
  padding: 0 var(--s-5);
}
.walk__head h2 { font-style: italic; margin-top: var(--s-2); }

.walk-step {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7); align-items: center;
  max-width: var(--max-wide); margin: 0 auto var(--s-7);
  padding: 0 var(--s-5);
}
.walk-step:last-child { margin-bottom: 0; }
.walk-step--reverse { direction: rtl; }
.walk-step--reverse > * { direction: ltr; }

.walk-step__img {
  position: relative; aspect-ratio: 5 / 3;
  overflow: hidden; background: var(--ink);
}
.walk-step__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0.05) 0%, rgba(139,111,63,0.16) 100%);
  z-index: 1; pointer-events: none;
  mix-blend-mode: multiply;
}
.walk-step__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
  filter: sepia(7%) saturate(0.94) brightness(0.96) contrast(1.04);
}
.walk-step:hover .walk-step__img img { transform: scale(1.03); }

.walk-step__num {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 300; color: var(--brass);
  font-size: clamp(48px, 5vw, 68px);
  line-height: 1; margin-bottom: var(--s-2);
}
.walk-step__name {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(30px, 3.4vw, 44px);
  color: var(--ink); line-height: 1.15;
  margin-bottom: var(--s-3); font-weight: 300;
}
.walk-step p {
  max-width: 460px; line-height: 1.78;
  color: var(--text-soft);
}

@media (max-width: 900px) {
  .walk-step, .walk-step--reverse { grid-template-columns: 1fr; gap: var(--s-4); direction: ltr; }
}

/* ----- MATERIALS ----- */
.materials {
  background: var(--cream);
  padding: var(--s-section) var(--s-5);
  text-align: center;
}
.materials__head { max-width: 720px; margin: 0 auto var(--s-7); }
.materials__head h2 { font-style: italic; margin-top: var(--s-2); }

.mat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  max-width: var(--max-content); margin: 0 auto;
  text-align: left;
}
.mat {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--gold);
}
.mat__name {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 26px; color: var(--ink); line-height: 1.2;
  margin-bottom: var(--s-2); font-weight: 300;
}
.mat__origin {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
  margin-bottom: var(--s-2);
}
.mat p { font-size: 14px; line-height: 1.7; color: var(--text-soft); }
@media (max-width: 900px) { .mat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mat-grid { grid-template-columns: 1fr; } }

/* ----- THE CREW ----- */
.crew {
  background: var(--ivory);
  padding: var(--s-section) var(--s-5);
  text-align: center;
}
.crew__head { max-width: 720px; margin: 0 auto var(--s-7); }
.crew__head h2 { font-style: italic; margin-top: var(--s-2); }
.crew-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  max-width: var(--max-content); margin: 0 auto;
}
.crew-card {
  padding: var(--s-5) var(--s-4);
  background: var(--cream);
  border: 1px solid var(--hairline);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.crew-card__avatar {
  width: 64px; height: 64px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 28px; color: var(--brass);
  margin-bottom: var(--s-2);
}
.crew-card__name {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 24px; color: var(--ink); font-weight: 300;
}
.crew-card__role {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
}
.crew-card p {
  margin-top: var(--s-2);
  font-size: 14px; line-height: 1.7;
  color: var(--text-soft); max-width: 260px;
}
.crew-card__quote {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 16px; color: var(--ink-soft);
  line-height: 1.5;
}
@media (max-width: 900px) { .crew-grid { grid-template-columns: 1fr; } }

/* ----- VESSEL CTA ----- */
.vp-cta {
  position: relative;
  padding: var(--s-section) var(--s-5);
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  background: var(--ink);
}
.vp-cta__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--vimg-cta-bg);
  background-size: cover; background-position: center;
  opacity: 0.5;
  filter: contrast(1.05) saturate(0.75);
}
.vp-cta__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,26,43,0.85) 0%, rgba(14,26,43,0.65) 50%, rgba(14,26,43,0.92) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(201,169,110,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.vp-cta > *:not(.vp-cta__bg):not(.vp-cta__overlay) {
  position: relative; z-index: 2;
}
.vp-cta h2 {
  font-style: italic; color: var(--cream);
  font-size: var(--t-h1);
  max-width: 920px; margin: 0 auto;
  line-height: 1.18;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.vp-cta__sub {
  margin-top: var(--s-3);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 22px; color: var(--cream); opacity: 0.9;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.vp-cta .rule { background: var(--gold); margin: var(--s-5) auto; }
.vp-cta__btns {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center;
}
.vp-cta-btn {
  border: 1px solid var(--gold);
  color: var(--cream);
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 28px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.vp-cta-btn:hover { background: var(--gold); color: var(--ink); }
.vp-cta-btn--filled { background: var(--gold); color: var(--ink); }
.vp-cta-btn--filled:hover { background: var(--gold-deep); }


/* ==========================================================================
   SINGLE SUITE
   ========================================================================== */
/* ===== single suite ===== */
.ss-hero{background:var(--img-hero) center/cover no-repeat;position:relative;padding:calc(var(--header-h) + var(--s-7)) var(--s-5) var(--s-7);text-align:center}
.ss-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.6),rgba(14,26,43,.82))}
.ss-hero__inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.ss-crumb{display:flex;gap:10px;justify-content:center;font-family:'Figtree',sans-serif;font-size:12.5px;color:#CBBEA6;margin-bottom:var(--s-3)}
.ss-crumb a{color:#E3D9C4}.ss-crumb a:hover{color:var(--gold)}.ss-crumb em{color:var(--gold);font-style:normal}
.ss-hero .eyebrow{color:var(--gold)}
.ss-hero h1{font-family:'Fraunces',serif;font-weight:300;font-style:italic;font-size:var(--t-hero);color:var(--cream);line-height:1;margin-top:var(--s-2)}
.ss-hero__wind{margin-top:var(--s-2);font-family:'Marcellus',serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#E3D9C4}
.ss-facts{background:var(--ink);padding:0 var(--s-5)}
.ss-facts__row{max-width:var(--max-content);margin:0 auto;display:grid}
.ss-fact{padding:var(--s-4) var(--s-3);text-align:center;border-left:1px solid rgba(201,169,110,.2)}
.ss-fact:first-child{border-left:none}
.ss-fact b{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:20px;color:var(--gold);display:block}
.ss-fact span{font-family:'Marcellus',serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9C947E;margin-top:4px;display:block}
.ss-story{background:var(--cream);padding:var(--s-7) var(--s-5)}
.ss-story__inner{max-width:820px;margin:0 auto;text-align:center}
.ss-story__lead{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(19px,2.1vw,25px);line-height:1.6;color:var(--ink-soft)}
.ss-gallery{background:var(--cream);padding:0 var(--s-5) var(--s-7)}
.ss-gallery__grid{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:var(--s-3);height:600px}
.ss-gallery figure{position:relative;overflow:hidden;border:1px solid var(--hairline)}
.ss-gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ss-gallery figure:hover img{transform:scale(1.05)}
.ss-gallery figcaption{position:absolute;left:16px;bottom:12px;z-index:2;font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.ss-gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,26,43,.42),transparent 40%)}
.ss-amen{background:var(--ivory);border-block:1px solid var(--hairline);padding:var(--s-7) var(--s-5)}
.ss-amen__head{text-align:center;margin-bottom:var(--s-6)}
.ss-amen__head h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:var(--t-h2);color:var(--ink);margin-top:var(--s-2)}
.ss-amen__grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-6)}
.ss-amen__grid li{list-style:none;padding:14px 0 14px 26px;border-bottom:1px solid var(--hairline);position:relative;
  font-family:'Figtree',sans-serif;font-weight:300;font-size:15px;color:var(--text-soft)}
.ss-amen__grid li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:11px;top:18px}
.ss-amen__grid li.royal{color:var(--ink)}
.ss-amen__grid li.royal::before{content:"♛";font-size:12px}
.ss-nav{background:var(--cream);padding:0 var(--s-5);border-bottom:1px solid var(--hairline)}
.ss-nav__row{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.ss-nav__lnk{display:flex;flex-direction:column;gap:4px;padding:var(--s-4) var(--s-3);transition:background .25s}
.ss-nav__lnk:hover{background:rgba(201,169,110,.08)}
.ss-nav__lnk span{font-family:'Marcellus',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ss-nav__lnk b{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:19px;color:var(--ink)}
.ss-nav__lnk:hover b{color:var(--brass)}
.ss-nav__all{align-self:center;font-family:'Marcellus',serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);border:1px solid var(--hairline);padding:12px 22px;transition:.3s}
.ss-nav__all:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.ss-cta{background:var(--img-reserve-bg) center/cover no-repeat;position:relative;padding:var(--s-7) var(--s-5);text-align:center}
.ss-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.72),rgba(14,26,43,.84))}
.ss-cta__inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
.ss-cta .eyebrow{color:var(--gold)}
.ss-cta h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:var(--t-h2);color:var(--cream);margin-top:var(--s-2)}
.ss-cta .btn{border:1px solid rgba(201,169,110,.6);color:var(--cream)}
.ss-cta .btn:hover{background:rgba(201,169,110,.15)}
@media(max-width:900px){
  .ss-facts__row{grid-template-columns:1fr}
  .ss-fact{border-left:none;border-top:1px solid rgba(201,169,110,.2)}.ss-fact:first-child{border-top:none}
  .ss-gallery__grid{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .ss-gallery .a{grid-row:auto}.ss-gallery figure{height:220px}.ss-gallery .a{height:300px}
  .ss-amen__grid{grid-template-columns:1fr}
  .ss-nav__row{grid-template-columns:1fr}
  .ss-nav__all{margin:var(--s-2) var(--s-3) var(--s-3);align-self:flex-start}
}

/* ===== fix: amenity royal collision + cta form ===== */
.ss-amen__grid li{background:transparent !important;color:var(--text-soft)}
.ss-amen__grid li.rl{color:var(--ink);font-weight:400}
.ss-amen__grid li.rl::before{content:"♛";font-size:12px;color:var(--brass)}
.ss-form{max-width:560px;margin:var(--s-4) auto 0;text-align:left}
.ss-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.ss-form input,.ss-form select{font-family:'Figtree',sans-serif;font-weight:300;font-size:15px;color:var(--ink);
  background:var(--cream);border:1px solid rgba(201,169,110,.5);padding:14px;outline:none;width:100%;
  border-radius:0;-webkit-appearance:none;transition:border-color .25s}
.ss-form input:focus,.ss-form select:focus{border-color:var(--gold)}
.ss-form__send{width:100%;border:none;cursor:pointer;justify-content:center;display:inline-flex}
.ss-form__note{margin-top:12px;font-family:'Figtree',sans-serif;font-size:12px;text-align:center;line-height:1.6}
.ss-cta__alt{display:flex;gap:26px;justify-content:center;margin-top:var(--s-3);flex-wrap:wrap}
.ss-cta__alt a{font-family:'Marcellus',serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#E3D9C4;border-bottom:1px solid rgba(201,169,110,.5);padding-bottom:3px;transition:color .2s}
.ss-cta__alt a:hover{color:var(--gold)}
@media(max-width:640px){.ss-form__row{grid-template-columns:1fr}}


/* ==========================================================================
   DESTINATIONS HUB
   ========================================================================== */
/* ===== destinations hub ===== */
.dh-hero{background:var(--img-hero) center/cover no-repeat;position:relative;text-align:center}
.dh-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.6),rgba(14,26,43,.78))}
.dh-hero__inner{position:relative;z-index:2;max-width:780px;margin:0 auto}
.dh-hero h1{font-family:'Fraunces',serif;font-weight:300;color:var(--cream);margin-top:var(--s-2);line-height:1.1}
.dh-hero h1 em{font-style:italic;color:var(--gold)}
.dh-hero__sub{margin:var(--s-3) auto 0;max-width:600px;color:#E3D9C4;font-family:'Figtree',sans-serif;font-weight:300;font-size:16.5px;line-height:1.7}
.dh-grid-sec{background:var(--cream);padding:var(--s-7) var(--s-5)}
.dh-grid{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.dst{background:#fff;border:1px solid var(--hairline);display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.dst:hover{transform:translateY(-8px);box-shadow:0 34px 60px -26px rgba(14,26,43,.3)}
.dst__media{aspect-ratio:4/3;overflow:hidden}
.dst__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.dst:hover .dst__media img{transform:scale(1.07)}
.dst__body{padding:var(--s-3) var(--s-3) var(--s-4);display:flex;flex-direction:column;flex:1}
.dst__top{display:flex;justify-content:space-between;align-items:baseline}
.dst__num{font-family:'Fraunces',serif;font-style:italic;font-size:24px}
.dst__meta{font-family:'Marcellus',serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.dst__name{font-family:'Fraunces',serif;font-weight:300;font-style:italic;font-size:26px;color:var(--ink);margin-top:6px}
.dst__site{font-family:'Marcellus',serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-top:6px}
.dst__poem{font-family:'Figtree',sans-serif;font-weight:300;font-size:14px;color:var(--text-soft);line-height:1.65;margin-top:10px;flex:1}
.dst__go{display:inline-flex;gap:8px;margin-top:var(--s-3);font-family:'Marcellus',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);transition:.3s}
.dst:hover .dst__go{color:var(--brass);gap:12px}
.dh-band{background:var(--ink) var(--img-reserve-bg) center/cover no-repeat;position:relative;padding:var(--s-7) var(--s-5);text-align:center}
.dh-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.72),rgba(14,26,43,.82))}
.dh-band__inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.dh-band h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:var(--t-h2);color:var(--cream);margin-top:var(--s-2)}
.dh-band p{margin:var(--s-3) auto 0;max-width:520px;color:#E3D9C4;font-family:'Figtree',sans-serif;font-weight:300;font-size:16px;line-height:1.7}
.dh-band__cta{display:flex;gap:var(--s-2);justify-content:center;margin-top:var(--s-4);flex-wrap:wrap}
.dh-band .btn{border:1px solid rgba(201,169,110,.6);color:var(--cream)}
.dh-band .btn:hover{background:rgba(201,169,110,.15)}
@media(max-width:1000px){.dh-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.dh-grid{grid-template-columns:1fr}}


/* ==========================================================================
   DESTINATION DETAIL
   ========================================================================== */
/* ===== destination detail ===== */
.dp-hero{background:var(--img-hero) center/cover no-repeat;position:relative;text-align:center;min-height:min(52vh,460px);display:flex;align-items:center;justify-content:center}
.dp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.6),rgba(14,26,43,.8))}
.dp-hero__inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.dp-crumb{display:flex;gap:10px;justify-content:center;font-family:'Figtree',sans-serif;font-size:12.5px;color:#CBBEA6;margin-bottom:var(--s-3)}
.dp-crumb a{color:#E3D9C4}.dp-crumb a:hover{color:var(--gold)}.dp-crumb em{color:var(--gold);font-style:normal}
.dp-hero h1{font-family:'Fraunces',serif;font-weight:300;font-style:italic;font-size:clamp(44px,5.4vw,80px);color:var(--cream);line-height:1.04;margin-top:var(--s-2)}
.dp-hero__tag{margin-top:var(--s-3);font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:20px;color:#E3D9C4}
.dp-facts{background:var(--ink);padding:0 var(--s-5)}
.dp-facts__row{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.dp-fact{padding:var(--s-4) var(--s-3);text-align:center;border-left:1px solid rgba(201,169,110,.2)}
.dp-fact:first-child{border-left:none}
/* One value runs to two lines and the other three do not; without a   shared height the labels beneath them sit at three heights. */
.dp-fact b{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:19px;color:var(--gold);display:flex;align-items:center;justify-content:center;min-height:2.5em;line-height:1.25}
.dp-fact span{font-family:'Marcellus',serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-top:4px;display:block}
.dp-intro{background:var(--cream);padding:var(--s-7) var(--s-5)}
.dp-intro__grid{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-6);align-items:center}
.dp-intro__txt .eyebrow{color:var(--brass)}
.dp-intro__lead{margin-top:var(--s-3);font-family:'Fraunces',serif;font-weight:300;font-size:clamp(19px,2vw,24px);line-height:1.6;color:var(--ink-soft)}
.dp-intro__img{position:relative}
.dp-intro__img img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--hairline)}
.dp-intro__img figcaption{margin-top:10px;font-family:'Marcellus',serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center}
.dp-sees{background:var(--ivory);padding:var(--s-7) var(--s-5)}
.dp-sees__head{text-align:center;margin-bottom:var(--s-6)}
.dp-sees__head h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:var(--t-h2);color:var(--ink);margin-top:var(--s-2)}
.dp-sees__grid{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
/* These were three bordered boxes of small type. A gold rule at the   head, a display numeral and a column that pushes the text to a   common baseline make them read as cards rather than form fields. */
.dp-see{background:var(--cream);border:0;border-top:2px solid var(--gold);padding:var(--s-4) var(--s-4) var(--s-5);display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease)}
.dp-see:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(14,26,43,.25);background:#fff}
.dp-see__n{font-family:'Fraunces',serif;font-style:italic;font-size:32px;color:var(--gold);line-height:1;display:block}
.dp-see h3{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(21px,1.9vw,25px);color:var(--ink);margin:14px 0 12px;line-height:1.2}
.dp-see p{font-family:'Figtree',sans-serif;font-weight:300;font-size:15px;color:var(--text-soft);line-height:1.7;margin:0}
.dp-how{background:var(--cream);padding:var(--s-7) var(--s-5);text-align:center}
.dp-how__inner{max-width:720px;margin:0 auto}
.dp-how__txt{margin-top:var(--s-3);font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:clamp(19px,2.2vw,26px);line-height:1.55;color:var(--ink)}
.dp-nav{background:var(--ivory);border-block:1px solid var(--hairline);padding:0 var(--s-5)}
.dp-nav__row{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.dp-nav__lnk{display:flex;flex-direction:column;gap:4px;padding:var(--s-4) var(--s-3);transition:background .25s}
.dp-nav__lnk--next{text-align:right;align-items:flex-end}
.dp-nav__lnk:hover{background:rgba(201,169,110,.08)}
.dp-nav__lnk span{font-family:'Marcellus',serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.dp-nav__lnk b{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:19px;color:var(--ink)}
.dp-nav__lnk:hover b{color:var(--brass)}
.dp-nav__all{align-self:center;font-family:'Marcellus',serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);border:1px solid var(--hairline);padding:12px 22px;transition:.3s}
.dp-nav__all:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.dp-cta{background:var(--img-reserve-bg) center/cover no-repeat;position:relative;padding:var(--s-7) var(--s-5);text-align:center}
.dp-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.72),rgba(14,26,43,.84))}
.dp-cta__inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
.dp-cta .eyebrow{color:var(--gold)}
.dp-cta h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:var(--t-h2);color:var(--cream);margin-top:var(--s-2)}
.dp-cta__btns{display:flex;gap:var(--s-2);justify-content:center;margin-top:var(--s-4);flex-wrap:wrap}
.dp-cta .btn{border:1px solid rgba(201,169,110,.6);color:var(--cream)}
.dp-cta .btn:hover{background:rgba(201,169,110,.15)}
@media(max-width:900px){
  .dp-facts__row{grid-template-columns:repeat(2,1fr)}
  .dp-fact{border-left:none;border-top:1px solid rgba(201,169,110,.2)}
  .dp-fact:nth-child(-n+2){border-top:none}
  .dp-intro__grid{grid-template-columns:1fr}
  .dp-sees__grid{grid-template-columns:1fr}
  .dp-nav__row{grid-template-columns:1fr;gap:0}
  .dp-nav__lnk--next{text-align:left;align-items:flex-start}
  .dp-nav__all{margin:var(--s-2) var(--s-3) var(--s-3);align-self:flex-start}
}


/* ==========================================================================
   SHARED PAGE HERO / CTA (.pg-hero .pg-cta) + ABOUT
   ========================================================================== */
.pg-hero{background:var(--img-hero) center/cover no-repeat;position:relative;text-align:center}

.ab-story{background:var(--cream);padding:var(--s-7) var(--s-5)}
.ab-grid{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:1fr 1.25fr;gap:var(--s-6);align-items:center}
.ab-img img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--hairline)}
.ab-txt h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:var(--t-h2);color:var(--ink);margin-top:var(--s-2)}
.ab-txt p{margin-top:var(--s-3);font-family:'Figtree',sans-serif;font-weight:300;font-size:16px;color:var(--text-soft);line-height:1.75;max-width:540px}
.ab-line{background:var(--ink);padding:var(--s-7) var(--s-5)}
.ab-line__wrap{max-width:var(--max-content);margin:0 auto}
.ab-line .eyebrow{color:var(--gold)}
.ab-miles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.ab-m{border-top:1px solid rgba(201,169,110,.35);padding-top:var(--s-3)}
.ab-m b{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:26px;color:var(--gold)}
.ab-m p{margin-top:10px;font-family:'Figtree',sans-serif;font-weight:300;font-size:14px;color:#CBBEA6;line-height:1.65}
.ab-crew{background:var(--ivory);border-top:1px solid var(--hairline)}
.ab-crewg{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--hairline);background:#fff}
.ab-c{padding:var(--s-5) var(--s-4);border-left:1px solid var(--hairline)}
.ab-c:first-child{border-left:none}
.ab-c__r{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--brass)}
.ab-c h3{font-family:'Fraunces',serif;font-weight:400;font-size:21px;color:var(--ink);margin:8px 0 10px}
.ab-c p{font-family:'Figtree',sans-serif;font-weight:300;font-size:14.5px;color:var(--text-soft);line-height:1.65}
@media(max-width:900px){.ab-grid{grid-template-columns:1fr}.ab-miles{grid-template-columns:1fr 1fr}
 .ab-crewg{grid-template-columns:1fr}.ab-c{border-left:none;border-top:1px solid var(--hairline)}.ab-c:first-child{border-top:none}}
.pl-head .eyebrow{justify-content:center}
.ab-line .pl-head h2{color:var(--cream)}
/* crew cards refined */
.ab-crewg{max-width:var(--max-content);margin:0 auto;box-shadow:0 26px 55px -30px rgba(14,26,43,.18)}
.ab-c{position:relative;transition:background .3s}
.ab-c::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ab-c:hover{background:var(--ivory)}
.ab-c:hover::before{transform:scaleX(1)}
.ab-c h3{font-style:italic}
@media(max-width:900px){.pl-wrap{padding:var(--s-6) var(--s-5)}}


/* ==========================================================================
   JOURNAL
   ========================================================================== */
.pg-hero{background:var(--img-hero) center/cover no-repeat;position:relative;text-align:center}

.jn-grid-sec{background:var(--cream);padding:var(--s-7) var(--s-5)}
.jn-grid{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.jn-card{background:#fff;border:1px solid var(--hairline);display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.jn-card:hover{transform:translateY(-8px);box-shadow:0 30px 55px -26px rgba(14,26,43,.28)}
.jn-card__img{aspect-ratio:16/10;overflow:hidden}
.jn-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.jn-card:hover .jn-card__img img{transform:scale(1.06)}
.jn-card__bd{padding:var(--s-3) var(--s-3) var(--s-4);display:flex;flex-direction:column;flex:1}
.jn-card__cat{font-family:'Marcellus',serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.jn-card h3{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:22px;color:var(--ink);margin-top:8px;line-height:1.3}
.jn-card p{margin-top:8px;font-family:'Figtree',sans-serif;font-weight:300;font-size:14px;color:var(--text-soft);line-height:1.6;flex:1}
.jn-card__go{margin-top:var(--s-3);font-family:'Marcellus',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:8px;transition:.3s}
.jn-card:hover .jn-card__go{color:var(--brass);gap:12px}
.jn-soon{text-align:center;margin:var(--s-6) auto 0;max-width:520px;font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--muted)}
.jn-sub{display:flex;gap:12px;justify-content:center;margin-top:var(--s-3);flex-wrap:wrap}
.jn-sub input{font-family:'Figtree',sans-serif;font-size:15px;padding:14px 16px;border:1px solid var(--hairline);background:#fff;min-width:280px;outline:none}
.jn-sub input:focus{border-color:var(--gold)}
.jn-sub .btn{border:none;cursor:pointer}
@media(max-width:960px){.jn-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.jn-grid{grid-template-columns:1fr}.jn-sub input{min-width:0;flex:1}}


/* ==========================================================================
   PLAN YOUR VOYAGE
   ========================================================================== */
.pg-hero{background:var(--img-hero) center/cover no-repeat;position:relative;text-align:center}

.pl-wrap{max-width:var(--max-content);margin:0 auto;padding:var(--s-7) var(--s-5)}
.pl-wrap--narrow{max-width:820px}
.pl-head{text-align:center;margin-bottom:var(--s-6)}
.pl-head h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:var(--t-h2);color:var(--ink);margin-top:var(--s-2)}
.pl-season{background:var(--cream)}
.pl-seasons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.pl-s{background:#fff;border:1px solid var(--hairline);padding:var(--s-4);border-top:2px solid var(--gold)}
.pl-s b{font-family:'Marcellus',serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.pl-s h3{font-family:'Fraunces',serif;font-weight:400;font-size:21px;color:var(--ink);margin:10px 0 10px}
.pl-s p{font-family:'Figtree',sans-serif;font-weight:300;font-size:14.5px;color:var(--text-soft);line-height:1.65}
.pl-note{text-align:center;margin-top:var(--s-4);font-family:'Fraunces',serif;font-style:italic;color:var(--muted);font-size:16px}
.pl-incl{background:var(--ivory);border-block:1px solid var(--hairline)}
.pl-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);max-width:900px;margin:0 auto}
.pl-colh{font-family:'Marcellus',serif;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);padding-bottom:var(--s-2);border-bottom:1px solid var(--hairline)}
.pl-colh--no{color:var(--muted)}
.pl-list{list-style:none;margin-top:6px}
.pl-list li{padding:12px 0 12px 22px;border-bottom:1px solid var(--hairline);position:relative;
  font-family:'Figtree',sans-serif;font-weight:300;font-size:15px;color:var(--text-soft)}
.pl-list li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.pl-list--no li::before{color:var(--muted)}
.pl-arrive{background:var(--cream)}
.pl-doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);max-width:940px;margin:0 auto}
.pl-d{background:#fff;border:1px solid var(--hairline);padding:var(--s-4)}
.pl-d b{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:20px;color:var(--ink)}
.pl-d p{margin-top:10px;font-family:'Figtree',sans-serif;font-weight:300;font-size:14.5px;color:var(--text-soft);line-height:1.7}
.pl-faq{background:var(--ivory);border-top:1px solid var(--hairline)}
.pl-faq details{border-bottom:1px solid var(--hairline)}
.pl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:var(--s-3) 4px;font-family:'Fraunces',serif;font-weight:400;font-size:18px;color:var(--ink)}
.pl-faq summary::-webkit-details-marker{display:none}
.pl-faq summary .pm{color:var(--gold);font-family:'Figtree',sans-serif;font-size:20px;transition:transform .3s}
.pl-faq details[open] summary{color:var(--brass)}
.pl-faq details[open] .pm{transform:rotate(45deg)}
.pl-a{padding:0 4px var(--s-3);font-family:'Figtree',sans-serif;font-weight:300;font-size:15px;color:var(--text-soft);line-height:1.7;max-width:640px}
@media(max-width:900px){.pl-seasons,.pl-cols,.pl-doors{grid-template-columns:1fr}}


/* ==========================================================================
   RESERVE
   ========================================================================== */
/* ===== reserve page ===== */
.rv-hero{background:var(--img-hero) center/cover no-repeat;position:relative;text-align:center}
.rv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.62),rgba(14,26,43,.78))}
.rv-hero__inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.rv-hero h1{font-family:'Fraunces',serif;font-weight:300;color:var(--cream);margin-top:var(--s-2);line-height:1.1}
.rv-hero h1 em{font-style:italic;color:var(--gold)}
.rv-hero__sub{margin:var(--s-3) auto 0;max-width:560px;color:#E3D9C4;font-family:'Figtree',sans-serif;font-weight:300;font-size:16.5px;line-height:1.7}
.rv-body{background:var(--cream);padding:var(--s-7) var(--s-5)}
.rv-grid{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s-6);align-items:start}
.rv-form{background:#fff;border:1px solid var(--hairline);padding:var(--s-5)}
.rv-row{display:grid;gap:var(--s-3);margin-bottom:var(--s-3)}
.rv-row--2{grid-template-columns:1fr 1fr}
.rv-form label{display:flex;flex-direction:column;gap:8px;font-family:'Marcellus',serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.rv-form input,.rv-form select,.rv-form textarea{font-family:'Figtree',sans-serif;font-weight:300;
  color:var(--ink);background:var(--ivory);border:1px solid var(--hairline);padding:13px 14px;outline:none;
  transition:border-color .25s;border-radius:0;-webkit-appearance:none;width:100%}
.rv-form input:focus,.rv-form select:focus,.rv-form textarea:focus{border-color:var(--gold)}
.rv-form textarea{resize:vertical}
.rv-actions{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2)}
.rv-send{cursor:pointer;border:none}
.rv-mail{cursor:pointer;background:transparent}
.rv-note{margin-top:var(--s-2);font-family:'Figtree',sans-serif;font-size:12.5px}
.rv-side{display:flex;flex-direction:column;gap:var(--s-3)}
.rv-card{background:#fff;border:1px solid var(--hairline);padding:var(--s-4)}
.rv-card h3{font-family:'Marcellus',serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:var(--s-3)}
.rv-steps{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:var(--s-2)}
.rv-steps li{counter-increment:st;position:relative;padding-left:40px;font-family:'Figtree',sans-serif;font-weight:300;font-size:14.5px;color:var(--text-soft);line-height:1.6}
.rv-steps li b{color:var(--ink);font-weight:500}
.rv-steps li::before{content:counter(st,upper-roman);position:absolute;left:0;top:0;font-family:'Fraunces',serif;font-style:italic;color:var(--gold);font-size:19px}
.rv-contact{display:flex;flex-direction:column;gap:2px;padding:var(--s-2) 0;border-bottom:1px solid var(--hairline);
  font-family:'Marcellus',serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:color .2s}
.rv-contact:last-child{border-bottom:none}
.rv-contact span{font-family:'Figtree',sans-serif;font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--brass)}
.rv-contact:hover{color:var(--brass)}
.rv-fine{list-style:none;display:flex;flex-direction:column;gap:10px;font-family:'Figtree',sans-serif;font-weight:300;font-size:14px;color:var(--text-soft)}
.rv-fine li{padding-left:20px;position:relative}
.rv-fine li::before{content:"—";position:absolute;left:0;color:var(--gold)}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr}.rv-row--2{grid-template-columns:1fr}.rv-form{padding:var(--s-4) var(--s-3)}}


/* ==========================================================================
   REVIEWS
   ========================================================================== */
.pg-hero{background:var(--img-hero) center/cover no-repeat;position:relative;text-align:center}
.pg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.62),rgba(14,26,43,.8))}
.pg-hero__inner{position:relative;z-index:2;max-width:780px;margin:0 auto}
.pg-hero h1{font-family:'Fraunces',serif;font-weight:300;color:var(--cream);margin-top:var(--s-2);line-height:1.1}
.pg-hero h1 em{font-style:italic;color:var(--gold)}
.pg-hero__sub{margin:var(--s-3) auto 0;max-width:600px;color:#E3D9C4;font-family:'Figtree',sans-serif;font-weight:300;line-height:1.7}
.pg-cta{background:var(--img-reserve-bg) center/cover no-repeat;position:relative;padding:var(--s-7) var(--s-5);text-align:center}
.pg-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.72),rgba(14,26,43,.84))}
.pg-cta__inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
.pg-cta .eyebrow{color:var(--gold)}
.pg-cta h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:var(--t-h2);color:var(--cream);margin-top:var(--s-2)}
.pg-cta__btns{display:flex;gap:var(--s-2);justify-content:center;margin-top:var(--s-4);flex-wrap:wrap}
.pg-cta .btn{border:1px solid rgba(201,169,110,.6);color:var(--cream)}
.pg-cta .btn:hover{background:rgba(201,169,110,.15)}

.rw-sec{background:var(--cream);padding:var(--s-7) var(--s-5)}
.rw-grid{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.rw-card{background:#fff;border:1px solid var(--hairline);padding:var(--s-4);display:flex;flex-direction:column;border-top:2px solid var(--gold)}
.rw-stars{color:var(--gold);letter-spacing:4px;font-size:13px}
.rw-card blockquote{margin-top:var(--s-2);font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:18px;line-height:1.5;color:var(--ink);flex:1}
.rw-card figcaption{margin-top:var(--s-3);font-family:'Marcellus',serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.rw-card figcaption em{font-style:normal;color:#B5A98C}
.rw-invite{text-align:center;margin-top:var(--s-7);max-width:560px;margin-left:auto;margin-right:auto}
.rw-invite h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:var(--t-h2);color:var(--ink);margin-top:var(--s-2)}
.rw-invite p{margin:var(--s-3) 0 var(--s-4);font-family:'Figtree',sans-serif;font-weight:300;color:var(--text-soft)}
@media(max-width:960px){.rw-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.rw-grid{grid-template-columns:1fr}}
.voyage:hover .voyage__img img{transform:scale(1.06)}

/* ===== interactive map ===== */
.mwrap{position:relative}
.rp{fill:none;stroke:#C9A96E;stroke-width:1;opacity:.5}
.rp--soft{stroke-width:.6;opacity:.3}
.rp--main{stroke:#8B6F3F;stroke-width:1.2;opacity:.35}
.rp--draw{stroke:#8B6F3F;stroke-width:2.4;opacity:1;stroke-linecap:round;
  stroke-dasharray:1160;stroke-dashoffset:1160}
.nile-map__svg.in-view .rp--draw{animation:riverdraw 2.6s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes riverdraw{to{stroke-dashoffset:0}}
.mstop{cursor:pointer;outline:none}
.mstop .dot{fill:#8B6F3F;transition:.3s}
.mstop .ring{fill:none;stroke:#C9A96E;stroke-width:1;transition:.3s}
.mstop .halo{fill:#C9A96E;opacity:0;transition:.3s}
.mstop .mlbl{font-family:'Marcellus',serif;font-size:13px;letter-spacing:.14em;fill:#0E1A2B;opacity:0;transform:translateY(4px);transition:.35s}
.nile-map__svg.in-view .mstop .mlbl{opacity:1;transform:none}
.mstop:hover .halo,.mstop:focus .halo,.mstop.act .halo{opacity:.18}
.mstop:hover .dot,.mstop:focus .dot,.mstop.act .dot{fill:#0E1A2B}
.mstop:hover .ring,.mstop:focus .ring,.mstop.act .ring{stroke:#0E1A2B}
.mstop.act .ring{animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{r:11;opacity:1}100%{r:20;opacity:0}}
.nile-map__svg.in-view .mstop{animation:stopin .6s var(--ease) both}
.nile-map__svg.in-view .mstop[data-i="0"]{animation-delay:.5s}.nile-map__svg.in-view .mstop[data-i="1"]{animation-delay:.8s}
.nile-map__svg.in-view .mstop[data-i="2"]{animation-delay:1.1s}.nile-map__svg.in-view .mstop[data-i="3"]{animation-delay:1.4s}
.nile-map__svg.in-view .mstop[data-i="4"]{animation-delay:1.7s}.nile-map__svg.in-view .mstop[data-i="5"]{animation-delay:2.0s}
.nile-map__svg.in-view .mstop[data-i="6"]{animation-delay:2.3s}
@keyframes stopin{from{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(.4)}}
.mtip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:var(--cream);
  padding:16px 20px;min-width:210px;opacity:0;transform:translate(-50%,-8px) scale(.96);
  transition:opacity .25s,transform .25s;border-top:2px solid var(--gold);box-shadow:0 24px 50px -20px rgba(14,26,43,.5)}
.mtip.on{opacity:1;transform:translate(-50%,-16px) scale(1)}
.mtip .mt-name{font-family:'Marcellus',serif;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.mtip .mt-site{font-family:'Fraunces',serif;font-style:italic;font-size:15px;margin-top:4px;color:var(--cream)}
.mtip .mt-meta{display:flex;justify-content:space-between;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(201,169,110,.3);font-family:'Figtree',sans-serif;font-size:12px;color:#CBBEA6}
.mtip .mt-km{color:var(--gold);font-weight:500}
/* minmax(0,1fr) rather than 1fr: a plain 1fr is minmax(auto,1fr),
   so a column cannot shrink below its content and the longest day
   line decides its width. These seven are meant to be equal. */
.mcards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;max-width:1200px;margin:var(--s-5) auto 0;padding:0 var(--s-5);align-items:stretch}
.mcard{border:1px solid var(--hairline);background:#fff;padding:14px 10px;text-align:center;cursor:pointer;transition:.3s;display:flex;flex-direction:column;gap:6px;min-width:0}
.mcard:hover,.mcard.act{border-color:var(--gold);box-shadow:0 16px 34px -18px rgba(14,26,43,.28);transform:translateY(-3px)}
/* The selected port fills ink, so it reads at a glance and matches the
   ink stop on the map above — a shadow alone was too faint to notice. */
.mcard.act{background:var(--ink);border-color:var(--ink)}
.mcard.act .mc-n{color:var(--gold)}
.mcard.act .mc-name{color:var(--cream)}
.mcard.act .mc-site,.mcard.act .mc-meta{color:rgba(244,237,224,.78)}
.mcard .mc-n{font-family:'Fraunces',serif;font-style:italic;color:var(--brass);font-size:18px}
.mcard .mc-name{font-family:'Marcellus',serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:4px}
.mcard .mc-site{font-family:'Figtree',sans-serif;font-size:12.5px;color:var(--text-soft);margin-top:3px;min-height:34px;line-height:1.35;text-wrap:balance}
.mcard .mc-meta{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:auto;padding-top:8px;font-size:12px;letter-spacing:.06em;color:var(--muted-legible);border-top:1px solid var(--hairline)}
@media(max-width:1000px){.mcards{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.mcards{grid-template-columns:repeat(2,1fr)}.mtip{display:none}}

/* ===== journeys — luxe band ===== */
.voyages{background:linear-gradient(180deg,#0E1A2B 0%,#101E31 60%,#0C1727 100%);padding:var(--s-section) 0;position:relative;overflow:hidden}
.voyages::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(1px 1px at 18% 24%,#C9A96E,transparent),radial-gradient(1px 1px at 64% 12%,#C9A96E,transparent),
  radial-gradient(1.4px 1.4px at 84% 30%,#C9A96E,transparent),radial-gradient(1px 1px at 38% 8%,#C9A96E,transparent)}
.voyages__head{position:relative;z-index:1}
.voyages__head .eyebrow{color:var(--gold)}
.voyages__head h2{color:var(--cream)}
.voyages__head .rule{background:var(--gold)}
.voyages__lead{margin:var(--s-3) auto 0;max-width:520px;font-family:'Figtree',sans-serif;font-weight:300;
  font-size:16px;line-height:1.7;color:#B8AC93}
.voyage{position:relative;display:block;aspect-ratio:3/4.15;overflow:hidden;background:#0A1523;
  border:none;padding:0;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.voyage:hover{transform:translateY(-10px);box-shadow:0 50px 90px -30px rgba(0,0,0,.75)}
.voyage__media{position:absolute;inset:0}
.voyage__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s;
  filter:saturate(.92) brightness(.94)}
.voyage:hover .voyage__media img{transform:scale(1.08);filter:saturate(1) brightness(1)}
.voyage__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,26,43,.32) 0%,rgba(14,26,43,0) 34%,rgba(10,18,32,.24) 62%,rgba(8,15,27,.9) 100%)}
.voyage__frame{position:absolute;inset:14px;border:1px solid rgba(201,169,110,.4);pointer-events:none;
  transition:inset .5s var(--ease),border-color .5s}
.voyage:hover .voyage__frame{inset:10px;border-color:rgba(224,194,132,.85)}
.voyage__num{position:absolute;top:26px;left:28px;font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:52px;line-height:1;color:rgba(244,237,224,.92);text-shadow:0 2px 24px rgba(0,0,0,.5);
  transition:color .4s}
.voyage:hover .voyage__num{color:var(--gold)}
.voyage__info{position:absolute;left:0;right:0;bottom:0;padding:0 30px 30px;z-index:2}
.voyage__days{display:inline-flex;align-items:center;gap:10px;font-family:'Marcellus',serif;font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.voyage__days::before{content:"";width:26px;height:1px;background:var(--gold)}
.voyage__name{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:clamp(21px,1.75vw,26px);
  line-height:1.3;color:var(--cream);margin-top:12px;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.voyage__go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:'Marcellus',serif;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);
  max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);
  transition:max-height .5s var(--ease),opacity .5s,transform .5s}
.voyage:hover .voyage__go{max-height:30px;opacity:1;transform:none;color:var(--gold)}
.voyage__go span{transition:transform .3s}
.voyage:hover .voyage__go span{transform:translateX(4px)}
.voyages__foot{text-align:center;position:relative;z-index:1}
.voyages__all{display:inline-flex;align-items:center;gap:10px;font-family:'Marcellus',serif;font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--cream);border:1px solid rgba(201,169,110,.5);
  padding:16px 34px;transition:.35s}
.voyages__all:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
@media(max-width:1120px){.voyages__foot{margin-top:var(--s-6)}}
@media(max-width:620px){.voyage{aspect-ratio:3/3.4}}

/* ===== invitation — tightened ===== */
.invitation{padding:var(--s-section-md) var(--s-5)}
.invitation .pull-quote{padding:var(--s-2) 0;margin-bottom:0}
.invitation .pull-quote::before,.invitation .pull-quote::after{margin:var(--s-2) auto}


/* ==========================================================================
   JOURNAL ARTICLE
   No mockup exists for a single note, so this reuses the page hero and the
   note-card grid from Nile-Spirit-Journal.html and adds only the prose
   column between them, built from the same tokens as the rest of the site.
   ========================================================================== */
.jn-article{background:var(--ivory);padding:var(--s-7) var(--s-5)}
.jn-article__inner{max-width:var(--max-text);margin:0 auto}
.jn-article__inner > *{margin-bottom:var(--s-3)}
.jn-article__inner > *:last-child{margin-bottom:0}
.jn-article__inner p{font-size:var(--t-body-lg);line-height:1.85;color:var(--text-soft)}
.jn-article__inner h2{font-size:var(--t-h3);margin-top:var(--s-6)}
.jn-article__inner h3{font-size:calc(var(--t-h3) * .78);margin-top:var(--s-5)}
.jn-article__inner h2 + p,.jn-article__inner h3 + p{margin-top:calc(var(--s-2) * -1)}
.jn-article__inner a{color:var(--brass);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color var(--t-fast) var(--ease)}
.jn-article__inner a:hover{color:var(--gold-deep)}
.jn-article__inner ul,.jn-article__inner ol{padding-left:var(--s-3);color:var(--text-soft)}
.jn-article__inner ul{list-style:disc}
.jn-article__inner ol{list-style:decimal}
.jn-article__inner li{margin-bottom:var(--s-1);line-height:1.75}
.jn-article__inner blockquote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:var(--t-quote);line-height:1.3;color:var(--ink);border-left:2px solid var(--gold);
  padding-left:var(--s-3);margin:var(--s-5) 0}
.jn-article__inner figure{margin:var(--s-5) 0}
.jn-article__inner figcaption{font-family:'Marcellus',serif;font-size:var(--t-cap);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:var(--s-1)}
.jn-article__inner img{width:100%;height:auto}
.jn-article__pages{font-family:'Marcellus',serif;font-size:var(--t-small);color:var(--muted)}
@media (max-width:700px){.jn-article{padding:var(--s-6) var(--s-3)}}


/* ==========================================================================
   BRAND MARK
   The drawn glyph in the mockups is a 22px line figure. A real emblem needs
   more room to read, so an uploaded mark gets its own size in both places.
   ========================================================================== */
.brand .glyph--img{width:40px;height:40px;object-fit:contain}
.site-footer__brand .glyph--img{width:56px;height:56px;object-fit:contain;margin-bottom:var(--s-2)}
.brand__logo{max-height:52px;width:auto;object-fit:contain}
.site-footer__brand .brand__logo{max-height:72px;margin-bottom:var(--s-2)}
@media (max-width:900px){.brand .glyph--img{width:34px;height:34px}}
.hero__badge-mark{width:44px;height:44px;object-fit:contain}


/* ==========================================================================
   ACCESSIBILITY CORRECTIONS
   Kept at the end so the ported mockup sections above stay untouched.
   ========================================================================== */

/* The availability bar's field labels are 11px brass on cream-warm, which
   measures 3.81:1 — under the 4.5:1 a form control needs. This is the same
   hue eight percent darker (4.72:1); at 11px the difference is invisible
   next to the gain in legibility. Decorative brass elsewhere is untouched. */
:root { --brass-legible: #7A6136; }
.avail-field label { color: var(--brass-legible); }

/* The footer column headings are third-level, not fourth (the page's h1/h2
   sit above them), so the markup says h3 and this keeps the h4 styling. */
.site-footer h3.foot-h {
  color: var(--gold); font-family: 'Marcellus', serif; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s-2);
  font-weight: 400;
}

/* Two more places brass sat under 4.5:1 on the cream grounds. */
.avail-btn { color: var(--brass-legible); }
.testimonial__attr { color: var(--brass-legible); }

/* Brass on the ink footer measures 3.70:1; gold is the palette's own
   answer for brass-on-dark and reaches 7.81:1. */
.site-footer .foot-reserve { color: var(--gold); margin-top: 12px; }

/* --muted at #7B8290 measures 3.86:1 on white; this is the same hue far
   enough down to clear 4.5:1 on white and on the cream grounds alike. */
:root { --muted-legible: #5F6673; }
.dst__meta,
.rv-note { color: var(--muted-legible); }

/* The voyage blocks set their own legible brass at source, where the
   selectors are specific enough for it to apply. */

/* Section headings that exist only for screen readers, so the heading
   order never jumps a level where the design shows no visible heading. */
.sr-heading {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ==========================================================================
   VOYAGE PAGES
   A programme on its own page reuses the Journeys composition. These are
   the few modifiers that page needs and the Journeys page never did.
   ========================================================================== */

/* The inclusions band alternates tone when a page carries two of them. */
.inclusions--alt { background: var(--cream-warm); }

/* Highlights are one long list rather than three columns. */
.inclusions__col--wide { grid-column: 1 / -1; }
.inclusions__col--wide .inclusions__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-2) var(--s-4);
}

/* The sailing day and season, under the introduction. */
.vd-when {
  font-family: 'Figtree', sans-serif; font-size: 13px; color: var(--brass-legible); margin-top: calc(var(--s-2) * -1);
}

/* A booking note under the price. */
.vd-note { font-size: 13px; color: var(--muted-legible); margin-top: var(--s-1); max-width: 46ch; }

@media (max-width: 700px) {
  .inclusions__col--wide .inclusions__list { grid-template-columns: 1fr; }
}
/* Only the distance stays on one line. The day line is a sentence —
   keeping it nowrap is what stretched the first three columns. */
.mcard .mc-meta>:first-child{white-space:nowrap}
.mcard .mc-meta>:last-child{white-space:normal;text-wrap:balance;line-height:1.35}

/* =============================================================================
   VOYAGE GALLERY + LIGHTBOX
   ============================================================================= */
.vgal { background: var(--ivory); padding: var(--s-section) var(--s-5); }
.vgal__head { max-width: var(--max-content); margin: 0 auto var(--s-4); }
.vgal__head h2 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: var(--t-h2); color: var(--ink); margin-top: var(--s-2); line-height: 1.1; }
.vgal__grid { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-content); display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 10px; }
.vgal__item { position: relative; overflow: hidden; background: var(--ink); }
.vgal__item--lead { grid-column: span 2; grid-row: span 2; }
.vgal__link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.vgal__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity .3s; }
.vgal__link:hover img { transform: scale(1.04); }
.vgal__link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 760px) {
  .vgal { padding-left: 16px; padding-right: 16px; }
  .vgal__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 6px; }
}

.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(9,16,27,.94); color: var(--cream); }
.lightbox::backdrop { background: rgba(9,16,27,.94); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; animation: lb-in 260ms ease-out; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__fig { margin: 0; max-width: min(1200px, 86vw); text-align: center; }
.lightbox__img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.lightbox__cap { margin-top: 12px; font-size: 14px; color: rgba(244,237,224,.8); }
.lightbox__close, .lightbox__nav { position: absolute; background: none; border: 1px solid rgba(244,237,224,.35); color: var(--cream); width: 48px; height: 48px; font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .2s, background .2s; }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--gold); background: rgba(244,237,224,.06); }
.lightbox__close { top: 20px; right: 20px; font-size: 28px; }
.lightbox__nav--prev { left: 20px; top: 50%; margin-top: -24px; }
.lightbox__nav--next { right: 20px; top: 50%; margin-top: -24px; }
@media (max-width: 760px) { .lightbox__nav { top: auto; bottom: 20px; margin: 0; } }

/* =============================================================================
   VOYAGE BOOKING (form at the foot of a voyage page)
   ============================================================================= */
.vbook { scroll-margin-top: calc(var(--header-h) + 16px); }
.vbook__head { max-width: var(--max-content); margin: 0 auto var(--s-4); }
.vbook__head h2 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: var(--t-h2); color: var(--ink); margin: var(--s-2) 0 var(--s-2); line-height: 1.1; }
.vbook__head p { max-width: 620px; color: var(--text-soft); }
.vbook__sum h3 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: 24px; color: var(--ink); line-height: 1.25; }
.vbook__sum dl { margin: var(--s-3) 0 0; }
.vbook__sum dl > div { display: grid; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.vbook__sum dt { font-family: 'Marcellus', serif; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-legible, var(--brass)); padding-top: 3px; }
.vbook__sum dd { margin: 0; font-size: 14.5px; color: var(--ink); }
.vbook__price { font-family: 'Fraunces', serif; font-size: 22px; }
.vbook__price span { font-family: 'Figtree', sans-serif; font-size: 12px; color: var(--text-soft); }
.vbook__note { margin-top: var(--s-3); font-size: 13px; color: var(--text-soft); line-height: 1.6; }

/* =============================================================================
   VOYAGES (front page) — every programme, tabbed, in a sideways row
   ============================================================================= */
.voyages__tabs { position: relative; z-index: 1; display: flex; justify-content: center; max-width: 520px; margin: var(--s-6) auto 0; border-bottom: 1px solid rgba(201,169,110,.28); }
.voyages__tab {
  flex: 1; padding: 14px 18px 16px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: 'Marcellus', serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #B8AC93;
  cursor: pointer; transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.voyages__tab:hover { color: var(--cream); }
.voyages__tab[aria-selected="true"] { color: var(--cream); border-bottom-color: var(--gold); }
.voyages__tab:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.voyages__count { min-width: 22px; margin-left: 6px; padding: 1px 7px; border: 1px solid rgba(201,169,110,.45); border-radius: 11px; }
.voyages__tab[aria-selected="true"] .voyages__count { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.voyages__panel { position: relative; z-index: 1; max-width: var(--max-wide); margin: 0 auto; }
.voyages__track {
  list-style: none; margin: var(--s-5) 0 0;
  /* overflow-x:auto makes the vertical axis scroll too, so this bottom
     padding is the only thing keeping a hovered card's shadow from
     being clipped. 0 50px 90px -30px reaches about 65px below the
     card (50 offset - 30 spread + half the 90 blur), so it gets 88. */
  padding: 14px var(--s-5) calc(var(--s-6) + 24px);
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--s-5) - 3 * var(--s-4)) / 4); gap: var(--s-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--s-5);
  scrollbar-width: none;
}
.voyages__track::-webkit-scrollbar { display: none; }
.voyages__slide { scroll-snap-align: start; }
.voyages__panel:not([hidden]) .voyages__slide { animation: voyage-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.voyages__panel:not([hidden]) .voyages__slide:nth-child(2) { animation-delay: 70ms; }
.voyages__panel:not([hidden]) .voyages__slide:nth-child(3) { animation-delay: 140ms; }
.voyages__panel:not([hidden]) .voyages__slide:nth-child(4) { animation-delay: 210ms; }
@keyframes voyage-in { from { opacity: 0; transform: translateY(18px); } }

/* The card now carries a price and a standing button, so the lower half
   darkens further for the lettering to hold on bright photographs. */
.voyages .voyage__media::after { background: linear-gradient(180deg, rgba(14,26,43,.32) 0%, rgba(14,26,43,0) 22%, rgba(10,18,32,.62) 46%, rgba(8,15,27,.96) 78%); }
.voyages .voyage__days { color: #E0C284; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.voyages .voyage__price { margin-top: 10px; font-size: 12.5px; letter-spacing: .04em; color: rgba(244,237,224,.82); }
.voyages .voyage__price b { font-family: 'Fraunces', serif; font-weight: 400; font-size: 20px; color: var(--cream); margin: 0 2px; }
.voyages .voyage__go {
  max-height: none; opacity: 1; transform: none; overflow: visible;
  margin-top: 16px; padding: 11px 16px; border: 1px solid rgba(201,169,110,.7);
  font-size: 11px; letter-spacing: .18em; color: var(--cream);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.voyages .voyage:hover .voyage__go, .voyages .voyage:focus-visible .voyage__go { max-height: none; background: var(--gold); border-color: var(--gold); color: var(--ink); }
.voyages .voyage:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.voyages__foot { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: 0; }
/* The track's bottom padding exists for the hover shadow, not for
   spacing, so the row underneath is pulled back over it. The amounts
   are measured, not guessed, and the breakpoints are the track's own
   (620 where its padding changes, 900 where the spacing tokens shrink)
   so the gap does not jump at the edges. It lands near 64px at every
   width, where it was 190px. */
@media (min-width: 621px) { .voyages__foot { margin-top: -20px; } }
@media (min-width: 901px) { .voyages__foot { margin-top: -50px; } }
.voyages__arrow {
  width: 52px; height: 52px; background: none; border: 1px solid rgba(201,169,110,.5); color: var(--cream);
  font-size: 18px; cursor: pointer; transition: background .3s, color .3s, opacity .3s;
}
.voyages__arrow:hover:not(:disabled) { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.voyages__arrow:disabled { opacity: .3; cursor: default; }
.voyages__arrow:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.voyages__arrow[hidden] { display: none; }

@media (max-width: 1120px) {
  .voyages__track { grid-auto-columns: calc((100% - 2 * var(--s-5) - var(--s-4)) / 2.15); }
}
@media (max-width: 620px) {
  .voyages__track { grid-auto-columns: 84%; gap: 12px; padding: 10px 16px 30px; scroll-padding: 0 16px; }
  .voyages__tab { padding: 12px 8px 14px; font-size: 12px; letter-spacing: .1em; }
  .voyages__tabs { margin-left: 16px; margin-right: 16px; }
  .voyages .voyage--off { transform: none; }
  .voyages__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .voyages__panel:not([hidden]) .voyages__slide { animation: none; } }

/* Availability bar: the sailing-days line under the three questions. */
.avail-note { grid-column: 1 / -1; margin: -8px 0 0; font-size: 13px; color: var(--text-soft); }
.avail-btn { min-width: 160px; font-size: 13px; letter-spacing: .1em; }

/* =============================================================================
   HEADER on phones — a Book button stays in reach; the menu carries
   booking and direct contact, and a close target big enough for a thumb.
   ============================================================================= */
.header-book-mobile { display: none; }
@media (max-width: 900px) {
  .header-book-mobile { display: inline-flex; padding: 10px 16px; font-size: 12px; letter-spacing: .12em; }
  .menu-toggle { width: 44px; height: 44px; margin: -10px; padding: 13px 10px; box-sizing: border-box; }
  .menu-toggle span { left: 10px; width: 24px; }
  .menu-toggle span:nth-child(1) { top: 13px; }
  .menu-toggle span:nth-child(2) { top: 21px; width: 17px; }
  .menu-toggle span:nth-child(3) { top: 29px; }
  .mobile-close { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; top: 12px; right: 12px; font-size: 34px; }
  .mobile-nav__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: var(--s-3); }
  .mobile-nav .mobile-nav__book { font-family: 'Marcellus', serif; font-style: normal; font-size: 13px; letter-spacing: .14em; padding: 16px 30px; color: var(--ink); }
  .mobile-nav .mobile-nav__contact { font-family: 'Figtree', sans-serif; font-style: normal; font-size: 15px; color: var(--brass-legible, var(--brass)); }
}
@media (max-width: 380px) {
  .brand .wordmark { font-size: 14px; }
  .header-book-mobile { padding: 9px 12px; }
}

/* Journal cards with no note behind them yet. */
.jn-card--soon { cursor: default; }
.jn-card--soon:hover { transform: none; box-shadow: none; }
.jn-card--soon:hover .jn-card__img img { transform: none; }
.jn-card__soon { margin-top: var(--s-3); font-family: 'Marcellus', serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-soft); }

/* =============================================================================
   POLISH PASS (critique 2026-10-20)
   ============================================================================= */
/* Headings never leave one word on the last line. */
h1, h2, h3 { text-wrap: balance; }

/* Where you are: the current page keeps its underline. */
.nav-list a[aria-current="page"] { color: var(--brass); }
.nav-list a[aria-current="page"] > span::after { width: 100%; left: 0; }

/* Journal card labels at a readable size. */
.jn-card__cat, .jn-card__go { font-size: 12px; }

/* Reserve form: selects look like selects, focus is unmistakable. */
.rv-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237A6136' stroke-width='1.5'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; padding-right: 38px; cursor: pointer;
}
.rv-form input:focus-visible, .rv-form select:focus-visible, .rv-form textarea:focus-visible { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(201,169,110,.35); }
.rv-form .rv-send, .rv-form .rv-mail { font-size: 13px; letter-spacing: .1em; }

/* Home closing band: one clear primary action, the rest as quiet links. */
.reserve-invite__contact a.reserve-invite__cta {
  display: inline-flex; padding: 16px 34px; background: var(--gold); color: var(--ink); border: 1px solid var(--gold);
  font-family: 'Marcellus', serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transition: background .3s, color .3s;
}
.reserve-invite__contact a.reserve-invite__cta:hover { background: transparent; color: var(--cream); }

/* Phones: the Reserve page's hero is a header, not a wall in front of the form. */
@media (max-width: 900px) {
  .rv-hero { padding: calc(var(--s-5) + 8px) 16px var(--s-5); }
  .rv-hero__sub { font-size: 15px; }
}

/* Route tiles: long port names break between words, never inside them. */
.mcard .mc-name { overflow-wrap: normal; hyphens: manual; }

/* =============================================================================
   VOYAGE PAGE — icon figures, lists, summary, sticky booking bar
   ============================================================================= */
.ph-ico { width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; vertical-align: -0.125em; }

/* Figures: a quiet band of icon + number + label under the heading. */
.voyage-detail__head { grid-template-columns: 1fr; gap: var(--s-4); }
.vd-stats { list-style: none; margin: 0; padding: var(--s-3) 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.vd-stat { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.vd-stat .ph-ico { grid-row: 1 / span 2; width: 34px; height: 34px; color: var(--brass); }
.vd-stat__num { font-family: 'Fraunces', serif; font-size: 30px; line-height: 1; color: var(--ink); }
.vd-stat__label { font-family: 'Marcellus', serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }
.day-row__day { font-size: 12px; }

/* Included / not included: one icon column, text always gets the width. */
.incl-item { grid-template-columns: 22px 1fr; gap: 14px; font-size: 15px; }
.incl-item > span { min-width: 0; }
.incl-ph { width: 22px; height: 22px; color: var(--brass); }
.inclusions__list--muted .incl-item { padding-left: 0; color: var(--text-soft); }
.inclusions__list--muted .incl-ph { color: var(--muted); }

/* Booking summary beside the form. */
.vbook__sum h3 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: 26px; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.25; margin-bottom: var(--s-2); }
.vbook__sum dl > div { grid-template-columns: 112px 1fr; align-items: baseline; }
.vbook__sum dt { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.vbook__sum dt .ph-ico { width: 18px; height: 18px; color: var(--brass); }

/* Form: required marks, 16px fields so phones do not zoom. */
.rv-req { color: #9A3B2E; font-family: 'Figtree', sans-serif; letter-spacing: 0; }
.rv-form input, .rv-form select, .rv-form textarea { font-size: 16px; }

/* Sticky booking bar: slides up once the visitor is past the hero,
   steps aside while the form itself is on screen. */
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(14,26,43,.97); color: var(--cream);
  border-top: 1px solid rgba(201,169,110,.45);
  box-shadow: 0 -12px 32px -18px rgba(0,0,0,.55);
  transform: translateY(110%); transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
.book-bar.is-on { transform: translateY(0); }
.book-bar__inner { max-width: var(--max-content); margin: 0 auto; padding: 14px var(--s-5); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.book-bar__what { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.book-bar__title { font-family: 'Fraunces', serif; font-style: italic; font-size: 21px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-bar__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: rgba(244,237,224,.8); }
.book-bar__meta .ph-ico { width: 16px; height: 16px; color: var(--gold); }
.book-bar__len, .book-bar__price { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.book-bar__price b { color: var(--cream); font-weight: 500; }
.book-bar__len + .book-bar__price::before { content: '·'; color: var(--gold); margin-right: 2px; }
.book-bar__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.book-bar__wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(201,169,110,.5); color: var(--cream);
  font-family: 'Marcellus', serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; transition: background .3s, color .3s; }
.book-bar__wa .ph-ico { width: 20px; height: 20px; }
.book-bar__wa:hover { background: rgba(201,169,110,.15); }
.book-bar__btn { min-height: 44px; font-size: 13px; letter-spacing: .12em; }
.book-bar__btn .ph-ico { width: 16px; height: 16px; }
body.has-book-bar .site-footer { padding-bottom: 96px; }
@media (max-width: 700px) {
  .book-bar__inner { padding: 10px 16px; gap: 10px; }
  .book-bar__title { display: none; }
  .book-bar__meta { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12.5px; }
  .book-bar__len + .book-bar__price::before { content: none; }
  .book-bar__price b { font-size: 15px; }
  .book-bar__unit { display: none; }
  .vd-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .vd-stat { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 6px; align-content: start; }
  .vd-stat .ph-ico { grid-row: auto; width: 26px; height: 26px; }
  .vd-stat__num { font-size: 26px; }
  .vd-stat__label { font-size: 11px; letter-spacing: .08em; line-height: 1.35; }
  .book-bar__wa span { display: none; }
  .book-bar__wa { padding: 0 12px; }
  .book-bar__btn { font-size: 12px; }
  .vd-stats { gap: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) { .book-bar { transition: none; } }

.voyage-detail__head .vd-stats { border-bottom: 0; }
@media (max-width: 700px) {
  .book-bar__btn { letter-spacing: .06em; padding: 12px; }
  .book-bar__btn .ph-ico { display: none; }
  .book-bar__actions { gap: 8px; }
}

/* =============================================================================
   BOXED PAGE HEROES (owner, 2026-10-20) — inner-page heroes sit inside the
   page with a margin, instead of running edge to edge; the header's
   content lines up with the same box.
   ============================================================================= */
:root { --box-gutter: var(--s-5); }
.pg-hero, .dh-hero, .dp-hero, .rv-hero,
.sp-hero, .ep-hero, .jp-hero, .vp-hero {
  width: min(calc(100% - 2 * var(--box-gutter)), var(--max-wide));
  margin: var(--s-3) auto 0;
  overflow: hidden;
}
.pg-hero, .dh-hero, .dp-hero, .rv-hero { padding: calc(var(--s-7) + 8px) var(--s-6); }
.sp-hero, .ep-hero, .jp-hero, .vp-hero { height: calc(62vh - var(--header-h)); min-height: 460px; }
.pg-hero .eyebrow, .dh-hero .eyebrow, .dp-hero .eyebrow, .rv-hero .eyebrow {
  font-size: 13px; letter-spacing: .18em; color: #E0C284; text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.pg-hero h1, .dh-hero h1, .rv-hero h1 { font-size: clamp(38px, 4.6vw, 68px); }
.pg-hero__sub { font-size: 17px; }

/* Header and utility bar content aligned to the hero box. */
.site-header, .utility-bar {
  padding-left: max(var(--box-gutter), calc((100% - var(--max-wide)) / 2));
  padding-right: max(var(--box-gutter), calc((100% - var(--max-wide)) / 2));
}
@media (max-width: 900px) {
  :root { --box-gutter: 12px; }
  .pg-hero, .dh-hero, .dp-hero, .rv-hero { padding: var(--s-6) 20px; }
  .sp-hero, .ep-hero, .jp-hero, .vp-hero { height: auto; min-height: 420px; }
  .site-header, .utility-bar { padding-left: 16px; padding-right: 16px; }
}

/* Footer colophon on ink: readable. */
.site-footer .colophon, p.colophon { color: rgba(244,237,224,.66); }

/* Filled buttons on dark bands keep ink text on gold. */
.dh-band .btn--filled, .dp-cta__btns .btn--filled, .dp-cta .btn--filled { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.dh-band .btn--filled:hover, .dp-cta .btn--filled:hover { background: transparent; color: var(--cream); }

/* Utility bar links: thumb-sized targets. */
.utility-bar a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 900px) { .utility-bar a { min-height: 40px; } }

/* Journal: the "tell me" link sits centred. */
p.jn-sub { display: flex; justify-content: center; }


/* Header: the bar has a fixed height, so its content is centred in it
   rather than pushed down by vertical padding. */
@media (min-width: 901px) {
  .site-header { padding-top: 0; padding-bottom: 0; align-items: center; }
  .btn--header { padding: 12px 24px; }
}

/* Three cabin types: one row of three; the glance row holds four. */
/* Three cabin types read as three full-width rows. */
@media (min-width: 901px) { .cabins__grid { grid-template-columns: 1fr; max-width: 980px; margin-left: auto; margin-right: auto; } }
/* Suite gallery: a lead photograph and up to four beside it, any count. */
.ss-gallery__grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; grid-auto-rows: 240px; height: auto; }
.ss-gallery .a { grid-column: span 2; grid-row: span 2; }
.ss-gallery__grid figure:nth-child(4):last-child { grid-column: span 2; }
@media (max-width: 900px) {
  .ss-gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .ss-gallery .a { grid-column: 1 / -1; grid-row: span 2; height: auto; }
  .ss-gallery figure { height: auto; }
}
.ss-facts__row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 700px) { .ss-facts__row { grid-template-columns: 1fr 1fr; } }
/* Suites hero standfirst reads over a bright photograph. */
.sp-hero__sub { color: #F4EDE0; text-shadow: 0 1px 14px rgba(0,0,0,.6); }

/* Critique 3 polish */
.ss-fact span { font-size: 12px; }
.ss-nav__lnk span { font-size: 12px; }
.ss-form .btn--filled, .ss-cta .btn--filled { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.sp-hero__chapter { color: #F4EDE0; font-size: 13px; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.dp-fact span { color: rgba(244,237,224,.74); }
.dh-band .eyebrow { color: #E0C284; }
.vessel-slider__dot { height: 44px; }
.rv-fixed { margin: 0; padding: 14px 16px; background: var(--cream-warm); border: 1px solid var(--hairline); font-size: 15px; color: var(--ink); }

/* One primary send; WhatsApp and email read as the quieter alternatives. */
.rv-actions { align-items: center; }
.rv-actions #rvwa, .rv-actions .rv-mail {
  background: none; border: 0; padding: 10px 4px; min-height: 44px;
  color: var(--brass); text-decoration: underline; text-underline-offset: 4px;
  font-family: 'Figtree', sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none;
}
.rv-actions #rvwa:hover, .rv-actions .rv-mail:hover { color: var(--ink); }

/* Critique 4 */
/* Journeys on the home page: five across on a desktop, aligned, no stagger. */
@media (min-width: 1121px) {
  .voyages__track { grid-auto-columns: calc((100% - 2 * var(--s-5) - 4 * var(--s-3)) / 5); gap: var(--s-3); }
  .voyages .voyage__name { font-size: 22px; }
}
.voyages .voyage--off { transform: none; }
/* Prices line up: every name reserves two lines. */
.voyages .voyage__name { min-height: 2.6em; display: flex; align-items: flex-end; }
.voyages__count { display: none; font-family: 'Figtree', sans-serif; font-size: 13px; color: #B8AC93; letter-spacing: .08em; }
@media (max-width: 620px) { .voyages__count { display: inline-block; } }
/* Crew avatars carry a role icon. */
.crew-card__avatar .ph-ico { width: 30px; height: 30px; }
/* Small text and contrast. */
.dst__meta, .dst__go { font-size: 12px; }
.dst__num { color: var(--brass); }
.pg-cta .btn--filled, .pg-cta__btns .btn--filled { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.ss-form__note { color: var(--muted); }
.vd-when { text-transform: none; letter-spacing: 0; font-style: italic; }

/* Five across: tighter type so every line holds on one line. */
@media (min-width: 1121px) {
  .voyages .voyage { aspect-ratio: 3 / 4.5; }
  .voyages .voyage__frame { inset: 10px; }
  .voyages .voyage__num { top: 20px; left: 22px; font-size: 40px; }
  .voyages .voyage__info { padding: 0 20px 22px; }
  .voyages .voyage__days { letter-spacing: .12em; font-size: 11.5px; gap: 8px; }
  .voyages .voyage__days::before { width: 16px; }
  .voyages .voyage__name { font-size: 21px; }
  .voyages .voyage__price { white-space: nowrap; font-size: 12px; }
  .voyages .voyage__go { padding: 10px 12px; letter-spacing: .08em; font-size: 11px; white-space: nowrap; }
}

/* ==========================================================================
   THE THREE KINDS OF CABIN
   A photograph each, side by side. The difference between a Deluxe Cabin
   and a Royal Suite is space and outlook — neither reads as a sentence,
   so the card leads with the picture and carries the count on it.
   ========================================================================== */
.cabins__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3); max-width: var(--max-content);
  margin: var(--s-5) auto 0; padding: 0 var(--s-5);
  align-items: stretch;
  /* The original two-column rule painted the hairline as the grid
     background and drew a frame round the lot; the cards carry their
     own borders now, so both have to be cleared explicitly. */
  background: none; border: 0;
}
.cabins__grid .cabin {
  display: flex; flex-direction: column; min-width: 0;
  /* The old .cabin was a three-column grid with s-5 padding. Left in
     place that padding insets the photograph by ~48px a side, which is
     why it did not fill the card. */
  padding: 0;
  background: var(--ivory); border: 1px solid var(--hairline);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.cabins__grid .cabin:hover {
  border-color: var(--gold);
  box-shadow: 0 22px 46px -26px rgba(14, 26, 43, .34);
  transform: translateY(-4px);
}
.cabin--premium { background: var(--cream-warm); }

.cabins__grid .cabin__media {
  position: relative; display: block; width: 100%; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--cream-warm);
}
.cabins__grid .cabin__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.cabins__grid .cabin:hover .cabin__media img { transform: scale(1.05); }

/* The count sits on the picture: how many of this kind are aboard is
   the first thing someone comparing the three wants. */
.cabin__count {
  position: absolute; left: 0; bottom: 0;
  background: var(--ink); color: var(--cream);
  font-family: 'Marcellus', serif; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px;
}
.cabin__count strong {
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 400; font-size: 15px; color: var(--gold); margin-right: 4px;
}

.cabin__body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--s-3) var(--s-3) var(--s-2);
}
.cabins__grid .cabin__num {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 18px; color: var(--brass-legible); line-height: 1;
}
.cabins__grid .cabin__name {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(21px, 2vw, 26px); color: var(--ink);
  margin: 4px 0 0; line-height: 1.12;
}
.cabins__grid .cabin__name a { color: inherit; text-decoration: none; }
.cabins__grid .cabin__origin {
  font-family: 'Marcellus', serif; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass-legible); margin-top: 6px;
  /* Two lines on all three, so the name blocks end at the same height
     whatever the deck wording is. */
  line-height: 1.5; min-height: calc(11px * 1.5 * 2);
}
.cabins__grid .cabin__desc {
  font-size: 15px; line-height: 1.6; color: var(--text-soft);
  margin: var(--s-2) 0 0;
}
.cabin__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}
.cabins__grid .cabin__size {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 17px; color: var(--ink);
}
.cabin__go {
  font-family: 'Marcellus', serif; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass-legible); text-decoration: none;
}
.cabins__grid .cabin:hover .cabin__go { color: var(--ink); }

@media (max-width: 980px) {
  .cabins__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cabins__grid { grid-template-columns: 1fr; gap: var(--s-3); padding: 0 var(--s-4); }
  .cabin__media { aspect-ratio: 16 / 10; }
}

/* What this type has that the others do not — the reason to pick it. */
.cabin__has {
  list-style: none; margin: var(--s-2) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  /* Takes the slack, so the rule below lands at the same height on all
     three cards however many lines this one has. */
  flex: 1;
}
.cabin__has li {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; line-height: 1.3; color: var(--ink);
}
.cabin__has .ph-ico {
  width: 20px; height: 20px; flex: 0 0 20px;
  color: var(--brass-legible);
}

/* The six things in every cabin: an icon above each, so the grid reads
   as a row of objects rather than six paragraphs. */
.inside-item__ico {
  display: block; margin-bottom: var(--s-3);
  color: var(--brass-legible);
}
/* The heading beside these is 22px, so a 26px icon read as a bullet
   rather than as the subject of the card. Large enough to be the first
   thing the eye lands on. */
.inside-item__ico .ph-ico { width: 44px; height: 44px; }
@media (max-width: 560px) { .inside-item__ico .ph-ico { width: 36px; height: 36px; } }


/* ==========================================================================
   PORT PAGES — the place, in pictures, and the practicalities
   These three sections carry the weight of a port page. They reuse the
   site's measures and tones; nothing new is introduced.
   ========================================================================== */
.dp-story { padding: var(--s-6) var(--s-5); background: var(--ivory); }
.dp-story__inner { max-width: 760px; margin: 0 auto; }
.dp-story h2 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3vw, 38px); color: var(--ink);
  line-height: 1.15; margin-bottom: var(--s-4);
}
.dp-story__body p {
  font-size: 17px; line-height: 1.75; color: var(--text-soft);
  margin-bottom: var(--s-3);
}
.dp-story__body p:last-child { margin-bottom: 0; }

.dp-gallery { padding: var(--s-7) var(--s-5); background: var(--cream); }
.dp-gallery__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3); max-width: var(--max-content); margin: 0 auto;
}
.dp-shot { margin: 0; }
.dp-shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--cream-warm);
}
.dp-shot figcaption {
  font-family: 'Figtree', sans-serif; font-size: 13px;
  color: var(--muted-legible); margin-top: 10px; line-height: 1.45;
}
/*
 * A uniform grid rather than a mosaic. The wide opening frame left its
 * row 438px tall beside 283px neighbours, and a port may carry three
 * photographs or seven -- one tile shape is the only arrangement whose
 * rows line up at every count.
 */
.dp-gallery__head { text-align: center; margin-bottom: var(--s-5); }
.dp-gallery__head h2 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: var(--t-h2); color: var(--ink); margin-top: var(--s-2);
}

.dp-prac { padding: var(--s-6) var(--s-5); background: var(--ink); color: var(--cream); }
.dp-prac__inner { max-width: var(--max-content); margin: 0 auto; }
.dp-prac h2 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(24px, 2.6vw, 32px); color: var(--cream);
  margin-bottom: var(--s-4);
}
.dp-prac__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-6); margin: 0;
}
.dp-prac__list > div { padding-bottom: var(--s-3); border-bottom: 1px solid rgba(201,169,110,.22); }
.dp-prac__list dt {
  font-family: 'Marcellus', serif; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.dp-prac__list dd { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(244,237,224,.88); }

@media (max-width: 900px) {
  .dp-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-prac__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dp-gallery__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   DAHABIYA OR CRUISE SHIP
   A table and two cases. Both reuse the site's measures and tones.
   ========================================================================== */
.cmp, .cmp-cases { padding: var(--s-6) var(--s-5); }
.cmp { background: var(--cream); }
.cmp-cases { background: var(--ivory); }
.cmp__head, .cmp-cases .cmp__head {
  max-width: 760px; margin: 0 auto var(--s-5); text-align: center;
}
.cmp__head h2 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3vw, 36px); color: var(--ink);
  margin-top: var(--s-2); line-height: 1.15;
}
.cmp__head p { color: var(--muted-legible); margin-top: var(--s-2); }

.cmp__wrap { max-width: var(--max-content); margin: 0 auto; overflow-x: auto; }
.cmp__table { width: 100%; border-collapse: collapse; background: var(--ivory); }
.cmp__table th, .cmp__table td {
  text-align: left; padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--hairline); vertical-align: top;
}
.cmp__table thead th {
  font-family: 'Marcellus', serif; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-legible); background: var(--cream-warm);
  border-bottom: 1px solid var(--gold); white-space: nowrap;
}
.cmp__table tbody th {
  font-family: 'Marcellus', serif; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); width: 22%;
}
.cmp__table td { font-size: 15px; line-height: 1.6; color: var(--text-soft); }
/* Our column is the one the page argues for, so it is marked — gently. */
.cmp__table .cmp__ours { color: var(--ink); background: rgba(201,169,110,.07); }
.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td { border-bottom: 0; }

.cmp-cases__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4); max-width: var(--max-content); margin: 0 auto;
}
.cmp-case {
  background: var(--cream); border: 1px solid var(--hairline);
  padding: var(--s-4);
}
.cmp-case--ours { background: var(--cream-warm); border-color: var(--gold); }
.cmp-case h3 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px); color: var(--ink); line-height: 1.2;
}
.cmp-case__lede { color: var(--text-soft); margin-top: var(--s-2); line-height: 1.65; }
.cmp-case ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cmp-case li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink); }
.cmp-case li .ph-ico { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--brass-legible); }

@media (max-width: 800px) {
  .cmp-cases__grid { grid-template-columns: 1fr; }
  .cmp__table tbody th { width: auto; }
}


/* ==========================================================================
   THE GALLERY
   One section per area of the boat. The mosaic gives the first frame of
   each set two columns, so a set reads as a composition rather than a
   contact sheet, and every tile is the same height so the rows align.
   ========================================================================== */

/* The jump bar sticks under the header while you move down the page. */
.gl-filter {
  position: sticky; top: var(--header-h, 78px); z-index: 20;
  background: rgba(244, 237, 224, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.gl-filter__inner {
  max-width: var(--max-content); margin: 0 auto;
  padding: 0 var(--s-5); display: flex; gap: var(--s-1);
  overflow-x: auto; scrollbar-width: none;
}
.gl-filter__inner::-webkit-scrollbar { display: none; }
.gl-filter__link {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 7px;
  padding: 16px 14px; text-decoration: none; white-space: nowrap;
  font-family: 'Marcellus', serif; font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-soft); border-bottom: 2px solid transparent;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.gl-filter__link:hover, .gl-filter__link:focus-visible {
  color: var(--ink); border-bottom-color: var(--gold);
}
.gl-filter__n {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 12px; color: var(--brass-legible);
}

.gl-set { padding: var(--s-6) var(--s-5); scroll-margin-top: calc(var(--header-h, 78px) + 54px); }
.gl-set--ivory { background: var(--ivory); }
.gl-set--cream { background: var(--cream); }

.gl-set__head { max-width: 680px; margin: 0 auto var(--s-5); text-align: center; }
.gl-set__num {
  display: block; font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 300; font-size: 15px; color: var(--brass-legible);
  letter-spacing: .1em; margin-bottom: var(--s-1);
}
.gl-set__head h2 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px); color: var(--ink); line-height: 1.12;
}
.gl-set__head p {
  font-size: 16px; line-height: 1.7; color: var(--text-soft);
  margin-top: var(--s-2);
}
.gl-set__go {
  display: inline-block; margin-top: var(--s-3);
  font-family: 'Marcellus', serif; font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass-legible); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 3px;
}
.gl-set__go:hover { color: var(--ink); }

.gl-mosaic {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2); max-width: var(--max-content); margin: 0 auto;
  grid-auto-rows: 1fr;
}
.gl-tile {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--cream-warm);
  cursor: zoom-in;
}
.gl-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease), filter var(--t-base) var(--ease);
}
.gl-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0) 55%, rgba(14,26,43,.26) 100%);
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.gl-tile:hover img, .gl-tile:focus-visible img { transform: scale(1.055); }
.gl-tile:hover::after, .gl-tile:focus-visible::after { opacity: 1; }
.gl-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The opening frame of each set is given the room it deserves. */
.gl-mosaic > .gl-tile:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

@media (max-width: 1100px) { .gl-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .gl-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-mosaic > .gl-tile:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
  .gl-set { padding: var(--s-5) var(--s-4); }
}


/* ==========================================================================
   GALLERY TEASER — on the home page
   Four tiles, each the opening frame of an area, each a door into that
   part of the gallery. Enough to show there is more without turning the
   home page into a contact sheet.
   ========================================================================== */
.gl-teaser { padding: var(--s-6) var(--s-5); background: var(--ivory); }
.gl-teaser__head { max-width: 640px; margin: 0 auto var(--s-5); text-align: center; }
.gl-teaser__head h2 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px); color: var(--ink);
  line-height: 1.12; margin-top: var(--s-2);
}
.gl-teaser__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2); max-width: var(--max-content); margin: 0 auto;
}
.gl-teaser__tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--cream-warm); text-decoration: none;
}
.gl-teaser__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease);
}
.gl-teaser__tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,43,0) 40%, rgba(14,26,43,.62) 100%);
}
.gl-teaser__tile:hover img, .gl-teaser__tile:focus-visible img { transform: scale(1.06); }
.gl-teaser__label {
  position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 1;
  font-family: 'Marcellus', serif; font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--cream);
}
.gl-teaser__foot { text-align: center; margin-top: var(--s-5); }

@media (max-width: 760px) {
  .gl-teaser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-teaser { padding: var(--s-5) var(--s-4); }
}