/* ==========================================================================
   Seasoned Sailor Getaways — brand stylesheet (child of Arenex Digital Theme)

   Ported 1:1 from the approved prototype (02-prototype). Loads AFTER the parent
   base + responsive + Customizer :root, so parent vars are available; every
   --ss-* token aliases a parent Customizer var and keeps the prototype value as
   fallback (THEME-RULES §4 child↔parent sync). Structural shades that must not
   drift from their measured-contrast partners stay fixed by intent.

   Measured contrast (WCAG 2.1 AA, 31 pairs audited):
     navy #052653 on gold-hi #E2B45C = 7.84:1 · on gold #D6A23A = 6.19:1
     text #4A5A70 on cream = 6.68:1 · muted #5F6E80 on cream = 4.96:1
     gold-ink #885E0B on cream = 5.47:1 · on sand #F2E4C4 = 4.56:1
     cream #F5EFE3 on navy = 13.02:1 · dim #B9C4D4 on navy = 8.45:1
   ========================================================================== */

/* ─────────────────────────────────────────────
   Self-hosted fonts — latin subset woff2, display:swap (HOUSE-STYLE).
   ───────────────────────────────────────────── */
/* Self-hosted Latin subsets (variable — one file per family+style, 164KB total).
   NEVER swap these for the Google CDN: the theme kills that handle on purpose. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/playfair-display-var.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url('../fonts/playfair-display-var-italic.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/montserrat-var.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:100 900;font-display:swap;src:url('../fonts/montserrat-var-italic.woff2') format('woff2');}
@font-face{font-family:'Allura';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/allura-400.woff2') format('woff2');}

/* ─────────────────────────────────────────────
   Tokens — alias the parent Customizer vars (fallback = prototype value).
   ───────────────────────────────────────────── */
:root{
  --ss-ground:  var(--bg-color, #FBF9F5);
  --ss-ground-2:var(--bg-alt, #F3EEE4);
  --ss-ground-3:var(--border-color, #E6DECE);
  --ss-ground-4:#D2C7B2;               /* structural: route dashes, pills */
  --ss-border-ui:#938873;              /* structural: 3.32:1 UI borders   */
  --ss-fg:      var(--heading-color, #052653);
  --ss-fg-dim:  var(--text-color, #4A5A70);
  --ss-fg-mute: var(--muted-color, #5F6E80);
  --ss-deep:    var(--primary-color, #052653);
  --ss-deep-2:  #0C3665;               /* structural: navy card layer     */
  --ss-deep-3:  var(--primary-light, #144173);
  --ss-on-deep:#F5EFE3; --ss-on-deep-dim:#B9C4D4;   /* measured on navy  */
  --ss-accent:  var(--accent-color, #D6A23A);
  /* Light/dark partners derive from the Customizer accent so changing the brand
     colour actually moves the buttons. Falls back to the measured pair. */
  --ss-accent-hi: color-mix(in srgb, var(--ss-accent) 84%, #FFFFFF);
  --ss-accent-ink: color-mix(in srgb, var(--ss-accent) 55%, #000000);
  --ss-on-accent:#052653;
  --ss-focus:#052653;
  --ss-sand:#F2E4C4; --ss-teal:#087A91; /* kit: chips-only / reserved */
  --ss-font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --ss-font-body:'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ss-font-script:'Allura', 'Snell Roundhand', cursive;
  /* Hard-set the parent font vars too (pre-flight §1.2 — the parent resolver
     has a hardcoded default and won't pick up 'custom' on its own). */
  --font-display: var(--ss-font-display);
  --font-body:    var(--ss-font-body);
  /* Logo size is a Customizer control (Header & Footer → Logo Height); the
     overlay menu's top clearance is derived from it so they never drift. */
  --ssg-logo: var(--logo-height, 96px);
  --ease:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}

/* ─────────────────────────────────────────────
   Base
   ───────────────────────────────────────────── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--ss-ground);color:var(--ss-fg);
  font-family:var(--ss-font-body);font-size:var(--body-size, 1.0625rem);
  line-height:var(--body-line-height, 1.7);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--ss-accent-ink);}
/* dual-ring focus: cream inner+outer, navy middle — ≥3:1 on cream AND navy */
:focus-visible{outline:2px solid var(--ss-focus);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 8px rgba(245,239,227,.95);}
.wrap{max-width:var(--container-max-width, 1240px);margin:0 auto;padding:0 var(--container-padding, 28px);}
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Parent base.css adds heading margin-bottom — reset to the prototype rhythm
   (pre-flight §1.3). Sizes come from the parent responsive type vars. */
h1,h2,h3,h4,h5,h6{font-family:var(--ss-font-display);font-weight:var(--heading-weight, 600);letter-spacing:-.015em;text-wrap:balance;margin:0;}
/* Size comes straight from the Customizer's Desktop/Tablet/Mobile values. A
   vw-based clamp was here, but its vw term beat the token at tablet and mobile,
   so the size controls silently did nothing below desktop. */
h2{font-size:var(--h2-size, 3.4rem);line-height:var(--h2-line-height, 1.02);}
h3{font-size:var(--h3-size, 1.3rem);line-height:var(--h3-line-height, 1.22);}
p{margin:0 0 1rem;}
p:last-child{margin-bottom:0;}
.lead{font-size:1.1875rem;color:var(--ss-fg-dim);}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--ss-accent-ink);border:1px solid var(--ss-ground-4);border-radius:999px;
  padding:6px 14px;margin:0 0 22px;background:var(--ss-sand);
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ss-accent);}
section{padding:var(--section-padding, 6.5rem) 0;}
.sec-head{max-width:64ch;margin-bottom:3.5rem;}
.sec-head p{color:var(--ss-fg-dim);margin-top:18px;max-width:56ch;}
.js .rv{opacity:0;transform:translateY(36px);filter:blur(7px);
  transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s var(--ease);}
.js .rv.in{opacity:1;transform:none;filter:none;}
.js .rv[data-d="1"]{transition-delay:.09s}
.js .rv[data-d="2"]{transition-delay:.18s}
.js .rv[data-d="3"]{transition-delay:.27s}

/* WordPress essentials */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--ss-deep);
  color:var(--ss-on-deep);padding:12px 22px;border-radius:0 0 12px 0;font-weight:600;
}
.skip-link:focus{left:0;}
.screen-reader-text{
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;
}
/* The approved design holds its vertical rhythm at EVERY width — the prototype
   has section{padding:7.5rem 0} and .wrap{padding:0 28px} with NO media override.
   Body size/leading are re-asserted here because the parent's responsive.css
   drops them; the container gutter is NOT — it is a Customizer control with
   Desktop/Tablet/Mobile steps, and hardcoding it here made the control dead
   below 768px. Its 28px design default comes from arenex_default_overrides. */
@media (max-width:1024px){ :root{ --body-line-height:1.7; --body-size:1.0625rem; } }
@media (max-width:768px){ :root{ --body-line-height:1.7; --body-size:1.0625rem; } }
/* The HOME page ran a taller rhythm than the inner pages (7.5rem vs 6.5rem). */
/* Home ran a taller rhythm than the inner pages — but NOT for background bands,
   which carry their own (larger) padding from the Band control. */
@media (min-width:769px){ body.home section:not(.about){ padding:calc(var(--section-padding, 6.5rem) + 1rem) 0; } }

/* Sticky nav shrinks once you scroll — full-size logo at the top of the page,
   compact pill after. Scales off the Customizer logo height so it can't drift. */
body.nav-shrink{ --ssg-logo-now: calc(var(--ssg-logo, 96px) * .66); --ssg-nav-pad: 5px; }
body.nav-shrink .nav{ box-shadow:0 18px 44px -26px rgba(5,38,83,.42); background:rgba(251,249,245,.93); }
@media (prefers-reduced-motion:reduce){
  .nav,.nav__logo img{ transition:none; }
}

/* Fixed pill nav vs the logged-in admin bar (pre-flight §1.5). */
.admin-bar .nav{top:calc(16px + 32px);}
@media screen and (max-width:782px){.admin-bar .nav{top:calc(16px + 46px);}}

/* ─────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--ss-font-body);font-size:.9375rem;font-weight:600;letter-spacing:.02em;
  padding:9px 9px 9px 26px;border-radius:999px;text-decoration:none;cursor:pointer;
  line-height:var(--body-line-height, 1.7); /* parent forces 1 — prototype inherits body */
  white-space:nowrap; /* "Reserve your cabin" was breaking across two lines on a phone */
  transition:transform .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease),filter .45s var(--ease),border-color .45s var(--ease);
}
.btn:active{transform:scale(.98);}
.btn__ico{
  flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:400;font-size:1rem;flex:none;transition:transform .5s var(--ease);
}
.btn:hover .btn__ico{transform:translate(3px,-1px);}
/* Hover holds the button's colour and lifts it instead. No sweep overlay: it
   washed the label out, and clipping it needed overflow:hidden, which also
   clipped the focus ring. */
.btn{position:relative;}
.btn--primary{background:var(--ss-accent-hi);color:var(--ss-on-accent);border:1px solid var(--ss-accent-ink);} /* 7.84:1 */
/* background + colour are re-asserted, not inherited: the PARENT stylesheet has
   .btn--primary:hover{background:var(--primary-dark);color:#fff} which outranks
   the child's plain .btn--primary. Without these two lines the button flipped to
   dark navy on hover while .btn__ico kept its navy arrow — navy on navy, so the
   arrow looked like it vanished. */
.btn--primary:hover{background:var(--ss-accent-hi);color:var(--ss-on-accent);box-shadow:0 16px 34px -16px rgba(136,94,11,.5);transform:translateY(-2px);filter:brightness(1.04);} /* same gold, just lifted */
.btn--primary:hover .btn__ico{background:rgba(5,38,83,.14);color:var(--ss-on-accent);}
.btn--primary .btn__ico{background:rgba(5,38,83,.14);color:var(--ss-on-accent);}
.btn--ghost{background:transparent;color:var(--ss-on-deep);border:1px solid rgba(245,239,227,.4);}
.btn--ghost:hover{background:rgba(245,239,227,.12);color:var(--ss-on-deep);border-color:rgba(245,239,227,.6);} /* parent forces #fff otherwise */
.btn--ghost .btn__ico{background:rgba(245,239,227,.14);color:var(--ss-on-deep);}
.btn--quiet{background:transparent;color:var(--ss-fg);border:1px solid var(--ss-border-ui);}
.btn--quiet:hover{border-color:var(--ss-fg);box-shadow:0 12px 26px -16px rgba(5,38,83,.4);transform:translateY(-2px);}
.btn--quiet .btn__ico{background:rgba(5,38,83,.07);color:var(--ss-fg);}

/* double bezel */
.bez{background:rgba(5,38,83,.05);border:1px solid rgba(5,38,83,.09);border-radius:calc(var(--radius, 22px) + 4px);padding:8px;}
.bez__in{border-radius:calc(var(--radius, 22px) - 4px);overflow:hidden;display:block;}
.bez--deep{background:rgba(245,239,227,.07);border-color:rgba(245,239,227,.16);}

/* ─────────────────────────────────────────────
   Island nav (menu items come from wp_nav_menu → li > a)
   ───────────────────────────────────────────── */
.nav{
  position:fixed;top:16px;left:0;right:0;margin-inline:auto;width:min(1240px,calc(100% - 28px));z-index:90;
  display:flex;align-items:center;gap:6px;max-width:calc(100% - 28px);
  padding:var(--ssg-nav-pad, 8px) var(--ssg-nav-pad, 8px) var(--ssg-nav-pad, 8px) 16px;border-radius:999px;
  transition:padding .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
  background:rgba(251,249,245,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(5,38,83,.10);
  box-shadow:0 24px 60px -30px rgba(5,38,83,.35);
}
.nav__logo{display:flex;align-items:center;gap:var(--gap-sm, 14px);text-decoration:none;color:var(--ss-fg);margin-right:auto;flex:none;}
.nav__logo img{width:var(--ssg-logo-now, var(--ssg-logo, 96px));height:var(--ssg-logo-now, var(--ssg-logo, 96px));transition:width .35s var(--ease),height .35s var(--ease);border-radius:50%;background:#FFFFFF;padding:4px;border:1px solid rgba(5,38,83,.08);}
.nav__logo span{font-family:var(--ss-font-display);font-size:1.125rem;font-weight:700;white-space:nowrap;}
.nav__links{display:flex;gap:4px;list-style:none;margin:0;padding:0;}
.nav__links a{
  font-size:var(--menu-size, .875rem);font-weight:400;color:var(--ss-fg);text-decoration:none;display:block;
  padding:8px 11px;border-radius:999px;transition:background .4s var(--ease);white-space:nowrap;
}
.nav__links a:hover{background:rgba(5,38,83,.07);}
.nav__links .current-menu-item a,.nav__links .current_page_item a{background:rgba(5,38,83,.07);}
.nav__tel{font-size:.875rem;font-weight:500;color:var(--ss-fg);text-decoration:none;padding:8px 12px;white-space:nowrap;}
.nav__cta{
  font-size:.8125rem;font-weight:600;color:var(--ss-on-accent);text-decoration:none;
  background:var(--ss-accent-hi);border:1px solid var(--ss-accent-ink);border-radius:999px;
  padding:9px 18px;white-space:nowrap;transition:background .4s var(--ease);
}
.nav__cta:hover{background:var(--ss-accent);}
.nav__burger{
  display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(5,38,83,.14);
  background:transparent;cursor:pointer;position:relative;flex:none;padding:0;
}
.nav__burger span{
  position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ss-fg);
  transition:transform .55s var(--ease),top .55s var(--ease);
}
.nav__burger span:nth-child(1){top:17px;}
.nav__burger span:nth-child(2){top:25px;}
body.menu-open .nav__burger span:nth-child(1){top:21px;transform:rotate(45deg);}
body.menu-open .nav__burger span:nth-child(2){top:21px;transform:rotate(-45deg);}
@media (max-width:1320px){.nav__tel{display:none;}}
@media (max-width:1180px){
  .nav__links,.nav__cta{display:none;}
  .nav__burger{display:block;}
}
@media (max-width:640px){
  /* Parent v1.3.0 emits --logo-height per breakpoint from its own Customizer
     controls (Header Logo Height + tablet/mobile), so we just follow it. */
  .nav__logo span{font-size:1rem;}
}
.menu-veil{
  position:fixed;inset:0;z-index:85;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(4,30,64,.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;pointer-events:none;transition:opacity .6s var(--ease);
  /* Clear the floating pill, and scroll rather than clip on short screens.
     justify-content:center would make overflow unreachable ABOVE the centre —
     auto margins centre it when there is room and collapse when there isn't. */
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--ssg-logo, 96px) + 58px) 20px 44px;
}
.menu-veil ul{margin-top:auto;}
.menu-veil small{margin-bottom:auto;}
/* logged-in: the admin bar sits over the veil too */
.admin-bar .menu-veil{padding-top:calc(var(--ssg-logo, 96px) + 58px + 32px);}
@media screen and (max-width:782px){
  .admin-bar .menu-veil{padding-top:calc(var(--ssg-logo, 96px) + 58px + 46px);}
}
body.menu-open .menu-veil{opacity:1;pointer-events:auto;}
.menu-veil ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;}
.menu-veil a{
  font-family:var(--ss-font-display);font-size:clamp(1.9rem,7vw,3rem);font-weight:600;display:block;
  color:var(--ss-on-deep);text-decoration:none;padding:6px 18px;
  opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease),color .4s var(--ease);
}
.menu-veil a:hover{color:var(--ss-accent-hi);}
body.menu-open .menu-veil a{opacity:1;transform:none;}
body.menu-open .menu-veil li:nth-child(1) a{transition-delay:.08s}
body.menu-open .menu-veil li:nth-child(2) a{transition-delay:.14s}
body.menu-open .menu-veil li:nth-child(3) a{transition-delay:.20s}
body.menu-open .menu-veil li:nth-child(4) a{transition-delay:.26s}
body.menu-open .menu-veil li:nth-child(5) a{transition-delay:.32s}
body.menu-open .menu-veil li:nth-child(6) a{transition-delay:.38s}
body.menu-open .menu-veil li:nth-child(7) a{transition-delay:.44s}
.menu-veil small{font-size:.875rem;color:var(--ss-on-deep-dim);margin-top:26px;letter-spacing:.08em;
  opacity:0;transition:opacity .7s var(--ease) .45s;}
body.menu-open .menu-veil small{opacity:1;}

/* ─────────────────────────────────────────────
   Interior page hero
   ───────────────────────────────────────────── */
.phero{padding:var(--section-padding-hero, 10.5rem) 0 4rem;border-bottom:1px solid var(--ss-ground-3);}
.phero h1{font-size:var(--page-title-size, 4.4rem);line-height:var(--page-title-line-height, .98);margin:0 0 18px;}
.phero h1 em{font-style:italic;color:var(--ss-accent-ink);}
.phero__lead{font-size:1.1875rem;color:var(--ss-fg-dim);max-width:58ch;}
.phero__kicker{font-family:var(--ss-font-display);font-style:italic;font-size:1.3rem;margin-top:8px;}

/* ─────────────────────────────────────────────
   Portholes
   ───────────────────────────────────────────── */
.ports{background:var(--ss-ground-2);border-top:1px solid var(--ss-ground-3);border-bottom:1px solid var(--ss-ground-3);}
.ports__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 36px;}
.port-item{display:flex;flex-direction:column;align-items:center;text-align:center;}
.port-ring{
  width:min(100%,232px);aspect-ratio:1;border-radius:50%;padding:9px;
  background:var(--ss-ground);border:1px solid rgba(5,38,83,.10);
  box-shadow:0 30px 55px -34px rgba(5,38,83,.45);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}
.port-item:hover .port-ring{transform:translateY(-7px);box-shadow:0 44px 70px -38px rgba(5,38,83,.5);}
.port-ring b{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid var(--ss-accent);}
.port-ring img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.port-item:hover .port-ring img{transform:scale(1.07);}
.port-item h3{font-size:1.15rem;margin:22px 0 8px;}
.port-item p{color:var(--ss-fg-dim);font-size:.9375rem;max-width:32ch;margin:0;}
@media (max-width:900px){.ports__grid{grid-template-columns:repeat(2,1fr);gap:40px 22px;}}
/* Below ~380px the longest label ("Set Sail The Virgin Way") can't fit on one
   line without forcing its card wider than the screen — let it wrap there.
   Every current iPhone (375/390/393/430) stays on one line. */
@media (max-width:380px){ .btn{ white-space:normal; } }

@media (max-width:560px){.ports__grid{grid-template-columns:1fr;}}

/* ─────────────────────────────────────────────
   Deck rows (services)
   ───────────────────────────────────────────── */
.svc{border-top:1px solid var(--ss-ground-3);}
.svc__row{
  display:grid;grid-template-columns:130px 1fr 64px;gap:36px;align-items:start;
  padding:44px 10px;border-bottom:1px solid var(--ss-ground-3);
  transition:background .6s var(--ease);border-radius:14px;text-decoration:none;color:inherit;
}
.svc__row:hover{background:var(--ss-ground-2);}
.svc__num{display:flex;flex-direction:column;gap:2px;}
.svc__num b{font-family:var(--ss-font-display);font-style:italic;font-size:2.6rem;font-weight:500;color:var(--ss-accent-ink);line-height:1;}
.svc__num span{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--ss-fg-mute);}
.svc__row h3{font-size:1.55rem;margin-bottom:10px;}
.svc__row p{color:var(--ss-fg-dim);max-width:66ch;margin:0;}
.svc__go{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--ss-border-ui);
  display:flex;align-items:center;justify-content:center;color:var(--ss-fg);
  font-size:1.1rem;justify-self:end;align-self:center;
  transition:transform .6s var(--ease),background .6s var(--ease),color .6s var(--ease);
}
.svc__row:hover .svc__go{background:var(--ss-accent-hi);color:var(--ss-on-accent);transform:translate(4px,-2px);border-color:var(--ss-accent-ink);}
@media (max-width:760px){
  .svc__row{grid-template-columns:1fr;gap:12px;padding:32px 6px;}
  .svc__go{display:none;}
}

/* ─────────────────────────────────────────────
   Voyages + routes
   ───────────────────────────────────────────── */
.voyage{margin-bottom:34px;}
.voyage .bez{transition:transform .7s var(--ease),box-shadow .7s var(--ease);}
.voyage:hover .bez{transform:translateY(-6px);box-shadow:0 46px 80px -44px rgba(5,38,83,.4);}
.voyage__card{background:var(--ss-ground);display:grid;grid-template-columns:.9fr 1.1fr;min-height:var(--media-split-height, 340px);}
.voyage--flip .voyage__card{grid-template-columns:1.1fr .9fr;}
.voyage__media{position:relative;overflow:hidden;}
.voyage__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.voyage:hover .voyage__media img{transform:scale(1.045);}
.voyage__date{
  position:absolute;top:16px;left:16px;font-size:.75rem;font-weight:600;letter-spacing:.06em;
  background:rgba(251,249,245,.9);backdrop-filter:blur(8px);color:var(--ss-fg);
  border:1px solid rgba(5,38,83,.12);border-radius:999px;padding:6px 13px;
}
.voyage__body{padding:38px 40px 34px;display:flex;flex-direction:column;}
.voyage__line{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ss-accent-ink);margin-bottom:8px;}
.voyage__body h3{font-size:1.7rem;margin-bottom:6px;}
.voyage__sub{color:var(--ss-fg-dim);font-size:.9375rem;margin:0 0 22px;}
.voyage__sub b{color:var(--ss-fg);font-weight:500;}
.voyage__price{font-size:.9375rem;color:var(--ss-fg-dim);}
.voyage__price b{font-family:var(--ss-font-display);font-size:1.15rem;color:var(--ss-fg);font-weight:600;}
.route{display:flex;align-items:flex-start;overflow-x:auto;padding:10px 2px 18px;margin-bottom:20px;}
/* The full itinerary should READ, not scroll: from tablet up the ports compress
   to fit their column, so no scrollbar appears at all. Below that the strip
   scrolls, with a slim on-brand bar (the native 15px one reads as a glitch). */
@media (min-width:701px){
  .route .route__port{min-width:0;}
  .route .route__port span{max-width:100%;}
}
.route::-webkit-scrollbar{height:5px;}
.route::-webkit-scrollbar-track{background:transparent;}
.route::-webkit-scrollbar-thumb{background:var(--ss-ground-4);border-radius:99px;}
/* Firefox has no ::-webkit-scrollbar — give it the standard property instead
   (setting it in Chrome would override the 5px rule above with an 11px bar). */
@supports not selector(::-webkit-scrollbar){
  .route{scrollbar-width:thin;scrollbar-color:var(--ss-ground-4) transparent;}
}
.route__port{display:flex;flex-direction:column;align-items:center;flex:1;min-width:84px;position:relative;}
.route__port::before{
  content:"";width:11px;height:11px;border-radius:50%;background:var(--ss-accent);
  border:2px solid var(--ss-accent-ink);flex:none;
}
.route__port:not(:last-child)::after{
  content:"";position:absolute;top:6px;left:calc(50% + 12px);right:calc(-50% + 12px);
  border-top:2px dashed var(--ss-ground-4);
}
.route__port span{font-size:.8125rem;color:var(--ss-fg-dim);margin-top:10px;text-align:center;line-height:1.3;max-width:90px;}
.route__port--sea::before{background:var(--ss-ground);border-color:var(--ss-ground-4);}
.route__port--sea span{font-style:italic;color:var(--ss-fg-mute);}
.voyage__foot{display:flex;align-items:center;gap:20px;margin-top:auto;flex-wrap:wrap;}
@media (max-width:900px){
  .voyage__card,.voyage--flip .voyage__card{grid-template-columns:1fr;}
  /* single-column: let the track collapse so wide children can't push the page */
  .voyage__media,.voyage__body{min-width:0;}
  /* ...and the photo always leads, even on cards flipped for desktop */
  .voyage__card .voyage__media{order:0;}
  .voyage__card .voyage__body{order:1;}
  .voyage__media{min-height:230px;}
  .voyage__body{padding:28px 24px 26px;}
}

/* ─────────────────────────────────────────────
   Milestone steps
   ───────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:38px 30px;counter-reset:step;}
.steps--3{grid-template-columns:repeat(3,1fr);}
.step{position:relative;}
.step__dot{
  width:52px;height:52px;border-radius:50%;background:var(--ss-sand);
  border:1px solid var(--ss-accent-ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--ss-font-display);font-style:italic;font-weight:600;font-size:1.2rem;
  color:var(--ss-accent-ink);margin-bottom:20px;position:relative;z-index:1;
}
.step:not(:last-child)::before{
  content:"";position:absolute;top:26px;left:68px;right:-16px;
  border-top:2px dashed var(--ss-ground-4);
}
.step h3{font-size:1.15rem;margin-bottom:8px;}
.step p{font-size:.9375rem;color:var(--ss-fg-dim);margin:0;line-height:1.6;}
.steps--v{display:flex;flex-direction:column;gap:26px;}
.steps--v .step{display:grid;grid-template-columns:52px 1fr;gap:2px 20px;}
.steps--v .step__dot{margin-bottom:0;grid-row:span 2;}
.steps--v .step:not(:last-child)::before{
  top:60px;left:25px;right:auto;bottom:-20px;border-top:0;border-left:2px dashed var(--ss-ground-4);
}
.steps--v .step h3{align-self:center;font-size:1.05rem;margin:0;}
.steps--v .step p{font-size:.875rem;}
@media (max-width:860px){
  .steps,.steps--3{display:flex;flex-direction:column;gap:26px;}
  .step{display:grid;grid-template-columns:52px 1fr;gap:2px 20px;}
  .step__dot{margin-bottom:0;grid-row:span 2;}
  .step:not(:last-child)::before{top:60px;left:25px;right:auto;bottom:-20px;border-top:0;border-left:2px dashed var(--ss-ground-4);}
  .step h3{align-self:center;margin:0;}
}

/* ─────────────────────────────────────────────
   Itinerary table
   ───────────────────────────────────────────── */
.itin{margin:6px 0 20px;}
.itin summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font-size:.875rem;font-weight:600;color:var(--ss-accent-ink);
}
.itin summary::-webkit-details-marker{display:none;}
.itin summary::after{content:"+";font-size:1rem;transition:transform .4s var(--ease);}
.itin[open] summary::after{transform:rotate(45deg);}
.itin__scroll{overflow-x:auto;margin-top:14px;}
.itin table{border-collapse:collapse;width:100%;min-width:430px;font-size:.9375rem;}
.itin th{
  text-align:left;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ss-fg-mute);padding:0 16px 9px 0;border-bottom:1px solid var(--ss-ground-4);
}
.itin td{padding:10px 16px 10px 0;border-bottom:1px solid var(--ss-ground-3);color:var(--ss-fg-dim);font-variant-numeric:tabular-nums;}
.itin td:first-child{font-family:var(--ss-font-display);font-weight:600;color:var(--ss-accent-ink);}
.itin td b{color:var(--ss-fg);font-weight:500;}
.itin .sea td{font-style:italic;color:var(--ss-fg-mute);}
.itin__note{font-size:.8125rem;color:var(--ss-fg-mute);margin-top:10px;}

/* ─────────────────────────────────────────────
   Navy band
   ───────────────────────────────────────────── */
.band{background:var(--ss-deep);color:var(--ss-on-deep);position:relative;overflow:hidden;padding:7.5rem 0;}
.band h2{color:var(--ss-on-deep);}
.band .eyebrow{color:var(--ss-accent-hi);border-color:rgba(245,239,227,.22);background:rgba(245,239,227,.06);}
.band .eyebrow::before{background:var(--ss-accent-hi);}
.band p{color:var(--ss-on-deep-dim);}
.band__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center;}
.band__photo{transform:rotate(-1.4deg);}
.band__photo img{aspect-ratio:4/5;object-fit:cover;width:100%;}
.quote{border-left:3px solid var(--ss-accent);padding:8px 0 8px 24px;margin:30px 0;}
.quote blockquote{margin:0;font-family:var(--ss-font-display);font-style:italic;font-size:1.65rem;line-height:1.25;color:var(--ss-on-deep);}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:.8125rem;color:var(--ss-on-deep-dim);letter-spacing:.08em;}
@media (max-width:900px){.band__grid{grid-template-columns:1fr;gap:40px;}.band__photo{transform:none;}}

/* ─────────────────────────────────────────────
   Trio cards (plain + photo-overlay)
   ───────────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-md, 24px);}
.trio__card{background:var(--ss-ground);border:1px solid var(--ss-ground-3);border-radius:calc(var(--radius, 22px) - 2px);padding:30px 28px;}
.trio__card h3{font-size:1.2rem;margin-bottom:10px;}
.trio__card p{color:var(--ss-fg-dim);font-size:.9375rem;margin:0;}
.trio__n{font-family:var(--ss-font-display);font-style:italic;font-size:1.6rem;color:var(--ss-accent-ink);display:block;margin-bottom:12px;}
.trio--ph .trio__card{position:relative;padding:0;overflow:hidden;min-height:clamp(430px,40vw,540px);display:flex;align-items:flex-end;}
.trio--ph .trio__media{position:absolute;inset:0;}
.trio--ph .trio__media img{width:100%;height:100%;object-fit:var(--mf, cover);object-position:var(--mp, center);display:block;transition:transform 1.1s var(--ease);}
.trio--ph .trio__card:hover .trio__media img{transform:scale(1.05);}
.trio--ph .trio__media::after{
  content:"";position:absolute;inset:0;
  /* measured: gold title ≥3.69:1, cream body ≥10.6:1 over worst-case white imagery */
  background:linear-gradient(180deg,rgba(5,38,83,0) 22%,rgba(5,38,83,.62) 48%,rgba(5,38,83,.96) 70%,rgba(5,38,83,.97) 100%);
}
.trio--ph .trio__body{position:relative;z-index:1;padding:150px 26px 28px;}
.trio--ph .trio__n{margin-bottom:8px;color:var(--ss-accent-hi);} /* 7.84:1 on deep scrim */
.trio--ph .trio__body p{color:var(--ss-on-deep);font-size:.9375rem;margin:0;}
@media (max-width:860px){.trio{grid-template-columns:1fr;}}

/* ─────────────────────────────────────────────
   Checklists
   ───────────────────────────────────────────── */
.check{columns:2;column-gap:var(--gap-lg, 44px);margin:18px 0 6px;padding:0;list-style:none;max-width:70ch;}
.check li{
  break-inside:avoid;position:relative;padding:5px 0 5px 26px;color:var(--ss-fg-dim);font-size:1.0625rem;
}
.check li::before{
  content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;border-radius:50%;
  background:var(--ss-accent);border:1px solid var(--ss-accent-ink);
}
@media (max-width:640px){.check{columns:1;}}

/* ─────────────────────────────────────────────
   Shop list rows
   ───────────────────────────────────────────── */
.listrow{
  border:1px solid var(--ss-ground-3);border-radius:calc(var(--radius, 22px) + 2px);background:var(--ss-ground);
  padding:42px 44px;margin-bottom:26px;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.listrow--media{display:grid;grid-template-columns:340px 1fr;padding:0;overflow:hidden;}
.listrow--media .listrow__media{position:relative;min-height:var(--media-card-height, 260px);}
.listrow--media .listrow__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.listrow--media:hover .listrow__media img{transform:scale(1.045);}
.listrow--media .listrow__body{padding:38px 44px;min-width:0;}
article.listrow--media:nth-of-type(even){grid-template-columns:1fr 340px;}
article.listrow--media:nth-of-type(even) .listrow__media{order:2;}
@media (max-width:900px){
  .listrow--media,article.listrow--media:nth-of-type(even){grid-template-columns:1fr;}
  article.listrow--media:nth-of-type(even) .listrow__media{order:0;}
  .listrow--media .listrow__media{min-height:210px;}
  .listrow--media .listrow__body{padding:26px 22px;}
}
.listrow:hover{transform:translateY(-4px);box-shadow:0 40px 70px -46px rgba(5,38,83,.4);}
.listrow__top{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:10px;}
.listrow__top h3{font-size:1.5rem;}
.listrow__count{
  font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--ss-accent-ink);
  border:1px solid var(--ss-ground-4);border-radius:999px;padding:4px 12px;background:var(--ss-ground-2);
  font-variant-numeric:tabular-nums;
}
.listrow>p{color:var(--ss-fg-dim);max-width:74ch;}
.listrow .btn{margin-top:18px;}
.listrow__tip{
  background:var(--ss-ground-2);border-left:3px solid var(--ss-accent);border-radius:0 12px 12px 0;
  padding:14px 18px;margin:18px 0 4px;font-size:.9375rem;color:var(--ss-fg-dim);max-width:70ch;
}
@media (max-width:700px){.listrow{padding:28px 22px;}}

/* ─────────────────────────────────────────────
   Shop card grid — 2-up, photos on feature cards only
   ───────────────────────────────────────────── */
.shopg{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-md, 26px);align-items:stretch;}
.shopg__card{
  background:var(--ss-ground);border:1px solid var(--ss-ground-3);border-radius:var(--radius, 22px);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.shopg__card:hover{transform:translateY(-4px);box-shadow:0 40px 70px -46px rgba(5,38,83,.4);}
.shopg__media{position:relative;aspect-ratio:1.9/1;flex:none;}
.shopg__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease);}
.shopg__card:hover .shopg__media img{transform:scale(1.05);}
.shopg__media .shopg__count{
  position:absolute;left:14px;bottom:14px;color:var(--ss-fg);
  background:rgba(251,249,245,.92);border-color:rgba(5,38,83,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.shopg__count{
  font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--ss-accent-ink);
  background:var(--ss-ground-2);border:1px solid var(--ss-ground-4);
  border-radius:999px;padding:4px 12px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.shopg__body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1;min-width:0;}
.shopg__body h3{font-size:1.35rem;margin-bottom:12px;}
.shopg__body .shopg__count{align-self:flex-start;margin:0 0 14px;}
.shopg__body>p{color:var(--ss-fg-dim);font-size:.9375rem;}
.shopg__body .btn{margin-top:auto;align-self:flex-start;}
.shopg .checkd{margin-bottom:20px;}
.shopg .check{columns:1;}
.shopg .listrow__tip{font-size:.875rem;}
/* full-width horizontal feature card */
.shopg__card--feat{grid-column:1/-1;display:grid;grid-template-columns:0.85fr 1.15fr;}
.shopg__card--feat .shopg__media{aspect-ratio:auto;position:relative;min-height:var(--media-split-height, 320px);height:100%;}
.shopg__card--feat .shopg__media img{position:absolute;inset:0;}
.shopg__card--featR .shopg__media{order:2;}
/* The feature card's side-by-side split stretched its photo into a tall, badly
   cropped column on tablets — stack it from tablet down, photo on top like
   every other shop card. */
@media (max-width:1024px){
  .shopg__card--feat{grid-template-columns:1fr;}
  .shopg__card--feat .shopg__media{aspect-ratio:1.6/1;min-height:0;height:auto;order:0;}
  .shopg__card--featR .shopg__media{order:0;}
}
@media (max-width:760px){
  .shopg{grid-template-columns:1fr;}
  /* 1.9:1 was a letterbox on a phone — give the photos real height so faces
     and subjects aren't cropped to a strip. */
  .shopg__media{aspect-ratio:1.3/1;}
  .shopg__card--feat .shopg__media{aspect-ratio:1.15/1;}
  .shopg__card--feat{grid-template-columns:1fr;}
  .shopg__card--featR .shopg__media{order:0;}
}

/* collapsible checklist inside shop rows */
.checkd{margin:4px 0 18px;}
.checkd summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font-size:.875rem;font-weight:600;color:var(--ss-accent-ink);
}
.checkd summary::-webkit-details-marker{display:none;}
.checkd summary::after{content:"+";font-size:1rem;transition:transform .4s var(--ease);}
.checkd[open] summary::after{transform:rotate(45deg);}

/* ─────────────────────────────────────────────
   Read more — the client's full write-up, in a dialog.
   The cards sit in a grid, so expanding one inline stretched its row and
   distorted the photo. A dialog leaves the grid untouched.
   ───────────────────────────────────────────── */
/* One list per row — photo left, her full write-up right. Every card is a
   feature card now, so the grid collapses to a single column. */
.shopg{grid-template-columns:minmax(0,1fr);}
.shopg__card--feat .shopg__body{display:flex;flex-direction:column;}
.shopg__body>p{margin:0 0 13px;}
.shopg__body>p:last-of-type{margin-bottom:18px;}

/* The two actions sit together: checklist opens a dialog, Shop leaves the site. */
.shopg__actions{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:auto;padding-top:6px;
}
.shopg__actions .btn{margin-top:0;}
.moredlg .check{columns:1;margin:0;padding-left:1.1em;}
.moredlg .check li{margin-bottom:7px;color:var(--ss-fg-dim);font-size:.9375rem;}
.moredlg .listrow__tip{margin-top:14px;}

.moredlg{
  border:0;padding:0;background:transparent;
  max-width:min(640px,calc(100vw - 32px));width:100%;
  max-height:min(80vh,760px);
  color:var(--ss-fg);
}
.moredlg::backdrop{background:rgba(5,38,83,.55);backdrop-filter:blur(2px);}
.moredlg__in{
  position:relative;background:var(--ss-ground);
  border:1px solid var(--ss-ground-3);border-radius:var(--radius, 22px);
  padding:34px 34px 30px;
  max-height:min(80vh,760px);overflow-y:auto;
  box-shadow:0 40px 90px -30px rgba(5,38,83,.5);
}
.moredlg__in h3{margin:0 0 14px;padding-right:34px;}
.moredlg__body p{color:var(--ss-fg-dim);font-size:.9375rem;line-height:1.72;margin:0 0 13px;}
.moredlg__body p:last-child{margin-bottom:0;}
.moredlg__x{
  position:absolute;top:14px;right:16px;
  appearance:none;background:none;border:0;cursor:pointer;
  font-size:1.75rem;line-height:1;color:var(--ss-fg-mute);
  width:36px;height:36px;border-radius:50%;
}
.moredlg__x:hover{color:var(--ss-fg);background:rgba(5,38,83,.07);}
.moredlg__x:focus-visible{outline:2px solid var(--ss-accent-ink);outline-offset:2px;}
@media (max-width:600px){
  .moredlg__in{padding:28px 22px 24px;}
}

/* ─────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────── */
/* Full container width — the container's own left/right padding is the margin. */
.faq{max-width:none;}
.faq details{border-bottom:1px solid var(--ss-ground-3);}
.faq details:first-of-type{border-top:1px solid var(--ss-ground-3);}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 52px 26px 4px;position:relative;
  font-family:var(--ss-font-display);font-size:1.25rem;font-weight:600;line-height:1.3;
  transition:color .4s var(--ease);
}
.faq summary:hover{color:var(--ss-accent-ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:18px;top:50%;width:15px;height:2px;border-radius:2px;
  background:var(--ss-accent-ink);transition:transform .55s var(--ease);
}
.faq summary::after{transform:rotate(90deg);}
.faq details[open] summary::after{transform:rotate(0deg);}
/* The 52px right inset only exists to clear the +/- marker on the SUMMARY;
   the answer doesn't need it, so it ran short of the column on narrow screens. */
.faq__a{padding:0 4px 28px 4px;color:var(--ss-fg-dim);}

/* ─────────────────────────────────────────────
   Form (native styles + Fluent Forms mapping)
   ───────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;max-width:860px;}
.field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.field--full{grid-column:1/-1;}
.field label,.form--plugin .ff-el-input--label label{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ss-fg-mute);margin:0;}
.field input,.field select,.field textarea,
.form--plugin input.ff-el-form-control,.form--plugin select.ff-el-form-control,.form--plugin textarea.ff-el-form-control{
  width:100%;min-width:0;/* selects refuse to shrink in grid tracks without this */
  font-family:var(--ss-font-body);font-size:1rem;font-weight:300;color:var(--ss-fg);
  background:var(--ss-ground);border:1px solid var(--ss-border-ui);border-radius:12px;
  padding:13px 16px;height:auto;transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.field textarea,.form--plugin textarea.ff-el-form-control{min-height:130px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus,
.form--plugin .ff-el-form-control:focus{
  outline:2px solid var(--ss-focus);outline-offset:2px;border-color:var(--ss-fg);box-shadow:none;
}
.field input::placeholder,.field textarea::placeholder,
.form--plugin .ff-el-form-control::placeholder{color:var(--ss-fg-mute);opacity:1;}
/* Fluent Forms → the prototype's 2-column grid (fields live inside a fieldset) */
.form--plugin .frm-fluent-form{max-width:860px;}
.form--plugin .frm-fluent-form fieldset{
  display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;
  border:0;margin:0;padding:0;min-inline-size:100%;
}
.form--plugin .frm-fluent-form legend{grid-column:1/-1;}
/* Fluent's own sheet loads AFTER the theme's and matches at the same
   specificity, so these need one extra class to win (no !important). */
.form--plugin .fluentform .ff-el-group{margin-bottom:0;min-width:0;display:flex;flex-direction:column;gap:7px;}
.form--plugin .fluentform .ff-el-input--label{margin-bottom:0;}
.form--plugin .fluentform .ff-el-input--content{margin:0;}
.form--plugin .ff-el-group:has(textarea),
.form--plugin .ff-el-group.ff_submit_btn_wrapper,
.form--plugin .ff-message-success,
.form--plugin .ff-errors-in-stack{grid-column:1/-1;}
.form--plugin .ff-btn-submit{
  display:inline-flex;width:auto;cursor:pointer;
  font-family:var(--ss-font-body);font-size:.9375rem;font-weight:600;letter-spacing:.02em;
  padding:13px 30px;border-radius:999px;
  background:var(--ss-accent-hi)!important;color:var(--ss-on-accent)!important;border:1px solid var(--ss-accent-ink)!important; /* 7.84:1 */
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
.form--plugin .ff-btn-submit:hover{background:var(--ss-accent)!important;box-shadow:0 18px 40px -18px rgba(136,94,11,.55);}
.form--plugin .ff-el-is-error .ff-el-form-control{border-color:#8A2A12;}
.form--plugin .error,.form--plugin .text-danger{font-size:.8125rem;color:#8A2A12;}
.form--plugin .ff-message-success{border:1px solid var(--ss-ground-4);border-radius:12px;padding:13px 16px;color:var(--ss-fg-dim);box-shadow:none;}
@media (max-width:700px){.form,.form--plugin .frm-fluent-form fieldset{grid-template-columns:1fr;}}

/* two-col split that collapses (contact) */
/* minmax(0,…) not plain fr: an fr track's automatic minimum is min-content, and
   a <select> refuses to shrink below its longest option (313px here), so the
   track held the page open and overflowed under ~360px. */
.split2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--column-gap, 64px);align-items:start;}
@media (max-width:900px){.split2{grid-template-columns:minmax(0,1fr);gap:36px;}}

/* ─────────────────────────────────────────────
   Long-form legal / article
   ───────────────────────────────────────────── */
.article{max-width:68ch;}
.article h2{font-size:1.6rem;margin:44px 0 14px;}
.article h2:first-child{margin-top:0;}
.article p,.article li{color:var(--ss-fg-dim);}
.article ul{padding-left:22px;}
.article li{margin-bottom:8px;}
.article strong{color:var(--ss-fg);font-weight:600;}

/* ─────────────────────────────────────────────
   Boarding pass CTA
   ───────────────────────────────────────────── */
.cta{padding-bottom:8rem;}
.ticket{
  position:relative;display:grid;grid-template-columns:1.3fr .7fr;
  border-radius:calc(var(--radius, 22px) + 8px);overflow:hidden;
  box-shadow:0 60px 120px -60px rgba(5,38,83,.55);
}
.ticket__main{position:relative;background:var(--ss-deep);color:var(--ss-on-deep);padding:64px 60px;overflow:hidden;}
.ticket__main::before{
  content:"";position:absolute;top:-40%;right:-14%;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,150,47,.22),transparent 65%);
}
.ticket__tag{position:relative;font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--ss-accent-hi);margin:0 0 22px;}
.ticket__main h2{position:relative;color:var(--ss-on-deep);margin-bottom:16px;}
.ticket__main .lead{position:relative;color:var(--ss-on-deep-dim);max-width:44ch;}
.ticket__fields{position:relative;display:flex;gap:var(--gap-lg, 44px);flex-wrap:wrap;margin-top:36px;}
.ticket__field small{display:block;font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ss-on-deep-dim);font-weight:600;margin-bottom:5px;}
.ticket__field span{font-family:var(--ss-font-script);font-size:1.55rem;color:var(--ss-on-deep);}
.ticket__stub{
  position:relative;background:var(--ss-deep-2);color:var(--ss-on-deep);padding:56px 44px;
  border-left:2px dashed rgba(245,239,227,.35);display:flex;flex-direction:column;
}
.ticket__stub::before,.ticket__stub::after{
  content:"";position:absolute;left:-16px;width:32px;height:32px;border-radius:50%;background:var(--ss-ground);
}
.ticket__stub::before{top:-16px;}
.ticket__stub::after{bottom:-16px;}
.ticket__stub h3{font-size:1.35rem;color:var(--ss-on-deep);margin-bottom:12px;}
.ticket__stub .stub-p{font-size:.9375rem;color:var(--ss-on-deep-dim);line-height:1.6;margin:0 0 24px;}
.ticket__det{display:flex;flex-direction:column;gap:var(--gap-sm, 14px);margin-bottom:28px;}
.ticket__det a{color:var(--ss-on-deep);text-decoration:none;font-weight:500;font-size:.9375rem;}
.ticket__det a:hover{color:var(--ss-accent-hi);}
.ticket__det small{display:block;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ss-on-deep-dim);font-weight:600;margin-bottom:3px;}
.ticket__bar{
  height:44px;margin:auto 0 26px;border-radius:4px;opacity:.85;
  background:repeating-linear-gradient(90deg,
    rgba(245,239,227,.9) 0 2px,transparent 2px 5px,
    rgba(245,239,227,.9) 5px 9px,transparent 9px 12px,
    rgba(245,239,227,.9) 12px 13px,transparent 13px 18px);
}
@media (max-width:900px){
  .ticket{grid-template-columns:1fr;}
  .ticket__main{padding:44px 28px;}
  .ticket__stub{border-left:0;border-top:2px dashed rgba(245,239,227,.35);padding:40px 28px;}
  .ticket__stub::before{top:-16px;left:auto;right:-16px;}
  .ticket__stub::after{bottom:auto;top:-16px;left:-16px;}
}

/* ─────────────────────────────────────────────
   Footer (link lists come from wp_nav_menu / template)
   ───────────────────────────────────────────── */
.foot{background:var(--footer-bg, #052653);color:var(--ss-on-deep-dim);padding:64px 0 34px;}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gap-lg, 44px);padding-bottom:38px;border-bottom:1px solid var(--ss-deep-3);}
.foot__brand{display:flex;gap:16px;align-items:flex-start;}
.foot__credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(245,239,227,.28);}
.foot__credit a:hover{color:var(--ss-accent-hi);border-bottom-color:var(--ss-accent-hi);}
.foot__address{font-style:normal;font-size:.875rem;line-height:1.6;margin-top:10px;color:var(--ss-on-deep-dim);}
.foot__brand img{width:64px;background:var(--ss-on-deep);border-radius:10px;padding:5px;}
.foot h4{font-family:var(--ss-font-body);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ss-accent-hi);margin:0 0 16px;font-weight:600;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.foot a{color:var(--ss-on-deep-dim);text-decoration:none;font-size:.9375rem;transition:color .4s var(--ease);}
/* WCAG 2.2 §2.5.8 — inline links are exempt, but a stacked footer list reads as
   navigation, so give each link a real 24px hit area without moving the layout. */
.foot li a,.foot__meta a,.ticket__det a{display:inline-block;padding-block:3px;}
.foot a:hover{color:var(--ss-accent-hi);}
.foot__base{padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8125rem;}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr;gap:32px;}}

/* ==========================================================================
   HOMEPAGE-ONLY SECTIONS
   ========================================================================== */

/* hero */
/* Top space follows Customizer → Spacing → Section Spacing — Page Headers, the
   same control the inner-page headers use, so all nine page tops move together. */
.hero{padding:var(--section-padding-hero, 11.5rem) 0 6.5rem;position:relative;}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--column-gap, 64px);align-items:center;}
.hero h1{font-size:var(--hero-title-size, 5.1rem);line-height:var(--hero-title-line-height, .96);margin:0 0 26px;}
.hero h1 em{font-style:italic;color:var(--ss-accent-ink);}
.hero__lead{font-size:1.1875rem;color:var(--ss-fg-dim);max-width:46ch;margin-bottom:14px;}
.hero__kicker{font-family:var(--ss-font-script);font-size:2rem;line-height:1.25;margin-bottom:36px;color:var(--ss-fg);}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.hero__stack{position:relative;}
.hero__main{transform:rotate(.6deg);box-shadow:0 50px 90px -50px rgba(5,38,83,.45);}
.hero__main img{aspect-ratio:4/4.6;object-fit:cover;width:100%;}
.polaroid{
  position:absolute;background:#FDFCF9;border:1px solid rgba(5,38,83,.10);
  padding:8px 8px 26px;border-radius:10px;box-shadow:0 30px 60px -28px rgba(5,38,83,.4);width:32%;
}
.polaroid img{border-radius:5px;aspect-ratio:1/1.05;object-fit:cover;width:100%;}
.polaroid--a{right:-4%;bottom:-7%;transform:rotate(4deg);}
.polaroid--b{left:-6%;top:-6%;transform:rotate(-5deg);}
@media (max-width:900px){
  .hero{padding:var(--section-padding-hero, 8.5rem) 0 4.5rem;} /* control-driven */
  .hero__grid{grid-template-columns:1fr;gap:40px;}
  .polaroid{display:none;}
  .hero__main{transform:none;}
  .hero__main img{aspect-ratio:16/11;}
}

/* marquee */
.marquee{
  border-top:1px solid var(--ss-ground-3);border-bottom:1px solid var(--ss-ground-3);
  overflow:hidden;padding:20px 0;background:var(--ss-ground-2);
}
.marquee__track{display:flex;width:max-content;animation:tick 36s linear infinite;}
.marquee__seq{display:flex;align-items:baseline;gap:34px;padding-right:34px;white-space:nowrap;}
.marquee__seq span{font-family:var(--ss-font-display);font-style:italic;font-size:1.25rem;color:var(--ss-fg-dim);}
.marquee__seq i{font-style:normal;color:var(--ss-accent-ink);font-size:.8rem;transform:translateY(-2px);}
@keyframes tick{to{transform:translateX(-50%);}}

/* positioning / intro */
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--column-gap, 64px);align-items:start;}
.intro h2{margin-bottom:26px;}
.intro__rule{width:72px;height:3px;background:var(--ss-accent);margin-bottom:30px;border-radius:2px;}
.intro__stats{display:flex;margin-top:44px;border-top:1px solid var(--ss-ground-3);}
.intro__stat{padding:22px 30px 0 0;margin-right:30px;border-right:1px solid var(--ss-ground-3);}
.intro__stat:last-child{border-right:0;margin-right:0;}
.intro__stat b{display:block;font-family:var(--ss-font-display);font-weight:600;font-size:1.4rem;line-height:1.15;}
.intro__stat span{font-size:.8125rem;color:var(--ss-fg-mute);}
@media (max-width:900px){.intro__grid{grid-template-columns:1fr;gap:34px;}
  .intro__stats{flex-wrap:wrap;gap:18px;}
  .intro__stat{border-right:0;margin-right:0;padding-right:0;}}

/* about band (home) */
.about{background:var(--ss-deep);color:var(--ss-on-deep);position:relative;overflow:hidden;
  padding-block:var(--section-padding-band, 8.5rem);} /* Customizer: Band Section Padding */
.about__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center;}
.about h2{color:var(--ss-on-deep);}
.about .eyebrow{color:var(--ss-accent-hi);border-color:rgba(245,239,227,.22);background:rgba(245,239,227,.06);}
.about .eyebrow::before{background:var(--ss-accent-hi);}
.about p{color:var(--ss-on-deep-dim);}
.about__photo{transform:rotate(-1.4deg);}
.about__photo img{aspect-ratio:4/5;object-fit:cover;width:100%;}
@media (max-width:900px){.about__grid{grid-template-columns:1fr;gap:40px;}
  .about__photo{transform:none;}}

/* memory wall */
.memory{background:var(--ss-ground-2);border-bottom:1px solid var(--ss-ground-3);overflow:hidden;}
.memory .sec-head{text-align:center;margin-left:auto;margin-right:auto;}
.memory .sec-head p{margin-left:auto;margin-right:auto;}
.mem-row{display:flex;justify-content:center;padding:26px 28px 40px;}
.mem{
  background:#FDFCF9;border:1px solid rgba(5,38,83,.10);border-radius:10px;
  padding:9px 9px 12px;width:196px;flex:none;
  box-shadow:0 26px 50px -26px rgba(5,38,83,.38);
  transform:rotate(var(--r)) translateY(var(--y));margin-right:-30px;
  transition:transform .6s var(--ease),z-index 0s .0s,box-shadow .6s var(--ease);
  position:relative;
}
.mem:hover{transform:rotate(0deg) translateY(calc(var(--y) - 14px)) scale(1.06);z-index:5;box-shadow:0 40px 70px -30px rgba(5,38,83,.5);}
.mem img{border-radius:5px;aspect-ratio:var(--mh-d, 1/1.02);object-fit:var(--mf, cover);object-position:var(--mp, center);width:100%;}
.mem figcaption{
  font-family:var(--ss-font-script);font-size:1.35rem;color:var(--ss-fg-dim);
  text-align:center;padding-top:9px;
}
.mem:nth-child(1){--r:-5deg;--y:14px;}
.mem:nth-child(2){--r:3deg;--y:-8px;}
.mem:nth-child(3){--r:-2deg;--y:10px;}
.mem:nth-child(4){--r:4deg;--y:-12px;}
.mem:nth-child(5){--r:-4deg;--y:6px;}
.mem:nth-child(6){--r:2deg;--y:-4px;margin-right:0;}
@media (max-width:1240px){
  .mem-row{justify-content:flex-start;overflow-x:auto;padding-bottom:48px;}
}

/* shop teaser (home) */
.shop__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--column-gap, 64px);align-items:center;}
.shop__img img{aspect-ratio:16/11;object-fit:cover;width:100%;}
.shop__chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 30px;}
.shop__chips span{
  font-size:.8125rem;padding:7px 14px;border:1px solid var(--ss-ground-4);
  border-radius:999px;color:var(--ss-fg-dim);background:var(--ss-ground-2);
  font-variant-numeric:tabular-nums;
}
.disclosure{font-size:.8125rem;color:var(--ss-fg-mute);margin-top:18px;max-width:52ch;}
@media (max-width:900px){.shop__grid{grid-template-columns:1fr;gap:36px;}}

/* ─────────────────────────────────────────────
   Motion + print
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  .js .rv{opacity:1;transform:none;filter:none;}
}
@media print{
  .nav,.menu-veil,.foot,body::after{display:none!important;}
  section{padding:1.5rem 0;}
}

/* Single-image frames honour their own height override too. */
.hero__main,.about__photo,.shop__img,.band__photo,.port-ring,.trio__media,.polaroid{ height:var(--mh-d, auto); }
.mem[style*="--mh-d"] img{ aspect-ratio:auto; height:var(--mh-d); object-fit:var(--mf, cover); }
@media (max-width:1024px){ .hero__main,.about__photo,.shop__img,.band__photo,.port-ring,.trio__media,.polaroid{ height:var(--mh-t, var(--mh-d, auto)); } }
@media (max-width:768px){ .hero__main,.about__photo,.shop__img,.band__photo,.port-ring,.trio__media,.polaroid{ height:var(--mh-m, var(--mh-t, var(--mh-d, auto))); } }

/* ─────────────────────────────────────────────
   Per-image display: object-fit and focal point.
   Set per image in the editor; unset falls back to the design default.
   ───────────────────────────────────────────── */
.voyage__media img,
.shopg__media img,
.listrow__media img,
.about__photo img,
.port-ring img,
.trio__media img,
.polaroid img,
.mem img,
.bez__in img{
  object-fit:var(--mf, cover);
  object-position:var(--mp, center);
}

/* ─────────────────────────────────────────────
   Per-instance media heights.
   Each card can override the global Customizer height via --mh-d/-t/-m printed
   on the element. Unset falls back to the theme token, so nothing changes until
   a height is actually entered.
   ───────────────────────────────────────────── */
.voyage__card{ min-height:var(--mh-d, var(--media-split-height, 340px)); }
.shopg__card--feat .shopg__media{ min-height:var(--mh-d, 0px); }
.shopg__media{ height:var(--mh-d, auto); }
@media (max-width:1024px){
  .voyage__card{ min-height:var(--mh-t, var(--mh-d, var(--media-split-height, 340px))); }
  .shopg__media{ height:var(--mh-t, var(--mh-d, auto)); }
  .shopg__card--feat .shopg__media{ min-height:var(--mh-t, var(--mh-d, 0px)); }
}
@media (max-width:768px){
  .voyage__card{ min-height:var(--mh-m, var(--mh-t, var(--mh-d, var(--media-split-height, 340px)))); }
  .shopg__media{ height:var(--mh-m, var(--mh-t, var(--mh-d, auto))); }
  .shopg__card--feat .shopg__media{ min-height:var(--mh-m, var(--mh-t, var(--mh-d, 0px))); }
}

/* ─────────────────────────────────────────────
   Mobile refinements (reviewed on a real iPhone).
   ───────────────────────────────────────────── */

/* The FAQ block spans the container, but a 138-character line is unreadable —
   cap the ANSWER measure. Only bites on desktop; mobile is ~38 chars already. */
.faq__a p{max-width:74ch;}

@media (max-width:768px){
  /* Mobile rhythm now comes from Customizer → Spacing → Section Spacing — Mobile. */

  /* 19px lead against 17px body is a 12% step — too small to look deliberate,
     big enough to look accidental. Match the body; colour still sets them apart. */
  .lead,.hero__lead,.phero__lead{ font-size:1.0625rem; }

  /* Logo above the text, not beside it — the row cramped both on a phone. */
  .foot__brand{ flex-direction:column; align-items:flex-start; gap:var(--gap-sm, 14px); }


}

@media (max-width:560px){
  /* Overlay menu ran oversized on a phone: fewer items visible than there are. */
  .menu-veil a{ font-size:clamp(1.4rem,5.6vw,2.2rem); padding:4px 14px; }
  .menu-veil ul{ gap:2px; }

  /* Boarding pass: .wrap already insets 28px, so another 28 left only ~278px
     of text column. Tighten the card's own padding on small screens. */
  .ticket__main{ padding:36px 22px; }
  /* The card heading was too big for its column — lines ended ~90px short,
     which reads as lopsided padding. Smaller type fills the measure. */
  .ticket__main h2{ font-size:clamp(1.7rem,7vw,2.3rem); }
  .ticket__stub{ padding:32px 22px; }
}

/* Packing methods with a photo — same shape as the shop rows: picture left,
   her full method text right. Falls back to the numbered badge when a method
   has no photo, so older content still renders. */
.svc__row--media{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:var(--column-gap, 64px);align-items:start;
}
.svc__media{
  position:relative;border-radius:var(--radius, 22px);overflow:hidden;
  background:var(--ss-ground-2);
  height:var(--mh-d, 260px);
}
.svc__media img{width:100%;height:100%;object-fit:var(--mf, cover);object-position:var(--mp, center);display:block;}
@media (max-width:1024px){
  .svc__row--media{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:32px;}
  .svc__media{height:var(--mh-t, var(--mh-d, 220px));}
}
@media (max-width:768px){
  .svc__row--media{grid-template-columns:minmax(0,1fr);gap:20px;}
  .svc__media{height:var(--mh-m, var(--mh-t, var(--mh-d, 220px)));}
}

/* Her list graphics have the title baked into the artwork, so they must never be
   cropped — object-fit:contain letterboxes them against the card ground. */
.shopg__card--feat .shopg__media{background:var(--ss-ground-2);}
.shopg__card--feat .shopg__media img[style*="contain"],
.shopg__media img{background:var(--ss-ground-2);}

/* ─────────────────────────────────────────────
   Shop rows — image top-aligned and sticky.
   Her write-ups run long, so a vertically centred photo left big empty bands
   above and below it. The photo now takes its natural height, sits at the top
   of the row, and follows the reader down the text instead of scrolling away.
   ───────────────────────────────────────────── */
.shopg__card--feat{
  align-items:start;
  /* overflow:hidden on the card would clip a sticky child out of existence, so
     the photo is an inset picture with its own rounding rather than a bleed. */
  overflow:visible;
  padding:22px;gap:0;
}
.shopg__card--feat .shopg__body{padding:12px 26px 22px 30px;}
.shopg__card--feat .shopg__media{
  position:sticky;top:var(--shop-media-top, 116px);
  align-self:start;
  height:auto;min-height:0;aspect-ratio:auto;
  background:var(--ss-ground-2);
  border-radius:calc(var(--radius, 22px) - 6px);
  overflow:hidden;
}
.shopg__card--feat .shopg__media img{
  position:static;width:100%;height:auto;display:block;
  object-fit:contain;
}
/* Stacked below tablet — sticky would pin the photo over the text. */
@media (max-width:768px){
  .shopg__card--feat .shopg__media{position:static;top:auto;}
}
@media (prefers-reduced-motion:reduce){
  .shopg__card--feat .shopg__media{position:static;}
}

/* overflow-x:hidden on html/body (parent base.css, and line 75 here) turns the
   document into a scroll container, which silently disables position:sticky for
   every descendant. `clip` gives the same guard against horizontal scroll
   without creating that container. Modern browsers only; the hidden value stays
   as the fallback for anything that lacks it. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* Her closing note — sits under the two buttons as an aside.
   Selector matches .shopg__body>p so it actually wins: the generic paragraph
   rule zeroes the top margin otherwise. */
.shopg__body>p.shopg__tip{
  margin:20px 0 0;padding:12px 16px;
  border-left:2px solid var(--ss-accent);
  background:var(--ss-ground-2);border-radius:0 8px 8px 0;
  font-size:.9375rem;line-height:1.6;color:var(--ss-fg-dim);
}

/* Her bullet lists inside the body copy. */
.shopg__body .rich__list{margin:0 0 14px;padding-left:1.15em;}
.shopg__body .rich__list li{color:var(--ss-fg-dim);font-size:.9375rem;line-height:1.62;margin-bottom:6px;}
.shopg__body .rich__list li strong{color:var(--ss-fg);}

/* A card with no artwork (her packing-methods intro) spans the full width
   rather than leaving an empty column where the photo would sit. */
.shopg__card--noimg{grid-template-columns:minmax(0,1fr);}
.shopg__card--noimg .shopg__body{padding:12px 30px 22px;}

/* Card headings — these rows carry a lot of copy, and 1.35rem read as a label
   rather than a title against it. Scales down on smaller screens so a long
   name like "My Travel Safe & Secure Essentials" still holds two lines. */
.shopg__body h3{
  font-size:clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  line-height:1.14;
  margin-bottom:14px;
}

/* ─────────────────────────────────────────────
   Shop closing band — the one ask on the page.
   ───────────────────────────────────────────── */
.shopcta{
  position:relative;background-size:cover;background-position:center;
  padding:clamp(80px,10vw,150px) 0;margin-top:0;
  text-align:center;isolation:isolate;
}
.shopcta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(5,38,83,.78), rgba(5,38,83,.88));
}
.shopcta__in{max-width:720px;}
.shopcta h2{
  color:var(--ss-on-deep);margin:0 0 14px;
  font-size:clamp(2rem, 1.3rem + 2.6vw, 3.4rem);line-height:1.06;text-wrap:balance;
}
.shopcta p{
  color:rgba(245,239,227,.86);margin:0 auto 30px;max-width:52ch;
  font-size:1.0625rem;line-height:1.65;
}
.shopcta p a{color:var(--ss-accent-hi);text-decoration:underline;text-underline-offset:3px;}
.shopcta p a:hover{color:#fff;}

/* The shop intro runs the full container. .article caps at 68ch for long-form
   reading (Terms, Travel Tips), but this is a short lead-in above wide cards and
   the narrow column left it stranded on the left. */
.article--wide{max-width:none;}
.article--wide .lead{max-width:none;}

/* ── Shop rows, tablet and phone ──────────────────────────────────
   1) The card stacks from 1024 down, but sticky was only switched off at 768 —
      between those widths the photo pinned itself over the text as you scrolled.
      Sticky now ends where the two-column layout does.
   2) On a phone the card's own 22px padding sat inside the 28px page gutter and
      the body added 30px more, so the copy started ~80px in. Tightened. */
@media (max-width:1024px){
  .shopg__card--feat .shopg__media{position:static;top:auto;}
}
@media (max-width:768px){
  .shopg__card--feat{padding:12px;}
  .shopg__card--feat .shopg__body{padding:16px 6px 8px;}
  .shopg__card--noimg .shopg__body{padding:16px 6px 8px;}
  .shopg__tip,.shopg__body>p.shopg__tip{padding:12px 14px;}
}

/* These cards are the page's main reading matter now, not captions beside a
   photo — .9375rem was sized for the old short cards and reads small against
   500-word write-ups. Matches the site body size instead. */
.shopg__body>p,
.shopg__body .rich__list li{font-size:1.0625rem;line-height:1.7;}
.shopg__body>p.shopg__tip{font-size:1rem;}

/* Tablet: same gutter problem as the phone — card padding sat inside the page
   gutter and the body added 30px more, starting the copy ~80px in. */
@media (max-width:1024px){
  .shopg__card--feat{padding:16px;}
  .shopg__card--feat .shopg__body{padding:18px 10px 10px;}
  .shopg__card--noimg .shopg__body{padding:18px 10px 10px;}
}
@media (max-width:768px){
  .shopg__body>p,
  .shopg__body .rich__list li{font-size:1rem;line-height:1.68;}
}

/* Order matters: the max-width:1024px block above also matches a phone, so the
   phone's tighter padding has to be re-stated after it or it loses the cascade. */
@media (max-width:768px){
  .shopg__card--feat{padding:12px;}
  .shopg__card--feat .shopg__body,
  .shopg__card--noimg .shopg__body{padding:16px 6px 8px;}
}
/* Stacked at tablet the copy ran the full 710px — about 84 characters a line,
   well past comfortable. Capped in px, not ch: Montserrat's "0" is wide enough
   that 68ch resolved to 765px and the cap never bit. 640px ≈ 72 characters. */
@media (min-width:601px) and (max-width:1024px){
  .shopg__body>p,
  .shopg__body .rich__list{max-width:640px;}
}

/* Shop section copy — two paragraphs now, in her own words. */
.shop__copy{margin-top:18px;}
.shop__copy p{color:var(--ss-fg-dim);margin:0 0 12px;}
.shop__copy p:last-child{margin-bottom:0;}

/* Sailing photo when the card stacks. 230px was set for phones and carried
   straight through to tablet, where a 746px-wide card left the photo looking
   like a letterbox strip. Scales with the card instead, and stays overridable
   per sailing via the image height fields (--mh-t / --mh-m). */
@media (min-width:601px) and (max-width:900px){
  .voyage__media{min-height:var(--mh-t, var(--mh-d, 380px));}
}
@media (max-width:600px){
  .voyage__media{min-height:var(--mh-m, var(--mh-t, 260px));}
}

/* About band — the portrait follows the story instead of scrolling away at the
   top of a long column. Same treatment as the shop rows: sticky only while the
   two columns exist, static once they stack. */
.band__grid{align-items:start;}
.band__grid>.rv:first-child{position:sticky;top:var(--shop-media-top, 116px);align-self:start;}
.band__lead{font-size:1.125rem;line-height:1.62;color:var(--ss-on-deep);margin:26px 0 14px;}
@media (max-width:900px){
  .band__grid>.rv:first-child{position:static;top:auto;}
  .band__lead{font-size:1.0625rem;}
}
@media (prefers-reduced-motion:reduce){
  .band__grid>.rv:first-child{position:static;}
}

/* .band sets overflow:hidden to clip its decorative edge — but a clipped
   ancestor disables position:sticky for everything inside it, so the portrait
   scrolled away. `clip` clips the same way without creating a scroll container. */
.band{overflow:clip;}

/* Her credit line, under the About heading. */
.band__role{
  color:var(--ss-accent-hi);font-size:.9375rem;letter-spacing:.02em;
  margin:-4px 0 20px;
}

/* ─────────────────────────────────────────────
   Pull quote — her own line, given its own moment between the story and the
   trio rather than sitting mid-paragraph inside the navy band.
   ───────────────────────────────────────────── */
.pull{padding:clamp(64px,7vw,104px) 0;text-align:center;}
.pull__in{max-width:780px;}
.pull .eyebrow{margin:0 auto 22px;}
.pull blockquote{
  margin:0;font-family:var(--font-heading, Georgia, serif);
  font-size:clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
  line-height:1.14;letter-spacing:-.015em;color:var(--ss-fg);
  text-wrap:balance;font-style:italic;
}
.pull cite{
  display:block;margin-top:18px;font-style:normal;
  font-size:.9375rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ss-fg-mute);
}

/* Her departure line — the sailing date, stated in her own words under the copy. */
.voyage__depart{
  margin:-6px 0 18px;font-size:.9375rem;color:var(--ss-fg);
  padding-left:13px;border-left:2px solid var(--ss-accent);
}

/* Description now holds her paragraph breaks rather than one run-on block. */
.voyage__sub p{margin:0 0 12px;}
.voyage__sub p:last-child{margin-bottom:0;}

/* Boarding-pass lead — 52ch was set for a short line and left the Virgin copy
   wrapping early against a wide navy panel. */
.ticket__main .lead{max-width:64ch;}

/* Packing-method copy — her write-ups run several paragraphs and they were
   butting straight into each other with no separation. */
.svc__row span p{margin:0 0 14px;}
.svc__row span p:last-child{margin-bottom:0;}
.svc__row span h3{margin-bottom:12px;}



/* About band — her story runs eight paragraphs and they had no separation. */
.band__grid p{margin:0 0 14px;}
.band__grid p:last-child{margin-bottom:0;}
.band__grid .eyebrow{margin-bottom:10px;}


/* ── Boarding pass: cut off on a narrow iPhone (Display Zoom = 320pt). ──
   The one-column track was sized by the panel's min-content (~340px) because
   a grid item defaults to min-width:auto. At 320pt the card was 280px but the
   track stayed 340px, so the copy ran past the card edge and was clipped. */
@media (max-width:900px){
  .ticket{grid-template-columns:minmax(0,1fr);}
}
.ticket__main,.ticket__side{min-width:0;}

/* Her email is one 34-character token with nowhere to break — 296px wide as an
   inline-block, so it punched out of the card on its own. */
.ticket__det,.ticket__det a,.ticket__fields a{overflow-wrap:anywhere;max-width:100%;}

@media (max-width:360px){
  .ticket__main{padding:34px 20px;}
  .ticket__stub{padding:28px 20px;}
  .ticket__fields{gap:20px;}
  .ticket__det a{font-size:.95rem;}
}


/* ── Packing-method graphics: show them whole. ──
   Her artwork has the explanation printed inside the image, so a fixed-height
   box can only fail two ways: object-fit:cover crops the words off, and
   object-fit:contain leaves dead bands around them (35px on the capsule, 79px
   on the duffle at desktop). Let each graphic set its own height from its real
   aspect ratio instead — full card width, whole image, no filler.
   NOTE: this deliberately makes the media-height field inert for THIS section. */
.svc__row--media .svc__media{height:auto;background:none;}
.svc__row--media .svc__media img{height:auto;object-fit:contain;}


/* ── Re-arm the per-card image-height field on featured shop cards. ──
   The sticky-media fix above set height:auto;min-height:0 with specificity
   0,2,0, which silently beat .shopg__media{height:var(--mh-d,auto)} at 0,1,0 —
   so typing a height into a shop card did nothing. Honour the token here, with
   auto as the fallback so blank still means "size to the artwork". */
.shopg__card--feat .shopg__media{height:var(--mh-d, auto);}
.shopg__card--feat .shopg__media img{height:100%;}
@media (max-width:1024px){
  .shopg__card--feat .shopg__media{height:var(--mh-t, var(--mh-d, auto));}
}
@media (max-width:768px){
  .shopg__card--feat .shopg__media{height:var(--mh-m, var(--mh-t, var(--mh-d, auto)));}
}

/* ── Group-travel section (Services). Reuses .steps; only the closing line is new. ── */
.grp__note{
  margin:clamp(38px,4vw,58px) auto 0;max-width:56ch;text-align:center;
  font-family:var(--font-display, Georgia, serif);
  font-size:clamp(1.15rem,.95rem + .7vw,1.5rem);line-height:1.45;
  color:var(--ss-deep);
}
/* Step 4 carries two paragraphs (her "all in one place" line, then the detail);
   .step p ships at margin:0, so without this they read as one run-on block. */
.grp .steps .step p{margin:0 0 14px;}
.grp .steps .step p:last-child{margin-bottom:0;}
/* Below tablet .step becomes a 52px/1fr grid with the dot spanning 2 rows, so a
   THIRD child — her second paragraph — auto-placed into the number column and
   rendered one word per line. Keep every paragraph in the text column. */
.grp .steps .step p{grid-column:2;}

/* Her four group blocks run very different lengths, so the dotted rail left a
   ragged, half-empty row. Cards give them one shared frame and equal height. */
/* Sat 208px below "How booking works" (104 bottom + 104 top). These two read as
   one sequence, so tighten the join the same way the FAQ section already does. */
.grp{padding-top:2rem;}
.grp .steps{gap:20px;align-items:stretch;}
.grp .steps .step{
  background:var(--ss-ground-2);
  border:1px solid var(--ss-ground-3);
  border-radius:calc(var(--radius, 22px) - 4px);
  padding:30px 26px 32px;
}
.grp .steps .step::before{display:none;}
/* Keep all four headings on one baseline so the bodies start level. */
@media (min-width:861px){
  .grp .steps .step h3{min-height:2.6em;}
}
/* Four across only once there is room. Between 861 and 1100 the columns left
   ~136px of text — her sentences broke after two or three words. */
@media (min-width:861px) and (max-width:1100px){
  .grp .steps{grid-template-columns:repeat(2,1fr);}
}
/* Number on top, copy below. The shared .step rule turns into a 52px/1fr grid
   below 860px, which on a 320px phone left the text ~200px wide and breaking
   awkwardly. Inside a card the number reads better stacked above. */
@media (max-width:860px){
  .grp .steps .step{display:block;padding:24px 22px 26px;}
  .grp .steps .step__dot{margin-bottom:16px;}
  .grp .steps .step h3{margin:0 0 8px;align-self:auto;}
  .grp .steps .step p{grid-column:auto;}
}