/* Editorial hero: live type over a transparent portrait, with nail art kept clear. */
.hero--editorial {
  position: relative;
  display: block;
  min-height: 625px;
  padding: 52px 0 50px;
  isolation: isolate;
}
.hero--editorial::before {
  content: '';
  position: absolute;
  width: 410px;
  height: 410px;
  right: 1%;
  top: 58px;
  background: #f5e7e5;
  border-radius: 50%;
  z-index: -2;
}
.hero--editorial .hero-image {
  position: absolute;
  width: min(700px, 62%);
  right: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
}
.hero--editorial .hero-image > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  -webkit-mask-image: url('images/hero-face-hand-cutout.png');
  mask-image: url('images/hero-face-hand-cutout.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero--editorial .hero-copy {
  position: relative;
  max-width: 730px;
  z-index: 1;
}
.hero--editorial .eyebrow {
  position: relative;
  width: max-content;
  max-width: 100%;
  background: #fcfcfaf2;
  box-shadow: 0 0 14px 14px #fcfcfaf2;
}
.hero--editorial h1 {
  width: max-content;
  max-width: 100%;
  font-size: clamp(72px, 8vw, 112px);
  line-height: 1.02;
  margin: 68px 0 23px;
  padding: 5px 22px 10px 0;
  background: none;
  text-shadow: 0 0 10px #fcfcfa, 0 0 24px #fcfcfa, 0 0 38px #fcfcfa;
}
.hero--editorial .hero-jp {
  display: table;
  font-size: 26px;
  background: #fcfcfaf0;
  padding: 2px 18px 2px 0;
}
.hero--editorial .hero-description {
  display: table;
  margin-top: 19px;
  padding: 7px 24px 7px 0;
  background: linear-gradient(90deg, #fcfcfa 80%, #fcfcfa00);
  font-size: 13px;
}
.hero--editorial .text-link {
  background: #fcfcfaf0;
  margin-top: 20px;
  padding-right: 9px;
}
@media (max-width: 1050px) {
  .hero--editorial { min-height: 590px; }
  .hero--editorial .hero-image { width: 62%; right: 0; top: 15px; }
  .hero--editorial h1 { font-size: clamp(65px, 8vw, 88px); margin-top: 68px; }
}
@media (max-width: 700px) {
  .hero--editorial {
    width: calc(100% - 40px);
    min-height: 0;
    padding: 17px 0 36px;
  }
  .hero--editorial::before {
    width: 280px;
    height: 280px;
    top: 95px;
    right: 0;
  }
  .hero--editorial .hero-image {
    width: 100vw;
    top: 65px;
    right: calc((100% - 100vw) / 2);
    margin: 0;
  }
  .hero--editorial .hero-copy { max-width: 100%; }
  .hero--editorial .eyebrow { font-size: 8px; }
  .hero--editorial h1 {
    position: relative;
    font-size: clamp(49px, 13.8vw, 62px);
    line-height: 1.03;
    margin: 230px 0 11px;
    padding: 9px 14px 9px 0;
    background: none;
  }
  .hero--editorial .hero-jp { font-size: 20px; padding-right: 12px; }
  .hero--editorial .hero-description {
    font-size: 11px;
    line-height: 1.9;
    padding-right: 12px;
    margin-top: 12px;
  }
  .hero--editorial .text-link { margin-top: 13px; }
}
@media (max-width: 360px) {
  .hero--editorial { width: calc(100% - 32px); }
  .hero--editorial .hero-image { width: 100vw; right: calc((100% - 100vw) / 2); }
  .hero--editorial h1 { font-size: 47px; margin-top: 205px; }
  .hero--editorial .hero-jp { font-size: 18px; }
}