* { box-sizing: border-box; }

:root {
  --black: #080808;
  --ink: #101010;
  --paper: #f2eee6;
  --muted: #b9b2a8;
  --gold: #d49a2a;
  --line: rgba(212,154,42,.38);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

figure { margin: 0; }

h1, h2, h3, .button, .eyebrow, .price, footer {
  font-family: Arial, Helvetica, sans-serif;
}

h1, h2 {
  margin: 0;
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.045em;
}

h1 { font-size: clamp(4.8rem, 10vw, 10rem); }
h2 { font-size: clamp(3.4rem, 7vw, 7.5rem); }

p {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.55;
}

.eyebrow {
  margin: 0 0 1.2rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.gold { color: var(--gold); }

.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  padding: clamp(2rem, 5vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 85% 70%, rgba(87,35,15,.25), transparent 36%),
    var(--black);
}

.hero-copy h1 { margin-bottom: 2rem; }

.lead {
  max-width: 34rem;
  color: #ddd7cf;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
}

.text-link {
  width: fit-content;
  margin-top: 1.5rem;
  color: var(--gold);
  font: 800 .8rem Arial, sans-serif;
  letter-spacing: .14em;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: .45rem;
}

.hero-image {
  min-height: 100vh;
  background: #151515;
}

.hero-image img { object-position: center center; }

.story {
  max-width: 1380px;
  margin: auto;
  padding: clamp(6rem, 10vw, 11rem) clamp(1.5rem, 6vw, 6rem);
}

.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
}

.copy { max-width: 35rem; }
.copy h2 { margin-bottom: 2.2rem; }
.copy .intro { font-size: 1.6rem; font-style: italic; }

.portrait.tall {
  height: min(74vw, 850px);
  max-height: 850px;
}

.duo {
  max-width: 1500px;
  margin: auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem) clamp(7rem, 12vw, 12rem);
  display: grid;
  grid-template-columns: 1.45fr .55fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
}

.duo .wide { height: clamp(390px, 55vw, 720px); }
.duo .small-portrait { height: clamp(330px, 43vw, 570px); }

.grit {
  position: relative;
  max-width: 1380px;
  margin: auto;
  padding: clamp(5rem, 9vw, 10rem) clamp(1.5rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: clamp(2rem, 6vw, 7rem);
  border-top: 1px solid var(--line);
}

.grit-title { align-self: start; }
.grit-title h2 { max-width: 800px; }

.grit-image {
  grid-row: span 2;
  height: clamp(560px, 67vw, 900px);
}

.grit-copy {
  max-width: 38rem;
  align-self: end;
  padding-top: 3rem;
}

.grit-copy p:first-child {
  font-size: 1.65rem;
  font-style: italic;
}

.crescendo {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #090909;
}

.crescendo figure {
  position: absolute;
  inset: 0;
}

.crescendo img {object-fit: contain;
  object-position: 95% 30%;
  filter: brightness(1.25);
}

.crescendo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.46) 42%, rgba(0,0,0,.05) 72%);
}

.crescendo-copy {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: min(52rem, 60%);
  padding: clamp(3rem, 7vw, 8rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.crescendo-copy h2 { margin-bottom: 2rem; }
.crescendo-copy p:last-child { max-width: 31rem; font-size: 1.35rem; }

.experience {
  max-width: 1380px;
  margin: auto;
  padding: clamp(7rem, 11vw, 12rem) clamp(1.5rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: clamp(3rem, 9vw, 10rem);
}

.price {
  margin: 1.5rem 0 0;
  color: var(--gold);
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 900;
}

.experience-copy {
  align-self: center;
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 4vw, 4rem);
}

.experience-copy h3 {
  margin: 0 0 2rem;
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: .16em;
}

.cta {
  text-align: center;
  padding: clamp(7rem, 12vw, 13rem) 1.5rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(212,154,42,.10), transparent 32%),
    #0c0b0a;
  border-top: 1px solid var(--line);
}

.cta h2 { margin-bottom: 2rem; }
.cta > p:not(.eyebrow):not(.fineprint) { margin: 0 auto 2.5rem; }

.button {
  display: inline-block;
  padding: 1.2rem 1.7rem;
  background: var(--gold);
  color: #070707;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-decoration: none;
}

.fineprint {
  margin-top: 1.7rem;
  color: var(--muted);
  font: 700 .7rem Arial, sans-serif;
  letter-spacing: .14em;
}

footer {
  padding: 2rem;
  text-align: center;
  color: #8e877e;
  font-size: .7rem;
  letter-spacing: .14em;
  border-top: 1px solid #24211d;
}

footer span { color: var(--gold); }

@media (max-width: 800px) {
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: 68vh;
    padding: 4rem 1.5rem 3rem;
  }

  .hero-image { min-height: 58vh; }

  .split,
  .grit,
  .experience {
    grid-template-columns: 1fr;
  }

  .story { padding-top: 6rem; }

  .portrait.tall { height: 115vw; }

  .duo {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .duo .wide,
  .duo .small-portrait { height: 62vw; }

  .grit-image {
    grid-row: auto;
    height: 125vw;
  }

  .grit-copy { padding-top: 0; }

  .crescendo {
    min-height: 86vh;
  }

  .crescendo::after {
    background: linear-gradient(0deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.05) 100%);
  }

  .crescendo-copy {
    width: 100%;
    min-height: 86vh;
    justify-content: end;
    padding: 3rem 1.5rem;
  }

  .crescendo img { object-position: center top; }

  .experience-copy {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 2rem 0 0;
  }
}
.purple-football {
    filter: brightness(1) !important;
}