/* R8: paired landscapes and copy, chosen once for each document visit. */
.hero-inner{display:flex;padding-top:clamp(62px,8vh,110px)}
.hero-copy{width:min(540px,100%)}
.hero[data-hero-align=right] .hero-inner{justify-content:flex-end}
.hero :is(h1,h2:where([data-page-heading])){font-size:clamp(46px,4.3vw,66px);line-height:1.5}
.hero :is(h1,h2:where([data-page-heading])) span{white-space:nowrap}
.hero .hero-art{object-position:center center;transition:opacity 680ms ease;opacity:1}
.hero[data-hero-state=loading] .hero-art,.hero[data-hero-state=error] .hero-art{opacity:0}
.hero-paper{background:linear-gradient(90deg,#f7f4edd9 0%,#f7f4edb3 38%,#f7f4ed00 66%)}
.hero[data-hero-align=right] .hero-paper{background:linear-gradient(270deg,#f7f4edd9 0%,#f7f4edb3 38%,#f7f4ed00 66%)}
.hero-side-note{text-shadow:0 0 5px #f7f4ed,0 0 10px #f7f4ed}
.hero .scroll-invitation{background:#f7f4edcc;padding:4px 12px}
.hero[data-hero-align=right] .hero-side-note{right:auto;left:36px}
@media(max-width:1100px) and (min-width:701px){
  .hero-copy{width:440px}.hero :is(h1,h2:where([data-page-heading])){font-size:48px}
  .hero-paper{background:linear-gradient(90deg,#f7f4edd9,#f7f4edaa 33%,transparent 76%)}
  .hero[data-hero-align=right] .hero-paper{background:linear-gradient(270deg,#f7f4edd9,#f7f4edaa 33%,transparent 76%)}
}
@media(max-width:700px){
  .hero{height:auto;min-height:880px;padding-bottom:350px}
  .hero .hero-inner{justify-content:flex-start;padding-top:42px}
  .hero-copy{width:100%}
  .hero :is(h1,h2:where([data-page-heading])){font-size:clamp(30px,8vw,46px);line-height:1.55}
  .hero-description{font-size:17px;margin-top:22px}
  .hero-picture{inset:auto 0 0;height:350px}
  .hero .hero-art{height:100%;object-fit:cover;object-position:var(--hero-focal,76%) bottom}
  .hero .hero-paper,.hero[data-hero-align=right] .hero-paper{background:linear-gradient(180deg,#f7f4ed 0%,#f7f4ed calc(100% - 350px),#f7f4ed00 calc(100% - 200px))}
}
@media(max-width:360px){.hero-description{font-size:16px}.hero .hero-inner{padding-top:34px}}
@media(prefers-reduced-motion:reduce){.hero .hero-art{transition:none}}
@media print{.hero-inner{display:block;padding:40px 0}.hero-copy{width:100%}.hero{min-height:400px;padding-bottom:20px}}
