/* ==========================================================================
   Roads of Adventure — design system
   Mediterranean Sun: vanilla ground, deep navy type, coral action, sea-blue
   wayfinding, sunshine for labels, peach for editorial panels. No green.
   ========================================================================== */

:root {
  /* brand */
  --vanilla:     #FFF8EF;
  --white:       #FFFFFF;
  --navy:        #243047;
  --coral:       #E77752;
  --coral-deep:  #C85B38;
  --sea:         #75BBD0;
  --sea-deep:    #2E7E97;
  --sun:         #F1C27B;
  --peach:       #F3E0D2;
  --border:      #E9E1D7;
  --muted:       #687080;

  /* roles */
  --bg:          var(--vanilla);
  --surface:     var(--white);
  --panel:       var(--peach);
  --fg:          var(--navy);
  --fg-muted:    var(--muted);
  --rule:        var(--border);
  --action:      var(--coral);
  --action-fg:   #FFFFFF;
  --action-hover:var(--coral-deep);
  --link:        var(--sea-deep);
  --label:       #8A5A1E;
  --label-bg:    #FDF1DC;

  --shadow-sm: 0 1px 2px rgba(36,48,71,.05);
  --shadow:    0 2px 4px rgba(36,48,71,.04), 0 12px 28px -18px rgba(36,48,71,.30);

  --maxw: 1200px;
  --gutter: 20px;
  --radius: 14px;
  --radius-sm: 9px;

  --f-display: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --f-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #161E2D;
    --surface:   #1E2838;
    --panel:     #2A2A33;
    --fg:        #F6EEE4;
    --fg-muted:  #A3AEC0;
    --rule:      #333F52;
    --coral:     #F08A64;
    --action:    #F08A64;
    --action-fg: #1A2230;
    --action-hover: #FFA07C;
    --link:      #8FD0E3;
    --label:     #F1C27B;
    --label-bg:  #352C1C;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 2px 4px rgba(0,0,0,.3), 0 14px 32px -20px rgba(0,0,0,.85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#161E2D; --surface:#1E2838; --panel:#2A2A33;
  --fg:#F6EEE4; --fg-muted:#A3AEC0; --rule:#333F52;
  --coral:#F08A64; --action:#F08A64; --action-fg:#1A2230; --action-hover:#FFA07C;
  --link:#8FD0E3; --label:#F1C27B; --label-bg:#352C1C;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 2px 4px rgba(0,0,0,.3), 0 14px 32px -20px rgba(0,0,0,.85);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 17px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--sea); outline-offset: 2px; border-radius: 3px;
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; margin: 0; line-height: 1.14; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.012em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.42rem); }
p  { margin: 0; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.section { padding-block: clamp(48px, 7vw, 84px); }
.section--panel { background: var(--panel); }
.section--surface { background: var(--surface); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--fg-muted); max-width: 62ch; }
.small { font-size: 14.5px; color: var(--fg-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skiplink:focus { left: 0; }

/* ---------- label ---------- */
.label {
  display: inline-block; font: 700 12px/1 var(--f-body); letter-spacing: .07em;
  color: var(--label); background: var(--label-bg);
  padding: 6px 11px; border-radius: 99px; white-space: nowrap;
}
.label--sea { color: #17495A; background: #DFF0F6; }
.label--coral { color: #8A3317; background: #FBE4DA; }
:root[data-theme="dark"] .label--sea,
:root[data-theme="dark"] .label--coral { color: var(--fg); background: #2C3A4E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .label--sea,
  :root:not([data-theme="light"]) .label--coral { color: var(--fg); background: #2C3A4E; }
}

/* status pips */
.status { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--f-body); color: var(--fg-muted); }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rule); flex: none; }
.status--published::before { background: var(--coral); }
.status--progress::before { background: var(--sun); }
.status--planned::before { background: transparent; border: 2px solid var(--rule); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 700 15.5px/1 var(--f-body); text-decoration: none; cursor: pointer;
  background: var(--action); color: var(--action-fg);
  padding: 15px 24px; min-height: 48px; border: 1px solid transparent; border-radius: 99px;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--action-hover); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule); }
.btn--ghost:hover { background: var(--surface); border-color: var(--fg-muted); }
.btn--light { background: rgba(255,255,255,.94); color: var(--navy); }
.btn--light:hover { background: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--outline-light:hover { background: rgba(255,255,255,.16); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* focused only to pull the top of the page into view in a preview frame */
.site-header[tabindex]:focus { outline: none; }
.site-header.is-stuck { border-bottom-color: var(--rule); box-shadow: var(--shadow-sm); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--fg); margin-right: auto; }
.brand-mark { width: 40px; height: 34px; flex: none; }
.brand-name { font-family: var(--f-display); font-size: 23px; letter-spacing: -.012em; white-space: nowrap; }

.mainnav { display: flex; align-items: center; gap: 4px; }
.mainnav > li { list-style: none; position: relative; }
.mainnav ul { margin: 0; padding: 0; }
.mainnav > li > a, .navtoggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 15px/1 var(--f-body); color: var(--fg); text-decoration: none;
  padding: 11px 13px; border-radius: 9px; background: none; border: 0; cursor: pointer;
}
.mainnav > li > a:hover, .navtoggle:hover { background: var(--surface); }
.mainnav > li > a[aria-current="page"] { color: var(--coral); }
.navtoggle svg { transition: transform .18s ease; }
.mainnav > li[data-open="true"] .navtoggle svg { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 254px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 8px; display: none;
}
.mainnav > li[data-open="true"] .submenu { display: block; }
.submenu li { list-style: none; }
.submenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 7px; text-decoration: none; color: var(--fg);
  font: 500 14.5px/1.3 var(--f-body);
}
.submenu a:hover { background: var(--bg); }
.searchbtn, .menubtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: 1px solid var(--rule); color: var(--fg); cursor: pointer;
}
.searchbtn:hover, .menubtn:hover { background: var(--surface); }
.menubtn { display: none; }

@media (max-width: 1020px) {
  .mainnav { display: none; }
  .menubtn { display: inline-flex; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 120; display: none;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
}
.drawer[open] { display: block; }
.drawer::backdrop { background: rgba(36,48,71,.5); }
.drawer-panel {
  position: absolute; inset: 0 0 0 auto; width: min(380px, 88vw);
  background: var(--bg); border-left: 1px solid var(--rule);
  padding: 18px var(--gutter) 32px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.drawer a { display: block; padding: 13px 4px; text-decoration: none; color: var(--fg);
  font: 600 17px/1.3 var(--f-body); border-bottom: 1px solid var(--rule); }
.drawer .sub a { font-weight: 500; font-size: 15px; padding-left: 16px; color: var(--fg-muted); }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero-media { position: relative; aspect-ratio: 16 / 9; max-height: 74vh; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,34,48,.74) 0%, rgba(26,34,48,.34) 46%, rgba(26,34,48,.05) 80%);
}
.hero-body { position: absolute; inset: auto 0 0 0; padding-block: 0 clamp(26px, 4vw, 54px); }
.hero-body .wrap { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hero h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 20px rgba(14,20,30,.45); }
.hero p { color: #F3EAE0; max-width: 48ch; font-size: clamp(1rem, 1.5vw, 1.18rem); text-shadow: 0 1px 10px rgba(14,20,30,.5); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 680px) {
  .hero-media { aspect-ratio: 4 / 5; max-height: none; }
  .hero-body { padding-bottom: 26px; }
}

/* page hero (interior) */
.pagehero { padding-block: clamp(40px, 6vw, 72px) clamp(24px, 3vw, 36px); }
.pagehero .wrap { display: flex; flex-direction: column; gap: 14px; }

/* ---------- section heading ---------- */
.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.sechead-text { display: flex; flex-direction: column; gap: 10px; max-width: 58ch; }
.sechead .eyebrow {
  font: 700 12.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--coral);
}
.morelink { font: 700 15px/1 var(--f-body); color: var(--link); text-decoration: none; white-space: nowrap; }
.morelink:hover { text-decoration: underline; }

/* ---------- grids ---------- */
.grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- destination card ---------- */
.dcard {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.dcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sea); }
.dcard-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); position: relative; }
.dcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.dcard:hover .dcard-media img { transform: scale(1.035); }
.dcard-plate {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--navy);
  background:
    radial-gradient(120% 110% at 18% 0%, rgba(241,194,123,.55) 0%, rgba(241,194,123,0) 58%),
    radial-gradient(100% 100% at 100% 100%, rgba(117,187,208,.5) 0%, rgba(117,187,208,0) 60%),
    var(--peach);
  text-align: center; padding: 18px;
}
:root[data-theme="dark"] .dcard-plate { color: var(--fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dcard-plate { color: var(--fg); } }
.dcard-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.dcard-country { font: 700 12.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sea-deep); }
.dcard h3 { font-size: 1.35rem; }
.dcard p { color: var(--fg-muted); font-size: 15.5px; }
.dcard-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dcard-go { font: 700 14.5px/1 var(--f-body); color: var(--coral); }

/* ---------- article card ---------- */
.acard {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
a.acard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.acard-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); }
.acard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.acard:hover .acard-media img { transform: scale(1.035); }
.acard-body { padding: 17px 19px 21px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.acard-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font: 600 13px/1 var(--f-body); color: var(--fg-muted); }
.acard-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.acard h3 { font-size: 1.22rem; }
.acard p { color: var(--fg-muted); font-size: 15px; }
.acard-go { margin-top: auto; padding-top: 10px; font: 700 14.5px/1 var(--f-body); color: var(--coral); }

/* ---------- featured itinerary ---------- */
.feature {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.feature-media { position: relative; min-height: 340px; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.feature-route { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font: 600 14.5px/1 var(--f-body); color: var(--fg-muted); }
.feature-route span.arrow { color: var(--sea-deep); }
.feature-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 20px;
  border-top: 1px solid var(--rule); padding-top: 16px; }
.feature-facts div { display: flex; flex-direction: column; gap: 3px; }
.feature-facts dt, .feature-facts .k { font: 700 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.feature-facts .v { font-family: var(--f-display); font-size: 1.1rem; }
@media (max-width: 860px) { .feature { grid-template-columns: minmax(0, 1fr); } .feature-media { min-height: 0; aspect-ratio: 16/9; } }

/* ---------- promise cards ---------- */
.promise {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 11px;
}
.promise .num {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--label-bg); color: var(--label); font: 700 15px/1 var(--f-body);
}
.promise h3 { font-size: 1.16rem; }
.promise p { color: var(--fg-muted); font-size: 15px; }

/* ---------- family story ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.story img { border-radius: var(--radius); width: 100%; height: auto; }
@media (max-width: 820px) { .story { grid-template-columns: minmax(0, 1fr); } }

/* ---------- newsletter ---------- */
.news { background: var(--navy); color: #F6EEE4; border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); }
.news h2 { color: #fff; }
.news p { color: #C8D2E0; max-width: 52ch; }
.news form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; max-width: 540px; }
.news input {
  flex: 1 1 240px; min-width: 0; font: 400 16px/1 var(--f-body);
  padding: 15px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07); color: #fff;
}
.news input::placeholder { color: #93A1B5; }
.news .small { color: #93A1B5; }

/* ---------- filters ---------- */
.filters { display: flex; gap: 9px; flex-wrap: wrap; }
.filter {
  font: 600 14.5px/1 var(--f-body); color: var(--fg); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 99px; padding: 11px 17px; min-height: 44px; cursor: pointer;
}
.filter:hover { border-color: var(--sea); }
.filter[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.searchfield { display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 99px; padding: 4px 6px 4px 18px; max-width: 460px; }
.searchfield input { flex: 1; min-width: 0; border: 0; background: none; font: 400 16px/1 var(--f-body);
  color: var(--fg); padding: 13px 0; }
.searchfield input:focus { outline: none; }
.searchfield svg { flex: none; color: var(--fg-muted); }

.emptystate { padding: 40px 0; color: var(--fg-muted); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: #C8D2E0; padding-block: clamp(40px, 5vw, 64px) 32px; margin-top: clamp(40px, 6vw, 80px); }
.site-footer a { color: #F6EEE4; text-decoration: none; }
.site-footer .brand-mark { width: 38px; height: 32px; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-col h4 { font-family: var(--f-body); font-weight: 700; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: #93A1B5; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 34ch; }
.footer-brand .brand-name { color: #fff; }
.footer-bottom { border-top: 1px solid #33405A; margin-top: 32px; padding-top: 20px;
  display: flex; gap: 14px 28px; flex-wrap: wrap; justify-content: space-between; font-size: 13.5px; color: #93A1B5; }

/* ==========================================================================
   Country hub + destination guide templates
   ========================================================================== */

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font: 500 14px/1 var(--f-body); color: var(--fg-muted); list-style: none; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--rule); }
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }

/* ---------- guide hero ---------- */
.ghero-media { aspect-ratio: 16 / 9; max-height: 62vh; overflow: hidden; border-radius: var(--radius); }
.ghero-media img { width: 100%; height: 100%; object-fit: cover; }
.ghero-head { display: flex; flex-direction: column; gap: 14px; max-width: 46rem; }
.ghero-labels { display: flex; gap: 9px; flex-wrap: wrap; }

/* verified strip */
.verified { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.verified div { display: flex; flex-direction: column; gap: 3px; }
.verified .k { font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.verified .v { font: 600 15px/1.3 var(--f-body); }

/* ---------- quick facts ---------- */
.qfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.qfacts div { background: var(--surface); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.qfacts .k { font: 700 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.qfacts .v { font-family: var(--f-display); font-size: 1.22rem; line-height: 1.2; }
.qfacts .n { font-size: 13.5px; color: var(--fg-muted); }

/* ---------- booking alert ---------- */
.bookalert { background: var(--label-bg); border: 1px solid #EBD4A8; border-left: 5px solid var(--sun);
  border-radius: var(--radius-sm); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
:root[data-theme="dark"] .bookalert { border-color: #4A3C22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bookalert { border-color: #4A3C22; } }
.bookalert h3 { font-family: var(--f-body); font-weight: 700; font-size: 16px; }
.bookalert ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 15.5px; }

/* ---------- layout with sticky contents ---------- */
.guidegrid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
nav.toc { columns: 1 !important; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
nav.toc h4 { font: 700 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted); margin: 0 0 12px; }
nav.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
nav.toc a { display: block; padding: 8px 12px; border-left: 2px solid var(--rule); color: var(--fg-muted);
  text-decoration: none; font: 500 14px/1.35 var(--f-body); }
nav.toc a:hover { color: var(--fg); background: var(--surface); }
nav.toc a.is-here { color: var(--coral); border-left-color: var(--coral); font-weight: 700; }
nav.toc .daymark { margin-top: 14px; font: 700 11.5px/1 var(--f-body); letter-spacing: .09em;
  text-transform: uppercase; color: var(--sea-deep); padding-left: 12px; }
nav.toc .daymark:first-child { margin-top: 0; }

.jumpbar { display: none; position: sticky; top: 72px; z-index: 60;
  background: var(--bg); border-bottom: 1px solid var(--rule); padding: 10px 0; }
.jumpbar select { width: 100%; font: 600 15px/1 var(--f-body); padding: 13px 14px; min-height: 46px;
  border: 1px solid var(--rule); border-radius: 9px; background: var(--surface); color: var(--fg); }
@media (max-width: 960px) {
  .guidegrid { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .jumpbar { display: block; }
}

/* ---------- day heading ---------- */
.dayhead { display: flex; align-items: baseline; gap: 16px; padding-top: 10px; }
.dayhead .n { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--sun); line-height: 1; }
.dayhead h2 { flex: 1; }

/* ---------- attraction card ---------- */
.attr { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.attr-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel); }
.attr-media img { width: 100%; height: 100%; object-fit: cover; }
.attr-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 16px; }
.attr h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.attr .intro { color: var(--fg-muted); }
.attr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; }
.attr-facts > div { background: var(--bg); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.attr-facts .k { font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.attr-facts .v { font-size: 14.8px; line-height: 1.5; }
.attr-facts .v em { font-style: normal; color: var(--fg-muted); }
.attr-foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--rule); padding-top: 14px; font-size: 14px; color: var(--fg-muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-body);
  padding: 6px 11px; border-radius: 99px; }
.pill--book { color: #8A3317; background: #FBE4DA; }
.pill--free { color: #17495A; background: #DFF0F6; }
.pill--visited { color: var(--fg-muted); background: var(--panel); }
:root[data-theme="dark"] .pill--book, :root[data-theme="dark"] .pill--free { color: var(--fg); background: #2C3A4E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill--book,
  :root:not([data-theme="light"]) .pill--free { color: var(--fg); background: #2C3A4E; }
}

/* ---------- family note / pro tip ---------- */
.famnote, .protip { border-radius: var(--radius-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.famnote { background: var(--panel); border-left: 5px solid var(--coral); }
.protip { background: var(--surface); border: 1px solid var(--rule); border-left: 5px solid var(--sea); }
.famnote h4, .protip h4 { font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------- costs ---------- */
.costs { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.costs caption { text-align: left; color: var(--fg-muted); font-size: 14px; padding-bottom: 10px; }
.costs th, .costs td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.costs th { font: 700 11.5px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-muted); }
.costs td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--fg); }
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 4px 8px; }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 17px 20px; font: 600 16px/1.4 var(--f-body);
  display: flex; justify-content: space-between; gap: 16px; align-items: center; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--coral); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 20px 18px; color: var(--fg-muted); }

/* ---------- prose ---------- */
.prose { display: flex; flex-direction: column; gap: 18px; }
.prose p { max-width: 68ch; }
.prose h2 { margin-top: 10px; }
.prose figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.prose figure img { border-radius: var(--radius-sm); width: 100%; height: auto; }
.prose figure.tall img { width: auto; max-width: min(100%, 62vh); }
.prose figcaption { font-size: 14px; color: var(--fg-muted); }
.prose h4, .attr-body h4 {
  font: 700 15px/1.3 var(--f-body); letter-spacing: .02em;
  color: var(--sea-deep); margin: 10px 0 -6px;
}

/* related */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

/* ==========================================================================
   Itinerary timeline, planning hub, map board, search
   ========================================================================== */

/* ---------- timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-day { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 0 22px; position: relative; }
.tl-day::before { content: ""; position: absolute; left: 36px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.tl-day:first-child::before { top: 34px; }
.tl-day:last-child::before { bottom: auto; height: 34px; }
.tl-num {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--sun); color: var(--fg);
  font-family: var(--f-display); font-size: 1.35rem; position: relative; z-index: 1; margin-left: 8px;
}
.tl-day[data-last="true"] .tl-num { border-color: var(--coral); }
.tl-body { padding: 0 0 30px; display: flex; flex-direction: column; gap: 10px; }
.tl-base { font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sea-deep); }
.tl-body h3 { font-size: 1.16rem; }
.tl-move { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1 var(--f-body);
  color: var(--fg-muted); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 99px; padding: 8px 13px; align-self: flex-start; }
.tl-links { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-links a { font: 600 13.5px/1 var(--f-body); color: var(--link); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 99px; padding: 8px 13px; }
.tl-links a:hover { border-color: var(--sea); }
@media (max-width: 560px) {
  .tl-day { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; }
  .tl-day::before { left: 25px; }
  .tl-num { width: 42px; height: 42px; font-size: 1.1rem; margin-left: 4px; }
}

/* ---------- booking priority table ---------- */
.priority { display: flex; flex-direction: column; gap: 12px; }
.prio {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px 18px;
  align-items: start; padding: 17px 19px; background: var(--surface);
  border: 1px solid var(--rule); border-left: 5px solid var(--rule); border-radius: var(--radius-sm);
}
.prio[data-level="hard"] { border-left-color: var(--coral); }
.prio[data-level="moderate"] { border-left-color: var(--sun); }
.prio[data-level="easy"] { border-left-color: var(--sea); }
.prio .what { font: 700 16px/1.3 var(--f-body); }
.prio .when { font-size: 14.5px; color: var(--fg-muted); }
.prio .miss { grid-column: 1 / -1; font-size: 14.5px; color: var(--fg-muted); border-top: 1px solid var(--rule); padding-top: 10px; }
@media (max-width: 640px) { .prio { grid-template-columns: minmax(0, 1fr); } }

/* ---------- planning principles ---------- */
.principle {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; align-items: start;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px;
}
.principle .n { font-family: var(--f-display); font-size: 2.1rem; color: var(--sun); line-height: 1; }
.principle h3 { font-size: 1.18rem; margin-bottom: 7px; }
.principle p { color: var(--fg-muted); font-size: 15.5px; }

.tool { background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.tool h3 { font-size: 1.1rem; }
.tool p { color: var(--fg-muted); font-size: 15px; }

/* ---------- map board ---------- */
.placecard { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; text-decoration: none;
  color: inherit; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; }
a.placecard:hover { border-color: var(--sea); box-shadow: var(--shadow); }
.placecard-media { aspect-ratio: 1; background: var(--panel); }
.placecard-media img { width: 100%; height: 100%; object-fit: cover; }
.placecard-body { padding: 15px 17px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.placecard h3 { font-size: 1.1rem; }
.placecard .sub { font: 600 12.5px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--sea-deep); }
.placecard p { font-size: 14.5px; color: var(--fg-muted); }
@media (max-width: 420px) { .placecard { grid-template-columns: 84px minmax(0, 1fr); } }

.routestrip { display: flex; flex-wrap: wrap; gap: 7px 9px; align-items: center; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.routestrip b { font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted); margin-right: 6px; }
.routestrip span.stop { font: 600 14.5px/1 var(--f-body); }
.routestrip span.arrow { color: var(--sea); }

/* ---------- search ---------- */
.result { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit; }
.result:hover h3 { color: var(--coral); }
.result .kind { font: 700 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sea-deep); }
.result h3 { font-size: 1.16rem; }
.result p { font-size: 15px; color: var(--fg-muted); }

/* ==========================================================================
   Travel map — illustrated geography
   ========================================================================== */
.fm-wrap { position: relative; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); }
.fm-stage { position: relative; aspect-ratio: 16 / 10; }
@media (max-width: 680px) { .fm-stage { aspect-ratio: 3 / 4; } }
#famap { width: 100%; height: 100%; display: block; touch-action: pan-y; }
#famap, #famap * { transition: none; }

.fm-ocean { fill: #DCEEF4; }
.fm-shelf { fill: #CDE6EF; stroke: none; }
.fm-land  { fill: #FBF1E2; stroke: #E0CFB8; stroke-width: 1.2; stroke-linejoin: round; }
.fm-border{ fill: none; stroke: #E0CFB8; stroke-width: .9; opacity: .8; }
.fm-grat  { fill: none; stroke: #BFDEE8; stroke-width: .7; opacity: .55; }
:root[data-theme="dark"] .fm-ocean { fill: #14283A; }
:root[data-theme="dark"] .fm-shelf { fill: #18324A; }
:root[data-theme="dark"] .fm-land  { fill: #26334A; stroke: #3A4A66; }
:root[data-theme="dark"] .fm-border{ stroke: #3A4A66; }
:root[data-theme="dark"] .fm-grat  { stroke: #24415C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fm-ocean { fill: #14283A; }
  :root:not([data-theme="light"]) .fm-shelf { fill: #18324A; }
  :root:not([data-theme="light"]) .fm-land  { fill: #26334A; stroke: #3A4A66; }
  :root:not([data-theme="light"]) .fm-border{ stroke: #3A4A66; }
  :root:not([data-theme="light"]) .fm-grat  { stroke: #24415C; }
}

/* routes and pins */
.fm-leg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fm-leg--transfer { stroke: #E77752; stroke-width: 3; }
.fm-leg--daytrip  { stroke: #2E7E97; stroke-width: 2.4; stroke-dasharray: 0.1 7; }
:root[data-theme="dark"] .fm-leg--daytrip { stroke: #8FD0E3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fm-leg--daytrip { stroke: #8FD0E3; }
}
/* a base we slept in reads heavier than a stop we only passed through */
.fm-pin:not(.is-base) .fm-pin-dot { fill: #FFF8EF; stroke: #2E7E97; stroke-width: 2.6; }
.fm-pin:not(.is-base) .fm-pin-label { font-weight: 600; }
:root[data-theme="dark"] .fm-pin:not(.is-base) .fm-pin-dot { fill: #16233C; stroke: #8FD0E3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fm-pin:not(.is-base) .fm-pin-dot { fill: #16233C; stroke: #8FD0E3; }
}
.fm-pin { cursor: pointer; }
.fm-pin-hit { fill: transparent; }
.fm-pin-dot { fill: #E77752; stroke: #FFF8EF; stroke-width: 2.2; }
.fm-pin-label { font: 700 11px var(--f-body); fill: #243047; paint-order: stroke;
  stroke: #FFF8EF; stroke-width: 3.4; stroke-linejoin: round; }
.fm-pin:hover .fm-pin-dot, .fm-pin:focus .fm-pin-dot { fill: #243047; r: 6; }
:root[data-theme="dark"] .fm-pin-dot { stroke: #16233C; }
:root[data-theme="dark"] .fm-pin-label { fill: #F6EEE4; stroke: #16233C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fm-pin-dot { stroke: #16233C; }
  :root:not([data-theme="light"]) .fm-pin-label { fill: #F6EEE4; stroke: #16233C; }
}

/* region landmarks */
/* ---- visited, not written up: quiet dots under everything else -------- */
.fm-visited { pointer-events: none; }
/* on a phone the whole-map view is too small to carry eleven more landmarks
   next to the region ones — the legend lists them instead */
@media (max-width: 680px) { .fm-visited { display: none; } }
.fm-seen-dot { fill: #E77752; stroke: #FFF8EF; stroke-width: 1.1; opacity: .85; }
.fm-seen-art { opacity: .92; }
.fm-seen-label { font: 600 9.5px var(--f-body); fill: #5A5041; text-anchor: middle;
  paint-order: stroke; stroke: #FFF8EF; stroke-width: 2.6; stroke-linejoin: round; }
:root[data-theme="dark"] .fm-seen-dot { fill: #16233C; stroke: #8A7E6A; }
:root[data-theme="dark"] .fm-seen-label { fill: #B6A88F; stroke: #16233C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fm-seen-dot { fill: #16233C; stroke: #8A7E6A; }
  :root:not([data-theme="light"]) .fm-seen-label { fill: #B6A88F; stroke: #16233C; }
}

.fm-region { cursor: pointer; }
.fm-leader { stroke: #243047; stroke-width: .9; stroke-dasharray: 3 5; opacity: .45; }
.fm-anchor { fill: #E77752; stroke: #FFF8EF; stroke-width: 2.4; }
.fm-region[data-status="planned"] .fm-anchor { fill: #FFF8EF; stroke: #E77752; }
.fm-region[data-status="progress"] .fm-anchor { fill: #F1C27B; stroke: #FFF8EF; }
.fm-region-name { font: 400 15px var(--f-display); fill: #243047; paint-order: stroke;
  stroke: #FFF8EF; stroke-width: 3; stroke-linejoin: round; }
.fm-region-note { font: 700 8.5px var(--f-body); fill: #687080; paint-order: stroke;
  stroke: #FFF8EF; stroke-width: 2.6; stroke-linejoin: round; }
.fm-region:hover g, .fm-region:focus g { transform-box: fill-box; }
.fm-region:hover .fm-region-name, .fm-region:focus .fm-region-name { fill: #E77752; }
.fm-region:focus { outline: none; }
.fm-region:focus .fm-anchor { stroke: #75BBD0; stroke-width: 4; }
:root[data-theme="dark"] .fm-region-name { fill: #F6EEE4; stroke: #16233C; }
:root[data-theme="dark"] .fm-region-note { fill: #A3AEC0; stroke: #16233C; }
:root[data-theme="dark"] .fm-anchor, :root[data-theme="dark"] .fm-pin-dot { stroke: #16233C; }
:root[data-theme="dark"] .fm-leader { stroke: #A3AEC0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fm-region-name { fill: #F6EEE4; stroke: #16233C; }
  :root:not([data-theme="light"]) .fm-region-note { fill: #A3AEC0; stroke: #16233C; }
  :root:not([data-theme="light"]) .fm-leader { stroke: #A3AEC0; }
}

/* controls */
.fm-bar { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; gap: 8px;
  flex-wrap: wrap; z-index: 2; }
.fm-bar button { font: 700 13.5px/1 var(--f-body); color: var(--fg); background: rgba(255,248,239,.94);
  border: 1px solid var(--rule); border-radius: 99px; padding: 10px 15px; min-height: 40px; cursor: pointer; }
.fm-bar button:hover { border-color: var(--sea); }
.fm-bar button[aria-pressed="true"] { background: #243047; color: #FFF8EF; border-color: #243047; }
:root[data-theme="dark"] .fm-bar button { background: rgba(30,40,56,.94); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fm-bar button { background: rgba(30,40,56,.94); } }
.fm-hint { position: absolute; left: 12px; bottom: 12px; font: 600 12.5px/1 var(--f-body);
  color: var(--fg-muted); background: rgba(255,248,239,.9); padding: 8px 12px; border-radius: 99px; }
:root[data-theme="dark"] .fm-hint { background: rgba(30,40,56,.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fm-hint { background: rgba(30,40,56,.9); } }

.fm-legend { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.fm-legend li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 3px 10px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--rule); }
.fm-legend b { font-size: 15.5px; }
.fm-legend span:not(.fm-key) { grid-column: 2; font-size: 14px; color: var(--fg-muted); }
.fm-legend em { grid-column: 2; font-style: normal; font-size: 12.5px; color: var(--fg-muted); opacity: .8; }
.fm-key { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); margin-top: 5px; }
.fm-key--planned { background: transparent; border: 2px solid var(--coral); }
.fm-key--progress { background: var(--sun); }
.fm-key--seen { background: #FFF8EF; box-shadow: inset 0 0 0 2px #B9A88C; }
.fm-trip.is-off { display: none; }
.fm-region-name, .fm-region-note { text-anchor: middle; }
.fm-pin-dot, .fm-anchor { vector-effect: non-scaling-stroke; }

/* route key */
.fm-routekey { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font: 600 13.5px/1 var(--f-body); color: var(--fg-muted); }
.fm-routekey span { display: inline-flex; align-items: center; gap: 9px; }
.fm-routekey i { width: 34px; height: 0; border-top: 3px solid var(--coral); display: inline-block; }
.fm-routekey i.dot { border-top: 3px dotted var(--sea-deep); }
.fm-routekey b.pin { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); }
.fm-routekey b.hollow { width: 11px; height: 11px; border-radius: 50%; background: var(--surface);
  border: 2.5px solid var(--sea-deep); box-sizing: border-box; }
#famap { cursor: grab; }
.fm-cityart { pointer-events: none; }
.fm-pin-label { text-anchor: middle; }
.fm-pin { text-decoration: none; }
.fm-pin-label { fill: #243047; }
.fm-art { pointer-events: none; }
.fm-hit { fill: transparent; }
.fm-region { cursor: pointer; }

/* Editorial to-do notes: kept in the source for the author, never shown to readers.
   Remove this rule (or add ?drafts to the URL and use .todo{display:block}) to see them. */
.todo { display: none !important; }


/* ---------- branded cover hero (home) ---------- */
.hero--brand .hero-media { aspect-ratio: 1672 / 941; max-height: 82vh; margin-inline: auto; }
.hero--brand .hero-media::after {
  background: linear-gradient(to top, rgba(22,30,44,.58) 0%, rgba(22,30,44,.18) 22%, rgba(22,30,44,0) 42%);
}
@media (max-width: 680px) {
  /* never crop the wordmark: show the whole cover, then stack the text under it */
  .hero--brand .hero-media { aspect-ratio: 1672 / 941; max-height: none; }
  .hero--brand .hero-media::after { background: none; }
  .hero--brand .hero-body { position: static; padding-block: 20px 4px; }
  .hero--brand .hero-body .btn--light {
    background: var(--action); color: var(--action-fg); border-color: transparent;
  }
  .hero--brand .hero-body .btn--outline-light {
    background: transparent; color: var(--navy); border-color: var(--border);
  }
  .hero--brand .hero-body .btn--outline-light:hover { background: var(--peach); }
  .hero--brand .hero-cta { gap: 10px; }
}


/* ---------- closing sections, inlined into the guide column ---------- */
.tailblock { display: flex; flex-direction: column; gap: 16px; padding-top: 10px; border-top: 1px solid var(--rule); }
.tailblock > .eyebrow { margin-bottom: -6px; }
.tailblock h2 { margin-top: 0; }

/* FAQ: question left, single marker right */
.faq summary { justify-content: flex-start; text-align: left; }
.faq summary::before { content: none !important; width: 0 !important; margin: 0 !important; }
.faq summary::after { margin-left: auto; }

.pill--planned { background: color-mix(in srgb, var(--sun) 32%, transparent); color: #6B4A00; }

/* Greek islands, internal flights */
.fm-isl { stroke-width: .7; }
.fm-isles { display: none; }
.fm-isles.is-on { display: inline; }
.fm-isle-label { font: 600 10.5px var(--f-body); fill: #5A5041; paint-order: stroke; stroke: #FFF8EF; stroke-width: 3px; stroke-linejoin: round; }
.fm-leg--flight { fill: none; stroke: #243047; stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: butt; }
.fm-plane path { fill: #243047; }
.fm-plane-label { font: 700 10px var(--f-body); fill: #243047; paint-order: stroke; stroke: #FFF8EF; stroke-width: 3px; stroke-linejoin: round; }
.fm-routekey i.flight { border-top: 3px dashed #243047; }
:root[data-theme="dark"] .fm-isle-label { fill: #B6A88F; stroke: #16233C; }
:root[data-theme="dark"] .fm-leg--flight { stroke: #F6EEE4; }
:root[data-theme="dark"] .fm-plane path { fill: #F6EEE4; }
:root[data-theme="dark"] .fm-plane-label { fill: #F6EEE4; stroke: #16233C; }
:root[data-theme="dark"] .fm-routekey i.flight { border-top-color: #F6EEE4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fm-isle-label { fill: #B6A88F; stroke: #16233C; }
  :root:not([data-theme="light"]) .fm-leg--flight { stroke: #F6EEE4; }
  :root:not([data-theme="light"]) .fm-plane path { fill: #F6EEE4; }
  :root:not([data-theme="light"]) .fm-plane-label { fill: #F6EEE4; stroke: #16233C; }
  :root:not([data-theme="light"]) .fm-routekey i.flight { border-top-color: #F6EEE4; }
}

.tripgroup[hidden] { display: none; }
.routestrip a.stop { font: 600 14.5px/1 var(--f-body); color: inherit; text-decoration: none; }
.routestrip a.stop:hover { text-decoration: underline; }
.tripgroup-link { margin: 0; font-weight: 600; }

/* language switch */
.langswitch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--rule);
  border-radius: 999px; font: 700 12.5px/1 var(--f-body); letter-spacing: .04em; }
.langswitch a, .langswitch span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 28px;
  padding: 0 8px; border-radius: 999px; text-decoration: none; color: inherit; }
.langswitch a:hover { background: var(--surface); }
.langswitch .is-current { background: var(--fg); color: var(--bg); }
.site-header .langswitch + .searchbtn { margin-left: 0; }

/* Bulgarian: Cyrillic-capable fonts */
html[lang="bg"] { --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --f-display: "Playfair Display", Georgia, serif; }
.mainnav > li > a { white-space: nowrap; }

.pill--price { color: var(--fg); background: var(--panel); font-variant-numeric: tabular-nums; }

/* Bulgarian home cover: the slogan is real text over a text-free copy of the photo */
.hero--brand .hero-media { container-type: inline-size; }
.hero-brandtext { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: #14294a; }
.hero-brandtext .bt-mark { position: absolute; left: 18.84%; top: 6.6%; margin: 0; font: 700 6.22cqw/1 "Playfair Display", Georgia, serif; letter-spacing: -.02em; white-space: nowrap; }
.hero-brandtext .bt-mark i { font-style: italic; }
.hero-brandtext .bt-tag { position: absolute; left: 22.25%; top: 19.3%; font: 600 1.02cqw/1 "Manrope", sans-serif; letter-spacing: .32em; color: #3a4a66; white-space: nowrap; }
.hero-brandtext .bt-script { position: absolute; left: 6.28%; top: 27.8%; font: 700 3.47cqw/1.08 "Caveat", cursive; transform: rotate(-9deg); transform-origin: left top; white-space: nowrap; }
.hero-brandtext .bt-script span { display: block; margin-left: .38em; }
.hero-brandtext .bt-line { position: absolute; left: 11.36%; top: 38.3%; width: 19.7%; height: .36cqw; border-radius: 1cqw; background: #d9683f; transform: rotate(-11deg); }
.hero .hero-brandtext p, .hero .hero-brandtext span { color: #14294a; text-shadow: none; margin: 0; max-width: none; }
.hero .hero-brandtext .bt-tag { color: #3a4a66; }
.hero .hero-brandtext .bt-line { background: #d9683f; }

/* Mobile header: keep brand, language switch, search and menu on one row */
@media (max-width: 560px) {
  .site-header .wrap { gap: 8px; }
  .site-header nav[aria-label="Main"] { display: none; }
  .site-header .brand { gap: 8px; }
  .site-header .brand-mark { width: 32px; height: 27px; }
  .site-header .brand-name { font-size: 18px; }
  .site-header .langswitch a, .site-header .langswitch span { min-width: 30px; }
}
@media (max-width: 380px) {
  .site-header .brand-mark { display: none; }
  .site-header .brand-name { font-size: 17px; }
}
@media (max-width: 340px) {
  .site-header .brand-name { font-size: 15px; }
}