.page-about { background: #0b1312; }
.hero {
  min-height: 72vh;
  display: grid;
  align-items: end;
  padding: 7rem clamp(1.4rem, 8vw, 8rem) 5.5rem;
  background: linear-gradient(90deg, rgba(7, 14, 13, 0.86), rgba(7, 14, 13, 0.1)), url('/assets/images/motorcycle-road-hero.webp') center / cover;
}
.hero > div { max-width: 920px; }
.hero h1 { margin: 0.65rem 0 1.3rem; }
.hero p { max-width: 620px; margin: 0; font: 400 clamp(1.2rem, 2.3vw, 1.55rem)/1.55 var(--display-font); }
.story { width: min(calc(100% - 40px), 1080px); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 0; }
.rider-intro {
  width: min(760px, 100%);
  margin: clamp(4rem, 7vw, 6rem) auto;
  color: var(--warm-white);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}
.rider-intro strong { font-weight: 700; }
.chapter {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
  margin: clamp(5rem, 10vw, 8rem) 0;
}
.chapter h2 { margin: 0.55rem 0 0; }
.chapter .copy { max-width: 650px; }
.chapter .copy > p, .chapter .copy > .aside { font-size: 18px; font-weight: 400; line-height: 1.65; }
.chapter .copy > p { margin: 0 0 1.7rem; }
.aside { padding: 1.5rem 1.8rem; background: #101b19; border-left: 4px solid var(--road-yellow); }
.about-authentic-photos, .present-day-photo { width: min(980px, 100%); margin: clamp(4rem, 8vw, 7rem) auto; }
.about-authentic-photos figure, .present-day-photo { margin: 0; }
.about-authentic-photos img, .present-day-photo img { display: block; width: 100%; height: auto; border-radius: 5px; }
.about-authentic-photos figcaption, .present-day-photo figcaption { margin: 0.8rem 0 0; }
.motocross-photo { margin-bottom: clamp(4rem, 7vw, 6rem) !important; }
.journey-primary { margin-bottom: 2rem !important; }
.journey-supporting { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.journey-supporting figure { min-width: 0; }
.journey-supporting img { height: 480px; object-fit: cover; }
.journey-aurora img { object-position: center; }
.journey-camp img { object-position: left center; }
.present-day-photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.end { margin-top: clamp(5rem, 10vw, 8rem); padding: clamp(4rem, 8vw, 6rem) 1rem; border-top: 1px solid #33443f; text-align: center; }
.end h2 { max-width: 820px; margin: 0.6rem auto 0; }
.tag { margin: 2rem 0 0; color: var(--road-yellow); font: 700 clamp(1.65rem, 4vw, 2.2rem)/1.2 var(--display-font); white-space: nowrap; }

@media (min-width: 768px) and (max-width: 1024px) {
  .rider-intro { font-size: 18px; }
  .chapter .copy > p, .chapter .copy > .aside { font-size: 17px; }
}

@media (max-width: 767px) {
  .hero { min-height: 64vh; padding: 5rem 1.35rem 4rem; background-position: 60% center; }
  .hero h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .story { width: min(calc(100% - 32px), 1080px); padding-top: 3rem; }
  .rider-intro { margin: 3.5rem auto; font-size: 17px; }
  .chapter { grid-template-columns: 1fr; gap: 1.5rem; margin: 5rem 0; }
  .chapter .copy > p, .chapter .copy > .aside { font-size: 16px; }
  .journey-supporting { grid-template-columns: 1fr; gap: 2.5rem; }
  .journey-supporting img { height: auto; object-fit: contain; }
}

@media (max-width: 360px) {
  .end h2 { font-size: 2.35rem; }
  .tag { font-size: 1.6rem; }
}