/*
  Holiday in St. Catharines & the Benchlands
  Built from Holiday.pdf: the 496pt page frame maps to 992px (1pt = 2px). The column has since
  been widened to 1240px so the cards and their photos get more room.
  Spacing is normalized to one rhythm: 60px between blocks, 24px card insets, 16px tile gaps.
*/

:root {
  --green-900: #123524;
  --green-500: #339968;
  --green-600: #2b8659;
  --green-700: #22704b; /* hover and current states, and small text on grey */
  --gray-100: #f1f1f1;
  --white: #fff;
  --black: #000;

  /* the text colour the Whereabouts widgets inherit, as on the fall site */
  --wa-ink: #222;

  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --col: 1240px;
  --gutter: clamp(16px, 3.5vw, 48px);
  --radius: 14px;
  --radius-lg: 16px;
  --section-gap: clamp(40px, 4vw + 20px, 60px);
  --header-h: 90px;
  --text-col: clamp(240px, 20vw + 60px, 340px);
  --tile-h: clamp(300px, 22vw + 70px, 400px);
  --tile-gap: 16px;
  --display-size: clamp(32px, 3.2vw + 20px, 48px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 899px) {
  :root { --header-h: 72px; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--green-900);
  font: 400 16px/22px var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 700; }

::selection { background: var(--green-500); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--green-900);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus { transform: none; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--col));
  margin-inline: auto;
}

main > * + * { margin-top: var(--section-gap); }

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 122px;
  min-height: 35px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--green-600);
  color: var(--white);
  font: 500 16px/1 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s;
}

.btn:hover { background: var(--green-700); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--green-900);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100% - 2 * var(--gutter), var(--col));
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: clamp(0px, 3.4vw, 34px) clamp(0px, 4.4vw, 44px);
}

.brand {
  flex: none;
  border-radius: 4px;
}

.brand__logo {
  width: 137px;
  /* the wordmark ships black; the holiday header sets it in white */
  filter: brightness(0) invert(1);
}

.site-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 34px);
}

.site-nav__link {
  display: block;
  padding-block: 8px;
  color: var(--white);
  font: 500 14px/1 var(--font-display);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  transition: text-decoration-color .2s;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] { text-decoration-color: var(--green-500); }

.site-nav__cta {
  min-height: 43px;
  margin-left: 38px;
  padding-inline: 11px;
  font-family: var(--font-display);
  font-size: 14px;
}

.site-nav__cta[aria-current="page"] { background: var(--green-700); }

.header-cta,
.menu-toggle { display: none; }

@media (max-width: 899px) {
  .brand__logo { width: 110px; }
}

/* below this width the six links no longer fit beside the logo, so they fold into the menu.
   Where to Stay stays in the bar, beside a plain white menu icon */
@media (max-width: 1149px) {
  .brand { margin-right: 12px; }

  .header-cta {
    display: inline-flex;
    flex: none;
    min-width: 0;
    min-height: 40px;
    margin-left: auto;
    padding-inline: 14px;
    font-family: var(--font-display);
    font-size: 14px;
  }

  .header-cta[aria-current="page"] { background: var(--green-700); }

  /* the icon's edge, not the button's, lines up with the bar's inset */
  .menu-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 -8px 0 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--white);
    cursor: pointer;
    transition: background-color .2s;
  }

  .menu-toggle:hover { background: rgb(255 255 255 / .08); }
  .menu-toggle .icon { font-size: 28px; }
  .menu-toggle .icon--close { display: none; }
  .menu-toggle[aria-expanded="true"] .icon--menu { display: none; }
  .menu-toggle[aria-expanded="true"] .icon--close { display: block; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    display: none;
    padding: 4px var(--gutter) 24px;
    border-top: 1px solid rgb(255 255 255 / .1);
    background: var(--green-900);
    box-shadow: 0 16px 24px -12px rgb(0 0 0 / .35);
  }

  .site-nav[data-open] { display: block; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__link {
    padding: 16px 0;
    border-bottom: 1px solid rgb(255 255 255 / .1);
    font-size: 17px;
  }

  /* the bar already shows it */
  .site-nav__cta { display: none; }

  /* without JavaScript the menu stays open under the logo */
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .site-nav { position: static; display: block; flex-basis: 100%; margin-inline: 0; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 12px; }
  html:not(.js) .site-header { position: static; }
}

/* the smallest phones: a slightly smaller logo and button keep the bar on one line */
@media (max-width: 359px) {
  .brand__logo { width: 92px; }
  .header-cta { padding-inline: 10px; font-size: 13px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* 517px when the column is the PDF's 992px; taller on wide screens */
  min-height: clamp(440px, 34vw + 166px, 620px);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  isolation: isolate;
}

.hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the PDF's white-to-black multiply gradient, as a black ramp from 30% to 71% of the hero */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / var(--shade)) 70.6%);
}

@media (max-width: 599px) {
  /* the hero is taller than it is wide here, so the copy sits higher: start the shade sooner */
  .hero::after { background: linear-gradient(180deg, rgb(0 0 0 / 0) 18%, rgb(0 0 0 / var(--shade)) 60%); }
}

/* the home hero fills the first screen. Its photo is cropped to the table, so the faces fill the
   top half and the copy sits over the sleeves and tabletop below */
.hero--holiday {
  --shade: .57;
  min-height: clamp(560px, 100vh - var(--header-h), 1080px);
  min-height: clamp(560px, 100svh - var(--header-h), 1080px);
}

.hero--holiday .hero__img { object-position: 50% 15%; opacity: .89; }
.hero--holiday .hero__content { padding-bottom: clamp(32px, 7vh, 72px); }

/* the portrait crop: the two women clinking glasses at the middle of the table */
@media (max-width: 767px) and (orientation: portrait) {
  .hero--holiday .hero__img { object-position: 50% 30%; }
}

@media (max-width: 599px) {
  /* full screen, but never narrower than 4:7, so both faces stay in frame on tall phones */
  .hero--holiday {
    --shade: .66;
    min-height: clamp(480px, 100vh - var(--header-h), 175vw);
    min-height: clamp(480px, 100svh - var(--header-h), 175vw);
  }

  /* the faces sit high in this crop, so the shade starts below them */
  .hero--holiday::after { background: linear-gradient(180deg, rgb(0 0 0 / 0) 34%, rgb(0 0 0 / var(--shade)) 66%); }
}

/* category pages: each photo's focal point is set on its <img> with --focus. The copy sits over the
   lower left, so the shade darkens that corner as well as the bottom, even on bright photos */
.hero--page { --shade: .72; }
.hero--page .hero__img { object-position: var(--focus, 50% 50%); }
.hero--page .hero__content { text-shadow: 0 1px 14px rgb(0 0 0 / .45); }

.hero--page::after {
  background:
    linear-gradient(90deg, rgb(0 0 0 / .5), rgb(0 0 0 / 0) 65%),
    linear-gradient(180deg, rgb(0 0 0 / 0) 25%, rgb(0 0 0 / var(--shade)) 75%);
}

@media (max-width: 599px) {
  .hero--page { --shade: .8; }
  .hero--page::after { background: linear-gradient(180deg, rgb(0 0 0 / .15) 10%, rgb(0 0 0 / var(--shade)) 55%); }
}

/* Outdoors: the hiker stands low in the photo. On narrower screens the photo is enlarged from its
   bottom edge, which lifts them above the headline */
@media (max-width: 899px) {
  .hero--outdoors .hero__img {
    top: auto;
    height: 125%;
    object-position: 4% 100%;
  }
}

@media (max-width: 599px) {
  .hero--outdoors .hero__img { height: 140%; }
}

.hero__content {
  width: min(100% - 2 * var(--gutter), var(--col));
  margin-inline: auto;
  padding: 48px 0 32px clamp(0px, 12vw - 46px, 73px);
}

.hero__title {
  font: 900 var(--display-size)/1.125 var(--font-ui);
}

.hero--holiday .hero__title { text-transform: uppercase; }

.hero__lead {
  display: block;
  margin-bottom: 4px;
  font: italic 400 clamp(19px, 1vw + 15px, 24px)/1.2 var(--font-ui);
  text-transform: none;
}

.hero__place {
  display: block;
  margin-bottom: 5px;
  color: var(--green-500);
  font: italic 400 clamp(17px, .6vw + 14px, 20px)/1.2 var(--font-ui);
}

.hero__sub {
  margin: 6px 0 19px;
  font: 400 16px/22px var(--font-ui);
}

/* a hero with no line of copy (Where to Stay) keeps the same gap above its button */
.hero__title + .btn { margin-top: 22px; }

/* ---------- Intro ---------- */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(336px, 30vw, 420px);
  align-items: center;
}

.intro__text {
  padding-left: 32px;
  text-align: center;
}

.intro__title {
  font: 700 var(--display-size)/1.21 var(--font-display);
  letter-spacing: -.04em;
}

.mark {
  text-decoration-line: underline;
  text-decoration-color: var(--green-500);
  text-decoration-thickness: .104em;
  text-underline-offset: .125em;
  text-decoration-skip-ink: none;
}

.intro__body {
  max-width: 526px;
  margin: 28px auto 0;
}

.intro__body p + p { margin-top: 22px; }

.intro__img {
  width: 100%;
  aspect-ratio: 336 / 317;
  object-fit: cover;
  border-radius: var(--radius);
}

.intro--page { grid-template-columns: minmax(0, 1fr) clamp(432px, 38vw, 540px); }
.intro--page .intro__text { padding-left: 0; }

.intro--page .intro__title {
  max-width: 397px;
  margin-inline: auto;
  font-size: clamp(24px, 1vw + 20px, 28px);
  line-height: 38px;
  letter-spacing: 0;
}

.intro--page .intro__body {
  max-width: 397px;
  margin-top: 18px;
}

.intro--page .intro__img {
  aspect-ratio: 432 / 237;
  object-position: 100% 70%;
}

@media (max-width: 899px) {
  .intro,
  .intro--page {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .intro__text { padding-left: 0; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .intro__img { aspect-ratio: 16 / 9; }
}

/* ---------- Feature cards (Food and Drink, Shops and Holiday Markets, Outdoors, Arts and Culture, Where to Stay) ---------- */

/* every block shares one grid: a text column, then the photos. Light blocks have no box but keep
   the same side insets, so their text and photos line up with the dark cards between them */
.feature {
  display: grid;
  grid-template-columns: var(--text-col) minmax(0, 1fr);
  column-gap: 24px;
  padding: 24px;
  border-radius: var(--radius);
}

.feature--dark {
  background: var(--green-900);
  color: var(--white);
}

.feature--light { padding-block: 0; }

.feature__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px;
  text-align: center;
}

/* set like the intro's "Where urban energy…" headline, at 80% of its size */
.feature__title {
  font: 700 calc(var(--display-size) * .8)/1.21 var(--font-display);
  letter-spacing: -.04em;
  text-wrap: balance;
}

.feature__desc { max-width: 291px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tile-gap);
}

.feature--light .tiles,
.feature--stay .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Where to Stay: the title is centred over two large photos */
.feature--stay {
  --tile-h: clamp(320px, 26vw + 80px, 480px);
  grid-template-columns: minmax(0, 1fr);
  row-gap: 20px;
}

.feature--stay .feature__title {
  padding-top: 4px;
  text-align: center;
}

/* tiles fill the row, so a longer description grows the card instead of crowding it */
.tile {
  position: relative;
  display: block;
  height: 100%;
  min-height: var(--tile-h);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--black);
  text-decoration: none;
}

.feature--stay .tile { border-radius: var(--radius-lg); }

/* photos are positioned so they fill their tile without setting its height */
.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform .7s var(--ease-out);
}

.tile:hover .tile__img,
.tile:focus-visible .tile__img { transform: scale(1.04); }

.tile .btn {
  position: absolute;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
}

.tile:hover .btn { background: var(--green-700); }

.feature__media {
  position: relative;
  min-height: var(--tile-h);
  overflow: hidden;
  border-radius: var(--radius);
}

.feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

@media (max-width: 899px) {
  .feature {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .feature--dark { padding: 28px 24px 24px; }

  .feature__text {
    justify-content: flex-start;
    padding: 0;
  }

  .feature__text .btn { margin-top: 6px; }
  .feature__desc { max-width: 34em; }
}

@media (max-width: 599px) {
  /* tiles become a swipeable row of large photos that peeks the next one */
  .tiles {
    display: flex;
    gap: 12px;
    margin-inline: -24px;
    padding: 0 24px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--green-500) transparent;
  }

  /* light blocks have no box, so their row runs out to the screen edges */
  .feature--light .tiles {
    margin-inline: calc(-24px - var(--gutter));
    padding-inline: calc(24px + var(--gutter));
    scroll-padding-inline: calc(24px + var(--gutter));
  }

  .tiles > li {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .tile {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .feature__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Section titles, Trip Ideas ---------- */

.section-title {
  color: var(--green-900);
  font: 700 var(--display-size)/1.2 var(--font-display);
  letter-spacing: .04em;
  text-align: center;
}

.trips__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.trip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: clamp(360px, 16vw + 230px, 480px);
  padding: 72px 32px 16px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--black);
  color: var(--white);
  text-align: center;
  isolation: isolate;
}

.trip__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .43;
  transition: transform .7s var(--ease-out), opacity .3s;
}

.trip:hover .trip__img { transform: scale(1.04); opacity: .5; }

.trip__title {
  max-width: 17em;
  margin-block: auto;
  font: 500 24px/1.2 var(--font-ui);
}

.trip__link {
  color: inherit;
  text-decoration: none;
}

/* the whole card is the link target; "Read More" is its visible affordance */
.trip__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.trip__link:focus-visible { outline: none; }
.trip:has(.trip__link:focus-visible) { outline: 3px solid var(--green-500); outline-offset: 3px; }
.trip:hover .btn { background: var(--green-700); }

@media (max-width: 759px) {
  .trips__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 20px;
  }

  .trip {
    height: auto;
    min-height: 340px;
    padding: 56px 24px 16px;
  }

  .trip__title { font-size: 22px; }
}

/* ---------- Holiday Events ---------- */

.events__card {
  padding: 32px 40px 48px;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.events__intro {
  max-width: 46em;
  margin: 12px auto 0;
  text-align: center;
}

.events__card .wa-widget { margin-top: 40px; }

@media (max-width: 759px) {
  .events__card { padding: 28px 20px 32px; }
  .events__card .wa-widget { margin-top: 28px; }
}

/* The Submit Your Event box below the calendar, in the signup card's colours. Whereabouts draws it pale blue inside a
   shadow root, so these rules reach in by its part names. The description sets its own colour and has no part, so it
   turns white through the widget's colour token, set on the part around it. */
whereabouts-event-submit-widget::part(create__container) {
  border-color: var(--green-900);
  background: var(--green-900);
}

whereabouts-event-submit-widget::part(txt__title) { color: var(--white); }

whereabouts-event-submit-widget::part(txt__description) { --wa-colors-text-accent-blue-dark: var(--white); }

whereabouts-event-submit-widget::part(btn__create) {
  background: var(--green-600);
  color: var(--white);
}

whereabouts-event-submit-widget::part(btn__create):hover { background: var(--green-700); }

whereabouts-event-submit-widget::part(btn__create):focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
}

/* ---------- Listing sections (category pages) ---------- */

.listing-section {
  padding: 36px 40px 40px;
  border-radius: var(--radius);
}

.listing-section--dark {
  background: var(--green-900);
  color: var(--white);
}

/* light sections have no box: no top and bottom inset, but the same side inset, so their
   headings line up with the dark sections around them */
.listing-section:not(.listing-section--dark) { padding-block: 0; }

.listing-section__title {
  font: 700 clamp(28px, 1.6vw + 18px, 36px)/1.2 var(--font-display);
  letter-spacing: .02em;
}

.listing-section__desc {
  max-width: 46em;
  margin-top: 12px;
}

@media (max-width: 759px) {
  .listing-section { padding: 28px 20px 24px; }
}

/* ---------- Whereabouts widgets ---------- */

/* the widgets draw their listings in a shadow root and inherit text colour and font from here.
   Their cards are made for a white page, so on a green section they sit in a white panel */
.wa-widget {
  margin-top: 30px;
  color: var(--wa-ink);
}

.listing-section--dark .wa-widget {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--white);
}

/* hold some room while a widget loads, so the page below doesn't jump. Only inside main: the script also adds an
   empty widget element after the footer to open a listing's details in, which must not take up any room */
main whereabouts-operators-widget,
main whereabouts-events-widget {
  display: block;
  min-height: 360px;
}

@media (max-width: 759px) {
  .wa-widget { margin-top: 20px; }
  /* the panel reaches nearer the box's edges, so the listings get most of a phone's width */
  .listing-section--dark .wa-widget {
    margin-inline: -12px;
    padding: 16px 12px;
  }
}

/* ---------- Promo cards (Wine Tours, Cross-Country Skiing) ---------- */

.promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.promo--flip .promo__media { order: 1; }

.promo__media {
  position: relative;
  min-height: clamp(320px, 22vw + 100px, 440px);
}

.promo__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

.promo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(32px, 4vw, 56px);
}

.promo__lead { font: italic 400 clamp(18px, .6vw + 14px, 21px)/1.3 var(--font-ui); }

.promo__title {
  font: 700 clamp(28px, 1.6vw + 18px, 36px)/1.2 var(--font-display);
  letter-spacing: .02em;
}

.promo__text p:not([class]) {
  max-width: 34em;
  line-height: 24px;
}

.promo__text .btn { margin-top: 8px; }

/* the compact card (Wine Tours) is about half the height: a narrow photo beside wider, tighter copy */
.promo--compact { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.promo--compact .promo__media { min-height: 0; }

.promo--compact .promo__text {
  gap: 8px;
  padding: 28px clamp(28px, 3vw, 40px);
}

.promo--compact .promo__lead { font-size: 17px; }
.promo--compact .promo__title { font-size: clamp(22px, .8vw + 16px, 26px); }
.promo--compact .promo__text p:not([class]) { max-width: 54em; }
.promo--compact .promo__text .btn { margin-top: 6px; }

@media (max-width: 759px) {
  .promo { grid-template-columns: minmax(0, 1fr); }
  .promo--flip .promo__media { order: 0; }

  .promo__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .promo__text { padding: 28px 24px 32px; }

  .promo--compact .promo__media { aspect-ratio: 2 / 1; }
  .promo--compact .promo__text { padding: 22px 20px 24px; }
}


/* ---------- Getting Here ---------- */

.getting-here__map {
  margin: 28px 0 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.getting-here__map img { width: 100%; }

.getting-here__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 40px;
  margin-top: 40px;
}

.drive-card {
  padding: 32px;
  border-radius: var(--radius);
  background: var(--green-900);
  color: var(--white);
}

.drive-card a {
  color: inherit;
  text-decoration-color: var(--green-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.drive-times { margin-top: 24px; }

.drive-times li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgb(255 255 255 / .14);
}

.drive-times b { flex: none; }

.drive-times span {
  font-size: 14px;
  text-align: right;
}

.region-copy h3 {
  font: 700 24px/30px var(--font-display);
  letter-spacing: .04em;
}

.region-copy p { margin-top: 12px; line-height: 26px; }
.region-copy p + h3 { margin-top: 32px; }

/* flying in: the photo sits under the drive card's column, the two shuttles beside it */
.airport-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin-top: 40px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.airport-card__media {
  position: relative;
  min-height: 300px;
}

.airport-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

.airport-card__body { padding: 36px 40px 40px; }

.airport-card__title {
  font: 700 24px/30px var(--font-display);
  letter-spacing: .04em;
}

.airport-card__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin-top: 24px;
}

.airport-card__list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 20px;
  border-top: 2px solid var(--green-500);
}

.airport-card__list h4 { font: 700 18px/1.3 var(--font-display); }
.airport-card__list p { line-height: 24px; }

/* the two buttons line up, however long each description runs */
.airport-card__list .btn { margin-top: auto; }

@media (max-width: 899px) {
  .airport-card { grid-template-columns: minmax(0, 1fr); }

  .airport-card__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 759px) {
  .getting-here__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .drive-card { padding: 28px 24px; }
}

@media (max-width: 599px) {
  .airport-card__body { padding: 28px 24px 32px; }
  .airport-card__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- FAQ ---------- */

.faq__list {
  max-width: 816px;
  margin: 28px auto 0;
  border-bottom: 1px solid rgb(18 53 36 / .16);
}

.faq__list details { border-top: 1px solid rgb(18 53 36 / .16); }

.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 4px;
  font: 700 18px/1.35 var(--font-display);
  list-style: none;
  cursor: pointer;
}

.faq__list summary::-webkit-details-marker { display: none; }

.faq__icon {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: var(--gray-100);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: background-color .2s, color .2s;
}

.faq__v { transition: opacity .2s; }
details[open] .faq__v { opacity: 0; }

.faq__list summary:hover .faq__icon {
  background: var(--green-500);
  color: var(--white);
}

.faq__a {
  max-width: 70ch;
  padding: 0 4px 24px;
  line-height: 26px;
}

.faq__a a {
  text-decoration-color: var(--green-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.faq__a a:hover { text-decoration-color: var(--green-900); }

.faq__a ul {
  margin-top: 12px;
  padding-left: 1.25em;
  list-style: disc;
}

.faq__a li + li { margin-top: 8px; }
.faq__a li::marker { color: var(--green-500); }

@media (max-width: 599px) {
  .faq__list summary { gap: 16px; font-size: 17px; }
}

/* ---------- Newsletter ---------- */

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: 28px 48px;
  padding: 48px;
  border-radius: var(--radius);
  background: var(--green-900);
  color: var(--white);
}

.newsletter__title {
  font: 700 clamp(26px, 1.4vw + 18px, 32px)/1.25 var(--font-display);
  letter-spacing: .04em;
}

.newsletter__text p {
  max-width: 34em;
  margin-top: 12px;
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
}

.newsletter__form input[type="email"] {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--green-900);
  font: 400 16px/1 var(--font-display);
}

.newsletter__form input::placeholder { color: #5b6b62; }
.newsletter__form .btn { min-height: 48px; }
.newsletter__form .btn[aria-disabled="true"] { opacity: .8; cursor: progress; }

/* Mailchimp's answer, under the field */
.newsletter__status { flex: 0 0 100%; }

.newsletter__status:not(:empty) {
  margin-top: 12px;
  font-weight: 500;
}

/* after a signup: the form is gone, the thank-you takes the whole card, and focus moves to its title */
.newsletter--done { grid-template-columns: minmax(0, 1fr); }
.newsletter__title:focus { outline: 0; }

@media (max-width: 759px) {
  .newsletter {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 24px;
  }

  .newsletter__form {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .newsletter__form .btn { margin-top: 10px; }
  .newsletter__status { flex: none; }
}

/* ---------- Signup popup ---------- */

/* The page's own signup card, set in a dialog by holiday.js when a visitor heads for the exit. */
.signup {
  width: min(600px, 100vw - 32px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: visible;
  background: none;
  color: inherit;
  box-shadow: 0 24px 64px rgb(18 53 36 / .45);
}

.signup::backdrop { background: rgb(18 53 36 / .6); }

html:has(.signup[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.signup .newsletter {
  position: relative;
  display: block;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
}

.signup .newsletter__title {
  padding-right: 28px;
  text-wrap: balance;
}

.signup .newsletter__text p { text-wrap: pretty; }
.signup .newsletter__form { margin-top: 24px; }

.signup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s;
}

.signup__close:hover { background: rgb(255 255 255 / .14); }

.signup__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.signup__note {
  margin-top: 14px;
  color: rgb(255 255 255 / .82);
  font-size: 14px;
  line-height: 20px;
}

.signup__note a {
  color: var(--white);
  text-underline-offset: 2px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .signup[open] { animation: signup-in .5s var(--ease-out); }
  .signup[open]::backdrop { animation: signup-dim .3s ease-out; }
}

@keyframes signup-in {
  from { opacity: 0; transform: translateY(16px); }
}

@keyframes signup-dim {
  from { opacity: 0; }
}

/* ---------- Funders ---------- */

.funders__card {
  padding: 36px 40px 40px;
  border-radius: var(--radius);
  background: var(--gray-100);
  text-align: center;
}

.funders__title {
  font: 700 24px/30px var(--font-display);
  letter-spacing: .04em;
}

.funders__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 24px 32px;
  margin-top: 28px;
}

.funders__grid a {
  display: block;
  border-radius: 6px;
  transition: opacity .2s;
}

.funders__grid a:hover { opacity: .75; }

.funders__grid img {
  width: 100%;
  max-width: 168px;
  margin-inline: auto;
}

@media (max-width: 759px) {
  .funders__card { padding: 28px 20px 32px; }
  .funders__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
}

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

/* ---------- Privacy policy ---------- */

.policy {
  width: min(100% - 2 * var(--gutter), 760px);
  margin-inline: auto;
  padding-top: clamp(40px, 4vw + 20px, 72px);
}

.policy__title {
  font: 700 var(--display-size)/1.21 var(--font-display);
  letter-spacing: -.04em;
  text-wrap: balance;
}

.policy__meta {
  margin-top: 16px;
  color: rgb(18 53 36 / .7);
  font: 700 13px/1.4 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.policy .prose {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid rgb(18 53 36 / .16);
}

/* long-form text: the privacy policy and the Trip Ideas articles */
.prose { line-height: 26px; }
.prose > * + * { margin-top: 16px; }

.prose a {
  text-decoration-color: var(--green-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover { text-decoration-thickness: 2px; }

.prose h2 {
  margin-top: 40px;
  font: 700 22px/1.3 var(--font-display);
  letter-spacing: .02em;
}

.prose h2 + * { margin-top: 12px; }

.prose ul {
  padding-left: 1.25em;
  list-style: disc;
}

.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--green-500); }
.prose address { font-style: normal; }

/* ---------- Trip Ideas articles ---------- */

.hero--story .hero__title {
  max-width: 24ch;
  font-size: clamp(30px, 2.2vw + 18px, 46px);
  text-wrap: balance;
}

.story {
  width: min(100% - 2 * var(--gutter), 760px);
  margin-inline: auto;
}

.story__lead {
  font-size: 19px;
  line-height: 30px;
}

.story h2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 44px;
}

/* the tip's number, centred on the heading's first line */
.story__num {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--green-600);
  color: var(--white);
  font: 700 16px/1 var(--font-display);
  letter-spacing: 0;
}

.story__figure { margin: 32px 0 0; }
.story__figure + * { margin-top: 32px; }

.story__figure img {
  width: 100%;
  border-radius: var(--radius);
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: var(--section-gap);
  padding: 48px 0 32px;
  background: var(--green-900);
  color: var(--white);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 32px 48px;
}

.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 32px 56px;
}

.site-footer__label {
  font: 700 14px/1.2 var(--font-display);
  letter-spacing: .04em;
}

.social {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  color: var(--white);
  transition: background-color .2s;
}

.social a:hover { background: var(--green-500); }

.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.site-footer__tiao {
  align-self: start;
  border-radius: 4px;
}

.site-footer__tiao img {
  width: auto;
  height: 64px;
}

.site-footer__links {
  display: grid;
  gap: 14px;
  align-content: start;
  padding-top: 2px;
}

.site-footer__links a,
.site-footer__legal a {
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / .35);
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}

.site-footer__links a { font-weight: 500; }

.site-footer__links a:hover,
.site-footer__legal a:hover { text-decoration-color: var(--green-500); }

.site-footer__legal {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: 13px;
}

.site-footer__legal span { margin-inline: 8px; }

@media (max-width: 759px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer__cols { justify-content: flex-start; }
}

/* ---------- Preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .signup { border: 1px solid CanvasText; }
}

/*
  Engagement tweaks, November 2026: menu fit, on-this-page links, Plan your trip, insider tips, Don't miss,
  more to read, article contents and places, footer links.
*/

/* ---------- Menu: a sixth link still fits beside the logo at the narrowest full-menu width ---------- */

@media (min-width: 1150px) and (max-width: 1279px) {
  .site-nav__list { gap: 15px; }
  .site-nav__link { font-size: 13.5px; }
  .site-nav__cta { margin-left: 16px; }
}

@media (min-width: 1280px) and (max-width: 1339px) {
  .site-nav__list { gap: 24px; }
  .site-nav__cta { margin-left: 24px; }
}

/* ---------- On-this-page links under a section page's hero ---------- */

main > .page-nav { margin-top: 0; }
main > .page-nav + * { margin-top: 44px; }

.page-nav { border-bottom: 1px solid rgb(18 53 36 / .12); }

.page-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 30px;
  width: min(100% - 2 * var(--gutter), var(--col));
  margin-inline: auto;
  padding-block: 14px;
}

.page-nav a {
  display: block;
  padding-block: 6px;
  font: 500 15px/1.3 var(--font-display);
  text-decoration-line: underline;
  text-decoration-color: rgb(51 153 104 / .45);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s;
}

.page-nav a:hover { text-decoration-color: var(--green-500); }

/* ---------- Plan your trip, under the home intro ---------- */

.interests {
  margin-top: 26px;
  container-type: inline-size;
}

.interests__label {
  font: italic 400 clamp(17px, .5vw + 14px, 19px)/1.3 var(--font-ui);
}

.interests__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 112px));
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.interests__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 8px;
  border: 1.5px solid var(--green-500);
  border-radius: var(--radius);
  font: 500 16px/1.25 var(--font-display);
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

.interests__list a:hover { background: var(--green-600); color: var(--white); }

/* too narrow for five across: three over two, with the second row centred */
@container (max-width: 490px) {
  .interests__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 352px;
    margin-inline: auto;
  }

  .interests__list li { grid-column: span 2; }
  .interests__list li:nth-child(4) { grid-column: 2 / span 2; }
}

/* ---------- Insider tip, part of a section page's intro ---------- */

.tip {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--green-500);
  font-size: 15px;
  line-height: 23px;
}

.tip__label {
  display: block;
  margin-bottom: 3px;
  font: italic 400 17px/1.3 var(--font-ui);
}

.tip a,
.more-reading a,
.places a,
.faq__a a {
  text-decoration-color: var(--green-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tip a:hover,
.more-reading a:hover,
.places a:hover { text-decoration-thickness: 2px; }

/* ---------- Don't miss: dated events with a way to book, above the live calendar ---------- */

.dont-miss { margin-top: 28px; text-align: left; }

.dont-miss__title,
.events__calendar-title {
  font: 700 22px/1.3 var(--font-display);
  letter-spacing: .02em;
}

.dont-miss__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.miss-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow .2s;
}

.miss-card:hover { box-shadow: 0 6px 18px -8px rgb(18 53 36 / .35); }

.miss-card__when {
  color: var(--green-600);
  font: 700 14px/1.3 var(--font-display);
}

.miss-card__name { font: 700 20px/1.25 var(--font-display); }

.miss-card__name a { color: inherit; text-decoration: none; }

.miss-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.miss-card__what { font-size: 15px; line-height: 22px; }

.miss-card__more {
  margin-top: auto;
  padding-top: 8px;
  color: var(--green-600);
  font: 700 14px/1.2 var(--font-display);
}

.events__calendar-title { margin-top: 34px; text-align: left; }
.events__card .events__calendar-title + .wa-widget { margin-top: 14px; }

@media (max-width: 759px) {
  .dont-miss__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Trip Ideas cards: how long the read is ---------- */

.trip__time {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  font: 500 13px/1 var(--font-ui);
  letter-spacing: .03em;
}

/* ---------- More to read: plain links, never a featured card ---------- */

.more-reading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 28px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgb(18 53 36 / .14);
}

.more-reading__title { font: italic 400 17px/1.5 var(--font-ui); }

.more-reading ul { display: grid; gap: 6px; }
.more-reading li { font-size: 15px; line-height: 23px; }

.more-reading--link {
  display: block;
  border-top: 0;
  padding-top: 0;
  text-align: center;
}

.more-reading--link a {
  font: 500 15px/1.3 var(--font-display);
}

@media (max-width: 599px) {
  .more-reading { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Gallery heading ---------- */

.gallery__head {
  margin-bottom: 24px;
  text-align: center;
}

.gallery__head p { margin-top: 8px; }

.gallery__head a {
  font-weight: 700;
  text-decoration-color: var(--green-500);
  text-underline-offset: 3px;
}

/* ---------- Getting Here: a way out to a map ---------- */

.drive-card__btn {
  margin-top: 20px;
  text-decoration: none;
}

/* ---------- Articles: byline, contents, places, keep reading ---------- */

.story__meta {
  margin-top: 12px;
  font-size: 14px;
}

.toc {
  margin-top: 24px;
  padding: 18px 24px 20px;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.toc__title { font: italic 400 17px/1.3 var(--font-ui); }

.toc ol {
  columns: 2;
  column-gap: 32px;
  margin: 10px 0 0;
  padding-left: 1.3em;
  font-size: 15px;
  line-height: 23px;
}

.toc li { break-inside: avoid; margin-bottom: 5px; }
.toc li::marker { color: var(--green-700); font-weight: 700; }

.story h2[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.places {
  margin-top: 40px;
  padding: 22px 26px 26px;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.places__title {
  font: 700 22px/1.3 var(--font-display);
  letter-spacing: .02em;
}

.places__grid {
  columns: 2;
  column-gap: 32px;
  margin-top: 14px;
}

.places__group { break-inside: avoid; margin-bottom: 18px; }
.places__group:last-child { margin-bottom: 0; }

.places__group h3 {
  font: italic 400 16px/1.3 var(--font-ui);
}

.places__group ul { margin-top: 6px; }
.places__group li { font-size: 15px; line-height: 24px; }

.keep-reading__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.more-reading--side {
  display: block;
  align-self: center;
  margin: 0;
  padding: 8px 8px 8px 24px;
  border-top: 0;
}

.more-reading--side ul { margin-top: 8px; }

@media (max-width: 759px) {
  .keep-reading__grid { grid-template-columns: minmax(0, 1fr); }
  .more-reading--side { padding: 4px; }
}

@media (max-width: 599px) {
  .toc ol { columns: 1; }
  .places__grid { columns: 1; }
  .places__group ul { columns: 2; column-gap: 16px; }
  .places__group li { break-inside: avoid; margin-bottom: 6px; font-size: 14px; line-height: 20px; }
}

/* ---------- Footer: the site's sections, for anyone who reaches the bottom ---------- */

.footer-plan ul {
  columns: 2;
  column-gap: 28px;
  margin-top: 12px;
}

.footer-plan li {
  margin-bottom: 8px;
  font-size: 14px;
  break-inside: avoid;
}

.footer-plan a {
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / .35);
  text-underline-offset: 4px;
}

.footer-plan a:hover { text-decoration-color: var(--green-500); }

.gallery__head .section-title { font-size: calc(var(--display-size) * .8); }

.places .places__title { margin-top: 0; }

/* ---------- Article photos: under each title, above the copy, with a location tag ---------- */

.story h2 + .story__figure { margin-top: 14px; }
.story__figure--place + * { margin-top: 14px; }

/* a portrait photo stays small enough to see whole on a laptop */
.story__figure--tall img { width: min(100%, 512px); }

.story__place {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 9px;
  font: 500 14px/20px var(--font-ui);
}

.story__place svg {
  flex: none;
  width: 16px;
  height: 20px;
  fill: var(--green-600);
}

/* A CrowdRiff video under a title. Until the embed arrives the box holds the space and links to the post. */
.story__embed {
  position: relative;
  width: min(100%, 360px);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.js .story__embed { aspect-ratio: 9 / 16; }

.story__embed-fallback {
  display: block;
  padding: 18px 20px;
  text-align: center;
}

.js .story__embed-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* holiday.js links the embed to the original post. A click on the video opens it, so CrowdRiff's invisible
   full-size pause button becomes a small one beside its mute button. */
.story__embed .cr__singleEmbedContainer > a {
  display: block;
  cursor: pointer !important;
}

.story__embed .cr__singleEmbedContainer > a:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -6px;
}

.story__embed .cr__singleEmbedContainer .clickStop {
  top: 10px;
  right: 50px;
  bottom: auto;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(0 0 0 / .5);
}

.story__embed .cr__singleEmbedContainer .clickStop:hover { background: rgb(0 0 0 / .7); }

.story__embed .cr__singleEmbedContainer .clickStop:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: none;
}

/* CrowdRiff's button has no icon: two bars */
.story__embed .cr__singleEmbedContainer .clickStop::before {
  content: "";
  width: 11px;
  height: 13px;
  border-inline: 3.5px solid var(--white);
}

/* the map widget wants more room than the reading column */
.story__wide {
  --wide: min(100vw - 2 * var(--gutter), 1120px);
  width: var(--wide);
  margin-left: calc(50% - var(--wide) / 2);
}

.story .faq__list { margin-top: 12px; }

/* ---------- The small article card inside a promo (the MICHELIN card) ---------- */

.trip--mini {
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: 8px;
  padding: 44px 20px 18px;
}

.trip--mini .trip__title {
  margin-block: 0 8px;
  font-size: 18px;
  line-height: 1.3;
}

.trip--mini .trip__time { top: 18px; }

/* smaller type over the photo, so a little more shade behind it */
.trip--mini .trip__img { opacity: .34; }
.trip--mini:hover .trip__img { opacity: .4; }

/* a photo with few pixels shows at its own size */
.story__figure--small img { width: min(100%, 466px); }

/* a listing widget along the bottom of a promo card, on white because its carousel fades to white */
.promo__widget {
  grid-column: 1 / -1;
  margin: clamp(12px, 3vw, 32px);
  padding: clamp(14px, 2vw, 24px);
  border-radius: var(--radius);
  background: var(--white);
}