@charset "UTF-8";
/* ==========================================================================
   AVAVA TRAVEL — destination pages (Europe, Asia & Middle East)
   Loaded after style.css, which carries the tokens, top bar and footer.
   Page-specific blocks live in europe/asia stylesheets next to this one.
   --------------------------------------------------------------------------
   01. Page tokens and section units
   02. Breadcrumb and page header
   03. Filter rail
   04. Country board
   05. Open departures
   06. Why Europe (inverted panel)
   07. Season map
   08. Voices from Europe
   09. Plan my trip
   10. Responsive — 1400 / 1100 / 900 / 640 / 420
   11. Plan my trip — "Tell us four things" (Asia, Africa, Americas) + breakpoints
   12. Section strips (Africa, Americas)
   13. Open departures — season rail (Africa, Americas)
   14. Season map — month columns (Africa, Americas)
   15. Voices — letter home (Africa, Americas) + their breakpoints
   16. Filter rail — split-flap fields (Africa, Islands)
   17. Board section shell (Africa, Islands) + their breakpoints
   18. Paper pages — tokens and devices (About, How we work)
   --------------------------------------------------------------------------
   Sizes follow the reference: --u is 1% of the section's content box at a
   1920 px design width, so sections with a 2.083 gutter carry a smaller unit.
   ========================================================================== */

/* ==========================================================================
   01. Page tokens and section units
   ========================================================================== */

.page-europe {
  --card-bg: #FBF6EC;
  --quote-bg: #FBF6EC;
  --on-ink: #FBF6EC;
  --deep: #17435A;
  --cream: #FBF6EC;
  --apricot: #F0B48A;
  /* shared by the letter-home voices on Africa and the Americas */
  --af-card: #FBF6EC;
  --af-card-border: #17435A;
  --af-panel: #17435A;
  --af-panel-ink: #FBF6EC;
  --af-panel-accent: #F0B48A;
  --af-rule: rgba(23, 67, 90, 0.25);
  --af-alt-border: rgba(23, 67, 90, 0.28);
  --af-track: rgba(251, 246, 236, 0.22);
}

[data-theme="dark"] .page-europe {
  --card-bg: rgba(237, 227, 211, 0.04);
  --quote-bg: rgba(237, 227, 211, 0.05);
  --on-ink: #1A1A1A;
  --af-card: rgba(16, 16, 16, 0.85);
  --af-card-border: rgba(237, 227, 211, 0.4);
  --af-panel: #101010;
  --af-panel-ink: #EDE3D3;
  --af-panel-accent: #E2661F;
  --af-rule: rgba(237, 227, 211, 0.28);
  --af-alt-border: rgba(237, 227, 211, 0.3);
  --af-track: rgba(237, 227, 211, 0.22);
}

/* the nav is its own query container with a 40 px gutter in the reference */
.page-europe .topbar {
  --u: 0.9583333vw;
  position: relative;
  padding: 0.7vw var(--gutter);
}

.page-europe .topbar__backdrop { display: none; }

.page-europe .topbar__rule {
  position: relative;
  margin-top: 0.7vw;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.18);
}

/* on dark paper the reference lifts the nav rule a touch */
[data-theme="dark"] .page-europe .topbar__rule { background: rgba(var(--ink-rgb), 0.22); }

.nav__sublink-current { color: var(--accent); font-weight: 700; }

/* Blog is the one top-level nav item that is also a page of its own */
.nav__link--current { color: var(--accent); font-weight: 700; }

.fcol__current { color: var(--night-accent); font-weight: 700; }

.site-footer .fcol__current { color: var(--night-accent); }

/* ==========================================================================
   02. Breadcrumb and page header
   ========================================================================== */

.page-head { position: relative; }

.crumbs {
  margin-top: -8px;
  padding: 0 var(--gutter);
}

.crumbs__list {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(var(--ink-rgb), 0.65);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* the dark version prints the trail a shade brighter */
[data-theme="dark"] .crumbs__list { color: rgba(var(--ink-rgb), 0.7); }

.crumbs__list li[aria-hidden] { opacity: 0.5; }

.crumbs__current { color: var(--accent); }

.intro {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 40px;
  padding: 54px var(--gutter) 46px;
  overflow: hidden;
}

.intro__stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kicker--intro {
  gap: 18px;
  font-size: 18px;
  letter-spacing: 0.26em;
}

.kicker--intro .kicker__dash { width: 54px; height: 2px; }

.intro__line {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
}

.intro__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(52px, 5.4vw, 104px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.88;
}

.script--intro {
  font-size: clamp(52px, 4.8vw, 92px);
  padding-bottom: 22px;
}

.intro__lead {
  margin-left: auto;
  max-width: 420px;
  opacity: 0.8;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  padding-bottom: 10px;
  text-align: right;
  text-wrap: pretty;
}

/* ==========================================================================
   03. Filter rail
   ========================================================================== */

.filters {
  --u: 0.9583333vw;
  padding: 1.563vw 2.083vw 1.979vw;
}

.filters__top {
  display: flex;
  align-items: stretch;
  border: max(2px, calc(var(--u) * 0.104)) solid var(--ink);
}

.filters__strip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.833);
  border-right: max(2px, calc(var(--u) * 0.104)) solid var(--ink);
  border-bottom: max(2px, calc(var(--u) * 0.104)) solid var(--ink);
  padding: calc(var(--u) * 0.729) calc(var(--u) * 1.25);
}

.filters__title {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.filters__note {
  opacity: 0.7;
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 500;
  white-space: nowrap;
}

.filters__code {
  margin-left: auto;
  opacity: 0.55;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.filters__coupon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(120px, calc(var(--u) * 7.813));
  border-bottom: max(2px, calc(var(--u) * 0.104)) solid var(--ink);
  background: var(--ink);
  color: var(--on-ink);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, calc(var(--u) * 0.885), 17px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.filters__body {
  display: flex;
  align-items: stretch;
  border: max(2px, calc(var(--u) * 0.104)) solid var(--ink);
  border-top: 0;
}

.filters__grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fgroup {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.729);
  border-right: max(1.5px, calc(var(--u) * 0.078)) dashed rgba(var(--ink-rgb), 0.4);
  padding: calc(var(--u) * 1.042) calc(var(--u) * 1.146) calc(var(--u) * 1.146);
}

.fgroup:last-child { border-right: 0; }

.fgroup__head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.521);
}

.fgroup__no {
  color: rgba(var(--ink-rgb), 0.45);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, calc(var(--u) * 0.885), 17px);
  letter-spacing: 0.16em;
}

.fgroup__label {
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.833), 16px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.chips {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.417);
}

.chips--wrap {
  flex-wrap: wrap;
  gap: calc(var(--u) * 0.469);
}

.chip {
  border: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.3);
  padding: calc(var(--u) * 0.469) calc(var(--u) * 0.885);
  color: inherit;
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.14s ease-out, background-color 0.14s ease-out, color 0.14s ease-out;
}

.chip--pick:hover { border-color: var(--accent); color: var(--accent); }

.chip.is-on {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.chip__x { font-size: 0.85em; }

.chip--ghost {
  border-color: rgba(251, 246, 236, 0.45);
  padding: calc(var(--u) * 0.417) calc(var(--u) * 0.781);
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
}

.chips__more {
  padding: calc(var(--u) * 0.469) calc(var(--u) * 0.208);
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 700;
  white-space: nowrap;
}

.chips__more--cream {
  color: var(--apricot);
  padding: calc(var(--u) * 0.417) calc(var(--u) * 0.208);
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
}

.fgroup__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.26);
}

.meter--filter { height: calc(var(--u) * 0.26); background: rgba(var(--ink-rgb), 0.16); }

.meter__fill--40 { width: 40%; }
.meter__fill--48 { width: 48%; }
.meter__fill--55 { width: 55%; }
.meter__fill--62 { width: 62%; }
.meter__fill--72 { width: 72%; }
.meter__fill--88 { width: 88%; }

.fgroup__hint {
  opacity: 0.65;
  font-size: clamp(14px, calc(var(--u) * 0.833), 16px);
  font-weight: 500;
  white-space: nowrap;
}

.fgroup__price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.417);
}

.fgroup__from {
  opacity: 0.6;
  font-size: clamp(14px, calc(var(--u) * 0.833), 16px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fgroup__value {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(19px, calc(var(--u) * 1.354), 26px);
  font-weight: 500;
}

.fgroup__pp {
  opacity: 0.6;
  font-size: clamp(14px, calc(var(--u) * 0.833), 16px);
  font-weight: 500;
  white-space: nowrap;
}

.months {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 0.365);
}

.months__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.26);
}

.months__bar {
  width: 100%;
  background: rgba(var(--ink-rgb), 0.16);
}

.months__bar--h1 { height: calc(var(--u) * 1.354); }
.months__bar--h2 { height: calc(var(--u) * 1.771); }
.months__bar--h3 { height: calc(var(--u) * 1.563); }
.months__bar--h4 { height: calc(var(--u) * 1.042); }
.months__bar--h5 { height: calc(var(--u) * 0.833); }
.months__bar--h6 { height: calc(var(--u) * 2.292); }
.months__bar--h7 { height: calc(var(--u) * 1.979); }
.months__bar--h8 { height: calc(var(--u) * 1.25); }

.months__name {
  opacity: 0.6;
  font-size: clamp(14px, calc(var(--u) * 0.781), 15px);
  font-weight: 600;
}

.months__item--on .months__bar { background: var(--accent); }

.months__item--on .months__name { opacity: 1; color: var(--accent); font-weight: 700; }

.filters__count {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.208);
  width: max(120px, calc(var(--u) * 7.813));
  border-left: max(2px, calc(var(--u) * 0.104)) dashed rgba(var(--ink-rgb), 0.45);
  padding: calc(var(--u) * 0.833) calc(var(--u) * 0.521);
}

.filters__count-value {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 3.229);
  font-weight: 600;
  line-height: 0.9;
}

.filters__count-label {
  font-size: clamp(14px, calc(var(--u) * 0.833), 16px);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.filters__summary {
  margin-top: calc(var(--u) * 0.938);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.042);
}

.filters__pick {
  opacity: 0.6;
  font-size: clamp(14px, calc(var(--u) * 0.885), 17px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.picks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 0.521);
}

.pick {
  border: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.3);
  background: var(--card-bg);
  padding: calc(var(--u) * 0.469) calc(var(--u) * 0.833);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 600;
  white-space: nowrap;
}

.filters__reset {
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn--fill {
  border: max(2px, calc(var(--u) * 0.104)) solid var(--accent);
  background: var(--accent);
  color: #FFFFFF;
  padding: calc(var(--u) * 0.781) calc(var(--u) * 1.667);
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  letter-spacing: 0.12em;
}

.btn--fill:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.filters__show { margin-left: auto; }

/* ==========================================================================
   04. Country board
   ========================================================================== */

.board-sec {
  --u: 1vw;
  position: relative;
  padding: 0 0 calc(var(--u) * 4.375);
  overflow: hidden;
}

.strip {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.354);
  margin: 0 var(--gutter);
  border-top: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  border-bottom: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  padding: calc(var(--u) * 0.833) 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.strip__accent { color: var(--accent); }

.strip__dim { opacity: 0.55; }

.strip__updated { margin-left: auto; white-space: nowrap; }

.board-sec__inner { padding: calc(var(--u) * 3.229) calc(var(--u) * 2.083) 0; }

.board-sec__head { padding: 0 0 calc(var(--u) * 2.396); gap: calc(var(--u) * 1.875); }

.display--board { font-size: calc(var(--u) * 5.833); line-height: 0.88; }

.script--board { font-size: calc(var(--u) * 5); padding-bottom: calc(var(--u) * 1.354); }

.board-sec__note {
  max-width: calc(var(--u) * 17.708);
  padding-bottom: calc(var(--u) * 0.729);
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
}

.countries {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: calc(var(--u) * 1.354);
  align-items: stretch;
}

.countries__cell { display: flex; }

.countries__cell--hero { grid-row: span 2; }

.countries__cell--wide { grid-column: 1 / -1; }

.country {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  background: var(--card-bg);
}

.country--new {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.1);
}

.country--wide { flex-direction: row; }

.country__photo {
  position: relative;
  display: block;
  flex: 1;
  min-height: calc(var(--u) * 23.958);
  overflow: hidden;
}

.country__photo--sm { flex: none; height: calc(var(--u) * 10.938); min-height: 0; }

.country__photo--wide {
  flex: none;
  width: calc((100% - var(--u) * 2.708) * 0.44444);
  min-height: calc(var(--u) * 10.417);
}

.country__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.country:hover .country__img { transform: scale(1.03); }

.country__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.82) 0%, transparent 60%);
  pointer-events: none;
}

.country__scrim--hero {
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.1) 58%, transparent 76%);
}

.country__flag {
  left: calc(var(--u) * 0.938);
  top: calc(var(--u) * 0.938);
  padding: calc(var(--u) * 0.417) calc(var(--u) * 0.677);
  font-size: clamp(14px, calc(var(--u) * 0.781), 15px);
}

.country__flag--sm {
  left: calc(var(--u) * 0.729);
  top: calc(var(--u) * 0.729);
  padding: calc(var(--u) * 0.313) calc(var(--u) * 0.573);
  font-size: clamp(14px, calc(var(--u) * 0.729), 14px);
}

.country__caption {
  position: absolute;
  left: calc(var(--u) * 1.25);
  right: calc(var(--u) * 1.25);
  bottom: calc(var(--u) * 1.146);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 0.938);
  pointer-events: none;
}

.country__caption--sm {
  left: calc(var(--u) * 0.938);
  right: calc(var(--u) * 0.938);
  bottom: calc(var(--u) * 0.729);
  gap: calc(var(--u) * 0.625);
}

.country__caption--wide {
  left: calc(var(--u) * 0.938);
  right: calc(var(--u) * 0.938);
  bottom: calc(var(--u) * 0.729);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.country__text { display: flex; flex-direction: column; gap: calc(var(--u) * 0.208); }

.country__caption--sm .country__text { gap: 0; }

.country__code {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, calc(var(--u) * 0.885), 17px);
  letter-spacing: 0.2em;
}

.country__code--sm { font-size: clamp(14px, calc(var(--u) * 0.781), 15px); }

.country__name {
  color: #FFFFFF;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(27px, calc(var(--u) * 1.875), 36px);
  font-weight: 500;
  line-height: 1;
}

.country__name--hero { font-size: calc(var(--u) * 3.229); }

.country__routes {
  opacity: 0.9;
  color: #FFFFFF;
  font-size: clamp(16px, calc(var(--u) * 1.094), 21px);
  font-weight: 500;
}

.country__price {
  margin-left: auto;
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(18px, calc(var(--u) * 1.25), 24px);
  font-weight: 500;
  white-space: nowrap;
}

.country__price--hero { font-size: clamp(25px, calc(var(--u) * 1.771), 34px); }

.country__price--wide {
  margin-left: auto;
  font-size: clamp(19px, calc(var(--u) * 1.354), 26px);
}

.country__foot {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.938);
  padding: calc(var(--u) * 0.938) calc(var(--u) * 1.25) calc(var(--u) * 1.146);
}

/* по просьбе владельца нижний край фото героя выровнен с фото карточек второго ряда:
   ячейка высотой в два ряда, поэтому подвинут верхний паддинг подвала (в макете разбег 8px) */
.country--hero .country__foot { padding-top: calc(var(--u) * 0.521); }

.country__foot--sm {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--u) * 0.417);
  padding: calc(var(--u) * 0.729) calc(var(--u) * 0.938) calc(var(--u) * 0.938);
}

.country__seats {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.365);
}

.meter--country { height: calc(var(--u) * 0.313); background: rgba(var(--ink-rgb), 0.18); }

.meter--sm { height: calc(var(--u) * 0.26); background: rgba(var(--ink-rgb), 0.18); }

.country__seatsline {
  opacity: 0.75;
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 500;
  white-space: nowrap;
}

.country__foot--sm .country__seatsline { opacity: 0.72; }

.country__foot .country__seatsline--alert,
.country__foot--sm .country__seatsline--alert {
  opacity: 1;
  color: var(--accent);
  font-weight: 700;
}

/* the wide Spain row runs its meta one step quieter and smaller */
.country--wide .country__seatsline { opacity: 0.72; }

.country--wide .country__more { font-size: clamp(14px, calc(var(--u) * 0.938), 18px); }

.country__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.521);
}

.country__count {
  margin-left: auto;
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 600;
  white-space: nowrap;
}

.country__count--lg {
  margin-left: 0;
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
}

.country__more {
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.country__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.521);
  padding: calc(var(--u) * 1.042) calc(var(--u) * 1.146);
}

.country__desc {
  opacity: 0.82;
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  font-weight: 500;
  text-wrap: pretty;
}

.country__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.365);
}

.country__bottom .country__more { margin-left: auto; }

.board-sec__foot {
  margin-top: calc(var(--u) * 1.875);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.354);
  border-top: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  padding-top: calc(var(--u) * 1.146);
}

.board-sec__footnote {
  opacity: 0.75;
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  font-weight: 500;
}

.board-sec__foot .btn--outline {
  margin-left: auto;
  padding: calc(var(--u) * 0.781) calc(var(--u) * 1.771);
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
}

/* ==========================================================================
   05. Open departures
   ========================================================================== */

.departures {
  --u: 0.9583333vw;
  padding: 3.75vw 2.083vw 4.479vw;
}

.departures__head { padding: 0 0 calc(var(--u) * 1.771); gap: calc(var(--u) * 1.875); }

.section-head__line--wrap { flex-wrap: wrap; }

.display--dep { font-size: calc(var(--u) * 5.417); line-height: 0.88; }

.script--dep { font-size: calc(var(--u) * 4.896); padding-bottom: calc(var(--u) * 1.25); }

.departures__note {
  max-width: calc(var(--u) * 18.229);
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
}

.tabs {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.521);
}

.tab {
  border: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.3);
  padding: calc(var(--u) * 0.521) calc(var(--u) * 1.042);
  color: inherit;
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.14s ease-out, color 0.14s ease-out, background-color 0.14s ease-out;
}

.tab:hover { border-color: var(--accent); color: var(--accent); }

.tab.is-on {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.depgroup {
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 1.563);
  padding-top: calc(var(--u) * 0.729);
}

.depgroup + .depgroup { padding-top: calc(var(--u) * 1.771); }

.depgroup__label {
  flex: none;
  width: max(170px, calc(var(--u) * 9.896));
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.313);
  border-top: max(3px, calc(var(--u) * 0.156)) solid var(--ink);
  padding-top: calc(var(--u) * 0.833);
}

.depgroup__code {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 3.229);
  font-weight: 600;
  line-height: 0.86;
}

.depgroup__count {
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.depgroup__mood {
  opacity: 0.7;
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 500;
}

.deplist {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-top: max(3px, calc(var(--u) * 0.156)) solid var(--ink);
}

.deplist--closed { border-bottom: max(3px, calc(var(--u) * 0.156)) solid var(--ink); }

.deplist li { border-bottom: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.25); }

.deplist li.deplist__last { border-bottom: 0; }

.dep {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.354);
  padding: calc(var(--u) * 1.042) 0;
  transition: background-color 0.14s ease-out;
}

.dep:hover { background: rgba(var(--accent-rgb), 0.05); color: inherit; }

.dep__date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max(120px, calc(var(--u) * 6.771));
  border: max(2px, calc(var(--u) * 0.104)) solid rgba(var(--ink-rgb), 0.4);
  padding: calc(var(--u) * 0.417) calc(var(--u) * 0.313);
}

.dep__date--strong { border-color: var(--ink); }

.dep__date--pick {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.dep__range {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(22px, calc(var(--u) * 1.563), 30px);
  font-weight: 600;
  line-height: 1;
}

.dep__days {
  opacity: 0.7;
  font-size: clamp(14px, calc(var(--u) * 0.833), 16px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dep__date--pick .dep__days { opacity: 1; }

.dep__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: max(3px, calc(var(--u) * 0.156));
}

.dep__routeline {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.625);
}

.dep__route {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(22px, calc(var(--u) * 1.563), 30px);
  font-weight: 500;
  line-height: 1;
}

.dep__where {
  opacity: 0.72;
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  font-weight: 500;
}

.badge--inline {
  position: static;
  background: var(--accent);
  color: var(--badge-accent-label);
  padding: calc(var(--u) * 0.26) calc(var(--u) * 0.521);
  font-size: clamp(14px, calc(var(--u) * 0.729), 14px);
  letter-spacing: 0.14em;
}

.dep__seats {
  flex: none;
  width: max(190px, calc(var(--u) * 10.938));
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.313);
}

.meter--dep { height: calc(var(--u) * 0.313); background: rgba(var(--ink-rgb), 0.16); }

.dep__scarce {
  opacity: 0.75;
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 500;
  white-space: nowrap;
}

.dep__scarce--alert { opacity: 1; color: var(--accent); font-weight: 700; }

.dep__price {
  flex: none;
  width: max(128px, calc(var(--u) * 7.292));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.dep__from {
  opacity: 0.6;
  font-size: clamp(14px, calc(var(--u) * 0.781), 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dep__value {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(24px, calc(var(--u) * 1.667), 32px);
  font-weight: 500;
  line-height: 1;
}

.dep__book {
  flex: none;
  border: max(2px, calc(var(--u) * 0.104)) solid var(--accent);
  padding: calc(var(--u) * 0.625) calc(var(--u) * 1.354);
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.14s ease-out, color 0.14s ease-out;
}

.dep__book--fill { background: var(--accent); color: #FFFFFF; }

.dep:hover .dep__book { background: var(--accent); color: #FFFFFF; }

.departures__foot {
  margin-top: calc(var(--u) * 1.354);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.354);
}

.departures__included {
  opacity: 0.75;
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  font-weight: 500;
}

.departures__all {
  margin-left: auto;
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   06. Why Europe — inverted panel (identical in both versions)
   ========================================================================== */

.why-eu {
  --u: 1vw;
  position: relative;
  background: var(--deep);
  color: var(--cream);
  overflow: hidden;
}

.strip--invert {
  margin: 0;
  border-top: 0;
  border-bottom: max(1px, calc(var(--u) * 0.052)) solid rgba(251, 246, 236, 0.28);
  padding: calc(var(--u) * 0.781) calc(var(--u) * 2.083);
}

.strip--invert .strip__accent { color: var(--apricot); }

.why-eu__curve {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 3.125);
  width: 100%;
  height: calc(var(--u) * 10.417);
  opacity: 0.42;
  pointer-events: none;
}

.why-eu__body {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 2.292);
  padding: calc(var(--u) * 2.917) calc(var(--u) * 2.083) 0;
}

.why-eu__main {
  flex: 1.5 1 calc(var(--u) * 32.292);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.354);
}

.display--why { font-size: calc(var(--u) * 5.417); line-height: 0.88; }

.script--why {
  font-size: calc(var(--u) * 4.792);
  padding-bottom: calc(var(--u) * 1.25);
  color: var(--apricot);
}

.reasons { display: flex; flex-direction: column; }

.reason {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 1.146);
  border-top: max(1px, calc(var(--u) * 0.052)) solid rgba(251, 246, 236, 0.3);
  padding: calc(var(--u) * 0.938) 0;
}

.reason--last { border-bottom: max(1px, calc(var(--u) * 0.052)) solid rgba(251, 246, 236, 0.3); }

.reason__no {
  flex: none;
  padding-top: calc(var(--u) * 0.729);
  color: rgba(251, 246, 236, 0.5);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, calc(var(--u) * 0.885), 17px);
  letter-spacing: 0.16em;
}

.reason__figure {
  flex: none;
  min-width: max(120px, calc(var(--u) * 8.854));
  color: var(--apricot);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 3.021);
  font-weight: 600;
  line-height: 1;
}

.reason__text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.208);
  min-width: 0;
}

.reason__title {
  font-size: clamp(19px, calc(var(--u) * 1.302), 25px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reason__body {
  opacity: 0.85;
  font-size: clamp(16px, calc(var(--u) * 1.094), 21px);
  font-weight: 500;
  text-wrap: pretty;
}

.reason__proof {
  margin-left: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: max(2px, calc(var(--u) * 0.104));
  padding-top: calc(var(--u) * 0.313);
}

.reason__proof-label {
  opacity: 0.55;
  font-size: clamp(14px, calc(var(--u) * 0.781), 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reason__proof-value {
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 600;
  white-space: nowrap;
}

.guide {
  flex: 1 1 calc(var(--u) * 21.875);
  min-width: min(340px, 100%);
  display: flex;
  flex-direction: column;
}

.guide__photo {
  position: relative;
  height: calc(var(--u) * 18.75);
  overflow: hidden;
}

.guide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 67, 90, 0.82) 0%, transparent 58%);
  pointer-events: none;
}

.guide__caption {
  position: absolute;
  left: calc(var(--u) * 1.146);
  right: calc(var(--u) * 1.146);
  bottom: calc(var(--u) * 0.938);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 0.729);
  pointer-events: none;
}

.guide__who { display: flex; flex-direction: column; }

.guide__name {
  color: #FFFFFF;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(19px, calc(var(--u) * 1.354), 26px);
  font-weight: 500;
}

.guide__since {
  opacity: 0.85;
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 500;
}

.guide__no {
  margin-left: auto;
  color: var(--apricot);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, calc(var(--u) * 0.885), 17px);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.guide__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: calc(var(--u) * 0.625);
  border: max(1px, calc(var(--u) * 0.052)) solid rgba(251, 246, 236, 0.3);
  border-top: 0;
  padding: calc(var(--u) * 1.042) calc(var(--u) * 1.146) calc(var(--u) * 1.146);
}

.guide__label {
  color: var(--apricot);
  font-size: clamp(14px, calc(var(--u) * 0.833), 16px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.guide__body .chips { flex-wrap: wrap; }

.guide__tear {
  margin-top: auto;
  height: max(2px, calc(var(--u) * 0.104));
  background: repeating-linear-gradient(to right, rgba(251, 246, 236, 0.45) 0 calc(var(--u) * 0.417), transparent calc(var(--u) * 0.417) calc(var(--u) * 0.833));
}

.guide__cta {
  border: max(2px, calc(var(--u) * 0.104)) solid var(--night-accent);
  background: var(--night-accent);
  padding: calc(var(--u) * 0.781);
  color: var(--deep);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.14s ease-out, color 0.14s ease-out;
}

.guide__cta:hover { background: var(--cream); border-color: var(--cream); color: var(--deep); }

/* --------------------------------------------------------------------------
   Guides on the ground — the country chips switch the guide card
   -------------------------------------------------------------------------- */

.guide__body .chip--ghost { cursor: pointer; }

.guide__body .chip--ghost:hover { border-color: var(--apricot); color: var(--apricot); }

.guide__body .chips button.is-on {
  border-color: #F0B48A;
  background-color: #F0B48A;
  color: #17435A;
  font-weight: 700;
}

/* на бирюзовой панели оранжевая рамка фокуса дерётся с абрикосовой заливкой —
   для клавиатуры оставляем кремовую, после клика мышью её снимает скрипт */
.guide__body .chip--ghost:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

.guide__img { transition: opacity 0.16s ease-out; }

.hubs {
  position: relative;
  margin-top: calc(var(--u) * 1.771);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: max(1px, calc(var(--u) * 0.052)) solid rgba(251, 246, 236, 0.28);
}

.hub {
  display: flex;
  flex-direction: column;
  gap: max(2px, calc(var(--u) * 0.104));
  border-left: max(1px, calc(var(--u) * 0.052)) solid rgba(251, 246, 236, 0.28);
  padding: calc(var(--u) * 0.938) calc(var(--u) * 1.354) calc(var(--u) * 1.042);
}

.hub:first-child { border-left: 0; padding-left: calc(var(--u) * 2.083); }

.hub:last-child { padding-right: calc(var(--u) * 2.083); }

.hub__code {
  color: var(--apricot);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(22px, calc(var(--u) * 1.563), 30px);
  font-weight: 500;
}

.hub__times {
  opacity: 0.75;
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 500;
  white-space: nowrap;
}

/* ==========================================================================
   07. Season map
   ========================================================================== */

.season {
  --u: 0.9583333vw;
  padding: 3.646vw 2.083vw 4.375vw;
}

.season__head { padding: 0 0 calc(var(--u) * 2.083); gap: calc(var(--u) * 1.875); }

.display--season { font-size: calc(var(--u) * 5.417); line-height: 0.88; }

.script--season { font-size: calc(var(--u) * 4.792); padding-bottom: calc(var(--u) * 1.25); }

.season__note {
  max-width: calc(var(--u) * 17.708);
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
}

.legend {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.833);
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 600;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.417);
}

.legend__swatch {
  width: calc(var(--u) * 1.563);
  height: calc(var(--u) * 0.625);
}

.legend__swatch--best { background: var(--accent); }

.legend__swatch--shoulder { background: rgba(var(--accent-rgb), 0.26); }

.legend__swatch--crowded {
  background: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.35) 0 calc(var(--u) * 0.26), transparent calc(var(--u) * 0.26) calc(var(--u) * 0.521));
}

.grid-head,
.srow {
  display: grid;
  grid-template-columns: max(180px, calc(var(--u) * 10.938)) repeat(8, minmax(0, 1fr)) max(110px, calc(var(--u) * 7.813));
}

.grid-head {
  align-items: end;
  border-bottom: max(2px, calc(var(--u) * 0.104)) solid var(--ink);
  padding-bottom: calc(var(--u) * 0.417);
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  letter-spacing: 0.16em;
}

.grid-head__dim { color: rgba(var(--ink-rgb), 0.45); }

.grid-head__price { color: rgba(var(--ink-rgb), 0.55); text-align: right; }

.srow {
  align-items: center;
  border-bottom: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.18);
  padding: calc(var(--u) * 0.938) 0;
  transition: background-color 0.14s ease-out;
}

.srow:hover { background: rgba(var(--accent-rgb), 0.05); color: inherit; }

.srow--last { border-bottom: max(2px, calc(var(--u) * 0.104)) solid var(--ink); }

.srow__country { display: flex; flex-direction: column; }

.srow__nameline {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.521);
}

.srow__name {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(24px, calc(var(--u) * 1.667), 32px);
  font-weight: 500;
  line-height: 1;
}

.srow__meta {
  opacity: 0.65;
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 500;
}

.srow__price {
  grid-column: 10;
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(19px, calc(var(--u) * 1.354), 26px);
  font-weight: 500;
  text-align: right;
}

.bar {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 1.563);
  padding: 0 calc(var(--u) * 0.625);
  font-size: clamp(14px, calc(var(--u) * 0.885), 17px);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.bar--best { background: var(--accent); color: #FFFFFF; }

.bar--shoulder { background: rgba(var(--accent-rgb), 0.26); }

.bar--crowded {
  padding: 0;
  background: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.3) 0 calc(var(--u) * 0.26), transparent calc(var(--u) * 0.26) calc(var(--u) * 0.521));
}

.bar--tight { padding: 0 calc(var(--u) * 0.521); }

.bar--c2-4 { grid-column: 2 / 4; }
.bar--c3-5 { grid-column: 3 / 5; }
.bar--c4-7 { grid-column: 4 / 7; }
.bar--c5-7 { grid-column: 5 / 7; }
.bar--c6-7 { grid-column: 6 / 7; }
.bar--c7-8 { grid-column: 7 / 8; }
.bar--c7-9 { grid-column: 7 / 9; }
.bar--c7-10 { grid-column: 7 / 10; }
.bar--c9-10 { grid-column: 9 / 10; }

.season__foot {
  margin-top: calc(var(--u) * 1.354);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.354);
}

.callout {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.625);
  border: max(2px, calc(var(--u) * 0.104)) solid var(--ink);
  padding: calc(var(--u) * 0.625) calc(var(--u) * 1.042);
}

.callout__month {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(18px, calc(var(--u) * 1.25), 24px);
  font-weight: 500;
}

.callout__text {
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  font-weight: 500;
}

.season__guide { margin-left: auto; }

/* both outline buttons in these blocks run one step smaller than the base */
.season__guide,
.voices-eu__foot .btn--outline {
  padding: calc(var(--u) * 0.729) calc(var(--u) * 1.667);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
}

/* ==========================================================================
   08. Voices from Europe
   ========================================================================== */

.voices-eu {
  --u: 0.9583333vw;
  padding: 3.646vw 2.083vw 4.271vw;
}

.voices-eu__head { padding: 0 0 calc(var(--u) * 2.188); gap: calc(var(--u) * 1.875); }

.voices-eu__head .section-head__stack { gap: calc(var(--u) * 0.313); }

.display--voices { font-size: calc(var(--u) * 5); line-height: 0.9; }

.voices-eu__note {
  margin-left: auto;
  max-width: calc(var(--u) * 17.708);
  padding-bottom: calc(var(--u) * 0.729);
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
}

.quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 1.563);
}

.quote {
  display: flex;
  flex-direction: column;
  background: var(--quote-bg);
  border: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.28);
}

.quote--accent {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.5);
}

/* the dark version softens the quote frame */
[data-theme="dark"] .quote { border-color: rgba(237, 227, 211, 0.22); }

[data-theme="dark"] .quote--accent { border-color: rgba(var(--accent-rgb), 0.5); }

.quote__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.729);
  border-bottom: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  padding: calc(var(--u) * 0.938) calc(var(--u) * 1.146);
}

.quote--accent .quote__head { border-bottom-color: rgba(var(--accent-rgb), 0.4); }

.quote__origin {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, calc(var(--u) * 0.833), 16px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote__score {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(16px, calc(var(--u) * 1.146), 22px);
  font-weight: 500;
}

.quote__body {
  flex: 1;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 1.25) 0;
}

.quote__body p {
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: calc(var(--u) * 2.708);
  line-height: 0.7;
}

.quote__tear {
  margin-top: calc(var(--u) * 1.042);
  height: max(2px, calc(var(--u) * 0.104));
  background: repeating-linear-gradient(to right, rgba(var(--ink-rgb), 0.4) 0 calc(var(--u) * 0.417), transparent calc(var(--u) * 0.417) calc(var(--u) * 0.833));
}

.quote--accent .quote__tear {
  background: repeating-linear-gradient(to right, rgba(var(--accent-rgb), 0.5) 0 calc(var(--u) * 0.417), transparent calc(var(--u) * 0.417) calc(var(--u) * 0.833));
}

.quote__author {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.729);
  padding: calc(var(--u) * 0.938) calc(var(--u) * 1.25) calc(var(--u) * 1.146);
}

.quote__avatar {
  position: relative;
  display: block;
  flex: none;
  width: max(58px, calc(var(--u) * 3.646));
  height: max(58px, calc(var(--u) * 3.646));
  border-radius: 50%;
  overflow: hidden;
}

.quote__avatar img { width: 100%; height: 100%; object-fit: cover; }

.quote__who { display: flex; flex-direction: column; }

.quote__name {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(19px, calc(var(--u) * 1.354), 26px);
  font-weight: 500;
  line-height: 1;
}

.quote__trip {
  opacity: 0.75;
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 500;
}

.quote--accent .quote__trip { opacity: 0.8; }

.voices-eu__foot {
  margin-top: calc(var(--u) * 1.458);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.354);
  border-top: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  padding-top: calc(var(--u) * 1.146);
}

.voices-eu__rating {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.625);
}

.voices-eu__score {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(30px, calc(var(--u) * 2.083), 40px);
  font-weight: 500;
}

.voices-eu__label {
  opacity: 0.8;
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  font-weight: 500;
}

.voices-eu__foot .btn--outline { margin-left: auto; }

/* ==========================================================================
   09. Plan my trip
   ========================================================================== */

.planner { --u: 1vw; }

.planner__inner {
  position: relative;
  padding: calc(var(--u) * 3.75) var(--gutter);
  overflow: hidden;
}

.planner__ghost {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--u) * 15.5);
  color: transparent;
  -webkit-text-stroke: 2px rgba(var(--ink-rgb), 0.09);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 15.625);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.8;
  pointer-events: none;
}

.planner__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 40px;
  border-bottom: 3px solid var(--ink);
  padding-bottom: calc(var(--u) * 1.563);
}

.planner__stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.521);
}

.kicker--planner {
  gap: calc(var(--u) * 0.833);
  font-size: calc(var(--u) * 0.938);
}

.kicker--planner .kicker__dash { width: calc(var(--u) * 2.917); height: 2px; }

.planner__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 6.042);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.84;
}

.planner__title--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

.planner__line {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 1.354);
}

.script--planner {
  font-size: calc(var(--u) * 5.417);
  padding-bottom: calc(var(--u) * 1.354);
  transform: rotate(-8deg);
  white-space: nowrap;
}

.planner__person {
  margin-left: auto;
  flex: none;
  width: calc(var(--u) * 15.625);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.729);
  padding-bottom: calc(var(--u) * 0.313);
}

.planner__row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.729);
}

.planner__avatar {
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--u) * 3.958);
  height: calc(var(--u) * 3.958);
  border-radius: 50%;
  overflow: hidden;
}

.planner__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 35%; }

.planner__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.planner__name {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 1.354);
  font-weight: 500;
  line-height: 1;
}

.planner__role {
  opacity: 0.75;
  font-size: calc(var(--u) * 0.938);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.planner__note {
  opacity: 0.8;
  font-size: calc(var(--u) * 0.99);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}

.steps-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: calc(var(--u) * 2.292);
}

.steps-form__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 1.406);
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(var(--ink-rgb), 0.55) 0 calc(var(--u) * 0.417), transparent calc(var(--u) * 0.417) calc(var(--u) * 1.042));
}

.qstep {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.938);
  padding-right: calc(var(--u) * 1.771);
}

.qstep--mid { padding: 0 calc(var(--u) * 1.771); }

.qstep--end { padding: 0 0 0 calc(var(--u) * 1.771); }

.qstep__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.729);
}

/* on dark paper the reference prints these accent blocks in near-black */
[data-theme="dark"] .qstep__no,
[data-theme="dark"] .chip--budget.is-on,
[data-theme="dark"] .send { color: #1A1A1A; }

[data-theme="dark"] .qstep__field { border-bottom-color: rgba(var(--ink-rgb), 0.45); }

.qstep__no {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 2.917);
  height: calc(var(--u) * 2.917);
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 1.354);
  font-weight: 600;
}

.qstep__label {
  background: var(--paper);
  padding-right: calc(var(--u) * 0.417);
  font-size: calc(var(--u) * 0.99);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

[data-theme="dark"] .qstep__label { background: transparent; }

.qstep__field {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.521);
  border-bottom: 2px solid rgba(var(--ink-rgb), 0.55);
  padding-bottom: calc(var(--u) * 0.729);
}

.qstep__select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23C0521B'/%3E%3C/svg%3E") right center / 0.72em auto no-repeat;
  padding-right: 1.4em;
  color: inherit;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 1.771);
  font-weight: 500;
  cursor: pointer;
}

.qstep__select:focus { outline: none; }

.qstep__field:focus-within { border-bottom-color: var(--accent); }

.qstep__field--range { align-items: flex-end; }

.qstep__value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 1.771);
  font-weight: 500;
}

.qstep__range {
  flex: 1;
  min-width: 0;
  margin-bottom: calc(var(--u) * 0.417);
  accent-color: var(--accent);
  cursor: pointer;
}

.qstep__field--chips { align-items: center; flex-wrap: wrap; }

.chip--budget {
  border-width: 2px;
  padding: calc(var(--u) * 0.365) calc(var(--u) * 0.729);
  font-size: calc(var(--u) * 0.99);
}

.chip--budget.is-on { background: var(--accent); color: #FFFFFF; }

.qstep__hint {
  opacity: 0.72;
  font-size: calc(var(--u) * 0.99);
  font-weight: 500;
}

.summary {
  position: relative;
  grid-column: 1 / -1;
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.354);
  background: var(--deep);
  color: #FFFFFF;
  padding: calc(var(--u) * 1.354) calc(var(--u) * 1.771);
}

.summary__label {
  flex: none;
  color: var(--night-accent);
  font-size: calc(var(--u) * 0.885);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.summary__value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 1.563);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.summary__note {
  margin-left: auto;
  color: var(--night-accent);
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: calc(var(--u) * 3.958);
  line-height: 0.4;
  white-space: nowrap;
}

.fields {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 1.771);
  margin-top: calc(var(--u) * 1.771);
}

.field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.625);
}

.field--email { flex: none; width: calc(var(--u) * 17.708); }

.field__label {
  color: var(--accent);
  font-size: calc(var(--u) * 0.938);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.field__input {
  border: 0;
  border-bottom: 2px solid rgba(var(--ink-rgb), 0.5);
  background: transparent;
  padding-bottom: calc(var(--u) * 0.729);
  color: inherit;
  font-family: inherit;
  font-size: calc(var(--u) * 1.25);
  font-weight: 500;
  resize: none;
}

.field__input::placeholder { color: inherit; opacity: 0.5; }

.field__input:focus { outline: none; border-bottom-color: var(--accent); }

.send {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.833);
  background: var(--accent);
  color: #FFFFFF;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2.292);
  font-size: calc(var(--u) * 1.198);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.14s ease-out;
}

.send:hover { background: var(--ink); color: var(--paper); }

.promise {
  position: relative;
  display: flex;
  align-items: center;
  border-top: 2px solid rgba(var(--ink-rgb), 0.22);
  padding-top: calc(var(--u) * 1.25);
  margin-top: calc(var(--u) * 1.771);
}

.promise__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid rgba(var(--ink-rgb), 0.18);
  padding-left: calc(var(--u) * 1.563);
}

.promise__item:first-child { border-left: 0; padding-left: 0; }

.promise__value {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 1.771);
  font-weight: 500;
}

.promise__text {
  opacity: 0.8;
  font-size: calc(var(--u) * 0.99);
  font-weight: 500;
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 1400px) {
  .intro__lead { max-width: 360px; }
  .board-sec__note,
  .departures__note,
  .season__note,
  .voices-eu__note { max-width: calc(var(--u) * 22); }
}

@media (max-width: 1100px) {
  .page-europe .topbar { --u: 1vw; padding: 12px var(--gutter); }
  .page-europe .topbar__rule { display: none; }

  .intro { gap: 24px; padding: 34px var(--gutter) 30px; }
  .intro__lead { max-width: 320px; font-size: 18px; }

  .filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgroup:nth-child(2) { border-right: 0; }
  .fgroup:nth-child(1),
  .fgroup:nth-child(2) { border-bottom: max(1.5px, 1px) dashed rgba(var(--ink-rgb), 0.4); }

  .countries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .countries__cell--hero { grid-row: auto; grid-column: 1 / -1; }
  .country__photo { min-height: calc(var(--u) * 30); }

  .quotes { gap: calc(var(--u) * 1.2); }
}

@media (max-width: 900px) {
  .crumbs { margin-top: 0; padding-top: 14px; }
  .crumbs__list { font-size: 14px; gap: 8px; }

  .intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 26px var(--gutter) 26px;
  }

  .intro__title { font-size: clamp(42px, 12vw, 78px); }
  .script--intro { font-size: clamp(40px, 11vw, 70px); padding-bottom: 10px; }
  .kicker--intro { font-size: 13px; letter-spacing: 0.2em; }
  .kicker--intro .kicker__dash { width: 34px; }
  .intro__lead { margin-left: 0; max-width: 100%; text-align: left; font-size: 17px; padding-bottom: 0; }

  .filters { padding: 26px var(--gutter) 30px; }
  .filters__top { flex-direction: column; }
  .filters__strip { flex-wrap: wrap; gap: 8px; border-right: 0; padding: 12px 14px; }
  .filters__code { margin-left: 0; }
  .filters__coupon { width: 100%; padding: 10px; }
  .filters__body { flex-direction: column; }
  .filters__grid { grid-template-columns: 1fr; }
  .fgroup { border-right: 0; border-bottom: 1.5px dashed rgba(var(--ink-rgb), 0.4); padding: 16px 14px; gap: 12px; }
  .fgroup:last-child { border-bottom: 0; }
  .filters__count { width: 100%; border-left: 0; border-top: 2px dashed rgba(var(--ink-rgb), 0.45); flex-direction: row; gap: 12px; padding: 12px; }
  .filters__count-value { font-size: 40px; }
  .chip { padding: 8px 12px; font-size: 15px; }
  .months { gap: 4px; }
  .months__name { font-size: 12px; }
  .filters__summary { margin-top: 16px; gap: 12px; }
  .filters__show { margin-left: 0; }
  .btn--fill { padding: 12px 22px; font-size: 15px; }

  .strip { flex-wrap: wrap; gap: 10px; font-size: 13px; padding: 12px 0; }
  .strip__updated { margin-left: 0; }

  .board-sec { padding-bottom: 46px; }
  .board-sec__inner { padding: 34px var(--gutter) 0; }
  .board-sec__head,
  .departures__head,
  .season__head,
  .voices-eu__head { flex-wrap: wrap; gap: 18px; padding-bottom: 24px; }

  .display--board,
  .display--dep,
  .display--why,
  .display--season,
  .display--voices { font-size: clamp(32px, 9vw, 60px); line-height: 0.92; }

  .script--board,
  .script--dep,
  .script--why,
  .script--season { font-size: clamp(36px, 11vw, 68px); padding-bottom: 8px; }

  .board-sec__note,
  .departures__note,
  .season__note,
  .voices-eu__note { max-width: 100%; text-align: left; padding-bottom: 0; }

  .countries { grid-template-columns: 1fr; gap: 16px; }
  .countries__cell--hero,
  .countries__cell--wide { grid-column: auto; }
  .country__photo { min-height: 62vw; }
  .country__photo--sm { height: 52vw; }
  .country--wide { flex-direction: column; }
  .country__photo--wide { width: 100%; min-height: 52vw; }
  .country__name--hero { font-size: 40px; }
  .country__price--hero { font-size: 26px; }
  .country__caption { left: 14px; right: 14px; bottom: 14px; }
  .country__caption--sm,
  .country__caption--wide { left: 14px; right: 14px; bottom: 12px; }
  .country__foot { padding: 14px; gap: 12px; }
  .country__foot--sm { padding: 12px 14px 14px; }
  .country__body { padding: 14px; }
  .board-sec__foot { flex-wrap: wrap; gap: 14px; margin-top: 24px; padding-top: 16px; }
  .board-sec__foot .btn--outline { margin-left: 0; padding: 12px 22px; font-size: 15px; }

  .departures { padding: 40px var(--gutter) 46px; }
  .tabs { flex-wrap: wrap; }
  .tab { padding: 9px 14px; font-size: 15px; }
  .depgroup { flex-direction: column; gap: 12px; padding-top: 22px; }
  .depgroup + .depgroup { padding-top: 30px; }
  .depgroup__label { width: 100%; padding-top: 12px; }
  .depgroup__code { font-size: 42px; }
  .dep { flex-wrap: wrap; gap: 12px; padding: 16px 0; }
  .dep__date { width: 108px; padding: 8px; }
  .dep__main { flex: 1 1 200px; }
  .dep__route { font-size: 22px; }
  .dep__seats { width: 100%; }
  .dep__price { width: auto; align-items: flex-start; }
  .dep__book { padding: 11px 20px; }
  .departures__foot { flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .departures__all { margin-left: 0; }

  .strip--invert { padding: 12px var(--gutter); }
  .why-eu__curve { display: none; }
  .why-eu__body { flex-direction: column; gap: 26px; padding: 30px var(--gutter) 0; }
  .reason { flex-wrap: wrap; gap: 10px 14px; padding: 16px 0; }
  .reason__no { padding-top: 0; }
  .reason__figure { min-width: 0; font-size: 40px; }
  .reason__text { flex: 1 1 200px; }
  .reason__proof { margin-left: 0; align-items: flex-start; padding-top: 0; }
  .guide { min-width: 0; }
  .guide__photo { height: 56vw; }
  .guide__body { gap: 12px; padding: 14px; }
  .guide__cta { padding: 13px; }
  .hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
  .hub { padding: 12px 14px; }
  .hub:first-child,
  .hub:nth-child(3) { border-left: 0; padding-left: var(--gutter); }
  .hub:nth-child(3),
  .hub:nth-child(4) { border-top: 1px solid rgba(251, 246, 236, 0.28); }
  .hub:last-child { padding-right: var(--gutter); }
  .hub__times { white-space: normal; }

  .season { padding: 40px var(--gutter) 46px; }
  .legend { flex-wrap: wrap; gap: 12px; font-size: 14px; }
  .legend__swatch { width: 22px; height: 9px; }
  .grid-head { display: none; }
  .srow { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .srow__name { font-size: 26px; }
  .bar,
  .bar--c2-4, .bar--c3-5, .bar--c4-7, .bar--c5-7,
  .bar--c6-7, .bar--c7-8, .bar--c7-9, .bar--c7-10, .bar--c9-10 {
    grid-column: 1;
    height: 26px;
    padding: 0 10px;
    font-size: 14px;
  }
  .bar--crowded { display: none; }
  .srow__price { grid-column: 1; text-align: left; }
  .season__foot { margin-top: 22px; gap: 14px; }
  .callout { flex-wrap: wrap; padding: 12px 14px; }
  .season__guide { margin-left: 0; padding: 12px 22px; font-size: 15px; }

  .voices-eu { padding: 40px var(--gutter) 44px; }
  .quotes { grid-template-columns: 1fr; gap: 18px; }
  .quote__body { padding: 16px 16px 0; }
  .quote__body p { font-size: clamp(28px, 8vw, 44px); }
  .quote__head { padding: 12px 16px; }
  .quote__author { padding: 14px 16px 16px; }
  .voices-eu__foot { flex-wrap: wrap; gap: 14px; margin-top: 20px; padding-top: 16px; }
  .voices-eu__foot .btn--outline { margin-left: 0; }

  .planner__inner { padding: 40px var(--gutter) 44px; }
  .planner__ghost { display: none; }
  .planner__head { flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: 22px; }
  .planner__title { font-size: clamp(34px, 10vw, 66px); }
  .script--planner { font-size: clamp(36px, 11vw, 68px); padding-bottom: 8px; }
  .planner__person { margin-left: 0; width: 100%; }
  .planner__avatar { width: 56px; height: 56px; }
  .planner__name { font-size: 20px; }
  .planner__role,
  .planner__note,
  .qstep__hint,
  .promise__text { font-size: 15px; }
  .steps-form { grid-template-columns: 1fr; gap: 24px; margin-top: 26px; }
  .steps-form__rail { display: none; }
  .qstep,
  .qstep--mid,
  .qstep--end { padding: 0; gap: 12px; }
  .qstep__no { width: 40px; height: 40px; font-size: 18px; }
  .qstep__label { font-size: 14px; }
  .qstep__select,
  .qstep__value { font-size: 24px; }
  .summary { flex-wrap: wrap; gap: 10px; margin-top: 26px; padding: 16px; }
  .summary__label { font-size: 12px; }
  .summary__value { font-size: 20px; }
  .summary__note { margin-left: 0; font-size: 44px; }
  .fields { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 24px; }
  .field--email { width: 100%; }
  .field__input { font-size: 18px; }
  .field__label { font-size: 13px; }
  .send { justify-content: center; padding: 15px 24px; font-size: 16px; }
  .promise { flex-wrap: wrap; gap: 16px; margin-top: 26px; padding-top: 18px; }
  .promise__item { flex: 1 1 45%; border-left: 0; padding-left: 0; }
  .promise__value { font-size: 26px; }
}

@media (max-width: 640px) {
  .hubs { grid-template-columns: 1fr; }
  .hub { border-left: 0; border-top: 1px solid rgba(251, 246, 236, 0.28); padding-left: var(--gutter); padding-right: var(--gutter); }
  .hub:first-child { border-top: 0; }
  .promise__item { flex: 1 1 100%; }
  .dep__date { width: 96px; }
  .dep__route { font-size: 20px; }
}

@media (max-width: 420px) {
  .intro__title { font-size: clamp(36px, 13vw, 60px); }
  .country__name--hero { font-size: 32px; }
  .depgroup__code { font-size: 34px; }
  .quote__body p { font-size: 30px; }
}

/* ==========================================================================
   11. Plan my trip — "Tell us four things" (Asia, Africa)
   ========================================================================== */

.ask { --u: 1vw; }

.ask__inner { padding: calc(var(--u) * 3.854) var(--gutter) calc(var(--u) * 4.167); }

.ask__head {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 1.771);
  border-bottom: 3px solid rgba(var(--ink-rgb), 0.3);
  padding-bottom: calc(var(--u) * 1.771);
}

.ask__stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.313);
}

.kicker--ask {
  font-size: calc(var(--u) * 0.938);
  letter-spacing: 0.26em;
}

.display--ask {
  font-size: calc(var(--u) * 5.208);
  line-height: 0.88;
}

.script--ask {
  font-size: calc(var(--u) * 4.792);
  padding-bottom: calc(var(--u) * 1.146);
  white-space: nowrap;
}

.ask__promise {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.208);
  padding-bottom: calc(var(--u) * 0.417);
  text-align: right;
}

.ask__promise-value {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 2.396);
  font-weight: 500;
  line-height: 1;
}

.ask__promise-text {
  opacity: 0.8;
  font-size: calc(var(--u) * 0.99);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.ask__form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 1.563);
  padding-top: calc(var(--u) * 2.083);
}

.askstep {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.625);
}

.askstep__label {
  color: var(--accent);
  font-size: calc(var(--u) * 0.885);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.askstep__field {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.521);
  border-bottom: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.5);
  padding-bottom: calc(var(--u) * 0.625);
}

.askstep__field:focus-within { border-bottom-color: var(--accent); }

/* on dark paper the field rules sit a touch softer, as in the reference */
[data-theme="dark"] .askstep__field,
[data-theme="dark"] .ask__fields .field__input { border-bottom-color: rgba(var(--ink-rgb), 0.45); }

.askstep__select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2317435A' fill-opacity='0.5'/%3E%3C/svg%3E") right center / 0.62em auto no-repeat;
  padding-right: 1.4em;
  color: inherit;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: calc(var(--u) * 1.563);
  font-weight: 500;
  cursor: pointer;
}

[data-theme="dark"] .askstep__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23EDE3D3' fill-opacity='0.5'/%3E%3C/svg%3E");
}

.askstep__select:focus { outline: none; }

.askstep__hint {
  opacity: 0.7;
  font-size: calc(var(--u) * 0.938);
  font-weight: 500;
}

.ask__fields {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 1.771);
  /* the row sits inside the form grid, so its margin drops by one row gap */
  margin-top: calc(var(--u) * 0.729);
  border-top: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.22);
  padding-top: calc(var(--u) * 1.354);
}

.ask__fields .field__label {
  color: var(--accent);
  font-size: calc(var(--u) * 0.885);
}

.ask__fields .field__input {
  border-bottom-width: max(1.5px, calc(var(--u) * 0.078));
  padding-bottom: calc(var(--u) * 0.625);
  font-size: calc(var(--u) * 1.146);
}

.ask__fields .field--email { width: calc(var(--u) * 16.667); }

.ask__send {
  flex: none;
  background: var(--accent);
  color: #FFFFFF;
  padding: calc(var(--u) * 1.146) calc(var(--u) * 2.604);
  font-size: calc(var(--u) * 1.146);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.14s ease-out;
}

.ask__send:hover { background: var(--ink); color: var(--paper); }

.ask__reassure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2.083);
  margin-top: calc(var(--u) * 1.354);
  opacity: 0.78;
  font-size: calc(var(--u) * 0.99);
  font-weight: 500;
}

.ask__star { color: var(--accent); }

@media (max-width: 1100px) {
  .ask__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ask__inner { padding: 40px var(--gutter) 44px; }
  .ask__head { flex-wrap: wrap; gap: 16px; padding-bottom: 20px; }
  .display--ask { font-size: clamp(32px, 9vw, 58px); line-height: 0.92; }
  .script--ask { font-size: clamp(34px, 10vw, 64px); padding-bottom: 6px; white-space: normal; }
  .ask__promise { margin-left: 0; text-align: left; }
  .ask__promise-value { font-size: 34px; }
  .ask__promise-text,
  .askstep__hint,
  .ask__reassure { font-size: 15px; }
  .ask__form { grid-template-columns: 1fr; gap: 22px; padding-top: 24px; }
  .askstep__label { font-size: 13px; }
  .askstep__select { font-size: 24px; }
  .ask__fields { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 24px; padding-top: 18px; }
  .ask__fields .field--email { width: 100%; }
  .ask__fields .field__input { font-size: 18px; }
  .ask__send { padding: 15px 24px; font-size: 16px; }
  .ask__reassure { gap: 10px 18px; margin-top: 20px; }
}

/* ==========================================================================
   12. Section strips (Africa, Americas)
   ========================================================================== */

.afstrip {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.146);
  margin: 0;
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.afstrip--board {
  margin: 0 calc(var(--u) * 2.083);
  border-top: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  border-bottom: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  padding: calc(var(--u) * 0.938) 0;
}

.afstrip--season {
  border-bottom: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  padding: calc(var(--u) * 0.938) calc(var(--u) * 2.083);
  flex-wrap: wrap;
}

.afstrip__live {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.521);
  color: var(--accent);
  white-space: nowrap;
}

.afstrip__dot {
  width: calc(var(--u) * 0.469);
  height: calc(var(--u) * 0.469);
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.afstrip__accent { color: var(--accent); }

.afstrip__dim {
  opacity: 0.6;
  white-space: nowrap;
}

.afstrip--season .afstrip__dim { opacity: 0.55; }

.afstrip__dim--push { margin-left: auto; }

.afstrip__gate {
  border: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.3);
  padding: calc(var(--u) * 0.313) calc(var(--u) * 0.625);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* ==========================================================================
   13. Open departures — season rail (Africa, Americas)
   ========================================================================== */

.dstops-sec {
  --u: 0.9583333vw;
  padding: 3.438vw 2.083vw 3.958vw;
}

.dstops__head {
  gap: calc(var(--u) * 1.563);
  flex-wrap: wrap;
  padding: 0 0 calc(var(--u) * 2.292);
}

.display--dstops {
  font-size: calc(var(--u) * 5);
  line-height: 0.9;
}

.dstops__note {
  margin-left: auto;
  max-width: calc(var(--u) * 17.708);
  min-width: 220px;
  padding-bottom: calc(var(--u) * 0.625);
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
}

.dstops {
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 1.354);
  flex-wrap: wrap;
}

.dstop {
  flex: 1 1 calc(var(--u) * 12.5);
  min-width: min(240px, 100%);
  display: flex;
}

.dstop__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.625);
  color: inherit;
}

.dstop__rule {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.521);
}

.dstop__dot {
  flex: none;
  width: max(12px, calc(var(--u) * 0.833));
  height: max(12px, calc(var(--u) * 0.833));
  border-radius: 50%;
  background: var(--ink);
}

.dstop__dot--hot { background: var(--accent); }

.dstop__line {
  flex: 1;
  height: max(2px, calc(var(--u) * 0.104));
  background: rgba(var(--ink-rgb), 0.25);
}

.dstop__date {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(22px, calc(var(--u) * 1.771), 34px);
  font-weight: 600;
  line-height: 1;
  transition: color 0.16s ease-out;
}

.dstop__link:hover .dstop__date { color: var(--accent); }

.dstop__trip {
  min-height: calc(var(--u) * 2.708);
  font-size: clamp(15px, calc(var(--u) * 1.094), 21px);
  font-weight: 500;
}

.dstop__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.521);
  border-top: max(1px, calc(var(--u) * 0.052)) dashed rgba(var(--ink-rgb), 0.3);
  padding-top: calc(var(--u) * 0.521);
}

.dstop__days {
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 500;
  opacity: 0.7;
}

.dstop__price {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(18px, calc(var(--u) * 1.354), 26px);
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}

.dstop__seats {
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 500;
  opacity: 0.7;
}

.dstop__seats--hot {
  color: var(--accent);
  font-weight: 700;
  opacity: 1;
}

.dstops__foot {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.042);
  flex-wrap: wrap;
  margin-top: calc(var(--u) * 2.083);
  padding-top: calc(var(--u) * 1.146);
  border-top: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.2);
}

.dstops__terms {
  margin: 0;
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  font-weight: 500;
  opacity: 0.75;
}

.dstops__all {
  margin-left: auto;
  padding: calc(var(--u) * 0.729) calc(var(--u) * 1.563);
  font-size: clamp(15px, calc(var(--u) * 0.99), 19px);
}

/* ==========================================================================
   14. Season map — month columns (Africa, Americas)
   ========================================================================== */

.mmap-sec {
  --u: 1vw;
  padding: 0 0 4.062vw;
}

.mmap__key {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.521);
  opacity: 0.8;
}

.mmap__key--push { margin-left: auto; }

.mmap__swatch {
  width: calc(var(--u) * 1.146);
  min-width: 18px;
  height: max(8px, calc(var(--u) * 0.521));
}

.mmap__swatch--pick { background: var(--accent); }
.mmap__swatch--open { border: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.3); }
.mmap__swatch--rains { background: rgba(var(--ink-rgb), 0.72); }

.mmap__head {
  gap: calc(var(--u) * 1.875);
  flex-wrap: wrap;
  padding: calc(var(--u) * 2.917) calc(var(--u) * 2.083) calc(var(--u) * 1.875);
}

.display--mmap {
  font-size: clamp(40px, calc(var(--u) * 5), 96px);
  line-height: 0.9;
}

.display__arrow { color: var(--accent); }

.script--mmap {
  font-size: clamp(40px, calc(var(--u) * 4.271), 82px);
  padding-bottom: calc(var(--u) * 1.146);
  white-space: nowrap;
}

.mmap__note {
  margin-left: auto;
  max-width: calc(var(--u) * 17.188);
  min-width: 220px;
  padding-bottom: calc(var(--u) * 0.729);
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
}

.mmap {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0 calc(var(--u) * 2.083);
  border-top: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
}

.mcol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.625);
  border-left: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
  padding: calc(var(--u) * 0.938) calc(var(--u) * 0.938) calc(var(--u) * 1.146);
}

.mcol--first {
  border-left: 0;
  padding-left: 0;
}

.mcol--last { padding-right: 0; }

.mcol--pick { background: rgba(var(--accent-rgb), 0.09); }

.mcol--off { background: rgba(var(--ink-rgb), 0.04); }

.mcol__top {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: max(3px, calc(var(--u) * 0.156));
  background: var(--accent);
}

.mcol__head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.417);
  margin: 0;
}

.mcol__head--off { opacity: 0.5; }

.mcol__no {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(11px, calc(var(--u) * 0.781), 15px);
  letter-spacing: 0.18em;
  opacity: 0.5;
}

.mcol__no--pick {
  color: var(--accent);
  opacity: 1;
}

.mcol__name {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(20px, calc(var(--u) * 1.771), 34px);
  font-weight: 600;
}

.mcol__script {
  margin-left: auto;
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: clamp(24px, calc(var(--u) * 2.083), 40px);
  line-height: 0.5;
  color: var(--accent);
  white-space: nowrap;
}

.mcol__meter {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.313);
  margin: 0;
}

.mbar {
  flex: 1;
  height: max(3px, calc(var(--u) * 0.208));
}

.mbar--light { background: rgba(var(--ink-rgb), 0.3); }
.mbar--mid { background: rgba(var(--ink-rgb), 0.5); }
.mbar--pick { background: var(--accent); }
.mbar--rains { background: rgba(var(--ink-rgb), 0.72); }

.mcost {
  font-size: clamp(11px, calc(var(--u) * 0.781), 15px);
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.55;
}

.mcost--pick {
  color: var(--accent);
  opacity: 1;
}

.mcol__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.417);
}

.mtag {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.417);
  border: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.3);
  padding: calc(var(--u) * 0.417) calc(var(--u) * 0.677);
  font-size: clamp(13px, calc(var(--u) * 0.938), 18px);
  font-weight: 600;
}

.mtag--pick {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.mtag__days {
  margin-left: auto;
  font-size: clamp(11px, calc(var(--u) * 0.781), 15px);
  opacity: 0.7;
}

.mtag--pick .mtag__days { opacity: 0.8; }

.mcol__note {
  margin: 0;
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 500;
  opacity: 0.6;
  text-wrap: pretty;
}

.mcol__count {
  margin: auto 0 0;
  font-size: clamp(12px, calc(var(--u) * 0.833), 16px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}

.mcol__count--pick {
  color: var(--accent);
  opacity: 1;
}

.mcol__count--off { opacity: 0.4; }

.mmap__foot {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.354);
  flex-wrap: wrap;
  margin: 0 calc(var(--u) * 2.083);
  padding-top: calc(var(--u) * 1.042);
  border-top: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22);
}

.mmap__foot-text {
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  font-weight: 500;
  opacity: 0.75;
}

.mmap__foot-script {
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: clamp(26px, calc(var(--u) * 2.188), 42px);
  line-height: 0.5;
  color: var(--accent);
  transform: rotate(-5deg);
  transform-origin: left center;
  white-space: nowrap;
}

.mmap__foot-link {
  margin-left: auto;
  border-bottom: max(2px, calc(var(--u) * 0.104)) solid var(--accent);
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-theme="dark"] .mmap__swatch--rains,
[data-theme="dark"] .mbar--rains { background: rgba(var(--ink-rgb), 0.85); }

[data-theme="dark"] .mbar--light { background: rgba(var(--ink-rgb), 0.35); }
[data-theme="dark"] .mbar--mid { background: rgba(var(--ink-rgb), 0.6); }
[data-theme="dark"] .mmap__swatch--open,
[data-theme="dark"] .mtag { border-color: rgba(var(--ink-rgb), 0.35); }
[data-theme="dark"] .mtag--pick { border-color: var(--accent); }
[data-theme="dark"] .mcol--off { background: rgba(var(--ink-rgb), 0.05); }

/* the season map keeps slightly stronger rules on dark paper, as in the reference */
[data-theme="dark"] .afstrip--season { border-bottom-color: rgba(var(--ink-rgb), 0.25); }
[data-theme="dark"] .mmap,
[data-theme="dark"] .mcol,
[data-theme="dark"] .mmap__foot { border-color: rgba(var(--ink-rgb), 0.25); }

/* ==========================================================================
   15. Voices — letter home (Africa, Americas)
   ========================================================================== */

.vletters-sec {
  --u: 0.9583333vw;
  padding: 3.438vw 2.083vw 3.854vw;
}

.vletters__head {
  gap: calc(var(--u) * 1.563);
  flex-wrap: wrap;
  padding: 0 0 calc(var(--u) * 2.083);
}

.display--vletters {
  font-size: clamp(40px, calc(var(--u) * 4.792), 92px);
  line-height: 0.9;
}

.script--vletters {
  font-size: clamp(38px, calc(var(--u) * 4.063), 78px);
  padding-bottom: calc(var(--u) * 1.042);
  transform: rotate(-6deg);
  white-space: nowrap;
}

.vletters {
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 1.354);
  flex-wrap: wrap;
}

.vletter {
  flex: 1 1 58%;
  min-width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.146);
  margin: 0;
  border: max(2px, calc(var(--u) * 0.104)) solid var(--af-card-border);
  background: var(--af-card);
  padding: calc(var(--u) * 1.771) calc(var(--u) * 1.979) calc(var(--u) * 1.667);
}

.vletter__head {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 1.25);
  flex-wrap: wrap;
}

.vletter__from {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.208);
  margin: 0;
}

.vletter__from-label {
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}

.vletter__place {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(20px, calc(var(--u) * 1.563), 30px);
  font-weight: 500;
}

.vletter__mark {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.833);
  margin: 0 0 0 auto;
}

.vmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(72px, calc(var(--u) * 5));
  height: max(72px, calc(var(--u) * 5));
  border: max(2px, calc(var(--u) * 0.104)) dashed rgba(var(--ink-rgb), 0.35);
  border-radius: 50%;
  transform: rotate(-11deg);
  color: var(--accent);
  font-size: clamp(12px, calc(var(--u) * 0.781), 15px);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.vletter__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 0.104);
}

.vletter__score {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(30px, calc(var(--u) * 2.292), 44px);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.vletter__rated {
  font-size: clamp(12px, calc(var(--u) * 0.833), 16px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

.vletter__quote { margin: 0; }

.vletter__quote p {
  margin: 0;
  font-size: clamp(20px, calc(var(--u) * 1.771), 34px);
  font-weight: 500;
  line-height: 1.32;
  text-wrap: pretty;
}

.vletter__sign {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 1.042);
  flex-wrap: wrap;
  border-top: max(1px, calc(var(--u) * 0.052)) dashed rgba(var(--ink-rgb), 0.35);
  padding-top: calc(var(--u) * 0.313);
}

.vletter__who {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.104);
}

.vletter__name {
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: clamp(34px, calc(var(--u) * 2.917), 56px);
  line-height: 0.6;
  color: var(--ink);
}

.vletter__trip {
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.vletter__verified {
  margin-left: auto;
  color: var(--accent);
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vstubs {
  flex: 1 1 30%;
  min-width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.938);
}

.vstub {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.521);
  border: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.28);
  padding: calc(var(--u) * 1.042) calc(var(--u) * 1.146);
  color: inherit;
  transition: border-color 0.16s ease-out;
}

.vstub:hover { border-color: var(--accent); }

.vstub__head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.625);
}

.vstub__origin {
  color: var(--accent);
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.vstub__score {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(17px, calc(var(--u) * 1.25), 24px);
  font-weight: 500;
}

.vstub__text {
  font-size: clamp(15px, calc(var(--u) * 1.094), 21px);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.vstub__author {
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 600;
  opacity: 0.65;
}

.vstubs__avg {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.729);
  flex-wrap: wrap;
  background: var(--af-panel);
  color: var(--af-panel-ink);
  padding: calc(var(--u) * 1.146);
}

.vstubs__avg-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.104);
}

.vstubs__avg-value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(28px, calc(var(--u) * 2.083), 40px);
  font-weight: 600;
  line-height: 1;
}

.vstubs__avg-label {
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 500;
  opacity: 0.8;
}

.vstubs__avg-link {
  margin-left: auto;
  color: var(--af-panel-accent);
  font-size: clamp(14px, calc(var(--u) * 0.938), 18px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1400px) {
  .mmap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mcol--first { padding-left: calc(var(--u) * 0.938); border-left: max(1px, calc(var(--u) * 0.052)) solid rgba(var(--ink-rgb), 0.22); }
  .mcol--last { padding-right: calc(var(--u) * 0.938); }
}

@media (max-width: 1100px) {
  .dstop { flex: 1 1 40%; }
}

@media (max-width: 900px) {
  .pboard,
  .pboard__foot,
  .afstrip--board { margin: 0 var(--gutter); }

  .dstops-sec { padding: 40px var(--gutter) 44px; }
  .dstops__head { padding-bottom: 26px; }
  .display--dstops { font-size: clamp(32px, 8vw, 52px); }
  .dstops__note { min-width: 0; max-width: none; text-align: left; padding-bottom: 0; }
  .dstop { flex: 1 1 100%; }
  .dstop__trip { min-height: 0; }
  .dstops__foot { gap: 12px; margin-top: 24px; padding-top: 16px; }
  .dstops__all { margin-left: 0; padding: 14px 22px; font-size: 15px; }

  .mmap-sec { padding-bottom: 44px; }
  .afstrip--season { padding: 14px var(--gutter); gap: 10px; }
  .mmap__key--push { margin-left: 0; }
  .mmap__head { padding: 34px var(--gutter) 24px; }
  .display--mmap { font-size: clamp(32px, 8vw, 52px); }
  .script--mmap { font-size: clamp(32px, 9vw, 56px); padding-bottom: 6px; white-space: normal; }
  .mmap__note { min-width: 0; text-align: left; padding-bottom: 0; }
  .mmap,
  .mmap__foot { margin: 0 var(--gutter); }
  .mmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcol { padding: 16px 14px 18px; gap: 10px; }
  .mcol__script { font-size: 26px; }
  .mmap__foot { gap: 10px; }
  .mmap__foot-script { font-size: 28px; }
  .mmap__foot-link { margin-left: 0; }

  .vletters-sec { padding: 40px var(--gutter) 44px; }
  .vletters__head { padding-bottom: 24px; }
  .display--vletters { font-size: clamp(32px, 8vw, 52px); }
  .script--vletters { font-size: clamp(32px, 9vw, 56px); padding-bottom: 6px; white-space: normal; }
  .vletter { min-width: 0; padding: 22px 22px 20px; gap: 18px; }
  .vletter__quote p { font-size: 20px; }
  .vletter__name { font-size: 34px; }
  .vletter__verified { margin-left: 0; }
  .vstubs { flex: 1 1 100%; min-width: 0; gap: 14px; }
  .vstub { padding: 16px 18px; }
  .vstubs__avg { padding: 18px; }
}

@media (max-width: 640px) {
  .afstrip--board { flex-wrap: wrap; gap: 8px 14px; font-size: 12px; }
  .afstrip__dim--push { margin-left: 0; }

  .mmap { grid-template-columns: 1fr; }
  .mcol--first,
  .mcol { border-left: 0; border-top: 1px solid rgba(var(--ink-rgb), 0.22); }
  .mcol--first { border-top: 0; }
  .mcol__count { margin-top: 6px; }

  .vletter__mark { margin-left: 0; }
}

@media (max-width: 420px) {
  .vmark { width: 64px; height: 64px; }

  /* the price is nowrap, so on the narrowest phones it takes its own line
     instead of pushing out of the photo it is captioning */
  .country__caption { flex-wrap: wrap; gap: 4px 10px; }
  .country__price { margin-left: 0; }
  .country__price--hero { font-size: 22px; }
}

/* ==========================================================================
   16. Filter rail — split-flap fields (Africa, Islands)
   ========================================================================== */

.flaps-sec {
  --u: 0.9583333vw;
  padding: 1.563vw 2.083vw 1.979vw;
}

.flaps__strip {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.833);
  margin: 0;
  padding-bottom: calc(var(--u) * 0.625);
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.flaps__dot {
  width: calc(var(--u) * 0.469);
  height: calc(var(--u) * 0.469);
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.flaps__strip-label { color: var(--accent); }

.flaps__strip-rule {
  flex: 1 1 auto;
  height: max(1px, calc(var(--u) * 0.052));
  background: rgba(var(--ink-rgb), 0.2);
}

.flaps__strip-dim {
  opacity: 0.55;
  white-space: nowrap;
}

.flaps {
  display: flex;
  align-items: stretch;
  border-top: max(2px, calc(var(--u) * 0.104)) solid var(--ink);
  border-bottom: max(2px, calc(var(--u) * 0.104)) solid var(--ink);
}

.flap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.521);
  padding: calc(var(--u) * 1.042) calc(var(--u) * 1.25) calc(var(--u) * 1.146);
}

.flap__label {
  font-size: clamp(12px, calc(var(--u) * 0.781), 15px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.5;
}

.flap__value {
  position: relative;
  align-self: flex-start;
  background: var(--af-panel);
  color: var(--af-panel-ink);
  padding: calc(var(--u) * 0.417) calc(var(--u) * 0.833) calc(var(--u) * 0.521);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(20px, calc(var(--u) * 1.875), 36px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

/* the slat line of a split-flap board */
.flap__slat {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(1px, calc(var(--u) * 0.052));
  background: rgba(26, 26, 26, 0.55);
}

.flap__value--unset {
  background: none;
  letter-spacing: normal;
  border: max(2px, calc(var(--u) * 0.104)) dashed rgba(var(--ink-rgb), 0.4);
  color: inherit;
  opacity: 0.6;
}

.flap__alts {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.365);
  flex-wrap: wrap;
}

.flap__alt {
  border: max(1.5px, calc(var(--u) * 0.078)) solid var(--af-alt-border);
  padding: calc(var(--u) * 0.26) calc(var(--u) * 0.573);
  color: inherit;
  font-family: inherit;
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.16s ease-out, color 0.16s ease-out;
}

.flap__alt:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.flap__more {
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 600;
  opacity: 0.55;
}

.flap__sep {
  width: max(1px, calc(var(--u) * 0.052));
  margin: calc(var(--u) * 0.833) 0;
  background: var(--af-rule);
}

.flaps__count {
  flex: none;
  width: max(240px, calc(var(--u) * 16.458));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 0.625);
  padding: calc(var(--u) * 1.042) calc(var(--u) * 1.354) calc(var(--u) * 1.146);
  background: var(--af-panel);
  color: var(--af-panel-ink);
}

.flaps__count-head {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 0.521);
  margin: 0;
}

.flaps__count-value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: clamp(38px, calc(var(--u) * 3.229), 62px);
  font-weight: 600;
  line-height: 0.85;
  color: var(--apricot);
}

.flaps__count-label {
  padding-bottom: calc(var(--u) * 0.313);
  font-size: clamp(14px, calc(var(--u) * 1.042), 20px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.flaps__meter {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.365);
  margin: 0;
}

.flaps__meter-track {
  display: block;
  height: max(5px, calc(var(--u) * 0.313));
  background: var(--af-track);
}

.flaps__meter-fill {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--accent);
}

.flaps__meter-label {
  font-size: clamp(12px, calc(var(--u) * 0.833), 16px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.flaps__link {
  align-self: flex-start;
  border-bottom: max(2px, calc(var(--u) * 0.104)) solid var(--apricot);
  color: var(--apricot);
  font-size: clamp(13px, calc(var(--u) * 0.99), 19px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.flaps__applied {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.938);
  flex-wrap: wrap;
  margin: 0;
  padding-top: calc(var(--u) * 0.729);
}

.flaps__applied-label {
  font-size: clamp(12px, calc(var(--u) * 0.833), 16px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
}

.flaps__applied-value {
  font-size: clamp(15px, calc(var(--u) * 1.094), 21px);
  font-weight: 600;
}

.flaps__applied-note {
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: clamp(26px, calc(var(--u) * 2.083), 40px);
  line-height: 0.5;
  color: var(--accent);
  transform: rotate(-6deg);
  transform-origin: left center;
}

.flaps__reset {
  margin-left: auto;
  border-bottom: max(1.5px, calc(var(--u) * 0.078)) solid rgba(var(--ink-rgb), 0.4);
  color: inherit;
  font-family: inherit;
  font-size: clamp(13px, calc(var(--u) * 0.938), 18px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
}

.flaps__reset:hover { opacity: 1; }

/* ==========================================================================
   17. Board section shell (Africa, Islands)
   ========================================================================== */

.pboard-sec {
  --u: 1vw;
  padding: 0 0 4.062vw;
}

.pboard__head {
  gap: calc(var(--u) * 1.875);
  padding: calc(var(--u) * 3.021) calc(var(--u) * 2.083) calc(var(--u) * 2.083);
}

.pboard__head .section-head__stack { gap: calc(var(--u) * 0.521); }

.display--pboard {
  font-size: calc(var(--u) * 5.417);
  line-height: 0.86;
}

.display__outline--thin { -webkit-text-stroke: max(1.5px, calc(var(--u) * 0.104)) var(--ink); }

.script--pboard {
  font-size: clamp(38px, calc(var(--u) * 4.063), 78px);
  padding-bottom: calc(var(--u) * 1.25);
  transform: rotate(-6deg);
  white-space: nowrap;
}

.pboard__note {
  margin-left: auto;
  max-width: calc(var(--u) * 18.75);
  min-width: 220px;
  padding-bottom: calc(var(--u) * 0.833);
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
}

.pboard__foot {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.042);
  flex-wrap: wrap;
  margin: calc(var(--u) * 1.771) calc(var(--u) * 2.083) 0;
  padding-top: calc(var(--u) * 1.042);
  border-top: max(1px, calc(var(--u) * 0.052)) dashed rgba(var(--ink-rgb), 0.3);
}

.pboard__foot-label {
  font-size: clamp(13px, calc(var(--u) * 0.885), 17px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

.pboard__foot-text {
  font-size: clamp(15px, calc(var(--u) * 1.042), 20px);
  font-weight: 500;
}

.pboard__foot-link {
  margin-left: auto;
  border-bottom: max(2px, calc(var(--u) * 0.104)) solid var(--accent);
  color: var(--accent);
  font-size: clamp(14px, calc(var(--u) * 0.99), 19px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1400px) {
  .flaps__count { width: max(220px, calc(var(--u) * 16.458)); }}

@media (max-width: 1100px) {
  .flaps { flex-wrap: wrap; }
  .flap { flex: 1 1 40%; }
  .flap__sep { display: none; }
  .flaps__count { width: 100%; }
}

@media (max-width: 900px) {
  .flaps-sec { padding: 26px var(--gutter) 30px; }
  .flaps__strip { gap: 12px; font-size: 12px; }
  .flap { flex: 1 1 100%; padding: 16px 0 18px; }
  .flap + .flap { border-top: 1px solid rgba(var(--ink-rgb), 0.18); }
  .flap__value { font-size: 24px; }
  .flaps__count { padding: 18px 20px 20px; }
  .flaps__count-value { font-size: 40px; }
  .flaps__applied { gap: 12px; padding-top: 14px; }
  .flaps__applied-note { font-size: 28px; }

  .pboard-sec { padding-bottom: 44px; }
  .pboard__head { padding: 34px var(--gutter) 26px; }
  .display--pboard { font-size: clamp(34px, 8vw, 54px); }
  .script--pboard { font-size: clamp(34px, 9vw, 56px); padding-bottom: 6px; }
  .pboard__note { min-width: 0; text-align: left; padding-bottom: 0; }
  .pboard__foot { gap: 10px; }
  .pboard__foot-link { margin-left: 0; }}

@media (max-width: 640px) {
  .flaps__strip { flex-wrap: wrap; }
  .flaps__strip-rule { display: none; }
  .flaps__reset { margin-left: 0; }}

@media (max-width: 420px) {
  .flap__value { font-size: 21px; }
}

/* ==========================================================================
   18. Paper pages — tokens and devices (About, How we work)
   ========================================================================== */

.page-paper {
  --ab-panel: #17435A;
  --ab-panel-ink: #FBF6EC;
  --ab-panel-rgb: 251, 246, 236;
  --ab-panel-accent: #F0B48A;
  --ab-card-border: #17435A;
  --ab-tab-bg: #17435A;
  --ab-tab-ink: #FBF6EC;
  --ab-tab-accent: #F0B48A;
  --ab-on-accent: #FFFFFF;
  --ab-on-accent-deep: #FFFFFF;
  --ab-on-accent-soft: #FBF6EC;
  --ab-sign-bg: #17435A;
  --ab-sign-ink: #FBF6EC;
  --ab-sign-name: #F0B48A;
  --ab-mail-bg: #FBF6EC;
  --ab-mail-ink: #17435A;
  --ab-mail-rgb: 23, 67, 90;
  --ab-mail-bar: #17435A;
  --ab-mail-bar-ink: #FBF6EC;
  --ab-mail-bar-accent: #F0B48A;
  --ab-mail-rule: #17435A;
  --ab-panel-cta: #E2661F;
  --ab-panel-cta-ink: #17435A;
  --on-accent-soft-rgb: 251, 246, 236;
}

[data-theme="dark"] .page-paper {
  --ab-panel: transparent;
  --ab-panel-ink: #EDE3D3;
  --ab-panel-rgb: 237, 227, 211;
  --ab-panel-accent: #E2661F;
  --ab-card-border: rgba(237, 227, 211, 0.45);
  --ab-tab-bg: #EDE3D3;
  --ab-tab-ink: #1A1A1A;
  --ab-tab-accent: #C0521B;
  --ab-on-accent: #FFFFFF;
  --ab-on-accent-deep: #1A1A1A;
  --ab-on-accent-soft: #FFF6EA;
  --ab-sign-bg: #EDE3D3;
  --ab-sign-ink: #1A1A1A;
  --ab-sign-name: #C0521B;
  --ab-mail-bg: #EDE3D3;
  --ab-mail-ink: #1A1A1A;
  --ab-mail-rgb: 26, 26, 26;
  --ab-mail-bar: #1A1A1A;
  --ab-mail-bar-ink: #EDE3D3;
  --ab-mail-bar-accent: #E2661F;
  --ab-mail-rule: #1A1A1A;
  --ab-panel-cta: #E2661F;
  --ab-panel-cta-ink: #1A1A1A;
  --on-accent-soft-rgb: 255, 246, 234;
}

.letterhead {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 22px 0 18px;
  border-bottom: 2px solid var(--ink);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 17px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.letterhead--invert {
  margin: 0;
  padding: 16px 32px 14px;
  border-top: 4px solid var(--ab-panel-accent);
  border-bottom: 1px solid rgba(var(--ab-panel-rgb), 0.25);
}

.letterhead__live {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
}

.letterhead--invert .letterhead__live { color: var(--ab-panel-accent); }

.letterhead__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentcolor;
}

.letterhead__dim { opacity: 0.55; }

.letterhead__code {
  margin-left: auto;
  opacity: 0.55;
}

/* the manifesto sheet is printed a shade lighter */
.mani .letterhead__dim,
.mani .letterhead__code { opacity: 0.5; }

.letterhead__dim--push { margin-left: auto; }

.letterhead__tag {
  border: 2px solid var(--ink);
  padding: 5px 13px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.letterhead--invert .letterhead__tag { border-color: rgba(var(--ab-panel-rgb), 0.5); }

/* on dark paper the last three strips — and their tags — soften to 45% */
[data-theme="dark"] .staff .letterhead,
[data-theme="dark"] .guides .letterhead,
[data-theme="dark"] .papers .letterhead { border-bottom-color: rgba(var(--ink-rgb), 0.45); }

[data-theme="dark"] .staff .letterhead__tag,
[data-theme="dark"] .guides .letterhead__tag,
[data-theme="dark"] .papers .letterhead__tag { border-color: rgba(var(--ink-rgb), 0.45); }

[data-theme="dark"] .proc__foot,
[data-theme="dark"] .staff__foot,
[data-theme="dark"] .papers__foot { border-top-color: rgba(var(--ink-rgb), 0.45); }

.display--about {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 96px;
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.02em;
}

.outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

.outline--cream { -webkit-text-stroke: 2px var(--ab-panel-ink); }

.script--about {
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: 76px;
  line-height: 0.5;
  color: var(--accent);
  transform: rotate(-6deg);
  transform-origin: left bottom;
  padding-top: 30px;
  white-space: nowrap;
}

.script--about-cream { color: var(--ab-panel-accent); }

/* figure + sentence pair inside a bottom rail */
.rail__pair {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

/* proof / cost chip */
.chipx {
  flex: none;
  border: 2px solid var(--accent);
  padding: 3px 9px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.chipx--cream {
  border-color: var(--ab-panel-accent);
  color: var(--ab-panel-accent);
}

/* tick meters */
.ticks12,
.ticks15,
.ticks16 {
  display: flex;
  gap: 3px;
}

.ticks12 .t,
.ticks15 .t,
.ticks16 .t {
  flex: 1;
  height: 9px;
  background: rgba(var(--ab-panel-rgb), 0.22);
}

.ticks12 .t.is-on,
.ticks15 .t.is-on,
.ticks16 .t.is-on { background: var(--ab-panel-accent); }