.site-nav a[aria-current="page"]::after { width: 100%; }

.journeys-hero { min-height: 720px; height: 88svh; }
.journeys-hero .hero-media { background: url("images/water-town-night.jpg") center 48% / cover no-repeat; }
.journeys-hero .hero-shade { background: linear-gradient(90deg, rgba(12,14,12,.82) 0%, rgba(12,14,12,.45) 55%, rgba(12,14,12,.2) 100%), linear-gradient(0deg, rgba(9,10,8,.46), transparent 55%); }
.journeys-hero h1 { max-width: 850px; }
.journeys-hero h1 em { color: #e9b8a2; }
.journeys-hero .hero-lede { max-width: 620px; }

.video-journal { background: var(--paper); }
.video-heading > p { color: var(--ink-soft); }
.video-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 68px 26px; align-items: start; }
.video-story { grid-column: span 4; }
.video-story.is-landscape { grid-column: span 6; }
.video-frame { position: relative; overflow: hidden; color: white; background: #11130f; box-shadow: 0 22px 54px rgba(42,34,25,.12); }
.is-portrait .video-frame { aspect-ratio: 9 / 16; }
.is-landscape .video-frame { aspect-ratio: 16 / 9; }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #11130f; }
.video-caption { display: grid; grid-template-columns: 34px 1fr; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.story-index { color: var(--red); font-family: var(--serif); font-size: .9rem; }
.video-caption .mini-label { margin-bottom: 8px; }
.video-caption h3 { margin-bottom: 13px; font-size: clamp(1.75rem, 2.5vw, 2.35rem); }
.video-caption p:last-child { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }

.journeys-note { color: white; background: #20231f; }
.journeys-note-grid { display: grid; grid-template-columns: .42fr 1fr; gap: 10%; align-items: start; }
.journeys-note h2 { max-width: 930px; }
.journeys-note h2 em { color: #c88375; }
.journeys-note-grid > div > p { max-width: 650px; margin: 34px 0 38px; color: #afb1ab; }

@media (max-width: 1050px) {
  .video-story { grid-column: span 6; }
  .video-story.is-landscape { grid-column: span 12; }
  .journeys-note-grid { grid-template-columns: .35fr 1fr; gap: 7%; }
}

@media (max-width: 760px) {
  .journeys-hero { min-height: 760px; height: 100svh; }
  .journeys-hero .hero-media { background-position: 58% center; }
  .video-grid { gap: 58px; }
  .video-story, .video-story.is-landscape { grid-column: 1 / -1; }
  .video-story.is-portrait { width: min(100%, 480px); margin-inline: auto; }
  .video-caption { padding-top: 20px; }
  .journeys-note-grid { grid-template-columns: 1fr; }
  .journeys-note-grid > .eyebrow { margin-bottom: 34px; }
}