/* Opening concept 02: ivory editorial stage. All rules are scoped to the hero.
   Illustration is decorative, not a representation of a product interface. */
.hero--editorial {
  --hero-paper: #f4f0ea;
  --hero-ink: #251333;
  --hero-purple: #6732a0;
  padding: 40px clamp(22px, 4vw, 64px) 42px;
  background: var(--hero-paper);
  color: var(--hero-ink);
}
.hero--editorial::before,
.hero--editorial::after { display: none; }
.hero--editorial .hero-inner {
  width: min(100%, 1280px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: center;
}
.hero--editorial .hero-eyebrow {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0 0 26px;
  padding: 0 0 14px;
  width: 100%;
  max-width: none;
  border: 0;
  border-bottom: 1px solid #34204025;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: right;
  color: #574563;
  font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.4;
}
.hero--editorial h1 {
  grid-column: 1;
  margin: 0;
  max-width: 630px;
  text-align: right;
  color: var(--hero-ink);
  letter-spacing: -.025em;
  text-shadow: none;
  text-wrap: pretty;
}
.hero--editorial h1 > span:first-child {
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1.18;
  max-width: 580px;
  color: #514259;
}
.hero--editorial h1 > span + span {
  margin-top: 24px;
  font-size: clamp(48px, 4.7vw, 68px);
  line-height: 1.08;
  color: var(--hero-purple);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hero--editorial .hero-sculpture {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  isolation: isolate;
  margin: 0;
  width: 100%;
  aspect-ratio: 1.4;
  display: grid;
  place-items: center;
}
.hero-sculpture img {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: block;
  width: 114%;
  max-width: none;
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse, #000 43%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 43%, transparent 72%);
  animation: sculpture-arrive 1s ease-out both;
}
.hero--editorial .hero-main {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  margin-top: 34px;
  gap: 0;
}
.hero--editorial .hero-copy {
  width: 100%;
  max-width: none;
  border: 1px solid #402b5626;
  border-radius: 20px;
  padding: 25px 32px;
  background: #ffffff70;
  box-shadow: 0 8px 28px #45236106;
  color: #493d52;
  font-size: clamp(20px, 1.6vw, 23px);
  line-height: 1.5;
  gap: 4px;
}
.hero--editorial .hero-copy::before { display: none; }
.hero--editorial .hero-copy > p:first-child {
  color: var(--hero-ink);
  font-size: 1.12em;
  font-weight: 900;
  margin-bottom: 4px;
}
.hero--editorial .hero-copy strong { color: #633094; }
.hero--editorial .hero-copy .hero-assurance {
  color: #65566e;
  margin-top: 8px;
}
.hero--editorial + .press-band {
  background: #eae4df;
  border-top: 1px solid #34204015;
  padding-block: 18px;
  box-shadow: none;
}
.hero--editorial + .press-band .press-link {
  background: #fffdfa;
  border-color: #2513331a;
}
@keyframes sculpture-arrive {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 999px) {
  .hero--editorial { padding: 30px 28px 32px; }
  .hero--editorial .hero-inner { column-gap: 16px; }
  .hero--editorial h1 > span:first-child { font-size: 30px; }
  .hero--editorial h1 > span + span { font-size: 45px; margin-top: 18px; }
  .hero--editorial .hero-sculpture { aspect-ratio: 1; }
  .hero--editorial .hero-main { margin-top: 28px; }
  .hero--editorial .hero-copy { padding: 24px; font-size: 21px; }
}
@media (max-width: 599px) {
  .hero--editorial { padding: 24px 22px 28px; }
  .hero--editorial .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero--editorial .hero-eyebrow { font-size: 19px; line-height: 1.45; margin-bottom: 24px; }
  .hero--editorial h1 { grid-column: 1; }
  .hero--editorial h1 > span:first-child { font-size: 29px; line-height: 1.16; }
  .hero--editorial h1 > span + span { font-size: clamp(38px, 10.8vw, 48px); line-height: 1.1; margin-top: 18px; }
  .hero--editorial .hero-sculpture { grid-column: 1; grid-row: 3; aspect-ratio: 1.85; margin-top: 8px; }
  .hero-sculpture img { width: 100%; }
  .hero--editorial .hero-main { margin-top: 18px; }
  .hero--editorial .hero-copy { padding: 24px 19px; gap: 12px; font-size: 20px; line-height: 1.5; border-radius: 16px; text-align: right; }
  .hero--editorial .hero-copy > p:first-child { font-size: 23px; line-height: 1.3; }
  .hero--editorial .hero-copy .hero-assurance { border-top: 1px solid #3420401f; padding-top: 14px; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sculpture img { animation: none; }
  .hero--editorial [data-enter] { transition: none !important; animation: none !important; }
}