/* Panoramic travel stories: one image and an overlapping editorial caption. */
.travel-stories-page {
  --stories-ink: #102d28;
  --stories-paper: #f8f6ee;
  --stories-accent: #ad321c;
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--stories-ink);
  background: radial-gradient(ellipse at 48% 35%, #e2e8d9, transparent 75%), #d2ddcb;
}
main > .travel-stories-page[id] { scroll-margin-top: 72px; }
.stories-shell { width: min(100%, 1920px); margin-inline: auto; padding: 5.25% 2.9% 4.1%; }
.stories-intro { position: relative; text-align: center; margin-bottom: 30px; }
.stories-kicker { position: absolute; left: 1.65%; top: 12px; margin: 0; text-align: left; font-size: clamp(11px, .9vw, 16px); line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; }
.stories-kicker::after { content: ''; display: block; width: 34px; height: 1px; margin-top: 10px; background: var(--stories-accent); }
.stories-intro h2 { margin: 0; font: 400 clamp(40px, 4.4vw, 82px)/1 var(--font-display); letter-spacing: -.04em; }
.stories-intro em { color: var(--stories-accent); font-weight: 400; }
.stories-subtitle { margin: 16px auto 0; font-size: clamp(15px, 1.25vw, 23px); line-height: 1.3; }
.stories-branch { position: absolute; z-index: -1; right: -30px; top: 4%; width: 160px; height: auto; opacity: .2; pointer-events: none; }
.stories-carousel { position: relative; }
.stories-track { display: grid; outline-offset: 6px; }
.stories-slide { min-width: 0; grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(18px); transition: opacity 800ms ease, transform 800ms ease, visibility 800ms; }
.stories-slide.is-active { opacity: 1; visibility: visible; transform: translateX(0); z-index: 1; }
.stories-photo { height: clamp(320px, 32.8vw, 630px); margin: 0; overflow: hidden; border-radius: 20px; }
.stories-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.stories-copy { position: relative; display: grid; grid-template-columns: 1fr 1.52fr auto; align-items: center; width: 78%; min-height: 112px; margin: -60px auto 0; padding: 18px 3.5% 18px 4.5%; border-radius: 22px; background: var(--stories-paper); }
.stories-heading time, .stories-date { display: block; font-size: clamp(11px, .92vw, 16px); letter-spacing: .2em; text-transform: uppercase; }
.stories-heading h3 { margin: 3px 0 0; font: 400 clamp(36px, 3vw, 56px)/.95 var(--font-display); letter-spacing: -.04em; }
.stories-heading h3::after { content: ''; display: block; width: 43px; height: 2px; background: var(--stories-accent); margin-top: 12px; }
.stories-deck { margin: 0 20px 0 0; padding-left: 12%; border-left: 1px solid #c8ceca; font-size: clamp(15px, 1.1vw, 20px); line-height: 1.3; }
.stories-read { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 7px 20px; border: 1px solid var(--stories-accent); border-radius: 999px; color: var(--stories-accent); background: transparent; font: 400 clamp(17px, 1.25vw, 23px)/1 var(--font-display); white-space: nowrap; cursor: pointer; transition: background-color 180ms, color 180ms; }
.stories-read svg, .stories-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.stories-read:hover { color: var(--stories-paper); background: var(--stories-accent); }

.stories-all-link {
  display: block;
  width: fit-content;
  margin: 30px auto 0;
  color: var(--stories-ink);
  font: 500 clamp(18px, 1.25vw, 23px)/1.2 var(--font-display);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
}
.stories-all-link::after {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 5px;
  content: "";
  background: var(--stories-accent);
  transform: scaleX(.28);
  transform-origin: center;
  transition: transform 220ms ease;
}
.stories-all-link:hover::after,
.stories-all-link:focus-visible::after { transform: scaleX(1); }

.stories-controls[hidden] { display: none; }
.stories-arrow { position: absolute; z-index: 2; top: calc(clamp(320px, 32.8vw, 630px) * .475); display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--stories-paper); color: var(--stories-ink); cursor: pointer; transform: translateY(-50%); }
.stories-prev { left: -8px; }
.stories-prev svg { transform: rotate(180deg); }
.stories-next { right: -8px; }
.stories-arrow:hover { background: #e8eddf; }
.travel-stories-page :focus-visible { outline: 2px solid var(--stories-accent); outline-offset: 4px; }
.travel-stories-page ::selection { color: var(--stories-paper); background: var(--stories-ink); }
.back-to-top.is-over-blog { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 1100px) {
  .stories-kicker { position: static; margin-bottom: 20px; text-align: center; }
  .stories-kicker br { display: none; }
  .stories-kicker::after { margin-inline: auto; }
  .stories-copy { width: 86%; padding: 18px; grid-template-columns: 1fr 1.3fr auto; }
  .stories-deck { padding-left: 22px; margin-right: 22px; }
  .stories-read { padding-inline: 20px; }
  .stories-shell { padding-bottom: 60px; }
}
@media (max-width: 700px) {
  .stories-shell { padding: 38px 20px 58px; }
  .stories-all-link { margin-top: 24px; font-size: 20px; }
  .stories-intro { margin-bottom: 26px; }
  .stories-intro h2 { font-size: clamp(40px, 9vw, 56px); }
  .stories-subtitle { font-size: 15px; line-height: 1.5; }
  .stories-subtitle br { display: none; }
  .stories-photo { height: 340px; border-radius: 16px; }
  .stories-copy { width: 88%; min-height: 210px; margin-top: -40px; padding: 20px; grid-template-columns: 1fr; gap: 14px; border-radius: 20px; }
  .stories-heading h3 { font-size: 40px; }
  .stories-deck { padding: 0; margin: 0; border: 0; font-size: 16px; }
  .stories-read { width: fit-content; font-size: 19px; }
  .stories-arrow { top: 155px; width: 46px; height: 46px; }
  .stories-branch { width: 110px; right: -40px; }
}
@media (prefers-reduced-motion: reduce) { .stories-slide, .stories-read, .stories-all-link::after { transition: none; transform: none; } }