/* TravelZeg Bespoke — site styles. Values come from the TravelZeg Bespoke Design System tokens.
   Layout: editorial, photo-led; 12-col feel inside 1280px; full-bleed photographs alternate with calm text blocks.
   The site is deliberately light-only: travel photography and the navy/orange logo are designed for a white ground. */
:root {
  color-scheme: light;
  --brand-orange: #F66E08;
  --brand-orange-hover: #E06204;
  --brand-navy: #021033;
  --surface: #FFFFFF;
  --surface-mist: #F3F5F9;
  --ink: #021033;
  --ink-muted: #4A5573;
  --accent-text: #B34C00;
  --on-orange: #021033;
  --on-navy: #FFFFFF;
  --on-navy-muted: #C9D0E0;
  --hairline: #D7DCE6;
  --navy-hairline: #26335E;
  --control-border: #7A849E;
  --focus-ring: #021033;
  --scrim: rgba(2, 16, 51, .55);
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans: Manrope, "Helvetica Neue", Arial, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 112px;
  --radius-sm: 2px;
  --content-max: 1280px; --text-max: 680px; --header-h: 80px;
  --gutter: var(--space-5);
}
@media (max-width: 768px) { :root { --space-7: 64px; --gutter: var(--space-3); --header-h: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 28px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.on-dark :focus-visible, .site-header.is-over :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .band-navy :focus-visible { outline-color: var(--brand-orange); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--brand-navy); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- type ---------- */
.display-xl, .display-l, .display-m, .display-s { font-family: var(--font-display); font-weight: 500; }
.display-xl { font-size: 72px; line-height: 76px; letter-spacing: -.01em; }
.display-l  { font-size: 52px; line-height: 58px; letter-spacing: -.005em; }
.display-m  { font-size: 36px; line-height: 44px; }
.display-s  { font-size: 26px; line-height: 32px; font-weight: 600; }
@media (max-width: 768px) {
  .display-xl { font-size: 48px; line-height: 52px; }
  .display-l  { font-size: 38px; line-height: 44px; }
  .display-m  { font-size: 30px; line-height: 36px; }
}
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--space-2); }
.lead { font-size: 20px; line-height: 32px; }
.caption, .meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.prose { max-width: var(--text-max); }
.prose a, .link { color: var(--accent-text); font-weight: 600; text-underline-offset: 4px; }
.prose h3 { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; margin: var(--space-5) 0 var(--space-2); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-7); }
.section--mist { background: var(--surface-mist); }
.section--tight { padding-block: var(--space-6); }
.section-head { display: grid; gap: var(--space-2); max-width: 760px; margin-bottom: var(--space-5); }
.section-head--row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); }
@media (max-width: 760px) { .section-head--row { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 900px) { .split, .split--even { grid-template-columns: 1fr; gap: var(--space-5); } }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 > :nth-child(3):last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .grid-3 > :nth-child(3):last-child { grid-column: auto; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 600 15px/20px var(--font-sans); letter-spacing: .01em; padding: 14px 26px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn-primary { background: var(--brand-orange); color: var(--on-orange); }
.btn-primary:hover { background: var(--brand-orange-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--control-border); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-onnavy { background: transparent; color: var(--on-navy); border-color: rgba(255,255,255,.6); }
.btn-onnavy:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- draft markers ---------- */
.draft-bar { background: #FFF4E8; color: var(--ink); font-size: 13px; line-height: 18px; padding: 8px var(--gutter); text-align: center; border-bottom: 1px solid #F3D3B5; }
.tbc { background: #FFF4E8; border-bottom: 1px dashed var(--accent-text); padding: 0 3px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tbc::after { content: " · to confirm"; font-weight: 400; font-size: .8em; color: var(--accent-text); }
.on-dark .tbc, .band-navy .tbc, .hero .tbc, .site-footer .tbc { background: rgba(246,110,8,.18); color: var(--on-navy); }
.on-dark .tbc::after, .band-navy .tbc::after, .hero .tbc::after, .site-footer .tbc::after { color: #FFB27A; }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--surface); border-bottom: 1px solid var(--hairline); transition: background-color .3s, border-color .3s; }
.site-header .bar { height: var(--header-h); display: flex; align-items: center; gap: var(--space-5); }
.logo-link { display: block; flex: none; }
.logo-link img { height: 44px; width: auto; }
.logo-link .logo-dark { display: none; }
/* main menu: top items open full-width panels (mega menu) */
.main-nav { display: flex; align-items: center; margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.nav-top { font: 600 15px/20px var(--font-sans); text-decoration: none; color: var(--ink); padding: 6px 0; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
button.nav-top::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
button.nav-top[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav-top:hover, .nav-item.is-current > .nav-top, .nav-top[aria-current="page"], .nav-top[aria-expanded="true"] { border-bottom-color: var(--brand-orange); }
.nav-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); box-shadow: 0 18px 40px rgba(2,16,51,.12); padding-block: var(--space-5); max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.nav-item.is-open > .nav-panel { display: block; }
.nav-cols { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.nav-cols--1 { --n: 1; } .nav-cols--2 { --n: 2; } .nav-cols--3 { --n: 3; } .nav-cols--4 { --n: 4; }
.nav-col { min-width: 0; }
.nav-col-title { font: 700 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 10px; }
.nav-col-head { display: block; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); text-decoration: none; margin-bottom: 6px; }
.nav-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.nav-cols--1 ul { display: flex; flex-wrap: wrap; gap: 0 40px; }
.nav-col ul a { color: var(--ink); text-decoration: none; font-size: 15px; line-height: 20px; display: inline-block; padding-block: 6px; }
.nav-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-col a[aria-current="page"] { color: var(--accent-text); }
.nav-panel-foot { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.nav-cta { display: none; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--control-border); border-radius: var(--radius-sm); color: var(--ink); font: 600 15px/20px var(--font-sans); padding: 9px 14px; cursor: pointer; }
/* transparent over the hero on pages that open with a photograph */
.has-hero .site-header { position: fixed; left: 0; right: 0; }
.site-header.is-over .draft-bar { background: rgba(255,244,232,.92); }
.site-header.is-over { background: transparent; border-bottom-color: transparent; background-image: linear-gradient(rgba(2,16,51,.6), rgba(2,16,51,0)); }
.site-header.is-over .nav-top, .site-header.is-over .menu-toggle { color: var(--on-navy); }
.site-header.is-over .menu-toggle { border-color: rgba(255,255,255,.6); }
.site-header.is-over .logo-light { display: none; }
.site-header.is-over .logo-dark { display: block; }
@media (max-width: 1439px) {
  .logo-link img { height: 36px; }
  .main-nav, .site-header .bar > .bar-cta { display: none; }
  .menu-toggle { display: inline-block; }
  .site-header.menu-open { background: var(--surface); }
  .site-header.menu-open .logo-light { display: block; } .site-header.menu-open .logo-dark { display: none; }
  .site-header.menu-open .menu-toggle { color: var(--ink); border-color: var(--control-border); }
  .site-header.menu-open .main-nav { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); padding: var(--space-1) var(--gutter) var(--space-5); border-bottom: 1px solid var(--hairline); }
  .nav-list { display: block; }
  .nav-item { border-bottom: 1px solid var(--hairline); }
  .site-header .nav-top { width: 100%; justify-content: space-between; padding-block: 14px; border-bottom: 0; color: var(--ink); font-size: 16px; }
  .nav-item.is-current > .nav-top { color: var(--accent-text); }
  .nav-panel { position: static; box-shadow: none; border: 0; padding: 0 0 var(--space-3); max-height: none; overflow: visible; }
  .nav-panel > .wrap { padding-inline: 0; }
  .nav-cols, .nav-cols--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
  .nav-cols--1 ul { display: grid; }
  .nav-col-head { font-size: 20px; line-height: 26px; }
  .nav-panel-foot { margin-top: var(--space-3); }
  .main-nav .nav-cta { display: inline-flex; margin-top: var(--space-4); }
}
@media (max-width: 480px) { .nav-cols, .nav-cols--1 { grid-template-columns: 1fr; } }
/* an open panel always sits on a solid header */
.site-header.panel-open { background: var(--surface); border-bottom-color: var(--hairline); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; color: var(--on-navy); overflow: hidden; background: var(--brand-navy); }
.hero--short { min-height: 520px; }
.hero > picture, .hero > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,16,51,.88) 0%, rgba(2,16,51,.5) 45%, rgba(2,16,51,.2) 80%, rgba(2,16,51,.45) 100%); }
.hero .wrap { position: relative; z-index: 1; padding-block: calc(var(--header-h) + 36px + var(--space-6)) var(--space-6); }
.hero-text { max-width: 780px; display: grid; gap: var(--space-3); }
.hero .eyebrow { color: var(--on-navy); }
.hero .lead { max-width: 620px; margin: 0; }
.hero .actions { margin-top: var(--space-2); }
.hero-caption { position: absolute; right: var(--gutter); bottom: var(--space-3); z-index: 1; font-size: 13px; line-height: 18px; color: var(--on-navy-muted); margin: 0; }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.25); font-size: 15px; }
.hero-facts dt { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--on-navy-muted); }
.hero-facts dd { margin: 2px 0 0; font-weight: 600; }
@media (max-width: 768px) { .hero { min-height: 560px; } .hero-caption { display: none; } }

/* page title for photo-free pages */
.page-head { padding-block: var(--space-6) var(--space-5); border-bottom: 1px solid var(--hairline); }
.page-head .lead { max-width: 680px; margin-top: var(--space-3); }

/* ---------- cards ---------- */
.card { text-decoration: none; color: var(--ink); display: grid; gap: var(--space-2); align-content: start; }
.card-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-mist); margin-bottom: var(--space-2); }
.card-photo--wide { aspect-ratio: 3 / 2; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-photo img { transform: scale(1.03); }
.card .eyebrow { margin: 0; }
.card h3 { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--brand-orange); }
.card .meta { margin: 0; }

.journey { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--surface-mist); }
.journey + .journey { margin-top: var(--space-4); }
.journey:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.journey:nth-child(even) .journey-photo { order: 2; }
.journey-photo { min-height: 360px; overflow: hidden; }
.journey-photo img { width: 100%; height: 100%; object-fit: cover; }
.journey-text { padding: var(--space-5); display: grid; gap: var(--space-2); align-content: center; min-width: 0; }
.journey-text .eyebrow { margin: 0; }
.journey-text p { margin: 0; }
.route { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.journey-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.price { font-weight: 600; color: var(--accent-text); }
@media (max-width: 860px) { .journey, .journey:nth-child(even) { grid-template-columns: 1fr; } .journey:nth-child(even) .journey-photo { order: 0; } .journey-photo { min-height: 0; aspect-ratio: 3 / 2; } .journey-text { padding: var(--space-4); } }

/* ---------- steps, facts ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); counter-reset: step; }
.step { border-top: 2px solid var(--brand-orange); padding-top: var(--space-3); display: grid; gap: var(--space-2); }
.step .eyebrow { margin: 0; }
.step p { margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: var(--space-4); } }
.facts { display: grid; gap: 0; border-top: 1px solid var(--hairline); margin: 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-3); padding-block: 14px; border-bottom: 1px solid var(--hairline); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }
.aside-box { background: var(--surface-mist); padding: var(--space-4); }
.aside-box h3, .aside-box .aside-title { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; margin-bottom: var(--space-3); }

/* ---------- itinerary ---------- */
.days { border-top: 1px solid var(--hairline); }
.day { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--hairline); }
.day-n { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); padding-top: 8px; }
.day h3 { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; margin-bottom: var(--space-2); }
.day p { margin: 0 0 var(--space-2); max-width: var(--text-max); }
.day .stay { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
@media (max-width: 600px) { .day { grid-template-columns: 1fr; gap: var(--space-1); } }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 14px; height: 2px; background: var(--brand-orange); }
.photo-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.photo-pair figure { margin: 0; }
.photo-pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-pair figcaption { margin-top: var(--space-2); }
@media (max-width: 640px) { .photo-pair { grid-template-columns: 1fr; } }

/* ---------- quote ---------- */
.quote { margin: 0; text-align: center; display: grid; gap: var(--space-4); justify-items: center; }
.quote::before { content: ""; width: 48px; height: 2px; background: var(--brand-orange); }
.quote blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 36px; line-height: 44px; max-width: 30ch; text-wrap: balance; }
.quote figcaption { display: grid; gap: 4px; }
.quote .who { font-weight: 600; font-size: 15px; }
@media (max-width: 768px) { .quote blockquote { font-size: 28px; line-height: 36px; } }
.review { break-inside: avoid; padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.review blockquote { margin: 0 0 var(--space-3); }
.review .who { font-weight: 600; font-size: 15px; display: block; }
.reviews-cols { columns: 2; column-gap: var(--space-6); }
@media (max-width: 860px) { .reviews-cols { columns: 1; } }

/* ---------- navy band ---------- */
.band-navy { background: var(--brand-navy); color: var(--on-navy); }
.band-navy .eyebrow { color: #FF9A4D; }
.band-navy .caption, .band-navy .meta { color: var(--on-navy-muted); }
.band-navy .ticks li::before { background: var(--brand-orange); }

/* ---------- team ---------- */
.person { display: grid; gap: var(--space-2); align-content: start; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-mist); }
.person h3 { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; margin-top: var(--space-2); }
.person .role { margin: 0; }
.person p { font-size: 15px; line-height: 24px; margin: 0; }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--space-3); background: var(--surface-mist); padding: var(--space-5); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } .form { padding: var(--space-4); } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field legend { font: 600 15px/20px var(--font-sans); padding: 0; }
.field input, .field select, .field textarea { font: 400 16px/24px var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: 11px 12px; width: 100%; }
.field textarea { resize: vertical; min-height: 120px; }
.field .hint { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.field .error { font-size: 14px; line-height: 20px; color: #A3240E; font-weight: 600; }
.field [aria-invalid="true"] { border-color: #A3240E; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 8px 16px; border: 1px solid var(--control-border); border-radius: 999px; font-size: 15px; line-height: 20px; background: var(--surface); }
.chip input:checked + span { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.form .btn { justify-self: start; }
.form-done { background: var(--surface-mist); padding: var(--space-5); display: grid; gap: var(--space-3); }

/* ---------- faq ---------- */
.faq details { border-bottom: 1px solid var(--hairline); padding-block: var(--space-3); }
.faq details:first-child { border-top: 1px solid var(--hairline); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-sans); font-weight: 400; color: var(--accent-text); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-top: var(--space-3); max-width: var(--text-max); }

/* ---------- footer ---------- */
.site-footer { background: var(--brand-navy); color: var(--on-navy); padding-block: var(--space-6) var(--space-5); font-size: 15px; line-height: 24px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 1199px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-grid > :first-child { grid-column: 1 / -1; } }
.footer-grid h2 { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #FF9A4D; margin-bottom: var(--space-3); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid a { text-decoration: none; color: var(--on-navy); }
.footer-grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-logo { height: 48px; width: auto; margin-bottom: var(--space-3); }
.footer-grid p { color: var(--on-navy-muted); }
.footer-base { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--navy-hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); color: var(--on-navy-muted); font-size: 14px; }
.footer-base a { color: var(--on-navy-muted); }
.contact-lines { display: grid; gap: 4px; }
.contact-lines span { color: var(--on-navy); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- misc ---------- */
.center { text-align: center; }
.mt-5 { margin-top: var(--space-5); }
.mt-4 { margin-top: var(--space-4); }
.full-photo { margin: 0; }
.full-photo img { width: 100%; height: clamp(320px, 52vw, 680px); object-fit: cover; }
.full-photo figcaption { padding: var(--space-2) var(--gutter) 0; }
.reveal { opacity: 1; transform: none; }
.js .reveal { transition: opacity .3s ease, transform .3s ease; }
.js .reveal.is-hidden { opacity: 0; transform: translateY(12px); }
.breadcrumb { font-size: 14px; line-height: 20px; color: var(--on-navy-muted); margin: 0; }
.breadcrumb a { color: var(--on-navy); text-underline-offset: 3px; }
.page-head .breadcrumb { color: var(--ink-muted, #5b6472); margin-bottom: var(--space-3); }
.page-head .breadcrumb a { color: var(--ink); }

/* grid children may shrink below their content width (prevents sideways scroll on phones) */
.split > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .steps > *, .form-row > *, .footer-grid > * { min-width: 0; }
.field select { max-width: 100%; }

/* ---------- cookie banner ---------- */
.cookie-banner { position: fixed; left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 560px; margin-left: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); box-shadow: 0 8px 32px rgba(2,16,51,.18); padding: var(--space-4); display: grid; gap: var(--space-3); font-size: 15px; line-height: 24px; }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; }
.cookie-banner a { color: var(--accent-text); font-weight: 600; text-underline-offset: 3px; }
.cookie-banner .btn { padding: 11px 22px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- language switch (top right of the header) ---------- */
.lang-switch { display: flex; align-items: center; gap: 2px; font: 700 13px/16px var(--font-sans); letter-spacing: .08em; flex: none; }
.lang-switch span, .lang-switch a { padding: 8px 8px; border-radius: var(--radius-sm); }
.lang-switch span { color: var(--ink); border-bottom: 2px solid var(--brand-orange); border-radius: 0; padding-bottom: 6px; }
.lang-switch a { color: var(--ink-muted); text-decoration: none; }
.lang-switch a:hover { color: var(--ink); background: var(--surface-mist); }
.lang-switch::before { content: ""; width: 1px; height: 20px; background: var(--hairline); margin-right: 8px; }
.site-header.is-over .lang-switch span { color: var(--on-navy); }
.site-header.is-over .lang-switch a { color: var(--on-navy-muted); }
.site-header.is-over .lang-switch a:hover { color: #fff; background: rgba(255,255,255,.12); }
.site-header.is-over .lang-switch::before { background: rgba(255,255,255,.35); }
.site-header .bar > .btn { margin-left: 0; }
@media (max-width: 1439px) {
  .lang-switch { margin-left: auto; }
  .lang-switch::before { display: none; }
  .menu-toggle { margin-left: var(--space-2); }
  .site-header.menu-open .lang-switch span { color: var(--ink); }
  .site-header.menu-open .lang-switch a { color: var(--ink-muted); }
}
/* French label for draft markers */
:lang(fr) .tbc::after { content: " · à confirmer"; }
.quote figcaption .caption + .caption { font-style: italic; }
@media (max-width: 1439px) { .site-header .bar { gap: 12px; } .lang-switch span, .lang-switch a { padding: 8px 6px; } }
@media (max-width: 360px) {
  .logo-link img { height: 30px; }
  .site-header .bar { gap: 6px; }
  .lang-switch span, .lang-switch a { padding: 8px 4px; min-width: 32px; }
  .menu-toggle { margin-left: 4px; padding-inline: 10px; }
}
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } }

/* ---------- responsive pass (Oct 2026 audit) ---------- */
/* readable line length */
p.caption, figcaption.caption, .caption, p.meta { max-width: 70ch; }
.facts { max-width: 56rem; }
/* wide screens: use more of the width */
@media (min-width: 1800px) { :root { --content-max: 1440px; } }
/* mobile menu scrolls when it is taller than the screen */
@media (max-width: 1439px) {
  .site-header.menu-open .main-nav { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
/* footer links: bigger hit area without changing the look */
.footer-grid a { display: inline-block; padding-block: 4px; }
.footer-grid ul { gap: 4px; }
/* touch screens: tap targets at least 44px */
@media (pointer: coarse) {
  .footer-grid a, .footer-base a, .footer-base .linklike { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-grid ul { gap: 0; }
  a.link:not(.caption a):not(.prose a) { display: inline-flex; align-items: center; min-height: 44px; }
  .lang-switch a, .lang-switch span { min-height: 44px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .menu-toggle { min-height: 44px; }
  .logo-link { padding-block: 7px; }
  .faq summary { padding-block: 6px; min-height: 44px; }
  .chip span { padding: 11px 18px; }
  .cookie-banner a { text-underline-offset: 4px; }
}
/* short screens (landscape phones): compact draft bar and cookie banner */
@media (max-height: 500px) {
  .draft-bar { font-size: 12px; line-height: 16px; padding-block: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-link img { height: 32px; }
  .cookie-banner { max-width: none; left: var(--space-2); right: var(--space-2); bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); padding: var(--space-2) var(--space-3); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); font-size: 14px; line-height: 20px; }
  .cookie-banner .actions { gap: var(--space-2); flex-wrap: nowrap; }
  .cookie-banner .btn { padding: 8px 16px; }
  .cookie-banner a { display: inline; padding: 0; }
}
/* the open mobile menu sits above the cookie banner */
.site-header.menu-open ~ .cookie-banner { display: none; }
/* very narrow phones (320–360px): keep logo, FR/EN and Menu on one line */
@media (max-width: 360px) {
  .lang-switch span, .lang-switch a { min-width: 32px; padding-inline: 4px; }
  .menu-toggle { padding-inline: 10px; }
}
/* phones: lighter cookie banner and draft bar */
@media (max-width: 480px) {
  .cookie-banner { left: var(--space-2); right: var(--space-2); padding: var(--space-3); gap: var(--space-2); font-size: 14px; line-height: 21px; }
  .cookie-banner a { display: inline; padding: 0; }
  .cookie-banner .btn { padding: 10px 18px; }
  .draft-bar { font-size: 12px; line-height: 16px; padding-block: 5px; }
}

/* ---------- link cards (pages built from blocks) ---------- */
.link-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); background: var(--surface); border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.section:not(.section--mist) .link-card { background: var(--surface-mist); border-color: transparent; }
.link-card:hover { border-color: var(--ink); }
.link-card h3 { margin: 0; }
.link-card p { margin: 0; color: var(--ink-muted); }
.link-card-go { color: var(--accent-text); font-weight: 700; font-size: 20px; line-height: 20px; }

/* ---------- legal pages ---------- */
.legal { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.legal-toc { position: sticky; top: 150px; }
.legal-toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; font-size: 15px; line-height: 22px; }
.legal-toc a { color: var(--ink); text-underline-offset: 3px; display: inline-block; padding-block: 3px; }
.legal-text { max-width: 44rem; }
.legal-section + .legal-section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--hairline); }
.legal-section h2 { margin: 0 0 var(--space-2); }
[id] { scroll-margin-top: 150px; }
@media (max-width: 860px) { .legal { grid-template-columns: 1fr; gap: var(--space-4); } .legal-toc { position: static; } }

/* ---------- step-by-step enquiry form ---------- */
.radios { display: grid; gap: 8px; }
.radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--control-border); cursor: pointer; font-size: 16px; line-height: 24px; }
.radio input { margin: 3px 0 0; accent-color: var(--brand-navy); width: 18px; height: 18px; flex: none; }
.radio:has(input:checked) { border-color: var(--brand-navy); box-shadow: inset 0 0 0 1px var(--brand-navy); }
.radio:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.form-step { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-3); min-width: 0; }
.form-step-title { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; padding: 0; margin-bottom: var(--space-1); }
.form-progress { margin: 0; font: 700 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.form-note { margin: 0; padding: 12px 14px; background: #FFF4E8; border-left: 3px solid var(--brand-orange); }
.form-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.js .form--steps .form-step:not(.is-current) { display: none; }
html:not(.js) .form-progress, html:not(.js) [data-step-back], html:not(.js) [data-step-next] { display: none; }
@media (pointer: coarse) { .nav-col ul a { padding-block: 11px; } .nav-panel-foot a { display: inline-flex; align-items: center; min-height: 44px; } }
/* the hidden attribute always wins over component display rules */
[hidden] { display: none !important; }
.legal-section .ticks { margin-block: var(--space-2); }
.nav-col-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); max-width: 22ch; }
@media (max-width: 1439px) { .nav-col-note { display: none; } }
.page-head .tbc { display: inline; }
.page-head p.mt-4 { max-width: 70ch; }
.footer-base a, .footer-base .linklike { display: inline-block; padding-block: 4px; }
@media (pointer: coarse) { .legal-toc a { padding-block: 10px; } }

/* ---------- phase 2: planning pages ---------- */
/* tab bar across a country's guides */
.guide-tabs { border-bottom: 1px solid var(--hairline); background: var(--surface); }
.guide-tabs .wrap { display: flex; align-items: center; gap: 4px 28px; flex-wrap: wrap; padding-block: 6px; }
.guide-tabs-name { font: 700 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin-right: 8px; }
.guide-tabs a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 20px; padding-block: 12px; border-bottom: 2px solid transparent; }
.guide-tabs a:hover, .guide-tabs a[aria-current="page"] { border-bottom-color: var(--brand-orange); }
@media (max-width: 640px) { .guide-tabs .wrap { flex-wrap: nowrap; overflow-x: auto; gap: 20px; scrollbar-width: none; } .guide-tabs-name { display: none; } .guide-tabs a { white-space: nowrap; } }

/* season ratings */
.rate { display: inline-block; font: 700 12px/16px var(--font-sans); letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.rate--best { background: var(--brand-navy); color: #fff; }
.rate--good { background: #DCE6F7; color: var(--brand-navy); }
.rate--some { background: #FFF1E3; color: #8A3A00; box-shadow: inset 0 0 0 1px #F3D3B5; }
.rate--low { background: var(--surface-mist); color: var(--ink-muted); }
.rate-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--space-3); font-size: 14px; color: var(--ink-muted); }

/* month tables */
.season-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.season-table th, .season-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hairline); }
.season-table thead th { font: 700 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); padding-bottom: 10px; }
.season-table tbody th { font-weight: 700; white-space: nowrap; }
.season-table thead a { color: inherit; text-underline-offset: 3px; }
.season-grid td.grid-text { color: var(--ink-muted); min-width: 18rem; }
.fest-table tbody th { white-space: normal; min-width: 11rem; }
.fest-country { display: block; font-weight: 400; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.fest-table td:last-child { white-space: nowrap; }
@media (max-width: 900px) {
  .season-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .season-table, .season-table tbody, .season-table tr, .season-table th, .season-table td { display: block; }
  .season-table tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
  .season-table th, .season-table td { border: 0; padding: 4px 0; }
  .season-table tbody th { font-size: 17px; margin-bottom: 6px; white-space: normal; }
  .season-table td[data-label]::before { content: attr(data-label); display: block; font: 700 11px/14px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
  .season-grid tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .season-grid tbody th, .season-grid td.grid-text { grid-column: 1 / -1; }
  .season-grid td.grid-text { min-width: 0; }
  .fest-table td:last-child { white-space: normal; }
}

/* short topic blocks (travel tips) */
.topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.topic h3, .topic h2 { margin: 0 0 var(--space-2); }
.topic p { margin: 0 0 var(--space-2); }
.topic { min-width: 0; padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
@media (max-width: 760px) { .topics { grid-template-columns: 1fr; gap: var(--space-4); } }

/* browse by month (home) */
.month-row ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.month-row a { display: inline-block; padding: 8px 14px; border: 1px solid var(--control-border); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 20px; }
.month-row a:hover { border-color: var(--ink); }
@media (pointer: coarse) { .month-row a { padding-block: 12px; } .guide-tabs a { padding-block: 14px; } }

/* ---------- phase 3: region guides ---------- */
.verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.verdict-col { min-width: 0; padding-top: var(--space-3); border-top: 3px solid var(--brand-navy); }
.verdict-col--no { border-top-color: var(--brand-orange); }
.verdict-item { padding-block: var(--space-3); border-bottom: 1px solid var(--hairline); }
.verdict-item h3 { font: 600 17px/24px var(--font-sans); margin: 0 0 4px; }
.verdict-item p { margin: 0; color: var(--ink-muted); }
@media (max-width: 760px) { .verdict { grid-template-columns: 1fr; gap: var(--space-4); } }
.region-row ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.region-row a { display: inline-block; padding: 8px 14px; border: 1px solid var(--control-border); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 20px; }
.region-row a:hover { border-color: var(--ink); }
.journey-text .region-row { margin-top: var(--space-2); }
.journey-text .region-row a { padding: 6px 12px; font-size: 14px; }
@media (pointer: coarse) { .region-row a, .journey-text .region-row a { padding-block: 12px; } a.guide-tabs-name { display: inline-block; padding-block: 14px; } }

/* Text hero: region guides with no suitable photo yet (build/profiles.py) */
.place-hero { position: relative; overflow: hidden; background: var(--surface-mist); border-bottom: 1px solid var(--hairline); }
.place-hero::before { content: ""; position: absolute; inset: -10% -12% -10% 38%; background: url("contours.svg") center / cover no-repeat; opacity: .09; pointer-events: none; }
.place-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; min-height: 520px; padding-block: var(--space-6); }
.place-hero-text { display: grid; gap: var(--space-3); }
.place-hero-text .breadcrumb { color: var(--ink-muted); }
.place-hero-text .breadcrumb a { color: var(--ink); }
.place-hero-text .lead { max-width: 620px; margin: 0; }
.place-hero-text .actions { margin-top: var(--space-2); }
.place-hero-quick { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: 15px; }
.place-hero-quick dt, .place-card-facts dt { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.place-hero-quick dd { margin: 2px 0 0; font-weight: 600; max-width: 60ch; }
.place-card { background: var(--surface); border-top: 4px solid var(--brand-orange); padding: var(--space-5); box-shadow: 0 18px 40px -24px rgba(2,16,51,.35); }
.place-card .eyebrow { margin: 0; }
.place-card-name { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 600; margin: var(--space-2) 0 var(--space-3); }
.place-card-text { margin: 0; font-size: 16px; line-height: 26px; }
.place-card-facts { margin: var(--space-4) 0 0; display: grid; gap: 0; }
.place-card-facts > div { padding-block: 12px; border-top: 1px solid var(--hairline); }
.place-card-facts dd { margin: 4px 0 0; font-size: 15px; line-height: 22px; font-weight: 600; }
@media (max-width: 1024px) { .place-hero-grid { grid-template-columns: 1fr; gap: var(--space-5); min-height: 0; } .place-card, .place-hero-text { max-width: 680px; } .place-hero::before { inset: auto -30% -20% 20%; height: 70%; } }
@media (max-width: 640px) { .place-card { padding: var(--space-4); } .place-card-name { font-size: 34px; line-height: 38px; } }

/* Journeys list: filters and tiles (Phase 4) */
.jfilters { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--hairline); }
.jfilter .eyebrow { margin: 0 0 var(--space-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 600 15px/20px var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--control-border); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--on-navy); }
.chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (pointer: coarse) { .chip { padding-block: 12px; } }
.jfilter-count { margin: 0; }
.jgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
@media (max-width: 1024px) { .jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .jgrid { grid-template-columns: 1fr; } }
.jtile { display: flex; flex-direction: column; background: var(--surface-mist); }
.jtile-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.jtile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.jtile:hover .jtile-photo img { transform: scale(1.03); }
.jtile-text { display: grid; gap: var(--space-2); padding: var(--space-4); flex: 1; align-content: start; }
.jtile-text p, .jtile-text h2 { margin: 0; }
.jtile-text h2 a { color: var(--ink); text-decoration: none; }
.jtile-text h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.jtile-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: auto !important; padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: 15px; }
.jtile[hidden] { display: none !important; }
.jempty { padding: var(--space-5) 0; }
.before-rows { display: grid; gap: var(--space-4); }
.before-row .eyebrow { margin: 0 0 var(--space-2); }
/* Day trips */
.trips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1024px) { .trips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .trips { grid-template-columns: 1fr; } }
.trip { background: var(--surface-mist); border-top: 3px solid var(--brand-orange); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.trip p, .trip h3 { margin: 0; }
.trip-note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (pointer: coarse) { .jtile-text h2 a, .journey-text h2 a, .journey-text h3 a { display: inline-block; padding-block: 6px; } }
/* Six menu items: compact spacing until there is room (French labels are longer) */
@media (min-width: 1440px) and (max-width: 1799px) {
  .site-header .bar { gap: var(--space-4); }
  .nav-list { gap: 20px; }
  .nav-top { font-size: 14.5px; }
}

/* Journal articles and brochures (Phase 6) */
.article { max-width: 720px; margin-inline: auto; }
.article > p, .article li { font-size: 18px; line-height: 30px; }
.article h2 { margin: var(--space-5) 0 var(--space-3); }
.article .ticks { margin: var(--space-3) 0; }
.article-meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0 0 4px; }
.article .caption { margin-top: 0; }
.article-tip { background: var(--surface-mist); border-left: 3px solid var(--brand-orange); padding: var(--space-4); margin: var(--space-4) 0; }
.article-tip p { margin: 0; }
.article-tip .eyebrow { margin-bottom: var(--space-2); }
.jgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .jgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .jgrid--4 { grid-template-columns: 1fr; } }

/* Destinations map: places only, no borders */
.map-split { align-items: center; }
.guides-map { margin: 0; }
.guides-map svg { width: 100%; height: auto; max-width: 720px; margin-inline: auto; display: block; font-family: var(--font-sans); }
.map-sea { fill: #E7ECF3; }
.map-land { fill: var(--surface); }
.map-country { font: 600 15px var(--font-sans); letter-spacing: .3em; text-transform: uppercase; fill: #8C96AD; text-anchor: middle; }
.map-pt circle { fill: var(--brand-orange); stroke: var(--surface); stroke-width: 2; }
.map-pt .dot-lg, .map-pt .num, .map-list { display: none; }
.map-pt .lbl { font-size: 13px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.map-pt:hover circle, .map-pt:focus-visible circle { fill: var(--brand-navy); }
.map-pt:hover text, .map-pt:focus-visible text { text-decoration: underline; }
.map-pt:focus-visible { outline: none; }
.map-pt:focus-visible text { fill: var(--accent-text); }
.map-home circle:first-child { fill: none; stroke: var(--brand-navy); stroke-width: 2; }
.map-home circle:last-child { fill: var(--brand-navy); }
.map-key { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.map-key-home { width: 12px; height: 12px; border: 2px solid var(--brand-navy); border-radius: 50%; display: inline-block; }
@media (max-width: 600px) {
  .map-pt .lbl, .map-pt .dot { display: none; }
  .map-pt .dot-lg, .map-pt .num { display: inline; }
  .map-pt .num { font: 700 15px var(--font-sans); fill: #fff; pointer-events: none; }
  .map-country { font-size: 22px; }
  .map-list { display: block; columns: 2; column-gap: var(--space-4); margin: var(--space-3) 0 0; padding-left: 1.6em; font-size: 15px; line-height: 22px; }
  .map-list li { break-inside: avoid; margin-bottom: 4px; }
  .map-list li::marker { color: var(--accent-text); font-weight: 700; }
  .map-list a { color: var(--ink); display: inline-block; padding-block: 11px; }
}
.section--mist .journey, .section--mist .jtile { background: var(--surface); }

/* Enquiry form: spam trap (hidden from people) and error message */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: var(--space-3) 0 0; padding: 12px 16px; border-left: 3px solid #B42318; background: #FEF3F2; color: #7A271A; }
/* Text hero with a photo above the place card (photos too small for a full-width banner) */
.place-side { display: grid; }
.place-photo { margin: 0; }
.place-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.place-photo figcaption { margin-top: 8px; }
.place-side { gap: var(--space-3); align-content: center; padding-block: var(--space-5); }
.place-photo figcaption { margin-top: 6px; }

/* photo gallery (region guides) */
.gallery { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--space-3); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.gallery figcaption { margin-top: 8px; }
@media (min-width: 641px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 641px) and (max-width: 1024px) { .gallery figure:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1025px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

/* radio options in the enquiry form: keep their own padding (the generic .field label rule removed it) */
.field label.radio { padding: 12px 14px; font: 400 16px/24px var(--font-sans); }
.field label.radio input { margin-top: 3px; }

/* numbered map list on phones: number lines up with the first line of a wrapped name; one column on the narrowest phones */
.map-list a { display: block; padding-block: 9px; }
@media (max-width: 359px) { .map-list { columns: 1; } }

/* month-by-month grid: four countries side by side on tablets */
@media (min-width: 560px) and (max-width: 900px) { .season-grid tr { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* footer on laptops and small desktops: all link columns on one row under the company block, none left alone on a second row */
@media (min-width: 961px) and (max-width: 1199px) { .footer-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }

/* blocks of 4 (values, facts): 2 + 2 on tablets, 4 in a row on wide screens, so none is left alone */
.steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .steps:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } }
/* even-numbered blocks on small tablets: two columns instead of one long list */
@media (min-width: 600px) and (max-width: 860px) { .steps:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* four cards in a three-column grid: show them 2 + 2 instead of 3 + 1 */
@media (min-width: 861px) { .grid-3:has(> :nth-child(4):last-child), .jgrid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* small text links: at least 24px tall to tap */
a.link { display: inline-block; padding-block: 2px; }
.season-table thead a { display: inline-block; padding-block: 5px; }