/* Services. Hero: a wide band, the title's first line straddles its lower edge.
   Authored moment: the two photographs open from the centre like a curtain,
   scrubbed by scroll; the module rail follows the module in view. */

/* ---------- Hero ---------- */
.hero--band { display: flex; flex-direction: column; }
.hero--band__fig { position: relative; margin: 0; order: -1; }   /* placed first; the text comes first in the DOM */
.hero--band__fig .hero__media { height: var(--band-media-h); }
.hero--band__fig .hero__media::after { content: ""; position: absolute; inset: 0; background: var(--scrim); pointer-events: none; }
.hero--band__fig .cap { position: absolute; top: 100%; right: var(--gutter); max-width: var(--measure-narrow); justify-content: flex-end; text-align: right; }
.hero--band__text { position: relative; z-index: var(--z-raise); padding-bottom: var(--band-tight); pointer-events: none; }
.hero--band__text :is(a, button, h1, p) { pointer-events: auto; }
.hero--band h1 { pointer-events: none; }   /* the title overlaps the caption row; let clicks reach the credit */
.hero--band h1 { margin-top: var(--cross-pull); max-width: var(--hero-title-max); }
.hero--band .cross::after { clip-path: inset(0 0 calc(100% - var(--cross-depth)) 0); }
.hero--band .hero__lead { margin-top: var(--s-6); }
/* Below 1280px the title's first line would run into the caption, so the straddle waits for wider screens */
@media (max-width: 79.99em) {
  .hero--band .hero__lead { margin-top: var(--s-4); }
  .hero--band__fig .cap { position: static; padding-inline: var(--gutter); text-align: left; justify-content: flex-start; max-width: none; }
  .hero--band h1 { margin-top: var(--s-5); max-width: none; }
  .hero--band .cross::after { content: none; }
}
@media (max-width: 63.99em) {
  .hero--band__fig .hero__media { height: var(--hero-media-phone); }
}

/* ---------- Module rail: sticky, follows the module in view ---------- */
.rail { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: var(--paper); border-block: var(--hair) solid var(--rule); }
.rail__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--col-gap); }
.rail a {
  display: flex; align-items: center; min-height: var(--control-h);
  padding-block: var(--s-2); color: var(--ink-2); text-decoration: none;
  font: var(--wt-medium) var(--fs-small) / var(--lh-small) var(--font-sans);
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% var(--rule-heavy) no-repeat;
  transition: color var(--t-quick) var(--ease-out), background-size var(--t-base) var(--ease-out);
}
.rail a:hover, .rail a.is-current { color: var(--ink); background-size: 100% var(--rule-heavy); }
@media (max-width: 63.99em) { .rail { display: none; } }
@media (max-height: 30em) { .rail { position: static; } }
/* Jump links land below the nav and the rail */
@media (min-width: 64em) { html:has(.rail) { scroll-padding-top: calc(var(--nav-h) + var(--control-h) + var(--s-5)); } }

/* ---------- Common starting points (night) ---------- */
.engage__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-items: start; }
.engage__head { margin-bottom: var(--s-3); }
.engage__list li {
  break-inside: avoid; border-top: var(--hair) solid var(--rule);
  font: italic var(--wt-medium) var(--fs-lead) / var(--lh-lead) var(--font-serif); color: var(--ink);
}
/* Each starting point leads to the module that answers it */
.engage__list a {
  display: block; padding-block: var(--s-4); color: inherit; text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% var(--hair) no-repeat;
  transition: color var(--t-quick) var(--ease-out), background-size var(--t-base) var(--ease-out);
}
.engage__list a:hover, .engage__list a:focus-visible { color: var(--accent); background-size: 100% var(--hair); }
@media (max-width: 47.99em) { .engage__groups { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Modules: title and intro always visible, the detail on demand ---------- */
.module { padding-block: var(--s-7); border-top: var(--hair) solid var(--ink); }
.module__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--col-gap); row-gap: var(--s-4); align-items: baseline; }
.module__intro h2 { grid-column: 1; grid-row: 1 / span 3; }
.module__intro > :not(h2) { grid-column: 2; color: var(--ink-2); }
.module__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: var(--s-5) var(--s-3); }
.module__cols h3 { margin-bottom: var(--s-3); padding-bottom: var(--s-3); border-bottom: var(--hair) solid var(--ink); }
.module__cols li { padding-block: var(--s-2); border-bottom: var(--hair) solid var(--rule); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
@media (max-width: 63.99em) {
  .module__intro { grid-template-columns: minmax(0, 1fr); }
  .module__intro h2, .module__intro > :not(h2) { grid-column: 1; grid-row: auto; }
}
@media (max-width: 47.99em) { .module__cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); } }

.module-fig { margin-block: var(--s-4) var(--s-8); }
/* The wide photograph runs from window edge to window edge */
.module-fig--wide { margin-inline: var(--bleed-left) var(--bleed-right); }
.module-fig--wide .fig__media { height: var(--band-media-h); }
.module-fig--wide .fig__media img { height: 100%; }
.module-fig--wide .cap { padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }
.module-fig--offset, .module-fig--offset-left { width: var(--fig-offset-w); margin-left: auto; }
.module-fig--offset-left { margin-left: 0; margin-right: auto; }   /* hung from the left, so offset photographs alternate sides */
.module-fig--offset .fig__media, .module-fig--offset-left .fig__media { aspect-ratio: 3 / 2; }
@media (max-width: 47.99em) {
  .module-fig--wide .fig__media, .module-fig--offset .fig__media, .module-fig--offset-left .fig__media { aspect-ratio: 4 / 5; height: auto; }
  .module-fig--offset, .module-fig--offset-left { width: auto; }
}

/* Curtain scrubbed by scroll where supported (the IO wipe is the fallback) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .module-fig[data-scroll] .fig__media, .js .module-fig[data-scroll].is-in .fig__media {
      clip-path: inset(0 50% 0 50%); transition: none;
      animation: curtain linear both; animation-timeline: view(); animation-range: entry 0% cover 45%;
    }
    .js .module-fig[data-scroll] .fig__media img, .js .module-fig[data-scroll].is-in .fig__media img {
      transition: none; animation: curtain-img linear both; animation-timeline: view(); animation-range: entry 0% cover 60%;
    }
    @keyframes curtain { to { clip-path: inset(0 0 0 0); } }
    @keyframes curtain-img { from { transform: scale(var(--zoom-reveal)); } to { transform: none; } }
  }
}

/* ---------- Choose ---------- */
.choose__foot { margin-top: var(--s-8); row-gap: var(--s-6); align-items: end; }
.choose__note { grid-column: 1 / span 7; color: var(--ink-2); }
/* The way into the route planner: a small night panel, so the one next step on this section stands out */
.choose__plan { grid-column: 9 / -1; padding: var(--sheet-pad); }
.choose__plan p { color: var(--night-ink); }
@media (max-width: 63.99em) { .choose__note, .choose__plan { grid-column: 1 / -1; } }