/* Homepage artwork hero. The image remains visible with no JavaScript. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(640px, 90svh, 1080px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #06090d;
  color: #faf9f7;
}
.hero::before { content: none; }
.hero-artwork { position: absolute; inset: 0; z-index: -2; }
.hero-artwork img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #0007 0%, #0004 30%, #0000 64%);
}
.hero-inner { padding-block: 96px; }
.hero-copy { width: 45%; max-width: 590px; background: none; }
.hero .eyebrow { color: #d5d1df; font-size: .65rem; line-height: 1.8; letter-spacing: .13em; margin-bottom: 28px; }
.hero h1 { font-size: clamp(2.75rem, 4.5vw, 4.35rem); font-weight: 500; line-height: 1.09; letter-spacing: -.055em; }
.hero h1 em { display: inline-block; color: #e6e0f2; }
.hero-description { max-width: 32ch; margin-top: 28px; color: #d0cdd5; font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.hero .button { background: #e8e3f5; border-color: #e8e3f5; color: #1b133c; border-radius: 99px; padding-inline: 24px; gap: 0; }
.hero .button:hover { background: #fff; border-color: #fff; }
.hero .text-link { color: #faf9f7; border-color: #aaa2b7; gap: 0; min-height: 48px; }
.hero .text-link:hover { color: #d8cef5; border-color: #d8cef5; }
.hero a:focus-visible { outline-color: #e8ddff; }
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow { animation: hero-fade .55s ease-out both; }
  .hero h1 { animation: hero-rise .65s cubic-bezier(.2,.7,.2,1) .08s both; }
  .hero-description { animation: hero-rise .6s cubic-bezier(.2,.7,.2,1) .16s both; }
  .hero-actions { animation: hero-rise .6s cubic-bezier(.2,.7,.2,1) .24s both; }
  .hero-artwork { animation: hero-art-enter 1s ease-out both; transform-origin: 75% 50%; }
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-art-enter { from { opacity: .75; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 1000px) {
  .hero { min-height: 0; align-items: start; }
  .hero-inner { padding-top: 64px; padding-bottom: clamp(350px, 50vw, 460px); }
  .hero-copy { width: 100%; max-width: 600px; }
  .hero h1 { font-size: clamp(3rem, 7vw, 4.5rem); }
  .hero .eyebrow { margin-bottom: 24px; }
  .hero-artwork { top: auto; height: clamp(400px, 62vw, 620px); }
  .hero-artwork img { object-fit: cover; object-position: 80% center; }
  .hero::after { background: linear-gradient(180deg, #06090d 0%, #06090d 36%, #06090d99 49%, #06090d00 68%); }
  .hero-description { max-width: 34ch; }
}
@media (max-width: 560px) {
  .hero-inner { padding-top: 48px; padding-bottom: 310px; }
  .hero .eyebrow { font-size: .59rem; letter-spacing: .1em; max-width: 290px; margin-bottom: 22px; }
  .hero h1 { font-size: clamp(2.5rem, 9.7vw, 3.4rem); line-height: 1.12; }
  .hero-description { font-size: .95rem; margin-top: 22px; max-width: 29ch; }
  .hero-actions { gap: 12px 20px; margin-top: 26px; }
  .hero-actions .button, .hero-actions .text-link { font-size: .75rem; }
  .hero .button { padding-inline: 20px; min-height: 50px; }
  .hero-artwork { height: 360px; }
  .hero-artwork img { object-position: 77% center; }
  .hero::after { background: linear-gradient(180deg, #06090d 0%, #06090d 41%, #06090ddd 49%, #06090d00 67%); }
}