/* halongbayboatcruise.com · Lantern · one stylesheet for the whole site
   Tokens first (roles, not values), then components in BEM. A component's look depends only on its own classes. */
:root {
  --night: #0C1824; --surface: #13263A; --surface-2: #1A3148; --surface-pick: #16304A; --surface-light: #E9EDF0; --surface-light-2: #FFFFFF;
  --text: #E9EDF0; --text-2: #DCE3E9; --text-3: #C9D3DC; --text-muted: #A9B8C6; --text-faint: #8193A4;
  --ink: #0C1824; --ink-2: #23364A; --ink-3: #3D4F61;
  --moon: #F1E3B5; --moon-ink: #7A5C0E; --attention: #F6C445; --action: #D8323F; --action-press: #B3232F; --action-lamp: #FFE3A1;
  --slate: #7D8FA3; --slate-2: #5E7185; --pier: #3A4E63; --line: rgba(233,237,240,.14); --line-light: #C9D3DC;
  --category-day: #5BC6D8; --category-1n: #A29BF2; --category-2n: #E39A63; --category-style: #D8CFC0;
  --font-display: 'Gloock', Georgia, serif; --font-text: 'Onest', system-ui, sans-serif;
  --fs-display: clamp(38px, 5.6vw, 78px); --fs-h2: clamp(30px, 4vw, 56px); --fs-h3: clamp(22px, 2.3vw, 30px); --fs-h4: 20px;
  --fs-lead: clamp(17px, 1.4vw, 19px); --fs-body: 17px; --fs-ui: 15px; --fs-small: 14px; --fs-meta: 13px; --fs-min: 12px;
  --price-lg: clamp(44px, 5vw, 60px); --price-md: 40px; --price-sm: 28px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;
  --r-control: 12px; --r-small: 8px; --r-panel: 16px; --r-pill: 999px; --r-chip-hull: 3px 3px 12px 12px;
  --r-hull: 6px 6px 34px 34px; --r-hull-lg: 8px 8px 48px 48px;
  --container: 1280px; --gutter: clamp(16px, 4vw, 48px); --measure: 68ch;
  --shadow-float: 0 30px 60px -30px rgba(0,0,0,.85); --shadow-panel: 0 40px 80px -30px rgba(0,0,0,.6);
  --glow-action: 0 12px 32px -8px rgba(216,50,63,.75), 0 0 0 4px rgba(246,196,69,.25);
  --ease-float: cubic-bezier(.3,.7,.3,1); --t-float: .6s; --t-ui: .35s;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--text); font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.6; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--text); text-decoration-color: rgba(241,227,181,.55); text-underline-offset: 3px; }
a:hover { color: var(--moon); }
:focus-visible { outline: 2px solid var(--attention); outline-offset: 3px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s9) 0; }
.section--tight { padding: var(--s8) 0; }
.section--band { background: var(--surface); }
.section--rule { border-top: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: var(--s5); }
.h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.04; margin: 0; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.12; margin: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.6; font-weight: 300; color: var(--text-2); margin: 0; max-width: 64ch; text-wrap: pretty; }
.muted { color: var(--text-muted); }
.icon { width: 20px; height: 20px; flex: none; display: block; }
.icon--16 { width: 16px; height: 16px; }
.icon--24 { width: 24px; height: 24px; }

/* MARK · junk with battened sails under a full moon */
.mark { display: block; flex: none; }
.mark__moon { fill: var(--attention); } .mark__hull { fill: var(--text); } .mark__batten { fill: none; stroke: var(--night); stroke-width: 1.6; stroke-linecap: round; opacity: .6; }
.mark--slot .mark__moon { fill: var(--slate-2); } .mark--slot .mark__hull { fill: var(--pier); } .mark--slot .mark__batten { stroke: var(--surface-2); }
.on-light .mark__hull { fill: var(--ink); } .on-light .mark__moon { fill: #C9960F; } .on-light .mark__batten { stroke: var(--surface-light); }
.icon { --icon-accent: var(--moon); } .on-light .icon { --icon-accent: var(--moon-ink); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-g { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-dot { fill: var(--icon-accent, currentColor); }
.icon-starfill { fill: var(--attention); stroke: none; }

/* KICKER · benefit line above a section title */
.kicker { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--moon); margin: 0; }
.kicker::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--attention); box-shadow: 0 0 14px var(--attention); flex: none; }
.section-head { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); max-width: 900px; }
.section-head__lead { margin-top: var(--s2); }

/* BUTTONS · red = partner (book / dates), moonlight outline = move inside the site */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-control); font-size: var(--fs-ui); font-weight: 650; text-decoration: none; cursor: pointer; border: 0; transition: box-shadow .5s var(--ease-float), transform .5s var(--ease-float), background var(--t-ui), color var(--t-ui); }
.btn--book { background: var(--action); color: #fff; }
.btn--book::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--action-lamp); flex: none; transition: box-shadow .5s; }
.btn--book:hover { color: #fff; box-shadow: var(--glow-action); transform: translateY(-2px); }
.btn--book:hover::before { box-shadow: 0 0 10px var(--action-lamp); }
.btn--book:active { background: var(--action-press); transform: translateY(1px); box-shadow: inset 0 3px 0 rgba(0,0,0,.2); }
.btn--book[aria-disabled="true"] { background: #22384D; color: var(--text-muted); pointer-events: none; }
.btn--book[aria-disabled="true"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--slate-2); }
.btn--move { background: transparent; color: var(--moon); box-shadow: inset 0 0 0 1.5px var(--moon); }
.btn--move:hover { background: var(--moon); color: var(--ink); }
.btn--move::after { content: '→'; font-weight: 500; }
.btn--lg { min-height: 58px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: var(--fs-small); }
.btn--block { width: 100%; }
.link-move { font-weight: 600; font-size: var(--fs-ui); color: var(--text); text-decoration: underline; text-decoration-color: var(--moon); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.link-move::after { content: ' →'; }
.echo { font-size: var(--fs-meta); color: var(--text-3); margin: 0; text-align: center; }
.cta { display: flex; flex-direction: column; gap: var(--s2); }

/* CHIPS · shape = meaning. category: hull chip in family colour · advantage: pill with gold moon · warning: gold rounded rectangle with "!" · fact: dashed underline */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; font-size: var(--fs-min); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.chip--category { border-radius: var(--r-chip-hull); color: var(--ink); background: var(--category-1n); }
.chip--category[data-family="day"] { background: var(--category-day); }
.chip--category[data-family="1n"] { background: var(--category-1n); }
.chip--category[data-family="2n"] { background: var(--category-2n); }
.chip--category[data-family="style"] { background: var(--category-style); }
.chip--advantage { border-radius: var(--r-pill); background: var(--ink); color: var(--moon); padding-left: 5px; }
.chip--advantage::before { content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--moon); flex: none; }
.chip--pick::before { background: var(--attention); box-shadow: 0 0 8px rgba(246,196,69,.6); }
.chip--new { border-radius: var(--r-pill); background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--text-muted); }
.chip--warning { border-radius: 6px; background: var(--attention); color: var(--ink); white-space: normal; text-transform: none; letter-spacing: 0; font-size: var(--fs-min); padding: 3px 10px 3px 4px; }
.chip--warning::before { content: '!'; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--attention); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; }
.chip--fact { min-height: 0; padding: 0 0 2px; border-bottom: 1px dashed var(--text-muted); color: var(--text-2); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: var(--fs-meta); }
.on-light .chip--advantage { background: var(--ink); }
.on-light .chip--fact { color: var(--ink-2); border-color: var(--ink-3); }

/* PRICE · same mark everywhere: Gloock figure + basis line */
.price { display: flex; flex-direction: column; gap: 3px; }
.price__amount { font-family: var(--font-display); font-size: var(--price-md); line-height: 1; }
.price__basis { font-size: var(--fs-min); color: var(--text-muted); }
.price--lg .price__amount { font-size: var(--price-lg); line-height: .92; }
.price--sm .price__amount { font-size: var(--price-sm); }
.on-light .price__basis { color: var(--ink-3); }

/* RATING · never without its count */
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 650; }
.rating__star { width: 16px; height: 16px; flex: none; }
.rating__count { font-weight: 400; color: var(--text-muted); }
.rating__flag { font-weight: 500; font-size: var(--fs-min); color: var(--attention); }
.rating--none { font-weight: 500; color: var(--text-3); font-size: var(--fs-meta); }
.rating--none::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed var(--text-muted); flex: none; }
.on-light .rating__count { color: var(--ink-3); }
.on-light .rating__flag { color: var(--moon-ink); }

/* RING · Hours on the water (drawn by lantern.js from data-value / data-of / data-basis / data-road) */
.ring { position: relative; flex: none; display: block; }
.ring__inner { position: absolute; inset: 0; display: block; }
.ring__svg { display: block; overflow: visible; }
.ring__track { fill: none; stroke: rgba(233,237,240,.08); }
.ring__road { fill: none; stroke: var(--slate); }
.ring__pier { fill: none; stroke: var(--pier); }
.ring__water { fill: none; stroke: var(--moon); }
.ring__none { fill: none; stroke: var(--slate); stroke-width: 1.5; stroke-dasharray: 2 4; }
.ring__tick { font: 500 12px var(--font-text); fill: var(--text-faint); text-anchor: middle; }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.ring__value { font-family: var(--font-display); color: var(--moon); line-height: 1; font-size: var(--ring-fs, 15px); }
.ring__sub { font-size: var(--fs-min); color: var(--text-muted); margin-top: 6px; max-width: 55%; line-height: 1.3; }
.ring[data-basis="unknown"] .ring__value { color: var(--text-muted); }
.ring[data-tone="light"] .ring__track { stroke: rgba(12,24,36,.1); }
.ring[data-tone="light"] .ring__water { stroke: var(--moon-ink); }
.ring[data-tone="light"] .ring__road { stroke: var(--slate-2); }
.ring[data-tone="light"] .ring__pier { stroke: #AAB6C2; }
.ring[data-tone="light"] .ring__value { color: var(--ink); }
.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.ring-wrap__caption { font-size: var(--fs-min); font-weight: 600; color: var(--text-muted); text-align: center; line-height: 1.2; }
.on-light .ring-wrap__caption { color: var(--ink-3); }
.ring-key { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); font-size: var(--fs-meta); color: var(--text-3); }
.ring-key__item { display: inline-flex; align-items: center; gap: 8px; }
.ring-key__swatch { width: 28px; height: 0; border-top: 6px solid var(--moon); }
.ring-key__swatch--estimate { border-top-style: dashed; }
.ring-key__swatch--road { border-top: 3px dashed var(--slate); }
.ring-key__swatch--pier { border-top: 3px solid var(--pier); }
.ring-key__swatch--none { border-top: 1.5px dotted var(--slate); }

/* FACTS · icon + label + value, same order everywhere (Bay · Cabin · Pickup · Length) */
.facts { display: grid; grid-template-columns: 18px 62px minmax(0,1fr); gap: 8px; align-items: center; font-size: var(--fs-small); color: var(--text-2); margin: 0; }
.facts__icon { color: var(--moon); }
.facts__label { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.facts__value { margin: 0; }
.facts--grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3) var(--s5); }
.fact { display: flex; gap: 10px; align-items: center; }
.fact__text { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-small); }
.fact__label { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.on-light .facts__icon, .on-light .fact .icon { color: var(--ink-2); }
.on-light .fact__label, .on-light .facts__label { color: var(--ink-3); }

/* TOUR CARD · fixed order; floating hull */
.tour-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-hull); transition: transform var(--t-float) var(--ease-float), box-shadow var(--t-float); height: 100%; }
.tour-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float), 0 0 0 1px rgba(241,227,181,.35); }
.tour-card--featured { box-shadow: inset 0 0 0 1.5px rgba(246,196,69,.7); }
.tour-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: 6px 6px 0 0; background: var(--surface-2); }
.tour-card__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 6px 6px 0 0; }
.tour-card__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(circle at 50% 44%, rgba(241,227,181,.12), rgba(241,227,181,0) 52%); color: var(--text-muted); font-size: var(--fs-min); border-radius: 6px 6px 0 0; }
.tour-card__chips { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.tour-card__ring { position: absolute; right: 14px; bottom: -58px; }
.tour-card__ring .ring { background: var(--surface); border-radius: 50%; box-shadow: 0 0 0 5px var(--surface); }
.tour-card__body { padding: var(--s4) 20px 0; display: flex; flex-direction: column; gap: 10px; }
.tour-card__head { padding-right: 84px; display: flex; flex-direction: column; gap: 8px; min-height: 64px; }
.tour-card__title { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.tour-card__title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tour-card__note { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); font-weight: 300; }
.tour-card__facts { margin: 14px 20px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.tour-card__water { margin: 12px 20px 0; font-size: var(--fs-meta); color: var(--moon); }
.tour-card__water[data-state="unknown"] { color: var(--text-muted); }
.tour-card__nights { margin: 8px 20px 0; }
.tour-card__foot { position: relative; z-index: 1; padding: var(--s4) var(--s4) 20px; margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.tour-card__sold { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; }
.tour-card[data-state="sold-out"] .tour-card__photo { filter: grayscale(.8) brightness(.6); }
.tour-card[data-state="sold-out"] .price__amount { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }

/* SEGMENTED CONTROL · filters, sort, tabs */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface); border-radius: calc(var(--r-control) + 4px); }
.seg__btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text); font-weight: 600; font-size: var(--fs-small); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background var(--t-ui), color var(--t-ui); }
.seg__btn:hover { background: rgba(233,237,240,.08); }
.seg__btn[aria-pressed="true"], .seg__btn[aria-selected="true"] { background: var(--surface-light); color: var(--ink); }
.seg__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--moon); flex: none; }
.seg__dot[data-family="day"] { background: var(--category-day); } .seg__dot[data-family="1n"] { background: var(--category-1n); } .seg__dot[data-family="2n"] { background: var(--category-2n); } .seg__dot[data-family="style"] { background: var(--category-style); }
.seg__count { font-weight: 400; opacity: .7; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); align-items: center; margin-bottom: var(--s4); }
.toolbar__label { font-size: var(--fs-min); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-right: 4px; }

/* COMPARE TABLE · rows start with the ring; pick first and ringed; DIY last, no button. Phone: row becomes a card. */
.compare { display: flex; flex-direction: column; gap: 8px; }
.compare__head, .compare-row { display: grid; grid-template-columns: 64px minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.1fr) 150px; gap: 12px; align-items: center; padding: 14px 20px; }
.compare__head { padding-top: 4px; padding-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.compare__list { display: flex; flex-direction: column; gap: 8px; }
.compare-row { background: var(--surface); border-radius: var(--r-panel); transition: transform .5s var(--ease-float), background var(--t-ui); }
.compare-row:hover { transform: translateY(-3px); background: var(--surface-2); }
.compare-row--pick { background: var(--surface-pick); box-shadow: inset 0 0 0 1.5px rgba(246,196,69,.7); }
.compare-row__name { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.compare-row__name .tour-card__chips { position: static; }
.compare-row__title { font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.compare-row__cells { display: contents; }
.compare-row__cell { font-size: var(--fs-small); color: var(--text-2); min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.compare-row__label { display: none; }
.compare-row__water { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); font-weight: 600; color: var(--moon); min-width: 0; line-height: 1.35; }
.compare-row__water[data-state="unknown"] { color: var(--text-muted); }
.compare-row__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.compare-row__meta .rating { flex-wrap: wrap; row-gap: 0; }
.compare-row__action { min-width: 0; }
.compare-row__action .btn { width: 100%; }
.compare-row--diy, .compare-row--alt { grid-template-columns: 64px minmax(0,1fr) auto; background: transparent; box-shadow: inset 0 0 0 1px rgba(233,237,240,.25); }
.compare-row--diy:hover, .compare-row--alt:hover { transform: none; background: transparent; }
.compare-row__diy-icon { display: flex; justify-content: center; color: var(--text-muted); }
.compare__more { align-self: center; margin-top: var(--s3); }
.compare__empty { padding: var(--s5); text-align: center; color: var(--text-muted); }
@media (max-width: 1199px) {
  .compare__head { display: none; }
  .compare-row { grid-template-columns: 60px minmax(0,1fr); grid-template-areas: 'ring name' 'cells cells' 'water water' 'meta meta' 'action action'; gap: 12px; padding: 16px; border-radius: var(--r-hull); }
  .compare-row > .ring-wrap { grid-area: ring; align-self: start; } .compare-row__name { grid-area: name; }
  .compare-row__cells { grid-area: cells; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
  .compare-row__cell { background: var(--night); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
  .compare-row__label { display: block; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
  .compare-row__water { grid-area: water; }
  .compare-row__meta { grid-area: meta; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
  .compare-row__action { grid-area: action; }
  .compare-row--diy, .compare-row--alt { grid-template-areas: none; grid-template-columns: 40px minmax(0,1fr); }
  .compare-row--diy > :last-child, .compare-row--alt > :last-child { grid-column: 2; }
}
@media (max-width: 420px) { .compare-row__cells { grid-template-columns: minmax(0,1fr); } .compare-row__cell { flex-direction: row; gap: 10px; align-items: baseline; } .compare-row__label { flex: none; width: 92px; } }

/* HEADER · glass bar hanging from the top; one row on phone; four axes, two taps to any hub */
.site-header { position: sticky; top: 0; z-index: 50; padding: 0 var(--gutter); pointer-events: none; }
.site-header__bar { pointer-events: auto; max-width: var(--container); margin: 0 auto; min-height: 68px; display: flex; align-items: center; gap: var(--s5); padding: 0 12px 0 22px; background: rgba(12,24,36,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 26px 26px; }
.site-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
.site-header__wordmark { font-family: var(--font-display); font-size: 20px; line-height: 1; white-space: nowrap; }
.site-header__compare { font-size: var(--fs-small); font-weight: 600; color: var(--moon); white-space: nowrap; }
.site-header__menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--r-control); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.site-header__menu-btn i { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--text); }
.site-header__menu-btn i:last-child { width: 12px; }
.site-nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.site-nav__group { position: relative; }
.site-nav__summary { list-style: none; min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: var(--r-control); font-size: var(--fs-ui); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background var(--t-ui); }
.site-nav__summary::-webkit-details-marker { display: none; }
.site-nav__summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.site-nav__summary:hover, .site-nav__group[open] .site-nav__summary { background: rgba(233,237,240,.1); }
.site-nav__panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-float); display: flex; flex-direction: column; }
.site-nav__item { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; font-size: var(--fs-ui); color: var(--text); }
.site-nav__item:hover { background: rgba(241,227,181,.1); color: var(--moon); }
.site-nav__count { font-size: var(--fs-min); color: var(--text-muted); }
@media (max-width: 899px) {
  .site-header { padding: 0 8px; }
  .site-header__bar { min-height: 58px; padding: 0 6px 0 14px; border-radius: 0 0 20px 20px; flex-wrap: wrap; gap: 0; }
  .site-header__wordmark { font-size: 17px; }
  .site-header__compare { display: none; }
  .site-header__menu-btn { display: inline-flex; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 4px 0 14px; margin: 0; }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav__panel { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 8px; min-width: 0; }
  .site-nav__summary { justify-content: space-between; }
}
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-meta); color: var(--text-muted); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--slate-2); }
.breadcrumbs a { color: var(--text-3); }

/* HERO */
.hero { position: relative; overflow: hidden; margin-top: -68px; padding-top: 68px; }
.hero__media { position: absolute; inset: 0; }
.hero__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.hero__layer.is-active { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,24,36,.88) 0%, rgba(12,24,36,.55) 48%, rgba(12,24,36,.15) 75%), linear-gradient(0deg, var(--night) 0%, rgba(12,24,36,0) 38%); }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 460px; gap: var(--s7); align-items: end; min-height: 860px; padding-top: var(--s7); padding-bottom: var(--s8); }
.hero__content { display: flex; flex-direction: column; gap: 20px; }
.hero__aside { align-self: start; }
.hero--page .hero__inner { min-height: 640px; grid-template-columns: minmax(0,1fr) 420px; }
.hero--guide .hero__inner { min-height: 560px; grid-template-columns: minmax(0,1fr); }
.hero--guide .hero__content { max-width: 820px; }
@media (max-width: 899px) {
  .hero { margin-top: -58px; padding-top: 58px; }
  .hero__media { position: relative; inset: auto; height: 220px; margin: var(--s4) 10px 0; border-radius: 6px 6px 36px 36px; overflow: hidden; order: 3; }
  .hero__scrim { display: none; }
  .hero__inner, .hero--page .hero__inner, .hero--guide .hero__inner { grid-template-columns: minmax(0,1fr); min-height: 0; padding-top: var(--s5); padding-bottom: var(--s5); gap: var(--s5); }
  .hero { display: flex; flex-direction: column; }
  .hero__content { order: 1; } .hero__inner { order: 2; display: contents; }
  .hero__content { padding: var(--s5) var(--gutter) 0; }
  .hero__aside { order: 4; padding: 0 10px; }
}

/* BAY SWITCH · home hero. Only data we have: cruises, of them overnight, one night from; character as one word */
.bay-switch { background: rgba(12,24,36,.76); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: var(--r-hull-lg); padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.bay-switch__title { font-family: var(--font-display); font-size: 26px; line-height: 1.1; margin: 0; }
.bay-switch__sub { font-size: var(--fs-meta); color: var(--text-muted); margin: 4px 0 0; }
.bay-switch__options { display: flex; flex-direction: column; gap: 6px; }
.bay-switch__option { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 68px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: var(--r-control); background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background .4s, border-color .4s; }
.bay-switch__option:hover { background: rgba(233,237,240,.06); }
.bay-switch__option[aria-selected="true"] { background: rgba(241,227,181,.12); border-color: rgba(241,227,181,.55); }
.bay-switch__thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.bay-switch__name { display: flex; flex-direction: column; gap: 2px; font-size: 16px; font-weight: 650; line-height: 1.2; }
.bay-switch__character { font-size: var(--fs-min); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--moon); }
.bay-switch__numbers { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-min); color: var(--text-3); line-height: 1.35; text-align: right; }
.bay-switch__numbers b { color: var(--text); font-weight: 650; }
.bay-switch__panels { min-height: 318px; }
.pick-panel { background: var(--surface-light); color: var(--ink); border-radius: var(--r-panel); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.pick-panel__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-panel__row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; }
.pick-panel__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pick-panel__title { font-size: 17px; font-weight: 650; line-height: 1.3; color: var(--ink); }
.pick-panel .echo { color: var(--ink-3); }
.pick-panel__more { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); text-align: center; }
.on-light { color: var(--ink); }
.on-light a { color: var(--ink); text-decoration-color: rgba(12,24,36,.4); }

/* RECOMMENDATION · photo + floating light panel; dial, widget and review beneath */
.recommend { position: relative; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items: start; }
.recommend__media { grid-column: 1 / 2; grid-row: 1; position: relative; aspect-ratio: 4 / 3; border-radius: 8px 8px 60px 60px; overflow: hidden; }
.recommend__media img { width: 100%; height: 100%; object-fit: cover; }
.recommend__inset { position: absolute; left: 24px; bottom: 60px; width: 34%; aspect-ratio: 3 / 2; border-radius: 6px 6px 26px 26px; overflow: hidden; border: 4px solid var(--night); }
.recommend__inset img { width: 100%; height: 100%; object-fit: cover; }
.recommend__panel { grid-column: 2 / 3; grid-row: 1; margin: 56px 0 0 -120px; position: relative; background: var(--surface-light); color: var(--ink); border-radius: var(--r-hull-lg); padding: 34px 38px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-panel); }
.recommend__title { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; color: var(--ink); text-decoration: none; }
.recommend__note { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.recommend__facts { padding: 14px 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.recommend__buy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,250px); gap: 20px; align-items: end; }
.recommend__below { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: var(--s6); margin-top: var(--s6); }
.recommend__side { display: flex; flex-direction: column; gap: var(--s4); }
.alts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: var(--s7); align-items: start; }
.alts__title { font-family: var(--font-display); font-size: 30px; margin: var(--s7) 0 0; }
.alts > :nth-child(2) { margin-top: 40px; } .alts > :nth-child(3) { margin-top: 80px; }
@media (max-width: 1100px) { .recommend { grid-template-columns: minmax(0,1fr); } .recommend__media { border-radius: 6px 6px 0 0; } .recommend__panel { grid-column: 1; grid-row: 2; margin: -40px 10px 0; border-radius: var(--r-hull); padding: 20px 18px 22px; } .recommend__inset { display: none; } .recommend__below { grid-template-columns: minmax(0,1fr); } .recommend__buy { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 899px) { .alts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; } .alts > * { flex: none; width: 82%; scroll-snap-align: start; margin-top: 0 !important; } }

/* NIGHT DIAL · signature interaction */
.night-dial { background: var(--surface); border-radius: var(--r-hull-lg); padding: 32px 36px; display: grid; grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: 32px; align-items: center; }
.night-dial__face { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; }
.night-dial__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.night-dial__night { fill: rgba(0,0,0,.28); }
.night-dial__track { fill: none; stroke: rgba(233,237,240,.12); stroke-width: 18; }
.night-dial__water { fill: none; stroke: var(--moon); stroke-width: 18; stroke-dasharray: 14 4; opacity: .9; }
.night-dial__tick { stroke: var(--slate-2); stroke-width: 1; } .night-dial__tick.is-major { stroke-width: 1.5; }
.night-dial__label { font: 500 12px var(--font-text); fill: var(--text-faint); text-anchor: middle; }
.night-dial__stop { fill: var(--night); stroke: var(--moon); stroke-width: 2; cursor: pointer; transition: r .3s; }
.night-dial__stop.is-active { opacity: 0; }
.night-dial__hand { transition: transform .8s var(--ease-float); }
.night-dial__hand line { stroke: rgba(241,227,181,.4); }
.night-dial__halo { fill: rgba(246,196,69,.18); } .night-dial__moon { fill: var(--attention); }
.night-dial__center { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; gap: 6px; }
.night-dial__time { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1; color: var(--moon); }
.night-dial__label-text { font-size: 16px; font-weight: 650; line-height: 1.25; }
.night-dial__kind { font-size: var(--fs-min); color: var(--text-muted); }
.night-dial__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.night-dial__stop-btn { width: 100%; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 10px; align-items: center; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text-3); text-align: left; cursor: pointer; font-size: var(--fs-small); transition: background .4s, color .4s; }
.night-dial__stop-btn:hover { background: rgba(233,237,240,.06); }
.night-dial__stop-btn[aria-pressed="true"] { background: rgba(241,227,181,.14); color: var(--moon); }
.night-dial__stop-btn[data-kind="road"] { cursor: default; color: var(--text-faint); background: transparent; }
.night-dial__stop-time { font-weight: 650; }
.night-dial__caption { font-size: var(--fs-min); color: var(--text-faint); margin: 10px 0 0; }
.night-dial__head { font-size: var(--fs-min); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--moon); margin: 0 0 8px; }
@media (max-width: 899px) { .night-dial { grid-template-columns: minmax(0,1fr); padding: 20px 16px 24px; border-radius: var(--r-panel); } .night-dial__face { margin: 0 auto; } .night-dial__list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; padding-bottom: 6px; } .night-dial__list li { flex: none; scroll-snap-align: start; } .night-dial__stop-btn { grid-template-columns: auto; min-width: 128px; gap: 2px; background: rgba(233,237,240,.05); } }

/* PARTNER WIDGET CONTAINER · we host the GetYourGuide widget as it is */
.partner-widget { background: var(--surface); border-radius: var(--r-panel); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.partner-widget__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.partner-widget__title { font-family: var(--font-display); font-size: 22px; margin: 0; }
.partner-widget__source { font-size: var(--fs-min); color: var(--text-faint); }
.partner-widget__frame { min-height: 280px; border-radius: 10px; }
.partner-widget__loading, .partner-widget__failed { display: none; }
.partner-widget[data-state="loading"] .partner-widget__loading { display: flex; }
.partner-widget[data-state="failed"] .partner-widget__failed { display: flex; }
.partner-widget[data-state="loading"] .partner-widget__frame, .partner-widget[data-state="failed"] .partner-widget__frame { display: none; }
.partner-widget__loading { min-height: 280px; flex-direction: column; gap: 10px; }
.partner-widget__skeleton { height: 36px; border-radius: 10px; background: linear-gradient(90deg, rgba(233,237,240,.05), rgba(233,237,240,.12), rgba(233,237,240,.05)); background-size: 200% 100%; animation: pw-shimmer 1.6s linear infinite; }
.partner-widget__failed { min-height: 200px; flex-direction: column; gap: 12px; justify-content: center; align-items: stretch; text-align: center; font-size: var(--fs-small); color: var(--text-3); }
@keyframes pw-shimmer { to { background-position: -200% 0; } }

/* REVIEW CARD */
.review-card { background: var(--surface-light); color: var(--ink); border-radius: var(--r-panel); padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.review-card__head { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--category-1n); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; flex: none; }
.review-card__who { display: flex; flex-direction: column; font-size: var(--fs-meta); color: var(--ink-3); }
.review-card__who b { font-size: var(--fs-ui); color: var(--ink); font-weight: 650; }
.review-card__stars { margin-left: auto; display: flex; gap: 2px; }
.review-card__text { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.32; }
.review-card__tour { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.review-card__source { font-size: var(--fs-min); color: var(--ink-3); }
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: start; }
.leaders { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-bottom: var(--s6); }
.leader { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-top: 1px solid var(--line); }
.leader__value { font-family: var(--font-display); font-size: clamp(48px, 5vw, 72px); line-height: .9; color: var(--moon); }
.leader__count { font-size: var(--fs-small); color: var(--text-2); }
.leader__title { font-size: var(--fs-small); font-weight: 600; }
@media (max-width: 899px) { .reviews, .leaders { grid-template-columns: minmax(0,1fr); } }

/* HUB ENTRIES · four axes as four choices */
.axes { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 20px; }
.axis { background: var(--surface); border-radius: var(--r-panel); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.axis__title { font-size: var(--fs-min); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 4px; }
.hub-entry { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 72px; padding: 10px 14px 10px 10px; border-radius: var(--r-control); text-decoration: none; color: var(--text); background: rgba(233,237,240,.03); transition: background var(--t-ui); }
.hub-entry:hover { background: rgba(241,227,181,.1); color: var(--text); }
.hub-entry__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-entry__name { font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.hub-entry__kicker { font-size: var(--fs-meta); color: var(--text-muted); }
.hub-entry__num { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-min); color: var(--text-3); text-align: right; }
.hub-entry__num b { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--text); }
.hub-entry__glyph { width: 56px; height: 56px; border-radius: 50%; background: var(--night); display: flex; align-items: center; justify-content: center; color: var(--moon); }
.axes__side { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 899px) { .axes { grid-template-columns: minmax(0,1fr); } }

/* LENGTH COMPARE · day / one night / two nights, rings in three sizes */
.lengths { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 20px; align-items: end; }
.length { background: var(--surface); border-radius: var(--r-hull); padding: 26px 24px 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; height: 100%; }
.length--best { background: var(--surface-pick); box-shadow: inset 0 0 0 1.5px rgba(246,196,69,.7); }
.length__name { font-family: var(--font-display); font-size: 30px; line-height: 1; margin: 0; }
.length__ring { align-self: center; }
.length__row { display: flex; justify-content: space-between; width: 100%; font-size: var(--fs-small); color: var(--text-2); border-top: 1px solid var(--line); padding-top: 10px; gap: 12px; }
.length__row b { color: var(--text); font-weight: 650; text-align: right; }
.length__gets { font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); margin: 0; }
.length .cta { width: 100%; margin-top: auto; }
@media (max-width: 899px) { .lengths { grid-template-columns: minmax(0,1fr); } }

/* BAYS · three bays in equal rows + dark map */
.bays { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.bay { background: var(--surface); border-radius: var(--r-hull); overflow: hidden; display: flex; flex-direction: column; }
.bay__photo { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.bay__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bay__name { font-family: var(--font-display); font-size: 28px; margin: 0; line-height: 1; }
.bay__rows { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px 14px; margin: 0; font-size: var(--fs-small); }
.bay__rows dt { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; }
.bay__rows dd { margin: 0; color: var(--text-2); }
.bay__rows dd b { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--text); }
.bay .cta { margin-top: auto; }
.map { position: relative; border-radius: var(--r-panel); overflow: hidden; background: var(--surface); aspect-ratio: 21 / 9; margin-top: 20px; }
.map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(185deg) saturate(.55) brightness(.9); }
.map__legend { position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.map__pin { background: rgba(12,24,36,.85); border-radius: var(--r-pill); padding: 4px 10px; font-size: var(--fs-min); font-weight: 600; color: var(--moon); }
@media (max-width: 899px) { .bays { grid-template-columns: minmax(0,1fr); } .map { aspect-ratio: 4 / 3; } }

/* ROAD TRACK · Hanoi → pier → water → pier → Hanoi, proportional */
.road-track { display: flex; flex-direction: column; gap: 10px; }
.road-track__bar { display: flex; gap: 3px; height: 26px; }
.road-track__seg { flex-basis: 0; min-width: 0; border-radius: 4px; }
.road-track__seg--road { background: repeating-linear-gradient(90deg, var(--slate) 0 7px, transparent 7px 11px); }
.road-track__seg--pier { background: var(--pier); }
.road-track__seg--water { background: var(--moon); }
.road-track__labels { display: flex; gap: 3px; font-size: var(--fs-min); color: var(--text-muted); }
.road-track__labels span { flex-basis: 0; min-width: 0; white-space: nowrap; overflow: visible; }
.road-track__labels .is-water { color: var(--moon); font-weight: 600; }
.road-track__title { font-size: var(--fs-small); font-weight: 650; display: flex; justify-content: space-between; gap: 12px; }
.road-track__title span { color: var(--moon); }
.road-tracks { display: flex; flex-direction: column; gap: var(--s6); background: var(--surface); border-radius: var(--r-panel); padding: 28px; }

/* MONTH STRIP */
.month-strip { display: flex; flex-direction: column; gap: 16px; }
.month-strip__tabs { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 4px; }
.month-strip__tab { min-height: 96px; border: 0; border-radius: var(--r-control); background: var(--surface); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 4px; position: relative; transition: background var(--t-ui); }
.month-strip__tab[aria-selected="true"] { background: var(--surface-light); color: var(--ink); }
.month-strip__temp { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.month-strip__name { font-size: var(--fs-min); font-weight: 600; }
.month-strip__rain { width: 60%; height: 4px; border-radius: 2px; background: rgba(233,237,240,.12); overflow: hidden; }
.month-strip__rain i { display: block; height: 100%; background: var(--category-day); }
.month-strip__flag { position: absolute; top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--attention); }
.month-strip__panel { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(0,1fr); gap: 20px; background: var(--surface); border-radius: var(--r-panel); padding: 22px 24px; align-items: start; }
.month-strip__big { font-family: var(--font-display); font-size: 56px; line-height: .9; color: var(--moon); }
.month-strip__block { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); color: var(--text-2); }
.month-strip__block b { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--text-faint); }
@media (max-width: 899px) { .month-strip__tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .month-strip__tab { flex: none; width: 64px; scroll-snap-align: start; } .month-strip__panel { grid-template-columns: minmax(0,1fr); } }

/* PRICE LADDER · position = price */
.price-ladder { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border-radius: var(--r-panel); padding: 26px 28px; }
.price-ladder__row { display: grid; grid-template-columns: 200px minmax(0,1fr) 140px; gap: 16px; align-items: center; }
.price-ladder__name { font-size: var(--fs-ui); font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.price-ladder__name small { font-weight: 400; font-size: var(--fs-min); color: var(--text-faint); }
.price-ladder__track { position: relative; height: 30px; border-radius: 15px; background: rgba(233,237,240,.05); }
.price-ladder__range { position: absolute; top: 9px; height: 12px; border-radius: 6px; background: rgba(241,227,181,.35); }
.price-ladder__typical { position: absolute; top: 3px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 0 4px var(--surface); }
.price-ladder__value { font-family: var(--font-display); font-size: 22px; text-align: right; }
.price-ladder__value small { display: block; font-family: var(--font-text); font-size: var(--fs-min); color: var(--text-faint); }
.price-ladder__axis { position: relative; height: 18px; margin-left: 216px; margin-right: 156px; font-size: var(--fs-min); color: var(--text-faint); }
.price-ladder__axis span { position: absolute; transform: translateX(-50%); }
.price-ladder__date { font-size: var(--fs-min); color: var(--text-faint); margin: 0; }
@media (max-width: 899px) { .price-ladder__row { grid-template-columns: minmax(0,1fr) auto; } .price-ladder__track { grid-column: 1 / -1; grid-row: 2; } .price-ladder__axis { margin: 0; } .price-ladder { padding: 18px; } }

/* STEPS · how to book */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; counter-reset: step; margin: 0; padding: 0; list-style: none; }
.steps__item { background: var(--surface); border-radius: var(--r-panel); padding: 22px; display: flex; flex-direction: column; gap: 10px; counter-increment: step; }
.steps__item::before { content: counter(step); width: 38px; height: 38px; border-radius: 50%; background: var(--night); color: var(--moon); font-family: var(--font-display); font-size: 20px; display: flex; align-items: center; justify-content: center; }
.steps__title { font-size: 18px; font-weight: 650; margin: 0; }
.steps__fact { font-size: var(--fs-small); color: var(--text-3); margin: 0; }
@media (max-width: 899px) { .steps { grid-template-columns: minmax(0,1fr); } }

/* TIMELINE · cruise-port day */
.timeline { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--pier); margin-left: 10px; }
.timeline__item { position: relative; padding: 0 0 22px 26px; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; }
.timeline__item::before { content: ''; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 2px var(--moon); }
.timeline__item--water::before { background: var(--moon); }
.timeline__time { font-weight: 650; font-size: var(--fs-small); }
.timeline__text { font-size: var(--fs-small); color: var(--text-2); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.faq__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.faq__toggle { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-control); background: var(--surface); color: var(--moon); font-weight: 600; font-size: var(--fs-small); cursor: pointer; }
.faq__item { background: var(--surface); border-radius: var(--r-panel); }
.faq__toggle .faq__toggle-open { display: none; } .faq__toggle[data-state="closed"] .faq__toggle-open { display: inline; } .faq__toggle[data-state="closed"] .faq__toggle-close { display: none; }
.faq__q { list-style: none; cursor: pointer; min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: '+'; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--night); color: var(--moon); display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 20px; transition: transform var(--t-ui); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 22px 20px; margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: var(--measure); }

/* FINAL CTA */
.final-cta { position: relative; overflow: hidden; border-radius: var(--r-hull-lg); background: var(--surface); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 380px; }
.final-cta__photo { width: 100%; height: 100%; object-fit: cover; }
.final-cta__body { padding: 40px 44px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.final-cta__title { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); line-height: 1.08; margin: 0; }
@media (max-width: 899px) { .final-cta { grid-template-columns: minmax(0,1fr); } .final-cta__photo { aspect-ratio: 16 / 10; } .final-cta__body { padding: 22px 20px 26px; } }

/* STICKY BAR · phone only */
.sticky-bar { display: none; }
@media (max-width: 899px) {
  .sticky-bar { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 60; display: flex; align-items: center; gap: 10px; background: var(--surface-light); color: var(--ink); border-radius: 18px; padding: 8px 8px 8px 12px; box-shadow: 0 16px 40px -10px rgba(0,0,0,.7); transition: transform .5s var(--ease-float), opacity .4s; }
  .sticky-bar.is-hidden { transform: translateY(130%); opacity: 0; }
  .sticky-bar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .sticky-bar__title { font-size: 13px; font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); text-decoration: none; }
  .sticky-bar__meta { font-size: var(--fs-min); color: var(--ink-3); }
  body { padding-bottom: 96px; }
}

/* FOOTER */
.site-footer { margin-top: var(--s9); background: #08121B; border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s6); }
.site-footer__top { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0,1fr)); gap: var(--s6); }
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer__brand p { margin: 0; font-size: var(--fs-small); color: var(--text-muted); max-width: 34ch; }
.site-footer__title { font-size: var(--fs-min); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--moon); margin: 0 0 12px; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-footer__links a { display: flex; align-items: center; min-height: 36px; font-size: var(--fs-small); color: var(--text-3); text-decoration: none; }
.site-footer__links a:hover { color: var(--moon); }
.site-footer__bottom { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: var(--fs-min); color: var(--text-faint); }
.site-footer__bottom nav { display: flex; gap: 18px; }
.site-footer__bottom a { color: var(--text-muted); }
@media (max-width: 899px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); } .site-footer__brand { grid-column: 1 / -1; } }

/* LONG TEXT ELEMENTS · no bare paragraph lives on the page */
.article { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px var(--s7); align-items: start; }
.article__body { display: flex; flex-direction: column; gap: 20px; max-width: var(--measure); min-width: 0; }
.article__body > p, .article-text { margin: 0; font-size: 18px; line-height: 1.72; font-weight: 350; color: var(--text-2); text-wrap: pretty; }
.article__body strong { color: var(--text); font-weight: 650; }
.article__aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.article__h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 12px 0 -6px; color: var(--text); }
.tldr { background: var(--surface-light); color: var(--ink); border-radius: var(--r-panel); padding: 22px 24px; font-size: 19px; line-height: 1.55; margin: 0; }
.tldr b { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.keypoints { background: var(--surface); border-radius: var(--r-panel); padding: 22px 24px; margin: 0; }
.keypoints__title { font-size: var(--fs-min); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--moon); margin: 0 0 12px; }
.keypoints__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.keypoints__list li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 12px; font-size: 16.5px; line-height: 1.5; color: var(--text-2); }
.keypoints__list li::before { content: ''; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--moon); }
.keypoints__list b { color: var(--text); font-weight: 650; }
.pullquote { margin: 8px 0; padding: 4px 0 4px 28px; position: relative; }
.pullquote::before { content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--attention); box-shadow: 0 0 14px var(--attention); }
.pullquote__text { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; margin: 0; color: var(--moon); }
.pullquote__by { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 8px; display: block; }
.bignum { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 22px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 6px 0; }
.bignum__value { font-family: var(--font-display); font-size: clamp(56px, 7vw, 96px); line-height: .9; color: var(--moon); grid-row: span 2; }
.bignum__label { font-size: 17px; font-weight: 600; }
.bignum__facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-small); color: var(--text-3); }
.figure { margin: 6px 0; }
.figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px 6px 30px 30px; }
.figure__caption { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 10px; display: flex; gap: 8px; }
.figure__caption b { color: var(--moon); font-weight: 600; }
.sidenote { background: var(--surface); border-radius: var(--r-panel); padding: 18px 20px; font-size: var(--fs-small); line-height: 1.55; color: var(--text-3); margin: 0; }
.sidenote__title { display: block; font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--moon); margin-bottom: 6px; }
.step-list { counter-reset: s; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.step-list li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
.step-list li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--moon); font-family: var(--font-display); display: flex; align-items: center; justify-content: center; }
.definition { margin: 0; display: grid; grid-template-columns: minmax(0,180px) minmax(0,1fr); gap: 10px 20px; padding: 18px 20px; border-radius: var(--r-panel); background: var(--surface); }
.definition dt { font-weight: 650; font-size: var(--fs-small); color: var(--moon); }
.definition dd { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.tour-link { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--moon); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.lede-strong { font-size: 20px !important; color: var(--text) !important; font-weight: 400 !important; }
@media (max-width: 1100px) { .article { grid-template-columns: minmax(0,1fr); } .article__aside { position: static; } }
@media (max-width: 640px) { .definition { grid-template-columns: minmax(0,1fr); } .article__body > p, .article-text { font-size: 17px; } }

/* TILES · practical facts */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.tile { background: var(--surface); border-radius: var(--r-panel); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.tile__head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-min); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.tile__head .icon { color: var(--moon); }
.tile__value { font-family: var(--font-display); font-size: 26px; line-height: 1.1; }
.tile__text { margin: 0; font-size: var(--fs-small); color: var(--text-3); line-height: 1.5; }
@media (max-width: 899px) { .tiles { grid-template-columns: minmax(0,1fr); } }

/* MINI COMPARE · transposed: products are columns */
.mini-compare { overflow: hidden; border-radius: var(--r-panel); background: var(--surface); }
.mini-compare__table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.mini-compare__table th, .mini-compare__table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.mini-compare__table thead th { vertical-align: bottom; }
.mini-compare__table tbody th { width: 160px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.mini-compare__table .is-top { background: var(--surface-pick); }
.mini-compare__product { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: var(--fs-small); }
.mini-compare__table tr:last-child td, .mini-compare__table tr:last-child th { border-bottom: 0; }
@media (max-width: 899px) { .mini-compare { overflow-x: visible; } .mini-compare__table, .mini-compare__table tbody, .mini-compare__table thead, .mini-compare__table tr { display: block; } .mini-compare__table thead { display: none; } .mini-compare__table tr { display: grid; grid-template-columns: minmax(0,1fr); padding: 10px 0; border-bottom: 1px solid var(--line); } .mini-compare__table th, .mini-compare__table td { border: 0; padding: 4px 16px; } .mini-compare__table td::before { content: attr(data-product); display: block; font-size: var(--fs-min); color: var(--text-faint); } }

/* INCLUDED / OPTIONS / GOTCHAS / CABINS */
.included { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.included__col { background: var(--surface); border-radius: var(--r-panel); padding: 22px; }
.included__title { font-size: var(--fs-min); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; color: var(--moon); }
.included__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.included__item { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; font-size: var(--fs-small); color: var(--text-2); }
.included__item::before { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.included__item--yes::before { content: '✓'; background: var(--moon); color: var(--ink); }
.included__item--no::before { content: '–'; background: transparent; box-shadow: inset 0 0 0 1.5px var(--slate); color: var(--text-muted); }
@media (max-width: 640px) { .included { grid-template-columns: minmax(0,1fr); } }
.state-panel { background: var(--surface); border-radius: var(--r-panel); padding: 22px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.state-panel__text { margin: 0; font-size: var(--fs-ui); color: var(--text-2); max-width: 60ch; }
.gotchas { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gotcha { background: var(--surface); border-radius: var(--r-panel); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.gotcha__title { font-size: 16px; font-weight: 650; margin: 0; display: flex; gap: 10px; align-items: flex-start; }
.gotcha__title::before { content: '!'; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--attention); color: var(--ink); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.gotcha__text { margin: 0; font-size: var(--fs-small); color: var(--text-3); }
.gotcha__alt { font-size: var(--fs-small); color: var(--moon); margin: 0; }
.gotcha__alt::before { content: 'Instead: '; font-weight: 650; }
@media (max-width: 899px) { .gotchas { grid-template-columns: minmax(0,1fr); } }
.cabins { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.cabin { background: var(--surface); border-radius: var(--r-hull); overflow: hidden; display: flex; flex-direction: column; }
.cabin__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cabin__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.cabin__name { font-family: var(--font-display); font-size: 24px; margin: 0; }
.cabin__text { margin: 0; font-size: var(--fs-small); color: var(--text-3); }
.cabin__count { font-size: var(--fs-meta); color: var(--moon); }
@media (max-width: 899px) { .cabins { grid-template-columns: minmax(0,1fr); } }

/* CAMPS · hub choices = filters = table groups */
.camps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.camp { min-height: 88px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); padding: 14px 18px; text-align: left; text-decoration: none; display: flex; flex-direction: column; gap: 4px; transition: background var(--t-ui), border-color var(--t-ui); }
.camp:hover { background: var(--surface-2); color: var(--text); border-color: rgba(241,227,181,.45); }
.camp__name { font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.camp__meta { font-size: var(--fs-meta); color: var(--text-muted); }
@media (max-width: 640px) { .camps { grid-template-columns: minmax(0,1fr); } }
.mini-rows { display: flex; flex-direction: column; gap: 8px; }
.mini-row { display: grid; grid-template-columns: 52px minmax(0,1fr) auto auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; background: var(--surface); border-radius: var(--r-panel); }
.mini-row__title { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; }
.mini-row__meta { font-size: var(--fs-min); color: var(--text-muted); }
@media (max-width: 640px) { .mini-row { grid-template-columns: 52px minmax(0,1fr); } .mini-row .price { grid-column: 2; } .mini-row .btn { grid-column: 1 / -1; } }
.camp-section { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--s6); align-items: start; }
@media (max-width: 1000px) { .camp-section { grid-template-columns: minmax(0,1fr); } }

/* CATALOG */
.catalog { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: var(--s6); align-items: start; }
.catalog__filters { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; background: var(--surface); border-radius: var(--r-panel); padding: 20px; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group__title { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin: 0; }
.filter-group__options { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); font-size: var(--fs-meta); font-weight: 600; cursor: pointer; }
.filter-chip[aria-pressed="true"] { background: var(--surface-light); color: var(--ink); border-color: var(--surface-light); }
.result-count { font-size: var(--fs-ui); color: var(--text-2); margin: 0; }
.result-count b { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--moon); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 22px; align-items: stretch; }
@media (max-width: 899px) { .catalog { grid-template-columns: minmax(0,1fr); } .catalog__filters { position: static; } }

/* HOW WE COMPARE · model diagram */
.model { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.model__step { background: var(--surface); border-radius: var(--r-panel); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.model__value { font-family: var(--font-display); font-size: 30px; color: var(--moon); line-height: 1; }
.model__label { font-size: var(--fs-small); color: var(--text-2); }
.model__op { font-size: var(--fs-min); color: var(--text-faint); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 899px) { .model { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* 404 */
.not-found { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: var(--s8) var(--gutter); }
.not-found__inner { max-width: 640px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.not-found__code { font-family: var(--font-display); font-size: clamp(90px, 16vw, 180px); line-height: .9; color: var(--moon); opacity: .9; }
.search { display: flex; gap: 8px; width: 100%; max-width: 480px; }
.search__input { flex: 1; min-width: 0; min-height: 50px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 0 16px; font: inherit; font-size: var(--fs-ui); }
.search__input::placeholder { color: var(--text-faint); }
.exits { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; width: 100%; }
@media (max-width: 640px) { .exits { grid-template-columns: minmax(0,1fr); } }

/* HANDOFF NOTES · never published: port strips [data-design-note] */
.design-note { border: 1.5px dashed rgba(233,237,240,.45); border-radius: 6px; padding: 14px 18px; font: 400 12px/1.6 ui-monospace, Menlo, monospace; color: var(--text-3); margin: var(--s4) 0; max-width: 960px; }
.design-note::after { content: 'design note, not page content'; display: block; margin-top: 8px; color: var(--text-faint); font-size: 11px; }
.design-note b { color: var(--text); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.grid-2--wide-left { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items: start; }
@media (max-width: 899px) { .grid-2, .grid-2--wide-left, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); } .section { padding: var(--s8) 0; } }

/* SHOWCASE only (not published) */
.road-track__seg--unknown { background: none; box-shadow: inset 0 0 0 1.5px var(--slate); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(125,143,163,.35) 6px 8px); }
.specimen { display: flex; flex-direction: column; gap: 12px; }
.specimen__label { font: 500 12px/1.4 ui-monospace, Menlo, monospace; color: var(--text-faint); margin: 0; }
.specimen__label b { color: var(--moon); font-weight: 500; }
.showcase-frame .sticky-bar { display: flex; position: static; box-shadow: none; }
.swatch { display: flex; flex-direction: column; gap: 6px; }
.swatch__chip { height: 72px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.swatch__name { font: 500 12px/1.4 ui-monospace, Menlo, monospace; color: var(--text-2); }
.swatch__role { font-size: 13px; color: var(--text-muted); }
.component-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.component-list th, .component-list td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.component-list th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.component-list code { font: 500 12px ui-monospace, Menlo, monospace; color: var(--moon); }

/* MINI COMPARE as grid (products are columns) */
.mini-compare__row { display: grid; grid-template-columns: 170px repeat(var(--cols, 3), minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.mini-compare__row:last-child { border-bottom: 0; }
.mini-compare__label, .mini-compare__cell { padding: 14px 16px; font-size: var(--fs-small); min-width: 0; }
.mini-compare__label { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.mini-compare__cell.is-top { background: var(--surface-pick); }
.mini-compare__cell-name { display: none; }
@media (max-width: 899px) { .mini-compare__row { grid-template-columns: minmax(0,1fr); padding: 8px 0; } .mini-compare__row--head { display: none; } .mini-compare__label { padding-bottom: 2px; } .mini-compare__cell { padding: 4px 16px; } .mini-compare__cell-name { display: block; font-size: var(--fs-min); color: var(--text-faint); } }

/* on-light overrides (contrast) */
.on-light .btn--book, .on-light .btn--book:hover, .on-light .btn--book:visited { color: #fff; }
.on-light .btn--move { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.on-light .btn--move:hover { background: var(--ink); color: var(--surface-light); }
.on-light .facts, .on-light .fact__text, .on-light .facts__value { color: var(--ink-2); }
.on-light .echo { color: var(--ink-3); }
.on-light .rating { color: var(--ink); }
.on-light .rating--none { color: var(--ink-2); }
.site-nav__group:last-child .site-nav__panel { left: auto; right: 0; }

/* round-3 fixes: header at tablet, 320 px overflow */
@media (max-width: 1120px) { .site-header__compare { display: none; } }
@media (max-width: 1020px) and (min-width: 900px) { .site-nav__summary { padding: 0 10px; } .site-header__wordmark { font-size: 18px; } }
.partner-widget__head { flex-wrap: wrap; }
.keypoints__list li > span, .keypoints__list li > * { min-width: 0; overflow-wrap: anywhere; }
.btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.tour-card__head, .pick-panel__main, .stack { min-width: 0; }
@media (max-width: 360px) { :root { --gutter: 12px; } .bay-switch__option { grid-template-columns: 44px minmax(0,1fr); } .bay-switch__numbers { grid-column: 1 / -1; flex-direction: row; gap: 10px; align-items: baseline; justify-content: flex-start; } .bay-switch__thumb { width: 44px; height: 44px; } }

.not-found__inner > * { max-width: 100%; }
.search .btn { flex: none; }

.not-found { grid-template-columns: minmax(0,1fr); }
.not-found__inner { width: 100%; min-width: 0; justify-self: center; }
.search__input { width: 0; }

.article__body > p.tldr, .tldr { color: var(--ink); font-weight: 400; }
.tldr b { color: var(--ink-3); }
/* phone: no horizontal rails anywhere */
@media (max-width: 899px) {
  .alts { display: grid; grid-template-columns: minmax(0,1fr); overflow: visible; margin: var(--s6) 0 0; padding: 0; gap: var(--s6); }
  .alts > * { width: auto; margin-top: 0 !important; }
  .night-dial__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); overflow: visible; gap: 6px; }
  .night-dial__stop-btn { min-width: 0; grid-template-columns: minmax(0,1fr); }
  .month-strip__tabs { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); overflow: visible; }
  .month-strip__tab { width: auto; min-height: 84px; }
}

/* included: text + data spans flow inline (grid made each text run its own cell) */
.included__item { display: block; position: relative; padding-left: 32px; min-height: 22px; }
.included__item::before { position: absolute; left: 0; top: 2px; display: flex; }
/* tap targets ≥ 44 px for standalone links */
.site-header__brand { min-height: 44px; }
.link-move, .pick-panel__more, .site-header__compare { display: inline-flex; align-items: center; min-height: 44px; }
.pick-panel__more { justify-content: center; }
.sticky-bar__title { min-height: 34px; display: flex; align-items: center; }
.mini-row { position: relative; }
.mini-row__title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.mini-row .btn, .mini-row .ring { position: relative; z-index: 1; }
.site-footer__links a, .site-footer__bottom a { min-height: 44px; display: inline-flex; align-items: center; }
/* component list (library only) stacks on phone */
@media (max-width: 640px) { .component-list thead { display: none; } .component-list, .component-list tbody, .component-list tr, .component-list td { display: block; width: 100%; } .component-list tr { padding: 10px 0; border-bottom: 1px solid var(--line); } .component-list td { border: 0; padding: 3px 0; } }

/* month strip: flag in flow, never over the figure; 4 × 3 on phone */
.month-strip__tab { justify-content: flex-start; padding-top: 8px; }
.month-strip__flag { position: static; min-height: 16px; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 16px; text-transform: none; color: var(--attention); white-space: nowrap; }
.month-strip__tab[aria-selected="true"] .month-strip__flag { color: var(--moon-ink); }
.month-strip__temp { margin-top: auto; }
@media (max-width: 899px) { .month-strip__tabs { grid-template-columns: repeat(4, minmax(0,1fr)); } .month-strip__tab { min-height: 92px; } }

/* night dial list: every stop the same box; road stops muted, not unboxed */
.night-dial__list { grid-auto-rows: 1fr; }
.night-dial__list li { display: flex; }
.night-dial__stop-btn { height: 100%; background: rgba(233,237,240,.05); }
.night-dial__stop-btn[data-kind="road"] { background: rgba(233,237,240,.03); color: var(--text-muted); }
.night-dial__stop-btn[data-kind="road"] .night-dial__stop-time::after { content: ' · road'; font-weight: 400; }
@media (min-width: 900px) { .night-dial__list { display: flex; flex-direction: column; } .night-dial__stop-btn { background: transparent; } .night-dial__stop-btn[data-kind="road"] { background: transparent; } }
/* cabins: example cruise + actions */
.cabin__body { flex: 1; }
.cabin__example { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cabin__example-label { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cabin__example-meta { font-size: 13px; color: var(--text-muted); }
.cabin .cta { margin-top: auto; }
/* mini-compare product photo */
.mini-compare__media { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--surface-2); margin-bottom: 6px; }
.mini-compare__photo { width: 100%; height: 100%; object-fit: cover; }
.mini-compare__media .tour-card__empty { border-radius: 10px; }
@media (max-width: 899px) { .mini-compare__row--head { display: grid; grid-template-columns: repeat(var(--cols,3), minmax(0,1fr)); gap: 8px; padding: 12px; } .mini-compare__row--head .mini-compare__label { display: none; } .mini-compare__row--head .mini-compare__cell { padding: 0; } .mini-compare__row--head .chip { display: none; } .mini-compare__row--head .mini-compare__product a { font-size: 12px; line-height: 1.3; } }

/* SITE SEARCH (404 and header search page) */
.site-search { width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.site-search__box { display: flex; gap: 8px; padding: 8px; background: var(--surface-light); border-radius: calc(var(--r-control) + 6px); box-shadow: 0 20px 50px -24px rgba(0,0,0,.8); }
.site-search__box .icon { color: var(--ink-3); align-self: center; margin-left: 8px; }
.site-search__input { flex: 1 1 0; min-width: 0; width: 0; min-height: 48px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; padding: 0 6px; outline: none; }
.site-search__input::placeholder { color: var(--ink-3); }
.site-search__box:focus-within { box-shadow: 0 0 0 2px var(--attention), 0 20px 50px -24px rgba(0,0,0,.8); }
.site-search__suggest { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.site-search__suggest-label { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-right: 4px; }
.site-search__count { font-size: 14px; color: var(--moon); margin: 0; min-height: 20px; }
.site-search__results { display: flex; flex-direction: column; gap: 8px; }
.site-search__empty { font-size: 15px; color: var(--text-3); margin: 0; }
.not-found__inner { max-width: 760px; }