/* =========================================================
   ONTARIO TOURISM EXPERIENCES — Design system
   ---------------------------------------------------------
   Designed for ≥ 1280px wide; tablets and phones are adapted
   in section 99 (media queries only), with the same tokens
   and components. Desktop rules are not changed there.

   00. Tokens
   01. Base & reset
   02. Typography
   03. Buttons & links
   04. Header / navigation
   05. Language switch
   06. Hero
   07. Concept
   08. Worlds (categories)
   09. Marquee
   10. Find Your Ontario promo
   11. Map intro
   12. Footer
   13. Motion (reveal, keyframes)
   14. Reduced motion
   15. Pages in production ("Coming soon")
   16. World pages (nature, culture, food, entertainment)
   17. Interactive pages — shared (category colours)
   18. Find Your Ontario (quiz)
   19. Explore Map
   20. Shared planning components (favourites, Plan menu, cards)
   21. Plan Your Trip
   22. Ontario by Season
   23. My Favourites
   24. Travel Guide
   25. Credits & References
   99. Responsive (tablets, phones, touch)
   ========================================================= */


/* =========================================================
   00. TOKENS — change the whole look from here
   ========================================================= */
:root {
  /* Palette */
  --c-forest: #17352B;
  --c-forest-deep: #0F261F;
  --c-lake: #557C83;
  --c-lake-soft: #9DBBBE;
  --c-ivory: #F4F0E8;
  --c-paper: #EAE4D8;
  --c-sand: #D8CDBA;
  --c-charcoal: #171A18;
  --c-ink: #232825;
  --c-muted: #5B615C;
  --c-maple: #C4553D;
  --c-maple-deep: #A4432F;
  --c-maple-light: #E0826B; /* maple for text on dark backgrounds */

  --line-dark: rgba(23, 26, 24, 0.14);
  --line-light: rgba(244, 240, 232, 0.2);

  /* Typography */
  --f-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --f-sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  --fs-body: 17px;
  --fs-small: 14px;
  --fs-ui: 12px;          /* nav, eyebrows, buttons (uppercase) */
  --fs-lede: 20px;
  --fs-display-xl: clamp(76px, 7.2vw, 136px);
  --fs-display-lg: clamp(64px, 6vw, 112px);
  --fs-display-md: clamp(44px, 3.8vw, 68px);

  /* Layout */
  --gutter: clamp(40px, 5.2vw, 104px);
  --col-gap: 24px;
  --section-pad: clamp(120px, 11vw, 200px);
  --nav-h: 92px;
  --nav-h-solid: 74px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur: 0.6s;
  --dur-slow: 1.4s;
}


/* =========================================================
   01. BASE & RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
section[id] { scroll-margin-top: var(--nav-h-solid); }

::selection { background: var(--c-maple); color: var(--c-ivory); }

:focus-visible {
  outline: 2px solid var(--c-maple);
  outline-offset: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 16px; left: 16px;
  z-index: 300;
  padding: 12px 22px;
  background: var(--c-maple);
  color: var(--c-ivory);
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) ease;
}
.skip-link:focus { transform: none; }

.noscript {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  padding: 14px var(--gutter);
  background: var(--c-maple); color: var(--c-ivory);
  font-size: var(--fs-small);
}

/* Language: hide until Spanish is applied (see inline head script) */
.i18n-pending body { visibility: hidden; }

/* Language: soft cross-fade while switching */
#main, .site-footer, .main-nav, .brand__name {
  transition: opacity 0.2s ease;
}
.is-switching #main,
.is-switching .site-footer,
.is-switching .main-nav,
.is-switching .brand__name { opacity: 0.15; }


/* =========================================================
   02. TYPOGRAPHY
   ========================================================= */
.display-xl,
.display-lg,
.display-md {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.015em;
  color: inherit;
}
.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }

.display-xl em,
.display-lg em,
.display-md em {
  font-weight: 400;
  font-style: italic;
  color: var(--accent, var(--c-maple));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--accent { color: var(--c-maple-light); }
.eyebrow--accent::before { display: none; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.7;
  max-width: 34em;
}

.text-link {
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) ease;
}
.text-link:hover { color: var(--c-maple-light); }

.photo-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}
.photo-caption--dark { color: var(--c-muted); opacity: 1; }


/* =========================================================
   03. BUTTONS & LINKS
   ========================================================= */

/* Line arrow used across the site */
.arrow {
  position: relative;
  display: inline-block;
  flex: none;
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.arrow::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.arrow--down { width: 1px; height: 18px; }
.arrow--down::after { top: auto; bottom: 0; right: 50%; transform: translateX(50%) rotate(135deg); }
.arrow--up { width: 1px; height: 18px; }
.arrow--up::after { top: 0; right: 50%; transform: translateX(50%) rotate(-45deg); }

/* Primary button: maple, with a sweeping fill on hover */
.btn {
  --btn-bg: var(--c-maple);
  --btn-fg: var(--c-ivory);
  --btn-hover-bg: var(--c-forest);
  --btn-hover-fg: var(--c-ivory);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 20px 34px;
  overflow: hidden;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.45s var(--ease-out), translate 0.5s var(--ease-out), box-shadow 0.45s ease;
}
/* Label roll: the text slides up and a copy slides in */
.btn__label {
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
  line-height: 1.3;
}
.btn__label > span {
  display: inline-block;
  text-shadow: 0 1.3em 0 currentColor;
  transition: transform 0.6s var(--ease-out);
}
.btn:hover .btn__label > span,
.btn:focus-visible .btn__label > span { transform: translateY(-1.3em); }

/* Soft breathing halo for the main quiz CTA */
.btn--glow { animation: glow 2.8s ease-out infinite; }
.btn--glow:hover { animation-play-state: paused; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover-bg);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s var(--ease-out);
}
.btn:hover,
.btn:focus-visible { color: var(--btn-hover-fg); }
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn:hover .arrow:not(.arrow--down) { width: 40px; }
.btn:hover .arrow--down { transform: translateY(4px); }

.btn--light {
  --btn-bg: var(--c-ivory);
  --btn-fg: var(--c-forest);
  --btn-hover-bg: var(--c-maple);
}
.btn--large { padding: 26px 44px; font-size: 13px; }

/* Text link with growing arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color var(--dur-fast) ease, gap 0.45s var(--ease-out);
}
.link-arrow > span:first-child {
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.55s var(--ease-out);
}
.link-arrow:hover > span:first-child { background-size: 100% 1px; }
.link-arrow:hover { color: var(--c-maple); gap: 24px; }
.link-arrow:hover .arrow { width: 44px; }

/* Pulsing dot (Find Your Ontario accent) */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-maple);
  flex: none;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c-maple);
  animation: pulse 2.2s ease-out infinite;
}


/* =========================================================
   04. HEADER / NAVIGATION
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  color: var(--c-ivory);
  transition: height 0.6s var(--ease-out), background-color 0.6s ease, box-shadow 0.6s ease,
    backdrop-filter 0.6s ease, -webkit-backdrop-filter 0.6s ease;
}
/* Header items arrive one after another on load */
.site-header .brand,
.site-header .main-nav__list li,
.site-header .lang-switch {
  animation: fadeDown 0.9s var(--ease-out) both;
}
.site-header .brand { animation-delay: 0.15s; }
.site-header .main-nav__list li:nth-child(1) { animation-delay: 0.25s; }
.site-header .main-nav__list li:nth-child(2) { animation-delay: 0.3s; }
.site-header .main-nav__list li:nth-child(3) { animation-delay: 0.35s; }
.site-header .main-nav__list li:nth-child(4) { animation-delay: 0.4s; }
.site-header .main-nav__list li:nth-child(5) { animation-delay: 0.45s; }
.site-header .main-nav__list li:nth-child(6) { animation-delay: 0.5s; }
.site-header .main-nav__list li:nth-child(7) { animation-delay: 0.55s; }
.site-header .main-nav__list li:nth-child(8) { animation-delay: 0.6s; }
.site-header .lang-switch { animation-delay: 0.65s; }

/* Reading progress (visible once the bar is solid) */
.scroll-progress {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 1;
  width: 100%;
  height: 2px;
  background: var(--c-maple);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.site-header.is-solid .scroll-progress { opacity: 1; }
.site-header::after {           /* hairline that appears when solid */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-light);
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-out);
}
.site-header.is-solid {
  height: var(--nav-h-solid);
  background-color: rgba(23, 53, 43, 0.84);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 40px rgba(15, 38, 31, 0.22);
}
.site-header.is-solid::after { transform: scaleX(1); }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 clamp(28px, 3.2vw, 64px);
}

/* Brand */
.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
  line-height: 1;
}
.brand__mark {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.24em;
}
.brand__name {
  max-width: 220px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Main nav */
.main-nav { margin-left: auto; }
.main-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.9vw, 34px);
}
.main-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.88;
  transition: opacity var(--dur-fast) ease;
}
.main-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-out);
}
.main-nav__link:hover { opacity: 1; }
.main-nav__link:hover::after,
.main-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.main-nav__link[aria-current="page"] { opacity: 1; }
.main-nav__link[aria-current="page"]::after { background: var(--c-maple); height: 2px; }

/* Special treatment: Find Your Ontario */
.main-nav__link--feature {
  padding: 12px 20px;
  border: 1px solid rgba(244, 240, 232, 0.5);
  border-radius: 100px;
  opacity: 1;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.main-nav__link--feature::after { display: none; }
.main-nav__link--feature:hover,
.main-nav__link--feature[aria-current="page"] {
  background: var(--c-ivory);
  border-color: var(--c-ivory);
  color: var(--c-forest);
}
/* Narrower desktops (1280–1439px): a little less air so the bar keeps one line */
@media (max-width: 1439px) {
  .site-header__inner { gap: 22px; }
  .main-nav__list { gap: 17px; }
  .main-nav__link { letter-spacing: 0.12em; }
  .main-nav__link--feature { padding: 12px 16px; }
  .lang-switch { padding-left: 20px; }
}


/* =========================================================
   05. LANGUAGE SWITCH  (ES | EN)
   ========================================================= */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 28px;
  border-left: 1px solid var(--line-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.lang-switch__sep { opacity: 0.35; font-weight: 400; }
.lang-switch__btn {
  position: relative;
  padding: 8px 2px;
  opacity: 0.5;
  transition: opacity var(--dur-fast) ease;
}
.lang-switch__btn::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; bottom: 2px;
  height: 2px;
  background: var(--c-maple);
  transform: scaleX(0);
  transition: transform 0.45s var(--ease-out);
}
.lang-switch__btn:hover { opacity: 0.85; }
.lang-switch__btn.is-active { opacity: 1; }
.lang-switch__btn.is-active::after { transform: scaleX(1); }

.lang-switch--footer {
  display: flex;
  width: max-content;
  padding-left: 0;
  border-left: 0;
  font-size: 14px;
}


/* =========================================================
   06. HERO
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  background: var(--c-forest-deep);
  color: var(--c-ivory);
}

/* --hero-p (0 → 1) is set by main.js while the hero leaves the screen */
.hero__media {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0, calc(var(--hero-p, 0) * 24vh), 0) scale(calc(1 + var(--hero-p, 0) * 0.06));
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: heroIn 12s var(--ease-out) both;
}

.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 38, 31, 0.6) 0%, rgba(15, 38, 31, 0) 26%),
    linear-gradient(0deg, rgba(23, 26, 24, 0.9) 0%, rgba(23, 26, 24, 0.5) 34%, rgba(23, 26, 24, 0) 62%),
    linear-gradient(90deg, rgba(23, 26, 24, 0.25) 0%, rgba(23, 26, 24, 0) 50%);
}
.hero__shade::after {               /* darkens as the next chapter arrives */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-forest-deep);
  opacity: calc(var(--hero-p, 0) * 0.75);
}

.hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 36px;
  transform: translate3d(0, calc(var(--hero-p, 0) * -14vh), 0);
  opacity: calc(1 - var(--hero-p, 0) * 1.5);
}

.hero__eyebrow {
  margin-bottom: 8px;
  animation: fadeUp 0.9s var(--ease-out) 0.55s both;
}

.hero__word {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding-top: 0.06em;
  font-family: var(--f-display);
  font-size: clamp(150px, 18.6vw, 380px);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-shadow: 0 10px 60px rgba(0, 0, 0, 0.18);
}
.hero__word span {
  display: inline-block;
  animation: letterRise 1.1s var(--ease-out) both;
  animation-delay: calc(0.2s + var(--i) * 0.06s);
}

.hero__row {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  align-items: end;
  gap: 48px;
  margin-top: 36px;
  padding-top: 32px;
}
.hero__row::before {                /* the rule draws itself */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line-light);
  transform-origin: left center;
  animation: lineDraw 1.2s var(--ease-out) 0.65s both;
}
.hero__row > * { animation: fadeUp 0.9s var(--ease-out) both; }
.hero__row > :nth-child(1) { animation-delay: 0.8s; }
.hero__row > :nth-child(2) { animation-delay: 0.95s; }
.hero__row > :nth-child(3) { animation-delay: 1.1s; }

.hero__tagline {
  display: flex;
  flex-direction: column;
  font-family: var(--f-display);
  font-size: clamp(30px, 2.5vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.hero__tagline em {
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--c-sand);
}

.hero__pillars {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  padding-bottom: 8px;
}

.hero__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 40px;
  animation: fadeIn 0.9s ease 1.3s both;
}
.hero__concept {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 19px;
  opacity: 0.8;
}
.hero__bottom .photo-caption { justify-self: end; }

/* Scroll indicator */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 52px;
  overflow: hidden;
  background: rgba(244, 240, 232, 0.25);
}
.scroll-cue__line::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 45%;
  background: var(--c-ivory);
  animation: scrollLine 2.2s var(--ease-in-out) infinite;
}


/* =========================================================
   07. CONCEPT — One province, many worlds
   A photographic diptych (nature | city) carries the title,
   then the six regions as a full-width band of photographs.
   ========================================================= */
.concept {
  --accent: var(--c-maple-light);
  position: relative;
  background: var(--c-forest-deep);
  color: var(--c-ivory);
}

.concept__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  min-height: 100vh;
  overflow: hidden;
}
.concept__half {
  position: relative;
  z-index: -2;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--c-forest);
}
.concept__half img {                 /* overscan leaves room for parallax */
  position: absolute;
  left: 0; top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  translate: 0 var(--py, 0px);
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.concept__half figcaption {
  position: absolute;
  top: calc(var(--nav-h-solid) + 28px);
  left: var(--gutter);
  z-index: 1;
}
.concept__half--city figcaption { left: auto; right: var(--gutter); }
.concept__stage::after {             /* keeps the text legible */
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(15, 38, 31, 0.95) 0%, rgba(15, 38, 31, 0.72) 30%, rgba(15, 38, 31, 0.15) 62%, rgba(15, 38, 31, 0.35) 100%);
  pointer-events: none;
}

.concept__text {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 10vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
}
.concept__text .eyebrow { grid-column: 1 / -1; }
.concept__text .display-xl { grid-column: 1 / 8; margin-bottom: 0; }
.concept__copy {
  grid-column: 8 / 13;
  display: grid;
  gap: 18px;
  padding-bottom: 10px;
  color: rgba(244, 240, 232, 0.88);
}
.concept__copy .lede { max-width: none; font-size: 19px; color: var(--c-ivory); }
.concept__copy p:last-child { font-size: 15.5px; color: rgba(244, 240, 232, 0.72); }

.concept__big {                      /* the 24 experiences, across the seam */
  position: absolute;
  top: 16vh;
  left: 50%;
  font-family: var(--f-display);
  font-size: clamp(220px, 21vw, 400px);
  font-weight: 500;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.55);
  pointer-events: none;
  translate: -50% var(--py, 0px);
}

/* Six regions: a band of photographs, one per region */
.regions { padding: 84px 0 0; }
.regions__title {
  margin: 0 var(--gutter) 24px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.6);
}
.regions__list {
  display: flex;
  gap: 3px;
  height: 64vh;
  min-height: 460px;
}
.regions__list li {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 26px 22px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  transition: flex-grow 0.9s var(--ease-out);
}
.regions__list li:hover { flex-grow: 1.9; }
.regions__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  margin: 0;
}
.regions__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out), opacity 0.9s ease;
}
.regions__list li:hover .regions__media img { transform: scale(1.06); }
.regions__list li::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 38, 31, 0.9) 0%, rgba(15, 38, 31, 0.25) 50%, rgba(15, 38, 31, 0.05) 100%);
}
.regions__num {
  font-family: var(--f-display);
  font-size: 24px;
  font-style: italic;
  color: var(--c-maple-light);
}

@media (prefers-reduced-motion: reduce) {
  .regions__list li { transition: none; }
  .regions__list li:hover .regions__media img { transform: none; }
}


/* =========================================================
   08. WORLDS — the four categories
   Each .world uses a 12-column grid; modifiers change the
   composition so the four chapters never look identical.
   ========================================================= */
.worlds {
  background: var(--c-ivory);
  padding-top: calc(var(--section-pad) * 0.75);
  padding-bottom: 0;                   /* Adventure flows straight into the marquee */
  overflow: hidden;
}

.section-head {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: 64px;
  padding: 0 var(--gutter);
  margin-bottom: 110px;
}
.section-head__lede { color: var(--c-muted); justify-self: end; max-width: 26em; }

.world {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: 0 var(--gutter);
  margin-bottom: clamp(130px, 11vw, 200px);
}

/* Media */
.world__media {
  position: relative;
  display: block;
  overflow: hidden;
  grid-row: 1;
  background: var(--c-forest);
}
.world__media img {                 /* overscan leaves room for parallax */
  position: absolute;
  left: 0; top: -7%;
  width: 100%;
  height: 114%;
  object-fit: cover;
  translate: 0 var(--py, 0px);
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.world__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23, 26, 24, 0.45) 0%, rgba(23, 26, 24, 0) 45%);
  opacity: 0.7;
  transition: opacity 0.9s ease;
}
.world__caption {
  position: absolute;
  left: 28px; bottom: 24px;
  z-index: 1;
  color: var(--c-ivory);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: transform 0.7s var(--ease-out), opacity 0.4s ease;
}
.world:hover .world__caption { transform: translateY(-6px); opacity: 1; }

/* Badge that follows the cursor over the photo (always "Explore") */
.world__badge {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 128px; height: 128px;
  padding: 14px;
  border-radius: 50%;
  background: var(--c-ivory);
  color: var(--c-forest);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  translate: calc(var(--mx, 0px) - 50%) calc(var(--my, 0px) - 50%);
  transform: scale(0.3);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.35s ease, translate 0.2s var(--ease-out);
}
.world__media:hover .world__badge { transform: scale(1); opacity: 1; }

/* Giant number */
.world__num {
  position: absolute;
  z-index: 0;
  font-family: var(--f-display);
  font-size: clamp(280px, 29vw, 560px);
  font-weight: 500;
  line-height: 0.72;
  color: transparent;
  -webkit-text-stroke: 1px rgba(23, 53, 43, 0.22);
  pointer-events: none;
  user-select: none;
  translate: 0 var(--py, 0px);
  transition: transform 1.6s var(--ease-out);
}

/* Text block */
.world__body {
  position: relative;
  z-index: 2;
  grid-row: 1;
  transition: transform 0.9s var(--ease-out);
}
.world__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.world__index {
  font-family: var(--f-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-maple);
}
.world__index::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  margin-left: 16px;
  vertical-align: middle;
  background: currentColor;
}
.world__title {
  font-family: var(--f-display);
  font-size: clamp(64px, 5.6vw, 116px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--c-forest);
}
.world__subtitle {
  margin-top: 18px;
  font-family: var(--f-display);
  font-size: 24px;
  font-style: italic;
  color: var(--c-lake);
}
.world__text {
  margin-top: 26px;
  max-width: 30em;
  color: var(--c-ink);
}

/* Subsection links */
.world__subs {
  margin: 34px 0 30px;
  border-top: 1px solid var(--line-dark);
}
.world__subs a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 15px;
  font-weight: 600;
  transition: color var(--dur-fast) ease, padding-left 0.5s var(--ease-out);
}
.world__subs a .arrow {
  margin-left: auto;
  width: 0;
  opacity: 0;
  transition: width 0.5s var(--ease-out), opacity 0.3s ease;
}
.world__subs a:hover { color: var(--c-maple); padding-left: 10px; }
.world__subs a:hover .arrow { width: 30px; opacity: 1; }
.world__subs-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  color: var(--c-lake);
  min-width: 30px;
}

/* Hover choreography */
.world:hover .world__media.is-visible img { transform: scale(1.06); }
.world:hover .world__media::after { opacity: 1; }
.world:hover .world__body { transform: translateY(-8px); }
.world:hover .world__num { transform: translateY(-18px); }

/* --- 01 Nature: full-bleed photograph, ivory panel overlapping it --- */
.world--nature { margin-bottom: clamp(110px, 8vw, 150px); }
.world--nature .world__media {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 calc(-1 * var(--gutter));
  height: 78vh;
  min-height: 540px;
}
.world--nature .world__caption { top: calc(var(--nav-h-solid) + 26px); bottom: auto; left: var(--gutter); }
.world--nature .world__body {                 /* the panel climbs onto the falls */
  grid-column: 7 / 13;
  grid-row: 2;
  align-self: start;
  margin-top: -230px;
  padding: 60px 0 50px 60px;
  background: var(--c-ivory);
}
.world--nature .world__num {
  z-index: 1;
  top: 16vh;
  right: calc(var(--gutter) - 0.06em);
  -webkit-text-stroke-color: rgba(244, 240, 232, 0.5);
}

/* --- 02 Culture: a huge vertical CN Tower, text beside it, the skyline
   below the text. Sits on a cream band that starts under the photo bridge --- */
.world--culture { isolation: isolate; margin-bottom: 10vw; }
.world--culture::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0;
  top: -9vw; bottom: -10vw;
  background: var(--c-paper);
}
.world--culture .world__shot--cntower {       /* a grid column as tall as text + photos */
  position: relative;
  left: auto; top: auto; bottom: auto;
  grid-column: 1 / 6;
  grid-row: 1 / 3;
  align-self: stretch;
  width: auto;
  height: auto;
  min-height: 760px;
  aspect-ratio: auto;
  margin-left: calc(-1 * var(--gutter));
  box-shadow: none;
}
.world--culture .world__body {
  grid-column: 7 / 13;
  grid-row: 1;
  align-self: end;
  padding: 40px 0 60px;
}
.world--culture .world__media {
  grid-column: 7 / 10;
  grid-row: 2;
  margin-right: calc(-1 * var(--gutter));
  height: 56vh;
  min-height: 420px;
}
.world--culture .world__media img { object-position: 36% center; }
.world--culture .world__num { top: -0.3em; right: calc(var(--gutter) - 0.05em); }
.world--culture .world__caption { left: auto; right: 28px; }

/* --- 03 Flavours: half the screen is the market, two connected photos
   under the text reach the right edge --- */
.world--flavours { margin-bottom: 70px; }
.world--flavours .world__media {               /* as tall as text + photos, whatever the screen */
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  align-self: stretch;
  margin-left: calc(-1 * var(--gutter));
  min-height: 720px;
}
.world--flavours .world__media img { object-position: 60% center; }
.world--flavours .world__body { grid-column: 8 / 13; grid-row: 1; align-self: center; padding: 30px 0; }
.world--flavours .world__num { right: -0.12em; top: -0.34em; -webkit-text-stroke-color: rgba(196, 85, 61, 0.3); }
.world__pair {
  grid-column: 7 / 13;
  grid-row: 2;
  align-self: end;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3px;
  margin-right: calc(-1 * var(--gutter));
}
.world__pair figure {
  position: relative;
  height: 42vh;
  min-height: 300px;
  margin: 0;
  overflow: hidden;
  background: var(--c-sand);
}
.world__pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.world__pair figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23, 26, 24, 0.5) 0%, rgba(23, 26, 24, 0) 42%);
}
.world:hover .world__pair .is-visible img { transform: scale(1.05); }

/* --- Photo stage: fills the empty half next to a text panel.
   It sits in the same grid row as the text and stretches to its
   height, so it never leaves a blank area, whatever the screen.
   One large photo + one smaller photo overlapping its corner. --- */
.world__stage {
  position: relative;
  z-index: 1;
  margin: 0;
}
.world__stage > figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--c-sand);
}
.world__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.world__stage > figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23, 26, 24, 0.5) 0%, rgba(23, 26, 24, 0) 40%);
  pointer-events: none;
}
.world__stage-main { inset: 0 14% 9% calc(-1 * var(--gutter)); }
.world__stage-detail {
  right: 0; bottom: -6%;
  width: 46%;
  height: 42%;
  z-index: 1;
  box-shadow: 0 30px 70px rgba(15, 38, 31, 0.28);
  translate: 0 var(--py, 0px);
}
.world:hover .world__stage .is-visible img { transform: scale(1.05); }

/* Nature: forest lake (large) + beach (detail), under the edge of the falls */
.world--nature .world__stage {
  grid-column: 1 / 7;
  grid-row: 2;
  align-self: stretch;
  margin-top: -130px;
  margin-right: 24px;
  min-height: 460px;
}

/* A smaller photo laid over the corner of a tall column photo
   (Culture: Casa Loma on the CN Tower · Flavours: peameal bacon on the market) */
.world__detail {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: end;
  width: 100%;
  height: 34%;
  min-height: 220px;
  margin: 0 0 9% 0;
  overflow: hidden;
  background: var(--c-sand);
  box-shadow: 0 30px 70px rgba(15, 38, 31, 0.3);
  translate: 0 var(--py, 0px);
}
.world__detail img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease-out), opacity 0.9s ease; }
.world__detail::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23, 26, 24, 0.5) 0%, rgba(23, 26, 24, 0) 45%); }
.world--culture .world__detail  { grid-column: 4 / 7; grid-row: 1 / 3; margin-right: -40px; }
.world--flavours .world__detail { grid-column: 5 / 8; grid-row: 1 / 3; margin-right: -30px; height: 30%; }
.world:hover .world__detail.is-visible img { transform: scale(1.05); }
/* Culture: museum + civic square side by side under the text, to the right edge */
.world__media-2 {
  position: relative;
  grid-column: 10 / 13;
  grid-row: 2;
  height: 56vh;
  min-height: 420px;
  margin: 0 calc(-1 * var(--gutter)) 0 3px;
  overflow: hidden;
  background: var(--c-sand);
}
.world__media-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.world:hover .world__media-2.is-visible img { transform: scale(1.05); }

/* --- 04 Adventure: full-bleed image with text on top --- */
.world--adventure {
  padding: 0;
  margin-bottom: 0;
  background: var(--c-forest-deep);   /* the framed photo opens on dark, not on cream */
  color: var(--c-ivory);
}
.world--adventure .world__media {
  grid-column: 1 / -1;
  height: 100vh;
  min-height: 760px;
  /* --enter (0 → 1, from main.js): the framed photo opens to full bleed */
  clip-path: inset(
    calc((1 - var(--enter, 1)) * 7%) calc((1 - var(--enter, 1)) * 9%)
    round calc((1 - var(--enter, 1)) * 28px)
  );
}
.world--adventure .world__media img { object-position: center 60%; }
.world--adventure .world__media::after {
  background:
    linear-gradient(90deg, rgba(15, 38, 31, 0.92) 0%, rgba(15, 38, 31, 0.55) 42%, rgba(15, 38, 31, 0) 72%),
    linear-gradient(0deg, var(--c-forest) 0%, rgba(23, 53, 43, 0.6) 12%, rgba(23, 26, 24, 0) 40%);   /* melts into the marquee */
  opacity: 1;
}
.world--adventure .world__caption { left: auto; right: var(--gutter); bottom: 36px; }
.world--adventure .world__body {
  grid-column: 1 / 7;
  align-self: center;
  padding-left: var(--gutter);
}
.world--adventure .world__title { color: var(--c-ivory); }
.world--adventure .world__subtitle { color: var(--c-sand); }
.world--adventure .world__text { color: rgba(244, 240, 232, 0.88); }
.world--adventure .world__meta { color: rgba(244, 240, 232, 0.65); }
.world--adventure .world__index { color: var(--c-maple-light); }
.world--adventure .world__subs,
.world--adventure .world__subs a { border-color: var(--line-light); }
.world--adventure .world__subs-num { color: var(--c-sand); }
.world--adventure .world__subs a:hover,
.world--adventure .link-arrow:hover { color: var(--c-maple-light); }
.world--adventure .world__num {
  z-index: 1;
  right: calc(var(--gutter) - 0.06em);
  top: auto;
  bottom: 6vh;
  -webkit-text-stroke-color: rgba(244, 240, 232, 0.28);
}

/* --- Secondary photos: real experiences of each world ---
   Floating around the main photo (overlapping its edges or
   bleeding out of the scene). Placement per photo:
   --x (left, % of the scene), --y (top) or --b (bottom),
   --w (width) and --ar (aspect ratio of the file).
   Motion: .reveal-img (unmask) + data-depth (soft parallax). */
.world__shot {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y, auto);
  bottom: var(--b, auto);
  width: var(--w);
  aspect-ratio: var(--ar, 3 / 2);
  margin: 0;
  overflow: hidden;
  background: var(--c-paper);
  box-shadow: 0 30px 70px rgba(15, 38, 31, 0.22);
  translate: 0 var(--py, 0px);
}
.world__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.world__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23, 26, 24, 0.5) 0%, rgba(23, 26, 24, 0) 42%);
  pointer-events: none;
}
.world__shot-cap {
  position: absolute;
  left: 16px; bottom: 12px;
  z-index: 1;
  color: var(--c-ivory);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}
.world__shot--cap-end .world__shot-cap { left: auto; right: 16px; text-align: right; }
.world:hover .world__shot.is-visible img,
.exp:hover .world__shot.is-visible img { transform: scale(1.05); }

/* 04 Adventure (photos hang from the edges of the full-bleed image) */
/* three photographs inside the full-bleed image, staggered like a film strip; the last one leaves the screen */
.world__shot--wonderland { --x: 54%;  --y: 13%;  --w: 15vw; --ar: 3 / 4; z-index: 2; }
.world__shot--aquarium   { --x: 68%;  --y: 34%;  --w: 19vw; z-index: 2; }
.world__shot--zoo        { --x: 86%;  --y: 9%;   --w: 17vw; --ar: 3 / 4; z-index: 2; }


/* --- Photo bridge: a full-bleed photograph between two chapters,
   with a short line of text over its darkest area --- */
.bleed {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 88vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--c-forest-deep);
  color: var(--c-ivory);
}
.bleed--bridge { margin-bottom: 9vw; }         /* the Culture band starts right below */
.bleed--taste { margin-bottom: 120px; }        /* short clear pause before Flavours */
.bleed--thrill { margin-bottom: 0; }           /* opens straight onto Adventure */
.bleed__media {
  position: absolute;
  inset: 0;
  margin: 0;
}
.bleed__media img {                            /* overscan leaves room for parallax */
  position: absolute;
  left: 0; top: -9%;
  width: 100%;
  height: 118%;
  object-fit: cover;
  translate: 0 var(--py, 0px);
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.bleed::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(15, 38, 31, 0.85) 0%, rgba(15, 38, 31, 0.35) 38%, rgba(15, 38, 31, 0) 65%),
    linear-gradient(90deg, rgba(15, 38, 31, 0.45) 0%, rgba(15, 38, 31, 0) 55%);
  pointer-events: none;
}
.bleed__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--gutter) 9vh;
  --accent: var(--c-sand);
}
.bleed__content .display-lg { max-width: 12em; }
.bleed__caption {
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  bottom: 36px;
}


/* =========================================================
   09. MARQUEE — the 24 experiences
   ========================================================= */
.marquee {
  position: relative;
  padding: 44px 0;
  overflow: hidden;
  background: var(--c-forest);
  color: var(--c-ivory);
  border-top: 1px solid var(--line-light);
}
.marquee__inner {
  display: flex;
  width: max-content;
  animation: marquee 110s linear infinite;
}
.marquee:hover .marquee__inner { animation-play-state: paused; }
.marquee__track { display: flex; flex: none; }
.marquee__track li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 34px;
  font-family: var(--f-display);
  font-size: clamp(36px, 3vw, 54px);
  font-style: italic;
  line-height: 1.1;
  white-space: nowrap;
}
.marquee__track li::after {
  content: '';
  align-self: center;
  width: 7px; height: 7px;
  margin-left: 58px;
  border-radius: 50%;
  background: var(--c-maple);
}
.marquee__track sup {
  font-family: var(--f-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-lake-soft);
  line-height: 1;
  padding-top: 8px;
}


/* =========================================================
   10. FIND YOUR ONTARIO — promo
   Different visual language: dark, maple accents, a live
   question card that invites the first click.
   ========================================================= */
.fyo {
  --accent: var(--c-maple-light);
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: center;
  padding: var(--section-pad) var(--gutter);
  overflow: hidden;
  /* continues the forest of the marquee, then settles into charcoal */
  background: linear-gradient(180deg, var(--c-forest) 0%, var(--c-charcoal) 26%);
  color: var(--c-ivory);
}

.fyo__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.fyo__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
  animation: drift 26s ease-in-out infinite alternate;
  transition: opacity 1.2s ease;
}

.fyo__mark {
  position: absolute;
  left: -0.12em;
  bottom: -0.3em;
  font-family: var(--f-display);
  font-size: clamp(600px, 62vw, 1100px);
  font-style: italic;
  line-height: 1;
  color: var(--c-maple);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
  translate: 0 var(--py, 0px);
}

.fyo__content { position: relative; z-index: 2; grid-column: 1 / 6; }
.fyo__content .display-xl { margin-bottom: 40px; }
.fyo__lead {
  font-family: var(--f-display);
  font-size: 32px;
  font-style: italic;
  line-height: 1.25;
  color: var(--c-sand);
  max-width: 16em;
}
.fyo__text {
  margin-top: 22px;
  max-width: 30em;
  color: rgba(244, 240, 232, 0.78);
}

.fyo__meta {
  display: flex;
  gap: 44px;
  margin: 48px 0 52px;
  padding-top: 28px;
  border-top: 1px solid var(--line-light);
}
.fyo__meta div { display: flex; flex-direction: column-reverse; gap: 6px; }
.fyo__meta dd {
  font-family: var(--f-display);
  font-size: 58px;
  font-weight: 500;
  line-height: 0.9;
}
.fyo__meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.6);
}

/* Preview card */
.fyo__preview {
  position: relative;
  z-index: 2;
  grid-column: 7 / 13;
  padding: 116px 0 0 40px;
  perspective: 1400px;
}

.teaser-ghost {
  position: absolute;
  top: 0; left: 100px; right: -40px;
  height: 60%;
  padding: 30px 40px;
  background: rgba(244, 240, 232, 0.07);
  border: 1px solid var(--line-light);
  backdrop-filter: blur(4px);
}
.teaser-ghost .teaser__step { opacity: 0.6; }
.teaser-ghost .teaser__question { margin-top: 10px; font-size: 26px; opacity: 0.45; }
.teaser-ghost .teaser__step,
.teaser-ghost .teaser__question {
  transition: opacity 0.38s ease, transform 0.38s var(--ease-out);
}
.teaser-ghost.is-changing .teaser__step,
.teaser-ghost.is-changing .teaser__question { opacity: 0; transform: translateY(-8px); }

.teaser {
  position: relative;
  padding: 44px 50px 40px;
  background: var(--c-ivory);
  color: var(--c-charcoal);
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.45);
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out);
}
.teaser__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.teaser__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-maple);
}
.teaser__step {
  font-family: var(--f-display);
  font-size: 20px;
  font-style: italic;
}
.teaser__progress {
  height: 2px;
  margin: 18px 0 34px;
  background: var(--line-dark);
}
.teaser__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-maple);
  transform: scaleX(0.2857);        /* 2 of 7 */
  transform-origin: left center;
  transition: transform 1s var(--ease-out);
}
.has-choice .teaser__progress span { transform: scaleX(0.4286); }  /* 3 of 7 */
.teaser__question {
  font-family: var(--f-display);
  font-size: clamp(34px, 2.7vw, 46px);
  font-weight: 500;
  line-height: 1.02;
  text-transform: uppercase;
}

.teaser__options {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}
.teaser-option {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--line-dark);
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.45s var(--ease-out);
}
.teaser-option__key {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.teaser-option:hover {
  border-color: var(--c-forest);
  transform: translateX(6px);
}
.teaser-option[aria-pressed="true"] {
  background: var(--c-forest);
  border-color: var(--c-forest);
  color: var(--c-ivory);
  transform: translateX(6px);
}
.teaser-option[aria-pressed="true"] .teaser-option__key {
  background: var(--c-maple);
  border-color: var(--c-maple);
}

.teaser__hint {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease-out), height 0.5s var(--ease-out), margin 0.5s var(--ease-out);
}
.teaser__hint a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-maple);
}
.teaser__hint a:hover .arrow { width: 40px; }
.has-choice .teaser__hint {
  height: 30px;
  margin-top: 24px;
  opacity: 1;
  transform: none;
}


/* =========================================================
   11. MAP INTRO
   ========================================================= */
.map-intro {
  --accent: var(--c-maple-light);
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: center;
  padding: var(--section-pad) var(--gutter);
  /* charcoal from the quiz → deep forest → charcoal of the footer */
  background: linear-gradient(180deg, var(--c-charcoal) 0%, var(--c-forest-deep) 22%, var(--c-forest-deep) 80%, var(--c-charcoal) 100%);
  color: var(--c-ivory);
  overflow: hidden;
}

.map-intro__content { grid-column: 1 / 6; }
.map-intro__content .display-xl { margin-bottom: 36px; }
.map-intro__content .lede { color: rgba(244, 240, 232, 0.8); }

.stats {
  display: flex;
  gap: 56px;
  margin-top: 64px;
  padding-top: 30px;
  border-top: 1px solid var(--line-light);
}
.stats li { display: flex; flex-direction: column; gap: 8px; }
.stats__num {
  font-family: var(--f-display);
  font-size: clamp(76px, 6vw, 110px);
  font-weight: 500;
  line-height: 0.85;
  font-variant-numeric: lining-nums tabular-nums;
}
.stats__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.65);
}
.stats__caption {
  margin: 22px 0 52px;
  font-family: var(--f-display);
  font-size: 22px;
  font-style: italic;
  color: var(--c-lake-soft);
}

/* Schematic region map */
.region-map {
  position: relative;
  grid-column: 7 / 13;
  aspect-ratio: 1 / 1;
  max-height: 82vh;
  justify-self: end;
  width: 100%;
  border: 1px solid var(--line-light);
  background:
    repeating-radial-gradient(ellipse at 22% 38%, transparent 0 26px, rgba(244, 240, 232, 0.045) 26px 27px),
    repeating-radial-gradient(ellipse at 82% 16%, transparent 0 34px, rgba(157, 187, 190, 0.05) 34px 35px),
    linear-gradient(rgba(244, 240, 232, 0.05) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(244, 240, 232, 0.05) 1px, transparent 1px) 0 0 / 25% 100%,
    var(--c-forest);
}
.region-map__plot {
  position: absolute;
  inset: 11% 14% 12% 9%;
}
.region-map__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.region-map__route polyline { fill: none; stroke: var(--c-sand); }
.route-draw {                       /* the journey draws itself… */
  stroke-width: 0.35;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.35;
}
.route-dash {                       /* …then keeps moving */
  stroke-width: 1;
  stroke-dasharray: 3 7;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
  animation: dash 30s linear infinite;
}

.lake-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-size: 17px;
  font-style: italic;
  color: var(--c-lake-soft);
  opacity: 0.7;
  white-space: nowrap;
  pointer-events: none;
}

.region-dot {
  --size: 14px;
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translate(calc(var(--size) / -2), -50%);
}
.region-dot--lg { --size: 18px; }
.region-dot--xl { --size: 24px; }

.region-dot__pin {
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 50%;
  background: var(--c-maple);
  box-shadow: 0 0 0 4px rgba(196, 85, 61, 0.22);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease;
}
.region-dot__pin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--c-maple-light);
  animation: ring 3s ease-out infinite;
}
.region-dot__label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
  transition: transform 0.45s var(--ease-out);
}
.region-dot__label strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.region-dot__label em {
  font-family: var(--f-display);
  font-size: 17px;
  color: var(--c-sand);
}
.region-dot--label-left {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + var(--size) / 2), -50%);
}
.region-dot--label-left .region-dot__label { text-align: right; }

.region-dot:hover .region-dot__pin,
.region-dot:focus-visible .region-dot__pin {
  transform: scale(1.35);
  box-shadow: 0 0 0 8px rgba(196, 85, 61, 0.25);
}
.region-dot:hover .region-dot__label { transform: translateX(4px); }
.region-dot--label-left:hover .region-dot__label { transform: translateX(-4px); }
.region-dot:hover strong { color: var(--c-maple-light); }

.region-map__note {
  position: absolute;
  left: 24px; bottom: 18px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.5);
}
.region-map__compass {
  position: absolute;
  top: 20px; right: 24px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 18px;
  font-style: italic;
}
.region-map__compass::before {
  content: '';
  position: absolute;
  top: -12px;
  width: 1px; height: 12px;
  background: var(--line-light);
}


/* Plan band — discreet entry to the planning pages (last Home section) */
.plan-band {
  --accent: var(--c-maple-light);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
  padding: 110px var(--gutter) 120px;
  background: var(--c-charcoal);
  color: var(--c-ivory);
}
.plan-band__text { grid-column: 1 / 7; }
.plan-band__links { grid-column: 8 / 13; }
.plan-band__links > p { margin-bottom: 30px; color: rgba(244, 240, 232, 0.75); }
.plan-band__links ul { display: flex; gap: 32px; margin-top: 26px; }
.plan-band__links .link-arrow:hover { color: var(--c-maple-light); }


/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 120px var(--gutter) 0;
  background: var(--c-charcoal);
  color: var(--c-ivory);
}

.site-footer__top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4fr 2fr 2.2fr 2.2fr 1.8fr;
  gap: 48px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--line-light);
}
.footer-heading--next { margin-top: 36px; }

.brand--footer .brand__mark { font-size: 40px; }
.brand--footer .brand__name { font-size: 10.5px; max-width: none; }

.site-footer__motto {
  margin-top: 44px;
  font-family: var(--f-display);
  font-size: 40px;
  font-style: italic;
  line-height: 1.12;
  color: var(--c-sand);
}

.footer-heading {
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.5);
}
.site-footer__col ul { display: grid; gap: 12px; }
.footer-link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  transition: color var(--dur-fast) ease, padding-left 0.4s var(--ease-out);
}
.footer-link::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--c-maple);
  transition: width 0.4s var(--ease-out);
}
.footer-link:hover { color: var(--c-maple-light); padding-left: 22px; }
.footer-link:hover::before { width: 14px; }

.back-top {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color var(--dur-fast) ease;
}
.back-top:hover { color: var(--c-maple-light); }
.back-top:hover .arrow--up { transform: translateY(-4px); }

.site-footer__credits {
  position: relative;
  z-index: 1;
  padding: 36px 0;
  border-bottom: 1px solid var(--line-light);
}
.site-footer__credits .footer-heading { margin-bottom: 14px; }
.credits-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-size: 13px;
  color: rgba(244, 240, 232, 0.72);
}
.credits-inline a { border-bottom: 1px solid rgba(244, 240, 232, 0.3); transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.credits-inline a:hover { color: var(--c-maple-light); border-color: currentColor; }
.credits-note {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(244, 240, 232, 0.55);
}

.site-footer__watermark {
  margin: 48px 0 -0.2em;
  font-family: var(--f-display);
  font-size: 23.5vw;
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.12);
  pointer-events: none;
  user-select: none;
  translate: 0 var(--py, 0px);
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line-light);
  font-size: 12.5px;
  color: rgba(244, 240, 232, 0.55);
}


/* =========================================================
   13. MOTION
   Hidden states only apply when JS runs and the user has not
   asked for reduced motion.
   ========================================================= */
/* Reveals use animations (not transitions) so that, once finished,
   each element keeps its own hover transitions untouched. */
@media (prefers-reduced-motion: no-preference) {
  /* TEXT — fade + rise */
  .js .reveal:not(.is-visible) { opacity: 0; }
  .js .reveal.is-visible {
    animation: revealUp 1.2s var(--ease-out) backwards;
    animation-delay: calc(var(--d, 0) * 0.1s);
  }
  .js .btn--glow.reveal.is-visible {
    animation: revealUp 1.2s var(--ease-out) backwards, glow 2.8s ease-out infinite;
    animation-delay: calc(var(--d, 0) * 0.1s), 1.8s;
  }
  /* TITLES — fade + rise + soft focus */
  .js .reveal--title.is-visible { animation-name: revealTitle; animation-duration: 1.4s; }
  /* Eyebrow rules draw themselves */
  .js .eyebrow.reveal::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s var(--ease-out) 0.35s;
  }
  .js .eyebrow.reveal.is-visible::before { transform: scaleX(1); }

  /* GROUPS — children one after another */
  .js [data-stagger]:not(.is-visible) > * { opacity: 0; }
  .js [data-stagger].is-visible > * {
    animation: revealUp 1s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 0.09s + 0.1s);
  }
  .js [data-stagger="fade"].is-visible > * { animation-name: fadeIn; animation-duration: 0.9s; }

  /* IMAGES — unmask + subtle scale */
  .js .reveal-img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.6s var(--ease-in-out);
  }
  .js .reveal-img img { transform: scale(1.18); }
  .js .reveal-img.is-visible { clip-path: inset(0 0 0 0); }
  .js .reveal-img.is-visible img { transform: scale(1); }
  /* Secondary photos arrive just after the main one, one by one */
  .js .world__shot.reveal-img { transition-delay: calc(0.25s + var(--d, 0) * 0.15s); }

  /* MAP — route draws, pins pop in sequence */
  .js .route-draw { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-in-out) 0.5s; }
  .js .is-visible .route-draw { stroke-dashoffset: 0; }
  .js .route-dash { opacity: 0; transition: opacity 1.2s ease 2.2s; }
  .js .is-visible .route-dash { opacity: 0.55; }
  .js .is-visible .region-dot__pin {
    animation: pinPop 0.8s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 0.1s + 0.4s);
  }
}

/* Images fade in once decoded (no empty flashes while loading) */
.js main img[loading="lazy"]:not(.is-loaded) { opacity: 0; }

/* Adventure photo is not a .reveal-img, give it its own hover zoom */
.world--adventure:hover .world__media img { transform: scale(1.05); }

@keyframes revealUp {
  from { opacity: 0; transform: translateY(44px); }
  to   { opacity: 1; transform: none; }
}
@keyframes revealTitle {
  from { opacity: 0; transform: translateY(60px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes heroIn {
  0%   { opacity: 0; transform: scale(1.14); }
  12%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1.02); }
}
@keyframes lineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.1) translate3d(-2%, -1.5%, 0); }
}
@keyframes glow {
  0%   { box-shadow: 0 0 0 0 rgba(196, 85, 61, 0.45); }
  70%  { box-shadow: 0 0 0 18px rgba(196, 85, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 85, 61, 0); }
}
@keyframes pinPop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@keyframes letterRise {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(230%); }
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes ring {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes dash {
  to { stroke-dashoffset: -400; }
}


/* =========================================================
   14. REDUCED MOTION
   ========================================================= */
/* No movement: parallax, zooms, slides, loops and scrubs are removed
   (main.js also skips them). Soft opacity fades are kept so the page
   still feels alive without motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Entrance: fades only */
  .hero__media img { animation: fadeIn 1s ease both; }
  .hero__word span { animation: fadeIn 0.9s ease both; animation-delay: calc(0.1s + var(--i) * 0.05s); }
  .hero__eyebrow,
  .hero__row > *,
  .site-header .brand,
  .site-header .main-nav__list li,
  .site-header .lang-switch { animation-name: fadeIn; }
  .hero__row::before { animation: none; }

  /* Scroll reveals: fades only */
  .js .reveal:not(.is-visible),
  .js [data-stagger]:not(.is-visible) > * { opacity: 0; }
  .js .reveal.is-visible {
    animation: fadeIn 0.9s ease backwards;
    animation-delay: calc(var(--d, 0) * 0.08s);
  }
  .js [data-stagger].is-visible > * {
    animation: fadeIn 0.8s ease backwards;
    animation-delay: calc(var(--i, 0) * 0.07s);
  }

  /* Loops and decorative movement off */
  .marquee__inner,
  .fyo__bg img,
  .btn--glow,
  .route-dash,
  .toast__dot,
  .pulse-dot::after,
  .scroll-cue__line::after,
  .region-dot__pin::after { animation: none; }
  .marquee { overflow-x: auto; }

  /* Hover feedback stays, but without zoom or travel */
  .world:hover .world__media img,
  .world:hover .world__media.is-visible img,
  .world:hover .world__shot.is-visible img,
  .world--adventure:hover .world__media img,
  .world:hover .world__body,
  .world:hover .world__num,
  .world:hover .world__caption,
  .btn:hover .btn__label > span { transform: none; }
  .toast { transition: opacity 0.3s ease; }
}


/* =========================================================
   15. PAGES IN PRODUCTION — "Coming soon" feedback
   Links to pages that do not exist yet look exactly like the
   others (same text and hover). They never navigate: a click
   shows a short notification instead.
   ========================================================= */
.is-soon { cursor: pointer; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 260;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: min(540px, calc(100vw - 48px));
  padding: 24px 22px 24px 26px;
  border-left: 3px solid var(--c-maple);
  background: var(--c-ivory);
  color: var(--c-charcoal);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 140%);
  transition: transform 0.7s var(--ease-out), opacity 0.4s ease;
}
.toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast__dot {
  width: 9px; height: 9px;
  flex: none;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--c-maple);
  animation: pulseSoft 1.8s ease-in-out infinite;
}
.toast__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-maple);
}
.toast__text {
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: 23px;
  line-height: 1.25;
}
.toast__close {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  transition: background-color var(--dur-fast) ease, transform 0.4s var(--ease-out);
}
.toast__close:hover { background: var(--c-paper); transform: rotate(90deg); }

@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 85, 61, 0.4); }
  50%      { box-shadow: 0 0 0 7px rgba(196, 85, 61, 0); }
}


/* =========================================================
   16. WORLD PAGES — nature.html, culture.html, food.html,
   entertainment.html
   Built from the Home components (.hero, .eyebrow, .btn,
   .link-arrow, display type, reveal + parallax). Structure:
   hero → intro → two collections → next world → footer.

   Experience layouts (.exp) — mix them for rhythm:
   --a        large photo left, ivory panel overlapping right
   --a-flip   large photo right, forest panel overlapping left
   --b        text left, landscape photo right
   --b-flip   landscape photo left, text right
   --c        vertical photo left, text right
   --c-flip   text left, vertical photo right
   ========================================================= */

/* --- Hero: the Home hero with a word instead of letters --- */
.hero__word--text {
  display: block;
  font-size: clamp(112px, 12.2vw, 250px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.page-stats {
  display: flex;
  gap: 40px;
  padding-bottom: 4px;
}
.page-stats li { display: flex; flex-direction: column; gap: 8px; }
.page-stats strong {
  font-family: var(--f-display);
  font-size: 54px;
  font-weight: 500;
  line-height: 0.85;
}
.page-stats span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.crumbs a { opacity: 0.7; transition: opacity var(--dur-fast) ease; }
.crumbs a:hover { opacity: 1; }
.crumbs__sep { opacity: 0.4; }

/* --- Intro: what this world is + its two collections --- */
.world-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
  padding: var(--section-pad) var(--gutter) calc(var(--section-pad) * 0.75);
}
/* Split intro: half of the screen is a tall photograph */
.world-intro--split {
  align-items: stretch;
  min-height: 100vh;
  padding: 0 var(--gutter) 0 0;
}
.world-intro__media {
  position: relative;
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--c-forest);
}
.world-intro__media img {
  position: absolute;
  left: 0; top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  translate: 0 var(--py, 0px);
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.world-intro__media figcaption { position: absolute; left: var(--gutter); bottom: 28px; z-index: 1; color: var(--c-ivory); }
.world-intro__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23, 26, 24, 0.5) 0%, rgba(23, 26, 24, 0) 30%);
}
.world-intro--split .world-intro__head { grid-column: 8 / 13; grid-row: 1; align-self: end; padding-top: 16vh; }
.world-intro--split .world-intro__body { grid-column: 8 / 13; grid-row: 2; align-self: start; padding: 36px 0 12vh; }
.world-intro--split .display-xl { font-size: clamp(64px, 5.6vw, 108px); }
.world-intro__head { grid-column: 1 / 8; }
.world-intro__body { grid-column: 8 / 13; }
.world-intro__body .lede { max-width: none; }

.chapters { margin-top: 44px; }
.chapters__title {
  margin-bottom: 8px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.chapters ol { border-top: 1px solid var(--line-dark); }
.chapters a {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1.1;
  transition: color var(--dur-fast) ease, padding-left 0.5s var(--ease-out);
}
.chapters__num {
  min-width: 34px;
  font-size: 20px;
  font-style: italic;
  color: var(--c-maple);
}
.chapters a .arrow { margin-left: auto; }
.chapters a:hover { color: var(--c-maple); padding-left: 10px; }
.chapters a:hover .arrow { width: 44px; }

/* --- Collection = an editorial chapter.
   Opens with a full-bleed photograph: number, title, lede and
   the index of its three experiences sit on the image. --- */
.collection {
  --exp-bg: var(--c-ivory);
  position: relative;
  padding-bottom: 0;
  overflow: hidden;
  background: var(--exp-bg);
}
.collection--alt { --exp-bg: var(--c-paper); }

.collection__head {
  --accent: var(--c-sand);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
  min-height: 92vh;
  padding: 22vh var(--gutter) 64px;
  margin-bottom: clamp(110px, 9vw, 160px);
  overflow: hidden;
  background: var(--c-forest-deep);
  color: var(--c-ivory);
}
.collection__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  margin: 0;
}
.collection__media img {            /* overscan leaves room for parallax */
  position: absolute;
  left: 0; top: -9%;
  width: 100%;
  height: 118%;
  object-fit: cover;
  translate: 0 var(--py, 0px);
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.collection__head::after {           /* keeps the text legible */
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(15, 38, 31, 0.92) 0%, rgba(15, 38, 31, 0.6) 34%, rgba(15, 38, 31, 0.08) 72%),
    linear-gradient(90deg, rgba(15, 38, 31, 0.5) 0%, rgba(15, 38, 31, 0) 60%);
  pointer-events: none;
}
.collection__intro { position: relative; grid-column: 1 / 8; }
.collection__intro .display-lg { margin-bottom: 28px; }
.collection__intro .lede { color: rgba(244, 240, 232, 0.86); max-width: 30em; }
.collection__list { position: relative; grid-column: 9 / 13; }
.collection__list .chapters__title { color: rgba(244, 240, 232, 0.6); }
.collection__list ol { border-top: 1px solid var(--line-light); }
.collection__list a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 15px;
  font-weight: 600;
  transition: color var(--dur-fast) ease, padding-left 0.5s var(--ease-out);
}
.collection__list a .arrow { margin-left: auto; width: 0; opacity: 0; transition: width 0.5s var(--ease-out), opacity 0.3s ease; }
.collection__list a:hover { color: var(--c-maple-light); padding-left: 10px; }
.collection__list a:hover .arrow { width: 30px; opacity: 1; }
.collection__list-num {
  min-width: 30px;
  font-family: var(--f-display);
  font-size: 18px;
  font-style: italic;
  color: var(--c-lake-soft);
}
.collection__num {
  position: absolute;
  top: 12vh;
  right: calc(var(--gutter) - 0.05em);
  font-family: var(--f-display);
  font-size: clamp(300px, 30vw, 580px);
  font-weight: 500;
  line-height: 0.72;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.4);
  pointer-events: none;
  user-select: none;
  translate: 0 var(--py, 0px);
}
.collection__caption {
  position: absolute;
  top: calc(var(--nav-h-solid) + 30px);
  left: var(--gutter);
}
/* --- Experience --- */
.exp {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: 0 var(--gutter);
  margin-bottom: clamp(90px, 7vw, 130px);
  scroll-margin-top: calc(var(--nav-h-solid) + 40px);
  isolation: isolate;               /* lets the big number sit behind the photo */
  /* Breathing room between the text and any photograph beside it
     (panel padding on the photo side, clearance above hanging detail
     photos, gap before the side photo of --wide): 48px at 1280, 58px
     at 1440, 72px from 1800 */
  --exp-air: clamp(48px, 4vw, 72px);
}
.exp:last-child { margin-bottom: clamp(110px, 8vw, 150px); }

.exp__media {
  position: relative;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  background: var(--c-sand);
}
.exp__media img {                   /* overscan leaves room for parallax */
  position: absolute;
  left: 0; top: -7%;
  width: 100%;
  height: 114%;
  object-fit: cover;
  translate: 0 var(--py, 0px);
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.exp__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23, 26, 24, 0.45) 0%, rgba(23, 26, 24, 0) 40%);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.9s ease;
}
.exp__caption {
  position: absolute;
  left: 26px; bottom: 22px;
  z-index: 1;
  color: var(--c-ivory);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}

.exp__num {
  position: absolute;
  z-index: -1;
  font-family: var(--f-display);
  font-size: clamp(220px, 22vw, 420px);
  font-weight: 500;
  line-height: 0.72;
  color: transparent;
  -webkit-text-stroke: 1px rgba(23, 53, 43, 0.2);
  pointer-events: none;
  user-select: none;
  translate: 0 var(--py, 0px);
  transition: transform 1.6s var(--ease-out);
}

.exp__body {
  position: relative;
  z-index: 2;
  grid-row: 1;
  transition: transform 0.9s var(--ease-out);
}
.exp__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.exp__index {
  font-family: var(--f-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-maple);
}
.exp__index::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  margin-left: 16px;
  vertical-align: middle;
  background: currentColor;
}
.exp__title {
  font-family: var(--f-display);
  font-size: clamp(46px, 3.9vw, 76px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.015em;
  color: var(--c-forest);
}
.exp__place {
  margin-top: 14px;
  font-family: var(--f-display);
  font-size: 22px;
  font-style: italic;
  color: var(--c-lake);
}
.exp__text { margin-top: 24px; max-width: 32em; }
.exp__why {
  margin-top: 26px;
  max-width: 30em;
  padding-left: 20px;
  border-left: 2px solid var(--c-maple);
}
.exp__why-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-maple);
}
.exp__why-text {
  font-family: var(--f-display);
  font-size: 23px;
  font-style: italic;
  line-height: 1.3;
}
.exp__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
  max-width: 32em;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}
.exp__facts dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.exp__facts dd { margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.45; }
/* Admission: indicative price linked to the official website */
.exp__price { border-bottom: 1px solid currentColor; transition: color var(--dur-fast) ease; }
.exp__price:hover { color: var(--c-maple-deep); }
.exp--a-flip .exp__price:hover,
.exp--cine .exp__price:hover { color: var(--c-maple-light); }
.prices-note {
  max-width: 44em;
  margin: 0 auto;
  padding: 56px var(--gutter);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--c-muted);
}

/* The first experience of a collection shares the collection number */
.collection__head + .exp .exp__num { display: none; }

/* Hover choreography (same as the Home worlds) */
.exp:hover .exp__media.is-visible img { transform: scale(1.05); }
.exp:hover .exp__media::after { opacity: 1; }
.exp:hover .exp__body { transform: translateY(-6px); }
.exp:hover .exp__num { transform: translateY(-14px); }

/* --a: large photo left, ivory panel overlapping right */
.exp--a .exp__media { grid-column: 1 / 9; align-self: stretch; margin-left: calc(-1 * var(--gutter)); min-height: max(86vh, 600px); }
.exp--a .exp__body {
  grid-column: 7 / 13;
  align-self: end;
  margin-bottom: -80px;
  padding: 56px 0 48px 56px;
  background: var(--exp-bg);
}
.exp--a .exp__num { top: -0.42em; right: calc(var(--gutter) - 0.06em); }

/* --a-flip: large photo right, forest panel overlapping left */
.exp--a-flip .exp__media { grid-column: 5 / 13; align-self: stretch; margin-right: calc(-1 * var(--gutter)); min-height: max(82vh, 580px); }
.exp--a-flip .exp__caption { left: auto; right: 26px; }
.exp--a-flip .exp__body {
  grid-column: 1 / 6;
  align-self: center;
  margin-top: 170px;
  padding: 56px 50px;
  background: var(--c-forest);
  color: var(--c-ivory);
}
.exp--a-flip .exp__num { top: -0.34em; left: calc(var(--gutter) - 0.05em); }
.exp--a-flip .exp__title { color: var(--c-ivory); }
.exp--a-flip .exp__place { color: var(--c-lake-soft); }
.exp--a-flip .exp__meta,
.exp--a-flip .exp__facts dt { color: rgba(244, 240, 232, 0.62); }
.exp--a-flip .exp__index,
.exp--a-flip .exp__why-label { color: var(--c-maple-light); }
.exp--a-flip .exp__why { border-color: var(--c-maple-light); }
.exp--a-flip .exp__text { color: rgba(244, 240, 232, 0.86); }
.exp--a-flip .exp__facts { border-color: var(--line-light); }

/* --b / --b-flip: text + landscape photo */
.exp--b .exp__body { grid-column: 1 / 6; align-self: center; }
.exp--b .exp__media { grid-column: 7 / 13; align-self: stretch; margin-right: calc(-1 * var(--gutter)); min-height: max(92vh, 640px); }
.exp--b .exp__num { top: -0.42em; right: calc(var(--gutter) - 0.06em); }
.exp--b-flip .exp__media { grid-column: 1 / 7; align-self: stretch; margin-left: calc(-1 * var(--gutter)); min-height: max(92vh, 640px); }
.exp--b-flip .exp__body { grid-column: 8 / 13; align-self: center; }
.exp--b-flip .exp__num { top: -0.42em; left: calc(var(--gutter) - 0.05em); }

/* --c / --c-flip: vertical photo + text */
.exp--c .exp__media { grid-column: 1 / 7; align-self: stretch; margin-left: calc(-1 * var(--gutter)); min-height: max(100vh, 700px); }
.exp--c .exp__body { grid-column: 8 / 13; align-self: center; }
.exp--c .exp__num { right: -0.1em; bottom: -0.34em; -webkit-text-stroke-color: rgba(196, 85, 61, 0.28); }
.exp--c-flip .exp__media { grid-column: 7 / 13; align-self: stretch; margin-right: calc(-1 * var(--gutter)); min-height: max(100vh, 700px); }
.exp--c-flip .exp__body { grid-column: 1 / 6; align-self: center; }
.exp--c-flip .exp__num { left: -0.08em; bottom: -0.34em; -webkit-text-stroke-color: rgba(196, 85, 61, 0.28); }

/* Split layouts with a detail photo hanging under the text: the text
   block (vertically centred) keeps a clear band above that photo.
   A bottom margin of 2 × air lifts the centred block by 1 × air. */
:is(.exp--b, .exp--b-flip, .exp--c, .exp--c-flip):has(> .world__shot) .exp__body { margin-bottom: calc(2 * var(--exp-air)); }

/* --pano: almost full-width panorama, panel overlapping its bottom */
.exp--pano .exp__media {
  grid-column: 1 / -1;
  margin: 0 calc(-1 * var(--gutter));
  height: 86vh;
  min-height: 600px;
}
.exp--pano .exp__body {
  grid-column: 1 / 7;
  align-self: end;
  margin-bottom: -90px;
  padding: 52px var(--exp-air) 44px;   /* the photo shows on both sides of the panel */
  background: var(--exp-bg);
}
.exp--pano-right .exp__body { grid-column: 7 / 13; }
.exp--pano .exp__num { top: 0.1em; right: calc(var(--gutter) - 0.06em); z-index: 1; -webkit-text-stroke-color: rgba(244, 240, 232, 0.55); }
.exp--pano-right .exp__num { right: auto; left: calc(var(--gutter) - 0.05em); }

/* --cine: cinematic full-bleed photo, text over its darkest side */
.exp--cine {
  padding: 0;
  color: var(--c-ivory);
}
.exp--cine .exp__media {
  grid-column: 1 / -1;
  height: 100vh;
  min-height: 720px;
}
.exp--cine .exp__media::after {
  background:
    linear-gradient(90deg, rgba(15, 38, 31, 0.93) 0%, rgba(15, 38, 31, 0.7) 36%, rgba(15, 38, 31, 0) 70%),
    linear-gradient(0deg, rgba(23, 26, 24, 0.55) 0%, rgba(23, 26, 24, 0) 40%);
  opacity: 1;
}
.exp--cine .exp__caption { left: auto; right: var(--gutter); bottom: 32px; }
.exp--cine .exp__body {
  grid-column: 1 / 6;
  align-self: center;
  padding-left: var(--gutter);
}
.exp--cine .exp__num {
  z-index: 1;
  right: calc(var(--gutter) - 0.06em);
  top: 50%;
  translate: 0 calc(-50% + var(--py, 0px));
  -webkit-text-stroke-color: rgba(244, 240, 232, 0.3);
}
.exp--cine .exp__title { color: var(--c-ivory); }
.exp--cine .exp__place { color: var(--c-sand); }
.exp--cine .exp__meta,
.exp--cine .exp__facts dt { color: rgba(244, 240, 232, 0.65); }
.exp--cine .exp__index,
.exp--cine .exp__why-label { color: var(--c-maple-light); }
.exp--cine .exp__why { border-color: var(--c-maple-light); }
.exp--cine .exp__text { color: rgba(244, 240, 232, 0.88); }
.exp--cine .exp__facts { border-color: var(--line-light); }
.exp--cine .world__shot { z-index: 2; }
.exp--cine:last-child { margin-bottom: 0; }
.collection:has(> .exp--cine:last-child) { padding-bottom: 0; }

/* --wide: a panorama across the whole screen, then title | text in two columns */
.exp--wide .exp__media {
  grid-column: 1 / -1;
  margin: 0 calc(-1 * var(--gutter));
  height: 80vh;
  min-height: 560px;
}
.exp--wide .exp__caption { left: var(--gutter); }
.exp--wide .exp__body {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 5fr 1fr 6fr;
  align-content: start;
  padding-top: 56px;
}
.exp--wide .exp__meta,
.exp--wide .exp__title,
.exp--wide .exp__place { grid-column: 1; }
.exp--wide .exp__text { grid-column: 3; grid-row: 1 / span 3; margin-top: 0; max-width: none; }
.exp--wide .exp__why,
.exp--wide .exp__facts { grid-column: 3; }
/* the column under the title holds a second photo instead of staying blank */
.exp__aside {
  position: relative;
  grid-column: 1;
  grid-row: 4 / span 3;
  align-self: stretch;
  min-height: 260px;
  margin: var(--exp-air) 0 0 calc(-1 * var(--gutter));
  overflow: hidden;
  background: var(--c-sand);
}
.exp__aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease-out), opacity 0.9s ease; }
.exp__aside::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23, 26, 24, 0.5) 0%, rgba(23, 26, 24, 0) 45%); }
.exp:hover .exp__aside.is-visible img { transform: scale(1.05); }
.exp--wide .exp__num { top: 0.1em; left: calc(var(--gutter) - 0.05em); z-index: 1; -webkit-text-stroke-color: rgba(244, 240, 232, 0.55); }

/* Secondary "detail" photo inside an experience: reuses .world__shot
   (placement with --x, --y / --b, --w, --ar on the element) */
.exp .world__shot { box-shadow: 0 30px 70px rgba(15, 38, 31, 0.28); }

/* --- Contact sheet: the six experiences right after the intro --- */
.film {                              /* dark band: the six experiences in photographs */
  padding: 80px var(--gutter) 120px;
  background: var(--c-forest-deep);
  color: var(--c-ivory);
}
.film .film__title { color: rgba(244, 240, 232, 0.6); }
.film__title {
  margin-bottom: 22px;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.film ol {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: start;
}
.film li:nth-child(even) { margin-top: 64px; }
.film a {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.2;
  overflow: hidden;
  background: var(--c-sand);
  color: var(--c-ivory);
}
.film img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity 0.9s ease;
}
.film a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 38, 31, 0.85) 0%, rgba(15, 38, 31, 0) 55%);
  transition: opacity 0.5s ease;
}
.film__label {
  position: absolute;
  z-index: 1;
  left: 16px; right: 16px; bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.6s var(--ease-out);
}
.film__num {
  font-family: var(--f-display);
  font-size: 20px;
  font-style: italic;
  color: var(--c-maple-light);
}
.film__name {
  font-family: var(--f-display);
  font-size: 21px;
  line-height: 1.1;
}
.film a:hover img { transform: scale(1.07); }
.film a:hover .film__label { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  .film a:hover img,
  .film a:hover .film__label { transform: none; }
}
/* --- Next world + the four worlds --- */
.world-next {
  --accent: var(--c-maple-light);
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: center;
  padding: var(--section-pad) var(--gutter) 100px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--c-forest) 0%, var(--c-forest-deep) 55%, var(--c-charcoal) 100%);
  color: var(--c-ivory);
}
.world-next__link { grid-column: 1 / 9; display: block; }
.world-next__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 44px;
  font-family: var(--f-display);
  font-size: clamp(84px, 7.8vw, 170px);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: color 0.45s ease;
}
.world-next__title .arrow { width: 70px; margin-top: 0.08em; }
.world-next__sub {
  margin-top: 26px;
  font-family: var(--f-display);
  font-size: 26px;
  font-style: italic;
  color: var(--c-sand);
}
.world-next__link:hover .world-next__title { color: var(--c-maple-light); }
.world-next__link:hover .arrow { width: 120px; }
.world-next { isolation: isolate; min-height: 100vh; align-content: end; background: var(--c-forest-deep); }
.world-next__media {                   /* full-screen photograph behind the section */
  position: absolute;
  z-index: -2;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
.world-next__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-out), opacity 0.9s ease;
}
.world-next::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(23, 26, 24, 0.95) 0%, rgba(15, 38, 31, 0.6) 45%, rgba(15, 38, 31, 0.2) 100%),
    linear-gradient(90deg, rgba(15, 38, 31, 0.55) 0%, rgba(15, 38, 31, 0) 60%);
}
.world-next__link { grid-column: 1 / 11; }
.world-next:hover .world-next__media.is-visible img { transform: scale(1.04); }
.worlds-nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 44px;
  margin-top: 110px;
  padding-top: 28px;
  border-top: 1px solid var(--line-light);
}
.worlds-nav__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.5);
}
.worlds-nav ol { display: flex; gap: 38px; }
.worlds-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: color var(--dur-fast) ease;
}
.worlds-nav ol a span:first-child {
  font-family: var(--f-display);
  font-size: 18px;
  font-style: italic;
  color: var(--c-lake-soft);
}
.worlds-nav a:hover,
.worlds-nav a[aria-current="page"] { color: var(--c-maple-light); }
.worlds-nav a[aria-current="page"] { pointer-events: none; }
.worlds-nav .link-arrow { margin-left: auto; }
.worlds-nav .link-arrow:hover { color: var(--c-maple-light); }

@media (prefers-reduced-motion: reduce) {
  .exp:hover .exp__media.is-visible img,
  .exp:hover .exp__body,
  .exp:hover .exp__num,
  .world-next:hover .world-next__media.is-visible img { transform: none; }
}


/* =========================================================
   17. INTERACTIVE PAGES — shared (quiz + map)
   Category colours: quiet versions of the palette, readable
   with ivory text (markers, dots).
   ========================================================= */
:root {
  --cat-nature: #2E5A47;
  --cat-culture: var(--c-maple-deep);
  --cat-flavours: #8A6128;
  --cat-adventure: #3F646B;
}
.cat-dot {
  display: inline-block;
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--c-muted));
}
.cat-dot--nature    { --dot: var(--cat-nature); }
.cat-dot--culture   { --dot: var(--cat-culture); }
.cat-dot--flavours  { --dot: var(--cat-flavours); }
.cat-dot--adventure { --dot: var(--cat-adventure); }
/* On dark backgrounds the dots get an ivory ring so they stay visible */
.quiz .cat-dot { box-shadow: 0 0 0 1.5px rgba(244, 240, 232, 0.7); }

/* Secondary button for dark backgrounds */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ivory);
  --btn-hover-bg: var(--c-ivory);
  --btn-hover-fg: var(--c-forest);
  box-shadow: inset 0 0 0 1px rgba(244, 240, 232, 0.55);
}
.map-pin-icon {                       /* small map pin drawn with borders */
  width: 12px; height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* Elements toggled with the hidden attribute must really hide */
.quiz [hidden],
.atlas [hidden] { display: none !important; }


/* =========================================================
   18. FIND YOUR ONTARIO — find-your-ontario.html
   Intro → 7 full scenes over a photograph → result.
   js/quiz.js renders the questions and the result.
   ========================================================= */
.quiz {
  --accent: var(--c-maple-light);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  background: var(--c-forest-deep);
  color: var(--c-ivory);
}

/* Photograph: two layers that cross-fade between scenes */
.quiz__bg { position: absolute; inset: 0; z-index: -2; }
.quiz__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.2s ease, transform 7s var(--ease-out), filter 1.2s ease;
}
.quiz__bg img.is-active { opacity: 1; transform: scale(1); }
.quiz__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15, 38, 31, 0.9) 0%, rgba(15, 38, 31, 0.72) 42%, rgba(15, 38, 31, 0.28) 100%),
    linear-gradient(0deg, rgba(15, 38, 31, 0.75) 0%, rgba(15, 38, 31, 0) 45%);
  transition: background-color 1s ease;
}
/* Result: the photo becomes a soft, dark backdrop */
.quiz[data-step="result"] .quiz__bg img { filter: blur(28px) saturate(0.7); transform: scale(1.15); }
.quiz[data-step="result"] .quiz__shade { background-color: rgba(15, 38, 31, 0.72); }

.quiz__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 36px) var(--gutter) 56px;
}
.quiz[data-step="result"] .quiz__stage { padding: var(--nav-h) 0 96px; }

/* Scene change: out (up + fade), in (from below) */
.quiz__stage > * { transition: opacity 0.7s ease, transform 0.9s var(--ease-out); }
.quiz.is-leaving .quiz__stage > * { opacity: 0; transform: translateY(-26px); transition-duration: 0.35s; }
.quiz.is-entering .quiz__stage > * { opacity: 0; transform: translateY(34px); transition: none; }

/* ---------- Intro ---------- */
.quiz-intro {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: var(--col-gap);
  align-items: end;
}
.quiz-intro__mark {
  position: absolute;
  right: -0.04em; top: -0.12em;
  z-index: -1;
  font-family: var(--f-display);
  font-size: clamp(420px, 44vw, 820px);
  font-weight: 500;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.26);
  pointer-events: none;
}
.quiz-intro__head { grid-column: 1 / 8; }
.quiz-intro__head .display-xl { font-size: clamp(96px, 9.4vw, 176px); line-height: 0.88; }
.quiz-intro__body { grid-column: 8 / 13; padding-bottom: 12px; }
.quiz-intro__body .lede { font-size: 19px; color: rgba(244, 240, 232, 0.88); }
.quiz-intro__body .fyo__meta { margin: 40px 0 44px; }
.quiz-intro__note { margin-top: 22px; font-size: 13.5px; color: rgba(244, 240, 232, 0.6); }
.quiz-intro__caption { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin-top: 44px; }

/* ---------- Question ---------- */
.quiz-q {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--col-gap);
  row-gap: 36px;
}
.quiz-q__top { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 36px; }
.quiz-progress { flex: 1; display: flex; gap: 6px; padding-top: 24px; }
.quiz-progress li {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(244, 240, 232, 0.2);
  transition: background-color 0.6s ease;
}
.quiz-progress li.is-done { background: rgba(244, 240, 232, 0.75); }
.quiz-progress li.is-current { background: var(--c-maple-light); }
.quiz-progress li > * {               /* the number sits above its bar */
  position: absolute;
  inset: -24px 0 -10px;
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: left;
  color: rgba(244, 240, 232, 0.45);
}
.quiz-progress li.is-current > *,
.quiz-progress button:hover { color: var(--c-ivory); }
.quiz-progress button { cursor: pointer; }
.quiz-q__count {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1;
  color: rgba(244, 240, 232, 0.7);
}
.quiz-q__count span { font-style: italic; color: var(--c-maple-light); }

.quiz-q__num {
  position: absolute;
  left: -0.07em; bottom: -0.17em;
  z-index: -1;
  font-family: var(--f-display);
  font-size: clamp(320px, 36vw, 660px);
  font-weight: 500;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.34);
  pointer-events: none;
  animation: numIn 1.4s var(--ease-out) both;
}
@keyframes numIn {
  from { opacity: 0; transform: translateY(8%); }
  to   { opacity: 1; transform: none; }
}

.quiz-q__head { grid-column: 1 / 6; align-self: center; }
.quiz-q__head .eyebrow { margin-bottom: 28px; color: var(--c-sand); }
.quiz-q__title {
  font-family: var(--f-display);
  font-size: clamp(54px, 4.7vw, 90px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.quiz-q__title:focus { outline: none; }
.quiz-q__keys { margin-top: 30px; font-size: 13px; color: rgba(244, 240, 232, 0.55); }

.quiz-q__options { grid-column: 7 / 13; align-self: center; display: grid; gap: 10px; }
.quiz-q__options li { animation: fadeUp 0.8s var(--ease-out) backwards; animation-delay: calc(0.15s + var(--i, 0) * 0.07s); }
.quiz-option {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr 26px;
  align-items: center;
  gap: 22px;
  padding: 16px 24px 16px 18px;
  text-align: left;
  background: rgba(15, 38, 31, 0.45);
  border: 1px solid rgba(244, 240, 232, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.5s var(--ease-out);
}
.quiz-option:hover,
.quiz-option:focus-visible { background: rgba(244, 240, 232, 0.12); border-color: rgba(244, 240, 232, 0.55); transform: translateX(8px); }
.quiz-option__key {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(244, 240, 232, 0.5);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.quiz-option__label {
  display: block;
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}
.quiz-option__hint { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: rgba(244, 240, 232, 0.66); }
.quiz-option__check {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 232, 0.3);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.quiz-option__check::after {        /* tick */
  content: '';
  position: absolute;
  left: 8px; top: 5px;
  width: 7px; height: 12px;
  border-right: 2px solid var(--c-ivory);
  border-bottom: 2px solid var(--c-ivory);
  transform: rotate(45deg) scale(0);
  transition: transform 0.4s var(--ease-out);
}
.quiz-option[aria-pressed="true"] { background: var(--c-ivory); border-color: var(--c-ivory); color: var(--c-forest); transform: translateX(8px); }
.quiz-option[aria-pressed="true"] .quiz-option__hint { color: var(--c-muted); }
.quiz-option[aria-pressed="true"] .quiz-option__key { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-ivory); }
.quiz-option[aria-pressed="true"] .quiz-option__check { background: var(--c-maple); border-color: var(--c-maple); }
.quiz-option[aria-pressed="true"] .quiz-option__check::after { transform: rotate(45deg) scale(1); }

.quiz-q__nav { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.quiz-back {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.8);
  transition: color var(--dur-fast) ease, gap 0.45s var(--ease-out);
}
.quiz-back:hover { color: var(--c-maple-light); gap: 22px; }
/* Continue stays visible but inactive until an answer is chosen */
.quiz-next { transition: color 0.45s var(--ease-out), opacity 0.4s ease, background-color 0.4s ease; }
.quiz-next:disabled {
  --btn-bg: rgba(244, 240, 232, 0.12);
  --btn-fg: rgba(244, 240, 232, 0.55);
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px rgba(244, 240, 232, 0.25);
}
.quiz-next:disabled::before { transform: scaleX(0); }
.quiz-next:disabled .btn__label > span { transform: none; }
.quiz-next:disabled .arrow { width: 26px; }
.arrow--back { transform: rotate(180deg); }

/* ---------- Result ---------- */
.quiz-result {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: 88px;
  align-items: center;
}
.quiz-result__media {
  position: relative;
  grid-column: 1 / 7;
  align-self: stretch;
  min-height: calc(100vh - var(--nav-h));
  margin: 0;
  overflow: hidden;
  background: var(--c-forest);
  animation: resultMedia 1.5s var(--ease-in-out) both;
}
@keyframes resultMedia {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.quiz-result__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: resultZoom 2.4s var(--ease-out) both;
}
@keyframes resultZoom {
  from { transform: scale(1.18); }
  to   { transform: scale(1); }
}
.quiz-result__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 38, 31, 0.65) 0%, rgba(15, 38, 31, 0) 40%);
}
.quiz-result__media figcaption { position: absolute; left: var(--gutter); bottom: 32px; z-index: 1; }
.quiz-result__num {
  position: absolute;
  right: 0.04em; bottom: -0.16em;
  z-index: 1;
  font-family: var(--f-display);
  font-size: clamp(200px, 19vw, 360px);
  font-weight: 500;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.6);
  pointer-events: none;
}
.quiz-result__body { grid-column: 7 / 13; padding: 40px var(--gutter) 40px 48px; }
.quiz-result__body > * { animation: fadeUp 0.9s var(--ease-out) backwards; }
.quiz-result__body > :nth-child(2) { animation-delay: 0.35s; }
.quiz-result__body > :nth-child(3) { animation-delay: 0.45s; }
.quiz-result__body > :nth-child(4) { animation-delay: 0.55s; }
.quiz-result__body > :nth-child(n+5) { animation-delay: 0.7s; }
.quiz-result__body .eyebrow { margin-bottom: 26px; color: var(--c-maple-light); }
.quiz-result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.72);
}
.quiz-result__sep { opacity: 0.5; }
.quiz-result__name {
  margin-top: 18px;
  font-family: var(--f-display);
  font-size: clamp(58px, 5.2vw, 104px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.015em;
}
.quiz-result__name:focus { outline: none; }
.quiz-meter { margin: 32px 0 26px; }
.quiz-meter__value { display: flex; align-items: baseline; gap: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 240, 232, 0.7); }
.quiz-meter__value strong {
  font-family: var(--f-display);
  font-size: 64px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--c-ivory);
}
.quiz-meter__bar { display: block; max-width: 380px; height: 2px; margin-top: 14px; background: rgba(244, 240, 232, 0.2); }
.quiz-meter__bar span {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--c-maple-light);
  transform-origin: left center;
  animation: lineDraw 1.6s var(--ease-out) 0.6s backwards;
}
.quiz-result__why {
  font-family: var(--f-display);
  font-size: 25px;
  font-style: italic;
  line-height: 1.35;
  color: var(--c-sand);
}
.quiz-result__text { margin-top: 18px; max-width: 34em; font-size: 15.5px; color: rgba(244, 240, 232, 0.82); }
.quiz-result__tip {
  margin-top: 20px;
  padding-left: 18px;
  border-left: 1px solid var(--c-maple-light);
  font-size: 15px;
  color: rgba(244, 240, 232, 0.82);
}
.quiz-result__tip strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-maple-light);
}
.quiz-result__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.quiz-result__actions .btn { padding: 19px 28px; }
.quiz-retake { margin-top: 26px; color: rgba(244, 240, 232, 0.8); }
.quiz-retake:hover { color: var(--c-maple-light); }

/* You may also like */
.quiz-alts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3fr 4.5fr 4.5fr;
  gap: 24px;
  align-items: stretch;
  margin: 0 var(--gutter);
  padding-top: 48px;
  border-top: 1px solid var(--line-light);
}
.quiz-alts__title { font-family: var(--f-display); font-size: 44px; font-weight: 500; line-height: 1; }
.quiz-alts__head p { margin-top: 14px; font-size: 15px; color: rgba(244, 240, 232, 0.66); }
.quiz-alt {
  display: grid;
  grid-template-columns: 44% 1fr;
  min-height: 220px;
  background: rgba(244, 240, 232, 0.06);
  border: 1px solid var(--line-light);
  transition: border-color 0.4s ease, background-color 0.4s ease;
}
.quiz-alt:hover { border-color: rgba(244, 240, 232, 0.45); background: rgba(244, 240, 232, 0.09); }
.quiz-alt__media { position: relative; margin: 0; overflow: hidden; background: var(--c-forest); }
.quiz-alt__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.quiz-alt:hover .quiz-alt__media img { transform: scale(1.06); }
.quiz-alt__body { display: flex; flex-direction: column; padding: 22px 26px; }
.quiz-alt__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 240, 232, 0.65); }
.quiz-alt__region { margin-top: 4px; font-size: 12.5px; color: rgba(244, 240, 232, 0.6); }
.quiz-alt__name { margin: 10px 0 6px; font-family: var(--f-display); font-size: 30px; font-weight: 500; line-height: 1.02; }
.quiz-alt__pct { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 240, 232, 0.6); }
.quiz-alt__pct strong { font-family: var(--f-display); font-size: 26px; letter-spacing: 0; color: var(--c-maple-light); }
.quiz-alt__links { display: flex; gap: 26px; margin-top: auto; padding-top: 14px; }
.quiz-alt__links .link-arrow:hover { color: var(--c-maple-light); }

@media (prefers-reduced-motion: reduce) {
  .quiz__bg img { transform: none; transition: opacity 0.6s ease; }
  .quiz[data-step="result"] .quiz__bg img { transform: none; }
  .quiz.is-leaving .quiz__stage > *,
  .quiz.is-entering .quiz__stage > * { transform: none; }
  .quiz-q__num,
  .quiz-q__options li,
  .quiz-result__media,
  .quiz-result__media img,
  .quiz-result__body > *,
  .quiz-meter__bar span { animation: none; }
  .quiz-option:hover,
  .quiz-option:focus-visible,
  .quiz-option[aria-pressed="true"] { transform: none; }
}


/* =========================================================
   19. EXPLORE MAP — map.html
   Intro band, then list + map as one interface (js/map.js).
   Leaflet styles are loaded from unpkg; here they are only
   adjusted to the project (controls, markers, card).
   ========================================================= */
.atlas-head {
  --accent: var(--c-maple-light);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
  min-height: 66vh;
  padding: calc(var(--nav-h-solid) + 90px) var(--gutter) 72px;
  overflow: hidden;
  background: var(--c-forest-deep);
  color: var(--c-ivory);
}
.atlas-head__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.atlas-head__media img {
  position: absolute;
  left: 0; top: -8%;
  width: 100%; height: 116%;
  object-fit: cover;
  object-position: center 60%;
  translate: 0 var(--py, 0px);
}
.atlas-head::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15, 38, 31, 0.92) 0%, rgba(15, 38, 31, 0.6) 55%, rgba(15, 38, 31, 0.35) 100%),
    linear-gradient(0deg, rgba(15, 38, 31, 0.85) 0%, rgba(15, 38, 31, 0) 50%);
}
.atlas-head__text { grid-column: 1 / 8; }
.atlas-head__text .display-xl { margin-bottom: 0; }
.atlas-head__side { grid-column: 8 / 13; }
.atlas-head__side .lede { font-size: 18px; color: rgba(244, 240, 232, 0.86); }
.atlas-head__side .stats { margin-top: 40px; }
.atlas-head__side .stats__num { font-size: clamp(56px, 4.4vw, 84px); }
.atlas-head__caption { position: absolute; top: calc(var(--nav-h-solid) + 28px); right: var(--gutter); }

/* The app: list on the left, map on the right, one screen tall */
.atlas {
  display: grid;
  grid-template-columns: minmax(420px, 33%) 1fr;
  height: calc(100vh - var(--nav-h-solid));
  min-height: 640px;
  scroll-margin-top: var(--nav-h-solid);
  background: var(--c-ivory);
}
.atlas-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line-dark);
}
.atlas-filters { padding: 28px 32px 22px; border-bottom: 1px solid var(--line-dark); }
.atlas-filters__label {
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.atlas-chips + .atlas-filters__label { margin-top: 20px; }
.atlas-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.atlas-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.atlas-chip:hover { border-color: var(--c-forest); }
.atlas-chip[aria-pressed="true"] { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-ivory); }
.atlas-chip[aria-pressed="true"] .cat-dot { box-shadow: 0 0 0 1.5px var(--c-ivory); }
.atlas-chip__n { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.55; }
.atlas-chip--line { padding: 6px 13px; font-size: 12px; }

.atlas-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 32px 10px;
}
.atlas-count p { display: flex; align-items: baseline; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted); }
.atlas-count strong {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-forest);
  font-variant-numeric: lining-nums tabular-nums;
}
.atlas-clear { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-maple); }
.atlas-clear:hover { color: var(--c-maple-deep); }

.atlas-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-sand) transparent;
}
.atlas-list.is-filtering li { animation: fadeUp 0.5s var(--ease-out) backwards; }
.atlas-row {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-dark);
  transition: background-color 0.3s ease, color 0.3s ease, padding-left 0.45s var(--ease-out);
}
.atlas-row:focus-visible { outline-offset: -3px; }
.atlas-row__num { font-family: var(--f-display); font-size: 20px; font-style: italic; color: var(--c-maple); }
.atlas-row__name { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.atlas-row__region { display: block; margin-top: 2px; font-size: 12px; color: var(--c-muted); }
.atlas-row__cat { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
.atlas-row:hover,
[data-row].is-hover .atlas-row { background: var(--c-paper); padding-left: 22px; }
[data-row].is-selected .atlas-row { background: var(--c-forest); color: var(--c-ivory); padding-left: 22px; }
[data-row].is-selected .atlas-row__num { color: var(--c-maple-light); }
[data-row].is-selected .atlas-row__region,
[data-row].is-selected .atlas-row__cat { color: rgba(244, 240, 232, 0.72); }
[data-row].is-selected .cat-dot { box-shadow: 0 0 0 1.5px var(--c-ivory); }

.atlas-empty { padding: 28px 32px; }
.atlas-empty p { margin-bottom: 12px; font-family: var(--f-display); font-size: 24px; font-style: italic; color: var(--c-forest); }

/* Map */
.atlas-map { position: relative; min-width: 0; background: #ECE6DA; }
.atlas-map__canvas { position: absolute; inset: 0; }
.atlas-map .leaflet-container { font-family: var(--f-sans); background: #ECE6DA; }
.atlas-map .leaflet-tile-pane { filter: grayscale(0.6) sepia(0.28) contrast(0.9) brightness(1.04); }   /* quiet OSM colours, close to ivory */
.atlas-map .leaflet-top.leaflet-right { top: 16px; right: 16px; }
.atlas-map .leaflet-bar { border: 0; border-radius: 0; box-shadow: 0 12px 30px rgba(15, 38, 31, 0.18); }
.atlas-map .leaflet-bar a {
  width: 40px; height: 40px;
  line-height: 40px;
  border-radius: 0 !important;
  border-bottom-color: var(--line-dark);
  background: var(--c-ivory);
  color: var(--c-forest);
  font: 400 20px/40px var(--f-sans);
}
.atlas-map .leaflet-bar a:hover { background: var(--c-forest); color: var(--c-ivory); }
.atlas-map .leaflet-control-attribution { padding: 2px 10px; background: rgba(244, 240, 232, 0.85); font-size: 10px; color: var(--c-muted); }
.atlas-map .leaflet-control-attribution a { color: var(--c-forest); }
.atlas-map__offline {
  position: absolute;
  top: 50%; left: 50%;
  max-width: 26em;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-size: 24px;
  font-style: italic;
  text-align: center;
  color: var(--c-forest);
}

/* Markers: the icon element is moved by Leaflet (transform),
   so the visible circle is the inner span */
.atlas-pin { --pin: var(--c-forest); }
.atlas-pin--nature    { --pin: var(--cat-nature); }
.atlas-pin--culture   { --pin: var(--cat-culture); }
.atlas-pin--flavours  { --pin: var(--cat-flavours); }
.atlas-pin--adventure { --pin: var(--cat-adventure); }
.atlas-pin span,
.atlas-group span {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}
.atlas-pin span {
  background: var(--pin);
  border: 2px solid var(--c-ivory);
  box-shadow: 0 6px 16px rgba(15, 38, 31, 0.35);
  color: var(--c-ivory);
  font: 700 11px/1 var(--f-sans);
  letter-spacing: 0.02em;
}
.atlas-group span {
  background: var(--c-ivory);
  border: 2px solid var(--c-forest);
  box-shadow: 0 8px 20px rgba(15, 38, 31, 0.3);
  color: var(--c-forest);
  font: 600 22px/1 var(--f-display);
}
.atlas-pin:hover span,
.atlas-pin.is-hover span,
.atlas-group:hover span,
.atlas-group.is-hover span { transform: scale(1.22); box-shadow: 0 10px 24px rgba(15, 38, 31, 0.4); }
.atlas-pin.is-selected span { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(196, 85, 61, 0.35), 0 10px 24px rgba(15, 38, 31, 0.4); }
.atlas-pin.is-selected span::after {   /* soft pulse around the selected place */
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--c-maple);
  animation: ring 2.2s ease-out infinite;
}
.atlas-pin.is-selected span { position: relative; }
.atlas-pin:focus-visible,
.atlas-group:focus-visible { outline: none; }
.atlas-pin:focus-visible span,
.atlas-group:focus-visible span { outline: 2px solid var(--c-maple); outline-offset: 3px; }

/* Card of the selected experience (replaces Leaflet's popup) */
.atlas-card {
  position: absolute;
  z-index: 900;
  left: 24px; top: 24px;
  width: 380px;
  max-height: calc(100% - 48px);
  overflow-y: auto;
  background: var(--c-ivory);
  box-shadow: 0 30px 80px rgba(15, 38, 31, 0.35);
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.45s ease, transform 0.6s var(--ease-out);
  scrollbar-width: thin;
}
.atlas-card.is-open { opacity: 1; transform: none; }
.atlas-card__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-ivory);
  color: var(--c-forest);
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(15, 38, 31, 0.25);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.atlas-card__close:hover { background: var(--c-forest); color: var(--c-ivory); }
.atlas-card__media { position: relative; aspect-ratio: 16 / 10; margin: 0; overflow: hidden; background: var(--c-sand); }
.atlas-card__media img { width: 100%; height: 100%; object-fit: cover; animation: fadeIn 0.6s ease both; }
.atlas-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 38, 31, 0.5) 0%, rgba(15, 38, 31, 0) 45%); }
.atlas-card__num {
  position: absolute;
  right: 16px; bottom: -0.14em;
  z-index: 1;
  font-family: var(--f-display);
  font-size: 110px;
  font-weight: 500;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.8);
}
.atlas-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--c-ivory);
  color: var(--c-forest);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.atlas-card__body { padding: 24px 28px 28px; }
.atlas-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); }
.atlas-card__name { margin: 10px 0 6px; font-family: var(--f-display); font-size: 36px; font-weight: 500; line-height: 1; color: var(--c-forest); }
.atlas-card__name:focus { outline: none; }
.atlas-card__place { font-size: 13px; color: var(--c-muted); }
.atlas-card__text { margin: 16px 0 22px; font-size: 14.5px; line-height: 1.6; }
.atlas-card__cta { padding: 17px 26px; }
.atlas-card__near { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.atlas-card__near-title { margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted); }
.atlas-near {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--line-dark);
  transition: color var(--dur-fast) ease;
}
.atlas-card__near li:last-child .atlas-near { border-bottom: 0; }
.atlas-near:hover { color: var(--c-maple); }
.atlas-near__km { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--c-muted); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .atlas-card { transform: none; transition: opacity 0.3s ease; }
  .atlas-list.is-filtering li { animation: fadeIn 0.4s ease both; }
  .atlas-pin.is-selected span::after { animation: none; }
  .atlas-pin span, .atlas-group span { transition: none; }
}


/* =========================================================
   20. SHARED PLANNING COMPONENTS
   Plan menu (header) · favourites (♡ button, header heart,
   notification) · map selection · experience card (.xcard)
   used by seasons.html and favourites.html.
   ========================================================= */

/* --- "Explore" and "Plan" menus in the header (disclosures, js/main.js) --- */
.main-nav__group { position: relative; }
.main-nav__toggle { cursor: pointer; }
.main-nav__caret {
  width: 6px; height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s var(--ease-out), margin 0.4s var(--ease-out);
}
.main-nav__group.is-open .main-nav__caret { margin-top: 3px; transform: rotate(-135deg); }
.main-nav__group.is-open .main-nav__toggle { opacity: 1; }
.main-nav__toggle.has-current { opacity: 1; }
.main-nav__toggle.has-current::after { transform: scaleX(1); background: var(--c-maple); height: 2px; }

.nav-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 34px;
  width: 560px;
  padding: 30px 34px 32px;
  background: var(--c-ivory);
  color: var(--c-charcoal);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
  animation: menuIn 0.45s var(--ease-out) both;
}
.nav-menu[hidden] { display: none; }
.nav-menu::before {                    /* small notch under the button */
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  width: 12px; height: 12px;
  background: var(--c-ivory);
  transform: translateX(-50%) rotate(45deg);
}
.nav-menu::after {                     /* invisible hover bridge over the gap */
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 22px;
}
.nav-menu--single {                    /* one group: a single column */
  grid-template-columns: 1fr;
  width: 360px;
}
@keyframes menuIn {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.nav-menu__title {
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-maple-deep);
}
.nav-menu__link {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
  transition: padding-left 0.45s var(--ease-out);
}
.nav-menu__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--c-forest);
  transition: color var(--dur-fast) ease;
}
.nav-menu__hint { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }
.nav-menu__link:hover,
.nav-menu__link:focus-visible { padding-left: 8px; }
.nav-menu__link:hover .nav-menu__name,
.nav-menu__link[aria-current="page"] .nav-menu__name { color: var(--c-maple-deep); }
.nav-menu__link[aria-current="page"] .nav-menu__name::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-maple);
}
.nav-menu__link:focus-visible { outline-offset: 2px; }
.nav-menu__count,
.nav-fav__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--c-maple);
  color: var(--c-ivory);
  font: 700 10px/18px var(--f-sans);
  letter-spacing: 0;
  text-align: center;
}
.nav-menu__count[hidden],
.nav-fav__count[hidden] { display: none; }

/* --- Heart in the header → My Favourites --- */
.nav-fav {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px; height: 42px;
  margin: 0 -12px 0 -8px;
  border-radius: 50%;
  animation: fadeDown 0.9s var(--ease-out) 0.62s both;
  transition: background-color var(--dur-fast) ease;
}
.nav-fav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: fill 0.3s ease, stroke 0.3s ease; }
.nav-fav:hover { background: rgba(244, 240, 232, 0.12); }
.nav-fav:hover svg,
.nav-fav[aria-current="page"] svg { fill: var(--c-maple-light); stroke: var(--c-maple-light); }
.nav-fav__count { position: absolute; top: 1px; right: -1px; }

/* --- ♡ Save button (js/favourites.js) --- */
.fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 17px 10px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  color: var(--c-forest);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.fav-btn__icon {
  width: 17px; height: 17px;
  flex: none;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.7;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.fav-btn:hover { border-color: var(--c-maple); color: var(--c-maple-deep); }
.fav-btn.is-saved { border-color: var(--c-maple); color: var(--c-maple-deep); background: rgba(196, 85, 61, 0.06); }
.fav-btn.is-saved .fav-btn__icon { fill: var(--c-maple); stroke: var(--c-maple); }
.fav-btn.is-popping .fav-btn__icon { animation: heartPop 0.6s var(--ease-out); }
.fav-btn--icon { justify-content: center; width: 42px; height: 42px; padding: 0; }
.fav-btn--icon .fav-btn__icon { width: 19px; height: 19px; }
/* On dark backgrounds */
.fav-btn--dark,
.exp--a-flip .fav-btn,
.exp--cine .fav-btn { border-color: rgba(244, 240, 232, 0.45); color: var(--c-ivory); }
.fav-btn--dark:hover,
.exp--a-flip .fav-btn:hover,
.exp--cine .fav-btn:hover { border-color: var(--c-maple-light); color: var(--c-maple-light); }
.fav-btn--dark.is-saved,
.exp--a-flip .fav-btn.is-saved,
.exp--cine .fav-btn.is-saved { border-color: var(--c-maple-light); color: var(--c-ivory); background: rgba(224, 130, 107, 0.14); }
.fav-btn--dark.is-saved .fav-btn__icon,
.exp--a-flip .fav-btn.is-saved .fav-btn__icon,
.exp--cine .fav-btn.is-saved .fav-btn__icon { fill: var(--c-maple-light); stroke: var(--c-maple-light); }
/* Floating on a photo */
.fav-btn--float { border-color: transparent; background: rgba(244, 240, 232, 0.92); box-shadow: 0 8px 22px rgba(15, 38, 31, 0.22); }
.fav-btn--float:hover { background: var(--c-ivory); }
.fav-btn--float.is-saved { background: var(--c-ivory); border-color: transparent; }
@keyframes heartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* World pages: the button sits under the facts of each experience */
.exp__save { margin-top: 26px; }
.exp--wide .exp__save { grid-column: 3; }

/* Map card + quiz result */
.atlas-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.quiz-result__actions { align-items: center; }
.quiz-result__actions .fav-btn { padding: 17px 24px 17px 20px; }
.quiz-alt__links { align-items: center; }
.quiz-alt__links .fav-btn { margin-left: auto; width: 36px; height: 36px; }

/* Map: selection banner (trip, favourites, season) */
.atlas-set {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  background: var(--c-forest);
  color: var(--c-ivory);
}
.atlas-set p { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.atlas-set strong { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.atlas-set .atlas-clear { color: var(--c-maple-light); }
.atlas-set .atlas-clear:hover { color: var(--c-ivory); }

/* --- Notification after saving / removing --- */
.fav-toast {
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 260;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(470px, calc(100vw - 48px));
  padding: 16px 14px 16px 20px;
  background: var(--c-forest);
  color: var(--c-ivory);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity 0.35s ease, transform 0.6s var(--ease-out);
}
.fav-toast.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.fav-toast__icon { width: 26px; height: 26px; flex: none; fill: var(--c-maple-light); stroke: var(--c-maple-light); stroke-width: 1.5; }
.fav-toast.is-removed .fav-toast__icon { fill: none; stroke: rgba(244, 240, 232, 0.7); }
.fav-toast__body { flex: 1; min-width: 0; }
.fav-toast__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-maple-light); }
.fav-toast__name { margin-top: 2px; font-family: var(--f-display); font-size: 21px; line-height: 1.2; }
.fav-toast__action,
.fav-toast__undo {
  flex: none;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-fast) ease;
}
.fav-toast__action:hover,
.fav-toast__undo:hover { color: var(--c-maple-light); }
.fav-toast__close {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  transition: background-color var(--dur-fast) ease;
}
.fav-toast__close:hover { background: rgba(244, 240, 232, 0.12); }

/* --- Experience card (seasons, favourites) --- */
.xcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.xcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: var(--c-sand);
}
.xcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity 0.9s ease; }
.xcard:hover .xcard__media img { transform: scale(1.05); }
.xcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 38, 31, 0.45) 0%, rgba(15, 38, 31, 0) 45%);
  pointer-events: none;
}
.xcard__num {
  position: absolute;
  right: 14px; bottom: -0.14em;
  z-index: 1;
  font-family: var(--f-display);
  font-size: 84px;
  font-weight: 500;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.85);
  pointer-events: none;
}
.xcard__fav { position: absolute; top: 14px; right: 14px; z-index: 2; }
.xcard__body { display: flex; flex-direction: column; flex: 1; padding-top: 22px; }
.xcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.xcard__name {
  margin: 10px 0 4px;
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.02;
  color: var(--c-forest);
}
.xcard__name a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size 0.55s var(--ease-out), color var(--dur-fast) ease; }
.xcard__name a:hover { color: var(--c-maple-deep); background-size: 100% 1px; }
.xcard__region { font-size: 13px; color: var(--c-muted); }
.xcard__why {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--c-maple);
  font-family: var(--f-display);
  font-size: 20px;
  font-style: italic;
  line-height: 1.3;
}
.xcard__best {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.xcard__best b { font-weight: 700; color: var(--c-forest); }
.xcard__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin-top: auto; padding-top: 18px; }
.xcard__links .link-arrow { color: var(--c-forest); }
.xcard__links .link-arrow:hover { color: var(--c-maple-deep); }
.link-arrow .map-pin-icon { margin-left: 2px; }

/* Header band shared by the new pages (same language as the map intro) */
.atlas-head--plain { min-height: 58vh; }
.atlas-head--plain::after {
  background:
    radial-gradient(ellipse at 85% 20%, rgba(85, 124, 131, 0.28) 0%, rgba(85, 124, 131, 0) 55%),
    linear-gradient(180deg, rgba(15, 38, 31, 0) 0%, rgba(15, 38, 31, 0.6) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu { animation: fadeIn 0.3s ease both; }
  .fav-btn.is-popping .fav-btn__icon { animation: none; }
  .fav-toast { transform: none; }
  .xcard:hover .xcard__media img { transform: none; }
}


/* =========================================================
   21. PLAN YOUR TRIP — plan-your-trip.html
   The five choices reuse the quiz scenes (section 18);
   the itinerary (.trip) is an editorial timeline on ivory.
   ========================================================= */
.planner-intro__route {
  position: absolute;
  top: 2vh; right: 0;
  z-index: -1;
  display: flex;
  align-items: flex-end;
  gap: 2.4vw;
  pointer-events: none;
}
.planner-intro__route::before {       /* the road between the milestones */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  border-top: 1px dashed rgba(244, 240, 232, 0.35);
}
.planner-intro__route li {
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(90px, 8.4vw, 160px);
  font-weight: 500;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.3);
}
.planner-intro__route li::after {     /* a stop on the road */
  content: '';
  position: absolute;
  left: 50%; bottom: -26px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-maple-light);
  transform: translateX(-50%);
}
.planner-intro__favs { margin: -14px 0 34px; }
.plan-favs {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  text-align: left;
  border: 1px solid rgba(244, 240, 232, 0.3);
  background: rgba(15, 38, 31, 0.45);
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.plan-favs:hover { border-color: rgba(244, 240, 232, 0.6); }
.plan-favs__box {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 3px;
  border: 1px solid rgba(244, 240, 232, 0.6);
  border-radius: 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.plan-favs__box::after {
  content: '';
  position: absolute;
  left: 7px; top: 3px;
  width: 6px; height: 11px;
  border-right: 2px solid var(--c-ivory);
  border-bottom: 2px solid var(--c-ivory);
  transform: rotate(45deg) scale(0);
  transition: transform 0.35s var(--ease-out);
}
.plan-favs[aria-pressed="true"] { border-color: var(--c-maple-light); }
.plan-favs[aria-pressed="true"] .plan-favs__box { background: var(--c-maple); border-color: var(--c-maple); }
.plan-favs[aria-pressed="true"] .plan-favs__box::after { transform: rotate(45deg) scale(1); }
.plan-favs__label { display: block; font-family: var(--f-display); font-size: 23px; line-height: 1.15; }
.plan-favs__hint { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: rgba(244, 240, 232, 0.66); }

/* Steps */
.planner .quiz-q__options--grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.planner .quiz-q__options--grid li:first-child { grid-column: 1 / -1; }
.planner .quiz-q__options--grid .quiz-option { grid-template-columns: 38px 1fr 22px; gap: 16px; padding: 13px 16px; }
.planner .quiz-q__options--grid .quiz-option__key { width: 38px; height: 38px; font-size: 11px; }
.planner .quiz-q__options--grid .quiz-option__label { font-size: 22px; }
.planner .quiz-q__options--grid .quiz-option__check { width: 22px; height: 22px; }
.planner .quiz-q__options--grid .quiz-option__check::after { left: 6px; top: 3px; }
.quiz-option__key--dot .cat-dot { width: 13px; height: 13px; }
.quiz-option--multi .quiz-option__check { border-radius: 6px; }
.planner-summary {
  flex: 1;
  padding: 0 32px;
  font-family: var(--f-display);
  font-size: 21px;
  font-style: italic;
  text-align: center;
  color: var(--c-sand);
}

/* Result */
.trip { background: var(--c-ivory); }
.trip[hidden] { display: none; }

.trip-head {
  --accent: var(--c-maple-light);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-content: end;
  min-height: 86vh;
  padding: calc(var(--nav-h) + 60px) var(--gutter) 64px;
  overflow: hidden;
  background: var(--c-forest-deep);
  color: var(--c-ivory);
}
.trip-head__media { position: absolute; top: 0; right: 0; bottom: 0; left: 40%; z-index: -2; margin: 0; }
.trip-head__media img { width: 100%; height: 100%; object-fit: cover; animation: heroIn 2.4s var(--ease-out) both; }
.trip-head::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--c-forest-deep) 0%, var(--c-forest-deep) 40%, rgba(15, 38, 31, 0.55) 62%, rgba(15, 38, 31, 0.12) 100%),
    linear-gradient(0deg, rgba(15, 38, 31, 0.75) 0%, rgba(15, 38, 31, 0) 45%);
}
.trip-head__text { grid-column: 1 / 9; }
.trip-head__text .eyebrow { margin-bottom: 30px; }
.trip-head__title { font-size: clamp(84px, 8vw, 152px); line-height: 0.88; }
.trip-head__title:focus { outline: none; }
.trip-summary {
  grid-column: 1 / 10;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 52px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--line-light);
}
.trip-summary div { display: flex; flex-direction: column-reverse; gap: 6px; }
.trip-summary dt { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 240, 232, 0.6); }
.trip-summary dd { font-family: var(--f-display); font-size: 30px; line-height: 1.1; }
.trip-head__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 44px; }
.trip-head__actions .btn { padding: 19px 28px; }
.trip-restart { margin-left: 16px; color: rgba(244, 240, 232, 0.8); }
.trip-restart:hover { color: var(--c-maple-light); }
.trip-head__caption { position: absolute; top: calc(var(--nav-h-solid) + 28px); right: var(--gutter); }
.trip-head.is-new .trip-head__text,
.trip-head.is-new .trip-summary,
.trip-head.is-new .trip-head__actions { animation: fadeUp 1s var(--ease-out) backwards; }
.trip-head.is-new .trip-summary { animation-delay: 0.25s; }
.trip-head.is-new .trip-head__actions { animation-delay: 0.4s; }

.trip-body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: 110px var(--gutter) var(--section-pad);
}
.trip-aside {
  grid-column: 1 / 4;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h-solid) + 36px);
}
.trip-aside__title {
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.trip-route { margin-bottom: 34px; }
.trip-route li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 0 22px 28px; }
.trip-route li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px; top: 16px; bottom: -4px;
  border-left: 1px dashed rgba(196, 85, 61, 0.55);
}
.trip-route__dot {
  position: absolute;
  left: 0; top: 9px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--c-maple);
  box-shadow: 0 0 0 4px rgba(196, 85, 61, 0.16);
}
.trip-route__name { font-family: var(--f-display); font-size: 26px; line-height: 1.1; color: var(--c-forest); }
.trip-route__km { font-size: 12px; color: var(--c-muted); white-space: nowrap; }
.trip-note {
  margin-bottom: 18px;
  padding: 16px 18px;
  border-left: 2px solid var(--c-maple);
  background: var(--c-paper);
  font-size: 14px;
  line-height: 1.55;
}
.trip-left { margin: 28px 0 0; }
.trip-left li { margin-bottom: 8px; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.trip-left strong { color: var(--c-ink); }
.trip-how { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.trip-how li { position: relative; margin-bottom: 8px; padding-left: 16px; font-size: 13.5px; line-height: 1.55; color: var(--c-muted); }
.trip-how li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1px; background: var(--c-maple); }

.trip-days { grid-column: 5 / 13; display: grid; gap: 100px; }
.trip-day__head {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-forest);
}
.trip-day__num {
  font-family: var(--f-display);
  font-size: clamp(110px, 9vw, 170px);
  font-weight: 500;
  line-height: 0.76;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-maple);
}
.trip-day__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-maple-deep);
}
.trip-day__title { font-family: var(--f-display); font-size: clamp(40px, 3.4vw, 62px); font-weight: 500; line-height: 1; color: var(--c-forest); }
.trip-day__meta { margin-top: 10px; font-size: 13px; color: var(--c-muted); }

.trip-stop,
.trip-move,
.trip-free {
  display: grid;
  grid-template-columns: 150px 220px 1fr;
  gap: 32px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-dark);
}
.trip-move,
.trip-free { padding: 22px 0; border-bottom-style: dashed; }
.trip-stop__time { padding-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; line-height: 1.5; text-transform: uppercase; color: var(--c-maple-deep); }
.trip-stop__media { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: var(--c-sand); }
.trip-stop__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity 0.8s ease; }
.trip-stop:hover .trip-stop__media img { transform: scale(1.05); }
.trip-stop__num {
  position: absolute;
  right: 10px; bottom: -0.12em;
  font-family: var(--f-display);
  font-size: 64px;
  font-weight: 500;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 240, 232, 0.9);
}
.trip-stop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); }
.trip-stop__tag { padding: 3px 10px; border: 1px solid var(--line-dark); border-radius: 100px; font-size: 10px; letter-spacing: 0.12em; }
.trip-stop__tag--fav { border-color: rgba(196, 85, 61, 0.45); color: var(--c-maple-deep); }
.trip-stop__name { margin: 10px 0 4px; font-family: var(--f-display); font-size: 38px; font-weight: 500; line-height: 1; color: var(--c-forest); }
.trip-stop__place { font-family: var(--f-display); font-size: 19px; font-style: italic; color: var(--c-lake); }
.trip-stop__why { max-width: 36em; margin-top: 12px; font-size: 15px; line-height: 1.6; }
.trip-stop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-top: 16px; }
.trip-stop__actions .link-arrow { color: var(--c-forest); }
.trip-stop__actions .link-arrow:hover { color: var(--c-maple-deep); }
.trip-move__icon,
.trip-free__icon {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px dashed var(--c-maple);
}
.trip-move__icon::after {             /* arrow → */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  border-top: 1.5px solid var(--c-maple);
  border-right: 1.5px solid var(--c-maple);
  transform: translate(-65%, -50%) rotate(45deg);
}
.trip-free__icon { border-color: var(--c-lake-soft); border-style: solid; }
.trip-free__icon::after {             /* a pause: two dots */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-lake);
  box-shadow: -8px 0 0 var(--c-lake), 8px 0 0 var(--c-lake);
  transform: translate(-50%, -50%);
}
.trip-move__title { font-family: var(--f-display); font-size: 25px; line-height: 1.1; color: var(--c-forest); }
.trip-move__text { max-width: 38em; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--c-muted); }

@media (prefers-reduced-motion: reduce) {
  .trip-head__media img,
  .trip-head.is-new .trip-head__text,
  .trip-head.is-new .trip-summary,
  .trip-head.is-new .trip-head__actions { animation: fadeIn 0.6s ease both; }
  .trip-stop:hover .trip-stop__media img { transform: none; }
}


/* =========================================================
   22. ONTARIO BY SEASON — seasons.html
   One page, four identities: body[data-season] sets the
   season palette; photo, title and experiences change with it.
   ========================================================= */
[data-page="seasons"] {
  --season: #6E9A5B;          /* accent on dark */
  --season-ink: #3F6B34;      /* accent on light */
  --season-deep: #1B3325;     /* shade of the scene */
  --season-tint: #EDF0E3;     /* panel background */
}
[data-season="summer"] { --season: #6FB1BE; --season-ink: #25616E; --season-deep: #0E3038; --season-tint: #E5EEEC; }
[data-season="autumn"] { --season: #E0826B; --season-ink: #A4432F; --season-deep: #34180F; --season-tint: #F4E7DB; }
[data-season="winter"] { --season: #A9C1D6; --season-ink: #3B5870; --season-deep: #141E29; --season-tint: #E6EAEE; }

.season-hero {
  --accent: var(--season);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 64px;
  overflow: hidden;
  background: var(--season-deep);
  color: var(--c-ivory);
  transition: background-color 1.2s ease;
}
.season-hero__bg { position: absolute; inset: 0; z-index: -2; }
.season-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease, transform 8s var(--ease-out);
}
.season-hero__bg img.is-active { opacity: 1; transform: scale(1); }
.season-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--season-deep) 0%, color-mix(in srgb, var(--season-deep) 70%, transparent) 38%, transparent 72%),
    linear-gradient(90deg, color-mix(in srgb, var(--season-deep) 75%, transparent) 0%, transparent 60%);
  transition: background 1.2s ease;
}
.season-hero__inner .eyebrow { color: var(--c-ivory); }
.season-hero__name {
  font-family: var(--f-display);
  font-size: clamp(130px, 15.5vw, 300px);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.season-hero__name span { display: inline-block; animation: seasonIn 1.1s var(--ease-out) both; }
@keyframes seasonIn {
  from { opacity: 0; transform: translateY(18%); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.season-hero__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--line-light);
}
.season-hero__text { grid-column: 1 / 7; }
.season-hero__months {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--season);
  transition: color 1s ease;
}
.season-hero__title {
  margin-top: 14px;
  font-family: var(--f-display);
  font-size: clamp(44px, 3.6vw, 66px);
  font-weight: 500;
  line-height: 0.98;
}
.season-hero__title em { font-weight: 400; color: var(--season); transition: color 1s ease; }
.season-hero__lede { max-width: 32em; margin-top: 20px; font-size: 18px; line-height: 1.65; color: rgba(244, 240, 232, 0.86); }
.season-hero__caption { position: absolute; top: calc(var(--nav-h-solid) + 28px); right: var(--gutter); }

.season-tabs { grid-column: 8 / 13; display: grid; }
.season-tab {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-light);
  opacity: 0.62;
  transition: opacity 0.4s ease, padding-left 0.5s var(--ease-out);
}
.season-tab:first-child { border-top: 1px solid var(--line-light); }
.season-tab::before {                /* the active season gets a coloured bar */
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--season);
  transform: scaleY(0);
  transition: transform 0.5s var(--ease-out), background-color 1s ease;
}
.season-tab:hover { opacity: 0.9; padding-left: 24px; }
.season-tab[aria-selected="true"] { opacity: 1; padding-left: 26px; }
.season-tab[aria-selected="true"]::before { transform: scaleY(1); }
.season-tab__num { font-family: var(--f-display); font-size: 18px; font-style: italic; color: var(--season); }
.season-tab__name { font-family: var(--f-display); font-size: 34px; font-weight: 500; line-height: 1; }
.season-tab__months { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 240, 232, 0.7); }
.season-tab:focus-visible { outline-offset: -2px; }

/* Panel */
.season-panel {
  padding: 120px var(--gutter) var(--section-pad);
  background: var(--season-tint);
  transition: background-color 1s ease;
}
.season-panel:focus { outline: none; }
.season-panel__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 48px;
  padding-bottom: 40px;
  margin-bottom: 64px;
  border-bottom: 1px solid var(--line-dark);
}
.season-panel__count {
  font-family: var(--f-display);
  font-size: clamp(150px, 13vw, 240px);
  font-weight: 500;
  line-height: 0.74;
  color: transparent;
  -webkit-text-stroke: 1px var(--season-ink);
}
.season-panel__title { color: var(--c-forest); }
.season-panel__lede { max-width: 34em; margin-top: 18px; color: var(--c-muted); }
.season-panel__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.season-panel__actions .link-arrow { color: var(--c-forest); }
.season-panel .xcard__why { border-color: var(--season-ink); }
.season-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 72px 48px;
}
.season-grid .xcard { animation: fadeUp 0.9s var(--ease-out) backwards; }
.season-grid .xcard:nth-child(2) { animation-delay: 0.08s; }
.season-grid .xcard:nth-child(3) { animation-delay: 0.16s; }
.season-grid .xcard:nth-child(n+4) { animation-delay: 0.24s; }

.season-facts {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 48px;
  margin-top: 110px;
  padding-top: 40px;
  border-top: 1px solid var(--c-forest);
}
.season-facts__title { font-family: var(--f-display); font-size: 44px; font-weight: 500; line-height: 1; color: var(--c-forest); }
.season-facts__head p { margin-top: 14px; font-size: 14px; color: var(--c-muted); }
.season-facts ul { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.season-facts li { padding-left: 18px; border-left: 2px solid var(--season-ink); font-size: 15.5px; line-height: 1.6; }
.season-facts__src { margin-top: 8px; font-size: 12px; color: var(--c-muted); }
.season-facts__src a { border-bottom: 1px solid currentColor; transition: color var(--dur-fast) ease; }
.season-facts__src a:hover { color: var(--c-maple-deep); }

/* Year at a glance */
.season-year {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: var(--section-pad) var(--gutter);
  background: var(--c-ivory);
}
.season-year__head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--nav-h-solid) + 40px); }
.season-year__head .display-lg { font-size: clamp(54px, 4.6vw, 88px); margin-bottom: 28px; color: var(--c-forest); }
.season-year__head .lede { font-size: 17px; color: var(--c-muted); }
.year-legend { display: grid; gap: 10px; margin-top: 36px; font-size: 13px; }
.year-legend li { display: flex; align-items: center; gap: 14px; }
.year-legend .year-dot { flex: none; }
.season-year__table { grid-column: 6 / 13; }
.year-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.year-table thead th {
  padding: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-forest);
}
.year-table thead .year-table__exp { text-align: left; }
.year-table td { width: 13%; text-align: center; border-bottom: 1px solid var(--line-dark); transition: background-color 0.6s ease; }
.year-table tbody th { padding: 12px 0; text-align: left; font-weight: 600; border-bottom: 1px solid var(--line-dark); }
.year-table tbody th a { display: flex; align-items: baseline; gap: 14px; transition: color var(--dur-fast) ease; }
.year-table tbody th a:hover { color: var(--c-maple-deep); }
.year-num { min-width: 24px; font-family: var(--f-display); font-size: 17px; font-style: italic; color: var(--c-maple-deep); }
.year-group th {
  padding: 34px 0 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.year-group th .cat-dot { margin-right: 10px; }
.year-group:first-child th { padding-top: 22px !important; }
/* The season on screen is highlighted in the table */
[data-active="spring"] [data-col="spring"],
[data-active="summer"] [data-col="summer"],
[data-active="autumn"] [data-col="autumn"],
[data-active="winter"] [data-col="winter"] { background: var(--season-tint); }
[data-active="spring"] thead [data-col="spring"],
[data-active="summer"] thead [data-col="summer"],
[data-active="autumn"] thead [data-col="autumn"],
[data-active="winter"] thead [data-col="winter"] { color: var(--season-ink); }
/* Ordinal dots: one hue, size carries the level (never colour alone) */
.year-dot { display: inline-block; vertical-align: middle; border-radius: 50%; }
.year-dot--3 { width: 18px; height: 18px; background: var(--c-forest); }
.year-dot--2 { width: 12px; height: 12px; background: var(--c-forest); opacity: 0.7; }
.year-dot--1 { width: 8px; height: 8px; border: 1.5px solid var(--c-forest); opacity: 0.6; }
.year-dot--0 { width: 12px; height: 1.5px; border-radius: 0; background: var(--c-muted); opacity: 0.5; }
/* "Possible*": a different offer in that season, explained under the legend */
.year-mark { margin-left: 3px; font-size: 12px; font-weight: 700; color: var(--c-maple); vertical-align: top; }
.year-notes { display: grid; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.year-note { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.55; color: var(--c-muted); }
.year-note .year-mark { margin: 0; }
.year-legend__alt { flex: none; display: inline-flex; align-items: flex-start; }
.year-note strong { display: block; margin-bottom: 2px; color: var(--c-forest); font-weight: 700; }
.year-note__src { display: block; margin-top: 4px; font-size: 11.5px; }
.year-note__src a { border-bottom: 1px solid rgba(91, 97, 92, 0.45); }

/* Closing band shared by the new pages */
.page-next {
  --accent: var(--c-maple-light);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 120px var(--gutter);
  background: var(--c-forest-deep);
  color: var(--c-ivory);
}
.page-next .display-md { max-width: 14em; }
.page-next__links { display: flex; align-items: center; gap: 30px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .season-hero__bg img { transform: none; transition: opacity 0.6s ease; }
  .season-hero__name span,
  .season-grid .xcard { animation: fadeIn 0.6s ease both; }
}


/* =========================================================
   23. MY FAVOURITES — favourites.html
   ========================================================= */
.favs [hidden] { display: none !important; }
.favs-head { min-height: 62vh; }
.favs-head__heart {
  position: absolute;
  right: -3vw; top: 50%;
  z-index: -1;
  width: 44vw; height: 44vw;
  max-height: 120%;
  fill: none;
  stroke: rgba(224, 130, 107, 0.22);
  stroke-width: 0.25;
  transform: translateY(-46%);
  pointer-events: none;
}
.favs { padding: 110px var(--gutter) var(--section-pad); }
.favs__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 32px;
  margin-bottom: 64px;
  border-bottom: 1px solid var(--c-forest);
}
.favs__title { font-family: var(--f-display); font-size: clamp(40px, 3.4vw, 60px); font-weight: 500; line-height: 1; color: var(--c-forest); }
.favs__hint { margin-top: 10px; font-size: 14px; color: var(--c-muted); }
.favs__actions { display: flex; align-items: center; gap: 28px; flex: none; }
.favs__actions .link-arrow { color: var(--c-forest); }
.favs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 48px; }
.favs__grid .xcard { transition: opacity 0.4s ease, transform 0.4s var(--ease-out); }
.favs__grid .xcard.is-leaving { opacity: 0; transform: scale(0.96); }
.favs__storage { margin-top: 80px; font-size: 13px; color: var(--c-muted); }

.favs-empty {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: center;
}
.favs-empty__media { position: relative; grid-column: 1 / 7; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; background: var(--c-forest); }
.favs-empty__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.favs-empty__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 38, 31, 0.55) 0%, rgba(15, 38, 31, 0) 40%); }
.favs-empty__media figcaption { position: absolute; left: 28px; bottom: 24px; z-index: 1; color: var(--c-ivory); }
.favs-empty__text { grid-column: 8 / 13; }
.favs-empty__heart { width: 64px; height: 64px; margin-bottom: 30px; fill: none; stroke: var(--c-maple); stroke-width: 1.1; animation: heartBeat 2.6s ease-in-out infinite; }
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.12); }
  24%      { transform: scale(1); }
}
.favs-empty__text .display-md { color: var(--c-forest); }
.favs-empty__lede { max-width: 30em; margin: 24px 0 40px; font-size: 18px; color: var(--c-muted); }
.favs-empty__or { margin-top: 52px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted); }
.favs-empty__links { margin-top: 8px; border-top: 1px solid var(--line-dark); }
.favs-empty__links li { border-bottom: 1px solid var(--line-dark); }
.favs-empty__links .link-arrow { display: flex; justify-content: space-between; padding: 16px 0; color: var(--c-forest); }

@media (prefers-reduced-motion: reduce) {
  .favs-empty__heart { animation: none; }
  .favs__grid .xcard.is-leaving { transform: none; }
}


/* =========================================================
   24. TRAVEL GUIDE — travel-guide.html
   Editorial chapters: big number + title, then short items
   (icon or key figure · title · text · official source).
   ========================================================= */
.guide-head { min-height: 72vh; }
.guide-head .stats__num { font-size: clamp(56px, 4.4vw, 84px); }

.guide-index {
  padding: 56px var(--gutter) 48px;
  border-bottom: 1px solid var(--line-dark);
}
.guide-index ol {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line-dark);
}
.guide-index a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  height: 100%;
  padding: 22px 20px 22px 0;
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1.1;
  color: var(--c-forest);
  transition: color var(--dur-fast) ease, padding-left 0.5s var(--ease-out);
}
.guide-index a:hover { color: var(--c-maple-deep); padding-left: 8px; }
.guide-index__checked { margin-top: 20px; font-size: 13px; color: var(--c-muted); }

.guide-chapter { padding: var(--section-pad) var(--gutter); scroll-margin-top: var(--nav-h-solid); }
.guide-chapter--paper { background: var(--c-paper); }
.guide-chapter--dark { --accent: var(--c-maple-light); background: var(--c-forest-deep); color: var(--c-ivory); }
.guide-chapter__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
  margin-bottom: 80px;
}
.guide-chapter__num {
  grid-column: 1 / 4;
  font-family: var(--f-display);
  font-size: clamp(170px, 15vw, 280px);
  font-weight: 500;
  line-height: 0.74;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-maple);
}
.guide-chapter__head > div { grid-column: 4 / 11; }
.guide-chapter__head .display-md { color: var(--c-forest); margin-bottom: 22px; }
.guide-chapter__head .lede { color: var(--c-muted); }
.guide-chapter--dark .guide-chapter__head .display-md { color: var(--c-ivory); }
.guide-chapter--dark .guide-chapter__head .lede { color: rgba(244, 240, 232, 0.78); }
.guide-chapter--dark .guide-chapter__num { -webkit-text-stroke-color: var(--c-maple-light); }
.guide-chapter__more { margin-top: 64px; color: var(--c-forest); }

.guide-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 48px; }
.guide-items--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-item { padding-top: 26px; border-top: 1px solid var(--c-forest); }
.guide-item__icon { width: 36px; height: 36px; margin-bottom: 22px; fill: none; stroke: var(--c-maple-deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.guide-item__fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 16px; }
.guide-item__fig strong { font-family: var(--f-display); font-size: 68px; font-weight: 500; line-height: 0.9; color: var(--c-maple-deep); }
.guide-item__fig span { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.guide-item__title { font-family: var(--f-display); font-size: 28px; font-weight: 500; line-height: 1.1; color: var(--c-forest); }
.guide-item__text { margin-top: 12px; font-size: 15px; line-height: 1.65; }
.guide-item__src { margin-top: 16px; font-size: 12px; line-height: 1.55; color: var(--c-muted); }
.guide-item__src span { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.guide-item__src a { border-bottom: 1px solid rgba(91, 97, 92, 0.45); transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.guide-item__src a:hover { color: var(--c-maple-deep); border-color: currentColor; }
.guide-item__src--advice { font-style: italic; }

/* Weather: climate normals as a figure */
.guide-weather { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start; }
.guide-normals { grid-column: 1 / 5; padding: 36px 36px 32px; background: var(--c-forest); color: var(--c-ivory); }
.guide-weather .guide-items { grid-column: 6 / 13; }
.guide-normals__kicker { margin-bottom: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 240, 232, 0.6); }
.guide-normals__title { font-family: var(--f-display); font-size: 30px; font-weight: 500; line-height: 1.1; }
.guide-normals__legend { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(244, 240, 232, 0.7); }
.guide-normals__legend span { font-weight: 700; color: var(--c-ivory); }
/* Four seasons: name + months on the left, typical range on the right, thin rules between */
.guide-normals__seasons { margin: 24px 0 26px; border-top: 1px solid var(--line-light); }
.guide-season {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-light);
}
/* Second level: what else can happen in that season (quieter) */
.guide-season__more { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: rgba(244, 240, 232, 0.66); }
.guide-season__more strong { font-weight: 700; color: rgba(244, 240, 232, 0.9); }
.guide-season dt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-season__name { font-family: var(--f-display); font-size: 25px; font-weight: 500; line-height: 1; }
.guide-season__months { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 240, 232, 0.55); }
.guide-season__range { flex: none; font-family: var(--f-display); font-size: clamp(34px, 2.6vw, 44px); font-weight: 500; line-height: 1; white-space: nowrap; }
.guide-season__range small { font-size: 0.42em; margin-left: 3px; color: var(--c-sand); }
.guide-season__approx { margin-right: 6px; font-size: 0.6em; color: rgba(244, 240, 232, 0.55); }
.guide-season__dash { margin: 0 6px; font-size: 0.6em; color: rgba(244, 240, 232, 0.45); }
/* Current season (device date): maple rule on the left + small label */
.guide-season.is-current { padding-left: 18px; }
.guide-season.is-current::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; background: var(--c-maple-light); }
.guide-season__now { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-maple-light); }
.guide-season__now::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.guide-normals .guide-item__text { color: rgba(244, 240, 232, 0.82); }
.guide-normals .guide-item__src { color: rgba(244, 240, 232, 0.6); }
.guide-normals .guide-item__src a { border-color: rgba(244, 240, 232, 0.35); }
.guide-normals .guide-item__src a:hover { color: var(--c-maple-light); }

/* Distances: diagram + matrix */
.guide-distances { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start; }
.guide-distances__map { grid-column: 1 / 7; padding: 12px; border: 1px solid var(--line-light); background:
  linear-gradient(rgba(244, 240, 232, 0.05) 1px, transparent 1px) 0 0 / 100% 25%,
  linear-gradient(90deg, rgba(244, 240, 232, 0.05) 1px, transparent 1px) 0 0 / 25% 100%, var(--c-forest); }
.guide-map { display: block; width: 100%; height: auto; overflow: visible; }
.guide-map__links line { stroke: rgba(233, 205, 186, 0.5); stroke-width: 1; stroke-dasharray: 4 5; }
.guide-map__region circle { fill: var(--c-maple); stroke: var(--c-forest); stroke-width: 3; }
.guide-map__region text { fill: var(--c-ivory); font: 700 11px var(--f-sans); letter-spacing: 0.12em; text-transform: uppercase; paint-order: stroke; stroke: var(--c-forest); stroke-width: 4px; }
.guide-map__n { fill: rgba(244, 240, 232, 0.6); font: italic 18px var(--f-display); }
.guide-map__legend { display: flex; align-items: center; gap: 14px; margin: 14px 8px 4px; font-size: 13px; color: rgba(244, 240, 232, 0.75); }
.guide-map__line { flex: none; width: 34px; border-top: 1px dashed rgba(233, 205, 186, 0.8); }
.guide-distances__table { grid-column: 8 / 13; }
.guide-distances__table .btn { margin-top: 40px; }
.guide-matrix { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.guide-matrix caption { margin-bottom: 18px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 240, 232, 0.65); }
.guide-matrix thead th { height: 150px; padding: 0 0 10px; vertical-align: bottom; font-weight: 600; }
.guide-matrix thead th span { display: inline-block; max-width: 150px; font-size: 11.5px; line-height: 1.25; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; color: rgba(244, 240, 232, 0.8); }
.guide-matrix tbody th { padding: 10px 14px 10px 0; text-align: left; font-size: 13px; font-weight: 600; white-space: nowrap; border-top: 1px solid var(--line-light); }
.guide-matrix td { padding: 10px 6px; text-align: center; border-top: 1px solid var(--line-light); }
.guide-matrix td.is-self { color: rgba(244, 240, 232, 0.3); }
.guide-matrix td.is-far { color: rgba(244, 240, 232, 0.42); background: rgba(196, 85, 61, 0.14); }
.guide-matrix__legend { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; color: rgba(244, 240, 232, 0.75); }
.guide-matrix__swatch { width: 18px; height: 14px; background: rgba(196, 85, 61, 0.35); }
.guide-matrix__note { margin-top: 8px; font-size: 12.5px; color: rgba(244, 240, 232, 0.55); }


/* =========================================================
   25. CREDITS & REFERENCES — credits.html
   ========================================================= */
.credits {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: 100px var(--gutter) var(--section-pad);
}
.credits-index { grid-column: 1 / 4; align-self: start; position: sticky; top: calc(var(--nav-h-solid) + 36px); }
.credits-index ol { border-top: 1px solid var(--line-dark); }
.credits-index a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.15;
  color: var(--c-forest);
  transition: color var(--dur-fast) ease, padding-left 0.5s var(--ease-out);
}
.credits-index a:hover { color: var(--c-maple-deep); padding-left: 8px; }
.credits-body { grid-column: 5 / 13; min-width: 0; }
.credits-section { padding-bottom: 110px; scroll-margin-top: calc(var(--nav-h-solid) + 30px); }
.credits-section .display-md { display: flex; align-items: baseline; gap: 22px; color: var(--c-forest); margin-bottom: 26px; }
.credits-section__num { font-size: 0.5em; font-style: italic; color: var(--c-maple-deep); }
.credits-section__lede { max-width: 44em; font-size: 16.5px; line-height: 1.7; }
.credits-callout { max-width: 44em; margin-top: 22px; padding: 16px 20px; border-left: 2px solid var(--c-maple); background: var(--c-paper); font-size: 14.5px; line-height: 1.6; }
.credits-sub {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 52px 0 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-forest);
}
.credits-sub span { font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-muted); }
.credits-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.credits-table th { padding: 0 12px 10px 0; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); border-bottom: 1px solid var(--c-forest); }
.credits-table td { padding: 10px 12px 10px 0; vertical-align: top; border-bottom: 1px solid var(--line-dark); }
.credits-table td:nth-child(3) { font-weight: 600; }
.credits-file { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--c-muted); word-break: break-all; }
.credits-table a,
.credits-apa a { border-bottom: 1px solid rgba(91, 97, 92, 0.45); transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.credits-table a:hover,
.credits-apa a:hover { color: var(--c-maple-deep); border-color: currentColor; }
.credits-apa { max-width: 52em; }
.credits-apa li {                     /* APA hanging indent */
  margin-bottom: 14px;
  padding-left: 2.2em;
  text-indent: -2.2em;
  font-size: 14.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}


/* =========================================================
   99. RESPONSIVE — tablets and phones
   ---------------------------------------------------------
   The desktop design (≥ 1280px) is the reference and is not
   changed here: every rule lives inside a max-width query (or
   a touch-only query), so wide screens keep sections 00–25.

   ≤ 1279px  compact navigation: Menu button + full-height panel
   ≤ 1199px  tablets (portrait and landscape) and phones: tokens shrink, the
             12-column compositions become vertical editorial
             sequences (photo · text · secondary photo)
   ≤  767px  phones: one column, wide data scrolls sideways
   ≤  389px  small phones (360px)

   99.1 Compact navigation      99.6 Plan Your Trip
   99.2 Tokens + Home           99.7 Seasons + Favourites
   99.3 World pages             99.8 Travel Guide + Credits
   99.4 Find Your Ontario       99.9 Phones · small phones
   99.5 Explore Map             99.10 Touch screens + motion
   ========================================================= */

/* ---------------------------------------------------------
   99.1 COMPACT NAVIGATION (≤ 1279px)
   The same <nav> as on desktop, shown as a panel under the
   bar (js/main.js: initCompactNav). Explore and Plan are
   accordions (their buttons keep aria-expanded).
   --------------------------------------------------------- */
.nav-toggle { display: none; }

@media (max-width: 1279px) {
  :root {
    --nav-h: 76px;
    --nav-h-solid: 64px;
  }

  .site-header__inner {
    gap: 6px;
    padding: 0 var(--gutter);
  }
  .brand { margin-right: auto; padding: 10px 0; }

  /* Bar: brand · ♡ · ES | EN · Menu */
  .nav-fav { order: 1; width: 44px; height: 44px; margin: 0; }
  .nav-fav__count { top: 2px; right: 0; }
  .lang-switch { order: 2; gap: 0; padding-left: 8px; }
  .lang-switch__btn {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    min-height: 44px;
    padding: 0 4px;
  }
  .lang-switch__btn::after { left: 9px; right: 9px; bottom: 8px; }
  .lang-switch--footer { padding-left: 0; }

  .nav-toggle {
    order: 3;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    animation: fadeDown 0.9s var(--ease-out) 0.7s both;
  }
  .nav-toggle__icon { position: relative; width: 24px; height: 12px; flex: none; }
  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    content: '';
    position: absolute;
    right: 0;
    height: 1.5px;
    background: currentColor;
    transition: top 0.45s var(--ease-out), width 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  }
  .nav-toggle__icon::before { top: 0; width: 100%; }
  .nav-toggle__icon::after { top: 10px; width: 64%; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 5px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 5px; width: 100%; transform: rotate(-45deg); }
  .nav-toggle:focus-visible { outline-offset: 0; }

  /* While the panel is open the bar is solid and the page is locked */
  .site-header.is-nav-open {
    height: var(--nav-h-solid);
    background-color: var(--c-forest-deep);
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .site-header.is-nav-open::after { transform: scaleX(1); }
  .site-header.is-nav-open .scroll-progress { opacity: 0; }
  html.nav-locked,
  html.nav-locked body { overflow: hidden; }

  /* Panel */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-h-solid));
    height: calc(100dvh - var(--nav-h-solid));
    margin: 0;
    padding: 6px var(--gutter) 40px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-forest-deep);
    color: var(--c-ivory);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 0.35s ease, transform 0.6s var(--ease-out), visibility 0s linear 0.6s;
  }
  .site-header.is-nav-open .main-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease, transform 0.6s var(--ease-out), visibility 0s;
  }
  .is-switching .site-header.is-nav-open .main-nav { opacity: 0.15; }
  .main-nav::after {                  /* outlined watermark, like the footer */
    content: 'ONTARIO';
    content: 'ONTARIO' / '';
    display: block;
    margin-top: 44px;
    font-family: var(--f-display);
    font-size: min(calc((100vw - 2 * var(--gutter)) / 5.4), 180px);
    font-weight: 500;
    line-height: 0.8;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1px rgba(244, 240, 232, 0.12);
    pointer-events: none;
    user-select: none;
  }

  .main-nav__list { display: block; counter-reset: navitem; }
  .main-nav__list > li {
    counter-increment: navitem;
    border-bottom: 1px solid var(--line-light);
  }
  .site-header.is-nav-open .main-nav__list > li { animation: navItemIn 0.7s var(--ease-out) both; }
  .site-header.is-nav-open .main-nav__list > li:nth-child(1) { animation-delay: 0.05s; }
  .site-header.is-nav-open .main-nav__list > li:nth-child(2) { animation-delay: 0.1s; }
  .site-header.is-nav-open .main-nav__list > li:nth-child(3) { animation-delay: 0.15s; }
  .site-header.is-nav-open .main-nav__list > li:nth-child(4) { animation-delay: 0.2s; }
  .site-header.is-nav-open .main-nav__list > li:nth-child(5) { animation-delay: 0.25s; }
  .main-nav .nav-menu li { animation: none; }

  .main-nav__link,
  .main-nav__link--feature {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 68px;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    font-family: var(--f-display);
    font-size: clamp(30px, 7.6vw, 42px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    opacity: 1;
  }
  .main-nav__link::before {           /* 01 … 05, like the site's indexes */
    content: counter(navitem, decimal-leading-zero);
    flex: none;
    min-width: 30px;
    font-size: 17px;
    font-style: italic;
    color: var(--c-maple-light);
  }
  .main-nav__link::after { display: none; }
  .main-nav__link:hover { opacity: 1; color: var(--c-maple-light); }
  .main-nav__link[aria-current="page"],
  .main-nav__toggle.has-current { color: var(--c-maple-light); }
  .main-nav__link--feature:hover,
  .main-nav__link--feature[aria-current="page"] { background: none; color: var(--c-maple-light); }
  .main-nav__link--feature .pulse-dot { order: 2; }
  .main-nav__link--feature > span:last-child { order: 1; }
  .main-nav__link:focus-visible { outline-offset: -2px; }

  .main-nav__caret {
    width: 11px;
    height: 11px;
    margin: -6px 4px 0 auto;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
  }
  .main-nav__group.is-open .main-nav__caret { margin-top: 6px; }

  /* Accordion content */
  .nav-menu,
  .nav-menu--single {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    width: auto;
    padding: 0 0 26px 46px;
    background: none;
    color: var(--c-ivory);
    box-shadow: none;
    transform: none;
    animation: navSubIn 0.5s var(--ease-out) both;
  }
  .nav-menu::before,
  .nav-menu::after { display: none; }
  .nav-menu__title { color: var(--c-maple-light); }
  .nav-menu__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
    padding: 10px 0;
    border-bottom-color: var(--line-light);
  }
  .nav-menu li:last-child .nav-menu__link { border-bottom: 0; }
  .nav-menu__name { font-size: 24px; color: var(--c-ivory); }
  .nav-menu__hint { color: rgba(244, 240, 232, 0.62); }
  .nav-menu__link:hover .nav-menu__name,
  .nav-menu__link[aria-current="page"] .nav-menu__name { color: var(--c-maple-light); }
  .nav-menu__link[aria-current="page"] .nav-menu__name::before { background: var(--c-maple-light); }

  @keyframes navItemIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes navSubIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Narrow desktops / tablets in landscape: the distance matrix keeps to its column */
@media (max-width: 1279px) {
  .guide-distances__table [data-guide-matrix] { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
  .guide-matrix tbody th { white-space: normal; line-height: 1.3; }
}

/* Tablets: Explore shows its two groups side by side */
@media (min-width: 640px) and (max-width: 1279px) {
  .nav-menu:not(.nav-menu--single) { grid-template-columns: 1.3fr 1fr; gap: 40px; }
  .main-nav { padding-top: 18px; }
}

/* Phones: the bar only shows ONTARIO, ♡, ES | EN and the icon */
@media (max-width: 599px) {
  .brand__name { display: none; }
  .brand__mark { font-size: 24px; letter-spacing: 0.2em; }
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}


/* ---------------------------------------------------------
   99.2 TOKENS + HOME (≤ 1199px)
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  :root {
    --gutter: clamp(20px, 5.2vw, 44px);
    --col-gap: 12px;
    --section-pad: clamp(80px, 13vw, 120px);
    --fs-lede: 18px;
    --fs-display-xl: clamp(46px, 11.6vw, 88px);
    --fs-display-lg: clamp(42px, 10.4vw, 78px);
    --fs-display-md: clamp(34px, 8vw, 56px);
    --nav-h: 68px;
    --nav-h-solid: 60px;
  }
  .eyebrow { gap: 12px; margin-bottom: 24px; }
  .eyebrow::before { width: 32px; }
  .btn { gap: 16px; padding: 18px 26px; }
  .btn--large { padding: 22px 32px; }

  /* Hero (Home + world pages) */
  .hero {
    height: 100vh;
    height: 100svh;
    min-height: 600px;
  }
  .hero__inner { padding: calc(var(--nav-h) + 24px) var(--gutter) 24px; }
  .hero__word { font-size: calc((100vw - 2 * var(--gutter)) * 0.2); }
  /* World names fill the line: --len = letters of the word in each language */
  .hero__word--text {
    font-size: min(calc((100vw - 2 * var(--gutter)) / (var(--len, 9) * 0.7)), 150px);
    letter-spacing: 0.01em;
  }
  [data-page="nature"] { --len: 6; }
  [data-page="culture"] { --len: 7; }
  [data-page="flavours"] { --len: 8; }
  [data-page="adventure"] { --len: 9; }
  :lang(es) [data-page="nature"] { --len: 10; }
  :lang(es) [data-page="flavours"] { --len: 7; }
  :lang(es) [data-page="adventure"] { --len: 8; }
  .hero__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px 24px;
    margin-top: 24px;
    padding-top: 24px;
  }
  .hero__tagline { grid-column: 1 / -1; font-size: clamp(26px, 6.6vw, 40px); }
  .hero__pillars { align-self: center; padding-bottom: 0; font-size: 12px; line-height: 1.6; }
  .hero__bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 20px;
    margin-top: 28px;
  }
  .hero__bottom .scroll-cue { display: none; }
  .hero__concept { font-size: 18px; }
  .hero__bottom .photo-caption { max-width: 22em; text-align: right; }
  .page-stats { gap: 28px; }
  .page-stats strong { font-size: 44px; }

  /* Concept: the diptych stays, the text moves under it */
  .concept__stage {
    --photo-h: clamp(320px, 86vw, 600px);
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }
  .concept__half { min-height: var(--photo-h); }
  .concept__half figcaption { top: 18px; left: var(--gutter); }
  .concept__half--city figcaption { left: auto; right: var(--gutter); }
  .concept__stage::after {
    bottom: auto;
    height: var(--photo-h);
    background: linear-gradient(0deg, var(--c-forest-deep) 0%, rgba(15, 38, 31, 0.6) 24%, rgba(15, 38, 31, 0) 52%, rgba(15, 38, 31, 0.3) 100%);
  }
  .concept__big {
    top: calc(var(--photo-h) * 0.2);
    font-size: clamp(150px, 46vw, 320px);
  }
  .concept__text {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: 1 / -1;
    display: block;
    margin-top: -64px;
    padding: 0 var(--gutter);
  }
  .concept__text .display-xl { margin-bottom: 30px; }
  .concept__copy { gap: 16px; max-width: 36em; padding-bottom: 0; }
  .concept__copy .lede { font-size: 18px; }
  .concept__copy p:last-child { font-size: 16px; }

  /* Six regions: a grid of photographs */
  .regions { padding: 72px 0 0; }
  .regions__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
    min-height: 0;
  }
  .regions__list li { aspect-ratio: 4 / 5; padding: 18px 16px; font-size: 15px; }

  /* Section heads */
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 64px;
  }
  .section-head__lede { justify-self: start; }

  /* --- Four worlds: one editorial sequence that alternates side by side.
     01 Nature → right · 02 Culture → left · 03 Flavours → right · 04 Adventure → left
     (Nature keeps the side of its desktop panel; Adventure keeps its desktop side.)
     "Leaning" to a side means: the text block aligns to that side and keeps a
     wider inner margin (--lean) on the other; the main photo and the secondary
     photos bleed to that side; the big number sits in that corner. Text never
     goes past the gutters. --- */
  .world {
    --lean: clamp(36px, 12vw, 150px);
    margin-bottom: 112px;
  }
  .world__num { z-index: 3; font-size: clamp(150px, 42vw, 300px); -webkit-text-stroke-color: rgba(244, 240, 232, 0.55); }
  .world__body { container-type: inline-size; }
  /* Titles: large, and only smaller when the word would not fit its column
     (--tlen = letters of the title in each language) */
  .world__title { font-size: clamp(54px, 14vw, 96px); }
  .world__title { font-size: min(clamp(54px, 14vw, 96px), 100cqi / (var(--tlen, 9) * 0.64)); }
  .world--nature    { --tlen: 6; }
  .world--culture   { --tlen: 7; }
  .world--flavours  { --tlen: 8; }
  .world--adventure { --tlen: 9; }
  :lang(es) .world--nature    { --tlen: 10; }
  :lang(es) .world--flavours  { --tlen: 7; }
  :lang(es) .world--adventure { --tlen: 8; }
  .world__subtitle { margin-top: 14px; font-size: 21px; }
  .world__text { margin-top: 20px; }
  .world__subs { margin: 28px 0 24px; }
  .world__subs a { min-height: 52px; padding: 14px 0; }
  .world__body .link-arrow { min-height: 48px; }
  .world__shot-cap { right: 14px; }

  /* 01 Nature → RIGHT: the falls · the ivory panel climbs onto them from the
     right · forest lake bleeding right, beach overlapping on the left */
  .world--nature { margin-bottom: 112px; }
  .world--nature .world__media { height: clamp(380px, 112vw, 660px); min-height: 0; }
  .world--nature .world__media::after {
    background:
      linear-gradient(180deg, rgba(23, 26, 24, 0.42) 0%, rgba(23, 26, 24, 0) 26%),
      linear-gradient(0deg, rgba(23, 26, 24, 0.45) 0%, rgba(23, 26, 24, 0) 45%);
  }
  .world--nature .world__caption { top: 24px; left: var(--gutter); max-width: 55%; line-height: 1.5; }
  .world--nature .world__num { top: 64px; right: calc(var(--gutter) - 0.06em); }
  .world--nature .world__body {
    grid-column: 1 / -1;
    margin: -80px calc(-1 * var(--gutter)) 0 max(var(--lean), calc(100% - 800px));
    padding: 36px var(--gutter) 0 28px;
  }
  .world--nature .world__stage {
    grid-column: 1 / -1;
    grid-row: 3;
    height: clamp(320px, 92vw, 600px);
    min-height: 0;
    margin: 64px calc(-1 * var(--gutter)) 0;
  }
  .world--nature .world__stage-main { inset: 0 0 16% 22%; }
  .world--nature .world__stage-main .world__shot-cap { left: auto; right: 16px; max-width: 44%; text-align: right; }
  .world--nature .world__stage-detail { left: var(--gutter); right: auto; bottom: 0; width: 54%; height: 46%; }

  /* 02 Culture → LEFT: the CN Tower bleeds left, Casa Loma over its inner
     corner · text aligned left · the museum bleeds left beside the square */
  .world--culture { margin-bottom: 136px; }
  .world--culture::before { top: -64px; bottom: -72px; }
  .world--culture .world__shot--cntower {
    grid-column: 1 / 9;
    grid-row: 1;
    height: clamp(420px, 124vw, 720px);
    min-height: 0;
  }
  .world--culture .world__detail {
    grid-column: 7 / 13;
    grid-row: 1;
    height: 40%;
    min-height: 0;
    margin: 0 0 -48px;
  }
  .world--culture .world__num { top: 48px; right: auto; left: calc(var(--gutter) - 0.06em); }
  .world--culture .world__body { grid-column: 1 / -1; grid-row: 2; padding: 96px max(var(--lean), calc(100% - 760px)) 56px 0; }
  .world--culture .world__media,
  .world__media-2 { grid-row: 3; height: clamp(240px, 72vw, 460px); min-height: 0; }
  .world--culture .world__media { grid-column: 1 / 9; margin: 0 0 0 calc(-1 * var(--gutter)); }
  .world__media-2 { grid-column: 9 / 13; margin: 0; }
  .world__media-2 .world__shot-cap { line-height: 1.5; }

  /* 03 Flavours → RIGHT: the market bleeds right (an inner margin on the left),
     the peameal sandwich overlaps its left edge · text aligned right ·
     Kensington + a wider Stratford bleeding right */
  .world--flavours { margin-bottom: 112px; }
  .world--flavours .world__media {
    grid-column: 2 / -1;
    grid-row: 1;
    height: clamp(380px, 108vw, 640px);
    min-height: 0;
    margin: 0 calc(-1 * var(--gutter)) 0 0;
  }
  .world--flavours .world__detail {
    grid-column: 1 / 8;
    grid-row: 1;
    height: 36%;
    min-height: 0;
    margin: 0 0 -52px;
  }
  .world--flavours .world__caption { left: auto; right: var(--gutter); max-width: 44%; line-height: 1.5; text-align: right; }
  .world--flavours .world__num { top: 40px; right: calc(var(--gutter) - 0.06em); }
  .world--flavours .world__body { grid-column: 1 / -1; grid-row: 2; align-self: start; padding: 96px 0 56px max(var(--lean), calc(100% - 760px)); }
  .world__pair {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: 1fr 1.3fr;
    margin: 0 calc(-1 * var(--gutter)) 0 0;
  }
  .world__pair figure { height: clamp(210px, 60vw, 400px); min-height: 0; }
  .world__pair .world__shot-cap { line-height: 1.5; }

  /* 04 Adventure → LEFT: the photo opens · Wonderland bleeds left and the zoo
     follows lower over its edge · text aligned left · the aquarium closes the
     chapter, bleeding left */
  .world--adventure { margin-bottom: 0; padding: 0 var(--gutter) 112px; }
  .world--adventure .world__media {
    grid-column: 1 / -1;
    grid-row: 1;
    height: clamp(440px, 118vw, 720px);
    min-height: 0;
    margin: 0 calc(-1 * var(--gutter));
  }
  .world--adventure .world__media::after {
    background:
      linear-gradient(180deg, rgba(15, 38, 31, 0.45) 0%, rgba(15, 38, 31, 0) 24%),
      linear-gradient(0deg, var(--c-forest-deep) 0%, rgba(15, 38, 31, 0.55) 26%, rgba(15, 38, 31, 0) 56%);
  }
  .world--adventure .world__caption { top: 28px; bottom: auto; left: auto; right: var(--gutter); max-width: 50%; text-align: right; line-height: 1.5; }
  .world--adventure .world__num { top: 72px; bottom: auto; right: auto; left: calc(var(--gutter) - 0.06em); }
  .world--adventure .world__shot {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    align-self: start;
    width: auto;
    margin: 0;
  }
  .world--adventure .world__shot--wonderland {
    grid-column: 1 / 7;
    grid-row: 2;
    aspect-ratio: 3 / 4;
    margin: -34vw 0 0 calc(-1 * var(--gutter));
  }
  .world--adventure .world__shot--zoo {
    grid-column: 7 / 12;
    grid-row: 2;
    aspect-ratio: 3 / 4;
    margin-top: -14vw;
  }
  .world--adventure .world__body { grid-column: 1 / -1; grid-row: 3; align-self: start; padding: 64px max(var(--lean), calc(100% - 760px)) 0 0; }
  .world--adventure .world__shot--aquarium {
    grid-column: 1 / 11;
    grid-row: 4;
    aspect-ratio: 3 / 2;
    margin: 64px 0 0 calc(-1 * var(--gutter));
  }

  /* Photo bridges */
  .bleed { height: clamp(460px, 124vw, 720px); min-height: 0; }
  .bleed--bridge { margin-bottom: 72px; }
  .bleed--taste { margin-bottom: 84px; }
  .bleed__content { padding: 0 var(--gutter) 84px; }
  .bleed__caption { left: var(--gutter); right: var(--gutter); bottom: 32px; line-height: 1.6; }

  /* Marquee */
  .marquee { padding: 28px 0; }
  .marquee__track li { padding: 0 22px; font-size: clamp(28px, 6vw, 40px); }
  .marquee__track li::after { margin-left: 40px; }

  /* Find Your Ontario promo: text, then the question card */
  .fyo { display: block; }
  .fyo__bg {
    left: 0;
    bottom: auto;
    width: auto;
    height: 72%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
  }
  .fyo__mark { font-size: 130vw; }
  .fyo__content .display-xl { margin-bottom: 28px; }
  .fyo__lead { font-size: clamp(24px, 5.6vw, 30px); }
  .fyo__meta { gap: 32px; margin: 36px 0 40px; padding-top: 24px; }
  .fyo__meta div { flex-direction: column; justify-content: flex-start; }   /* figures on one line, labels may wrap */
  .fyo__meta dd { order: -1; font-size: 46px; }
  .fyo__preview { max-width: 620px; padding: 88px 0 0; }
  .teaser-ghost { left: 32px; right: -12px; padding: 20px 24px; }
  .teaser-ghost .teaser__question { font-size: 20px; }
  .teaser { padding: 30px 26px 28px; }
  .teaser__progress { margin: 16px 0 24px; }
  .teaser__question { font-size: clamp(26px, 6.4vw, 38px); }
  .teaser__options { gap: 8px; margin-top: 22px; }
  .teaser-option { min-height: 50px; gap: 14px; padding: 11px 14px; font-size: 15.5px; line-height: 1.4; }

  /* Map intro: text, then the schematic map */
  .map-intro { display: block; }
  .map-intro__content .display-xl { margin-bottom: 28px; }
  .stats { gap: 32px; margin-top: 44px; padding-top: 24px; }
  .stats__num { font-size: clamp(54px, 13vw, 88px); }
  .stats__caption { margin: 18px 0 36px; font-size: 20px; }
  .region-map { max-width: 640px; max-height: none; margin-top: 64px; justify-self: auto; }

  /* Plan band */
  .plan-band { display: block; padding: 80px var(--gutter) 88px; }
  .plan-band__links { margin-top: 34px; }
  .plan-band__links > p { margin-bottom: 26px; }
  .plan-band__links ul { flex-wrap: wrap; gap: 6px 30px; margin-top: 22px; }

  /* Footer */
  .site-footer { padding-top: 84px; }
  .site-footer__top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 44px 24px;
    padding-bottom: 56px;
  }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__motto { margin-top: 26px; font-size: clamp(30px, 6vw, 38px); }
  .site-footer__col ul { gap: 4px; }
  .footer-link { display: inline-block; padding: 9px 0; }
  .crumbs a { display: inline-block; padding: 12px 0; }
  .back-top { min-height: 44px; margin-top: 28px; }
  .site-footer__bottom { flex-direction: column; gap: 8px; }
  .site-footer__watermark { margin-top: 36px; }
}


/* ---------------------------------------------------------
   99.3 WORLD PAGES (≤ 1199px)
   Every experience becomes: photo → (detail photo over its
   edge) → text. Panels still overlap the photo where the
   desktop composition does (--a, --a-flip, --pano).
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  /* Intro */
  .world-intro { display: block; padding: var(--section-pad) var(--gutter) calc(var(--section-pad) * 0.75); }
  .world-intro--split { min-height: 0; padding: 0 var(--gutter) var(--section-pad); }
  .world-intro__media { min-height: 0; height: clamp(320px, 100vw, 600px); margin: 0 calc(-1 * var(--gutter)); }
  .world-intro__media figcaption { bottom: 20px; }
  .world-intro--split .world-intro__head { padding-top: 64px; }
  .world-intro--split .world-intro__body { padding: 28px 0 0; }
  .world-intro--split .display-xl { font-size: var(--fs-display-xl); }
  .chapters { margin-top: 40px; }
  .chapters a { gap: 16px; min-height: 60px; padding: 16px 0; font-size: 25px; }

  /* Contact sheet */
  .film { padding: 64px var(--gutter) 80px; }
  .film ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .film li:nth-child(even) { margin-top: 0; }
  .film li:nth-child(3n + 2) { margin-top: 40px; }
  .film__label { left: 12px; right: 12px; bottom: 12px; }
  .film__name { font-size: 19px; }

  /* Collection opener: the photo shows on top, the text below on its dark end */
  .collection__head {
    display: block;
    min-height: 0;
    padding: clamp(220px, 62vw, 400px) var(--gutter) 48px;
    margin-bottom: 72px;
  }
  .collection__head::after {
    background: linear-gradient(0deg, rgba(15, 38, 31, 0.96) 0%, rgba(15, 38, 31, 0.88) 48%, rgba(15, 38, 31, 0.3) 76%, rgba(15, 38, 31, 0.12) 100%);
  }
  .collection__intro .display-lg { margin-bottom: 22px; }
  .collection__list { max-width: 720px; margin-top: 40px; }
  .collection__intro,
  .world-intro__body,
  .chapters { max-width: 760px; }
  .collection__list a { min-height: 50px; padding: 13px 0; }
  .collection__num { top: 56px; font-size: clamp(150px, 44vw, 300px); }
  .collection__caption { top: 20px; }

  /* Experiences: one column */
  .exp {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    margin-bottom: 96px;
    --exp-air: 32px;
  }
  .exp:last-child { margin-bottom: 104px; }
  .exp .exp__media {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    height: clamp(300px, 86vw, 580px);
    min-height: 0;
    margin: 0 calc(-1 * var(--gutter));
  }
  .exp--c .exp__media,
  .exp--c-flip .exp__media { height: clamp(420px, 122vw, 760px); }
  .exp--pano .exp__media,
  .exp--wide .exp__media { height: clamp(260px, 72vw, 500px); }
  .exp--cine .exp__media { height: clamp(400px, 112vw, 680px); }
  .exp .exp__body {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin: 0;
    padding: 44px 0 0;
  }
  /* Panels that climb onto the photo (as on desktop, smaller) */
  .exp--a .exp__body,
  .exp--pano .exp__body {
    margin: -72px calc(-1 * var(--gutter)) 0 clamp(28px, 9vw, 96px);
    padding: 34px var(--gutter) 0 26px;
    background: var(--exp-bg);
  }
  .exp--a-flip .exp__body {
    margin: -72px clamp(28px, 9vw, 96px) 0 calc(-1 * var(--gutter));
    padding: 34px 26px 40px var(--gutter);
  }
  :is(.exp--b, .exp--b-flip, .exp--c, .exp--c-flip):has(> .world__shot) .exp__body { margin-bottom: 0; }
  .exp:is(.exp--a, .exp--pano):has(> .world__shot) .exp__body { margin: 0; padding: 44px 0 0; background: none; }
  .exp--a-flip:has(> .world__shot) .exp__body { margin-top: 32px; margin-right: 0; padding-right: 26px; }
  /* Captions: top left of every photo (panels and detail photos cover the
     bottom, the big number keeps the top right). !important overrides the
     desktop placement written inline on a few captions. */
  .exp .exp__caption {
    top: 18px;
    bottom: auto;
    left: var(--gutter) !important;
    right: auto !important;
    max-width: 58%;
    line-height: 1.5;
  }
  .exp .exp__media::after {
    background:
      linear-gradient(180deg, rgba(23, 26, 24, 0.45) 0%, rgba(23, 26, 24, 0) 28%),
      linear-gradient(0deg, rgba(23, 26, 24, 0.45) 0%, rgba(23, 26, 24, 0) 40%);
  }

  /* Detail photo: over the lower edge of the main photo */
  .exp > .world__shot {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    width: min(54%, 380px);
    margin-top: calc(-1 * clamp(72px, 20vw, 160px));
  }
  :is(.exp--a-flip, .exp--b-flip, .exp--c-flip) > .world__shot { justify-self: start; }

  /* Big number: on the top corner of the photo */
  .exp .exp__num {
    top: 20px;
    right: calc(var(--gutter) - 0.04em);
    bottom: auto;
    left: auto;
    z-index: 1;
    font-size: clamp(130px, 36vw, 260px);
    -webkit-text-stroke-color: rgba(244, 240, 232, 0.55);
  }
  .exp--cine .exp__num { top: 20px; translate: 0 var(--py, 0px); }

  .exp__index,
  .world__index { flex: none; white-space: nowrap; }     /* "04 ——" stays on one line */
  .exp__title { font-size: clamp(38px, 9.6vw, 62px); }
  .exp__place { margin-top: 12px; font-size: 20px; }
  .exp__text { margin-top: 20px; }
  .exp__why { margin-top: 24px; }
  .exp__why-text { font-size: 21px; }
  .exp__facts { gap: 16px 24px; margin-top: 28px; padding-top: 22px; }

  /* --cine: the text leaves the photo and sits on the dark band below it */
  .exp--cine { padding: 0 var(--gutter) 72px; background: var(--c-forest-deep); }
  .exp--cine .exp__media::after {
    background:
      linear-gradient(180deg, rgba(23, 26, 24, 0.45) 0%, rgba(23, 26, 24, 0) 28%),
      linear-gradient(0deg, var(--c-forest-deep) 0%, rgba(15, 38, 31, 0.4) 26%, rgba(15, 38, 31, 0) 52%);
  }
  .exp--cine .exp__body { padding: 8px 0 0; }
  .exp--cine:last-child { margin-bottom: 0; }

  /* --wide: text in one column, the second photo after it */
  .exp--wide .exp__body { display: block; padding-top: 44px; }
  .exp__aside {
    min-height: 0;
    aspect-ratio: 3 / 2;
    margin: 40px 0 0 calc(-1 * var(--gutter));
  }
  .exp--wide .exp__num { left: auto; }

  /* Next world */
  .world-next {
    display: block;
    min-height: 0;
    padding: clamp(220px, 62vw, 400px) var(--gutter) 64px;
  }
  /* Next world: large, only smaller when the word would not fit
     (--nlen = letters of the NEXT world on each page, per language) */
  .world-next__title { gap: 8px 26px; font-size: clamp(56px, 15vw, 116px); }
  .world-next__title { font-size: min(clamp(56px, 15vw, 116px), (100vw - 2 * var(--gutter)) / (var(--nlen, 9) * 0.68)); }
  [data-page="nature"]    { --nlen: 7; }
  [data-page="culture"]   { --nlen: 8; }
  [data-page="flavours"]  { --nlen: 9; }
  [data-page="adventure"] { --nlen: 6; }
  :lang(es) [data-page="culture"]   { --nlen: 7; }
  :lang(es) [data-page="flavours"]  { --nlen: 8; }
  :lang(es) [data-page="adventure"] { --nlen: 10; }
  .world-next__title .arrow { width: 48px; }
  .world-next__link:hover .arrow { width: 72px; }
  .world-next__sub { margin-top: 18px; font-size: 22px; }
  .worlds-nav { flex-wrap: wrap; gap: 18px 36px; margin-top: 64px; }
  .worlds-nav ol { flex-wrap: wrap; gap: 4px 30px; }
  .worlds-nav a { min-height: 44px; align-items: center; }
  .worlds-nav .link-arrow { margin-left: 0; }

  /* Page bands shared by map, favourites, guide, credits */
  .atlas-head {
    display: block;
    min-height: 0;
    padding: calc(var(--nav-h) + 72px) var(--gutter) 56px;
  }
  .atlas-head__side { margin-top: 30px; max-width: 40em; }
  .atlas-head__side .lede { font-size: 17.5px; }
  .atlas-head__side .stats { margin-top: 32px; }
  .atlas-head__side .stats__num { font-size: clamp(48px, 11vw, 72px); }
  .atlas-head__caption { top: calc(var(--nav-h) + 16px); }
  .atlas-head--plain { min-height: 0; }

  .page-next {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    padding: 88px var(--gutter);
  }
  .page-next__links { flex-wrap: wrap; gap: 14px 30px; }
}


/* ---------------------------------------------------------
   99.4 FIND YOUR ONTARIO (≤ 1199px) — also the planner steps
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  .quiz {
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    overflow: clip;                    /* lets the Back / Continue bar stick */
  }
  .quiz__stage {
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-h) + 28px) var(--gutter) 0;
  }
  .quiz__shade {
    background:
      linear-gradient(180deg, rgba(15, 38, 31, 0.78) 0%, rgba(15, 38, 31, 0.62) 50%, rgba(15, 38, 31, 0.9) 100%);
  }

  /* Intro */
  .quiz-intro { display: block; padding-bottom: 40px; }
  .quiz-intro__mark { top: -0.04em; font-size: clamp(300px, 92vw, 640px); }
  .quiz-intro__head .display-xl { font-size: clamp(60px, 16vw, 128px); }
  .quiz-intro__body { margin-top: 36px; max-width: 36em; padding-bottom: 0; }
  .quiz-intro__body .lede { font-size: 18px; }
  .quiz-intro__body .fyo__meta { margin: 32px 0 36px; }
  .quiz-intro__caption { margin-top: 40px; }

  /* Question: top · title · options · sticky Back / Continue */
  .quiz-q {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-content: start;
    row-gap: 30px;
  }
  .quiz-q__top { gap: 20px; }
  .quiz-q__num { font-size: clamp(260px, 76vw, 560px); bottom: auto; top: 30%; }
  .quiz-q__head,
  .quiz-q__options { grid-column: 1; align-self: start; }
  .quiz-q__head .eyebrow { margin-bottom: 18px; }
  .quiz-q__title { font-size: clamp(34px, 8.6vw, 60px); line-height: 1.02; }
  .quiz-q__keys { margin-top: 18px; }
  .quiz-q__options { gap: 8px; }
  .quiz-option {
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    gap: 14px;
    min-height: 64px;
    padding: 12px 14px;
  }
  .quiz-option__key { width: 36px; height: 36px; font-size: 11.5px; }
  .quiz-option__label { font-size: clamp(21px, 5.2vw, 26px); }
  .quiz-option__hint { font-size: 13.5px; }
  .quiz-option__check { width: 24px; height: 24px; }
  .quiz-option__check::after { left: 7px; top: 4px; }
  .quiz-option:hover,
  .quiz-option:focus-visible,
  .quiz-option[aria-pressed="true"] { transform: none; }
  .quiz-q__nav {
    position: sticky;
    bottom: 0;
    z-index: 3;
    gap: 16px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(15, 38, 31, 0.97) 0%, rgba(15, 38, 31, 0.9) 70%, rgba(15, 38, 31, 0) 100%);
  }
  .quiz-back { min-height: 44px; }

  /* Result: photo · text · alternatives */
  .quiz[data-step="result"] .quiz__stage { padding: var(--nav-h) 0 72px; }
  .quiz-result { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .quiz-result__media {
    grid-column: 1;
    min-height: 0;
    height: clamp(300px, 90vw, 560px);
  }
  .quiz-result__media figcaption { left: var(--gutter); bottom: 22px; right: 40%; }
  .quiz-result__num { font-size: clamp(150px, 40vw, 280px); }
  .quiz-result__body { grid-column: 1; padding: 0 var(--gutter); max-width: 44em; }
  .quiz-result__name { font-size: clamp(44px, 11.4vw, 84px); }
  .quiz-meter__value strong { font-size: 54px; }
  .quiz-result__why { font-size: 22px; }
  .quiz-result__text { font-size: 16px; }
  .quiz-result__actions { margin-top: 34px; }
  .quiz-alts {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-top: 40px;
  }
  .quiz-alts__title { font-size: 36px; }
  .quiz-alts__head { margin-bottom: 8px; }
  .quiz-alt { min-height: 200px; }
  .quiz-alt__links { flex-wrap: wrap; gap: 4px 24px; }
}


/* ---------------------------------------------------------
   99.5 EXPLORE MAP (≤ 1199px)
   One column: filters → map → card of the selected place →
   list. js/map.js reads the card position to know whether it
   floats over the map (desktop) or sits under it.
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  .atlas {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .atlas-panel { display: contents; }
  .atlas-filters { order: 1; padding: 26px var(--gutter) 20px; }
  .atlas-set { order: 2; padding: 12px var(--gutter); }
  .atlas-map {
    order: 3;
    display: flex;
    flex-direction: column;
    scroll-margin-top: var(--nav-h-solid);
  }
  .atlas-count { order: 4; padding: 24px var(--gutter) 8px; }
  .atlas-list { order: 5; overflow: visible; padding: 0 calc(var(--gutter) - 12px) 48px; }
  .atlas-empty { order: 6; padding: 24px var(--gutter) 48px; }

  .atlas-chip { min-height: 42px; padding: 10px 16px; font-size: 13px; }
  .atlas-chip--line { padding: 9px 15px; }
  .atlas-clear { min-height: 44px; }

  .atlas-map__canvas {
    position: relative;
    inset: auto;
    flex: none;
    height: clamp(340px, 64vh, 580px);
    height: clamp(340px, 64svh, 580px);
  }
  .atlas-map .leaflet-top.leaflet-right { top: 12px; right: 12px; }
  .atlas-map .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
  .atlas-map__offline { position: static; transform: none; margin: 0 auto; padding: 48px var(--gutter); }

  /* The card sits under the map */
  .atlas-card {
    position: relative;
    left: auto;
    top: auto;
    z-index: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    border-bottom: 1px solid var(--line-dark);
    box-shadow: none;
    transform: translateY(14px);
  }
  .atlas-card.is-open { transform: none; }
  .atlas-card__media { aspect-ratio: 16 / 9; }
  .atlas-card__close { width: 44px; height: 44px; }
  .atlas-card__body { padding: 24px var(--gutter) 30px; }
  .atlas-card__body > * { max-width: 40em; }
  .atlas-near { min-height: 46px; }

  .atlas-row { min-height: 60px; }
}


/* ---------------------------------------------------------
   99.6 PLAN YOUR TRIP (≤ 1199px)
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  .planner-intro__route { top: 0; gap: 3.4vw; }
  .planner-intro__route li { font-size: clamp(56px, 14vw, 110px); }
  .planner-intro__favs { margin: -10px 0 30px; }
  .plan-favs { min-height: 60px; }
  .plan-favs__label { font-size: 21px; }
  .planner .quiz-q__options--grid .quiz-option__label { font-size: clamp(20px, 5vw, 22px); }
  .quiz-q__nav .planner-summary { padding: 0 12px; font-size: 18px; }

  /* Result head: photo on top, text on its dark end */
  .trip-head {
    display: block;
    min-height: 0;
    padding: calc(var(--nav-h) + clamp(190px, 52vw, 360px)) var(--gutter) 52px;
  }
  .trip-head__media { left: 0; }
  .trip-head::after {
    background: linear-gradient(0deg, var(--c-forest-deep) 0%, rgba(15, 38, 31, 0.94) 55%, rgba(15, 38, 31, 0.4) 82%, rgba(15, 38, 31, 0.2) 100%);
  }
  .trip-head__title { font-size: clamp(50px, 12.6vw, 100px); }
  .trip-summary { gap: 18px 36px; margin-top: 36px; padding-top: 22px; }
  .trip-summary dd { font-size: 25px; }
  .trip-head__actions { margin-top: 34px; }
  .trip-restart { margin-left: 0; min-height: 44px; }
  .trip-head__caption { top: calc(var(--nav-h) + 16px); }

  /* Body: the route summary first, then the days */
  .trip-body { display: block; padding: 64px var(--gutter) var(--section-pad); }
  .trip-aside { position: static; max-width: 40em; margin-bottom: 72px; }
  .trip-days { gap: 80px; }
  .trip-day__head { gap: 20px; }
  .trip-day__num { font-size: clamp(76px, 20vw, 130px); }
  .trip-day__title { font-size: clamp(32px, 7.6vw, 50px); }
  .trip-stop,
  .trip-move,
  .trip-free { grid-template-columns: 112px 200px minmax(0, 1fr); gap: 24px; }
  .trip-stop__name { font-size: 32px; }
}


/* ---------------------------------------------------------
   99.7 SEASONS + FAVOURITES (≤ 1199px)
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  .season-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-h) + 40px) var(--gutter) 40px;
  }
  /* Season name fills the line: --len = letters of the name in each language */
  .season-hero__name { font-size: min(calc((100vw - 2 * var(--gutter)) / (var(--len, 6) * 0.74)), 190px); }
  [data-season="spring"] { --len: 6; }
  [data-season="summer"] { --len: 6; }
  [data-season="autumn"] { --len: 4.2; }
  [data-season="winter"] { --len: 6; }
  :lang(es) [data-season="spring"] { --len: 9; }
  :lang(es) [data-season="autumn"] { --len: 5; }
  :lang(es) [data-season="winter"] { --len: 8; }
  .season-hero__row { display: block; margin-top: 30px; padding-top: 26px; }
  .season-hero__title { font-size: clamp(34px, 7.4vw, 54px); }
  .season-hero__lede { font-size: 17px; }
  .season-hero__caption { top: calc(var(--nav-h) + 16px); }
  /* The four seasons: a 2 × 2 grid of tabs */
  .season-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    margin-top: 34px;
  }
  .season-tab {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 12px;
    min-height: 72px;
    padding: 14px 0 14px 14px;
  }
  .season-tab:nth-child(2) { border-top: 1px solid var(--line-light); }
  .season-tab__name { font-size: clamp(26px, 6.4vw, 32px); }
  .season-tab__months { grid-column: 2; }
  .season-tab:hover { padding-left: 14px; }
  .season-tab[aria-selected="true"] { padding-left: 20px; }

  .season-panel { padding: 80px var(--gutter) var(--section-pad); }
  .season-panel__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 24px 28px;
    margin-bottom: 52px;
    padding-bottom: 32px;
  }
  .season-panel__count { font-size: clamp(100px, 24vw, 170px); }
  .season-panel__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
  .season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 28px; }
  .season-facts { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 80px; }
  .season-facts__title { font-size: 38px; }

  /* Year at a glance: the table keeps all 24 × 4 values */
  .season-year { display: block; }
  .season-year__head { position: static; max-width: 40em; margin-bottom: 52px; }
  .season-year__head .display-lg { font-size: var(--fs-display-lg); }
  .season-year__table {
    position: relative;                /* keeps the cells' screen-reader labels inside the scroller */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-sand) transparent;
  }

  /* Favourites */
  .favs-head__heart { width: 70vw; height: 70vw; right: -16vw; top: 46%; }
  .favs { padding: 72px var(--gutter) var(--section-pad); }
  .favs__bar { flex-direction: column; align-items: flex-start; gap: 26px; margin-bottom: 52px; }
  .favs__actions { flex-wrap: wrap; gap: 14px 28px; }
  .favs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 28px; }
  .favs__storage { margin-top: 64px; }
  .favs-empty { display: block; }
  .favs-empty__media { aspect-ratio: 3 / 2; margin: 0 calc(-1 * var(--gutter)); }
  .favs-empty__media figcaption { left: var(--gutter); right: var(--gutter); line-height: 1.6; }
  .favs-empty__text { margin-top: 48px; max-width: 40em; }
  .favs-empty__heart { width: 54px; height: 54px; margin-bottom: 24px; }
  .favs-empty__lede { margin: 20px 0 34px; font-size: 17.5px; }
  .favs-empty__links .link-arrow { min-height: 52px; }

  /* Experience card */
  .xcard__name { font-size: 29px; }
  .xcard__links .link-arrow { min-height: 44px; }
}


/* ---------------------------------------------------------
   99.8 TRAVEL GUIDE + CREDITS (≤ 1199px)
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  /* Guide */
  .guide-head { min-height: 0; }
  .guide-index { padding: 44px var(--gutter) 40px; }
  .guide-index ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-index li { border-bottom: 1px solid var(--line-dark); }
  .guide-index a { min-height: 56px; padding: 16px 16px 16px 0; font-size: 22px; }
  .guide-chapter__head { display: block; margin-bottom: 52px; }
  .guide-chapter__num { display: block; margin-bottom: 26px; font-size: clamp(110px, 28vw, 190px); }
  .guide-chapter__head .display-md { margin-bottom: 18px; }
  .guide-chapter__more { margin-top: 48px; }
  .guide-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .guide-item__fig strong { font-size: 56px; }
  .guide-item__title { font-size: 26px; }

  .guide-weather { display: block; }
  .guide-normals { max-width: 620px; margin-bottom: 56px; padding: 30px 28px 28px; }
  /* Season rows: the range moves under the name if the line is too short */
  .guide-season {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
  }
  .guide-season dt { flex: 1 1 8.5em; }
  .guide-season__range { font-size: clamp(32px, 8vw, 40px); }
  .guide-season__more { flex: 1 1 100%; }

  .guide-distances { display: block; }
  .guide-distances__map { max-width: 680px; margin-bottom: 52px; }
  .guide-distances__table [data-guide-matrix] { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
  .guide-matrix { min-width: 320px; }

  /* Credits */
  .credits { display: block; padding: 64px var(--gutter) var(--section-pad); }
  .credits-index { position: static; max-width: 40em; margin-bottom: 72px; }
  .credits-index a { min-height: 52px; font-size: 22px; }
  .credits-section { padding-bottom: 84px; }
  .credits-section .display-md { gap: 16px; }
  .credits-sub { flex-wrap: wrap; gap: 4px 14px; margin-top: 44px; }
  .credits-body a { overflow-wrap: anywhere; }
}


/* ---------------------------------------------------------
   99.9 PHONES (≤ 767px) · SMALL PHONES (≤ 389px)
   --------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --fs-body: 16px; --fs-lede: 17.5px; }
  .lede { line-height: 1.65; }
  /* Long button labels may wrap (the hover label roll is a desktop effect) */
  .btn { max-width: 100%; }
  .btn__label { height: auto; overflow: visible; }
  .btn__label > span { text-shadow: none; }
  .btn:hover .btn__label > span,
  .btn:focus-visible .btn__label > span { transform: none; }
  /* Photo captions of the page bands: inside the gutters */
  .atlas-head__caption,
  .season-hero__caption,
  .trip-head__caption { left: var(--gutter); right: var(--gutter); line-height: 1.6; }
  /* The smallest labels gain a little size on small screens */
  .world__shot-cap { font-size: 10.5px; }
  .guide-season__now { font-size: 10.5px; }

  /* Hero */
  .hero__row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero__pillars { font-size: 11.5px; letter-spacing: 0.18em; }
  .hero__cta { justify-self: start; }
  .hero__bottom { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 24px; }
  .hero__bottom .photo-caption { justify-self: start; text-align: left; }
  .page-stats { gap: 22px; }
  .page-stats strong { font-size: 38px; }
  .page-stats span { font-size: 10.5px; letter-spacing: 0.16em; }

  /* Regions: two per row */
  .regions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regions__list li { padding: 16px 14px; }

  /* Promo, map intro, bands */
  .fyo__meta { gap: 22px; }
  .fyo__meta dt { letter-spacing: 0.12em; }
  .fyo__meta dd { font-size: 40px; }
  .stats { gap: 24px; }
  /* Schematic map: a little taller and wider inside, labels wrap before the edge */
  .region-map { aspect-ratio: 5 / 6; margin-top: 52px; }
  .region-map__plot { inset: 12% 7% 11% 7%; }
  .region-dot { gap: 9px; }
  /* Only the two long labels wrap (Niagara sits near the right edge, Blue Mountains is long) */
  .region-dot__label em { white-space: nowrap; }
  .region-dot[href*="niagara"] .region-dot__label { width: 6.6rem; white-space: normal; }
  .region-dot[href*="blue-mountains"] .region-dot__label { width: 9.5rem; white-space: normal; }
  .region-dot__label strong { font-size: 10px; letter-spacing: 0.1em; }
  .region-dot__label em { font-size: 15px; }
  .region-dot--xl { --size: 20px; }
  .lake-label { font-size: 14px; }
  .region-map__note { left: 16px; bottom: 12px; font-size: 10px; }
  .region-map__compass { top: 14px; right: 14px; width: 38px; height: 38px; }

  /* Footer: two columns of links */
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .credits-inline { gap: 4px 20px; }
  .credits-inline li { padding: 3px 0; }

  /* World pages */
  .film ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .film li:nth-child(3n + 2) { margin-top: 0; }
  .film li:nth-child(even) { margin-top: 32px; }
  .film__name { font-size: 18px; }
  .exp > .world__shot { width: 58%; }
  .exp__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .worlds-nav__title { flex-basis: 100%; }
  .worlds-nav ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }

  /* Quiz + planner: result actions full width */
  .quiz-result__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .quiz-result__actions .btn,
  .quiz-result__actions .fav-btn { justify-content: space-between; }
  .quiz-result__actions .fav-btn { justify-content: center; }
  .quiz-alt { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .quiz-alt__media { aspect-ratio: 16 / 9; }
  .quiz-alt__body { padding: 20px 20px 18px; }
  .quiz-alt__name { font-size: 28px; }
  .planner .quiz-q__options--grid { grid-template-columns: minmax(0, 1fr); }
  .quiz-q__nav { flex-wrap: wrap; }
  .quiz-q__nav .planner-summary { order: -1; flex: 1 1 100%; padding: 0; text-align: left; font-size: 17px; }
  .quiz-q__nav .planner-summary:empty { display: none; }

  /* Trip: each stop as a vertical card */
  .trip-stop { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 0; }
  .trip-stop__media { aspect-ratio: 16 / 10; }
  .trip-stop__time { padding-top: 0; }
  .trip-move,
  .trip-free { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 16px; }
  .trip-move .trip-stop__time,
  .trip-free .trip-stop__time { grid-column: 1 / -1; }
  .trip-stop__name { font-size: 30px; }
  .trip-stop__actions .link-arrow { min-height: 44px; }

  /* Map filters: each row of chips scrolls sideways */
  .atlas-chips {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent 100%);
  }
  .atlas-chips::-webkit-scrollbar { display: none; }
  .atlas-chips > li { flex: none; }
  .atlas-chip { white-space: nowrap; }
  .atlas-chips::after { content: ''; flex: none; width: 24px; }

  /* Seasons */
  .season-grid,
  .favs__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .season-facts ul { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .season-tab { padding-left: 12px; }
  .season-tab[aria-selected="true"] { padding-left: 18px; }
  /* Year table: scrolls sideways, the experience column stays */
  .season-year__table::before {
    content: 'Swipe to see the four seasons →';
    position: sticky;
    left: 0;
    display: block;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-muted);
  }
  :lang(es) .season-year__table::before { content: 'Desliza para ver las cuatro estaciones →'; }
  .year-table { min-width: 440px; font-size: 14px; }
  .year-table thead th { padding: 0 6px 14px; font-size: 10.5px; letter-spacing: 0.12em; }
  .year-table thead .year-table__exp,
  .year-table tbody tr:not(.year-group) th {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 148px;
    padding-right: 12px;
    background: var(--c-ivory);
    box-shadow: 1px 0 0 var(--line-dark);
  }
  .year-table tbody th { padding: 0 12px 0 0; line-height: 1.35; }
  .year-table tbody th a { gap: 10px; min-height: 46px; align-items: center; padding: 8px 0; }
  .year-group th { padding: 30px 0 10px !important; }
  .year-group th > * { position: sticky; left: 0; }

  /* Guide */
  .guide-index ol { grid-template-columns: minmax(0, 1fr); }
  .guide-index a { padding-right: 0; }
  .guide-items,
  .guide-items--two { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .guide-normals { padding: 26px 22px 24px; }
  .guide-season__name { font-size: 24px; }
  .guide-distances__map { padding: 8px; }
  .guide-map__region text { font-size: 17px; stroke-width: 5px; }
  .guide-map__region:nth-of-type(4) text { text-anchor: start; transform: translateX(-34px); }   /* Bruce: long label, starts near the edge */
  .guide-map__n { font-size: 24px; }
  .guide-matrix thead th { height: 132px; }
  /* Region names wrap so the six columns fit; if not, the first column stays */
  .guide-matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 118px;
    padding-right: 10px;
    line-height: 1.3;
    white-space: normal;
    background: var(--c-forest-deep);
  }
  .guide-matrix td { padding: 10px 4px; }

  /* Credits: each photograph as a short entry */
  .credits-table,
  .credits-table tbody { display: block; }
  .credits-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .credits-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .credits-table td { display: block; padding: 0; border: 0; }
  .credits-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; font-size: 15px; font-weight: 600; }
  .credits-table td:nth-child(1) { grid-column: 1 / -1; grid-row: 2; }
  .credits-table td:nth-child(3) { grid-column: 1; grid-row: 3; font-weight: 500; }
  .credits-table td:nth-child(4) { grid-column: 1; grid-row: 4; }
  .credits-table td:nth-child(5) { grid-column: 2; grid-row: 3 / 5; align-self: end; }
  .credits-table a { display: inline-block; padding: 4px 0; }
  .credits-apa li { font-size: 14px; }

  /* Notifications: full width at the bottom; the link goes under the name */
  .fav-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 44px;
    align-items: start;
    gap: 8px 14px;
    width: auto;
    padding: 14px 8px 16px 18px;
  }
  .fav-toast__icon { margin-top: 4px; }
  .fav-toast__name { font-size: 20px; }
  .fav-toast__close { grid-column: 3; grid-row: 1; margin-top: -4px; }
  .fav-toast__action,
  .fav-toast__undo { grid-column: 2; grid-row: 2; justify-self: start; }
  .toast { bottom: 16px; }
}

@media (max-width: 389px) {
  :root { --gutter: 18px; }
  .site-header__inner { gap: 2px; }
  .brand__mark { font-size: 22px; letter-spacing: 0.18em; }
  .lang-switch { padding-left: 4px; }
  .lang-switch__btn { min-width: 36px; }
  .hero__tagline { font-size: 25px; }
  .fyo__meta,
  .stats { gap: 18px; }
  .fyo__meta dt { font-size: 10px; }
  .teaser { padding: 26px 20px 24px; }
  .quiz-option { grid-template-columns: 32px minmax(0, 1fr) 22px; gap: 12px; padding: 12px; }
  .quiz-option__key { width: 32px; height: 32px; }
  .guide-normals { padding: 24px 18px 22px; }
}


/* ---------------------------------------------------------
   99.10 TOUCH SCREENS + MOTION
   --------------------------------------------------------- */
/* Without hover, a tap must not leave pieces lifted or zoomed;
   all the information is already visible without hover. */
@media (hover: none) {
  .world:hover .world__body,
  .world:hover .world__num,
  .world:hover .world__caption,
  .exp:hover .exp__body,
  .exp:hover .exp__num,
  .film a:hover .film__label,
  .teaser-option:hover { transform: none; }
  .regions__list li:hover { flex-grow: 1; }
  .regions__list li:hover .regions__media img { transform: none; }
}
/* Keyboard shortcuts (A–E, Enter) mean nothing on a touch-only screen */
@media (hover: none) and (pointer: coarse) {
  .quiz-q__keys { display: none; }
  .fav-btn { min-height: 44px; }
  .fav-btn--icon { min-width: 44px; min-height: 44px; }
  .link-arrow { min-height: 44px; }
  .toast__close,
  .fav-toast__close { width: 44px; height: 44px; }
  /* Larger hit areas that do not change the layout */
  .atlas-pin::before,
  .atlas-group::before { content: ''; position: absolute; inset: -6px; }
  .exp__price { position: relative; }
  .exp__price::after { content: ''; position: absolute; inset: -11px -4px; }
}
/* Phones: soft parallax is switched off (smaller photos, less overscan);
   reveals, the hero, the marquee and the map route keep moving */
@media (max-width: 767px) {
  [data-depth] { --py: 0px !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1279px) {
  .main-nav,
  .site-header.is-nav-open .main-nav { transform: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
  .site-header.is-nav-open .main-nav { transition: opacity 0.3s ease, visibility 0s; }
  .site-header.is-nav-open .main-nav__list > li,
  .nav-menu { animation: fadeIn 0.4s ease both; }
  .nav-toggle { animation-name: fadeIn; }
  .nav-toggle__icon::before,
  .nav-toggle__icon::after { transition: none; }
}
/* Home, four worlds (≤ 1199px): content enters from the side each world
   leans to — right for 01 / 03, left for 02 / 04 */
@media (prefers-reduced-motion: no-preference) and (max-width: 1199px) {
  .js :is(.world--nature, .world--flavours) .reveal-img { clip-path: inset(0 0 0 100%); }
  .js :is(.world--culture, .world--adventure) .reveal-img { clip-path: inset(0 100% 0 0); }
  .js .world .reveal-img.is-visible { clip-path: inset(0 0 0 0); }
  .js :is(.world--nature, .world--flavours) .world__body.reveal.is-visible { animation-name: worldInRight; }
  .js :is(.world--culture, .world--adventure) .world__body.reveal.is-visible { animation-name: worldInLeft; }
  @keyframes worldInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes worldInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: none; }
  }
}
/* Wide tablets (768–1199px): the secondary photos of the four worlds keep a
   measured size instead of growing with the screen */
@media (min-width: 768px) and (max-width: 1199px) {
  .world--adventure .world__shot--wonderland { grid-column: 1 / 6; margin-top: -20vw; }
  .world--adventure .world__shot--zoo { grid-column: 6 / 9; margin-top: -8vw; }
  .world--adventure .world__shot--aquarium { grid-column: 1 / 8; }
  .world--flavours .world__detail { grid-column: 1 / 6; height: 34%; }
  .world--culture .world__detail { grid-column: 8 / 13; }
}
/* Compact bar: the site name stays on one line under ONTARIO */
@media (min-width: 600px) and (max-width: 1279px) {
  .brand__name { max-width: none; white-space: nowrap; }
}
/* 1200–1279px (desktop compositions, compact bar): a clear gap between the
   hero motto and the photo credit */
@media (min-width: 1200px) and (max-width: 1279px) {
  .hero__bottom { column-gap: 40px; }
  .hero__bottom .photo-caption { max-width: 24em; text-align: right; line-height: 1.6; }
}