/* Use the notifications chapter's existing responsive spacing everywhere. */
.ferry-landing #main > section:not(.hero) {
  padding-block: var(--section-space);
}

/* Let each chapter own its outer spacing, including map-backed chapters.
   Their artwork still covers the whole chapter, including the padding. */
.ferry-landing #main > .queue-section {
  position: relative;
  isolation: isolate;
  background: #5d2b16;
}
/* Keep artwork outside the inner layout's overflow clip. This also covers
   both padding bands while the Duo canvas loads or changes size. */
.ferry-landing #main > .queue-section > .queue-backdrop {
  inset: -12px;
  width: calc(100% + 24px);
  max-width: none;
  height: calc(100% + 24px);
  pointer-events: none;
}
.ferry-landing #main > .queue-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(270deg, #311b13dc, transparent 75%),
    linear-gradient(0deg, #311b13, transparent 20%);
}
.ferry-landing #main .queue-cinema::after { content: none; }
.ferry-landing #main .queue-cinema {
  position: static;
  padding-block: 0;
  margin-block: 0;
  background: transparent;
}
.ferry-landing #main .crossing-map {
  position: static;
  min-height: 0;
  padding-block: 0;
  margin-block: 0;
}
.ferry-landing #main .crossing-map-copy {
  padding-block: 0;
}

/* The car illustration reserves its own space below the copy on mobile.
   Remove only the extra chapter insets and desktop vertical centering. */
.ferry-landing #main > .carplay-section {
  position: relative;
  isolation: isolate;
}
.ferry-landing #main .carplay-scene {
  position: static;
}
.ferry-landing #main .carplay-heading {
  align-self: start;
  padding-top: 0;
}
.ferry-landing #main .carplay-figure figcaption {
  padding-bottom: 0;
}
@media (min-width: 701px) {
  .ferry-landing #main .carplay-heading { padding-bottom: 0; }
}