/* ==========================================================================
   Torres del Paine Tours — "Glacial Paine Blue / Sunrise Granite"
   Deep glacial-lake indigo against windswept-steppe stone, with a sunrise-on-
   granite terracotta for actions only (the towers turn this color at dawn).
   No webfonts (CWV), no framework. Mobile-first.
   ========================================================================== */

:root {
  --teal-900: #0d2b3d;
  --teal-700: #155775;
  --teal:     #1c7a9c;
  --teal-200: #a8d8e6;
  --teal-050: #eaf5f8;
  --glacier:  #6fb8cf;

  --larch:     #c1572c;   /* actions only */
  --larch-700: #9c4620;

  --ink:    #1c2420;
  --ink-2:  #45524c;
  --stone:  #6c7b74;
  --line:   #dedad0;
  --sand:   #f5f2ea;
  --paper:  #ffffff;

  --s1: .375rem; --s2: .75rem; --s3: 1.125rem; --s4: 1.75rem;
  --s5: 2.75rem; --s6: 4rem; --s7: 5.5rem;

  --r:   14px;
  --r-s: 9px;
  --shadow:    0 1px 2px rgba(13,43,61,.06), 0 6px 20px rgba(13,43,61,.07);
  --shadow-lg: 0 2px 6px rgba(13,43,61,.07), 0 18px 44px rgba(13,43,61,.13);

  --wrap: 1180px;
  --narrow: 76ch;
}

*, *::before, *::after { box-sizing: border-box; }

/* Root type scale. Everything else is in rem, so this single clamp moves the whole system:
   ~18px on a phone up to ~19.5px on a wide screen, comfortably above the 16px floor that
   made the imported long-form copy feel cramped. */
html {
  font-size: clamp(18px, 17px + .3vw, 19.5px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.68 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.16; letter-spacing: -.018em; margin: 0 0 var(--s2);
  color: var(--teal-900); font-weight: 700;
  /* Tour titles carry unbreakable runs like "Calgary/Canmore/Banff". Without this they set a
     min-content width wider than a phone and drag the whole grid past the viewport edge. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.15rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); }
p  { margin: 0 0 var(--s3); }

a { color: var(--teal-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--larch-700); }

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal-900); color: #fff; padding: .7rem 1rem; border-radius: 0 0 var(--r-s) 0;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* ---------- layout ---------- */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, var(--narrow)); margin-inline: auto; }
.section { padding-block: var(--s6); }
/* Headings run the full width of their container. Capping them by character count forced
   short titles onto two lines while the row beside them sat empty. */
h1, h2 { max-width: none; text-wrap: pretty; }
.sec-blurb { color: var(--ink-2); max-width: 68ch; font-size: 1.06rem; margin-bottom: var(--s4); }

/* A band is FULL-BLEED and holds its own .wrap. Putting a background straight on a .wrap
   element paints it only as wide as the text column, which reads as a stray grey slab. */
.band { width: 100%; }
.band > .wrap { padding-block: var(--s6); }
.band-soft { background: var(--sand); border-block: 1px solid var(--line); }
.band-tl { background: linear-gradient(170deg, var(--teal-900), #134863 65%, var(--teal-700)); color: #d8e9ee; }
.band-tl h2 { color: #fff; }
.band-tl .sec-blurb { color: #a9cfda; }
.band-cta  { background: linear-gradient(160deg, var(--teal-900), var(--teal-700)); color: #eaf5f8; border-radius: var(--r); padding: var(--s5) var(--s4); margin-bottom: var(--s6); }
.band-cta h2, .band-cta a:not(.btn) { color: #fff; }
.band-cta p { color: #bcdce6; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--teal); --btn-fg: #fff;
  display: inline-block; background: var(--btn-bg); color: var(--btn-fg);
  padding: .78rem 1.3rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: .97rem; line-height: 1.25; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  box-shadow: 0 1px 2px rgba(13,43,61,.14);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn-primary { --btn-bg: var(--larch); }
.btn-primary:hover { --btn-bg: var(--larch-700); }
.btn-brand { --btn-bg: var(--teal-700); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--teal-700); border-color: var(--teal-200); box-shadow: none; }
.btn-hero-ghost { --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.btn-hero-ghost:hover { --btn-bg: rgba(255,255,255,.22); --btn-fg: #fff; }
.btn-lg { padding: .95rem 1.6rem; font-size: 1.04rem; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(9px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: var(--s3); padding-block: .7rem; }
.brand {
  font-weight: 750; font-size: 1.02rem; letter-spacing: -.02em; color: var(--teal-900);
  text-decoration: none; margin-right: auto; line-height: 1.1;
}
.brand b { color: var(--teal); font-weight: 750; }
.brand b::before { content: " "; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; font-size: 1.25rem;
  background: var(--teal-050); color: var(--teal-900);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.nav-links { list-style: none; margin: 0; padding: 0; display: none; }
.nav-links[data-open="true"] {
  display: flex; flex-direction: column; gap: .2rem;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: var(--s2) 1rem var(--s3); box-shadow: var(--shadow);
}
.nav-links a { display: block; padding: .6rem .2rem; color: var(--ink); text-decoration: none; font-weight: 550; }
.nav-links a:hover { color: var(--teal); }
.nav-links .btn { text-align: center; margin-top: var(--s2); color: #fff; }

@media (min-width: 62em) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; align-items: center; gap: var(--s3); }
  .nav-links a { padding: .3rem 0; font-size: .96rem; }
  .nav-links .btn { margin-top: 0; padding: .6rem 1.1rem; }
}

/* ---------- nav "Tours" dropdown ---------- */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: block; width: 100%; text-align: left; padding: .6rem .2rem; font: inherit;
  font-weight: 550; color: var(--ink); background: none; border: none; cursor: pointer;
}
.nav-drop-btn::after { content: " \25BE"; font-size: .8em; color: var(--stone); }
.nav-drop-btn:hover { color: var(--teal); }
.nav-drop-menu {
  list-style: none; margin: 0; padding: 0 0 0 1rem; display: none;
}
.nav-drop[data-open="true"] .nav-drop-menu { display: block; }
.nav-drop-menu a { padding: .45rem .2rem; font-size: .95rem; color: var(--ink-2); }

@media (min-width: 62em) {
  .nav-drop-btn { padding: .3rem 0; }
  .nav-drop-menu {
    display: none; position: absolute; top: 100%; left: 0; margin-top: .5rem; padding: .5rem 0;
    min-width: 15rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
    box-shadow: var(--shadow-lg);
  }
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu,
  .nav-drop[data-open="true"] .nav-drop-menu { display: block; }
  .nav-drop-menu a { display: block; padding: .55rem 1rem; white-space: nowrap; }
  .nav-drop-menu a:hover { background: var(--teal-050); color: var(--teal-700); }
}

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; display: grid; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,43,61,.74) 0%, rgba(13,43,61,.55) 45%, rgba(13,43,61,.82) 100%);
}
.hero-inner { padding-block: clamp(3.5rem, 9vw, 7rem); max-width: 46rem; }
.hero h1 { color: #fff; text-wrap: balance; }
.hero-sub { font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem); font-weight: 600; color: var(--teal-200); margin-bottom: var(--s3); }
.hero .lede { color: rgba(255,255,255,.92); font-size: 1.05rem; }
.hero-proof { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: .45rem .95rem; border-radius: 999px; font-size: .95rem; }
.hero-proof b { font-size: 1.05rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); margin-bottom: 0; }
.star { color: #f6c445; }

/* ---------- tour cards ---------- */
.tgrid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40em) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .tgrid { grid-template-columns: repeat(3, 1fr); } }

.tcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tcard-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--teal-050); }
.tcard-media img { width: 100%; height: 100%; object-fit: cover; }
.tcard-badges { position: absolute; top: .7rem; left: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.badge {
  background: var(--teal-900); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px;
}
.tcard-body { display: flex; flex-direction: column; flex: 1; padding: var(--s3); }
.tcard-title { font-size: 1.09rem; margin-bottom: var(--s2); }
.tcard-title a { color: var(--teal-900); text-decoration: none; }
.tcard-title a:hover { color: var(--teal); }
.tcard-desc {
  color: var(--ink-2); font-size: .945rem; margin-bottom: var(--s3);
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard-meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .85rem;
  margin: 0 0 var(--s3); padding: 0; font-size: .875rem; color: var(--stone);
}
.tcard-meta .m-rating { color: var(--ink); font-weight: 650; }
.tcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line);
}
.price { font-size: 1.5rem; font-weight: 750; color: var(--teal-900); letter-spacing: -.02em; }
.price .cur { font-size: .95rem; vertical-align: .35em; margin-right: .05em; }
.tcard-foot .btn { padding: .6rem 1rem; font-size: .88rem; }

/* ---------- why / feature cards ---------- */
.wgrid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 44em) { .wgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .wgrid { grid-template-columns: repeat(4, 1fr); } }
.wcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s3); }
.wcard h3 { margin-bottom: var(--s2); }
.wcard p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.wicon {
  width: 46px; height: 46px; padding: 9px; margin-bottom: var(--s3);
  background: var(--teal-050); border-radius: 50%;
}

/* ---------- team ---------- */
.team-grid { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 56em) { .team-grid { grid-template-columns: 5fr 6fr; gap: var(--s5); } }
.team-media img { border-radius: var(--r); box-shadow: var(--shadow); width: 100%; }
.team-body p { color: var(--ink-2); }

/* ---------- page head / stats / sitemap / contact ---------- */
.page-head { padding-bottom: var(--s3); }
.page-head h1 { margin-bottom: var(--s2); }

.stat-row {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(2, 1fr); text-align: center;
}
@media (min-width: 52em) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-row li { display: flex; flex-direction: column; gap: .2rem; }
.stat-row b { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); color: var(--teal); font-weight: 750; letter-spacing: -.03em; }
.stat-row span { color: var(--stone); font-size: .9rem; }

.sitemap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem var(--s4); }
@media (min-width: 44em) { .sitemap-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .sitemap-list { grid-template-columns: repeat(3, 1fr); } }
.sitemap-list li { border-bottom: 1px solid var(--line); padding: .5rem 0; }

.contact-dl { margin: 0; }
.contact-dl dt { font-weight: 700; color: var(--teal-900); margin-top: var(--s3); }
.contact-dl dd { margin: .2rem 0 0; color: var(--ink-2); }

/* ---------- awards ---------- */
.award-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .award-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68em) { .award-list { grid-template-columns: repeat(5, 1fr); } }
.award {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  border: 2px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s2);
  transition: border-color .18s ease;
}
.award:hover { border-color: var(--teal-200); }
.award img { width: 34px; height: 34px; }
.aw-name { font-weight: 700; font-size: .86rem; color: var(--ink); }
.aw-year { font-size: .78rem; color: var(--stone); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper); margin-bottom: var(--s2); overflow: hidden;
}
.faq details[open] { border-color: var(--teal-200); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s3);
  font-weight: 650; color: var(--teal-900); display: flex; justify-content: space-between; gap: var(--s2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--teal); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--teal-050); }
.faq-body { padding: 0 var(--s3) var(--s2); color: var(--ink-2); }
.faq-body > :last-child { margin-bottom: var(--s3); }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: .855rem; color: var(--stone); padding-top: var(--s3); }
.crumbs a { color: var(--stone); }
.crumbs a:hover { color: var(--teal); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- article / prose ---------- */
.art-head { padding-block: var(--s4) var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.article { padding-bottom: var(--s6); }
.lede { font-size: 1.1rem; color: var(--ink-2); }

.prose { font-size: 1.02rem; }
/* Full-width prose sections (homepage, tour pages) still need a readable measure, while
   tables, figures and maps stay wide. Article pages already sit in .wrap-narrow. */
.section.prose > * { max-width: var(--narrow); }
.section.prose > .table-wrap,
.section.prose > figure,
.section.prose > iframe,
.section.prose > img { max-width: 100%; }
.prose h2 { margin-top: var(--s5); }
.prose h3 { margin-top: var(--s4); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--s3); }
.prose li { margin-bottom: .4rem; }
.prose li > ul, .prose li > ol { margin-top: .4rem; }
.prose img { border-radius: var(--r); margin-block: var(--s4); box-shadow: var(--shadow); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s5); }
.prose dl { margin: 0 0 var(--s3); }
.prose dt { font-weight: 700; color: var(--teal-900); margin-top: var(--s3); }
.prose iframe { border: 0; border-radius: var(--r); width: 100%; aspect-ratio: 16 / 10; margin-block: var(--s4); }
.prose blockquote {
  margin: var(--s4) 0; padding: var(--s2) var(--s4);
  border-left: 4px solid var(--teal-200); background: var(--sand);
  border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--ink-2);
}
.prose strong { color: var(--ink); }

.fig { margin: var(--s4) 0; }
.fig img { margin: 0; }
.fig figcaption { font-size: .86rem; color: var(--stone); padding-top: .6rem; }

.table-wrap { overflow-x: auto; margin-block: var(--s4); border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; background: var(--paper); }
caption { caption-side: top; text-align: left; padding: var(--s2) var(--s3); font-weight: 650; color: var(--teal-900); }
th, td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--teal-050); color: var(--teal-900); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fbfaf8; }

.small { font-size: .85rem; color: var(--stone); }
.disc { margin-top: var(--s2); }

/* ---------- tour page ---------- */
.tour-hero { display: grid; gap: var(--s4); padding-block: var(--s4) var(--s5); }
.tour-hero > * { min-width: 0; }
@media (min-width: 58em) { .tour-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; } }
.th-media img { border-radius: var(--r); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.th-body .lede { margin-bottom: var(--s3); }
.th-stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-block: 1px solid var(--line); margin-bottom: var(--s4); }
.th-stat { font-size: .93rem; color: var(--stone); }
.th-stat b { color: var(--ink); font-size: 1.12rem; font-weight: 750; }
.th-price b { color: var(--teal-900); font-size: 1.5rem; letter-spacing: -.02em; }
.th-cta { margin-bottom: 0; }

/* ---------- tour page: booking panel ----------
   One panel holds the whole decision: title -> rating+bookings -> honest urgency (if grounded)
   -> price -> full-width button -> what happens next. Desktop: photo+description stack in the
   LEFT column, panel spans both rows on the right and is sticky. Letting the description span
   the full width instead strands it below the panel with a column of dead space under the
   photo -- that was the bug Oleg caught on a prior site ("the card closed part of text"). */
.tour-hero { align-items: start; }
.th-media img { aspect-ratio: 4 / 3; }

.th-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: var(--s4);
}
.th-panel h1 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin-bottom: var(--s3); }

.th-proof {
  list-style: none; margin: 0 0 var(--s3); padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .92rem; color: var(--stone);
}
.th-proof b { color: var(--ink); font-weight: 750; }
.th-proof .th-rating b { font-size: 1.05rem; }

.th-urgency {
  background: #fdf4ea; border: 1px solid #f0d9bd; border-left: 4px solid var(--larch);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: var(--s2) var(--s3); margin-bottom: var(--s3);
  font-size: .92rem; color: #7a4a16; line-height: 1.5;
}

.th-buy { border-top: 1px solid var(--line); padding-top: var(--s3); }
.th-price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: var(--s3); }
.th-price b { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem); color: var(--teal-900); font-weight: 750; letter-spacing: -.03em; }
.th-from { font-size: .85rem; color: var(--stone); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.th-per { font-size: .88rem; color: var(--stone); }

/* The primary action: full width, larger type, and the only larch element in view. */
.btn-buy {
  display: block; width: 100%; text-align: center;
  padding: 1.05rem 1.4rem; font-size: 1.12rem; font-weight: 750;
  border-radius: var(--r);
  box-shadow: 0 2px 4px rgba(193,87,44,.28), 0 10px 26px rgba(193,87,44,.24);
}
.btn-buy:hover { box-shadow: 0 4px 8px rgba(193,87,44,.32), 0 14px 34px rgba(193,87,44,.3); }

.th-next { font-size: .87rem; color: var(--stone); margin: var(--s2) 0 0; line-height: 1.5; }
.th-lede { max-width: var(--narrow); margin-top: var(--s2); font-size: 1.02rem; }

@media (min-width: 58em) {
  /* Two explicit columns: the photo and the description stack in the left column, the booking
     panel spans both rows on the right. Letting the description span the full width instead
     stranded it below the panel with a column of dead space under the photo. */
  .tour-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
  .th-media { grid-column: 1; grid-row: 1; }
  .th-lede  { grid-column: 1; grid-row: 2; margin-top: 0; }
  .th-panel { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 5.5rem; }
}

/* On a phone the button has to be reachable without hunting: cap the photo so the panel
   (and therefore the CTA) starts inside the first screenful. */
@media (max-width: 57.99em) {
  .th-media img { aspect-ratio: 16 / 10; max-height: 25vh; object-fit: cover; }
  .tour-hero { gap: var(--s3); padding-top: var(--s2); padding-bottom: var(--s4); }
  .th-panel { padding: var(--s3); display: flex; flex-direction: column; }
  .th-panel h1 { font-size: 1.35rem; margin-bottom: var(--s2); }
  .th-proof { margin-bottom: var(--s3); font-size: .88rem; }
  /* Price and button before the reason-to-act: the CTA has to be reachable without
     scrolling, and the justification still reads immediately underneath it. */
  .th-panel h1 { order: 1; }
  .th-proof   { order: 2; }
  .th-buy     { order: 3; border-top: 0; padding-top: 0; }
  .th-urgency { order: 4; margin: var(--s3) 0 0; }
  .th-price { margin-bottom: var(--s2); }
  .crumbs { font-size: .8rem; padding-top: var(--s2); }
}

.sticky-cta .sc-price { color: #fff; font-weight: 750; font-size: .95rem; white-space: nowrap; }

/* Short phones (iPhone SE and friends): trim the photo and title further so the button
   still lands inside the first screen rather than a few pixels under it. */
@media (max-width: 57.99em) and (max-height: 730px) {
  .th-media img { max-height: 19vh; }
  .th-panel h1 { font-size: 1.22rem; line-height: 1.2; }
  .th-proof { margin-bottom: var(--s2); }
  .th-price b { font-size: 1.75rem; }
  .btn-buy { padding: .92rem 1.2rem; font-size: 1.05rem; }
}

.incl-grid { display: grid; gap: var(--s3); }
@media (min-width: 48em) { .incl-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.incl { list-style: none; margin: 0; padding: 0; }
.incl li { position: relative; padding-left: 1.75rem; margin-bottom: .55rem; color: var(--ink-2); }
.incl li::before { position: absolute; left: 0; top: -.05em; font-weight: 700; font-size: 1.05rem; }
.incl.yes li::before { content: "\2713"; color: var(--teal); }
.incl.no  li::before { content: "\2715"; color: #a8503a; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding-left: 3.1rem;
  margin-bottom: var(--s4); color: var(--ink-2);
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.1rem;
  width: 2.15rem; height: 2.15rem; display: grid; place-items: center;
  background: var(--teal-050); color: var(--teal-700); border: 1px solid var(--teal-200);
  border-radius: 50%; font-weight: 750; font-size: .95rem;
}

/* ---------- footer ---------- */
.site-footer { background: var(--teal-900); color: #cfe4e6; margin-top: var(--s6); padding-block: var(--s6) var(--s4); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--glacier); text-decoration: underline; }
.foot-grid { display: grid; gap: var(--s4); }
@media (min-width: 48em) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s5); } }
.foot-brand { font-size: 1.25rem; font-weight: 750; color: #fff; margin-bottom: var(--s2); }
.foot-h { font-size: 1rem; color: #fff; letter-spacing: .01em; }
.site-footer address { font-style: normal; margin-bottom: var(--s2); }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: .45rem; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.16); margin-top: var(--s5); padding-top: var(--s3); }
.foot-legal p { font-size: .82rem; color: #9db3bc; }
.copy { margin-bottom: 0; }

/* GetYourGuide widget placeholders keep their own sizing; just give them breathing room. */
[data-gyg-widget] { margin-block: var(--s4); }

.updated { font-size: .87rem; color: var(--stone); margin: 0; }
.rev-line { font-size: .93rem; margin-bottom: 0; }
.band-cta .rev-line a { color: #fff; }

/* ---------- contact form ---------- */
.cform { margin-bottom: var(--s3); }
.f-row { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--s3); }
.f-row label { font-weight: 650; font-size: .92rem; color: var(--teal-900); }
.cform input, .cform textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper); width: 100%;
}
.cform input:focus, .cform textarea:focus { border-color: var(--teal); outline: 2px solid var(--teal-200); outline-offset: 1px; }
.cform textarea { resize: vertical; min-height: 9rem; }
.cform button[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .93rem; padding: .7rem .9rem; border-radius: var(--r-s); margin-bottom: 0; }
.form-status.is-ok  { background: var(--teal-050); color: var(--teal-900); border: 1px solid var(--teal-200); }
.form-status.is-err { background: #fdf0ec; color: #8c3b26; border: 1px solid #f0c8bb; }

/* ==========================================================================
   Engagement components: timeline, link cards, video grid, article TOC.
   The imported bodies are 4,000+ word slabs; these give a reader somewhere to
   land, something to scan, and a way out that is not the back button.
   ========================================================================== */

/* ---------- interactive timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: .6rem; bottom: .6rem;
  width: 2px; background: linear-gradient(180deg, var(--glacier), rgba(126,207,214,.15));
}
.tl-item {
  position: relative; padding: .85rem 1rem .85rem 2.4rem;
  border-radius: var(--r-s); display: grid; gap: .15rem;
  transition: background-color .18s ease, transform .18s ease;
  opacity: 0; transform: translateY(10px);
}
.tl-item.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.tl-item::before {
  content: ""; position: absolute; left: 3px; top: 1.35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--glacier); border: 2px solid var(--teal-900);
  transition: transform .18s ease, background-color .18s ease;
}
.tl-item:hover, .tl-item:focus-within { background: rgba(255,255,255,.08); transform: translateX(3px); }
.tl-item:hover::before { transform: scale(1.35); background: #fff; }
.tl-time {
  font-variant-numeric: tabular-nums; font-weight: 750; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--glacier);
}
.tl-text { color: #dcedf2; font-size: 1.02rem; }
.tl-note { margin-top: var(--s4); color: #cfe6e8; }
.tl-note a { color: #fff; }
@media (min-width: 46em) {
  .tl-item { grid-template-columns: 7.5rem 1fr; gap: var(--s3); align-items: baseline; }
  .tl-time { text-align: right; }
  .timeline::before { left: 8.9rem; }
  .tl-item::before { left: 8.4rem; }
  .tl-item { padding-left: 0; padding-right: 1rem; }
  .tl-text { padding-left: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .tl-item { opacity: 1; transform: none; } }

/* ---------- internal link cards ---------- */
.lgrid { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 40em) { .lgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66em) { .lgrid { grid-template-columns: repeat(3, 1fr); } }
.lcard {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: var(--s3); color: var(--teal-900); text-decoration: none; font-weight: 600;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lcard::after { content: "\2192"; color: var(--teal); transition: transform .18s ease; }
.lcard:hover { border-color: var(--teal-200); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--teal-900); }
.lcard:hover::after { transform: translateX(4px); }

/* ---------- why cards, now clickable ---------- */
a.wcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.wcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); color: inherit; }
a.wcard h3 { transition: color .18s ease; }
a.wcard:hover h3 { color: var(--teal); }
.wcard-go { margin-top: auto; padding-top: var(--s3); font-weight: 650; font-size: .9rem; color: var(--teal); }
a.wcard:hover .wcard-go span { display: inline-block; transform: translateX(4px); transition: transform .18s ease; }

/* ---------- video grid ---------- */
.vgrid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 52em) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
.vid { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--teal-900); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }

/* ---------- article layout + table of contents ---------- */
.art-head { padding-block: var(--s5) var(--s3); }
.art-head .lede { max-width: 62ch; }
.art-layout { display: block; }
.art-body { max-width: var(--narrow); }
@media (min-width: 68em) {
  .art-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .art-body { max-width: 70ch; }
}

.toc { margin-bottom: var(--s4); }
.toc details {
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--sand); padding: var(--s2) var(--s3);
}
.toc summary {
  cursor: pointer; font-weight: 700; color: var(--teal-900);
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
  list-style: none; padding: .35rem 0;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: " +"; color: var(--teal); }
.toc details[open] summary::after { content: " \2212"; }
.toc-list { list-style: none; margin: .5rem 0 .3rem; padding: 0; counter-reset: toc; }
.toc-list li { counter-increment: toc; }
.toc-list a {
  display: block; padding: .38rem 0 .38rem 1.6rem; position: relative;
  font-size: .91rem; line-height: 1.35; color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent; transition: color .16s ease, border-color .16s ease;
}
.toc-list a::before {
  content: counter(toc); position: absolute; left: .35rem; top: .42rem;
  font-size: .72rem; font-weight: 700; color: var(--stone);
}
.toc-list a:hover { color: var(--teal); }
.toc-list a.is-current { color: var(--teal-900); font-weight: 650; border-left-color: var(--teal); background: rgba(13,125,136,.06); }

@media (min-width: 68em) {
  .toc { position: sticky; top: 5.2rem; margin-bottom: 0; max-height: calc(100vh - 7rem); overflow-y: auto; }
  .toc details { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0 0 0 var(--s3); }
  .toc summary { pointer-events: none; }
  .toc summary::after { content: ""; }
}

/* Anchor targets must clear the sticky header when jumped to. */
.prose h2 { scroll-margin-top: 5.5rem; }

/* ---------- TL;DR callout ---------- */
.tldr {
  background: var(--teal-050); border: 1px solid var(--teal-200);
  border-left: 4px solid var(--teal); border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: var(--s3) var(--s4); margin: 0 0 var(--s4);
}
.tldr-h {
  font-size: .76rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: .4rem;
}
.tldr p:last-child { margin-bottom: 0; }

/* ---------- reading progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 50;
  background: transparent; pointer-events: none;
}
.progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--glacier));
  transition: width .1s linear;
}

/* ---------- sticky conversion bar (every viewport) ----------
   Was desktop-hidden (display:none above 62em); the CRO pass put it back on every viewport,
   since the booking panel scrolls out of view on long tour pages on desktop too. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: .6rem .9rem; background: rgba(13,43,61,.97); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.14);
  transform: translateY(110%); transition: transform .25s ease;
}
.sticky-cta.visible { transform: none; }
.sticky-cta .sc-proof { color: #bcdce6; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn { white-space: nowrap; padding: .6rem 1rem; font-size: .9rem; }
@media (min-width: 62em) {
  .sticky-cta { justify-content: center; gap: var(--s4); padding: .7rem 1.5rem; }
  .sticky-cta .sc-proof { font-size: .95rem; }
}

/* ---------- timeline layout + featured aside ---------- */
.tl-layout { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 62em) { .tl-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s6); } }
.tl-aside {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r); overflow: hidden; backdrop-filter: blur(4px);
}
.tl-aside img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tl-aside-body { padding: var(--s3); }
.tl-aside h3 { color: #fff; font-size: 1.05rem; margin-bottom: var(--s2); }
.tl-kicker {
  font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--glacier); margin-bottom: .45rem;
}
.tl-meta { color: #bcdcdf; font-size: .88rem; margin-bottom: var(--s3); }
@media (min-width: 62em) { .tl-aside { position: sticky; top: 5.5rem; } }

/* Article header aligns with the content grid, not the page centre. */
.art-head { max-width: none; }
.art-head .lede { max-width: 64ch; }

/* ==========================================================================
   Interactive data blocks: sortable price tables, step cards, map panel.
   ========================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- sortable price tables ---------- */
.table-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s3);
}
.tfilter { flex: 1 1 16rem; max-width: 26rem; }
.tfilter input {
  font: inherit; font-size: .95rem; width: 100%;
  padding: .6rem .85rem .6rem 2.1rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361716f' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .7rem center / 1.05rem;
}
.tfilter input:focus { border-color: var(--teal); outline: 2px solid var(--teal-200); outline-offset: 1px; }
.tfilter-hint { margin: 0; }

table.sortable thead th { padding: 0; }
.th-sort {
  display: flex; align-items: center; gap: .35rem; width: 100%;
  font: inherit; font-weight: 700; font-size: .93rem; color: var(--teal-900);
  background: none; border: 0; padding: .7rem .85rem; cursor: pointer; text-align: left;
}
.th-sort:hover { color: var(--teal); }
.th-arrow { width: .6rem; height: .6rem; opacity: .35; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease, opacity .15s ease; }
th[aria-sort="ascending"] .th-arrow { opacity: 1; transform: rotate(135deg); }
th[aria-sort="descending"] .th-arrow { opacity: 1; transform: rotate(-45deg); }
th[aria-sort]:not([aria-sort="none"]) { background: var(--teal-200); }
table.sortable tbody tr.is-hidden { display: none; }
table.sortable tbody tr { transition: background-color .15s ease; }
table.sortable tbody tr:hover { background: var(--teal-050); }
.table-empty { padding: var(--s3); color: var(--stone); font-size: .95rem; }

/* ---------- step cards ---------- */
.sec-intro { margin-bottom: var(--s4); max-width: var(--narrow); }
.scards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); counter-reset: none; }
@media (min-width: 60em) { .scards { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.scard {
  display: flex; gap: var(--s3); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); }
.scard-n {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--teal-050); color: var(--teal-700);
  border: 1px solid var(--teal-200); font-weight: 750; font-size: 1rem;
}
.scard h3 { font-size: 1.02rem; margin-bottom: var(--s2); }
.scard p { color: var(--ink-2); font-size: .95rem; margin: 0; }
@media (min-width: 60em) { .scard { flex-direction: column; } }

/* ---------- map panel ---------- */
.map-layout { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 62em) { .map-layout { grid-template-columns: 1fr 1.15fr; gap: var(--s5); } }
.map-copy .prose { font-size: 1rem; }
.map-frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--teal-050);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }
.map-facts { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46em) { .map-facts { grid-template-columns: repeat(3, 1fr); } }
.map-facts li {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: .1rem;
}
.map-facts b { color: var(--teal-900); font-size: 1.02rem; font-weight: 750; line-height: 1.2; }
.map-facts span { color: var(--stone); font-size: .8rem; }

/* ---------- brand mark + socials ---------- */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand-mark { width: 1.7rem; height: 1.7rem; flex: 0 0 auto; }
.foot-brand { display: flex; align-items: center; gap: .6rem; }
.foot-mark { width: 2rem; height: 2rem; border-radius: 7px; flex: 0 0 auto; }

.socials { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; }
.socials a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem .45rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #d8e9ee; font-size: .87rem; font-weight: 600; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.socials a:hover { background: rgba(255,255,255,.16); border-color: var(--glacier); color: #fff; transform: translateY(-1px); text-decoration: none; }
.socials svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* ---------- article layer: hero, section figures, product CTA, infographic ----------
   Added with the /guides + /blog content build (2026-08-17). The article body is
   `.prose.art-body` inside `.art-layout`, so these rules are scoped to `.art-body` and
   never touch the migrated homepage or tour-page prose. */
.art-hero { margin: 0 auto var(--s5); }
.art-hero img {
  width: 100%; border-radius: var(--r); box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 2; object-fit: cover;
}

.art-body .art-figure { margin: var(--s5) 0; }
.art-body .art-figure img {
  width: 100%; border-radius: var(--r); box-shadow: var(--shadow);
  aspect-ratio: 3 / 2; object-fit: cover; margin: 0;
}
.art-body .art-figure figcaption { font-size: .86rem; color: var(--stone); margin-top: var(--s2); }

/* In-body product CTA card: the gradual booking layer. Whole card links the affiliate URL. */
.art-body .pcta {
  display: grid; grid-template-columns: 40% 1fr; gap: 0; max-width: none;
  margin: var(--s5) 0; overflow: hidden;
  background: var(--paper); border: 1px solid var(--teal-200); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.art-body .pcta-media { display: block; }
.art-body .pcta-media img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; margin: 0; border-radius: 0; box-shadow: none; }
.art-body .pcta-body { padding: var(--s3) var(--s4); display: flex; flex-direction: column; }
.art-body .pcta-hook { font-weight: 750; color: var(--teal-900); font-size: 1.05rem; margin-bottom: var(--s1); }
.art-body .pcta-title { color: var(--ink); font-weight: 600; margin-bottom: var(--s1); }
.art-body .pcta-proof { color: var(--stone); font-size: .9rem; margin-bottom: var(--s2); }
.art-body .pcta-proof .star { color: #e0a500; }
.art-body .pcta-foot { display: flex; align-items: center; gap: var(--s3); margin: auto 0 0; flex-wrap: wrap; }
.art-body .pcta-price { font-weight: 750; color: var(--teal-900); font-size: 1.3rem; }
.art-body .pcta-price .cur { font-size: .8em; }
.art-body .pcta-foot .btn { margin-left: auto; white-space: nowrap; }
@media (max-width: 34em) {
  .art-body .pcta { grid-template-columns: 1fr; }
  .art-body .pcta-media img { min-height: 150px; aspect-ratio: 16 / 9; }
  .art-body .pcta-foot .btn { margin-left: 0; width: 100%; text-align: center; }
}

/* Information-gain block + hand-authored SVG infographic. The chart sits in the same
   horizontal-scroll container the tables use: an inline SVG scales its text with its
   container, so a full-width chart on a 330px phone would render labels at about 5px. */
.art-body .infogain {
  max-width: none; margin: var(--s5) 0; padding: var(--s4);
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r);
}
.art-body .infogain-h { font-weight: 750; color: var(--teal-900); margin-bottom: var(--s3); font-size: 1.1rem; }
.art-body .infogain-scroll { margin: 0; background: var(--paper); }
.art-body .infogain svg { width: 100%; min-width: 640px; height: auto; display: block; }
.art-body .infogain-note { font-size: .84rem; color: var(--stone); margin: var(--s3) 0 0; }

/* Richer link card used by the homepage "Helpful articles" grid: title plus one line of
   context, so the card earns its click instead of being a bare heading. */
.lcard-rich { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .45rem; }
.lcard-rich::after { content: none; }
.lcard-rich .lc-kicker {
  font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--teal-700);
}
.lcard-rich .lc-title { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.lcard-rich .lc-blurb { font-size: .9rem; font-weight: 400; color: var(--ink-2); line-height: 1.5; }
.lcard-rich .lc-go { margin-top: auto; padding-top: .45rem; font-size: .87rem; font-weight: 650; color: var(--teal); }
.lcard-rich:hover .lc-go { color: var(--larch-700); }
/* ==========================================================================
   blog-cro: in-article conversion blocks.
   Append to the site's stylesheet, then adjust the custom properties if that
   site names them differently. Everything here sits INSIDE the prose column,
   so nothing is full-bleed: a `.band` in this position gets clipped to the
   text measure and reads as a stray slab.
   ========================================================================== */

.cta-box {
  background: var(--teal-050, #eef6f6);
  border: 1px solid var(--teal-200, #cfe3e4);
  border-left: 4px solid var(--teal, #0d7d88);
  border-radius: 0 var(--r, 14px) var(--r, 14px) 0;
  padding: var(--s4, 1.75rem);
  margin: var(--s5, 2.75rem) 0;
}
.cta-box .cb-h {
  font-size: 1.06rem; font-weight: 750; color: var(--teal-900, #06414a);
  margin-bottom: var(--s2, .75rem); line-height: 1.25;
}
.cta-box p { color: var(--ink-2, #3d4f4e); margin-bottom: var(--s3, 1.125rem); }
.cta-box p:last-child { margin-bottom: 0; }

/* ---- with imagery: photo left, copy right; photo on top on mobile ---- */
.cta-box.has-media { display: grid; gap: 0; padding: 0; overflow: hidden; position: relative; }
.cta-media { background: var(--teal-050, #eef6f6); }
.cta-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.cta-body { padding: var(--s4, 1.75rem); }
.cta-body > :last-child { margin-bottom: 0; }

@media (min-width: 40em) {
  .cta-box.has-media { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: stretch; }
  .cta-media img { height: 100%; aspect-ratio: auto; min-height: 100%; }
}
@media (min-width: 60em) {
  .cta-box.has-media { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
}

/* Whole box clickable while the button stays the ONLY anchor in it: no nested links, no
   duplicate crawlable URL, and the copy stays selectable. */
.cta-box.has-media { transition: border-color .18s ease, box-shadow .18s ease; }
.cta-box.has-media:hover { border-color: var(--teal, #0d7d88); box-shadow: var(--shadow, 0 6px 20px rgba(6,65,74,.07)); }
.cta-box.has-media .cta-stretch { position: relative; z-index: 2; }
.cta-box.has-media .cta-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---- mid-article tour picks ----
   This grid sits INSIDE the article prose column, whose width does not track the viewport:
   on the two-track content-build layout the sticky TOC rail claims ~380px back at >=1200px,
   so the column is actually WIDER at 1024px than at 1440px. A viewport media query therefore
   cannot tell whether three cards fit. The earlier `auto-fit, minmax(15rem, 1fr)` also assumed
   a 16px root; the pipeline's root scales to ~19.5px, making 15rem = 292px, so three cards
   needed 921px in an ~800px column and every mid-article grid silently rendered 2 + 1 with an
   empty third slot (found on liriver.cruises 2026-08-15, 18 of 19 pages). Container query
   against the real container, in px so a root-font-size clamp cannot reintroduce it.
   Three cards go 3-up or 1-up, never 2-up with an orphan. */
.tour-picks { margin: var(--s5, 2.75rem) 0; container-type: inline-size; }
.tour-picks > h2 { margin-bottom: var(--s3, 1.125rem); }
.tour-picks .tgrid { display: grid; grid-template-columns: 1fr; gap: var(--s3, 1.125rem); }
@container (min-width: 730px) { .tour-picks .tgrid { grid-template-columns: repeat(3, 1fr); } }
/* 1-up mode spans the full prose column, where a 4:3 photo would run over 500px tall and a
   16/9 one still runs ~410px. The cap keeps a stacked card readable as a mid-article widget
   rather than a full-screen banner; at 3-up (~250px wide) 16/9 is ~142px, well under it. */
.tour-picks .tcard-media { aspect-ratio: 16 / 9; max-height: 220px; }
.tour-picks .tcard-body { padding: var(--s3, 1.125rem); }
.tour-picks .tcard-title { font-size: 1rem; }
.tour-picks .tcard-desc { font-size: .9rem; -webkit-line-clamp: 5; line-clamp: 5; }
/* 3-up leaves each card ~250px, which is too narrow for price and button side by side: the
   label wrapped onto two lines with the arrow stranded below. Give the button its own
   full-width row under the price instead, which also enlarges the tap target. */
.tour-picks .tcard-foot { flex-wrap: wrap; row-gap: var(--s2, .75rem); }
.tour-picks .tcard-foot .btn { flex: 1 0 100%; text-align: center; white-space: nowrap; }

/* The closing block is a rounded card here, not a full-bleed band. */
.article .band-cta { margin: var(--s5, 2.75rem) 0 0; }