/* ============================================================================
   pages.css — the large compositions: hero, chapters, journeys, map, access
   matrix, quote, enquiry.
   ========================================================================= */

/* ================================================================== MEDIA */
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar, 3 / 2);
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  border-radius: var(--r-l);
}
.media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}
.media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(5 8 12 / 10%) 0%,
    rgb(5 8 12 / 25%) 42%,
    rgb(5 8 12 / 82%) 100%
  );
}
.media-scrim-l {
  background: linear-gradient(
    96deg,
    rgb(5 8 12 / 88%) 0%,
    rgb(5 8 12 / 62%) 38%,
    rgb(5 8 12 / 18%) 72%,
    rgb(5 8 12 / 35%) 100%
  );
}
.media-flat { border-radius: 0; }

/* A caption that credits the photographer, always available but quiet. */
.media-credit {
  position: absolute;
  inset: auto 0 0 auto;
  z-index: 3;
  padding: 0.35rem 0.7rem;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 72%);
  background: rgb(0 0 0 / 42%);
  border-top-left-radius: var(--r-s);
  text-decoration: none;
}
.media-credit:hover { color: #fff; background: rgb(0 0 0 / 70%); }

/* =================================================================== HERO */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  /* clear the fixed header */
  padding-block: calc(var(--header-h) + var(--sp-xl)) var(--sp-xl);
}
.hero-media {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.hero-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 45%);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(5 8 12 / 62%) 0%, rgb(5 8 12 / 18%) 30%, rgb(5 8 12 / 55%) 66%, var(--surface-0) 100%),
    linear-gradient(92deg, rgb(5 8 12 / 72%) 0%, rgb(5 8 12 / 22%) 55%, transparent 100%);
}
:root[data-theme='light'] .hero-scrim {
  background:
    linear-gradient(180deg, rgb(10 12 16 / 55%) 0%, rgb(10 12 16 / 22%) 32%, rgb(245 241 232 / 55%) 76%, var(--surface-0) 100%),
    linear-gradient(92deg, rgb(10 12 16 / 60%) 0%, rgb(10 12 16 / 15%) 58%, transparent 100%);
}

/* The hero sits on photography in both themes, so its text is always the
   light-on-dark pairing regardless of the page theme. */
.hero-inner { position: relative; z-index: 1; color: #f4efe6; }
:root[data-theme='light'] .hero-inner .lede { color: #e4ddd0; }
:root[data-theme='light'] .hero-inner .eyebrow { color: #e3c489; }

.hero-title {
  font-size: var(--t-4xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin-block: var(--sp-m) var(--sp-m);
  text-shadow: 0 2px 40px rgb(0 0 0 / 45%);
}
.hero-lede { max-width: 48ch; font-size: var(--t-md); color: #ddd5c6; }

.hero-foot {
  margin-top: var(--sp-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-m) var(--sp-xl);
  justify-content: space-between;
}

/* The three assurances under the hero CTA */
.hero-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-l);
  padding-top: var(--sp-m);
  border-top: 1px solid rgb(255 255 255 / 18%);
  margin-top: var(--sp-l);
}
.hero-mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ded6c8;
}
.hero-mark svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--brand-teal-400); flex: none; }

/* ============================================================== CHAPTERS */
.chapter { position: relative; padding-block: var(--section-y); }
.chapter-head {
  display: grid;
  gap: var(--sp-m);
  margin-bottom: var(--sp-xl);
}
@media (width >= 60rem) {
  .chapter-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--sp-2xl);
    align-items: end;
  }
}
.chapter-num {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  letter-spacing: var(--track-widest);
  color: var(--gold);
}

/* Split layout: text one side, image the other, alternating */
.split-row {
  display: grid;
  gap: var(--sp-l);
  align-items: center;
}
@media (width >= 62rem) {
  .split-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 6vw, 6rem);
  }
  .split-row[data-flip='true'] > :first-child { order: 2; }
}

/* ============================================================ STAT STRIP */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}
@media (width >= 56rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--surface-0);
  padding: var(--sp-l) var(--sp-m);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: background-color var(--d-base) var(--e-soft);
}
.stat:hover { background: var(--surface-1); }
.stat b {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}
.stat span { font-size: var(--t-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-3); }
.stat small { font-size: var(--t-xs); color: var(--text-2); line-height: 1.5; }

/* ============================================================== JOURNEYS */
.journey-grid {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.journey-card .card-media { --card-ar: 4 / 3; }
.journey-price {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--text-1);
}
.journey-price small {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

/* The access badges on a journey card */
.access-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.access-mark {
  display: inline-grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
}
.access-mark svg { inline-size: 18px; block-size: 18px; }
.access-mark[data-level='full'] {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.access-mark[data-level='partial'] {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
}

/* ========================================================= FILTER TOOLBAR */
.filter-bar {
  position: sticky;
  top: calc(var(--header-h) + 0.5rem);
  z-index: var(--z-sticky);
  padding: var(--sp-s);
  border-radius: var(--r-l);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-1);
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-soft),
              color var(--d-fast) var(--e-soft),
              border-color var(--d-fast) var(--e-soft);
}
.filter-chip svg { inline-size: 1.05em; block-size: 1.05em; }
.filter-chip:hover { border-color: var(--accent); color: var(--text-1); }
.filter-chip[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Cards hidden by the filter are removed from the flow AND from the a11y
   tree, so a screen reader is never told about a journey it cannot see. */
.journey-card[hidden] { display: none; }

/* ================================================================== MAP */
.map-wrap {
  position: relative;
  display: grid;
  gap: var(--sp-l);
}
@media (width >= 64rem) {
  .map-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
}
.map-svg { inline-size: 100%; block-size: auto; overflow: visible; }
.map-land {
  fill: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
  stroke: var(--line-strong);
  stroke-width: 1.2;
}
.map-route {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  opacity: 0.75;
}
.map-pin {
  cursor: pointer;
  transition: scale var(--d-base) var(--e-spring);
  transform-box: fill-box;
  transform-origin: center;
}
.map-pin circle { transition: fill var(--d-base) var(--e-soft), r var(--d-base) var(--e-spring); }
.map-pin:hover,
.map-pin:focus-visible { scale: 1.18; }
.map-pin[aria-pressed='true'] circle.dot { fill: var(--gold); }
.map-pin .halo {
  fill: var(--accent);
  opacity: 0.22;
  animation: pin-pulse 3s var(--e-soft) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.map-pin:nth-of-type(2n) .halo { animation-delay: 0.6s; }
.map-pin:nth-of-type(3n) .halo { animation-delay: 1.2s; }
@keyframes pin-pulse {
  0%   { scale: 0.7; opacity: 0.35; }
  70%  { scale: 1.9; opacity: 0; }
  100% { scale: 1.9; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin .halo { animation: none; opacity: 0.25; }
}
:root[data-motion='off'] .map-pin .halo { animation: none; opacity: 0.25; }

.map-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--text-2);
  pointer-events: none;
}

.map-detail {
  padding: var(--sp-m);
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  background: var(--surface-1);
  min-block-size: 16rem;
}
.map-detail h3 { font-size: var(--t-lg); margin-bottom: 0.4rem; }

/* ========================================================= ACCESS MATRIX
   An honest, detailed table. Never "accessible: yes/no" — the detail is
   the point, because a 1:12 ramp and a 90 cm doorway are different problems.
   ======================================================================= */
.matrix-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-1);
  /* a focusable scroll container is reachable by keyboard */
  scrollbar-gutter: stable;
}
.matrix-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
table.matrix {
  inline-size: 100%;
  border-collapse: collapse;
  min-inline-size: 46rem;
  font-size: var(--t-sm);
}
.matrix caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-m) var(--sp-m) 0;
  color: var(--text-2);
  font-size: var(--t-sm);
}
.matrix th,
.matrix td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.matrix thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  z-index: 1;
}
.matrix tbody th {
  font-weight: 650;
  color: var(--text-1);
  font-size: var(--t-sm);
}
.matrix tbody tr:hover { background: var(--surface-2); }
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: 0; }

/* Status is never colour alone — each carries a glyph and a word. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 650;
  white-space: nowrap;
}
.status svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }
.status[data-s='yes'] { color: var(--success); }
.status[data-s='part'] { color: var(--gold); }
.status[data-s='no'] { color: var(--text-3); }

/* ================================================================= QUOTE */
.quote-block {
  position: relative;
  padding: var(--sp-xl) var(--sp-m);
  text-align: center;
}
.quote-mark {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 0.6;
  color: var(--accent);
  opacity: 0.22;
  display: block;
  margin-bottom: -0.1em;
}
.quote-text {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-style: italic;
  line-height: 1.32;
  max-width: 24ch;
  margin-inline: auto;
}
.quote-by {
  margin-top: var(--sp-m);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--text-3);
}

/* ========================================================== TESTIMONIALS */
.car {
  position: relative;
  display: grid;
  gap: var(--sp-m);
}
.car-stage { position: relative; display: grid; }
.car-slide {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 1.2rem;
  visibility: hidden;
  transition: opacity var(--d-slow) var(--e-soft),
              translate var(--d-slow) var(--e-out),
              visibility 0s linear var(--d-slow);
}
.car-slide[data-active='true'] {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition-delay: 0s;
}
.car-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}
.car-dots { display: flex; gap: 0.4rem; align-items: center; }
.car-dot {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: none;
}
.car-dot::before {
  content: '';
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: background-color var(--d-fast) var(--e-soft),
              scale var(--d-fast) var(--e-spring);
}
.car-dot[aria-current='true']::before {
  background: var(--accent);
  border-color: var(--accent);
  scale: 1.35;
}

/* ============================================================== GALLERY */
.gal {
  display: flex;
  gap: var(--sp-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 0.5rem var(--sp-s);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
  cursor: grab;
}
.gal[data-dragging] { cursor: grabbing; scroll-snap-type: none; }
.gal::-webkit-scrollbar { height: 6px; }
.gal::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.gal-item {
  flex: 0 0 auto;
  inline-size: min(78vw, 25rem);
  scroll-snap-align: center;
}
.gal-item figure { margin: 0; display: grid; gap: 0.7rem; }
.gal-item figcaption { font-size: var(--t-xs); color: var(--text-3); }
.gal-item .media { border-radius: var(--r-m); }

/* ================================================================ RIBBON */
.ribbon {
  padding-block: var(--sp-m);
  border-block: 1px solid var(--line);
  background: var(--surface-1);
  overflow: hidden;
}
.ribbon li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--text-2);
  white-space: nowrap;
}
.ribbon li svg { inline-size: 1rem; block-size: 1rem; color: var(--accent); flex: none; }

/* ================================================================= STEPS */
.steps { counter-reset: step; display: grid; gap: var(--sp-m); }
.step {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding: var(--sp-m) var(--sp-m) var(--sp-m) calc(var(--sp-xl) + 0.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-1);
  counter-increment: step;
  transition: border-color var(--d-base) var(--e-soft), translate var(--d-base) var(--e-out);
}
.step:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); translate: 0 -3px; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset: var(--sp-m) auto auto var(--sp-m);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--accent);
  line-height: 1;
}
.step h3 { font-size: var(--t-md); }

/* ============================================================== ENQUIRY */
.enq-grid { display: grid; gap: var(--sp-xl); }
@media (width >= 66rem) {
  .enq-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--sp-2xl); align-items: start; }
  .enq-aside { position: sticky; top: calc(var(--header-h) + var(--sp-m)); }
}
.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-xl);
  display: grid;
  gap: var(--sp-m);
}
.fieldset > legend {
  padding: 0;
  margin-bottom: var(--sp-xs);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--text-1);
}
.legend-note {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--text-2);
  display: block;
  margin-top: 0.3rem;
  max-width: var(--measure);
  line-height: 1.6;
}
.two-col { display: grid; gap: var(--sp-m); }
/* Grid items default to min-width:auto, so a child that cannot shrink below its
   content — table.matrix carries min-inline-size: 46rem — pushes the column
   wider than the viewport and the whole document scrolls sideways. */
.two-col > * { min-inline-size: 0; }
@media (width >= 44rem) { .two-col { grid-template-columns: 1fr 1fr; } }

.form-done {
  display: none;
  padding: var(--sp-l);
  border-radius: var(--r-l);
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
}
.form-done[data-show='true'] { display: block; }

/* =============================================================== PRIDE */
.fact-grid { display: grid; gap: var(--sp-m); }
@media (width >= 54rem) { .fact-grid { grid-template-columns: repeat(2, 1fr); } }
.fact {
  padding: var(--sp-m);
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  background: var(--surface-1);
  display: grid;
  gap: 0.55rem;
  align-content: start;
}
.fact h3 { font-family: var(--font-ui); font-size: var(--t-base); font-weight: 700; }
.fact p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.65; }
.fact-i {
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
}
.fact-i svg { inline-size: 21px; block-size: 21px; }

/* A band carrying the spectrum, used once per page at most. */
.pride-band {
  position: relative;
  padding-block: var(--sp-2xl);
  background: var(--surface-1);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.pride-band::before,
.pride-band::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  block-size: 3px;
  background: var(--spectrum);
}
.pride-band::before { inset-block-start: 0; }
.pride-band::after { inset-block-end: 0; }

/* ============================================================== CREDITS */
.credit-grid {
  display: grid;
  gap: var(--sp-s);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.credit-item {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-1);
  font-size: var(--t-xs);
  color: var(--text-2);
}
.credit-item .media { border-radius: var(--r-s); }
.credit-item a { color: var(--accent); }
.credit-item b { color: var(--text-1); font-size: var(--t-sm); }

/* ============================================================= LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-s);
  padding: var(--sp-s);
  background: rgb(4 6 9 / 94%);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-soft), visibility 0s linear var(--d-base);
}
.lightbox[data-open='true'] { opacity: 1; visibility: visible; transition-delay: 0s; }
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  color: #e8e2d6;
}
.lb-stage { display: grid; place-items: center; min-block-size: 0; }
.lb-img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--r-m);
}
.lb-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-m);
  color: #cfc8ba;
  font-size: var(--t-sm);
  text-align: center;
}
.lb-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 28%);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-soft), scale var(--d-fast) var(--e-spring);
}
.lb-btn:hover { background: rgb(255 255 255 / 14%); scale: 1.06; }
.lb-btn svg { inline-size: 22px; block-size: 22px; }

/* ============================================================ PAGE HEAD */
.page-head {
  position: relative;
  padding-block: var(--sp-2xl);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-head .aurora { --aurora-op: 0.42; }
.page-head-inner { position: relative; z-index: 1; }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-m);
}
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs li { display: flex; align-items: center; gap: 0.4rem; }
.crumbs li + li::before { content: '/'; opacity: 0.5; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; list-style: none; padding: 0; margin: 0; }

/* ============================================================== CTA BAND */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-3xl);
  text-align: center;
  isolation: isolate;
}
.cta-band .hero-media { inset: 0; }
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--surface-0) 0%, rgb(5 8 12 / 72%) 38%, rgb(5 8 12 / 78%) 62%, var(--surface-0) 100%);
}
.cta-band .cta-inner { position: relative; z-index: 1; color: #f4efe6; }
.cta-band .cta-inner .lede { color: #ddd5c6; }

/* ===========================================================================
   JOURNEY BOOKING FURNITURE
   Modelled on the reference's tour page: a sticky card beside the hero facts,
   a seasons x group-size price matrix, and a jump nav under the head.
   =========================================================================== */

.booking-layout { display: grid; gap: var(--sp-l); align-items: start; }
@media (width >= 62rem) {
  .booking-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
}
.booking-main { min-inline-size: 0; }

.booking-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-1);
  box-shadow: var(--shadow-m);
  padding: var(--sp-m);
  display: grid;
  gap: var(--sp-s);
}
@media (width >= 62rem) {
  /* sticks below the header, which is why scroll-padding-top exists site-wide */
  .booking-card { position: sticky; inset-block-start: 6.5rem; }
}

.bk-facts { display: grid; gap: 0.6rem; margin: 0; }
.bk-facts > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.5rem;
  padding-block-end: 0.6rem;
  border-block-end: 1px solid var(--line);
}
.bk-facts > div:last-child { border-block-end: 0; padding-block-end: 0; }
.bk-facts dt { font-size: var(--t-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.bk-facts dd { margin: 0; font-size: var(--t-sm); color: var(--text-1); font-weight: 600; }

.bk-price { display: grid; gap: 0.1rem; padding-block: 0.35rem; }
.bk-price > span { font-size: var(--t-xs); color: var(--text-3); }
.bk-price > b { font-size: var(--t-xl); font-weight: 800; color: var(--text-1); font-variant-numeric: lining-nums tabular-nums; line-height: 1.1; }
.bk-price > small { font-size: var(--t-xs); color: var(--text-3); line-height: 1.4; }

.bk-alt { display: inline-block; font-size: var(--t-sm); font-weight: 600; text-align: center; }
.bk-note { font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; margin: 0; }

/* --- the seasons x group-size matrix ------------------------------------ */
.pricematrix th[scope='row'] { display: grid; gap: 0.1rem; min-inline-size: 11rem; }
.pm-season { font-weight: 750; display: inline-flex; align-items: center; gap: 0.4rem; }
.pm-season::before {
  content: '';
  inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%;
  background: var(--gold);
}
.pm-season[data-s='shoulder']::before { background: var(--accent); }
.pm-season[data-s='green']::before { background: var(--text-3); }
.pm-months { font-size: var(--t-xs); color: var(--text-3); font-weight: 400; }
.pricematrix td { text-align: center; }
.pricematrix td b { display: block; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; }
.pm-note { display: block; font-size: var(--t-xs); color: var(--text-3); }
.pm-req { font-size: var(--t-sm); color: var(--text-3); }
.pm-foot { margin-block-start: 1rem; font-size: var(--t-sm); color: var(--on-dark-2); max-inline-size: 70ch; }

/* --- in-page jump nav ---------------------------------------------------- */
.jump {
  position: sticky;
  inset-block-start: var(--header-h, 4.5rem);
  z-index: 20;
  background: var(--surface-1);
  border-block: 1px solid var(--line);
}
.jump ul {
  display: flex;
  gap: 0.25rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
  max-inline-size: var(--maxw);
  overflow-x: auto;
  scrollbar-width: thin;
}
.jump a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 0.85rem;
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  border-block-end: 2px solid transparent;
}
.jump a:hover { color: var(--accent); border-block-end-color: var(--accent); }

/* The matrix sits inside .band-navy, which sets white text for the section.
   The table has its own white background, so that cascade made the one real
   figure white-on-white and only the grey "On request" cells were legible. */
.band-navy .pricematrix,
.band-navy .pricematrix th,
.band-navy .pricematrix td { color: var(--text-1); }
.band-navy .pricematrix thead th { color: var(--text-2); }
.band-navy .pricematrix .pm-months,
.band-navy .pricematrix .pm-req,
.band-navy .pricematrix .pm-note { color: var(--text-3); }

/* ===========================================================================
   THE PLANNER  (plan-your-trip.html)
   Seven fieldsets. Without JavaScript they are all visible and the form is one
   long page; planner.js hides all but one and reveals the progress bar.
   =========================================================================== */

.planner-progress { margin-block-end: var(--sp-l); }
.planner-progress-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-s); flex-wrap: wrap; margin-block-end: 0.6rem;
}
.mono-step { font-size: var(--t-sm); color: var(--text-3); margin: 0; }
.mono-step b { color: var(--text-1); font-weight: 750; }
.planner-time {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--t-xs); color: var(--text-3); margin: 0;
}
.planner-time svg { inline-size: 0.95em; block-size: 0.95em; }

.planner-bar { block-size: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.planner-bar > i {
  display: block; block-size: 100%; inline-size: var(--pct, 14%);
  background: var(--accent); border-radius: 2px;
  transition: inline-size var(--d-base) var(--e-out);
}
@media (prefers-reduced-motion: reduce) { .planner-bar > i { transition: none; } }

/* --- step 1: image cards ------------------------------------------------- */
.pick-grid {
  display: grid; gap: var(--sp-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.pick-card { position: relative; display: grid; cursor: pointer; }
/* The input is visually hidden but still focusable, so the ring lands on the
   card via :focus-within rather than disappearing with it. */
.pick-card input {
  position: absolute; inline-size: 1px; block-size: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.pick-media {
  display: block; aspect-ratio: 3 / 2; border-radius: var(--r-m);
  overflow: hidden; border: 2px solid var(--line); background: var(--surface-2);
  transition: border-color var(--d-fast) var(--e-out);
}
.pick-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pick-label {
  display: block; margin-block-start: 0.5rem;
  font-size: var(--t-sm); font-weight: 700; text-align: center; color: var(--text-1);
}
.pick-tick {
  position: absolute; inset-block-start: 0.45rem; inset-inline-end: 0.45rem;
  inline-size: 26px; block-size: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  opacity: 0; scale: 0.7;
  transition: opacity var(--d-fast) var(--e-out), scale var(--d-fast) var(--e-out);
}
.pick-tick svg { inline-size: 15px; block-size: 15px; }
.pick-card:hover .pick-media { border-color: var(--line-strong); }
.pick-card input:checked ~ .pick-media { border-color: var(--accent); }
.pick-card input:checked ~ .pick-tick { opacity: 1; scale: 1; }
.pick-card input:focus-visible ~ .pick-media { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pick-tick { transition: none; } }

/* The tick is colour plus a mark, never colour alone. */
.pick-card input:checked ~ .pick-label::after {
  content: ' \2014 chosen'; font-weight: 400; color: var(--accent);
}

.opt-ico {
  inline-size: 1.05em; block-size: 1.05em;
  margin-inline-end: 0.45rem; vertical-align: -0.15em; color: var(--accent);
}
.hint-inline { font-weight: 400; color: var(--text-3); font-size: var(--t-xs); }

/* --- step nav ------------------------------------------------------------ */
.planner-nav {
  display: flex; gap: var(--sp-s); flex-wrap: wrap;
  margin-block-start: var(--sp-l);
}
.planner-nav .btn-primary { margin-inline-start: auto; }
.planner-foot {
  margin-block-start: var(--sp-s);
  font-size: var(--t-xs); color: var(--text-3);
}

/* `[hidden]` is a user-agent rule, so any author `display` on .fieldset beats
   it and every "hidden" step still rendered. The wizard showed all seven at
   once with JavaScript running. */
.step-panel[hidden] { display: none; }

/* <picture> is inline and auto-height, so block-size:100% on the <img> inside
   resolved to auto and the photograph sat at natural height in a 3:2 box —
   the same trap as the trip cards. */
.pick-media picture { display: block; inline-size: 100%; block-size: 100%; }

/* Same trap as the step panels: .btn sets display:inline-flex, which beats the
   user-agent [hidden] rule, so Back and "Send my plan" were both visible on
   step one. */
.planner-nav .btn[hidden],
.planner-progress[hidden] { display: none; }

/* ==========================================================================
   JOURNEY DETAIL ADDITIONS — guide section 8.3
   The upgrades block reuses .certs; the three pieces below are new.
   ========================================================================== */

.eyebrow-line {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------------ FAQs --
   <details> rather than a scripted accordion: it opens with no JavaScript,
   is keyboard-reachable for free, and the browser's own in-page find can
   search inside a closed one in current engines. */
.faqs { display: grid; gap: 0.6rem; }
.faq {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-1, #fff);
}
.faq > summary {
  cursor: pointer;
  padding: 1rem 1.1rem;
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.5;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: '+';
  margin-inline-start: auto;
  font-size: 1.15em;
  line-height: 1;
  color: var(--accent);
  flex: none;
}
.faq[open] > summary::after { content: '\2212'; }
.faq > summary:hover { color: var(--accent); }
.faq > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.faq-a { padding: 0 1.1rem 1.1rem; }
.faq-a p { margin: 0; font-size: var(--t-sm); line-height: 1.65; color: var(--text-2); }

/* -------------------------------------------------------- related journeys */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-m);
  margin-top: 2rem;
}
.rel-card {
  display: grid;
  gap: 0.3rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  text-decoration: none;
  color: inherit;
  background: var(--surface-1, #fff);
  transition: border-color 180ms ease, transform 180ms ease;
}
.rel-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.rel-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rel-cat {
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.rel-name { font-family: var(--f-display, inherit); font-size: 1.1rem; line-height: 1.25; }
.rel-meta { font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; }

.rel-guides {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-m) var(--sp-l);
}
.rel-h {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.6rem;
}
.rel-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.rel-links a { font-size: var(--t-sm); }

/* ==========================================================================
   HOME — EXPLORE BY EXPERIENCE (guide section 8.1 item 5)
   ========================================================================== */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-m);
}
.exp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 15rem;
  padding: var(--sp-m);
  border-radius: var(--r-l);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: #fff;
}
.exp-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.exp-media { position: absolute; inset: 0; z-index: -2; display: block; }
.exp-media picture { display: block; inline-size: 100%; block-size: 100%; }
.exp-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.exp-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(12 14 16 / 86%) 0%, rgb(12 14 16 / 38%) 48%, rgb(12 14 16 / 12%) 100%);
}
.exp-text { display: grid; gap: 0.4rem; }
.exp-h { font-family: var(--f-display, inherit); font-size: 1.3rem; line-height: 1.2; }
.exp-p {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: #e8e5df;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.exp-go { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 0.4rem; }
.exp-go svg { inline-size: 0.9em; block-size: 0.9em; }
.exp-tile:hover .exp-go { color: var(--gold); }
/* The whole tile scales its own image rather than the text, so the label
   stays sharp while the photograph moves. */
.exp-tile:hover .exp-media img { transform: scale(1.04); }
.exp-media img { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .exp-media img { transition: none; }
  .exp-tile:hover .exp-media img { transform: none; }
}

/* ==========================================================================
   HOME — FOUNDER LETTER (guide section 8.1 item 9)
   ========================================================================== */
#founder { position: relative; isolation: isolate; overflow: hidden; }
.founder-media { position: absolute; inset: 0; z-index: -2; }
.founder-media picture { display: block; inline-size: 100%; block-size: 100%; }
.founder-media img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.22; }
.founder-card {
  max-width: 44rem;
  margin-inline: auto;
  text-align: left;
}
.founder-card p { color: var(--on-dark-2); line-height: 1.7; }
.founder-card .sec-title { color: var(--on-dark-1); }
.founder-card .eyebrow {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}
.founder-sign { margin-top: 1.5rem; color: var(--on-dark-1) !important; font-weight: 600; }
.founder-sign span { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--on-dark-2); margin-top: 0.2rem; }
.btn-on-dark { color: var(--on-dark-1); border-color: rgb(255 255 255 / 45%); }
.btn-on-dark:hover { border-color: var(--gold); color: var(--gold); }

/* ==========================================================================
   HOME — ACCESSIBLE TRAVEL FEATURE (guide section 8.1 item 10)
   ========================================================================== */
.two-col-media { align-items: center; }
.two-col-media .media { border-radius: var(--r-l); overflow: hidden; }
.two-col-media .media picture { display: block; inline-size: 100%; block-size: 100%; }

/* ==========================================================================
   ARTICLE TEMPLATE — guide section 8.9
   Author, dates, reading time, table of contents, key-facts box, captions,
   sources. All of it inside .measure so the line length stays readable.
   ========================================================================== */
.art-meta {
  max-width: var(--measure, 38rem);
  margin-inline: auto;
  display: grid;
  gap: 0.35rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.art-by { margin: 0; font-weight: 600; font-size: var(--t-sm); }
.art-dates { margin: 0; font-size: var(--t-xs); color: var(--text-3); }
.art-draft {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.75rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--r-m);
  background: var(--warn-bg, #fdf6e8);
  border: 1px solid var(--warn-line, #e8d7ab);
  font-size: var(--t-xs);
  line-height: 1.6;
}
.art-draft svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; margin-block-start: 0.1em; color: var(--warn-ink, #8a6a1c); }

.art-caption {
  max-width: var(--measure, 38rem);
  margin: -1rem auto 2rem;
  font-size: var(--t-xs);
  color: var(--text-3);
  line-height: 1.6;
  font-style: italic;
}

.art-toc {
  max-width: var(--measure, 38rem);
  margin: 2rem auto;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2, #faf9f6);
}
.art-toc-h {
  margin: 0 0 0.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.art-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.art-toc a { font-size: var(--t-sm); }

.keyfacts {
  max-width: var(--measure, 38rem);
  margin: 2rem auto;
  padding: 1.25rem 1.4rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--surface-2, #faf9f6);
}
.keyfacts-h {
  margin: 0 0 0.85rem;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.keyfacts-list { margin: 0; display: grid; gap: 0.6rem; }
.keyfacts-list > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.25rem 1rem; }
.keyfacts-list dt { font-weight: 600; font-size: var(--t-sm); }
.keyfacts-list dd { margin: 0; font-size: var(--t-sm); color: var(--text-2); line-height: 1.55; }
@media (width < 36rem) {
  .keyfacts-list > div { grid-template-columns: 1fr; }
}

/* Article prose. The body comes out of a Python builder as a flat run of
   h2 and p, so it is styled by element inside the article sections rather
   than by a class on every paragraph. */
.art-h2 {
  max-width: var(--measure, 38rem);
  margin: 2.75rem auto 1rem;
  font-family: var(--f-display, inherit);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  line-height: 1.25;
  scroll-margin-top: 6rem;
}
.art-h2 + p,
.art-h2 ~ p,
.art-h2 ~ .matrix-scroll {
  max-width: var(--measure, 38rem);
  margin-inline: auto;
}
.art-h2 ~ p { margin-block: 0 1rem; line-height: 1.75; }
.art-h2 ~ .matrix-scroll { max-width: none; margin-block: 1.5rem; }

/* "subject to confirmation", wherever a fact has not been confirmed yet.
   Quieter than the sentence it sits in, because it is a qualifier and not
   a warning — but not so quiet that it reads as decoration. It replaced a
   bare "(CONFIRM)", which was a note to Benny printed at visitors. */
/* The sentence that has to sit near a struck-through price. The home
   page has its own version of this as .rail-price-note, scoped to
   .home-page; this is the same treatment for every other page that shows
   a discounted figure, so the two read as one site. */
.price-note {
  max-width: var(--measure);
  margin: 0 auto 2rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sun-300);
  border-radius: 6px;
  background: var(--powder-100, var(--surface-2));
  color: var(--text-2);
  font-size: var(--t-xs);
  line-height: 1.6;
  text-align: start;
}

.confirm-flag {
  font-style: italic;
  color: var(--text-3);
  white-space: nowrap;
}

/* The reference a visitor is given when an enquiry is sent. It is the one
   thing on that panel they have to keep, so it is set like something to
   keep rather than like a confirmation number in small print. */
.form-ref {
  margin: 1.1rem 0 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--surface-2, #faf9f6);
}
.form-ref-label {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.form-ref-code {
  margin: 0.25rem 0 0.75rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  /* Selectable in one go: somebody will double-click this to copy it. */
  user-select: all;
}
.form-ref-help {
  margin: 0.75rem 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--text-2);
}

/* The article column.
   Named art-flow, not article: .article is already the journal index’s
   card component, with its own grid and its own h3 and p sizes.
   Alignment is structural rather than restated on every element: one rule
   gives everything in the flow the same width and the same two edges, and
   the exceptions name themselves. Before this, each piece carried its own
   max-width and they silently disagreed. */
.art-flow > * {
  max-width: var(--measure);
  margin-inline: auto;
}
/* A table needs room, and a reader expects to find it outside the column
   rather than squeezed into it. */
.art-flow > .matrix-scroll,
.art-flow > .art-wide {
  max-width: none;
}
/* A figure sits in the column with its caption, as one object. The caption
   used to be set at its own measure, which at 13px was 531px against the
   text's 705px, so it hung in from the left for no reason. */
.art-flow > .media { margin-block: 2rem 0.9rem; }
.art-flow > .art-caption { margin-block: 0 2.25rem; }

/* A short list of onward links where a page would otherwise be a dead
   end. Set at the reading measure like everything else in a column. */
.link-list {
  max-width: var(--measure);
  margin: 1.25rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.65rem;
}
.link-list li { font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); }
.link-list a { font-weight: 650; }

.src-list { margin: 1.25rem 0 0; padding-left: 1.15rem; display: grid; gap: 0.5rem; }
.src-list li { font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); }

/* The journal index uses a wider card than the related-journeys grid. */
.rel-grid-wide { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.rel-card-wide {
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-1, #fff);
}
.rel-card-wide .rel-name { margin: 0; font-weight: 500; }
.rel-card-wide .rel-name a { text-decoration: none; color: inherit; }
.rel-card-wide .rel-name a:hover { color: var(--accent); }
.rel-card-wide .rel-meta { font-size: var(--t-sm); color: var(--text-2); }

/* ------------------------------------------------------------ site index --
   search.html is a hand-ordered index rather than a search engine, so it is
   a set of plain link lists with a section icon per group. */
.idx-h { display: flex; align-items: center; gap: 0.6rem; }
.idx-i { inline-size: 1.1em; block-size: 1.1em; color: var(--accent); flex: none; }
.idx-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  columns: 18rem;
  column-gap: var(--sp-l);
}
.idx-list li { margin-bottom: 0.45rem; break-inside: avoid; font-size: var(--t-sm); }

/* The booking card's "on request" variant. Same block, no figure. */
.bk-price-req > b { font-size: 1.35rem; }
.bk-price-req > small { color: var(--text-3); }