/* layout utilities — shared */
.fx { display: flex; }
.col { display: flex; flex-direction: column; }
.grid { display: grid; }
.ac { align-items: center; }
.jc { justify-content: center; }
.jb { justify-content: space-between; }
.f1 { flex: 1 1 0%; }
.noshrink { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fs11 { font-size: 11px; }
.fs12 { font-size: 12px; }
.fs13 { font-size: 13px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs20 { font-size: 20px; }
.fs22 { font-size: 22px; }
.upper { text-transform: uppercase; }
.tc { text-align: center; }
.nowrap { white-space: nowrap; }
.gap8 { gap: 8px; }
.gap10 { gap: 10px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }
.gap24 { gap: 24px; }
.m0 { margin: 0px; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; }
.mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; }
.posrel { position: relative; }
.posabs { position: absolute; }
.round { border-radius: 50%; }
.ohide { overflow: hidden; }
.bbox { box-sizing: border-box; }
.pointer { cursor: pointer; }
.w100 { width: 100%; }
.b0 { border: none; }

/* The hub pages' own sheet clips the page box; the Pages-bundle ones do not,
   so the section nav's scroller leaked into the document and the price page
   could be dragged sideways on a phone. A media query, not a container query:
   #top is the container's ancestor, and a container query cannot reach up.
   `clip` rather than `hidden` — hidden would make these a scroll container and
   the sticky nav inside would stop sticking. */
@media (max-width: 700px) {
  html, body, #top, #top > div { overflow-x: clip; }
}
/* appended-on-every-page fragments (mobile menu, back-to-top) */
[hidden] { display: none !important; }
/* the row card layout sets `tr { display: block !important }` inside a container
   query, which outranks [hidden] — so hidden rows need the more specific rule */
[data-r~="cards"] tr[hidden], tr[hidden], [data-card-family][hidden] { display: none !important; }
/* Hero, desktop only (the design's own breakpoint is the 1100px container query,
   below which the hero stacks and this must not apply): a wider left gutter, and
   the pick card pulled in from the far edge so it reads with the format switches
   instead of floating alone in the corner. The min() keeps it from ever crossing
   the right gutter on a narrow desktop. */
@container site (min-width: 1101px) {
  [data-hero-panel] { padding-left: 72px !important; }
  [data-hero-panel] [data-r="herotxt"] { max-width: 640px; }
  [data-hero-panel] [data-r="static"] {
    left: min(800px, calc(100% - 395px)) !important;
    right: auto !important;
  }
}
/* A review page puts the sections in a <main> beside a sticky booking panel.
   The grid column inside <main> was sized by its content, so the fact grids came
   out 1611px wide inside a 796px column: the last column of every grid — the price,
   the distance — sat under the panel and past the right edge, on the shipped page
   as well as the generated ones. minmax(0,1fr) makes the column obey its width.
   Only above the design's own 1100px breakpoint; below it there is no panel. */
@container site (min-width: 1101px) {
  main { grid-template-columns: minmax(0, 1fr); min-width: 0; }
}
/* Related tours, between the phone breakpoint and the 1100px stack point.
   The designer's `col` rule collapses every [data-r~="col"] grid to one column
   below 1100px. On this grid that produced a single full-width card whose 4:3
   image rendered about 900x670 — one tour filling a screen and a half, while the
   compact row layout only arrived at 700px. Above 950 the cards get the three
   columns they were drawn at; below it they take the same row layout the phone
   uses, which also avoids leaving the third card orphaned beside a gap.
   Scoped to `col rowcards` so the home and catalogue grids keep their own. */
@container site (min-width: 701px) and (max-width: 1100px) {
  [data-r~="col"][data-r~="rowcards"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@container site (min-width: 701px) and (max-width: 900px) {
  [data-r~="col"][data-r~="rowcards"] > a h3 { font-size: 17px !important; }
  [data-r~="col"][data-r~="rowcards"] > a > div { padding: 12px 13px 14px !important; gap: 6px !important; }
  [data-r~="col"][data-r~="rowcards"] > a p { font-size: 14px !important; }
}
/* At a glance. The three gold cards keep a fixed three-across band, because they
   are a set and reading them as one row is the point; the detail strip below is
   auto-fit over at most four items, which always resolves to a single full row
   rather than leaving one cell stranded on a line of its own.
   Narrow: three cards no longer fit beside the dot, so the pair goes on top and
   the third spans, and the strip becomes one item per line. */
@container site (max-width: 520px) {
  [data-glance="primary"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-glance="primary"] > div:nth-child(3) { grid-column: 1 / -1; }
}
@container site (max-width: 700px) {
  [data-glance="primary"] > div { padding: 13px 14px !important; }
  [data-glance="primary"] p:nth-child(2) { font-size: 21px !important; }
}
@container site (max-width: 560px) {
  [data-glance="detail"] { grid-template-columns: 1fr !important; }
}
/* Hub feature blocks below the 1100px stack point.

   Each block is a photo beside the case for one tour. Stacked, the photo keeps
   the two-column ratio it was drawn at and renders 984x739 on a tablet — three
   quarters of the screen for one picture, with the text it belongs to pushed
   off the fold. The photo is the supporting half of the block, so once it goes
   above the text it takes a wide crop and a ceiling, and the vertical rhythm
   between blocks tightens on a phone where 64px of padding is a scroll.
   aspect-ratio plus max-height fights itself: the ratio derives the height, the
   cap shrinks it, and then the ratio shrinks the WIDTH to match, so the photo
   stops filling its column. An explicit height and no ratio is what actually
   gives a full-width band with a ceiling. */
@container site (max-width: 1100px) {
  #features > div > a:first-child > div:first-child {
    aspect-ratio: auto !important;
    height: clamp(180px, 32vw, 320px);
    /* The arch is the design's own 160px top-left radius, and it was drawn
       against a 562x421 box — 38% of the height. The stacked band is 180px
       tall, so the same 160px is 89% of it and the curve eats the whole left
       edge instead of reading as a corner. Keeping the PROPORTION keeps the
       shape: 38% of the band height, which is 68px on a phone and 122px at
       the widest. */
    border-radius: clamp(68px, 12vw, 122px) 4px 4px !important;
  }
}
@container site (max-width: 700px) {
  #features > div { padding-top: 34px !important; padding-bottom: 34px !important; gap: 22px !important; }
  #features > div h2 { font-size: 28px !important; }
  /* the two chips are pinned to opposite bottom corners of the photo; on a
     phone they have to share about 320px between them */
  #features > div > a:first-child > span {
    font-size: 10.5px !important; letter-spacing: 0.06em !important; padding: 4px 9px !important;
  }
}
/* The sticky section nav.

   The export builds it as a single flex row with `overflow-x: auto` and
   `white-space: nowrap`. On the price page that is six anchors, and at 390px
   the row runs to 636px — a horizontal scroller inside a page that must not
   have one, and one whose last two chips are invisible unless you find the
   drag. Wrapping fixed the hidden scroller and cost the nav its shape: three
   ragged lines pushed the page down and read as a list, not a strip.
   16.09.2026, owner: one line, and make the scrolling obvious. So the row
   scrolls on purpose — a thin gold scrollbar under it and a fade over the
   right edge, which says "cut off" the way three lines of chips never did. */
@container site (max-width: 700px) {
  nav[data-quicknav] { position: sticky; }
  nav[data-quicknav] > div {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    column-gap: 18px !important;
    padding: 0 16px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 201, 163, 0.55) transparent;
  }
  nav[data-quicknav] > div::-webkit-scrollbar { height: 3px; }
  nav[data-quicknav] > div::-webkit-scrollbar-track { background: transparent; }
  nav[data-quicknav] > div::-webkit-scrollbar-thumb {
    background: rgba(217, 201, 163, 0.55); border-radius: 2px;
  }
  nav[data-quicknav] > div > * {
    min-height: 44px; display: inline-flex; align-items: center;
    scroll-snap-align: start; flex: 0 0 auto;
  }
  /* the row is cut off, not finished: a fade over the last chips, and the
     scrollbar under them says which way it moves */
  nav[data-quicknav]::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(15, 18, 32, 0), rgba(15, 18, 32, 0.95));
  }
}
/* Card mode for a table the design left as a plain grid (see the labelling
   pass in this file). One block per row, the column name printed above each
   value from data-th, and the row's first cell as its heading. */
@container site (max-width: 700px) {
  table[data-cardable], table[data-cardable] tbody { display: block !important; }
  table[data-cardable] thead { display: none !important; }
  table[data-cardable] tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 14px 2px;
    border-bottom: 1px solid rgba(217, 201, 163, 0.2);
  }
  table[data-cardable] td { display: block !important; border: 0 !important; padding: 0 !important; }
  table[data-cardable] td:first-child { grid-column: 1 / -1; font-size: 18px; }
  table[data-cardable] td:last-child { grid-column: 1 / -1; }
  table[data-cardable] td::before {
    content: attr(data-th); display: block; color: rgb(174, 179, 201);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 3px;
  }
  table[data-cardable] td:first-child::before,
  table[data-cardable] td:last-child::before { content: none; }
}
/* The price.

   The word "from" is a qualifier and stays small, muted and upright; the amount
   is the thing being read, so it takes the display face the headings use, a
   step and a half up in size, and the lit gold. `em` rather than `px` so it
   scales with whatever context it sits in — a table cell, a card foot and a
   ladder rung are all different sizes and all want the same relationship.

   Tabular figures keep a column of prices aligned on the decimal, which matters
   here because the listings quote $29.99 and $34.75 alongside $25 and $135. */
[data-money-wrap] { white-space: nowrap; }
/* the price and the score read as one fact, so they do not break apart:
   "from $190 · 4.8 rating" was wrapping after the score and leaving the word
   "rating" alone on the next line */
[data-figline] { white-space: nowrap; }
[data-figline]:only-child, [data-figline] { min-width: 0; }
/* the row that holds it lets the button drop instead */
[data-figline] + a, [data-figline] ~ a { flex: 0 0 auto; }
[data-money][data-money-on="light"], [data-rating][data-money-on="light"] {
  color: rgb(15, 18, 32) !important;
}
[data-rating] {
  font-family: Almendra, Georgia, serif;
  font-weight: 700;
  font-size: 1.22em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
[data-money] {
  font-family: Almendra, Georgia, serif;
  font-weight: 700;
  font-size: 1.45em;
  line-height: 1;
  /* the export sets an inline colour on the amount, so this one needs the
     weight to win — the rest of the rule has no inline to fight */
  color: rgb(236, 224, 194) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/* the qualifier, wherever it sits beside a marked amount */
[data-money-wrap] { font-variant-numeric: tabular-nums; }
@container site (max-width: 700px) {
  [data-money] { font-size: 1.3em; }
}
/* Running prose set in italic.

   IM Fell English is a 17th-century face, and its italic has a small x-height
   and very light strokes. It reads well for a two-word label — "our pick",
   "Arrive" — and stops being readable as soon as it has to carry three lines in
   a narrow column. The quote cards were doing exactly that, at 17px, one step
   BELOW the page's own body size, in a dimmer ink than the body text.

   So italic keeps its job as a label and loses it for prose: upright, a step
   larger than the body, looser leading, and the page's full ink. Scoped by
   length rather than by block, because the same defect turns up wherever a long
   line is set in italic. */
blockquote p[style*="italic"],
p[style*="italic"][style*="font-size: 17px"],
p[style*="italic"][style*="font-size: 16px"] {
  font-style: normal !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
  color: rgb(217, 219, 230) !important;
  letter-spacing: 0.004em;
}
@container site (max-width: 700px) {
  blockquote p[style*="italic"] { font-size: 18px !important; }
}
/* the attribution under a quote sits closer to it now that the quote is larger */
blockquote footer { padding-top: 2px; }
/* scroll anchoring nudges the sticky section nav sideways while images settle */
[data-quicknav], [data-quicknav] * { overflow-anchor: none; }
.k-menu-0:hover { color: rgb(236, 224, 194) !important; background: rgba(217, 201, 163, 0.05) !important; }
.k-menu-1:hover { color: rgb(236, 224, 194) !important; }
.k-menu-2:hover { background: rgb(236, 224, 194) !important; }
.k-menu-h:hover { background: rgb(31, 36, 64) !important; border-color: rgb(236, 224, 194) !important; }