/* ============================================================================
   package.css — the advanced package experience.

   Route map, aviation panel, day accordion, accommodation modal, estimate
   calculator, sticky package bar, exit-intent panel, and the print rules that
   turn a journey page into the downloadable PDF itinerary.
   ========================================================================= */

/* ======================================================= ROUTE MAP ====== */
.rm-wrap {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (width >= 60rem) {
  .rm-wrap { grid-template-columns: 1.45fr 1fr; }
}

.rm-figure {
  background: var(--surface-2, #faf9f6);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--sp-m);
}
.rm-svg { inline-size: 100%; block-size: auto; display: block; }

.rm-land { fill: var(--surface-1, #fff); stroke: var(--line); }
.rm-leg { fill: none; stroke-linecap: round; }
.rm-leg.rm-fly { stroke: var(--accent); stroke-dasharray: 2 12; stroke-width: 5; }
.rm-leg.rm-drive { stroke: var(--ink-600, #52534f); }
.rm-leg.rm-boat { stroke: #2f6f8f; stroke-dasharray: 14 8; }
.rm-leg.rm-walk { stroke: var(--gold); stroke-dasharray: 6 7; }
.rm-leg.rm-balloon { stroke: var(--gold); stroke-dasharray: 2 10; }
.rm-leg.rm-start { stroke: none; }

.rm-dot { fill: var(--accent); stroke: #fff; }
.rm-dot.rm-kind-airstrip { fill: var(--ink-900, #22231f); }
.rm-dot.rm-kind-coast { fill: #2f6f8f; }
.rm-dot.rm-kind-peak { fill: var(--gold); }
.rm-dot.rm-kind-lake { fill: #5a93ad; }

.rm-label {
  font-family: var(--f-body, system-ui), sans-serif;
  fill: var(--text-2);
  font-weight: 500;
  paint-order: stroke;
  stroke: var(--surface-2, #faf9f6);
  stroke-linejoin: round;
}

.rm-legend {
  list-style: none;
  margin: var(--sp-s) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: var(--t-xs);
  color: var(--text-3);
}
.rm-legend li { display: flex; align-items: center; gap: 0.45rem; }
.rm-key { inline-size: 26px; block-size: 0; border-top: 3px solid currentColor; flex: none; }
.rm-key.rm-fly { color: var(--accent); border-top-style: dotted; }
.rm-key.rm-drive { color: var(--ink-600, #52534f); }
.rm-key.rm-boat { color: #2f6f8f; border-top-style: dashed; }
.rm-key.rm-walk { color: var(--gold); border-top-style: dashed; }

.rm-h {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.9rem;
}
.rm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.rm-step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.rm-step:last-child { border-bottom: 0; }
.rm-step-i {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--surface-2, #faf9f6);
  color: var(--accent);
}
.rm-step-i svg { inline-size: 1rem; block-size: 1rem; }
.rm-step b { display: block; font-size: var(--t-sm); font-weight: 600; }
.rm-step-mode { display: block; font-size: var(--t-xs); color: var(--text-3); }

/* ================================================= AVIATION PANEL ======= */
.fly-sub {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  margin-block: var(--sp-l) 1rem;
}

/* ==================================================== DAY ACCORDION ===== */
.day-tools { display: flex; gap: 0.6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: var(--t-xs); }

.days { display: grid; gap: 0.55rem; }
.day {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-1, #fff);
  overflow: hidden;
}
.day[open] { border-color: var(--accent); }
.day > summary {
  cursor: pointer;
  padding: 1rem 1.15rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.35rem 1rem;
  align-items: baseline;
  list-style: none;
}
.day > summary::-webkit-details-marker { display: none; }
.day > summary::after {
  content: '+';
  grid-column: 3;
  grid-row: 1;
  font-size: 1.2em;
  line-height: 1;
  color: var(--accent);
}
.day[open] > summary::after { content: '\2212'; }
.day > summary:hover .day-t { color: var(--accent); }
.day > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.day-n {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.day-t { font-weight: 600; font-size: var(--t-sm); line-height: 1.45; }
.day-meta {
  grid-column: 2;
  font-size: var(--t-xs);
  color: var(--text-3);
}
@media (width < 40rem) {
  .day > summary { grid-template-columns: 1fr auto; }
  .day-n { grid-column: 1; }
  .day > summary::after { grid-column: 2; }
  .day-t, .day-meta { grid-column: 1; }
}

.day-body { padding: 0 1.15rem 1.15rem; }
.day-body > p { margin: 0 0 1rem; font-size: var(--t-sm); line-height: 1.7; color: var(--text-2); }
.day-facts {
  margin: 0;
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.day-facts dt {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.day-facts dd { margin: 0.15rem 0 0; font-size: var(--t-sm); }
.meals { display: flex; gap: 0.3rem; }
.meal {
  display: grid;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: var(--r-s);
  background: var(--accent);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
}
.meal-none {
  inline-size: auto;
  padding-inline: 0.55rem;
  background: var(--surface-2, #faf9f6);
  color: var(--text-3);
  font-weight: 400;
}

/* =============================================== ACCOMMODATION ========== */
.stay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-m);
}
.stay-card {
  display: grid;
  gap: 0;
  text-align: left;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-1, #fff);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease;
}
.stay-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.stay-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.stay-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.stay-media picture { display: block; inline-size: 100%; block-size: 100%; }
.stay-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.stay-text { display: grid; gap: 0.3rem; padding: 1rem 1.15rem 1.15rem; }
.stay-name { font-family: var(--f-display, inherit); font-size: 1.1rem; line-height: 1.25; }
.stay-loc { font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; }
.stay-more {
  font-size: var(--t-xs);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.stay-more svg { inline-size: 0.85em; block-size: 0.85em; }

/* Without <dialog> support the panel is a plain visible block, which is why
   the modal treatment only lands once the script adds .is-modal. */
.stay-modal { display: block; border: 0; padding: 0; margin-block: var(--sp-m); }
.stay-modal.is-modal { display: none; }
.stay-modal.is-modal[open] { display: block; }
.stay-modal.is-modal {
  max-inline-size: min(46rem, calc(100vw - 2rem));
  max-block-size: min(86vh, 54rem);
  inline-size: 100%;
  border-radius: var(--r-l);
  padding: 0;
  overflow: auto;
  background: var(--surface-1, #fff);
  color: var(--text-1);
}
.stay-modal.is-modal::backdrop { background: rgb(12 14 16 / 68%); backdrop-filter: blur(3px); }
.stay-modal-in { position: relative; }
.stay-close {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  color: var(--ink-900, #22231f);
  cursor: pointer;
}
.stay-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.stay-close svg { inline-size: 1.1rem; block-size: 1.1rem; }
.stay-modal-media { aspect-ratio: 16 / 9; overflow: hidden; }
.stay-modal-media picture { display: block; inline-size: 100%; block-size: 100%; }
.stay-modal-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.stay-modal-body { padding: var(--sp-m) var(--sp-m) var(--sp-l); }
.stay-modal-body h3 {
  font-family: var(--f-display, inherit);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  margin: 0 0 0.6rem;
}
.stay-modal-body h3:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.stay-blurb { font-size: var(--t-sm); line-height: 1.7; color: var(--text-2); margin: 0 0 1.25rem; }
.stay-facts { margin: 0 0 1.25rem; display: grid; gap: 0.65rem; }
.stay-facts > div { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr; gap: 0.2rem 1rem; }
.stay-facts dt {
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.stay-facts dd { margin: 0; font-size: var(--t-sm); line-height: 1.6; }
@media (width < 34rem) { .stay-facts > div { grid-template-columns: 1fr; } }
.stay-amen-h {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.6rem;
}
.stay-amen {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.stay-amen li {
  font-size: var(--t-xs);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-2, #faf9f6);
  border: 1px solid var(--line);
}
.stay-note {
  font-size: var(--t-xs);
  line-height: 1.65;
  color: var(--text-2);
  padding: 0.9rem 1rem;
  border-radius: var(--r-m);
  background: var(--surface-2, #faf9f6);
  border-left: 3px solid var(--accent);
  margin: 0;
}

/* ================================================= ESTIMATE CALCULATOR == */
.bk-calc {
  margin-top: var(--sp-m);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.8rem;
}
.bk-calc-h {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.bk-est {
  display: block;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--text-3);
  padding: 0.75rem 0.9rem;
  border-radius: var(--r-m);
  background: var(--surface-2, #faf9f6);
}
.bk-est-n {
  display: block;
  font-family: var(--f-display, inherit);
  font-size: 1.65rem;
  line-height: 1.1;
  color: var(--text-1);
}
.bk-est-u { display: block; font-size: var(--t-xs); color: var(--text-2); margin-top: 0.2rem; }
.bk-est-w { display: block; margin-top: 0.55rem; color: var(--text-3); }
.bk-est-req { border-left: 3px solid var(--gold); }
.bk-actions { display: grid; gap: 0.55rem; margin-top: var(--sp-m); }

/* ================================================== STICKY PACKAGE BAR == */
.pkg-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  background: var(--surface-bar, #fff);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgb(0 0 0 / 10%);
  padding-block: 0.6rem;
  animation: pkgbar-in 240ms cubic-bezier(.2,.7,.2,1);
}
@keyframes pkgbar-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pkg-bar { animation: none; } }
.pkg-bar[hidden] { display: none; }
.pkg-bar-in {
  display: flex;
  align-items: center;
  gap: var(--sp-s) var(--sp-m);
  flex-wrap: wrap;
}
.pb-name { font-weight: 600; font-size: var(--t-sm); flex: 1 1 12rem; min-inline-size: 0; }
.pb-dur, .pb-price { font-size: var(--t-xs); color: var(--text-3); white-space: nowrap; }
.pb-price b { color: var(--text-1); font-size: var(--t-sm); }
.pkg-bar .btn { margin-inline-start: auto; flex: none; }
@media (width < 34rem) {
  .pb-dur { display: none; }
  .pb-name { flex-basis: 100%; }
}

/* ===================================================== EXIT INTENT ====== */
.exit-panel {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 70;
  max-inline-size: 23rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-l);
  background: var(--surface-1, #fff);
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgb(0 0 0 / 18%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.exit-panel[data-show='true'] { opacity: 1; transform: none; }
.exit-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .exit-panel { transition: none; }
}
.exit-h { font-family: var(--f-display, inherit); font-size: 1.15rem; margin: 0 0 0.5rem; }
.exit-p { font-size: var(--t-xs); line-height: 1.65; color: var(--text-2); margin: 0 0 1rem; }
.exit-close {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-end: 0.6rem;
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.exit-close:hover { color: var(--text-1); }
.exit-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.exit-close svg { inline-size: 1rem; block-size: 1rem; }
@media (width < 40rem) { .exit-panel { display: none; } }

/* ========================================================== PRINT =======
   This is the "Download PDF itinerary" action. The browser's own print
   pipeline produces a searchable, accessible, correctly-branded document
   that cannot drift out of date against the page, which no bundled PDF
   library manages. */
@media print {
  .utility-bar, .site-header, .drawer, .site-footer, .access-dock,
  .jump, .pkg-bar, .exit-panel, .rail-nav, .save-btn, .cta-band,
  .preloader, .grain, .reading-guide, .progress-top, .cursor,
  .day-tools, .bk-calc, .bk-actions, .bk-alt, .stay-card,
  .filter-grid, .tabs, [data-filter-count] { display: none !important; }

  :root { --sp-2xl: 1.5rem; --sp-xl: 1.2rem; --sp-l: 1rem; }

  html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }
  .section { padding-block: 0.6rem !important; break-inside: avoid; }
  .shell { width: 100% !important; max-width: none !important; padding: 0 !important; }
  .band, .band-alt, .band-navy { background: #fff !important; }
  .band-navy, .band-navy * { color: #000 !important; }

  /* Everything that reveals on scroll must be visible on paper. */
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }

  /* Every day prints, open. */
  .day, .faq { break-inside: avoid; border-color: #bbb !important; }
  .day > summary::after, .faq > summary::after { content: '' !important; }
  .day-body, .faq-a { display: block !important; }

  /* The accommodation modals print as plain sections. */
  .stay-modal { display: block !important; border: 1px solid #bbb; margin-block: 0.6rem; }
  .stay-modal .stay-close { display: none !important; }
  .stay-modal-media { max-block-size: 7cm; }

  .booking-layout { display: block !important; }
  .booking-card { border: 1px solid #bbb !important; position: static !important; }

  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }
  a[href^='#']::after, a[href$='.html']::after { content: ''; }

  .media, .media-img, .rm-figure { break-inside: avoid; }
  img { max-block-size: 9cm; object-fit: contain; }

  h1, h2, h3 { break-after: avoid; }
  table { break-inside: auto; font-size: 9pt; }
  tr { break-inside: avoid; }

  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ======================================== HOMEPAGE PACKAGE DISCOVERY ==== */
.cat-nav { margin-bottom: var(--sp-l); }
.cat-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.cat-nav li { flex: none; scroll-snap-align: start; }
.cat-nav a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-xs);
  text-decoration: none;
  color: var(--text-2);
  white-space: nowrap;
  background: var(--surface-1, #fff);
  transition: border-color 160ms ease, color 160ms ease;
}
.cat-nav a:hover { border-color: var(--accent); color: var(--accent); }
.cat-nav a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cat-nav svg { inline-size: 0.95em; block-size: 0.95em; color: var(--accent); flex: none; }
.cn-n {
  font-size: 0.75em;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  background: var(--surface-2, #faf9f6);
  color: var(--text-3);
}

.pkg-filters { margin-bottom: var(--sp-l); }
.pkg-filters[hidden] { display: none; }
.pf-count { font-size: var(--t-xs); color: var(--text-3); align-self: center; }

.pc-cat-sec { margin-block: var(--sp-xl); scroll-margin-top: 6rem; }
.pc-cat-sec[hidden] { display: none; }
.pc-cat-head { margin-bottom: var(--sp-m); }
.pc-cat-h {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-display, inherit);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  margin: 0 0 0.35rem;
}
.pc-cat-h svg { inline-size: 1.05em; block-size: 1.05em; color: var(--accent); flex: none; }
.pc-cat-p { margin: 0; font-size: var(--t-sm); color: var(--text-2); max-width: 62ch; line-height: 1.6; }
.pc-cat-empty { font-size: var(--t-sm); color: var(--text-3); font-style: italic; }

.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--sp-m);
}

.pc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--surface-1, #fff);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.pc[hidden] { display: none; }
.pc:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgb(0 0 0 / 9%);
}
@media (prefers-reduced-motion: reduce) {
  .pc, .pc:hover { transform: none; transition: border-color 200ms ease; }
}

.pc-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.pc-media picture { display: block; inline-size: 100%; block-size: 100%; }
.pc-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.pc:hover .pc-media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .pc-media img, .pc:hover .pc-media img { transition: none; transform: none; }
}

.pc-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.15rem 1.15rem; flex: 1; }
.pc-cats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.pc-cat {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.12em 0.55em;
  opacity: 0.85;
}
.pc-name { font-family: var(--f-display, inherit); font-size: 1.12rem; line-height: 1.25; margin: 0; }
.pc-name a { text-decoration: none; color: inherit; }
.pc-name a:hover { color: var(--accent); }
.pc-name a::after { content: ''; position: absolute; inset: 0; }
.pc { position: relative; }
/* The actions must stay clickable above the whole-card link. */
.pc-actions, .pc-flags { position: relative; z-index: 1; }
.pc-route { margin: 0; font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; }
.pc-blurb {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-flags { list-style: none; margin: 0.15rem 0 0; padding: 0; display: flex; gap: 0.3rem; }
.pc-flags .tour-flag {
  inline-size: 24px;
  block-size: 24px;
  background: var(--surface-2, #faf9f6);
  color: var(--accent);
  border: 1px solid var(--line);
}
.pc-flags .tour-flag svg { inline-size: 13px; block-size: 13px; }
.pc-flags .tour-flag[data-level='partial'] { color: var(--gold); }
.pc-flags .tour-flag[data-level='request'] { color: var(--text-3); background: transparent; }

.pc-foot {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}
.pc-dur {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-xs);
  color: var(--text-3);
  white-space: nowrap;
}
.pc-dur svg { inline-size: 0.95em; block-size: 0.95em; }
.pc-price { text-align: right; display: grid; }
.pc-price small { font-size: 0.68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.pc-price b { font-family: var(--f-display, inherit); font-size: 1.1rem; line-height: 1.15; }
.pc-price em { font-size: 0.68rem; font-style: normal; color: var(--text-3); }
.pc-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.5rem; }
.pc-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }

@media print {
  .cat-nav, .pkg-filters, .pc-actions { display: none !important; }
  .pc { break-inside: avoid; border-color: #bbb !important; }
}

/* ================================================ SAFARI KNOWLEDGE HUB == */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--sp-m);
  margin-top: var(--sp-l);
}
.hub-card {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.25rem 1.35rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-1, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease;
}
.hub-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.hub-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hub-card, .hub-card:hover { transform: none; } }
.hub-i { inline-size: 1.5rem; block-size: 1.5rem; color: var(--accent); }
.hub-h { font-family: var(--f-display, inherit); font-size: 1.08rem; line-height: 1.3; }
.hub-p { font-size: var(--t-xs); line-height: 1.65; color: var(--text-2); }
.hub-go {
  margin-top: 0.3rem;
  font-size: var(--t-xs);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.hub-go svg { inline-size: 0.85em; block-size: 0.85em; }

/* ======================================================== TRUST SECTION = */
.trust-h {
  font-family: var(--f-display, inherit);
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  margin: 0 0 0.75rem;
}
.trust-reviews {
  max-width: var(--measure, 44rem);
  margin-inline: auto;
  padding: var(--sp-m) var(--sp-m) var(--sp-l);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-2, #faf9f6);
}
.trust-reviews.is-empty { border-left: 3px solid var(--gold); }
.trust-empty, .trust-empty-note, .trust-note {
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 0.9rem;
}
.trust-empty-note { font-size: var(--t-xs); color: var(--text-3); margin-bottom: 0; }
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-m);
  margin-top: var(--sp-m);
}
.review {
  margin: 0;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-1, #fff);
}
.review blockquote { margin: 0 0 0.85rem; }
.review blockquote p { margin: 0; font-size: var(--t-sm); line-height: 1.7; }
.review figcaption { display: grid; gap: 0.15rem; font-size: var(--t-xs); color: var(--text-3); }
.review figcaption b { color: var(--text-1); font-size: var(--t-sm); }
.review-src { font-style: italic; }

/* ========================================================== HERO VIDEO == */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}
.hero-video[data-ready='true'] { opacity: 1; }
.hero-video video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
@media print { .hero-video { display: none; } }

/* ======================================== GEMSTONE / CULTURAL PANELS === */
.spec-list { margin: 0 auto; max-width: 52rem; display: grid; gap: 0.9rem; }
.spec-list > div { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: 0.25rem 1.5rem; }
.spec-list dt {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.spec-list dd { margin: 0; font-size: var(--t-sm); line-height: 1.7; color: var(--text-2); }
@media (width < 36rem) { .spec-list > div { grid-template-columns: 1fr; } }
.spec-sub {
  max-width: 52rem;
  margin: var(--sp-l) auto 1rem;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
}
.spec-sub em { font-style: italic; color: var(--accent); }

/* The booking card sits on white, so the shared .check-inline colour —
   which is tuned for the dark footer — was far too pale here. */
.bk-calc .check-inline { color: var(--text-2); }
.bk-calc .field > label { color: var(--text-2); }
.bk-calc .select { text-overflow: ellipsis; }

/* ===================================================== RAIL TABS ======== */
.rail-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  margin-bottom: 1rem;
}
.rail-tabs .tab { flex: none; scroll-snap-align: start; }

/* ================================================= THE FOUNDING OFFER ===
   Guide section 2.3 allows one genuine founding benefit and forbids fake
   scarcity, so this is a quiet badge with its terms printed under the rail
   — not a starburst, not a countdown, and not a struck-through price that
   was never charged. */
.tour-offer {
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-start: 0.85rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-s);
  background: var(--gold, #b68a3c);
  color: #1b1a17;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 2px 10px rgb(0 0 0 / 28%);
}
.tour-offer-inline {
  position: static;
  box-shadow: none;
  flex: none;
  align-self: flex-start;
}
.offer-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 56rem;
  margin: var(--sp-m) auto 0;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-m);
  background: var(--surface-1, #fff);
  font-size: var(--t-xs);
  line-height: 1.65;
  color: var(--text-2);
}

/* The "on request" price inside a rail card sits on the photograph, so it
   takes the light treatment the figure version already has. */
.tour .price-req > b { font-size: 1.05rem; }
.tour .price-req > small { color: #cfcac1; }

/* ---- links the trimmed sections left behind ---- */
.why-foot {
  text-align: center;
  margin-top: var(--sp-l);
  font-size: var(--t-xs);
  color: var(--text-3);
}
.why-foot a { color: var(--text-2); }

/* The badge was landing on top of the category label in the card's top-left
   corner, clipping "WILDLIFE" to "IFE". It moves under the save button on
   the right, which is the only other free corner. */
.tour-offer {
  inset-block-start: 3.5rem;
  inset-inline-start: auto;
  inset-inline-end: 0.85rem;
}
.tour-offer-inline {
  inset-block-start: auto;
  inset-inline-end: auto;
}

/* `.notice` is display:flex, so the author rule beat `[hidden]` and the
   empty-category message showed with all 32 cards on screen. Same class of
   bug as the step panels and the planner buttons. */
.notice[hidden],
.offer-note[hidden] { display: none; }

/* Keep the title and route clear of the badge sitting in the right corner. */
.tour:has(.tour-offer) .tour-over { padding-inline-end: 3.6rem; }

/* ========================================================= JOURNEY HERO ==
   One full-bleed hero doing the job the pale title band and the slab of
   photograph below it used to split between them. */
.jhero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-block-size: min(74svh, 40rem);
  padding-block: var(--sp-2xl) 0;
  overflow: hidden;
  color: #fff;
}
.jhero-media { position: absolute; inset: 0; z-index: -2; }
.jhero-media picture { display: block; inline-size: 100%; block-size: 100%; }
.jhero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.jhero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(10 12 14 / 92%) 0%, rgb(10 12 14 / 62%) 34%,
                    rgb(10 12 14 / 18%) 66%, rgb(10 12 14 / 34%) 100%);
}

.jhero-inner { padding-block-end: var(--sp-l); }
.crumbs-on-dark ol { color: rgb(255 255 255 / 72%); }
.crumbs-on-dark a { color: rgb(255 255 255 / 80%); }
.crumbs-on-dark a:hover { color: var(--gold); }

.jhero-eyebrow {
  margin: 0 0 0.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.jhero-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--f-display, inherit);
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}
.jhero-lede {
  margin: 1.1rem 0 0;
  max-width: 54ch;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.12rem);
  line-height: 1.65;
  color: #e9e6e0;
}
.jhero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.75rem; }

/* The facts strip across the foot of the hero. */
.jhero-facts {
  position: relative;
  background: rgb(10 12 14 / 58%);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgb(255 255 255 / 16%);
}
@supports not (backdrop-filter: blur(10px)) {
  .jhero-facts { background: rgb(10 12 14 / 86%); }
}
.jhero-facts-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.25rem var(--sp-m);
  padding-block: 1rem;
}
.jh-fact {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding-block: 0.35rem;
  min-inline-size: 0;
}
.jh-fact > svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--gold); flex: none; margin-block-start: 0.15rem; }
.jh-fact > div { min-inline-size: 0; }
.jh-f-k {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 62%);
}
.jh-f-v {
  display: block;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: #fff;
  margin-top: 0.1rem;
}
.jh-f-v b { font-size: 1.05rem; font-family: var(--f-display, inherit); }
.jh-f-v small { display: block; font-size: 0.68rem; color: rgb(255 255 255 / 62%); }

@media (width < 48rem) {
  .jhero { min-block-size: min(68svh, 32rem); }
  .jhero-facts-in { grid-template-columns: 1fr 1fr; }
}
@media (width < 30rem) {
  .jhero-facts-in { grid-template-columns: 1fr; }
  /* Drop pace and season rather than the last two, so the price survives —
     on a phone it is the fact people are looking for. */
  .jh-fact:nth-child(3),
  .jh-fact:nth-child(4) { display: none; }
}
@media print {
  .jhero { min-block-size: auto; color: #000; padding-block: 0; }
  .jhero::after { display: none; }
  .jhero-media { position: static; max-block-size: 7cm; }
  .jhero-title, .jhero-lede, .jh-f-k, .jh-f-v { color: #000 !important; }
  .jhero-facts { background: #fff; backdrop-filter: none; border-color: #bbb; }
  .jhero-actions { display: none; }
}

/* ===================================================== BOOKING WIDGET === */
.bk-head {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.bk-k {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bk-v {
  margin: 0.15rem 0 0;
  font-family: var(--f-display, inherit);
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem);
  line-height: 1.05;
}
.bk-head-req .bk-v { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.7rem); }
.bk-sub { margin: 0.35rem 0 0; font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; }

.bk-facts-row { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.bk-facts-row li {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--text-2);
}
.bk-facts-row svg { inline-size: 0.95rem; block-size: 0.95rem; color: var(--accent); flex: none; }

.bk-actions { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.bk-actions-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.bk-actions-two .btn { justify-content: center; padding-inline: 0.5rem; }

.bk-calc-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2, #faf9f6);
  margin-bottom: 0.9rem;
}
.bk-calc-wrap > summary {
  cursor: pointer;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  list-style: none;
  font-size: var(--t-sm);
  font-weight: 600;
}
.bk-calc-wrap > summary::-webkit-details-marker { display: none; }
.bk-calc-wrap > summary::after {
  content: '+';
  margin-inline-start: auto;
  color: var(--accent);
  font-size: 1.15em;
  line-height: 1;
}
.bk-calc-wrap[open] > summary::after { content: '\2212'; }
.bk-calc-wrap > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.bk-calc-hint { font-size: var(--t-xs); font-weight: 400; color: var(--text-3); }
.bk-calc { margin: 0; padding: 0 0.9rem 0.9rem; border-top: 0; }

.bk-alt { display: block; text-align: center; font-size: var(--t-xs); margin-bottom: 0.9rem; }
.bk-note { margin: 0; font-size: var(--t-xs); line-height: 1.6; color: var(--text-3); }

@media print {
  .bk-calc-wrap, .bk-actions { display: none !important; }
}

/* The hero sits over whatever photograph the journey has, and some of them
   are a bright sky exactly where the eyebrow lands. A shadow on the text and
   a deeper mid-stop in the scrim make it legible on all 32 rather than on
   most of them. */
.jhero::after {
  background:
    linear-gradient(to top, rgb(10 12 14 / 93%) 0%, rgb(10 12 14 / 76%) 26%,
                    rgb(10 12 14 / 48%) 55%, rgb(10 12 14 / 30%) 78%,
                    rgb(10 12 14 / 46%) 100%);
}
.jhero-eyebrow {
  color: #f0c46a;
  text-shadow: 0 1px 10px rgb(0 0 0 / 85%), 0 0 2px rgb(0 0 0 / 60%);
}
.jhero-title { text-shadow: 0 2px 22px rgb(0 0 0 / 62%), 0 1px 3px rgb(0 0 0 / 45%); }
.jhero-lede { text-shadow: 0 1px 12px rgb(0 0 0 / 72%); }
.crumbs-on-dark ol { text-shadow: 0 1px 8px rgb(0 0 0 / 70%); }

/* The summary was a flex row, so the title and the hint competed for width
   and "Build an estimate" broke across two lines beside "dates, party,
   standard". Two rows in one column, with the +/- pinned beside both. */
.bk-calc-wrap > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 0.75rem;
  align-items: center;
}
.bk-calc-wrap > summary > span:first-child { grid-column: 1; grid-row: 1; }
.bk-calc-hint { grid-column: 1; grid-row: 2; }
.bk-calc-wrap > summary::after { grid-column: 2; grid-row: 1 / span 2; }

/* The two secondary actions share one row, so uppercase with letter-spacing
   pushed "PDF ITINERARY" onto two lines. Sentence case fits. */
.bk-actions-two .btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-xs);
  white-space: nowrap;
}

/* ===================================================== HERO SLIDESHOW ====
   One slide visible at a time, each running its own slow zoom.
   hero-slides.js advances on `animationend`, so the swap always lands at the
   end of a zoom rather than part-way through one. */
.hslides { position: absolute; inset: 0; overflow: hidden; }
.hslide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1100ms ease;
}
.hslide.is-on { opacity: 1; }
.hslide picture { display: block; inline-size: 100%; block-size: 100%; }
.hslide img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform-origin: 50% 55%;
}
/* The zoom runs only on the slide that is showing, so nothing off-screen is
   animating in the background. */
.hslide.is-on img { animation: hzoom 13s cubic-bezier(.33,.06,.3,.99) forwards; }
/* A drift, not a zoom. 1.11 crept far enough into the frame that the hero
   read as a crop closing in; 1.055 reads as the image breathing. */
@keyframes hzoom {
  from { transform: scale(1.01); }
  to   { transform: scale(1.055); }
}

.hslide-dots {
  position: absolute;
  inset-block-end: 1.1rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}
.hslide-dots[hidden] { display: none; }
.hslide-dot {
  inline-size: 2.2rem;
  block-size: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 38%);
  cursor: pointer;
  transition: background 300ms ease;
}
.hslide-dot[aria-selected='true'] { background: var(--gold, #c79a4a); }
.hslide-dot:hover { background: rgb(255 255 255 / 70%); }
.hslide-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hslide { transition: none; }
  .hslide.is-on img { animation: none; transform: scale(1.03); }
  .hslide-dots { display: none; }
}
@media print {
  .hslide:not(.is-on) { display: none; }
  .hslide-dots { display: none; }
}

/* ================================================ INTERACTIVE TZ MAP === */
.tzm { position: relative; }
.tzm-layout { display: grid; gap: var(--sp-l); align-items: start; }
@media (width >= 64rem) {
  .tzm-layout { grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 1fr); }
}
.tzm-figure {
  position: relative;
  /* A faint sea tone. On white the three islands read as shapes floating in
     nothing rather than as islands. The second declaration below used to
     overwrite this one. */
  background: linear-gradient(168deg, #e8f1f5 0%, #dfeaf0 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--sp-m);
}
/* No max-height here: the SVG's height comes from its viewBox ratio, and
   capping it clipped the lower third of the country — pins in the southern
   parks fell outside the visible area entirely. The figure is capped on
   width instead, which scales the whole map. */
.tzm-svg { inline-size: 100%; block-size: auto; display: block; }

/* The land was within a couple of per cent of the section background, so
   the country was effectively invisible. Land is now a warm sand on a cool
   water field, which is what makes a map read as a map at a glance. */
.tzm-land {
  fill: #f3efe3;
  stroke: #9aa58c;
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.tzm-water { fill: #c4dae4; stroke: #97b9c7; stroke-width: 1.4; }

.tzm-halo { fill: var(--accent); opacity: 0; transition: opacity 180ms ease; }
.tzm-dot { stroke: #fff; stroke-width: 2.5; transition: r 180ms ease; }
.tzm-park { fill: #3f7d23; }
.tzm-coast { fill: #2f7f9e; }
.tzm-peak { fill: #8a6a1c; }
.tzm-lake { fill: #5a93ad; }
.tzm-town { fill: #4a4b46; }

.tzm-label {
  font-family: var(--f-body, system-ui), sans-serif;
  font-size: 17px;
  font-weight: 600;
  fill: #2d2f29;
  paint-order: stroke;
  stroke: #f3efe3;
  stroke-width: 5px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.tzm-pin { cursor: pointer; }
.tzm-pin.is-hover .tzm-label,
.tzm-pin.is-active .tzm-label,
.tzm-pin:focus-visible .tzm-label { opacity: 1; }
.tzm-pin.is-hover .tzm-halo,
.tzm-pin.is-active .tzm-halo { opacity: 0.2; }
.tzm-pin.is-hover .tzm-dot { r: 9.5; }
.tzm-pin.is-active .tzm-dot { r: 10.5; stroke-width: 3.5; }
.tzm-pin:focus-visible { outline: none; }
.tzm-pin:focus-visible .tzm-dot { stroke: var(--focus); stroke-width: 4; }
@media (prefers-reduced-motion: reduce) {
  .tzm-label, .tzm-halo, .tzm-dot { transition: none; }
}
/* Show every label at once on a wide screen: the map is legible that way and
   hover-to-reveal is a poor default on a pointer-less device. */
@media (width >= 60rem) and (hover: hover) {
  .tzm-label { opacity: 0.9; font-size: 15px; }
}

.tzm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: var(--sp-s);
  font-size: var(--t-xs);
  color: var(--text-3);
}
.tzm-legend span { display: flex; align-items: center; gap: 0.4rem; }
.tzm-k { inline-size: 10px; block-size: 10px; border-radius: 50%; flex: none; }
.tzm-k.tzm-park { background: #3f7d23; }
.tzm-k.tzm-coast { background: #2f7f9e; }
.tzm-k.tzm-peak { background: #8a6a1c; }
.tzm-k.tzm-lake { background: #5a93ad; }
.tzm-k.tzm-town { background: #4a4b46; }

/* ---- the card that opens over the map ---- */
.tzm-card {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 20;
  inline-size: min(27rem, calc(100% - 2rem));
  max-block-size: min(84%, 40rem);
  overflow: auto;
  background: var(--surface-1, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: 0 24px 64px rgb(0 0 0 / 26%);
  opacity: 0;
  transition: opacity 220ms ease, translate 220ms ease;
}
.tzm-card[hidden] { display: none; }
.tzm-card[data-show='true'] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tzm-card { transition: none; } }

.tzm-close {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-end: 0.7rem;
  z-index: 2;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 93%);
  color: var(--ink-900, #22231f);
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
}
.tzm-close:hover { background: #fff; }
.tzm-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tzm-close svg { inline-size: 1.05rem; block-size: 1.05rem; }

.tzm-card-media { aspect-ratio: 16 / 9; overflow: hidden; }
.tzm-card-media picture { display: block; inline-size: 100%; block-size: 100%; }
.tzm-card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tzm-card-body { padding: 1.1rem 1.25rem 1.35rem; }
.tzm-kind {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.tzm-card-body h3 {
  margin: 0 0 0.6rem;
  font-family: var(--f-display, inherit);
  font-size: 1.35rem;
  line-height: 1.2;
}
.tzm-card-body h3:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tzm-blurb { margin: 0 0 1rem; font-size: var(--t-sm); line-height: 1.65; color: var(--text-2); }
.tzm-facts { margin: 0 0 1rem; display: grid; gap: 0.6rem; }
.tzm-facts > div { display: grid; gap: 0.1rem; }
.tzm-facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tzm-facts dd { margin: 0; font-size: var(--t-xs); line-height: 1.6; color: var(--text-2); }
.tzm-jh {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tzm-journeys { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.tzm-journeys li { display: grid; gap: 0.05rem; }
.tzm-journeys a { font-size: var(--t-sm); }
.tzm-journeys span { font-size: 0.68rem; color: var(--text-3); }

/* ---- the text list, which is the whole feature without JavaScript ---- */
.tzm-list-h {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.85rem;
}
.tzm-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tzm-list-note {
  margin: 1rem 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--text-3);
}
@media (width < 64rem) {
  .tzm-list-h, .tzm-list ul { justify-content: center; text-align: center; }
  .tzm-list ul { justify-content: center; }
  .tzm-list-note { text-align: center; }
}
.tzm-chip {
  font: inherit;
  font-size: var(--t-xs);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-1, #fff);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.tzm-chip:hover { border-color: var(--accent); color: var(--accent); }
.tzm-chip[aria-pressed='true'] { border-color: var(--accent); background: var(--accent); color: #fff; }
.tzm-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media print {
  .tzm-card, .tzm-chip { display: none !important; }
  .tzm-label { opacity: 1; }
}

/* ============================================ COMPACT PLANNING STEPS === */
.psteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-m);
  counter-reset: pstep;
}
.pstep {
  position: relative;
  padding: 1.15rem 1.25rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-1, #fff);
}
/* A hairline connecting the cards, so it still reads as a sequence rather
   than four unrelated boxes. Drawn only where they sit in one row. */
@media (width >= 62rem) {
  .pstep::after {
    content: '';
    position: absolute;
    inset-block-start: 2.05rem;
    inset-inline-start: 100%;
    inline-size: var(--sp-m);
    block-size: 1px;
    background: var(--line);
  }
  .pstep:last-child::after { display: none; }
}
.pstep-n {
  display: grid;
  place-items: center;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--f-display, inherit);
  font-size: 1rem;
  line-height: 1;
}
.pstep-h {
  margin: 0 0 0.4rem;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.35;
}
.pstep-p { margin: 0; font-size: var(--t-xs); line-height: 1.6; color: var(--text-2); }

.pstep-foot {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  max-width: 56rem;
  margin: var(--sp-l) auto 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-m);
  background: var(--surface-1, #fff);
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  line-height: 1.65;
  color: var(--text-2);
}
.pstep-foot > svg { inline-size: 1.1rem; block-size: 1.1rem; color: var(--accent); flex: none; margin-block-start: 0.1rem; }

/* The hovered or open pin paints above its neighbours without being moved in
   the DOM, which used to break the click. */
.tzm-pin.is-hover, .tzm-pin.is-active { isolation: isolate; }
.tzm-pin.is-hover .tzm-label, .tzm-pin.is-active .tzm-label { paint-order: stroke; stroke-width: 7px; }

/* ======================================================= JOURNAL INDEX == */
.jcats { margin-bottom: 0.75rem; }
.jcats[hidden] { display: none; }
.jcount { margin-bottom: var(--sp-m); }

.jgrid { display: grid; gap: var(--sp-m); }
@media (width >= 62rem) {
  .jgrid { grid-template-columns: 1.15fr 1fr; align-items: start; }
}
.jgrid-rest { display: grid; gap: var(--sp-s); }

.jlead, .jcard {
  display: grid;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--surface-1, #fff);
  transition: border-color 180ms ease, transform 180ms ease;
}
.jlead[hidden], .jcard[hidden] { display: none; }
.jlead:hover, .jcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.jlead:focus-visible, .jcard:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .jlead, .jcard, .jlead:hover, .jcard:hover { transform: none; }
}

.jlead-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.jlead-media picture, .jcard-media picture { display: block; inline-size: 100%; block-size: 100%; }
.jlead-media img, .jcard-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.jlead:hover .jlead-media img, .jcard:hover .jcard-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .jlead-media img, .jcard-media img { transition: none; transform: none !important; }
}
.jlead-text { display: grid; gap: 0.5rem; padding: 1.25rem 1.4rem 1.5rem; }
.jlead-tag, .jcard-tag {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.jlead-h {
  font-family: var(--f-display, inherit);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.25;
}
.jlead-p { font-size: var(--t-sm); line-height: 1.65; color: var(--text-2); }
.jlead-go {
  margin-top: 0.2rem;
  font-size: var(--t-xs);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.jlead-go svg { inline-size: 0.85em; block-size: 0.85em; }

/* The five secondary cards are a compact picture-beside-text row. */
.jcard { grid-template-columns: 9.5rem 1fr; align-items: stretch; }
.jcard-media { display: block; block-size: 100%; overflow: hidden; }
.jcard-text { display: grid; gap: 0.3rem; align-content: center; padding: 0.9rem 1.1rem; }
.jcard-h { font-family: var(--f-display, inherit); font-size: 1.02rem; line-height: 1.3; }
.jcard-p {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (width < 34rem) {
  .jcard { grid-template-columns: 1fr; }
  .jcard-media { aspect-ratio: 16 / 9; }
}

/* Planned, not published: chips rather than a table pretending to be data. */
.jsoon {
  list-style: none;
  margin: var(--sp-m) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.5rem;
}
.jsoon li {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.95rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-m);
}
.jsoon-t { font-size: var(--t-xs); color: var(--text-2); line-height: 1.45; }
.jsoon-c {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ============================================================= BADGES ==
   Three credentials Montero does not hold, shown so the gaps are visible.
   The unverified state is deliberately loud: a dashed outline, a muted
   palette and the word itself. Nobody should be able to glance at one and
   read it as a credential. */
.bdgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-m);
  margin-top: var(--sp-m);
}
.bdg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-m);
  border: 2px dashed var(--line);
  background: var(--surface-2, #faf9f6);
}
.bdg[data-state='verified'] {
  border-style: solid;
  border-color: var(--accent);
  background: var(--surface-1, #fff);
}
.bdg-mark {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 50%;
  background: #e6e4dd;
  color: #7c7f74;
}
.bdg[data-state='verified'] .bdg-mark { background: var(--accent); color: #fff; }
.bdg-mark svg { inline-size: 1.25rem; block-size: 1.25rem; }
.bdg-body { min-inline-size: 0; }
.bdg-title { margin: 0; font-weight: 600; font-size: var(--t-sm); line-height: 1.3; }
.bdg-state {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.12em 0.5em;
  border-radius: var(--r-s);
  background: #e6e4dd;
  color: #6a6d62;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bdg[data-state='verified'] .bdg-state { background: var(--accent); color: #fff; }
.bdg-claim { margin: 0.7rem 0 0.4rem; font-size: var(--t-xs); color: var(--text-2); line-height: 1.55; }
.bdg-blocked, .bdg-needs { margin: 0 0 0.4rem; font-size: var(--t-xs); color: var(--text-3); line-height: 1.6; }
.bdg-needs { margin-bottom: 0; }

/* The footer variant: the same three, without the explanation. */
.footer-badges { grid-column: 1 / -1; margin-top: var(--sp-l); padding-top: var(--sp-m); border-top: 1px solid var(--border-dark, rgb(255 255 255 / 14%)); }
.footer-badges-h {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-2, var(--text-3));
}
.bdgs-compact { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.bdgs-compact .bdg {
  padding: 0.7rem 0.85rem;
  gap: 0.65rem;
  background: rgb(255 255 255 / 5%);
  border-color: rgb(255 255 255 / 26%);
}
.bdgs-compact .bdg-mark { inline-size: 2rem; block-size: 2rem; background: rgb(255 255 255 / 12%); color: var(--on-dark-2, #cfcac1); }
.bdgs-compact .bdg-mark svg { inline-size: 1rem; block-size: 1rem; }
.bdgs-compact .bdg-title { color: var(--on-dark-1, #fff); font-size: var(--t-xs); }
.bdgs-compact .bdg-state { background: rgb(255 255 255 / 14%); color: #e3dfd6; }
.footer-badges-note {
  margin: 0.9rem 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--on-dark-2, var(--text-3));
  max-width: 78ch;
}