/* excur.org — "Deep water"
 *
 * Mobile-first: every rule is the phone layout; wider viewports are additive
 * at the breakpoints near the bottom.
 *
 * Type: Fraunces (variable, soft serif with a WONK axis) for display, Inter
 * (variable) for UI. Both self-hosted — no CDN request, no render-blocking
 * third-party script. Prices are always tabular so columns of figures align.
 */

/* ---------- Fonts ------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-var.069cb90e11a3.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVar";
  src: url("../fonts/Inter-var.4b73e2ff3024.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ink and surface */
  --ink:        #0A1826;
  --ink-2:      #52657A;
  --ink-3:      #8496A6;
  --surface:    #FFFFFF;
  --canvas:     #EDF2F8;
  --line:       #D9E3ED;
  --line-soft:  #E9F0F6;

  /* Action — a deeper, more saturated azure than the flat blue it replaces */
  --azure:      #1668E3;
  --azure-deep: #0B47A6;
  --indigo:     #3B2E8C;
  --foam:       #E6EFFE;

  /* The one warm note: prices, the number the whole site exists to surface. */
  --citrus:     #F97316;
  --citrus-ink: #9A3412;

  /* Depth: shadows are tinted with the sea, never neutral grey. Grey shadows
     on a blue canvas are what makes a page look flat and dated. */
  --lift-1: 0 1px 2px rgba(10, 40, 80, .05), 0 2px 6px rgba(10, 40, 80, .05);
  --lift-2: 0 4px 12px rgba(10, 40, 80, .08), 0 12px 28px rgba(10, 40, 80, .07);
  --lift-3: 0 8px 20px rgba(10, 40, 80, .11), 0 26px 60px rgba(10, 40, 80, .13);
  --glow:   0 0 0 4px rgba(22, 104, 227, .16);

  --radius:    18px;
  --radius-sm: 11px;
  --radius-lg: 26px;

  --display: "Fraunces", "Iowan Old Style", Georgia, ui-serif, serif;
  --sans: "InterVar", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Display type gets high optical size and a touch of WONK — the axis that
     gives Fraunces its character. Restraint: only headings use it. */
  --wonk: "opsz" 96, "SOFT" 20, "WONK" 1;

  --tap: 44px;

  --port-hue: var(--azure);
  --port-tint: var(--foam);
  --port-on: var(--azure-deep);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* The [hidden] attribute must actually hide things.
   The browser's own `[hidden] { display: none }` is a user-agent rule, and ANY
   author rule that sets display beats it at equal specificity. So `.sl-sum
   { display: flex }` silently defeated `element.hidden = true`, leaving cleared
   shortlist cards and totals on screen. !important is the correct tool here:
   nothing should ever out-rank "this element is hidden". */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 700;
  letter-spacing: -.018em;
  /* Balance headings across lines so no line is left with a single orphan word,
     and never hyphenate. Nothing in this site forces a manual <br>. */
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: break-word;
}
p, li, .card__desc, .sea__lede { text-wrap: pretty; hyphens: none; }
h1 { font-size: clamp(2.1rem, 7vw, 3.9rem); line-height: 1.03; margin: 0 0 .28em; }
h2 { font-size: clamp(1.4rem, 4vw, 1.95rem); line-height: 1.14; margin: 0 0 .5em; }
h3 { font-size: 1.1rem; margin: 0 0 .4em; }
p  { margin: 0 0 1em; }

a { color: var(--azure); text-decoration-color: color-mix(in srgb, var(--azure) 32%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--azure); outline-offset: 2px; border-radius: 5px; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* 20px, not 16: cards carry 16-18px of their own padding, so at 16px a bare
   heading or breadcrumb sits noticeably further left than the card text beside
   it and reads as crowding the screen edge. */
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 20px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px;
  transition: top .15s ease; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ---------- Header ------------------------------------------------------ */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
/* Wraps to two rows on a phone: wordmark + dates, then the nav as its own
   scrollable strip. Below 900px the nav used to be hidden entirely, which left
   Compare, Plan trip and Shortlist unreachable on the device most used here. */
.masthead__in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; }

.wordmark {
  font-family: var(--display); font-variation-settings: var(--wonk);
  font-size: 1.6rem; font-weight: 800; color: var(--ink);
  text-decoration: none; letter-spacing: -.035em;
}
.wordmark em {
  font-style: normal;
  background: linear-gradient(120deg, var(--azure), #17A3C2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.voyage-tag {
  order: 2; margin-left: auto; font-size: .7rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
  padding: 5px 10px; border-radius: 99px; background: var(--foam);
}
.wordmark { order: 1; }

/* Its own row on a phone: icon over a full label, five across. Every item is
   visible at once and nothing is abbreviated. Truncating "Shortlist" to
   "Shortl..." or making people swipe sideways to find Compare both hide the
   site's features; stacking the label under an icon buys the width honestly. */
.nav {
  order: 3; flex-basis: 100%; display: flex; gap: 2px;
  padding: 2px 0 6px;
}
.nav a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-3); text-decoration: none;
  font-size: .64rem; font-weight: 700; letter-spacing: .005em;
  padding: 7px 2px; border-radius: 10px; white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.nav a svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav a span { line-height: 1; }
.nav .count-pill { margin: 0; position: absolute; transform: translate(16px, -14px); }
.nav a { position: relative; }
.nav a:hover { background: var(--foam); color: var(--azure-deep); }
.nav a[aria-current="page"] { color: var(--azure-deep); background: var(--foam); }

.count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; margin-left: 5px;
  border-radius: 99px; background: var(--azure); color: #fff;
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.count-pill[hidden] { display: none; }

/* ---------- Hero -------------------------------------------------------- */
.sea {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(90% 80% at 8% 0%,  #2F9BE8 0%, transparent 58%),
    radial-gradient(80% 75% at 92% 4%, #10B3A0 0%, transparent 55%),
    radial-gradient(70% 90% at 62% 100%, #5B3FA8 0%, transparent 60%),
    linear-gradient(170deg, #0F4FA0 0%, #071E3D 100%);
  color: #fff;
  padding: 34px 0 0;
}
/* Bathymetric contours: a depth chart of the sea being crossed. */
.sea::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    radial-gradient(58% 42% at 18% 96%, transparent 47%, rgba(255,255,255,.09) 48%, transparent 51%),
    radial-gradient(68% 48% at 20% 98%, transparent 57%, rgba(255,255,255,.06) 58%, transparent 61%),
    radial-gradient(78% 54% at 22% 100%, transparent 67%, rgba(255,255,255,.04) 68%, transparent 71%);
}
.sea h1 { color: #fff; margin-bottom: .18em; }
.sea h1 .accent {
  background: linear-gradient(100deg, #7FE7D3, #9EC5FF 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sea__lede { color: #BFD8F2; font-size: 1.03rem; margin: 0 0 20px; max-width: 48ch; }
.sea__lede strong { color: #fff; font-weight: 700; }

/* The home hero is a headline and a count, nothing else. Sized to sit on one
   line on a phone rather than breaking mid-sentence. */
.sea--compact { padding: 26px 0 24px; }
.sea__head {
  font-size: clamp(1.32rem, 4.6vw, 3.3rem);
  margin: 0 0 .3em; text-wrap: nowrap;
}
.sea__count { color: #BFD8F2; font-size: .95rem; margin: 0; }
.sea__count strong {
  color: #fff; font-weight: 700; font-size: 1.1rem;
  font-family: var(--display); font-variation-settings: "opsz" 48, "WONK" 0;
}
/* Very narrow screens: let it wrap rather than overflow the viewport. */
@media (max-width: 340px) { .sea__head { text-wrap: balance; } }

/* ---------- Itinerary rail ---------------------------------------------- */
.rail { margin: 0 -20px; padding: 2px 20px 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail__track { display: flex; align-items: stretch; min-width: min-content; }

.leg { display: flex; align-items: center; flex: 0 0 auto; }
.leg__link {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  padding: 10px 14px; border-radius: 14px; min-height: var(--tap);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.leg__link:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); border-color: rgba(255,255,255,.34); }
.leg__dot { width: 9px; height: 9px; border-radius: 99px; background: var(--port-hue); box-shadow: 0 0 0 3px rgba(255,255,255,.26), 0 0 14px var(--port-hue); }
.leg__name { color: #fff; font-weight: 700; font-size: .89rem; white-space: nowrap; letter-spacing: -.01em; }
.leg__meta { color: #9DC2E8; font-size: .72rem; }
.leg__join { width: 24px; height: 1px; background: rgba(255,255,255,.28); flex: 0 0 auto; }

/* ---------- Controls ---------------------------------------------------- */
.toolbar { padding: 18px 0 8px; }

.search {
  position: relative; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 99px; box-shadow: var(--lift-2);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.search:focus-within { border-color: var(--azure); box-shadow: var(--lift-2), var(--glow); }
.search svg { position: absolute; left: 17px; width: 19px; height: 19px; color: var(--ink-3); pointer-events: none; }
.search input {
  flex: 1; min-height: 54px; padding: 0 48px 0 46px;
  border: 0; background: transparent; border-radius: 99px;
  font: inherit; font-size: 1.02rem; color: var(--ink);
}
.search input:focus { outline: none; }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__clear {
  position: absolute; right: 7px; width: 38px; height: 38px;
  display: none; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  border-radius: 99px; font-size: 1.25rem; line-height: 1;
}
.search__clear:hover { background: var(--canvas); color: var(--ink); }
.search--filled .search__clear { display: flex; }

.resultbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 0 4px; }
.resultbar__count { font-size: .93rem; color: var(--ink-2); }
.resultbar__count b { color: var(--ink); font-weight: 700; }
.resultbar__spacer { flex: 1 1 auto; }

.select {
  appearance: none; -webkit-appearance: none;
  min-height: 42px; padding: 0 34px 0 13px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink); cursor: pointer;
  box-shadow: var(--lift-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2352657A' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 9px;
}
.select:hover { border-color: var(--ink-3); }

.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; box-shadow: var(--lift-1); }
.seg a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 42px; color: var(--ink-3); text-decoration: none; transition: background .15s ease, color .15s ease; }
.seg a + a { border-left: 1px solid var(--line); }
.seg a[aria-current="true"] { background: var(--foam); color: var(--azure-deep); }
.seg svg { width: 17px; height: 17px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap); padding: 0 17px;
  border-radius: 11px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none; box-shadow: var(--lift-1);
  transition: background .16s ease, border-color .16s ease, transform .1s ease, box-shadow .16s ease;
}
.btn:hover { border-color: var(--ink-3); box-shadow: var(--lift-2); }
.btn:active { transform: scale(.975); }
.btn--primary {
  background: linear-gradient(160deg, #2E7BEE, var(--azure-deep));
  border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px rgba(11, 71, 166, .3), 0 10px 26px rgba(11, 71, 166, .22);
}
.btn--primary:hover { filter: brightness(1.07); box-shadow: 0 5px 16px rgba(11, 71, 166, .38), 0 16px 36px rgba(11, 71, 166, .26); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--azure); box-shadow: none; }
.btn--ghost:hover { background: var(--foam); box-shadow: none; }
.btn--sm { min-height: 38px; padding: 0 12px; font-size: .82rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 0 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 99px; font-size: .8rem; font-weight: 600;
  background: var(--foam); color: var(--azure-deep); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--azure) 16%, transparent);
  transition: background .15s ease;
}
.chip:hover { background: color-mix(in srgb, var(--azure) 15%, #fff); }
.chip__x { font-size: 1.05rem; line-height: 1; opacity: .55; }

/* ---------- Cards ------------------------------------------------------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 10px 0 100px; }

.card {
  position: relative; display: flex; flex-direction: column; isolation: isolate;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--lift-1);
  overflow: hidden;
  transition: box-shadow .26s cubic-bezier(.2,.7,.3,1), transform .26s cubic-bezier(.2,.7,.3,1);
}
/* No decorative colour strip on any edge. The port's colour is carried by the
   chip, which also names the port, so the hue does a job instead of sitting
   there as ornament. */
.card:hover {
  box-shadow: var(--lift-3), 0 0 0 1px color-mix(in srgb, var(--port-hue) 22%, transparent);
  transform: translateY(-4px);
}
.card:focus-within { border-color: var(--azure); }

.card__body { padding: 18px 16px 13px; flex: 1; }
.card__top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 11px; }

/* Solid, not tinted: the port is the card's identity and should read at a glance. */
.port-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  background: var(--port-hue); color: #fff;
  font-size: .73rem; font-weight: 700; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--port-hue) 40%, transparent);
  transition: transform .15s ease, filter .15s ease;
}
.port-chip:hover { transform: translateY(-1px); filter: brightness(1.08); }
.port-chip__dot { width: 5px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.85); flex: 0 0 auto; }

.card__flags { margin-left: auto; display: flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.flag {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 23px; padding: 0 8px; border-radius: 7px;
  font-size: .67rem; font-weight: 700; letter-spacing: .02em;
  background: var(--canvas); color: var(--ink-2); border: 1px solid var(--line-soft);
}
.flag svg { width: 11px; height: 11px; }
.flag--video { background: #E7F8EE; color: #10693D; border-color: #C6EBD6; }
.flag--access { background: #EDEFFD; color: #3243A8; border-color: #D6DBF8; }

.card__title {
  font-family: var(--display); font-variation-settings: "opsz" 48, "SOFT" 16, "WONK" 0;
  font-size: 1.24rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em;
  margin: 0 0 8px;
}
.card__title a { color: var(--ink); text-decoration: none; }
/* Stretched link: the whole card is the hit target, but the action buttons sit
   above it on the z-axis so they stay independently clickable. */
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__title a:hover { color: var(--azure-deep); }

.card__desc {
  color: var(--ink-2); font-size: .87rem; line-height: 1.5; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .78rem; color: var(--ink-2); }
.meta__item { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.meta__item svg { width: 13px; height: 13px; color: var(--ink-3); }

.cat-badge {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 7px;
  font-size: .71rem; font-weight: 700; white-space: nowrap;
  background: var(--canvas); color: var(--ink-2); border: 1px solid var(--line-soft);
}

.pips { display: inline-flex; gap: 3px; align-items: center; }
.pip { width: 5px; height: 5px; border-radius: 99px; background: var(--line); }
.pip--on { background: var(--ink-2); }

/* Price: the decision. Adult is reference; party is what they actually pay. */
.price {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #FBFDFF, #F4F8FC);
}
.price__adult { font-size: .78rem; color: var(--ink-2); }
.price__adult b { color: var(--ink); font-weight: 600; }
.price__party { text-align: right; text-decoration: none; }
.price__party-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--citrus-ink); }

/* Tap targets that apply a filter. They sit above the card's stretched title
   link, which covers the whole card and would otherwise swallow the tap. */
.tapfilter {
  position: relative; z-index: 2; cursor: pointer; text-decoration: none;
  border-radius: 7px; transition: background .15s ease, color .15s ease;
}
a.meta__item.tapfilter { color: var(--ink-2); padding: 3px 6px; margin: -3px -6px; }
a.meta__item.tapfilter:hover { background: var(--foam); color: var(--azure-deep); }
a.cat-badge.tapfilter:hover { background: var(--foam); color: var(--azure-deep); border-color: color-mix(in srgb, var(--azure) 22%, transparent); }
a.price__party.tapfilter { padding: 4px 7px; margin: -4px -7px; }
a.price__party.tapfilter:hover { background: var(--foam); }
a.price__party.tapfilter:hover .price__party-value { color: var(--azure-deep); }
.price__party-value {
  font-family: var(--display); font-variation-settings: "opsz" 60, "SOFT" 12, "WONK" 0;
  font-size: 1.42rem; font-weight: 800; color: var(--ink); line-height: 1.1;
  letter-spacing: -.02em;
}

.card__actions { display: flex; gap: 8px; padding: 12px 16px 15px; position: relative; z-index: 2; }
.card__actions .btn, .card__actions .toggle { flex: 1; }

.toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: .81rem; font-weight: 600; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.toggle svg { width: 15px; height: 15px; }
.toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.toggle:active { transform: scale(.95); }
.toggle[aria-pressed="true"] {
  background: linear-gradient(160deg, #2E7BEE, var(--azure-deep));
  border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px rgba(11, 71, 166, .3);
}
.toggle--heart { flex: 0 0 auto !important; min-width: 44px; }
.toggle--heart[aria-pressed="true"] {
  background: linear-gradient(160deg, #F2456F, #C2185B);
  box-shadow: 0 3px 10px rgba(194, 24, 91, .32);
}
.toggle--heart[aria-pressed="true"] svg { fill: currentColor; }

/* ---------- Table view --------------------------------------------------- */
.tablewrap {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--lift-1);
  overflow-x: auto; margin-bottom: 100px;
}
/* No min-width and no sideways scrolling on a phone. Instead the low-value
   columns drop out below 900px, so the table always fits the screen and the
   three things that drive a decision (name, duration, party price) stay put. */
table.data { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.data th, table.data td { padding: 12px 13px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.data .col-port, table.data .col-cat, table.data .col-level, table.data .col-adult { display: none; }
@media (min-width: 560px) { table.data .col-adult { display: table-cell; } }
@media (min-width: 720px) { table.data .col-port { display: table-cell; } }
@media (min-width: 900px) {
  table.data .col-cat, table.data .col-level { display: table-cell; }
}
table.data th {
  position: sticky; top: 0; background: var(--canvas); z-index: 1;
  font-size: .69rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
  font-weight: 700; white-space: nowrap;
}
table.data tbody tr:hover { background: #F8FBFE; }
table.data td.right, table.data th.right { text-align: right; font-variant-numeric: tabular-nums; }
table.data a { color: var(--ink); text-decoration: none; font-weight: 600; }
table.data a:hover { color: var(--azure); }

/* Tap-to-filter inside the table. Padded out to a real touch target rather
   than a bare word, with a dotted underline so it reads as actionable. */
a.cellfilter {
  display: inline-block; padding: 5px 7px; margin: -5px -7px;
  border-radius: 7px; font-weight: 500; color: var(--ink-2);
  text-decoration: underline dotted color-mix(in srgb, var(--ink-3) 60%, transparent);
  text-underline-offset: 3px;
  transition: background .15s ease, color .15s ease;
}
a.cellfilter:hover, a.cellfilter:focus-visible {
  background: var(--foam); color: var(--azure-deep); text-decoration-color: currentColor;
}
table.data td.right a.cellfilter { font-weight: 700; color: var(--ink); }

/* ---------- Filter node: sheet on phones, rail on desktop ---------------- */
.filter-fab {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 45;
  background: linear-gradient(160deg, #16324C, var(--ink)); border-color: transparent; color: #fff;
  padding: 0 22px; min-height: 50px; border-radius: 99px;
  box-shadow: 0 6px 18px rgba(10, 24, 38, .34), 0 18px 44px rgba(10, 24, 38, .28);
}
.filter-fab:hover { filter: brightness(1.14); }
.filter-fab .count-pill { background: var(--azure); }

.sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.sheet[open] { display: block; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(7, 20, 34, .5); backdrop-filter: blur(3px); }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--lift-3);
  animation: sheet-up .3s cubic-bezier(.2, .85, .25, 1);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; border-bottom: 1px solid var(--line-soft); }
.sheet__grab { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 99px; background: var(--line); }
.sheet__body { overflow-y: auto; padding: 4px 18px 16px; -webkit-overflow-scrolling: touch; }
.sheet__foot {
  display: flex; gap: 9px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft); background: var(--surface);
}

.fgroup { padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.fgroup:last-child { border-bottom: 0; }
.fgroup__h { font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; margin: 0 0 10px; }
.opts { display: flex; flex-direction: column; gap: 1px; }
.opt { display: flex; align-items: center; gap: 11px; min-height: var(--tap); padding: 3px 7px; border-radius: 9px; cursor: pointer; user-select: none; }
.opt:hover { background: var(--canvas); }
.opt input { width: 19px; height: 19px; accent-color: var(--azure); flex: 0 0 auto; cursor: pointer; }
.opt__label { flex: 1; font-size: .9rem; line-height: 1.25; }
.opt__sub { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 500; }
.opt__n { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.opt__swatch { width: 10px; height: 10px; border-radius: 99px; flex: 0 0 auto; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 8%, transparent); }

.range { display: flex; align-items: center; gap: 9px; }
.range input {
  flex: 1; min-width: 0; min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font: inherit; font-size: .9rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.range input:focus { outline: none; border-color: var(--azure); box-shadow: var(--glow); }
.range span { color: var(--ink-3); font-size: .85rem; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); cursor: pointer; }
.switch__label { font-size: .9rem; }
.switch input { width: 19px; height: 19px; accent-color: var(--azure); }

/* ---------- Empty ------------------------------------------------------- */
.empty {
  text-align: center; padding: 60px 20px; background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty__icon { font-size: 2.2rem; margin-bottom: 10px; opacity: .55; }
.empty h2 { margin-bottom: .3em; }
.empty p { color: var(--ink-2); max-width: 42ch; margin-inline: auto; }

/* ---------- Pagination -------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0 96px; }
.pager__info { font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; padding: 0 6px; }

/* ---------- Video ------------------------------------------------------- */
.player {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: var(--ink); border-radius: var(--radius); overflow: hidden;
  border: 0; padding: 0; cursor: pointer; display: block; box-shadow: var(--lift-2);
}
.player img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.player:hover img { opacity: 1; transform: scale(1.04); }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.player__play {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px; background: rgba(255,255,255,.95); color: var(--ink);
  box-shadow: var(--lift-2); pointer-events: none; transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.player:hover .player__play { transform: scale(1.1); }
.player__play svg { width: 24px; height: 24px; margin-left: 3px; }
.player__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(7,20,34,.88)); color: #fff; font-size: .82rem; text-align: left; pointer-events: none; }

.novideo {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; gap: 7px;
  align-items: center; justify-content: center; text-align: center;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--ink-3); font-size: .88rem; padding: 16px;
}

/* ---------- Detail ------------------------------------------------------ */
/* padding-block, never the `padding: 20px 0 96px` shorthand. This element is
   `class="wrap detail"`, and the shorthand's implied `padding-inline: 0` beat
   .wrap's own side padding, so the whole detail page sat flush against the
   screen edge. */
.detail { padding-block: 20px 96px; }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--ink-3); margin-bottom: 12px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--azure); }

.panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--lift-1); padding: 18px; margin-bottom: 15px; }
.panel__h { font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; margin: 0 0 12px; }

.facts--3 { grid-template-columns: repeat(3, 1fr) !important; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.fact { background: var(--surface); padding: 12px 14px; }
.fact__k { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; margin-bottom: 3px; }
.fact__v { font-size: .97rem; font-weight: 600; color: var(--ink); }

.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.party {
  padding: 14px; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #FFF4EC, #FFEADC);
  border: 1px solid #FFD9BF;
}
.party__k { font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; color: var(--citrus-ink); font-weight: 700; margin-bottom: 4px; }
.party__v { font-family: var(--display); font-variation-settings: "opsz" 60, "SOFT" 12, "WONK" 0; font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.party__n { font-size: .69rem; color: var(--ink-2); margin-top: 2px; }


/* ---------- Compare ----------------------------------------------------- */
.cmp { overflow-x: auto; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--lift-1); margin-bottom: 96px; }
table.cmp__t { border-collapse: collapse; width: 100%; min-width: 660px; }
table.cmp__t th, table.cmp__t td { padding: 13px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: .87rem; }
table.cmp__t thead th { background: var(--canvas); vertical-align: bottom; }
table.cmp__t tbody th {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
  font-size: .67rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 700; white-space: nowrap;
  border-right: 1px solid var(--line-soft); width: 152px;
}
.cmp__name { font-family: var(--display); font-variation-settings: "opsz" 40, "WONK" 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); text-decoration: none; display: block; margin-bottom: 7px; }
.cmp__name:hover { color: var(--azure); }
.cmp__best { color: #0D7A3E; font-weight: 700; }

/* ---------- Tiles ------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: 1fr; gap: 14px; padding-bottom: 96px; }
.tile {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--lift-1); padding: 18px;
  transition: box-shadow .24s ease, transform .24s ease;
}
.tile:hover { box-shadow: var(--lift-3), 0 0 0 1px color-mix(in srgb, var(--port-hue) 25%, transparent); transform: translateY(-4px); }
.tile__name { font-family: var(--display); font-variation-settings: "opsz" 48, "WONK" 0; font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; letter-spacing: -.015em; }
.tile__n { font-size: .83rem; color: var(--ink-2); }
.tile__stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.tile__stat { font-size: .75rem; color: var(--ink-2); }
.tile__stat b { display: block; font-size: .95rem; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Shortlist --------------------------------------------------- */
.sl-tools { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 14px; }
.label-pick {
  appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 28px 0 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238496A6' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 8px;
}
.sl-sum {
  display: flex; gap: 20px; flex-wrap: wrap; padding: 15px 17px; margin-bottom: 16px;
  background: linear-gradient(150deg, #FFFFFF, #F5F9FD);
  border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--lift-1);
}
.sl-sum__i { font-size: .73rem; color: var(--ink-2); font-weight: 600; }
.sl-sum__i b { display: block; font-family: var(--display); font-variation-settings: "opsz" 60, "WONK" 0; font-size: 1.28rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- Trip planner ------------------------------------------------ */
.trip-wrap { padding-top: 16px; padding-bottom: 24px; }
.trip { display: flex; flex-direction: column; gap: 8px; }

/* Two lines per port. A card per port pushed the total three screens down,
   which is the one number the whole page exists to show. */
.portrow {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); box-shadow: var(--lift-1); padding: 10px 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.portrow--on { border-color: color-mix(in srgb, var(--port-hue) 45%, transparent); box-shadow: var(--lift-2); }

.portrow__head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.portrow__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--port-hue); flex: 0 0 auto; }
.portrow__port { font-weight: 700; font-size: .88rem; color: var(--ink); white-space: nowrap; }
.portrow__date { font-size: .72rem; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.portrow__v {
  margin-left: auto; font-family: var(--display);
  font-variation-settings: "opsz" 40, "WONK" 0;
  font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; white-space: nowrap;
}
.portrow .pick__sel { width: 100%; min-height: 42px; }

/* Pinned to the bottom of the viewport while the list scrolls, so the total is
   always on screen next to the choice that changes it. */
.totals {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 13px 15px calc(13px + env(safe-area-inset-bottom));
  background: linear-gradient(155deg, #0F4FA0, #071E3D);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -6px 24px rgba(7, 20, 34, .22); color: #fff;
}
/* flex: 0 0 auto and nowrap. As a shrinkable flex item this collapsed to 91px
   and broke "5 of 5 ports chosen" across two lines; there is width to spare, it
   was simply being squeezed by the price beside it. */
.totals__k { flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: #C7DEF6; white-space: nowrap; }
/* Direct child only. As a descendant selector this also matched the nested
   <span id="picked-count">, made it display:block, and put the number on its own
   line: "5" / "of 5 ports chosen". That is a block-level break, so no amount of
   white-space:nowrap could fix it. */
.totals__k > span { display: block; font-size: .68rem; color: #86AAD2; font-weight: 500; white-space: nowrap; }
.totals__k > span span { display: inline; }
.totals__v {
  margin-left: auto; font-family: var(--display);
  font-variation-settings: "opsz" 72, "WONK" 0;
  font-size: 1.7rem; font-weight: 800; letter-spacing: -.025em;
  white-space: nowrap; color: #7FE7D3;
}
.totals__acts { display: flex; gap: 7px; flex-basis: 100%; }
.totals__acts .btn {
  flex: 1; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2);
  color: #fff; box-shadow: none;
}
.totals__acts .btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.34); }

@media (min-width: 560px) {
  .totals__acts { flex-basis: auto; }
  .totals__acts .btn { flex: 0 0 auto; }
}

/* ---------- HTMX / toast ------------------------------------------------ */
#results { transition: opacity .14s ease; }
#results.htmx-request { opacity: .42; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(18px);
  bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 70;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 99px;
  font-size: .85rem; font-weight: 600; box-shadow: var(--lift-3);
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.toast--on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Breakpoints -------------------------------------------------- */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .sea { padding-top: 44px; }
}

@media (min-width: 900px) {
  /* Back inline beside the wordmark: a single row, icon next to label. */
  .nav { order: 2; flex-basis: auto; gap: 2px; margin-left: 18px; padding: 0; }
  .nav a {
    flex: 0 0 auto; flex-direction: row; gap: 7px;
    font-size: .88rem; font-weight: 600; padding: 8px 12px; color: var(--ink-2);
  }
  .nav a svg { width: 16px; height: 16px; }
  .nav .count-pill { position: static; transform: none; margin-left: 2px; }
  .masthead__in { flex-wrap: nowrap; padding-top: 0; min-height: 62px; }
  .wrap { padding-inline: 24px; }
  .rail { margin-inline: -24px; padding-inline: 24px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  /* margin-top keeps the search box off the filter rail below it: without it
     the two panels touch and read as one control. */
  .layout {
    display: grid; grid-template-columns: 268px minmax(0, 1fr);
    gap: 24px; align-items: start; margin-top: 18px;
  }

  /* Same DOM node, different job: the sheet unfolds into a persistent rail and
     its mobile-only affordances retire. */
  .filter-fab { display: none; }
  .sheet, .sheet[open] { display: block; position: sticky; top: 78px; inset: auto; z-index: 1; }
  .sheet__scrim, .sheet__head, .sheet__foot, .sheet__grab { display: none; }
  .sheet__panel {
    position: static; max-height: calc(100vh - 100px); overflow-y: auto;
    border-radius: var(--radius); animation: none;
    border: 1px solid var(--line-soft); box-shadow: var(--lift-1);
    padding: 4px 16px;
  }
  .sheet__body { overflow: visible; padding: 0; }

  .grid, .pager { padding-bottom: 44px; }
  .tablewrap, .cmp, .tiles { margin-bottom: 44px; }
  .detail__cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
}

@media (min-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .card:hover, .tile:hover, .leg__link:hover { transform: none; }
}

/* ---------- Print ------------------------------------------------------- */
@media print {
  .masthead, .filter-fab, .sheet, .sl-tools, .card__actions, .toast, .sea { display: none !important; }
  body { background: #fff; }
  .card, .panel, .tablewrap, .cmp { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0; }
}

/* An unavailable filter option: still listed, so you can see it exists, but not
   tickable. Hiding it instead would make the list jump under a moving thumb. */
.opt--none { opacity: .38; }
.opt--none .opt__label { text-decoration: line-through; text-decoration-thickness: 1px; }
.opt--none input { cursor: not-allowed; }
.opt--none:hover { background: transparent; }

/* ---------- Compare: stacked on a phone, table on a desktop -------------- */
/* Side-by-side columns need horizontal swiping on a 390px screen, and a column
   you have to swipe to reach is a column you cannot compare against. Below
   900px each excursion becomes a self-contained card with its own labels. */
.cmp-stack { display: flex; flex-direction: column; gap: 14px; margin-bottom: 90px; }
.cmp { display: none; }

.cmp-card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--lift-1); padding: 15px 16px;
}
.cmp-card__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cmp-card__x { margin-left: auto; }
.cmp-card__name {
  display: block; font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 16, "WONK" 0;
  font-size: 1.16rem; font-weight: 700; line-height: 1.22; letter-spacing: -.015em;
  color: var(--ink); text-decoration: none; margin-bottom: 10px;
}
.cmp-card__name:hover { color: var(--azure-deep); }

.cmp-card__price {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 12px; margin-bottom: 11px;
  background: linear-gradient(150deg, #FBFDFF, #F1F6FC);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.cmp-card__price span {
  font-family: var(--display); font-variation-settings: "opsz" 60, "WONK" 0;
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.cmp-card__price small { font-size: .72rem; color: var(--ink-2); font-weight: 600; }
.cmp-card__price--best {
  background: linear-gradient(150deg, #ECFAF1, #DDF4E7); border-color: #BCE7CC;
}
.cmp-card__price--best span, .cmp-card__price--best small { color: #0D7A3E; }

/* Two columns: label, value. Labels repeat per card so no value is orphaned. */
.cmp-card__rows {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: 7px 12px; margin: 0 0 10px; align-items: center;
}
.cmp-card__rows dt {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--ink-3);
}
.cmp-card__rows dd { margin: 0; font-size: .87rem; color: var(--ink); }
.cmp-card__desc {
  margin: 0; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: .84rem; color: var(--ink-2);
}

@media (min-width: 900px) {
  .cmp-stack { display: none; }
  .cmp { display: block; }
}

/* ---------- Multi-source: provider, rating, risk, media ----------------- */
/* Colour rides in real, labelled elements (chips, the star, the warning bar),
   never a decorative card spine. */
.card__media {
  display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--line-soft);
}
.stock-tag {
  position: absolute; bottom: 6px; right: 6px; z-index: 1;
  background: rgba(10, 24, 38, .6); color: #fff; font-size: .58rem; font-weight: 600;
  letter-spacing: .03em; padding: 2px 6px; border-radius: 5px;
}
.detail__cap { margin: 6px 2px 0; font-size: .72rem; color: var(--ink-3); font-style: italic; }
.prose { color: var(--ink); }
.prose p { margin: 0 0 .8em; }
.prose p:last-child { margin-bottom: 0; }

/* Currency switch, top-right of the masthead (nav takes its own row below). */
.ccy-switch { order: 2; margin-left: auto; display: flex; gap: 2px; font-size: .7rem; font-weight: 700; }
.ccy-switch a {
  padding: 4px 8px; border-radius: 8px; color: var(--ink-2); text-decoration: none; letter-spacing: .02em;
}
.ccy-switch a:hover { color: var(--azure-deep); background: var(--foam); }
.ccy-switch a.is-on { background: var(--azure); color: #fff; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.card:hover .card__media img { transform: scale(1.045); }

/* Placeholder when a tour has neither a photo nor a video: the port's own colour
   with the category, so the tile reads as designed rather than empty. */
.card__media--ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--port-tint); color: var(--port-on); text-decoration: none;
}
.card__media--ph svg { width: 30px; height: 30px; opacity: .55; }
.ph-cat { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .82; }
.detail__ph {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 9px; border-radius: var(--radius);
  background: var(--port-tint); color: var(--port-on);
}
.detail__ph svg { width: 42px; height: 42px; opacity: .5; }
.detail__ph span { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .82; }

.flag--ncl      { background: #ECEFF3; color: #33465C; border-color: #D5DCE5; }
.flag--viator   { background: #E8F1FD; color: #0B47A6; border-color: #CBDFF9; }
.flag--cesarine { background: #F1ECFA; color: #573C99; border-color: #DFD2F3; }
.flag--risk     { background: #FDEBD6; color: #8A2E0E; border-color: #F4CE9C; }
.flag--risk svg { width: 12px; height: 12px; }

.meta__rating { color: var(--ink-2); }
.meta__rating svg { width: 13px; height: 13px; color: #E8A317; }
.revs { color: var(--ink-3); font-weight: 500; margin-left: 2px; }

.price__orig { font-size: .68rem; color: var(--ink-3); font-weight: 500; }

.toggle--book { flex: 0 0 auto !important; min-width: 44px; color: var(--azure); }
.toggle--book:hover { background: var(--foam); border-color: color-mix(in srgb, var(--azure) 30%, transparent); }

.detail__hero {
  width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); background: var(--line-soft);
}

.risk-banner {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 0 0 18px; padding: 13px 15px; border-radius: var(--radius-sm);
  background: #FDEBD6; border: 1px solid #F4CE9C; color: #7A2E10;
  font-size: .9rem; line-height: 1.45;
}
.risk-banner svg { width: 20px; height: 20px; flex: 0 0 auto; color: #C2410C; margin-top: 1px; }
.risk-banner b { color: #7A2E10; }

.cost-note { margin: 10px 0 0; font-size: .76rem; color: var(--ink-3); line-height: 1.4; }

.tag-mini {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle;
  background: var(--foam); color: var(--azure-deep);
}
.tag-mini--cesarine { background: #F1ECFA; color: #573C99; }
.tag-mini--risk { background: #FDEBD6; color: #8A2E0E; }

/* Trip planner: agency filter beside the excursion select, and the mix line on
   the pinned total bar. */
.pick { display: flex; gap: 8px; align-items: center; }
.pick__prov { flex: 0 0 auto; width: 132px; }
.pick__sel { flex: 1 1 auto; min-width: 0; }
.totals__mix { flex-basis: 100%; font-size: .74rem; font-weight: 600; color: #C7DEF6; }
.totals__mix:empty { display: none; }
@media (max-width: 460px) {
  .pick { flex-wrap: wrap; }
  .pick__prov { width: 100%; }
}

/* Affiliate disclosure. Deliberately quiet: a thin rule off the canvas, small
   muted type, one measure wide. It states a fact, it is not a call to action. */
.site-foot { margin-top: 48px; border-top: 1px solid var(--line); background: var(--surface); }
.site-foot .wrap { padding-top: 18px; padding-bottom: 24px; }
.site-foot__link {
  font-size: .82rem; font-weight: 600; color: var(--ink-3);
  text-decoration-color: color-mix(in srgb, var(--ink-3) 40%, transparent);
}
.site-foot__link:hover { color: var(--azure-deep); }

/* Long-form text pages (e.g. the affiliate disclosure). Its own class, NOT
   .prose, which is already used for excursion descriptions on the detail page. */
.legal { max-width: 60ch; margin: 40px auto 72px; }
.legal h1 { margin-bottom: .4em; }
.legal p { color: var(--ink-2); font-size: 1.03rem; line-height: 1.6; }