/* A restrained web scale layered over the publication-inspired chapter styles. */
body {
  font-size: 16px;
}

.hero {
  min-height: 560px;
  max-width: 1440px;
  margin: 14px auto;
}

.hero-copy,
.hero-panel {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

.hero h1 {
  font-size: clamp(4.9rem, 7.8vw, 7.25rem);
}

.chapter-hero {
  max-width: 1180px;
  margin: 14px auto 4.5rem;
  padding: 1.5rem;
  grid-template-columns: minmax(300px, .9fr) minmax(390px, 1.1fr);
}

.chapter-hero .copy {
  min-height: 410px;
  padding: 2rem;
}

.chapter-hero .art {
  min-height: 410px;
  max-height: 520px;
}

.script {
  font-size: clamp(4.15rem, 6.4vw, 5.75rem);
}

.section,
.choose,
.itinerary,
.river,
.more-stops,
.hikes {
  max-width: 1120px;
  margin-top: 4.75rem;
  margin-bottom: 4.75rem;
}

.intro,
.chapter-intro {
  max-width: 1120px;
  margin-top: 4.75rem;
}

.section > h2,
.section-heading h2,
.chapter-intro h2,
.more-stops h2,
.intro h2,
.hikes h2,
.wildlife h2,
.sunset h2 {
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 600;
  line-height: 1.1;
}

.section > .intro,
.lead,
.chapter-intro > p,
.intro > p {
  font-size: 1.05rem;
}

.cards {
  gap: .85rem;
  margin-top: 1.5rem;
}

.card {
  padding: 1.15rem 1.2rem;
}

.card h3 {
  font-size: 1.35rem;
}

.feature {
  max-height: 540px;
}

.feature img {
  min-height: 320px;
}

.feature .copy {
  padding: 1.75rem;
  overflow: auto;
}

.story-grid,
.restaurant-grid {
  max-width: 1120px;
  gap: .9rem;
}

.story {
  min-height: 285px;
  padding: 1.5rem;
}

.restaurant {
  min-height: 355px;
  padding: 1.5rem 1.65rem 1.7rem;
}

.lake-card {
  min-height: 350px;
  padding: 1.75rem;
}

.wildlife,
.sunset {
  max-width: 1120px;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.quote {
  font-size: clamp(3.2rem, 5.8vw, 5rem);
}

@media (max-width: 900px) {
  .hero {
    min-height: 650px;
    margin: 10px;
  }

  .hero h1 {
    font-size: 5rem;
  }

  .chapter-hero {
    margin: 10px 10px 3.5rem;
    grid-template-columns: 1fr;
  }

  .chapter-hero .copy,
  .chapter-hero .art {
    min-height: 340px;
  }

  .feature {
    max-height: none;
  }
}

@media (max-width: 620px) {
  .hero {
    min-height: 600px;
  }

  .hero-copy,
  .hero-panel {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .hero h1,
  .script {
    font-size: 3.95rem;
  }

  .chapter-hero .copy,
  .chapter-hero .art {
    min-height: 300px;
  }

  .section,
  .choose,
  .itinerary,
  .river,
  .more-stops,
  .hikes {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
}