:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111820;
  color: #f5f2eb;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
.landing {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 48rem;
  min-height: max(48rem, 100svh);
  padding: 3rem 5.5vw 3rem;
}
.landscape { position: absolute; z-index: -3; inset: 0; }
.landscape img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 76%;
}
.landing::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, rgb(8 14 20 / 91%) 0%, rgb(8 14 20 / 72%) 24%, rgb(8 14 20 / 13%) 56%, transparent 75%), linear-gradient(180deg, rgb(8 14 20 / 15%) 0%, transparent 60%, rgb(8 14 20 / 55%) 100%);
}
.masthead { display: flex; align-items: center; gap: .9rem; }
.brand-mark { width: 1.4rem; height: 2px; background: #ef6556; }
.identifier { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: -.025em; }
.identifier span { color: #f39a86; }
.introduction {
  width: min(100%, 32rem);
  margin-top: auto;
  margin-bottom: auto;
  padding-block: 3.5rem 4rem;
}
.eyebrow {
  margin: 0 0 1.4rem;
  font-size: .75rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #eea595;
}
h1 {
  margin: 0 0 2.25rem -.065em;
  font-size: clamp(5rem, 8.7vw, 8.5rem);
  font-weight: 600;
  line-height: .88;
  letter-spacing: -.075em;
}
h1 span { display: block; }
h1 .surname { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; letter-spacing: -.07em; }
.copy { width: min(100%, 23rem); }
.copy p {
  margin: 0;
  color: #e0e2e2;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}
.copy p + p { margin-top: 1rem; color: #c4cbd0; }
.copy strong { font-weight: 500; color: #fff4e9; }
.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #dce0e2;
}
.footer p { margin: 0; }
.bike-label { text-align: right; }
.bike-label span { display: block; color: #f1a392; font-size: .75rem; letter-spacing: .2em; margin-bottom: .4rem; }
.bike-label strong { font-size: 1.5rem; font-weight: 400; letter-spacing: -.03em; }
@media (min-width: 1800px) {
  .introduction { width: 36rem; }
  .copy { width: 26rem; }
  .copy p { font-size: 1.1875rem; }
}
@media (max-width: 800px), (max-aspect-ratio: 4/3) {
  .landing {
    min-height: max(48rem, 100svh);
    padding: 1.75rem 1.5rem;
  }
  .landscape img { object-position: 65% 76%; }
  .landing::before {
    background: linear-gradient(180deg, rgb(8 14 20 / 75%) 0%, rgb(8 14 20 / 70%) 34%, rgb(8 14 20 / 60%) 56%, transparent 76%, rgb(8 14 20 / 70%) 100%);
  }
  .introduction { width: 100%; margin: 0; padding-block: 3.5rem 17rem; }
  .eyebrow { margin-bottom: 1.2rem; font-size: .75rem; }
  h1 { font-size: clamp(4.75rem, 17vw, 7rem); margin-bottom: 1.8rem; }
  h1 span { display: inline; }
  h1 .surname { display: block; }
  .copy { max-width: 22rem; }
  .copy p { font-size: 1rem; line-height: 1.55; }
  .copy p + p { margin-top: .85rem; color: #e0e2e2; }
  .footer { margin-top: auto; }
  .footer > p { max-width: 12rem; font-size: .75rem; letter-spacing: .12em; }
  .bike-label strong { font-size: 1.25rem; }
}
@media (max-width: 360px) {
  .landing { padding-inline: 1.25rem; }
  .introduction { padding-top: 2.5rem; }
  h1 { font-size: 4.5rem; }
}
@media (min-width: 801px) and (max-height: 750px) and (min-aspect-ratio: 4/3) {
  .landing { min-height: max(42rem, 100svh); padding-block: 2rem; }
  .introduction { padding-block: 2.5rem; }
  h1 { font-size: 6rem; margin-bottom: 1.8rem; }
  .copy { max-width: 21rem; }
}