/* ================================================================
   FlightHub – Unveiled 2026
   Homepage stylesheet
   ================================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- Custom font: Akira Expanded (headings) ---------- */
@font-face {
  font-family: 'Akira Expanded';
  src: url('../assets/fonts/AkiraSuperBold.woff2') format('woff2'),
       url('../assets/fonts/AkiraSuperBold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Google Fonts (Inter) loaded via <link> in the HTML ---------- */

/* ---------- Design tokens ---------- */
:root {
  --sand-light:   #FFFBF2;   /* page background */
  --sand:         #FAF5E8;   /* dividers / subtle accents */
  --sand-deep:    #F5EFE0;   /* a touch darker than --sand, for cards that need to read as distinct */
  --slate:        #222222;   /* headings, dark sections */
  --slate-soft:   #555555;   /* dark-section divider */
  --orange:       #FF6432;   /* accent (CEO name) */
  --white:        #FFFFFF;

  --font-akira:   'Akira Expanded', 'Arial Black', 'Impact', sans-serif;
  --font-inter:   'Inter', 'Helvetica Neue', Arial, sans-serif;

  --content-max:  1840px;
  --gutter:       clamp(20px, 4vw, 40px);
}

body {
  background: var(--sand-light);
  color: var(--slate);
  font-family: var(--font-inter);
  overflow-x: hidden;
}

/* ================================================================
   UTILITIES
   ================================================================ */
/* Reusable grain/noise overlay for colored sections (matches the
   "Noise" effect used throughout the Figma file). Combine with a
   background color on the same element:
     <div class="noise-bg" style="background: var(--canada-red)">
   The element needs its own background — this only adds the grain.
   Override strength per-use with --noise-opacity (default 0.6). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.noise-bg {
  position: relative;
  isolation: isolate;
}
.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--noise-opacity, 0.6);
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='3' intercept='-1'/><feFuncG type='linear' slope='3' intercept='-1'/><feFuncB type='linear' slope='3' intercept='-1'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ================================================================
   HEADER
   ================================================================ */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--gutter);
}

.site-header__logo img {
  width: clamp(120px, 12vw, 174px);
  height: auto;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--slate);
  border: none;
  border-radius: 0;
  padding: 6px 16px;
  cursor: pointer;
  color: var(--sand-light);
  transition: background 0.3s;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
  background: var(--orange);
}

.menu-toggle__icon {
  display: block;
  width: 18px;
  height: 18px;
}

.menu-toggle__label {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}

/* ---- Sticky menu button ----
   A second trigger for the same #menu-panel, fixed to the viewport.
   It lives as a sibling of .section-scroller (not nested inside it),
   because .section-scroller clips fixed-position descendants via its
   own overflow: hidden — nesting it there would make it vanish on
   every slide except the one it happened to be laid out on. Hidden by
   default; main.js fades it in once the first slide (hero) has
   scrolled/paged fully out of view, and fades it back out if the
   visitor returns to the top — the same IntersectionObserver-driven
   check works whether the deck is transform-paging (desktop) or the
   page is a normal stacked scroll (mobile / reduced-motion). */
.menu-toggle--sticky {
  position: fixed;
  top: 24px;
  right: var(--gutter);
  z-index: 25;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.menu-toggle--sticky.is-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Swaps to orange once main.js's footer-overlap observer detects the
   button is sitting over .site-footer's dark slate background (the
   button's own default background -- see .menu-toggle above) -- the
   transition is already declared on .menu-toggle's background
   property, so this only needs the color swap itself. */
.menu-toggle--sticky.is-over-footer {
  background: var(--orange);
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle--sticky {
    transition: none;
  }
}

/* ---- Chapter dropdown ----
   Fixed (not absolute) since it now sits as a sibling of
   .section-scroller rather than nested inside the hero slide — it
   used to only ever be opened while slide 0 was on screen, but the
   sticky trigger above can open it from any point down the page, so
   it needs to stay pinned to the viewport regardless of scroll/deck
   position rather than being positioned relative to some ancestor's
   box. */
.menu-panel {
  position: fixed;
  top: 84px;
  right: var(--gutter);
  z-index: 20;
  background: var(--slate);
  border-radius: 0;
  padding: 32px;
  max-width: min(90vw, 1018px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

/* ---- Utility row: Home + language switch, above the chapter grid ---- */
.menu-panel__utility {
  list-style: none;
  display: flex;
  gap: 32px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #555555;
}
.menu-panel__utility a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--sand-light);
  transition: color 0.3s;
}
.menu-panel__utility a:hover { color: var(--yellow); }
.menu-panel__utility .material-symbols-rounded {
  font-size: 20px;
  color: inherit;
}

.menu-panel__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 286px));
  gap: 24px 32px;
}

.menu-panel__grid a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  padding-bottom: 16px;
  border-bottom: 1px solid #555555;
}

.menu-panel__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--sand-light);
  transition: color 0.3s;
}
.menu-panel__subtitle {
  font-size: 12px;
  color: #9a9a9a;
}
.menu-panel__grid a:hover .menu-panel__title { color: var(--yellow); }
.menu-panel__grid a.is-active { border-bottom-color: var(--yellow); }
.menu-panel__grid a.is-active .menu-panel__title { color: var(--yellow); }

/* "The Select 10" chapter link's title and underline are blue on
   every page and in every state (default, hover, and on its own page
   where it also carries .is-active), instead of the shared
   yellow/sand-light/gray-divider treatment the other chapter links
   use. No hover swap. The subtitle keeps the shared gray. !important
   guarantees this beats the equal- or higher-specificity
   default/hover/is-active rules above regardless of source order. */
.menu-panel__grid a[href="the-select-10.html"] {
  border-bottom-color: var(--blue) !important;
}
.menu-panel__grid a[href="the-select-10.html"] .menu-panel__title {
  color: var(--blue) !important;
}

@media (max-width: 760px) {
  .menu-panel {
    padding: 24px;
  }
  .menu-panel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  width: 100%;
}

.hero__mosaic {
  position: relative;
  width: calc(100% - (var(--gutter) * 2));
  margin: 0 auto;
  aspect-ratio: 1840 / 1053;
  overflow: hidden;
}

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


.hero__wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 46vw, 921px);
  height: auto;
  filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 90px rgba(0, 0, 0, 0.5));
}

/* ================================================================
   WHAT IS UNVEILED
   ================================================================ */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(56px, 8vw, 112px);
  max-width: 855px;
  margin: clamp(72px, 10vw, 160px) auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}

.intro__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.intro__title {
  font-family: var(--font-akira);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  text-transform: uppercase;
  line-height: 1.15;
}

.intro__copy p {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
}
.intro__copy p + p { margin-top: 24px; }

/* ---- Small destination photo (reused in the footer) ---- */
.destination-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.destination-photo__frame {
  width: 150px;
  height: 150px;
  background: var(--white);
  overflow: hidden;
}
.destination-photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destination-photo figcaption {
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--slate);
}

.destination-photo--dark .destination-photo__frame {
  width: 131px;
  height: 131px;
  background: #2b2b2b;
}
.destination-photo--dark figcaption { color: var(--sand-light); }

/* ================================================================
   QUOTE
   ================================================================ */
.quote-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 6vw, 86px);
  max-width: 1249px;
  margin: clamp(96px, 12vw, 190px) auto 0;
  padding: 0 var(--gutter);
}

.quote-section__rule {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  width: 100%;
}

.quote-section__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--slate);
}

.quote-section__line--full { width: 100%; flex: none; }

.quote-mark {
  flex: none;
  display: flex;
}
.quote-mark img {
  width: clamp(70px, 8vw, 125px);
  height: auto;
}

blockquote {
  max-width: 924px;
  text-align: center;
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
}
blockquote p + p { margin-top: 24px; }

blockquote cite {
  display: block;
  margin-top: 24px;
  font-style: normal;
}
.quote-name {
  font-style: italic;
  font-weight: 700;
  color: var(--orange);
}

/* ================================================================
   METHODOLOGY / FOOTER
   ================================================================ */
.site-footer {
  margin-top: clamp(96px, 12vw, 180px);
  background: var(--slate);
  color: var(--sand-light);
  padding: 96px var(--gutter) 48px;
}
.site-footer--flush {
  margin-top: 0;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.methodology {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 714px;
  flex: 1 1 420px;
  font-weight: 300;
}

.methodology h2 {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.methodology p {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.5;
}
.methodology p + p { margin-top: 0; }

.methodology__links-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 56px;
}

@media (max-width: 640px) {
  .methodology__links-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

.methodology__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--sand-light);
  text-decoration: none;
}
.methodology__download:hover,
.methodology__download:focus-visible {
  color: var(--orange);
}
.methodology__download-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.methodology__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--sand-light);
  text-decoration: none;
}
.methodology__link:hover,
.methodology__link:focus-visible {
  color: var(--orange);
}
.methodology__link-icon {
  width: 20px;
  height: 20px;
  flex: none;
}


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

.methodology__more {
  display: grid;
  grid-template-rows: 0fr;
  margin-bottom: 0;
  transition: grid-template-rows 0.45s cubic-bezier(0.65, 0, 0.35, 1),
              margin-bottom 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.methodology__more.is-expanded {
  grid-template-rows: 1fr;
  /* Only present once expanded -- the collapsed state's own height is
     already 0 via the grid row above, but padding on the inner wrapper
     wouldn't collapse away with it (padding always renders at its set
     size, unlike the row's content height), so the pre-button gap lives
     here instead, where it naturally disappears at rest. */
  margin-bottom: 24px;
}
.methodology__more-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.methodology__toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--orange);
  cursor: pointer;
}
.methodology__toggle:hover,
.methodology__toggle:focus-visible {
  color: var(--sand-light);
}
.methodology__toggle-icon {
  font-size: 20px;
  transition: transform 0.3s ease;
}
.methodology__toggle[aria-expanded="true"] .methodology__toggle-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .methodology__more,
  .methodology__toggle-icon {
    transition: none;
  }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1600px;
  margin: clamp(48px, 6vw, 90px) auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--slate-soft);
  font-size: 16px;
}

.site-footer__links {
  display: flex;
  gap: 32px;
}
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { color: var(--orange); }

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
}
.lang-switcher__item {
  color: var(--sand-light);
  text-decoration: none;
}
.lang-switcher__item--active {
  color: var(--orange);
}
.lang-switcher__item--disabled {
  color: var(--slate-soft);
  cursor: default;
}
.lang-switcher__divider {
  color: var(--slate-soft);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 640px) {
  body { font-size: 14px; }
  .site-header { padding: 16px var(--gutter); }
  .menu-toggle__label { display: none; }
  .menu-toggle { padding: 8px; }
  .menu-toggle--sticky { top: 16px; }
  .site-footer { margin-top: 96px; padding-top: 48px; padding-bottom: 24px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 96px; }
  .site-footer.site-footer--flush-mobile { margin-top: 0; }
}

/* ================================================================
   CHAPTER PAGES — shared tokens
   ================================================================ */
:root {
  --blue:         #2CB8E2;   /* FH Blue accent (chapter pages) */
  --graph-border: #CBC8C2;   /* rule/border under headings, charts, tables */
  --chapter-max:  1400px;    /* chapter content column width */
}

/* ================================================================
   CHAPTER HERO
   ================================================================ */
.chapter-hero {
  width: 100%;
}

@media (max-width: 640px) {
  .chapter-hero--select10 {
    margin-bottom: 64px;
  }
}

.chapter-hero__grid {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.chapter-hero__photo {
  flex: none;
  width: clamp(160px, 19vw, 365px);
}
.chapter-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chapter-hero__content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: var(--sand);
  border-right: 16px solid var(--blue);
  padding: clamp(32px, 5vw, 66px) var(--gutter);
}

.chapter-hero__text {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 59px);
  max-width: 1400px;
  width: fit-content;
  margin: 0 auto;
  /* Short fade-in on page load -- every chapter page's hero content
     (eyebrow, subtitle, copy), opacity only. Not applied to the
     homepage's own .hero. */
  opacity: 0;
  animation: chapter-hero-text-in 0.9s ease-out 0.15s forwards;
}

@keyframes chapter-hero-text-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-hero__text {
    animation: none;
    opacity: 1;
  }
}

.chapter-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 640px) {
  .chapter-hero__heading {
    gap: 4px;
  }
}

.chapter-hero__eyebrow {
  font-family: var(--font-akira);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 80px);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--slate);
}

.chapter-hero__subtitle {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
  font-size: clamp(16px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate);
}

@media (max-width: 640px) {
  .chapter-hero__eyebrow {
    font-size: 28px;
  }
  .chapter-hero__subtitle {
    font-size: 14px;
  }
}

.chapter-hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 532px;
}

.chapter-hero__wing {
  display: block;
  width: 105px;
  height: auto;
}

.chapter-hero__copy p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}

@media (min-width: 641px) {
  .chapter-hero__copy p {
    font-size: 16px;
  }
}

/* ---- Centered variant ----
   An alternative to the default edge-to-edge chapter-hero__grid
   (single full-height photo panel + bordered content panel): a
   compact photo floating beside the text as one centered group, on a
   plain sand background — no border, no full-bleed photo.
   chapter-hero__heading/__subtitle/__copy/__wing above are reused
   completely unchanged; only the photo side and the outer composition
   differ. .chapter-hero already becomes a flex column that fills the
   chapter-hero slide's full leftover height (see
   ".section-scroller__slide--chapter-hero .chapter-hero" further
   down) — centering the row within that, rather than stretching it
   edge to edge, is what gives this variant its floating, editorial
   feel instead of the split-panel one. */
.chapter-hero--centered {
  justify-content: center;
  align-items: center;
  background: var(--sand);
}

.chapter-hero__centered-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 70px);
  max-width: var(--chapter-max);
  padding: clamp(32px, 5vw, 66px) var(--gutter);
}

.chapter-hero__photo-block {
  flex: none;
  width: clamp(160px, 19vw, 365px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.chapter-hero__photo-block img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .chapter-hero__photo-block {
    display: none;
  }
}

/* The text column sits directly in the centered row (not nested
   inside chapter-hero__content like the default variant), so it
   needs its own sizing here: a sensible cap so lines don't run too
   wide, and a shrinkable flex-basis so flex-wrap above actually kicks
   in and stacks the photo above the text once the two no longer fit
   side by side, instead of the row just overflowing. */
.chapter-hero__centered-row .chapter-hero__text {
  flex: 1 1 320px;
  max-width: 691px;
}

/* ================================================================
   CHAPTER BODY — shared layout
   ================================================================ */
.chapter {
  max-width: var(--chapter-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 640px) {
  .chapter--select10 {
    margin-bottom: 64px;
  }
}

.chapter-unit {
  margin-top: clamp(140px, 16vw, 240px);
}
.chapter-unit:first-child { margin-top: clamp(64px, 9vw, 140px); }

.chapter-divider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(110px, 13vw, 190px);
}
.chapter-divider img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 641px) {
  /* Tighten the gap after a chapter divider too, without touching the
     general .chapter-unit spacing used between ordinary sections. */
  .chapter-divider + .chapter-unit {
    margin-top: clamp(110px, 13vw, 190px);
  }
}

@media (max-width: 640px) {
  .chapter-unit { margin-top: 64px; }
  /* Divider images are decorative full-bleed photo strips between
     chapters -- on mobile they just add scroll length without much
     payoff, so hide them and let the sections they used to separate
     rely on generous margin/padding instead (see the compensating
     rules just below). */
  .chapter-divider { display: none; }
  .chapter-divider + .chapter-unit,
  .chapter-divider + .stamps {
    margin-top: 96px;
  }
  /* the-quebecers.html's affinity-chart chapter-unit used to carry an
     inline margin-top: 48px (removed everywhere else so it now follows
     the normal .chapter-unit rules above) -- kept mobile-only here so
     its mobile layout is unchanged. */
  .chapter-unit:has(.surprise-chart[src*="graph-quebecoise-affinity"]) {
    margin-top: 48px;
    padding-top: 64px;
  }
}

/* ---- Section heading (title + subtitle, ruled) ---- */
.section-heading {
  border-bottom: 1px solid var(--graph-border);
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-heading__title {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  color: var(--slate);
}

@media (max-width: 640px) {
  .section-heading__title {
    font-size: clamp(14px, 2vw, 24px);
    line-height: 1.3;
    text-transform: uppercase;
  }
}

.section-heading__subtitle {
  font-family: var(--font-inter);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 16px);
  line-height: 1.5;
  color: var(--slate);
}

@media (max-width: 640px) {
  .section-heading {
    padding-bottom: 12px;
  }
}

/* ---- Chart / table images ---- */
.chart-block {
  margin-top: 32px;
}
.chart-block img {
  display: block;
  width: 100%;
  height: auto;
}
.chart-block--tight { margin-top: clamp(32px, 3vw, 64px); }
.chart-block--top-lg { margin-top: clamp(48px, 6vw, 64px); }

@media (max-width: 640px) {
  .chart-block--top-lg {
    margin-top: clamp(24px, 6vw, 64px);
  }
}

@media (max-width: 640px) {
  .chart-block--loose {
    margin-top: 64px;
  }
}
.chart-block--narrow img {
  width: 60%;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .chart-block--narrow img {
    width: 100%;
  }
}

/* field-stats.svg: shrunk ~30% from full width, centered */
.chart-block--compact img {
  width: 70%;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .chart-block--compact img {
    width: 100%;
  }
}

/* ---- Chart / table images: oversized graph scrolls horizontally on
   mobile, like .compare-table-wrap, rather than shrinking to fit ---- */
@media (max-width: 640px) {
  .chart-block--scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chart-block--scroll img {
    width: auto;
    min-width: 900px;
  }
  /* graph-earlier.svg (.chart-block--narrow + --scroll) reads fine
     narrower than the shared 900px scrollable graphs */
  .chart-block--narrow.chart-block--scroll img {
    min-width: 700px;
  }
}

/* ---- Stat callout (two-column headline + explanation) ---- */
.stat-callout {
  border-top: 1px solid var(--graph-border);
  margin-top: 32px;
  padding-top: 32px;
  display: flex;
  gap: clamp(32px, 6vw, 100px);
}

.stat-callout__headline,
.stat-callout__text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}
.stat-callout__headline { font-weight: 700; }
.stat-callout__text { font-weight: 400; font-size: 16px; }

@media (max-width: 760px) {
  .stat-callout { flex-direction: column; gap: 12px; padding-top: 20px; }
}

@media (max-width: 640px) {
  .stat-callout__headline,
  .stat-callout__text {
    font-size: 14px;
  }
}

/* ================================================================
   FAMILIES VS. GROUPS (mini section)
   ================================================================ */
.people-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 45px);
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
  padding-block: clamp(96px, 14vw, 180px);
}

.people-mini__title {
  font-family: var(--font-inter);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--slate);
}

.people-mini__pairs {
  display: flex;
  gap: clamp(32px, 6vw, 73px);
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 436px;
}

.people-mini__pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  min-width: 150px;
}

.people-mini__photo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  display: block;
}

.people-mini__caption {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--slate);
}
.people-mini__caption span { display: inline; }
.accent-orange { color: var(--orange); }
.accent-blue { color: var(--blue); }

.people-mini__note {
  max-width: 1400px;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.5;
  color: var(--slate);
}

@media (max-width: 640px) {
  .chapter-hero__grid { flex-direction: column; }
  .chapter-hero__photo { width: 100%; aspect-ratio: 365 / 240; }
  .chapter-hero__content { border-right: none; border-bottom: 16px solid var(--blue); }
  .people-mini__photo { width: 100px; height: 100px; }
  .people-mini__caption { line-height: 1.3; font-weight: 600; }
  .people-mini { padding-bottom: 0; }
}

/* ================================================================
   THE PERSONALITY — shared tokens
   ================================================================ */
:root {
  --yellow: #F8CA33; /* FH Yellow accent (Personality chapter) */
  --canada-red: #C8492F; /* Top-cities stamp band (Canada) */
  --usa-blue: #0065A5;   /* Top-cities stamp band (U.S.) */
  --font-script: 'Gloria Hallelujah', cursive; /* handwritten accent word */
  --stat-canada: #DE6D34; /* Persona stat-table header (Canada) — Figma-exact */
  --stat-us: #EF9D06;     /* Persona stat-table header (U.S.) */
  --stat-blue: #3E6E8D;   /* Compare-table header (Traveller type) — Figma-exact */
}

.chapter-hero__content--yellow {
  border-right-color: var(--yellow);
}
@media (max-width: 640px) {
  .chapter-hero__content--yellow { border-bottom-color: var(--yellow); }
}

/* ================================================================
   PERSONA SECTIONS (alternating photo / content)
   ================================================================ */
.persona {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  margin-top: clamp(96px, 12vw, 200px);
}
.persona:first-child { margin-top: clamp(64px, 9vw, 140px); }

.persona--reverse { flex-direction: row-reverse; }

.persona__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.persona__title {
  display: flex;
  align-items: center;
  gap: 18px;
}

@media (max-width: 640px) {
  .persona__title {
    flex-direction: column;
  }
}

.persona__icon {
  flex: none;
  width: clamp(36px, 4vw, 49px);
  height: clamp(36px, 4vw, 49px);
}
.persona__title h2 {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}

.stat-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.stat-table th,
.stat-table td {
  text-align: left;
  vertical-align: middle;
}
.stat-table__corner {
  width: 33.34%;
  border-bottom: 1px solid var(--graph-border);
  border-right: 1px solid var(--graph-border);
}
.stat-table__head {
  position: relative;
  isolation: isolate;
  width: 33.33%;
  padding: clamp(12px, 1.6vw, 16px) clamp(14px, 2vw, 20px);
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  border-right: 1px solid var(--graph-border);
}
.stat-table__head--canada { background: var(--stat-canada); }
.stat-table__head--us { background: var(--stat-us); }

.stat-table__label {
  padding: clamp(7px, 1vw, 10px) clamp(14px, 2vw, 20px);
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.4;
  color: var(--slate);
  border-bottom: 1px solid var(--graph-border);
  border-right: 1px solid var(--graph-border);
  border-left: 1px solid var(--graph-border);
}
.stat-table__value {
  padding: clamp(7px, 1vw, 10px) clamp(14px, 2vw, 20px);
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--slate);
  border-bottom: 1px solid var(--graph-border);
  border-right: 1px solid var(--graph-border);
}

@media (max-width: 640px) {
  .stat-table__label,
  .stat-table__value { padding-left: 10px; padding-right: 10px; }
}

/* ================================================================
   COMPARE TABLE (multi-column CA/U.S. data table)
   ================================================================ */
.compare-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 32px;
}
.chart-block > .compare-table-wrap {
  margin-top: 0;
}
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}
.compare-table th,
.compare-table td {
  text-align: left;
  vertical-align: middle;
}
.compare-table__head {
  position: relative;
  isolation: isolate;
  width: 25%;
  padding: clamp(12px, 1.6vw, 16px) clamp(14px, 2vw, 20px);
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  border-right: 1px solid var(--graph-border);
}
.compare-table__head--a { background: var(--stat-blue); border-left: 1px solid var(--graph-border); }
.compare-table__head--b { background: var(--stat-canada); }
.compare-table__head--c { background: var(--stat-us); }
.compare-table__head--d { background: var(--canada-red); }

.compare-table__row-label {
  padding: clamp(7px, 1vw, 10px) clamp(14px, 2vw, 20px);
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--slate);
  border-bottom: 1px solid var(--graph-border);
  border-right: 1px solid var(--graph-border);
  border-left: 1px solid var(--graph-border);
}
.compare-table__value {
  padding: clamp(7px, 1vw, 10px) clamp(14px, 2vw, 20px);
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--slate);
  border-bottom: 1px solid var(--graph-border);
  border-right: 1px solid var(--graph-border);
}

.persona__destinations {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.persona__dest-heading {
  font-weight: 700;
  font-size: 16px;
  color: var(--slate);
  text-transform: capitalize;
}
.persona__dest-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.persona__dest-who {
  font-weight: 400;
  font-size: 16px;
  color: var(--slate);
  white-space: nowrap;
}
.persona__dest-flag {
  width: 20px;
  height: 20px;
  flex: none;
}
.persona__dest-arrow {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 1px;
  background: var(--slate);
  flex: none;
}
.persona__dest-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--slate);
  border-right: 1px solid var(--slate);
  transform: translateY(-50%) rotate(45deg);
}
.persona__dest-cities {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate);
}

@media (max-width: 640px) {
  .persona__dest-heading {
    text-align: center;
    font-size: 14px;
  }
  .persona__dest-cities {
    font-size: 14px;
  }
  .persona__dest-who {
    font-size: 14px;
  }
  .persona__destinations {
    gap: 4px;
  }
  .persona__dest-row {
    padding: 12px 16px;
    justify-content: center;
    gap: 8px;
  }
  .persona__dest-arrow {
    display: none;
  }
}

.persona__insight {
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid var(--graph-border);
}
.persona__insight-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}
.persona__insight-text {
  margin-top: 24px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}

.persona__photo-col {
  flex: none;
  width: clamp(150px, 22vw, 300px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.persona__photo-wrap {
  position: relative;
  width: 150px;
  height: 150px;
}
.persona__photo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  display: block;
}
.persona__stamp {
  position: absolute;
  top: -16px;
  right: -14px;
  width: 40px;
  height: 40px;
  transform: rotate(-12deg);
}
.persona__photo-caption {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: center;
}

@media (max-width: 900px) {
  .persona,
  .persona--reverse {
    flex-direction: column;
    align-items: center;
  }
  .persona__content { order: 2; width: 100%; }
  .persona__photo-col { order: 1; }
  .persona__insight { max-width: 100%; }
}

@media (max-width: 640px) {
  .persona__content { order: 1; gap: 24px; }
  .persona__photo-col { order: 2; }
  .persona__insight-title {
    font-size: 14px;
  }
  .persona__insight-text {
    font-size: 14px;
    margin-top: 16px;
  }
}

/* ================================================================
   TOP CITIES STAMP COLLAGE
   Rebuilt from Figma node 1539:471: two full-bleed country bands
   (Canada red, U.S. blue) each holding 5 passport-style stamps.
   The provided stamp PNGs are white ink on transparent ground, so
   they only read correctly against these colored bands.
   ================================================================ */
.stamps {
  margin-top: 0;
}

@media (max-width: 640px) {
  .stamps {
    margin-top: 96px;
  }
}

.stamps-heading {
  text-align: center;
  color: var(--slate);
}
.stamps-heading__lead {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 35px);
  line-height: 2;
}
.stamps-heading__accent {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.4;
}

.stamps-band {
  width: min(1400px, 100vw);
  margin-left: calc((100% - min(1400px, 100vw)) / 2);
  margin-right: calc((100% - min(1400px, 100vw)) / 2);
  margin-top: clamp(40px, 5vw, 56px);
  padding: 24px 0 clamp(48px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 24px);
}
.stamps-band--canada { background: var(--canada-red); }
.stamps-band--us { background: var(--usa-blue); margin-top: 24px; }


.stamps-band__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  color: var(--sand-light);
  padding: 16px 0;
}


.stamps-band__row {
  position: relative;
  z-index: 1;
  width: min(1400px, 92%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 3vw, 40px);
}

.stamps-item {
  flex: 1 1 0;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.stamps-item__stamp {
  width: 120px;
  height: 120px;
  display: block;
}

@media (min-width: 641px) {
  .stamps-item__stamp {
    width: 100px;
    height: 100px;
  }
}
.stamps-item__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  color: var(--sand-light);
  flex: 1;
}
.stamps-item__persona {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 1.3;
  flex: 1;
}

@media (max-width: 640px) {
  .stamps-item__persona {
    font-size: 10px;
  }
}

@media (min-width: 641px) {
  .stamps-item__persona {
    font-size: 12px;
  }
}
.stamps-item__city {
  font-family: var(--font-akira);
  font-size: 20px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .stamps-item { flex: 1 1 40%; min-width: 110px; }
}

/* ================================================================
   THE SPORT — shared tokens
   ================================================================ */
:root {
  --sport-blue-dark: #0065A5;  /* World Cup travel bar (dark) — matches --usa-blue */
  --sport-blue-light: #34A2E8; /* Normal travel bar (light) */
}

.chapter-hero__content--orange {
  border-right-color: var(--orange);
}
@media (max-width: 640px) {
  .chapter-hero__content--orange { border-bottom-color: var(--orange); }
}

.chapter-hero__content--slate {
  border-right: none;
}
@media (max-width: 640px) {
  .chapter-hero__content--slate { border-bottom: none; }
}

/* ---- Compare-table: 3-column variant ---- */
.compare-table--cols-3 .compare-table__head,
.compare-table--cols-3 .compare-table__row-label,
.compare-table--cols-3 .compare-table__value {
  width: 33.333%;
}

/* ---- Compare-table: fixed narrow first column (rank/index tables) ---- */
.compare-table--rank .compare-table__head:first-child,
.compare-table--rank .compare-table__row-label {
  width: 150px;
}
.compare-table--rank .compare-table__head:not(:first-child),
.compare-table--rank .compare-table__value {
  width: auto;
}

/* ---- Stat-callout: allow multi-paragraph text blocks ---- */
.stat-callout__text p + p {
  margin-top: 16px;
}

/* ================================================================
   THE POP CULTURE — new shared components
   ================================================================ */

/* ---- Centered stat subtitle (pairs with .section-title--stat) ---- */
.chapter-heading__subtitle {
  margin-top: 8px;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.4;
  text-align: center;
  color: var(--slate);
}

/* ---- Insight box variants: multi-element content ---- */
.insight-box--stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 400;
  font-size: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.insight-box__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .insight-box__title {
    font-size: 16px;
  }
}
.insight-box__subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .insight-box__subtitle {
    font-size: 14px;
  }
}

.insight-box--flags {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  font-weight: 400;
  font-size: 16px;
  max-width: 781px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 641px) {
  .insight-box--flags {
    gap: 16px;
  }
}
.insight-box__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

@media (min-width: 641px) {
  .insight-box__header {
    gap: 0;
  }
}

.flag-stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 5vw, 81px);
}
.flag-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.flag-stat__flag {
  flex: none;
  width: 50px;
  height: 50px;
  display: block;
}

@media (min-width: 641px) {
  .flag-stat__flag {
    width: 30px;
    height: 30px;
  }
}
.flag-stat__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.flag-stat__city {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--slate);
}
.flag-stat__value {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--orange);
}

/* ---- Chart + insight box side by side (the-pop-culture.html's
   Canadian-surge section: chart-block and insight-box--flags-vertical
   sit as two flex children instead of stacked). */
.chart-insight-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  margin-top: 32px;
}
.chart-insight-row > .chart-block {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

@media (max-width: 640px) {
  .chart-insight-row {
    flex-direction: column;
    gap: 24px;
  }
}

/* ---- Insight box variant: narrow column of vertically-stacked
   flag stats, for sitting beside a chart (rather than .insight-box--
   flags' own wide, centered, full-row treatment) -- currently the
   Canadian-surge insight box in .chart-insight-row above. */
.insight-box--flags-vertical {
  flex: 0 1 340px;
  min-width: 0;
  max-width: 340px;
  margin-top: 0;
}
.insight-box--flags-vertical .flag-stat-row {
  flex-direction: column;
  gap: 16px;
}
.insight-box--flags-vertical .flag-stat {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.insight-box--flags-vertical .flag-stat__info {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  text-align: left;
}

@media (max-width: 640px) {
  .insight-box--flags-vertical {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* ---- Country stat: flag + name + line + delta, chart, caption ---- */
.country-stat-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(64px, 5vw, 80px);
}

@media (max-width: 640px) {
  .country-stat-list {
    gap: clamp(24px, 5vw, 80px);
  }
}

.country-stat-list--top-lg { margin-top: clamp(48px, 6vw, 64px); }

@media (max-width: 640px) {
  .country-stat-list--top-lg {
    margin-top: clamp(24px, 6vw, 64px);
  }
}
.country-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 320px;
  max-width: 480px;
  gap: clamp(24px, 3vw, 40px);
  text-align: center;
}

@media (max-width: 640px) {
  .country-stat {
    background: var(--sand-deep);
    border-radius: 4px;
    padding: 16px;
  }
}
.country-stat__header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.country-stat__flag {
  flex: none;
  width: 30px;
  height: 30px;
}
.country-stat__name {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--slate);
  white-space: nowrap;
}
.country-stat__line {
  flex: none;
  width: 16px;
  height: 1px;
  background: var(--slate);
}
.country-stat__delta {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: var(--orange);
  white-space: nowrap;
}
.country-stat__chart-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(90px, 12vw, 132px);
}
.country-stat__chart {
  display: block;
  max-width: 100%;
  height: 100%;
  width: auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  .country-stat__header {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .country-stat__flag {
    width: 20px;
    height: 20px;
  }
  .country-stat__name {
    font-size: 15px;
  }
  .country-stat__line {
    width: 24px;
  }
  .country-stat__delta {
    font-size: 15px;
  }
}
.country-stat__caption {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--slate);
  max-width: 440px;
}

@media (max-width: 640px) {
  .country-stat__caption {
    font-size: 14px;
  }
}


/* ---- Mega / stat section titles (centered, uppercase) ---- */
.section-title--mega {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--slate);
}

.section-title--stat {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  color: var(--slate);
}

@media (max-width: 640px) {
  .section-title--stat {
    font-size: clamp(16px, 2.8vw, 30px);
  }
}

/* Country flag + label appended inline to a section title, e.g.
   "Overall Top 10 Destinations Canada" */
.section-title__flag {
  display: inline-block;
  height: 0.78em;
  margin: 0 2px 0 40px;
  vertical-align: middle;
  border-radius: 2px;
  position: relative;
  top: -0.05em;
  object-fit: cover;
}

/* ---- Insight pair: two accent-bar + bold-headline blurbs side by side.
   Capped at the same 70% width as the chart above it (and centered the
   same way) so the pair sits within the chart's edges instead of
   spreading out to the full chapter width. ---- */
.insight-pair {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  justify-content: space-between;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.insight-pair__item {
  /* flex-grow so the two items share the (now capped, 70%-wide)
     container evenly instead of flex-basis: 500px each forcing an
     overflow/wrap, and so they sit only as far apart as the gap
     rather than justify-content: space-between pushing them to the
     container's far edges. */
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.insight-pair__accent {
  flex: none;
  width: 88px;
  height: 15px;
  max-width: 100%;
  background: var(--orange);
  border-bottom-right-radius: 15px;
}
.insight-pair__text {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--slate);
}

@media (max-width: 640px) {
  .insight-pair {
    max-width: 100%;
  }
  .insight-pair__text {
    font-size: 16px;
  }
}

/* ---- Insight box: bordered rounded callout, centered ---- */
.insight-box {
  border: 1px solid var(--graph-border);
  border-radius: 12px;
  padding: 20px 40px;
  text-align: center;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.4;
  color: var(--slate);
}

@media (max-width: 640px) {
  .insight-box {
    padding: 16px;
    border-radius: 4px;
  }
}

/* Top-margin variants factored out of what were previously per-instance
   inline styles, so the mobile min can be overridden below. */
.insight-box--top-a { margin-top: clamp(48px, 6vw, 64px); }
.insight-box--top-b { margin-top: clamp(48px, 6vw, 90px); }
.insight-box--top-c { margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 640px) {
  .insight-box--top-a { margin-top: clamp(24px, 6vw, 64px); }
  .insight-box--top-b { margin-top: clamp(24px, 6vw, 90px); }
  .insight-box--top-c { margin-top: clamp(24px, 4vw, 48px); }
}

/* ---- Field aside: small photo + bracket caption + centered stat blurb ---- */
.field-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 64px);
  padding-top: clamp(240px, calc(16vw + 100px), 340px);
  padding-bottom: 100px;
  text-align: center;
}

@media (max-width: 640px) {
  .field-aside {
    padding-top: 100px;
    padding-bottom: 0;
    gap: clamp(24px, 6vw, 64px);
  }
}
.field-aside__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 700px;
}
.field-aside__headline {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.4;
  color: var(--slate);
}
.field-aside__text {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.5;
  color: var(--slate);
}

@media (max-width: 640px) {
  .field-aside__headline {
    font-size: clamp(16px, 2vw, 24px);
  }
  .field-aside__text {
    font-size: clamp(14px, 1.6vw, 18px);
  }
}

/* ---- Market columns (Leading / Dropping) ---- */
.market-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(48px, 8vw, 148px);
}
.market-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
}

@media (max-width: 640px) {
  .market-col {
    gap: clamp(10px, 3vw, 32px);
  }
}
.market-col__label {
  display: flex;
  align-items: center;
  gap: 24px;
}
.market-col__word {
  font-family: var(--font-script);
  font-size: clamp(32px, 4vw, 47px);
  line-height: 0.9;
  color: var(--slate);
  white-space: nowrap;
}
.market-col__arrow {
  flex: none;
  width: clamp(60px, 6vw, 90px);
  height: clamp(60px, 6vw, 90px);
}
.market-col__flags {
  display: flex;
  align-items: center;
  gap: 32px;
}
.market-col__flag {
  flex: none;
  width: 50px;
  height: 50px;
}
.market-col__countries {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  text-align: center;
  color: var(--slate);
}

/* ---- Stat flag pairs ("who booked more") ---- */
.stat-flag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 8vw, 148px);
}
.stat-flag-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .stat-flag-pair {
    gap: 0px;
  }
}
.stat-flag-pair__top {
  display: flex;
  align-items: center;
  gap: 13px;
}
.stat-flag-pair__flag {
  flex: none;
  width: 50px;
  height: 50px;
}
.stat-flag-pair__value {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.4;
  color: var(--slate);
}
.stat-flag-pair__label {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: var(--slate);
}

/* ---- Calendar pairs ("who waited longer to book") ---- */
.calendar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(48px, 8vw, 138px);
  width: 100%;
}
.calendar-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
}

@media (max-width: 640px) {
  .calendar-pair {
    gap: 12px;
  }
}
.calendar-pair__img {
  flex: none;
  width: clamp(180px, 20vw, 249px);
  height: auto;
}
.calendar-pair__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.calendar-pair__country {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}
.calendar-pair__days {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.3;
  color: var(--slate);
}
.calendar-pair__note {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}

/* ================================================================
   THE RANKINGS — movers panels + US–Canada corridor
   ================================================================ */
.movers-group__flag {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.movers-group__flag img { flex: none; width: 50px; height: 50px; }
.movers-group__flag p {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: var(--slate);
}

.movers-group {
  width: 100%;
}
/* .chapter has `margin: 0 auto`, which (as a flex item in the deck's
   column-direction .chapter flex box) disables stretch and makes it
   shrink-wrap to its content instead of filling the available width.
   That's invisible on most sections because their content (images,
   full-width tables) is already wide enough to hit the chapter's own
   max-width anyway -- but .movers-columns' flex-wrap row has no such
   forcing content, so the whole chain (.chapter, .chapter-unit,
   .movers-group) shrank to fit a partially-wrapped, narrower-than-
   available result. Scoped with :has() so only this content's
   .chapter is forced to actually fill its available width; every
   other divider slide keeps its existing shrink-wrap/centering. */
.chapter:has(.movers-group) {
  width: 100%;
}
.movers-columns {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 24px);
}
.movers-column {
  flex: 1 1 300px;
  min-width: 0;
  background: var(--sand);
  padding: 16px;
}
.movers-column__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--graph-border);
  margin-bottom: 24px;
}
.movers-column__icon { flex: none; width: 32px; height: 32px; }
.movers-column__title p {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.4;
  color: var(--slate);
}
.movers-column__title span {
  display: block;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--slate);
}
.movers-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 640px) {
  .movers-list {
    gap: 8px;
  }
}
.movers-list li {
  display: flex;
  gap: 8px;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .movers-list li {
    font-size: 14px;
  }
}
.movers-list__rank {
  flex: none;
  text-align: right;
  min-width: 1.75em;
}
.movers-list__delta {
  font-weight: 700;
  margin-left: 4px;
  color: var(--slate);
}
.movers-list__delta--up { color: var(--blue); }
.movers-list__delta--down { color: var(--orange); }

/* ---- US–Canada corridor: full-bleed tinted band ---- */
.corridor-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(140px, 16vw, 240px);
  padding-top: clamp(64px, 9vw, 140px);
  padding-bottom: clamp(64px, 9vw, 140px);
}

@media (max-width: 640px) {
  .corridor-band {
    margin-top: 0;
    padding-top: 96px;
  }
}
.corridor-band__inner {
  max-width: var(--chapter-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.corridor-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vw, 56px);
}
.corridor-stat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.corridor-stat-row__pair {
  display: flex;
  align-items: center;
  gap: 24px;
}
.corridor-stat-row__pair img { flex: none; width: 50px; height: 50px; }
.corridor-stat-row__label {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: var(--slate);
  white-space: nowrap;
}
.corridor-stat-row__label span { font-weight: 400; }
.corridor-stat-row__trend {
  display: flex;
  align-items: center;
  gap: 16px;
}
.corridor-stat-row__arrow { flex: none; display: block; }
.corridor-stat-row__value {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  color: var(--slate);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .movers-columns { flex-direction: column; }
  .corridor-stat-row { flex-direction: column; align-items: flex-start; gap: 0; }
  .corridor-stat-row__arrow { display: none; }
  .corridor-stat-row__trend { width: 100%; justify-content: center; }
}

/* ================================================================
   THE SURPRISES — booking-window stats, weekly/monthly charts,
   fares comparison, and status-quo cards
   ================================================================ */
:root {
  --usa-blue:    #0065A5;   /* booking-window stat (U.S.) */
  --canada-red:  #C8492F;   /* booking-window stat (Canada) */
}

/* ---- Booking-window stat pair (calendar icon + big % ) ---- */
.booking-window-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(48px, 8vw, 106px);
}
.booking-window-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: none;
  width: 249px;
  max-width: 100%;
}
.booking-window-stat__icon {
  display: block;
  width: 100%;
  height: auto;
}
.booking-window-stat__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.booking-window-stat__name {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}
.booking-window-stat__value {
  font-family: var(--font-inter);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
}
.booking-window-stat--us .booking-window-stat__value { color: var(--usa-blue); }
.booking-window-stat--canada .booking-window-stat__value { color: var(--canada-red); }
.booking-window-stat__note {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}
.booking-window-stat--us .booking-window-stat__note { color: var(--usa-blue); }
.booking-window-stat--canada .booking-window-stat__note { color: var(--canada-red); }

/* ---- Insight box variants (two-line, and flag + inline stat) ---- */
.insight-box--duo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.insight-box__headline {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 20px);
  line-height: 1.4;
  color: var(--slate);
}

@media (max-width: 640px) {
  .insight-box__headline {
    font-size: 14px;
  }
}
.insight-box__note {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}

@media (max-width: 640px) {
  .insight-box__note {
    font-weight: 300;
    font-size: 14px;
  }
}
.insight-box--flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .insight-box--flag {
    gap: 8px;
  }
}
.insight-box--flag img { flex: none; width: 50px; height: 50px; }
.insight-box--flag p {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--slate);
}

@media (max-width: 640px) {
  .insight-box--flag p {
    font-size: 16px;
  }
}
.insight-box--flag strong { font-weight: 900; }

/* ---- Centered chart images (weekly / monthly) ---- */
.surprise-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 641px) and (min-height: 851px) {
  /* Desktop only -- explicitly excludes both mobile (base rule above
     stays 100%) and the short-viewport 641px breakpoint further down
     (@media (min-width: 641px) and (max-height: 850px), which sets
     .chart-block .surprise-chart to width: 90% and stays untouched). */
  .surprise-chart[src*="graph-quebecoise-affinity"] {
    max-width: 900px;
  }
  /* the-quebecers.html wraps this chart in a .chart-block with an
     inline max-width: 750px (each chart-block on that page has its
     own hand-tuned inline cap) -- !important needed to beat that
     inline style, still scoped to desktop only via the media query. */
  .chart-block:has(> .surprise-chart[src*="graph-quebecoise-affinity"]) {
    max-width: 900px !important;
  }
}

/* graph-whytravel-2.svg (Visiting Friends & Relatives chart,
   why-we-travel.html EN+FR) -- 24px vertical breathing room at all
   sizes, narrowed to 80% width on desktop only (matches the
   graph-quebecoise-affinity.svg pattern above; the short-viewport
   641px breakpoint keeps its existing .chart-block .surprise-chart
   width: 90% rule untouched). */
.surprise-chart--vfr {
  margin-top: 24px;
  margin-bottom: 24px;
}

@media (min-width: 641px) and (min-height: 851px) {
  /* .chart-block .surprise-chart--vfr (not just .surprise-chart--vfr)
     needed for specificity: .chart-block img { width: 100%; } above
     otherwise wins via its extra element-selector specificity. */
  .chart-block .surprise-chart--vfr {
    width: 80%;
  }
}

/* ---- Biggest booking day (flag + label + value pair) ---- */
.booking-day-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(48px, 9vw, 139px);
}
.booking-day-flag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

@media (max-width: 640px) {
  .booking-day-flag {
    gap: 0px;
  }
}
.booking-day-flag img { flex: none; width: 50px; height: 50px; }
.booking-day-flag__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.booking-day-flag__name {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
  text-align: center;
}
.booking-day-flag__value {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  color: var(--slate);
}

/* ---- Big single-figure stat (e.g. shoulder season) ---- */
.surprise-stat-value {
  font-family: var(--font-inter);
  font-weight: 900;
  font-size: 50px;
  line-height: 1.4;
  color: var(--blue);
  text-align: center;
  text-transform: uppercase;
}
.surprise-stat-value span { font-weight: 400; }

@media (max-width: 640px) {
  /* Overrides the per-page inline margin-top style (the only way to
     make an inline style responsive). */
  .surprise-stat-value {
    margin-top: 16px !important;
  }
}

/* ---- Fares comparison list ---- */
.fares-compare {
  display: flex;
  flex-direction: column;
  margin-top: clamp(48px, 6vw, 64px);
}
.fares-compare__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--slate);
}
.fares-compare__label {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}
.fares-compare__value {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}
.fares-compare__value--down { color: var(--orange); }
.fares-compare__value--up { color: var(--blue); }

/* ---- Status-quo cards (destination on the rise / biggest fall / travel style shift) ---- */
.status-quo-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 640px) {
  .status-quo-cards {
    justify-content: center;
    gap: 48px;
  }
}
/* .chapter has `margin: 0 auto`, which (as a flex item in the deck's
   column-direction .chapter flex box) disables stretch and makes it
   shrink-wrap to its content instead of filling the available width --
   see the .chapter:has(.movers-group) fix above for the full
   explanation. Scoped here the same way so .status-quo-cards' max-width
   has real room to spread into. */
.chapter:has(.status-quo-cards) {
  width: 100%;
}
.status-quo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

@media (max-width: 640px) {
  .status-quo-card {
    flex: 1 1 100%;
  }
}

@media (min-width: 641px) and (min-height: 851px) {
  /* Desktop only -- explicitly excludes the short-viewport
     641px breakpoint (@media (min-width: 641px) and
     (max-height: 850px)) further down, which keeps its
     original 8px gap unchanged. */
  .status-quo-card {
    gap: 24px;
  }
}
.status-quo-card__title {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--slate);
  text-align: center;
}
.status-quo-card__flag-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.status-quo-card__flag-row img { flex: none; width: 50px; height: 50px; }

@media (min-width: 641px) {
  .status-quo-card__flag-row img {
    width: 30px;
    height: 30px;
  }
}
.status-quo-card__name {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--slate);
  white-space: nowrap;
}
.status-quo-card__stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--sand);
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  text-align: center;
}
.status-quo-card__num {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-inter);
  font-weight: 800;
  font-size: 18px;
  color: var(--slate);
  white-space: nowrap;
}
.status-quo-card__stat-text {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 18px;
  color: var(--slate);
}
.status-quo-card__delta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.status-quo-card__delta-label {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 14px;
  color: var(--slate);
}
.status-quo-card__delta-line { flex: none; display: block; }

@media (max-width: 640px) {
  .status-quo-card__title { font-size: 14px; }
  .status-quo-card__name { font-size: 14px; }
  .status-quo-card__num { font-size: 16px; }
  .status-quo-card__stat-text { font-size: 16px; }
  .status-quo-card__delta-label { font-size: 12px; }
}

@media (max-width: 640px) {
  .booking-window-stats { flex-direction: column; align-items: center; }
  .booking-window-stat__icon { width: 50%; }
  .booking-day-flags { flex-direction: column; align-items: center; }
  .fares-compare { margin-top: 28px; }
  .fares-compare__row { flex-direction: column; align-items: center; gap: 4px; border-bottom: none; }
  .fares-compare__value { text-align: center; }
}

/* ================================================================
   A LA QUEBECOISE — seat legend + stay-longer table
   ================================================================ */
.seat-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
}
.seat-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.seat-legend__swatch {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
.seat-legend__swatch--quebec { background: #0065A5; }
.seat-legend__swatch--canada { background: #34A2E8; }
.seat-legend__item span {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate);
  white-space: nowrap;
}

/* ================================================================
   WHY WE TRAVEL — intro question + family photo
   ================================================================ */
.section-title--intro {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(20px, 3vw, 37px);
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--slate);
  max-width: 1112px;
  margin: clamp(64px, 9vw, 140px) auto 0;
}

.family-photo-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 64px);
}

@media (max-width: 640px) {
  .family-photo-wrap {
    margin-top: clamp(24px, 6vw, 64px);
  }
}

.family-photo {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

/* ================================================================
   BREAKOUTS — chart note + route pairs
   ================================================================ */
.chart-note {
  max-width: 1000px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}

@media (max-width: 640px) {
  .chart-note {
    font-size: 14px;
  }
}

.route-pairs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 555px;
  width: 100%;
  margin: clamp(48px, 6vw, 90px) auto 0;
}

@media (max-width: 640px) {
  .route-pairs {
    gap: 16px;
  }
}
.route-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
.route-pair__codes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 21px);
}
.route-pair__code {
  font-family: var(--font-inter);
  font-weight: 200;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 1.4;
  color: var(--slate);
}
.route-pair__codes > span:not(.route-pair__code) {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 30px);
  text-transform: uppercase;
  color: var(--slate);
}
.route-pair__cities {
  display: flex;
  gap: clamp(24px, 6vw, 54px);
  width: 100%;
  justify-content: center;
}
.route-pair__cities p {
  flex: 1 0 0;
  text-align: center;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}
.route-divider {
  width: 100%;
  height: 1px;
  border: none;
  background: var(--graph-border);
  margin: 0;
}

@media (max-width: 640px) {
  .route-pair__cities {
    width: auto;
  }
  .route-pair__cities p {
    flex: none;
  }
}

/* ================================================================
   CANADA VS. U.S. — new header color + rank+fare compare-table
   ================================================================ */
.compare-table__head--e { background: #3E6E8D; }

/* ---- Compare-table: fixed first AND last column (rank + trailing value) ---- */
.compare-table--rank-fare .compare-table__head:first-child,
.compare-table--rank-fare .compare-table__row-label {
  width: 150px;
}
.compare-table--rank-fare .compare-table__head:last-child,
.compare-table--rank-fare tbody td:last-child {
  width: 150px;
}
.compare-table--rank-fare .compare-table__head:nth-child(2),
.compare-table--rank-fare .compare-table__head:nth-child(3) {
  width: auto;
}

/* ================================================================
   THE SELECT 10 — horizontal scrolling timeline
   ------------------------------------------------------------
   10 destinations, each a pair of full-viewport panels: a full-bleed
   photo, then a details panel (name, copy, vertical gallery) — 20
   panels in total. Paged one at a time by wheel/keyboard input,
   mirroring how js/section-scroll.js pages the rest of the site's
   slides vertically (js/select10-timeline.js drives the actual jump,
   and section-scroll.js hands off to/from it at the very first/last
   panel — see the "horizontal deck hand-off" block in that file).

   Each destination's <article class="select10-slide"> is a semantic
   grouping wrapper only — display: contents lifts its two
   .select10-panel children to be direct flex items of the track, so
   paging operates on panels while the markup still keeps each
   destination's photo + detail panel together.
   ================================================================ */
.select10-timeline {
  --slide-h: 100vh;
  position: relative;
  width: 100vw;
  height: var(--slide-h);
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--sand-light);
}

.select10-timeline__track {
  display: flex;
  height: 100%;
  width: max-content;
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.select10-slide {
  display: contents;
}

.select10-panel {
  position: relative;
  flex: none;
  width: 100vw;
  height: var(--slide-h);
  overflow: hidden;
  background: var(--sand-light);
}

/* ---- Panel A: full-bleed photo ---- */
.select10-panel--photo .select10-slide__photo {
  position: absolute;
  inset: 0;
}
.select10-slide__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim at the top of the photo so the badge stays legible over any
   image. */
.select10-panel--photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0.65), rgba(16, 16, 16, 0));
  pointer-events: none;
}

/* ---- "PACE" badge + big pace word, top-left over the photo ---- */
.select10-slide__badge {
  position: absolute;
  z-index: 2;
  left: calc(var(--gutter) + clamp(20px, 3vw, 48px));
  top: clamp(56px, 9vw, 112px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.6vw, 24px);
}

.select10-slide__pace-icon {
  width: clamp(56px, 6vw, 110px);
  height: auto;
  display: block;
}

.select10-slide__pace-word {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 100;
  font-size: clamp(28px, 5vw, 84px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--sand-light);
}

.select10-slide__pace-city {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 24px;
  color: var(--sand-light);
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.6);
}
.select10-slide__pace-city-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: url("../img/icon-map-pin.svg");
  mask-image: url("../img/icon-map-pin.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ---- Panel B: watermark behind the text, name/paragraph pinned to
   the bottom, full-height gallery pinned to the right, decorative
   spine on the far right edge ---- */
.select10-panel--info {
  position: relative;
}

/* Giant faint pace word, centered behind the text -- reuses the
   original design's cream-on-sand tone (rather than the photo
   panel's white-on-image treatment) since it now sits on the flat
   --sand-light panel background. select10-timeline.js layers a
   one-shot Web Animations API parallax "lag" on top of this resting
   transform on every panel transition, rather than transitioning
   this rule's own transform directly -- see that file. */
.select10-slide__watermark {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  margin: 0;
  font-family: var(--font-akira);
  font-weight: 700;
  font-size: clamp(85px, 15vw, 320px);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F9F3E2;
  opacity: 0.85;
  white-space: nowrap;
  pointer-events: none;
}

.select10-slide__info {
  position: absolute;
  z-index: 1;
  left: calc(var(--gutter) + clamp(20px, 3vw, 48px));
  bottom: clamp(56px, 9vw, 112px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
  width: min(560px, 46vw);
}
.select10-slide__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.select10-slide__city {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.1;
  color: var(--slate);
}
.select10-slide__country {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.select10-slide__copy {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--slate);
}

/* ---- Three-photo gallery cluster, pinned to the far right, filling
   the full panel height between symmetric top/bottom margins ---- */
.select10-slide__gallery {
  position: absolute;
  z-index: 1;
  top: clamp(48px, 8vw, 96px);
  bottom: clamp(48px, 8vw, 96px);
  right: calc(var(--gutter) + clamp(24px, 3.5vw, 48px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  max-width: clamp(220px, 30vw, 420px);
}
.select10-slide__gallery img {
  width: auto;
  max-width: 100%;
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: 409 / 275;
  object-fit: cover;
  display: block;
}

/* ---- Decorative colour spine, flush against this panel's right edge ---- */
.select10-slide__spine {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  width: clamp(4px, 0.8vw, 12px);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.select10-slide__spine span { flex: 1 0 0; }
.select10-slide__spine span:not(:last-child) { border-bottom: 1px solid var(--graph-border); }
.select10-slide__spine span:nth-child(1) { background: var(--stat-blue); }
.select10-slide__spine span:nth-child(2) { background: var(--stat-canada); }
.select10-slide__spine span:nth-child(3) { background: var(--stat-us); }
.select10-slide__spine span:nth-child(4) { background: var(--canada-red); }

/* ---- Mobile / reduced-motion fallback: stacked vertical cards ----
   No horizontal paging at all: each destination becomes a normal
   full-width block, its two panels reflowing top-to-bottom as one
   column (badge, photo, then heading/copy/gallery). The giant
   background watermark and the decorative spine are purely visual
   flourishes tuned for the full-viewport paged layout, so they are
   hidden here rather than squeezed into the stacked card. ---- */
@media (max-width: 640px), (prefers-reduced-motion: reduce) {
  .select10-timeline {
    width: auto;
    height: auto;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
  }
  .select10-timeline__track {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    gap: 64px;
  }
  .select10-slide {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .select10-panel {
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
  }
  .select10-slide__watermark,
  .select10-slide__spine {
    display: none;
  }

  .select10-panel--photo {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .select10-panel--photo::after {
    display: none;
  }
  .select10-panel--photo .select10-slide__photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    order: 2;
  }
  .select10-slide__badge {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    order: 1;
  }
  .select10-slide__pace-word,
  .select10-slide__pace-city {
    color: var(--slate);
  }
  .select10-slide__pace-city {
    display: none;
  }

  .select10-panel--info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .select10-slide__info {
    position: static;
    left: auto;
    bottom: auto;
    width: auto;
    order: 2;
  }
  .select10-slide__gallery {
    position: static;
    top: auto;
    bottom: auto;
    right: auto;
    flex-direction: row;
    align-items: stretch;
    width: auto;
    max-width: none;
    order: 1;
  }
  .select10-slide__gallery img {
    width: auto;
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 409 / 275;
  }

  .select10-slide__city {
    font-size: 24px;
  }
  .select10-slide__country {
    font-size: 12px;
  }
  .select10-slide__copy {
    font-size: 16px;
  }
}

/* ================================================================
   FULL-VIEWPORT SECTION SCROLL DECK
   ------------------------------------------------------------
   Shared scaffolding for any page that wants its sections to each
   fill one viewport height, advanced one at a time by wheel/keyboard
   input (js/section-scroll.js drives the actual jump). Which pages
   use it, and which of that page's sections it wraps, is up to the
   page's own markup — see the page-specific blocks below for the
   home page's and The People's own slide treatments.

   Desktop + no-reduced-motion only. The wrapper elements are
   `display: contents` by default so that on mobile, or with
   prefers-reduced-motion, they disappear from the box model entirely
   and the page's sections lay out exactly as a normal stacked page —
   no JS involvement needed to "turn this off" on those, the media
   query alone does it.
   ================================================================ */
.section-scroller,
.section-scroller__track,
.section-scroller__slide,
.section-scroller__main {
  display: contents;
}

@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  .section-scroller {
    display: block;
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  .section-scroller__track {
    display: block;
    height: 100%;
    transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
  }
  .section-scroller__slide {
    display: flex;
    flex-direction: column;
    /* "safe" centers normally when content fits, but falls back to
       start-alignment when it doesn't -- plain "center" would split
       overflow evenly above AND below (see the divider-slide rule
       below for the fuller explanation), which for a slide with no
       divider whose content genuinely overflows (a very short
       window, extreme zoom, ...) would push its top out of reach
       above the slide's own scrollTop 0 position. */
    justify-content: safe center;
    height: 100vh;
    /* Safety net, not the primary interaction: if a section's content
       is ever taller than the viewport (a very short window, extreme
       zoom, …), it scrolls internally instead of silently clipping —
       js/section-scroll.js lets that internal scroll finish before it
       will advance to the next/previous section. */
    overflow-y: auto;
    /* overflow-y: auto alone makes the UA treat overflow-x as auto
       too (not visible) — pin it to hidden so a hair of horizontal
       overflow (e.g. a full-bleed element like .chapter-divider
       measuring against 100vw while a vertical scrollbar is present)
       never shows up as an actual horizontal scrollbar. */
    overflow-x: hidden;
    /* The overflow-y above is a safety net, not a UI element the deck
       wants surfaced — hide the scrollbar cosmetically on every
       engine. The scrolling itself (wheel, keyboard, touch, and
       section-scroll.js's own scrollTop assignments) is untouched;
       only the visible track/thumb chrome is suppressed. */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
  }
  .section-scroller__slide::-webkit-scrollbar {
    display: none; /* Chrome, Safari, modern Edge, Opera */
  }

  /* ================================================================
     HOME PAGE (index.html) — 4 slides: header+hero, intro,
     quote-section, footer.
     ================================================================ */

  /* ---- Slide 1: header + hero. The hero fills whatever height the
     header leaves behind, instead of sizing itself from its own
     aspect ratio — the one exception to "just center the content",
     since a hero banner is meant to fill the screen. ---- */
  .section-scroller__slide--hero {
    justify-content: flex-start;
    overflow: hidden;
  }
  .section-scroller__slide--hero .hero {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
  }
  .section-scroller__slide--hero .hero__mosaic {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  /* ---- Slide 2: intro. Same story as the quote-section below — its
     own top margin (meant for normal document-flow spacing after the
     hero) was pushing it down off-center. ---- */
  .section-scroller__slide--intro .intro {
    margin-top: 0;
  }

  /* ---- Slide 3: quote-section. It carries its own large top margin
     for normal document-flow spacing after the intro section, which
     — now that the slide centers it with flex instead — throws off
     the vertical centering by pushing it down. Not needed here. ---- */
  .section-scroller__slide--quote .quote-section {
    margin-top: 0;
  }

  /* ---- Slide 4: footer. site-footer__top is vertically centered in
     the leftover space above site-footer__bottom (flex-grow on it;
     its own align-items: center then centers the methodology text +
     photo within that taller box). Carries the footer's own dark
     background itself, so the full viewport reads as one continuous
     dark band instead of the page's light background showing through
     below wherever the methodology text happens to end. ---- */
  .section-scroller__slide--footer {
    justify-content: flex-start;
    background: var(--slate);
    color: var(--sand-light);
  }
  /* Stretch the footer itself to the full section height so
     .site-footer__bottom lands at the very bottom instead of sitting
     right under the methodology text. */
  .section-scroller__slide--footer .site-footer {
    display: flex;
    flex-direction: column;
    /* Fill at least the full section — but only a floor, not a fixed
       size: if the methodology text ever needs more than one screen,
       this lets it grow past 100% instead of compressing (flex-shrink
       disabled so flexbox doesn't squeeze it back down to fit), so the
       slide's own overflow-y: auto (the safety net every section has)
       is still what handles it, by scrolling. */
    min-height: 100%;
    flex-shrink: 0;
  }
  /* Grow to fill the leftover vertical space above site-footer__bottom;
     site-footer__top's own align-items: center then centers the
     methodology text + photo within that taller box. */
  .section-scroller__slide--footer .site-footer__top {
    flex: 1 1 auto;
  }
  .section-scroller__slide--footer .site-footer__bottom {
    margin-top: auto;
  }
}

/* ================================================================
   THE PEOPLE PAGE (the-people.html) — 7 slides: header+chapter-hero,
   then each .chapter-unit / .people-mini gets its own slide, then the
   footer (which reuses the home page's .section-scroller__slide--footer
   treatment above, full viewport height with site-footer__bottom
   pinned to the bottom).
   ================================================================ */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  /* ---- Slide 1: header + chapter-hero. Same "fill the leftover
     height" treatment as the home page's hero — chapter-hero__photo
     already crops with object-fit: cover, so it just needs a real
     height to fill instead of matching the text column's natural
     (content-driven) height. ---- */
  .section-scroller__slide--chapter-hero {
    justify-content: flex-start;
    overflow: hidden;
  }
  .section-scroller__slide--chapter-hero .chapter-hero {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .section-scroller__slide--chapter-hero .chapter-hero__grid {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* ---- Standalone .chapter-unit / .people-mini slides (nothing else
     in the .chapter box): each now lives in its own .chapter wrapper
     (for the usual max-width/gutter), so its normal inter-section top
     margin is a leftover document-flow artifact that would push it
     down off-center — same fix as the home page's intro/quote-section.
     .people-mini's own spacing is already symmetric (padding-block,
     margin: 0 auto), so it needs no equivalent fix. ---- */
  .section-scroller__slide .chapter > .chapter-unit:first-child {
    margin-top: 0;
  }

  /* ---- Divider-led slides (.section-scroller__slide--divider),
     shared by any page: the chapter-divider pins to the top of the
     viewport rather than being centered along with the rest of the
     content, and whatever section follows it centers within whatever
     space is left below. .chapter becomes a full-height flex column
     so there's a "remaining space" to center within — the divider
     takes its own natural height (flex: none) at the top, and the
     section grows to fill the rest (flex: 1 1 auto), the same
     "flex: 1 1 auto; min-height: 0" fill pattern used for the
     chapter-hero photo above. This replaces the old
     ".chapter-divider + .chapter-unit" margin-based gap for these
     slides — higher specificity here wins over it regardless of
     source order. ---- */
  .section-scroller__slide--divider {
    justify-content: flex-start;
  }
  .section-scroller__slide--divider .chapter {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .section-scroller__slide--divider .chapter-divider {
    flex: none;
    margin-top: 0;
  }
  /* Whatever immediately follows the divider grows to fill the
     leftover space and drops its normal inter-section top margin
     (both generic, safe on any section type). */
  .section-scroller__slide--divider .chapter-divider + * {
    flex: 1 1 auto;
    /* Not min-height: 0 (used elsewhere in this pattern) -- that would
       let this box get squeezed smaller than its own content, and once
       squeezed, the assigned padding-block (see the short-viewport rule
       below) sits INSIDE that shrunk box, so overflowing content simply
       pokes straight through the reserved padding instead of being
       pushed past it with the gap intact. min-height: auto keeps this
       item's natural content height (including that padding) as a
       floor, so when it doesn't fit, .chapter and the slide's own
       overflow-y: auto correctly account for the true height and the
       48px gap survives at both ends of the scroll range. */
    min-height: auto;
    margin-top: 0;
  }
  /* Sections that are plain block flow — their own children (a
     heading, a chart, a callout, …) just stack normally, like
     .chapter-unit / .stamps — also become a centered flex column so
     those stacked children center as a group within the now-larger
     box. .persona is deliberately left out of this list: it's
     already its own flex row with align-items: center for its
     photo/content side-by-side layout, so growing its height via the
     rule above already centers its two columns within itself —
     turning it into a flex *column* here would flip that side-by-side
     layout into a stacked one instead. ---- */
  .section-scroller__slide--divider .chapter-divider + .chapter-unit,
  .section-scroller__slide--divider .chapter-divider + .stamps,
  .section-scroller__slide--divider .chapter-divider + .field-aside,
  .section-scroller__slide--divider .chapter-divider + .corridor-band {
    display: flex;
    flex-direction: column;
    /* "safe" keeps normal centering when content fits, but falls back to
       start-alignment when content is taller than the slide -- otherwise
       centering split the overflow evenly above AND below, pushing tall
       sections (e.g. the-pop-culture.html's booking-patterns slide) up
       underneath the chapter-divider image instead of just scrolling
       past the bottom. */
    justify-content: safe center;
  }
  /* .field-aside's generous padding-top (240–340px) was sized for its
     old context, pulled in below a stat-callout within a larger
     section — as its own standalone divider-led section that's a
     leftover-spacing artifact just like the others above, so zero it
     here specifically. padding-bottom (100px) is zeroed too: left in
     place it counted as part of the box the content is centered
     within, so the 100px only at the bottom pushed the visually
     centered content up by half that amount instead of landing on
     the slide's true center. */
  .section-scroller__slide--divider .chapter-divider + .field-aside {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ================================================================
   THE PERSONALITY PAGE (the-personality.html) — 8 slides:
   header+chapter-hero, then each of the 5 .persona sections and the
   .stamps collage get their own divider-led slide (reusing the shared
   .section-scroller__slide--divider treatment above), then the
   footer (reusing the shared .section-scroller__slide--footer
   treatment). The stamps slide is the one exception: no divider
   above it (see .section-scroller__slide--stamps below).
   ================================================================ */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
}

/* ================================================================
   SHORT-VIEWPORT ADJUSTMENTS
   ------------------------------------------------------------
   Desktop layout, but a shorter window (e.g. a 1280x800 laptop
   screen once browser chrome eats into the height). The
   scroll-jacked .section-scroller__slide sections are locked to
   100vh and already fall back to internal scrolling when content
   doesn't fit -- this block is for tightening specific
   sections/spacing so that fallback isn't needed in the first
   place. Populated case-by-case as short-viewport issues are
   identified on the live site.
   ================================================================ */
@media (min-width: 641px) and (max-height: 850px) {
  p {
    font-size: 14px !important;
  }
  .intro__copy p + p {
    margin-top: 0;
  }
  .intro {
    gap: clamp(56px, 4vw, 112px);
  }
  .quote-section {
    max-width: 850px;
    gap: clamp(32px, 4vw, 86px);
  }
  blockquote cite {
    font-size: 14px;
  }
  .chapter-hero__eyebrow {
    font-size: 42px !important;
  }
  .stamps-band__label {
    font-size: 24px !important;
  }
  .section-heading__title {
    font-size: 18px;
  }
  .chart-note {
    margin-top: 16px;
  }
  .stat-callout {
    margin-top: 16px;
    padding-top: 16px;
  }
  /* .people-mini's own desktop-scaled padding-block (clamp(96px, 14vw,
     180px), ~179px/side at typical widths) plus the slide's own 48px
     reserve padding (see .section-scroller__slide padding-block: 48px
     further down) pushed total content past the available short-window
     height, tripping the slide's "safe center" fallback to top-anchored
     instead of actually centering. Compacting it here, alongside its
     already-compacted title/photo children, keeps it well within any
     height in this breakpoint's range so it centers normally again. */
  .people-mini {
    padding-block: 48px;
  }
  .people-mini__title {
    font-size: 24px;
  }
  .people-mini__photo {
    width: 100px;
    height: 100px;
  }
  .compare-table th,
  .compare-table td {
    font-size: 12px;
  }
  .stat-table__head,
  .compare-table__head {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .persona__content {
    gap: 20px;
  }
  .persona__insight-text {
    margin-top: 12px;
  }
  .stat-table th,
  .stat-table td {
    font-size: 12px;
  }
  .persona__dest-who,
  .persona__dest-cities {
    font-size: 14px;
  }
  .stamps-band {
    padding-block: 16px 24px;
    gap: 0px;
    margin-top: 16px;
  }
  .stamps-heading__lead {
    font-size: clamp(22px, 1.6vw, 35px);
  }
  .stamps-heading__accent {
    font-size: clamp(30px, 3.2vw, 54px);
  }
  .stamps-band--us {
    margin-top: 0;
  }
  .stamps-item {
    gap: 4px;
  }
  .stamps-item__city {
    line-height: 1.2;
  }
  .persona__photo-wrap,
  .persona__photo {
    width: 100px;
    height: 100px;
  }
  /* :not() exclusions needed here -- .chart-block--tight/--top-lg/--loose
     carry their own margin-top via a same-specificity single-class
     selector, and this block sits later in the file, so a bare
     .chart-block override here would otherwise win by source order
     and collapse their deliberately larger spacing down to 16px too. */
  .chart-block:not(.chart-block--tight):not(.chart-block--top-lg):not(.chart-block--loose) {
    margin-top: 16px;
  }
  .section-heading {
    gap: 0;
  }
  .field-aside {
    gap: 24px;
  }
  .field-aside__body {
    gap: 4px;
  }
  .chart-block--compact img {
    width: 40%;
  }
  /* Flag stat rows: hide the flag graphic and lay the city/value pair
     out side by side instead of .flag-stat__info's default stacked
     column, to save vertical space at this short-viewport breakpoint. */
  .flag-stat__flag {
    display: none;
  }
  .flag-stat__info {
    flex-direction: row;
    gap: 4px;
  }
  .flag-stat-row {
    gap: 2vw;
  }
  .insight-box--top-c {
    margin-top: 24px;
  }
  .section-title--stat {
    font-size: 20px;
  }
  .insight-pair {
    max-width: 50%;
    padding-top: 24px;
    margin-top: 24px !important;
  }
  .insight-pair__item {
    flex: 0 0 250px;
  }
  .market-col {
    gap: 24px;
  }
  .market-col__word {
    font-size: 28px;
  }
  .market-col__arrow {
    width: 40px;
    height: 40px;
  }
  .market-row {
    margin-top: 40px !important;
  }
  .stat-flag-row {
    margin-top: 40px !important;
  }
  .insight-box--top-a {
    margin-top: 40px;
  }
  .calendar-row {
    margin-top: 40px !important;
  }
  .calendar-pair {
    gap: 16px;
  }
  .calendar-pair__img {
    width: 180px;
  }
  /* graph-earlier.svg (the-sport.html, EN+FR) -- only user of
     .chart-block--narrow -- needs !important since the EN instance
     carries an inline style="width: 90%;" */
  .chart-block--narrow img {
    width: 60% !important;
  }
  /* Cell padding on both table systems: 4px vertical (body cells
     here; heading cells -- .compare-table__head / .stat-table__head --
     get their own padding-top/padding-bottom: 4px above) and 8px
     horizontal, matching the heading cells' padding-left/right: 8px
     above so columns stay aligned. */
  .compare-table__row-label,
  .compare-table__value,
  .stat-table__label,
  .stat-table__value {
    padding-block: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .stat-callout {
    gap: clamp(32px, 2vw, 100px);
  }
  /* graph-popculture-1.svg (the-pop-culture.html, EN+FR) -- both
     instances carry an inline style="width: 100%; ..." */
  img[src$="graph-popculture-1.svg"] {
    width: 60% !important;
  }
  .insight-box--stack {
    gap: 4px;
  }
  .insight-box {
    padding: 12px;
  }
  .hero__mosaic img {
    object-fit: inherit;
  }
  /* the-quebecers.html's "Quebecers' destination affinity" section only
     -- scoped via the affinity chart's own src so this doesn't touch
     the many other .insight-box--top-a / .chart-block instances
     elsewhere on the site. */
  .chapter-unit:has(.surprise-chart[src*="graph-quebecoise-affinity"]) .insight-box--top-a {
    margin-top: 16px;
  }
  /* !important + this selector's higher specificity are both needed to
     beat the later .chart-block:has(.surprise-chart) { margin-top: 48px
     !important; } rule further down (added for the-surprises.html's
     inline-styled chart-blocks), which would otherwise also catch this
     affinity chart-block since it too contains a .surprise-chart img. */
  .chart-block:has(.surprise-chart[src*="graph-quebecoise-affinity"]) {
    margin-top: 16px !important;
  }
  .country-stat-list--top-lg {
    margin-top: 48px;
  }
  .chapter-heading__subtitle {
    margin-top: 2px;
  }
  .country-stat {
    gap: clamp(24px, 2vw, 40px);
  }
  .country-stat-list--top-lg {
    margin-bottom: 16px;
  }
  .movers-list li {
    font-size: 14px;
  }
  .movers-list {
    gap: 8px;
  }
  .movers-group {
    margin-top: clamp(48px, 4vw, 48px) !important;
  }
  .corridor-stats {
    margin-top: clamp(48px, 6vw, 48px) !important;
    gap: clamp(32px, 5vw, 32px);
  }
  .corridor-stat-row__label,
  .corridor-stat-row__value {
    font-size: 18px !important;
  }
  .chapter-hero__centered-row {
    gap: clamp(32px, 5vw, 40px);
  }
  .chapter-hero__text {
    gap: clamp(32px, 4vw, 40px);
  }
  .chapter-hero__copy {
    gap: clamp(20px, 2.5vw, 24px);
  }
  .booking-window-stat__icon {
    width: 60%;
  }
  .booking-window-stats {
    margin-top: 48px !important;
  }
  .booking-window-stat__value {
    font-size: 32px !important;
  }
  .chart-block .surprise-chart {
    width: 90%;
  }
  /* Only the-surprises.html (EN) instances carry an inline
     margin-top: 64px on the wrapping .chart-block -- scoped via
     :has(.surprise-chart) so this doesn't also raise the plain
     .chart-block instances we already reduced to 16px above. */
  .chart-block:has(.surprise-chart) {
    margin-top: 48px !important;
  }
  .booking-day-flags {
    margin-top: 48px !important;
  }
  .booking-day-flag {
    gap: 8px;
  }
  .surprise-stat-value {
    font-size: 48px !important;
  }
  .fares-compare {
    margin-top: clamp(48px, 6vw, 48px);
  }
  .section-title--intro {
    font-size: 32px !important;
  }
  .family-photo-wrap {
    margin-top: clamp(48px, 6vw, 48px);
  }
  .chart-block img[src*="graph-breakouts-2"] {
    width: 80%;
    margin: 0 auto;
  }
  .route-pair__code {
    font-size: clamp(48px, 5vw, 104px);
  }
  .route-pair__cities {
    width: 70%;
  }
  .select10-slide__pace-word {
    font-size: clamp(28px, 4vw, 84px) !important;
  }
  .route-pairs {
    gap: 16px;
  }
  .select10-slide__watermark {
    font-size: clamp(85px, 13.5vw, 245px) !important;
  }
  .select10-slide__pace-city {
    font-size: 24px !important;
  }
  /* Gives the content following a divider slide's .chapter-divider a
     little breathing room top/bottom for the short-viewport "safe
     center" overflow fallback (very short window -> content pins
     flush to the top with zero margin, so this keeps it reading as
     "content with margins that scrolls" rather than "content jammed
     against the edges"). Targets only the content after the divider,
     not the whole slide -- padding on the whole slide would push the
     divider image itself down instead. */
  .section-scroller__slide--divider .chapter-divider + * {
    padding-block: 48px;
  }
}