/* Shared layouts for the three audience pages. */
.audience-opening,
.audience-consider {
  background: var(--paper);
  color: var(--ink);
}

.audience-opening {
  padding-block: clamp(48px, 6vw, 88px) clamp(100px, 10vw, 150px);
}

.audience-title {
  max-width: 100%;
  font: 800 clamp(76px, 13vw, 184px) / .93 var(--display);
  letter-spacing: -.02em;
}

.audience-opening-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7%;
  align-items: start;
  margin-top: clamp(44px, 5vw, 72px);
  padding-left: 16%;
}

.audience-ja-title {
  font-size: clamp(28px, 3.1vw, 43px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.audience-opening-copy > .body-copy {
  max-width: 34em;
  padding-top: 4px;
}

.audience-experience {
  background: var(--surface-gray-forward);
  color: var(--ink);
  padding-block: clamp(84px, 9vw, 132px) clamp(112px, 10vw, 156px);
}

.audience-photo-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 9%;
  align-items: start;
}

.audience-experience-copy .body-copy {
  margin-top: 32px;
}

.audience-experience-copy .text-link {
  margin-top: 20px;
}

.audience-photo {
  min-width: 0;
  margin-top: clamp(58px, 7vw, 100px);
}

.audience-photo img {
  width: 100%;
  height: auto;
}

.audience-photo figcaption {
  margin-top: 18px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.8;
}

.audience-experience-reverse .audience-photo-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.audience-experience-reverse .audience-photo {
  grid-column: 1;
  grid-row: 1;
  margin-top: 24px;
}

.audience-experience-reverse .audience-experience-copy {
  grid-column: 2;
  grid-row: 1;
  padding-top: 76px;
}

.audience-consider {
  padding-block: clamp(84px, 9vw, 132px) clamp(112px, 11vw, 166px);
}

.audience-editorial-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: 12%;
  align-items: start;
}

.audience-word {
  font: 800 clamp(64px, 7.6vw, 110px) / .98 var(--display);
  letter-spacing: -.02em;
}

.audience-editorial-copy {
  padding-top: 86px;
}

.audience-small-title {
  margin-bottom: 26px;
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.audience-editorial-copy .text-link {
  margin-top: 20px;
}

.audience-contact {
  background: var(--surface-gray-backward);
  color: var(--ink);
  padding-block: clamp(82px, 8vw, 120px) clamp(90px, 9vw, 136px);
}

.audience-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9%;
  align-items: start;
}

.audience-contact-copy {
  max-width: 35em;
  padding-top: 46px;
}

.audience-contact-copy .press-button {
  max-width: calc(100% - 4px);
  margin-top: 30px;
}

@media (max-width: 1024px) {
  .audience-opening-copy { padding-left: 6%; gap: 6%; }
  .audience-photo-layout,
  .audience-experience-reverse .audience-photo-layout { gap: 6%; }
  .audience-editorial-layout { gap: 8%; }
}

@media (max-width: 800px) {
  .audience-opening { padding-block: 44px 104px; }
  .audience-title { font-size: clamp(76px, 15vw, 120px); }
  .audience-opening-copy { grid-template-columns: 1fr; gap: 26px; padding-left: 12%; }
  .audience-ja-title { font-size: clamp(28px, 4.8vw, 38px); }
  .audience-opening-copy > .body-copy { padding-top: 0; }
  .audience-photo-layout,
  .audience-experience-reverse .audience-photo-layout { grid-template-columns: 1fr; gap: 0; }
  .audience-experience-copy { max-width: 600px; }
  .audience-photo { width: 88%; margin: 44px 0 0 auto; }
  .audience-experience-reverse .audience-photo { grid-column: auto; grid-row: auto; margin: 44px auto 0 0; }
  .audience-experience-reverse .audience-experience-copy { grid-column: auto; grid-row: auto; padding-top: 0; margin-left: 8%; }
  .audience-editorial-layout { grid-template-columns: 1fr; gap: 38px; }
  .audience-word { font-size: clamp(62px, 11vw, 86px); }
  .audience-editorial-copy { max-width: 600px; padding-top: 0; margin-left: 12%; }
  .audience-contact-layout { grid-template-columns: 1fr; gap: 30px; }
  .audience-contact-copy { padding-top: 0; margin-left: 12%; }
}

@media (max-width: 520px) {
  .audience-opening { padding-block: 32px 88px; }
  .audience-title { font-size: clamp(68px, 17vw, 88px); }
  .audience-opening-copy { margin-top: 34px; padding-left: 0; }
  .audience-ja-title { font-size: clamp(26px, 6.8vw, 32px); }
  .audience-experience { padding-block: 68px 94px; }
  .audience-experience-copy .body-copy { margin-top: 26px; }
  .audience-photo { width: 100%; margin-top: 34px; }
  .audience-experience-reverse .audience-photo { margin-top: 34px; }
  .audience-experience-reverse .audience-experience-copy { margin-left: 0; }
  .audience-photo figcaption { font-size: 12px; margin-top: 14px; }
  .audience-consider { padding-block: 64px 90px; }
  .audience-word { font-size: clamp(60px, 14vw, 74px); }
  .audience-editorial-copy { margin-left: 0; }
  .audience-small-title { font-size: 25px; }
  .audience-contact { padding-block: 64px 82px; }
  .audience-contact-copy { margin-left: 0; }
  .audience-contact-copy .press-button { padding-inline: 18px; }
}