.headrest-product {
  overflow: hidden;
  background: #050505;
  border-top: 1px solid #242424;
}

.headrest-hero {
  position: relative;
  min-height: 900px;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.headrest-hero-image,
.headrest-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.headrest-hero-image {
  object-fit: cover;
  object-position: center;
}

.headrest-hero-shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .76) 35%, rgba(0, 0, 0, .08) 75%),
    linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 45%);
}

.headrest-content {
  position: relative;
  z-index: 2;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 130px var(--pad) 100px;
}

.headrest-content h2,
.headrest-media h3,
.headrest-detail h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: .92;
  letter-spacing: .01em;
}

.headrest-content h2 {
  max-width: 760px;
  font-size: clamp(64px, 8.2vw, 122px);
}

.headrest-ja {
  max-width: 680px;
  margin: 30px 0 24px;
  font-size: clamp(21px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1.5;
}

.headrest-model {
  margin: 0 0 36px;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.05;
}

.headrest-model span {
  font-family: var(--jp);
  font-size: 13px;
  letter-spacing: .08em;
}

.headrest-media {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr .78fr 1.18fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  background: #0b0b0b;
}

.headrest-media h3,
.headrest-detail h3 {
  font-size: clamp(42px, 5vw, 72px);
}

.headrest-media-copy > p:not(.section-index),
.headrest-detail-copy > p:not(.section-index) {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.headrest-media-copy .media-note {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: #777;
  font-size: 11px;
}

.headrest-video-frame,
.headrest-product-shot {
  position: relative;
  margin: 0;
  border: 1px solid #3b3b3b;
  background: #000;
}

.headrest-video-frame {
  width: min(100%, 390px);
  justify-self: center;
  box-shadow: 22px 22px 0 rgba(255, 133, 0, .08);
}

.headrest-video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
}

.headrest-video-frame > span,
.headrest-product-shot figcaption {
  display: block;
  padding: 11px 14px;
  color: #d0d0cc;
  border-top: 1px solid #333;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
}

.headrest-product-shot img {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  object-fit: cover;
  object-position: center;
}

.headrest-detail {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
  background: #080808;
}

.headrest-detail-image img {
  width: 100%;
  height: 100%;
  min-height: 650px;
  object-fit: cover;
}

.headrest-detail-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 8vw, 130px) var(--pad);
}

.headrest-detail dl {
  margin: 42px 0 0;
  border-top: 1px solid var(--line);
}

.headrest-detail dl div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.headrest-detail dt {
  color: var(--orange);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .14em;
}

.headrest-detail dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .headrest-hero {
    min-height: 820px;
  }

  .headrest-hero-image {
    object-position: 62% center;
  }

  .headrest-hero-shade {
    background: linear-gradient(0deg, rgba(0, 0, 0, .96) 2%, rgba(0, 0, 0, .2) 82%);
  }

  .headrest-content {
    align-self: end;
    padding-top: 260px;
  }

  .headrest-media {
    grid-template-columns: .75fr 1fr;
  }

  .headrest-media-copy {
    grid-column: 1 / 3;
    max-width: 760px;
  }
}

@media (max-width: 700px) {
  .headrest-hero {
    min-height: 760px;
  }

  .headrest-content {
    padding: 280px var(--pad) 58px;
  }

  .headrest-content h2 {
    font-size: clamp(50px, 15vw, 66px);
  }

  .headrest-ja {
    margin-top: 24px;
    font-size: 18px;
  }

  .headrest-model {
    font-size: 30px;
  }

  .headrest-media {
    grid-template-columns: 1fr;
  }

  .headrest-media-copy {
    grid-column: auto;
  }

  .headrest-video-frame {
    width: min(100%, 330px);
  }

  .headrest-product-shot img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .headrest-detail {
    grid-template-columns: 1fr;
  }

  .headrest-detail-image img {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .headrest-detail-copy {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .headrest-detail dl div {
    grid-template-columns: 90px 1fr;
  }
}