/* ============================================================================
   05-CONTENT — the remaining 14 blocks

   Same rules as 04: composed from primitives, values from tokens only, no
   media queries except where a genuine structural change is needed (and then
   a container query, not a viewport one).
   ============================================================================ */

/* ------------------------------------------------------------ BREADCRUMBS ---
   Pairs with BreadcrumbList schema. Scrolls rather than wraps — a wrapped
   breadcrumb reads as two separate trails.                                  */
.breadcrumbs {
  font-size: var(--type-footnote);
  color: var(--label-secondary);
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  padding-block: var(--space-xs);
  /* An <ol> keeps a UA padding-inline-start (16.25px here) unless it is reset.
     Only padding-block was set, so the trail sat 11px right of everything else
     in the same container and read as misaligned. The links carry
     `padding-inline: 5px; margin-inline: -5px`, which already cancels out. */
  /* 0. The link's own `padding-inline: 5px` is what places its text, and the
     matching `margin-inline: -5px` pulls the box back so the GLYPHS land flush.
     Adding container padding on top pushed the text 5px right - a correction
     made by measuring the box instead of the letters. */
  padding-inline: 0;
  margin-block: 0;
}
.breadcrumbs::-webkit-scrollbar { display: none; }
/* 44px tall for touch. The row keeps its visual size because the links are
   inline-flex and centred — only the hit area grows. */
.breadcrumbs a, .breadcrumbs li[aria-current] {
  display: inline-flex; align-items: center; min-block-size: var(--tap-min);
}
/* Short crumbs need a wider hit area than their text. This used to be padding
   alone — 5px each side, which took the 35px "Home" of the old system font to
   45px. Switching to Figtree made that word 31px, so the same padding landed at
   41px and the target quietly fell under the 44px HIG minimum.

   min-inline-size states the requirement instead of computing it from one
   font's metrics, so it cannot drift again. The padding and negative margin
   stay for the longer crumbs; the shortest one ends up about 1.5px off flush,
   which is invisible, and the target is correct in every font. */
.breadcrumbs a {
  min-inline-size: var(--tap-min); justify-content: center;
  padding-inline: 5px; margin-inline: -5px;
}
/* The FIRST crumb starts the page's left edge, so its glyphs must sit on it.
   Centring inside the 44px tap target put "Home" (about 31px wide) 6px right of
   every other element in the column - the box was flush and the letters were
   not, which is why measuring boxes said "aligned" while the page said
   otherwise. The tap target keeps its size; only the text moves. */
.breadcrumbs li:first-child a { justify-content: flex-start; }
.breadcrumbs a { color: var(--label-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs li { list-style: none; display: flex; align-items: center; gap: var(--space-2xs); }
.breadcrumbs li + li::before {
  content: "";
  inline-size: 5px; block-size: 5px;
  border-inline-end: 1.5px solid var(--label-tertiary);
  border-block-start: 1.5px solid var(--label-tertiary);
  transform: rotate(45deg);
}
.breadcrumbs [aria-current] { color: var(--label); font-weight: var(--weight-medium); }

/* ----------------------------------------------------------- SUMMARY BOX ---
   B3 TL;DR · B4 quick facts · B5 best-for.
   Answer-first. Google lifts these for featured snippets and readers who
   bounce still leave with the answer.                                       */
.summary {
  background: var(--bg-elevated);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  box-shadow: var(--shadow-sm);
}
/* Sits ABOVE the panel, not inside it: an uppercase label inside a rounded
   surface eats the top corner radius and breaks the shape. */
.summary__title {
  font-size: var(--type-footnote);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--label-secondary);
  margin-block-end: var(--space-xs);
  padding-inline-start: 2px;
}
.summary--facts { border-inline-start: 0; }
/* Value on top, label beneath, both centred, hairline rules between —
   reads as a spec strip rather than a form. */
.summary--facts dl { display: grid; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr)); }
.summary--facts dl > div {
  position: relative; padding: var(--space-m) var(--space-s);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; text-align: center;
}
.summary--facts dl > div + div::before {
  content: ""; position: absolute; inset-block: 24%; inset-inline-start: 0;
  inline-size: 1px; background: var(--separator);
}
.summary--facts dt { order: 2; font-size: var(--type-caption); color: var(--label-secondary);
  text-transform: uppercase; letter-spacing: 0.06em; }
.summary--facts dd { order: 1; margin: 0; font-weight: var(--weight-bold);
  font-size: var(--type-title-3); letter-spacing: var(--track-title); line-height: 1.2; }
/* B5 best-for / not-for: two honest columns */
.summary--verdict { border-inline-start-color: var(--success); }
.verdict-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2xs); }
.verdict-list li { display: flex; gap: var(--space-xs); align-items: flex-start;
  font-size: var(--type-subhead); }
.verdict-list li::before { content: "✓"; color: var(--success); font-weight: var(--weight-bold); flex: 0 0 auto; }
.verdict-list[data-negative] li::before { content: "✕"; color: var(--label-tertiary); }

/* ------------------------------------------------------------- CARD ROW ----
   D2 features · D4 highlights · D10 pros/cons · D14 decisions · E5 stays ·
   H2 related articles · H3 nearby. One block, seven jobs.                   */
.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  block-size: 100%;
}
.card__icon {
  inline-size: 2.25rem; block-size: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--radius-s);
  background: var(--accent-soft); color: var(--accent);
  margin-block-end: var(--space-2xs);
}
.card__icon > svg { inline-size: 1.25rem; block-size: 1.25rem; }
.card__title { font-size: var(--type-headline); font-weight: var(--weight-semibold);
  line-height: var(--leading-snug); }
.card__text { font-size: var(--type-subhead); color: var(--label-secondary); }
.card__foot { margin-block-start: auto; padding-block-start: var(--space-xs);
  font-size: var(--type-footnote); }

/* numbered variant — D14 decision cards */
.card[data-num]::before {
  content: attr(data-num);
  font-family: var(--font-display);
  font-size: var(--type-title-2);
  font-weight: var(--weight-bold);
  color: var(--accent);
  line-height: 1;
}
/* pros / cons — D10 */
.card--pro { border-block-start: 3px solid var(--success); }
.card--con { border-block-start: 3px solid var(--label-tertiary); }
/* link card — H2 related articles */
a.card { text-decoration: none; color: var(--label);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--label); }
a.card .card__foot { color: var(--accent); font-weight: var(--weight-semibold); }
.card__media { --frame-ratio: 3 / 2; margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) 0;
  border-start-start-radius: var(--radius-m); border-start-end-radius: var(--radius-m); }

/* ---------------------------------------------------------------- STEPS ----
   D8. Numbered, iOS-flavoured — circled numerals on a rail.                 */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps__item {
  counter-increment: step;
  position: relative;
  padding-inline-start: var(--space-2xl);
  padding-block-end: var(--space-l);
}
.steps__item:last-child { padding-block-end: 0; }
.steps__item::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0; inset-block-start: 0;
  inline-size: 1.6rem; block-size: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--type-caption); font-weight: var(--weight-bold);
}
.steps__item::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.775rem;
  inset-block: 1.85rem 0;
  inline-size: 2px; background: var(--separator);
}
.steps__item:last-child::after { display: none; }
.steps__title { font-size: var(--type-headline); font-weight: var(--weight-semibold); }
.steps__text { font-size: var(--type-subhead); color: var(--label-secondary); margin-block-start: 2px; }

/* ----------------------------------------------------------- DATA TABLE ----
   D9 distances · D11 seasonal · D12 climate.
   Numeric tables genuinely need to stay tabular — the axis-flip trick that
   works for a 3-column comparison does not work for 12 months. So this one
   scrolls, with the first column pinned so you never lose the row label.   */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-m);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
}
.dtable { inline-size: 100%; border-collapse: collapse; font-size: var(--type-subhead); }
/* Data columns are CENTRED, not end-aligned. With width:100% and auto layout
   the browser hands surplus space to the columns, and end-aligned values get
   pinned to the far right with a lake of white between label and number —
   the same defect already rejected on the price table. */
.dtable th, .dtable td { padding: var(--space-xs) var(--space-s); text-align: center; white-space: nowrap; }
.dtable thead th {
  font-size: var(--type-caption); font-weight: var(--weight-semibold);
  color: var(--label-secondary); text-transform: uppercase; letter-spacing: 0.04em;
  border-block-end: 0.5px solid var(--separator);
}
.dtable tbody th, .dtable thead th:first-child {
  text-align: start;
  position: sticky; inset-inline-start: 0;
  background: var(--bg-elevated);
  font-weight: var(--weight-medium);
}
.dtable tbody tr + tr th, .dtable tbody tr + tr td { border-block-start: 0.5px solid var(--separator); }
.dtable [data-peak] { color: var(--accent); font-weight: var(--weight-semibold); }
.dtable caption { caption-side: bottom; padding: var(--space-xs) var(--space-s);
  font-size: var(--type-caption); color: var(--label-secondary); text-align: start; }

/* --------------------------------------------------------- MAP (STATIC) ----
   E1. A static image plus real directions text. No Maps embed: an iframe is
   ~800 KB, needs a key, and puts the useful content where Google can't read
   it. The directions list is the SEO asset; the image is context.          */
.mapblock { display: grid; gap: var(--space-m); }
/* Now an <a>: the static image is the map, one tap opens the real interactive
   one on OSM's own infrastructure. Instant load for everyone, pan-and-zoom for
   whoever wants it, and no tile-policy exposure from 200 sites. */
.mapblock__frame { --frame-ratio: 16 / 10; --frame-radius: var(--radius-m); position: relative;
  display: block; text-decoration: none; }
/* The link is now a real <a> inside the frame, not the frame itself. The old
   pointer-events:none was left over from when the whole frame was the link,
   and it made the button unclickable. */
.mapblock__frame .mapblock__link { gap: 0.3rem; }
.mapblock__frame:hover .mapblock__link { background: var(--bg); color: var(--accent-hover); }
.mapblock__pin {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -100%);
  inline-size: 1.5rem; block-size: 1.5rem;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: var(--cta);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.mapblock__link {
  position: absolute; inset-block-end: var(--space-s); inset-inline-end: var(--space-s);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 0.4rem 0.7rem; border-radius: var(--radius-pill);
  font-size: var(--type-footnote); font-weight: var(--weight-semibold);
  text-decoration: none; color: var(--accent);
  min-block-size: var(--tap-min); display: inline-flex; align-items: center;
}

/* ------------------------------------------------------ RATING SUMMARY -----
   F2 aggregate band · F3 distribution bars.                                */
.ratingsum { display: grid; gap: var(--space-m); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.ratingsum__score { text-align: center; }
.ratingsum__big {
  font-family: var(--font-display); font-size: var(--type-large-title);
  font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--track-large-title);
}
.ratingsum__stars { color: var(--star); font-size: var(--type-callout); letter-spacing: 0.08em; }
.ratingsum__count { font-size: var(--type-footnote); color: var(--label-secondary); }
.bars { display: grid; gap: var(--space-2xs); }
.bar { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; gap: var(--space-xs);
  align-items: center; font-size: var(--type-caption); color: var(--label-secondary); }
.bar__track { block-size: 6px; border-radius: var(--radius-pill); background: var(--gray-5); overflow: hidden; }
.bar__fill { block-size: 100%; border-radius: var(--radius-pill); background: var(--star); }
.bar__pct { text-align: end; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- IMAGE BREAK -----
   G3 interstitial · G5 varying heights · H6 closing statement.
   Heights step down the page — 88vh hero, then 64/56/48 — which creates
   rhythm instead of a wall of equal-sized bands. Borrowed from guidetohana. */
.imgbreak { position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-block-size: var(--imgbreak-h, 48vh); }
.imgbreak[data-h="l"] { --imgbreak-h: 64vh; }
.imgbreak[data-h="m"] { --imgbreak-h: 56vh; }
.imgbreak[data-h="s"] { --imgbreak-h: 40vh; }
.imgbreak > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.imgbreak::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.66), rgba(0,0,0,0.12) 55%, transparent); }
.imgbreak__body { position: relative; z-index: 1; padding-block: var(--space-xl); color: #fff; inline-size: 100%; }
.imgbreak__statement {
  font-family: var(--font-display);
  font-size: var(--type-title-1); font-weight: var(--weight-bold);
  letter-spacing: var(--track-title); line-height: var(--leading-tight);
  color: #fff; max-inline-size: 24ch; text-wrap: balance;
}
.imgbreak__note { color: rgba(255,255,255,0.86); font-size: var(--type-subhead); margin-block-start: var(--space-2xs); }

/* ------------------------------------------------------------- CAROUSEL ----
   G1. The reel primitive plus framed images and a caption.                 */
.carousel__item { display: flex; flex-direction: column; gap: var(--space-2xs); }
.carousel__item .frame { --frame-radius: var(--radius-m); --frame-ratio: 4 / 5; }
.carousel__cap { font-size: var(--type-caption); color: var(--label-secondary); }

/* ----------------------------------------------------------- PHOTO GRID ----
   G2. A tiling mosaic, no JS.

   Every cell is square, so a cell spanning 2 columns must also span 2 ROWS —
   otherwise it is twice as wide as its neighbours are tall and leaves a void
   beneath them. Two columns + a gap equals two rows + a gap, so the hero cell
   stays square and the mosaic tiles exactly.
   `dense` backfills any hole the hero would otherwise leave.                */
.photogrid {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 30%), 1fr));
  grid-auto-flow: dense;
}
.photogrid .frame { --frame-radius: var(--radius-s); --frame-ratio: 1 / 1; }
.photogrid > :first-child { grid-column: span 2; grid-row: span 2; }
/* the hero stays square: 2 cols + gap == 2 rows + gap */
.photogrid > :first-child .frame { --frame-ratio: 1 / 1; }

/* Below ~30rem three columns is the most that stays tappable. */
@media (max-width: 30rem) {
  .photogrid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------- COMPARE PAIR ----
   G4. Two images side by side with labels — summer/winter, above/below.   */
.pair { display: grid; gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.pair figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.pair .frame { --frame-radius: var(--radius-m); --frame-ratio: 4 / 3; }
.pair figcaption { font-size: var(--type-footnote); font-weight: var(--weight-semibold); }
.pair figcaption span { display: block; font-weight: var(--weight-regular); color: var(--label-secondary); }

/* ------------------------------------------------------------ INLINE CTA ---
   C6. Mid-article conversion without breaking reading flow.                */
.inlinecta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  background: var(--accent-soft);
  border-radius: var(--radius-m);
  padding: var(--space-m);
}
.inlinecta__text { font-size: var(--type-callout); font-weight: var(--weight-medium); flex: 1 1 14rem; }

/* -------------------------------------------------------------- CTA BAND ---
   H4. The closing ask.                                                     */
/* Was a flat accent rectangle with a button in the middle. Now a dark plate
   with a soft light source, matching the fact band so the page has one
   "emphasis surface" language rather than two unrelated coloured boxes. */
.ctaband {
  position: relative;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--accent) var(--plate-mix), #000);
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) calc(var(--plate-mix) + 18%), #000) 0%,
    color-mix(in srgb, var(--accent) calc(var(--plate-mix) - 14%), #000) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-l);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-m);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), var(--shadow-lg);
}
/* Same drifting-light language as the fact band, slower and fainter: enough to
   feel alive on a page the reader has scrolled to the bottom of, not enough to
   compete with the button. */
.ctaband::after {
  content: "";
  position: absolute; inset-block-start: -40%; inset-inline-start: -10%;
  inline-size: 30rem; block-size: 30rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.20), transparent 60%);
  pointer-events: none;
  will-change: transform;
  animation: cta-drift 26s ease-in-out infinite alternate;
}
@keyframes cta-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(12%, 9%, 0) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) { .ctaband::after { animation: none; } }
.ctaband > * { position: relative; z-index: 1; }
.ctaband h2 { color: #fff; }
/* 85% composited to 4.26:1 on the accent fill and missed AA. 92% is 4.72:1. */
.ctaband p { color: rgba(255,255,255,0.92); max-inline-size: 44ch; }

/* ----------------------------------------------------------- PRICE TABLE ---
   C5. Ticket/option pricing.                                              */
.pricetable { inline-size: 100%; border-collapse: collapse; font-size: var(--type-subhead);
  background: var(--bg-elevated); border-radius: var(--radius-m); overflow: hidden;
  box-shadow: var(--shadow-sm); }
.pricetable th, .pricetable td { padding: var(--space-s) var(--space-m); text-align: start; }
.pricetable td:last-child, .pricetable th:last-child { text-align: end;
  font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.pricetable thead th { font-size: var(--type-caption); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--label-secondary); font-weight: var(--weight-semibold); }
.pricetable tbody tr + tr th, .pricetable tbody tr + tr td { border-block-start: 0.5px solid var(--separator); }
.pricetable__note { font-size: var(--type-caption); color: var(--label-secondary); display: block; }

/* ------------------------------------------------- NAVBAR EXTRA VARIANTS ---
   A3 language switcher · A4 anchor nav.                                    */
.langswitch {
  position: relative;
  font-size: var(--type-subhead);
}
.langswitch summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-block-size: var(--tap-min); padding-inline: var(--space-xs);
  color: var(--label-secondary); font-weight: var(--weight-medium);
}
.langswitch summary::-webkit-details-marker { display: none; }
.langswitch__menu {
  /* Aligned to the START edge by default. Anchoring to the end edge only works
     when the control sits on the right of the viewport: the menu is ~144px and
     the control ~84px, so an end-anchored menu hangs 60px past the control and
     ran off the left of a 390px screen when the switcher sat in the footer.
     Use [data-align="end"] on the control in the navbar, where it is safe. */
  position: absolute; inset-inline-start: 0; inset-block-start: 100%;
  min-inline-size: 9rem; z-index: 120;
  background: var(--bg-elevated); border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg); padding: var(--space-2xs);
  list-style: none; margin: 0;
}
.langswitch__menu a {
  display: flex; align-items: center; min-block-size: var(--tap-min);
  padding-inline: var(--space-s); border-radius: var(--radius-s);
  text-decoration: none; color: var(--label); font-size: var(--type-subhead);
}
.langswitch__menu a:hover { background: var(--bg-tertiary); }
.langswitch__menu [aria-current] { color: var(--accent); font-weight: var(--weight-semibold); }
.langswitch[data-align="end"] .langswitch__menu { inset-inline-start: auto; inset-inline-end: 0; }

/* Compact variant for the header: a globe and the language code, nothing else.
   A full "English" label costs bar width that the brand needs on a phone. */
.langswitch--compact summary {
  gap: 0.3rem;
  /* 26px wide once the code hides on a phone — both axes need the 44px floor. */
  min-inline-size: var(--tap-min);
  justify-content: center;
  padding-inline: var(--space-xs);
  color: var(--label-secondary);
  font-size: var(--type-footnote);
  font-weight: var(--weight-semibold);
  letter-spacing: .02em;
}
.langswitch--compact summary svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
.langswitch--compact summary:hover { color: var(--accent); }
@media (max-width: 30rem) { .langswitch--compact .langswitch__code { display: none; } }

.anchornav {
  position: sticky; inset-block-start: 3rem; z-index: 80;
  background: color-mix(in srgb, var(--bg-grouped) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-end: 0.5px solid var(--separator);
  overflow-x: auto; scrollbar-width: none;
}
.anchornav::-webkit-scrollbar { display: none; }
.anchornav ul { display: flex; gap: var(--space-2xs); list-style: none; margin: 0;
  padding: var(--space-2xs) var(--gutter); white-space: nowrap;
  inline-size: max-content; }  /* size to content; .anchornav does the scrolling */
.anchornav a {
  display: inline-flex; align-items: center; min-block-size: var(--tap-min);
  padding-inline: var(--space-s); border-radius: var(--radius-pill);
  font-size: var(--type-footnote); font-weight: var(--weight-medium);
  text-decoration: none; color: var(--label-secondary);
}
/* Quiet active state: ink weight plus a 2px underline, not a filled pill.
   A solid accent chip is the loudest possible treatment for the least
   important control on the page. */
.anchornav a[aria-current] {
  color: var(--label);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}

/* "+N more" tile — with 79–146 gallery images per tour we show a mosaic, not
   the lot. The last tile carries the remainder and opens the lightbox at that
   point, which also stops the grid ending on a ragged empty cell. */
/* The images beyond the mosaic. In the DOM so the viewer's group can reach them
   - the "+N more" badge is a promise the page has to be able to keep - and out
   of the layout so the mosaic still shows 13 tiles. */
.photogrid__rest { display: none; }

.photogrid__more { position: relative; }
.photogrid__more::after {
  content: "+" attr(data-more);
  position: absolute; inset: 0; border-radius: var(--radius-s);
  display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: var(--type-title-3); font-weight: var(--weight-bold);
  letter-spacing: var(--track-title);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background var(--dur-fast) var(--ease);
}
.photogrid__more:hover::after { background: rgba(0,0,0,.42); }

/* ------------------------------------------------------- WEATHER CHART -----
   D12. A temperature range band with rainfall behind it. Pure CSS — no chart
   library, no canvas, no layout thrash. Every bar is positioned from three
   custom properties the build writes per month, so the same markup renders any
   tour's climate without touching this file.

   The scale (--t0/--t1/--rmax) is computed at build time from the actual data,
   not hardcoded: Stavanger tops out at 19°C, Marrakech will not.             */
.wchart {
  margin: 0;
  --wc-h: 13rem;
  --wc-warm: var(--cta);
  --wc-cool: var(--accent);
}
.wchart__plot {
  position: relative;
  block-size: var(--wc-h);
  margin-inline-start: 2.25rem;   /* room for the axis labels */
  border-block-end: 1px solid var(--separator);
}
/* Gridlines + axis labels, drawn from the same scale as the bars. */
.wchart__grid { position: absolute; inset: 0; pointer-events: none; }
.wchart__line {
  position: absolute; inset-inline: 0;
  inset-block-end: calc((var(--v) - var(--t0)) / (var(--t1) - var(--t0)) * 100%);
  border-block-start: 1px dashed var(--separator);
}
.wchart__line::before {
  content: attr(data-label);
  position: absolute; inset-inline-end: calc(100% + 0.4rem);
  transform: translateY(-50%);
  font-size: var(--type-caption);
  font-variant-numeric: tabular-nums;
  color: var(--label-tertiary);
}
.wchart__months {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(2px, 0.6vw, 7px);
  list-style: none; margin: 0; padding: 0;
}
.wmonth { position: relative; min-inline-size: 0; }

/* Rainfall sits BEHIND the temperature band — it is context, not the subject. */
/* A month with genuinely zero wet days still gets a baseline hairline, so the
   chart reads "measured zero" rather than "no data". Tenerife records no rain
   at all from June to September — real, and it looked like a bug. */
.wmonth__rain[data-dry] {
  block-size: 3px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 2px;
}
.wmonth__rain {
  /* Centred with a clamped width instead of filling the column: at 12 columns a
     percentage is right, at 3 columns it becomes a slab. */
  position: absolute; inset-block-end: 0;
  inset-inline-start: 50%; translate: -50% 0;
  inline-size: clamp(28px, 100%, 104px);
  /* Capped at 70% of the plot so the wettest month cannot reach the top and
     turn the background series into the subject. */
  block-size: calc(var(--rain) / var(--rmax) * 70%);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-start-start-radius: 4px; border-start-end-radius: 4px;
}
/* The band spans daily low to daily high, warm at the top, cool at the bottom. */
.wmonth__band {
  /* Narrow. At 12% inset the box was wider than it was tall and the pill radius
     turned every month into an ellipse instead of a range bar. */
  position: absolute;
  inset-inline-start: 50%; translate: -50% 0;
  inline-size: clamp(11px, 34%, 30px);
  inset-block-end: calc((var(--lo) - var(--t0)) / (var(--t1) - var(--t0)) * 100%);
  block-size: calc((var(--hi) - var(--lo)) / (var(--t1) - var(--t0)) * 100%);
  min-block-size: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--wc-cool) 62%, transparent),
    color-mix(in srgb, var(--wc-warm) 88%, transparent));
}
.wchart__labels {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(2px, 0.6vw, 7px);
  margin-inline-start: 2.25rem;
  margin-block-start: var(--space-2xs);
  list-style: none; padding: 0;
}
.wchart__labels li {
  text-align: center;
  font-size: var(--type-caption);
  color: var(--label-secondary);
  font-variant-numeric: tabular-nums;
}
/* Legend and source share one row under a hairline: legend leads, source sits
   at the trailing edge where it stays available without competing. */
.wchart__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-xs) var(--space-m);
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--separator);
}
.wchart__src { margin: 0; }
/* The generated caption for the CURRENT month, under the chart. It shipped on
   the live tour page as a class with no rule at all, so it inherited body copy
   and read as a stray paragraph rather than a caption. Centred on the chart and
   held to a readable measure: it is one sentence, not a legend, so it keeps
   subhead size instead of dropping to footnote with the key. */
.weather__note {
  margin: var(--space-s) auto 0;
  max-inline-size: 46ch;
  text-align: center;
  text-wrap: balance;
  font-size: var(--type-subhead);
  color: var(--label-secondary);
}
.wchart__key {
  display: flex; gap: var(--space-xs) var(--space-m);
  font-size: var(--type-footnote); color: var(--label-secondary);
}
.wchart__key > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.wchart__swatch { inline-size: 1.5rem; block-size: 0.55rem; border-radius: var(--radius-pill); flex: none; }
.wchart__swatch--temp { background: linear-gradient(to right,
  color-mix(in srgb, var(--wc-cool) 62%, transparent), color-mix(in srgb, var(--wc-warm) 88%, transparent)); }
.wchart__swatch--rain { background: color-mix(in srgb, var(--accent) 9%, transparent); }

/* Daylight is the fact that actually differs at 59°N — a strip under the axis
   rather than a third series fighting for the same vertical space. */
.wchart__light {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(2px, 0.6vw, 7px);
  margin-inline-start: 2.25rem; margin-block-start: var(--space-xs);
  list-style: none; padding: 0;
}
.wchart__light li {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: var(--type-caption); color: var(--label-secondary);
  font-variant-numeric: tabular-nums;
}
.wchart__light svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--star); }
@media (max-width: 34rem) { .wchart__light li { font-size: 9px; } }

/* The numbers stay on the page for crawlers and for anyone who wants them —
   collapsed, because the chart already answers the question. */
.wchart__table { margin-block-start: var(--space-m); }
.wchart__table > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  /* The chevron is a rotated square: its painted extent is ~1.4x its layout
     box, so it needs trailing room or it overflows the summary by 3px. */
  padding-inline-end: 5px;
  min-block-size: var(--tap-min);
  font-size: var(--type-footnote); font-weight: var(--weight-semibold);
  color: var(--accent);
}
.wchart__table > summary::-webkit-details-marker { display: none; }
.wchart__table > summary::after {
  content: ""; inline-size: 6px; block-size: 6px;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.wchart__table[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* --- weather chart: legend, mobile window, tooltip ------------------------- */
.wchart__swatch--light { background: color-mix(in srgb, var(--star) 46%, transparent); }
/* One line, always — but it scrolls inside its own box rather than pushing the
   page wide. German legend text is ~35% longer and blew past 320px otherwise. */
.wchart__key {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: 2px;
  /* Both are load-bearing. Without them the legend takes its max-content width
     as a centred flex item and overflows the page in German, even though
     overflow-x:auto is set — the scroll box has to be constrained first. */
  max-inline-size: 100%;
  min-inline-size: 0;
}
.wchart__key::-webkit-scrollbar { display: none; }
.wchart__key > span { white-space: nowrap; flex: none; }

/* Tooltip is built in JS (see ui.js) so each line can carry an icon and the box
   can be measured and clamped — neither is possible with ::after + attr(). */
.wchart { position: relative; }
.wtip {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  z-index: 40; pointer-events: none;
  display: grid; gap: 3px;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  background: var(--label);
  color: var(--bg-elevated);
  font-size: var(--type-caption);
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.wtip[hidden] { display: none; }
.wtip__month { font-weight: var(--weight-bold); }
.wtip__row { display: flex; align-items: center; gap: 0.4rem; }
.wtip__row svg { inline-size: 0.95rem; block-size: 0.95rem; flex: none; opacity: .85; }

.wmonth:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 46rem) {
  /* Three months, not twelve: at 390px a 12-column plot is 24px per month and
     reads as noise. JS picks the window starting at the current month. */
  .wchart__months, .wchart__labels, .wchart__light { grid-template-columns: repeat(3, 1fr); }
  .wchart [data-i][hidden] { display: none; }
  .wchart__src { display: none; }
  .wchart { --wc-h: 11rem; }
  .wchart__foot { flex-direction: column; align-items: center; gap: var(--space-2xs); }
  .wchart__key { font-size: var(--type-caption); gap: var(--space-s); justify-content: center; }
  /* Three columns are ~106px wide, so a 104px rain bar fills the column and
     reads as a slab rather than as background. Narrow it proportionally. */
  .wmonth__rain { inline-size: clamp(24px, 54%, 72px); }
  .wmonth__band { inline-size: clamp(14px, 26%, 32px); }
}

/* --- route: itinerary beside the map ---------------------------------------
   E6 + E1 as one section. The two answer the same question — what happens and
   where — and reading them side by side is how the reader actually uses them.
   Wraps to stacked below the breakpoint, itinerary first. */
.routepair {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  align-items: start;
}
.routepair__steps { min-inline-size: 0; }
.routepair__map { margin: 0; }
@media (min-width: 60rem) {
  /* The map wants more width than the step list once both fit on one row. */
  .routepair { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* --- map hotspots ----------------------------------------------------------
   The dots are painted into the image; these are invisible targets sitting
   exactly on top of them, so a static map can still name its points. */
.mapdot {
  position: absolute;
  inset-block-start: var(--y); inset-inline-start: var(--x);
  translate: -50% -50%;
  inline-size: var(--tap-min); block-size: var(--tap-min);
  border-radius: 50%;
}
.mapdot:focus-visible { outline: 2px solid var(--accent); outline-offset: -8px; }
/* Generated on hover, not hidden at opacity 0. A tooltip that exists at rest
   still counts toward the parent's scroll width — that is what made every
   marker report 18-37px of overflow. Same reason as the weather chart's. */
.mapdot::after {
  content: none;
  position: absolute; inset-block-end: calc(50% + 12px); inset-inline-start: 50%;
  translate: -50% 0;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  background: var(--label); color: var(--bg-elevated);
  font-size: var(--type-caption); line-height: 1.3; white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.mapdot:hover::after, .mapdot:focus-visible::after { content: attr(data-label); }
/* Edge markers would push their tooltip out of the frame. */
.mapdot[style*="--x:0"]::after,
.mapdot[style*="--x:1"]::after { inset-inline-start: 0; translate: 0 0; }
.mapblock__frame { overflow: visible; }
.mapblock__frame > img { border-radius: var(--frame-radius, var(--radius-m)); }