/* hero: the featured photograph, a polaroid and a short film strip of her originals tucked behind it,
   under a sweep of studio lights */
.hero { height: 100vh; height: 100svh; min-height: 680px; overflow: hidden; background: radial-gradient(120% 90% at 50% 45%, #3a0b22 0%, #1a0710 45%, #0b0608 75%); }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-glow { position: absolute; left: 50%; top: 46%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 46, 136, 0.55), rgba(255, 46, 136, 0.12) 45%, transparent 70%); filter: blur(10px); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: 0.8; } }
.beam { position: absolute; top: -20vh; left: 50%; width: 46vw; height: 140vh; transform-origin: 50% 0; background: conic-gradient(from 180deg at 50% 0, transparent 0 170deg, rgba(255, 214, 228, 0.16) 176deg, rgba(255, 255, 255, 0.22) 180deg, rgba(255, 214, 228, 0.16) 184deg, transparent 190deg); filter: blur(6px); mix-blend-mode: screen; animation: sweep 9s ease-in-out infinite alternate; }
.b1 { margin-left: -38vw; --a: -24deg; --b: 8deg; }
.b2 { margin-left: -23vw; --a: 14deg; --b: -10deg; animation-duration: 11s; }
.b3 { margin-left: -8vw; --a: -6deg; --b: 22deg; animation-duration: 13s; opacity: 0.7; }
@keyframes sweep { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }


.feature { position: absolute; z-index: 12; left: 50%; top: 48%; height: min(76vh, 820px); aspect-ratio: 4 / 5; margin: 0; transform: translate(-50%, -50%); will-change: transform; }
.feature img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 120px -20px rgba(255, 46, 136, 0.55); }
.feature::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, 0.16), transparent 22%, transparent 70%, rgba(255, 180, 210, 0.12)); }
.vf { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, 0.85); }
.vf-tl { left: -18px; top: -18px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.vf-tr { right: -18px; top: -18px; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.vf-bl { left: -18px; bottom: -18px; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.vf-br { right: -18px; bottom: -18px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.rec { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(11, 6, 8, 0.55); font: 600 10px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: #fff; backdrop-filter: none; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff2b4a; box-shadow: 0 0 10px #ff2b4a; animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0.2; } }

/* the two companions behind the feature: a taped polaroid (left) and a strip of three frames (right) */
.hero { --lz: calc(50% - min(76vh, 820px) * 0.4); --pw: min(19vw, 270px); }   /* the portrait's left edge; polaroid width */
.hero-pola { position: absolute; z-index: 8; width: var(--pw); left: calc(var(--lz) - var(--pw) + 22px); top: 10%; transform: rotate(-7deg); will-change: transform; }
.hero-pola .tape { left: 50%; top: -12px; margin-left: -43px; transform: rotate(4deg); }
.hero-pola figcaption { font-size: 20px; }
.hero-film { position: absolute; z-index: 8; flex-direction: column; width: min(15vw, 210px); padding: 10px 24px; gap: 10px; left: calc(50% + min(76vh, 820px) * 0.4 - 14px); top: 9%; transform: rotate(5deg); border-radius: 4px; will-change: transform;
  background-image: radial-gradient(circle at 11px 8px, #2a1d22 0 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 11px) 8px, #2a1d22 0 4px, transparent 4.5px);
  background-size: 100% 20px; background-repeat: repeat-y; box-shadow: var(--shadow); }
.hero-film img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.hero-copy { position: absolute; z-index: 40; left: var(--pad); bottom: calc(var(--pad) + 8px); max-width: min(30rem, 30vw); }
.hero-copy::before { content: ""; position: absolute; inset: -110px -120px -60px -90px; z-index: -1; background: radial-gradient(closest-side, rgba(11, 6, 8, 0.94) 55%, rgba(11, 6, 8, 0)); pointer-events: none; }
.hero-title { margin: 14px 0 14px -0.02em; font: 400 clamp(52px, 5.4vw, 92px) / 0.92 var(--display); letter-spacing: 0.005em; }
.hero-title em { font: italic 400 0.8em/1 var(--serif); color: var(--hot); margin-left: 0.05em; }
.hero-quote { margin: 0 0 14px; font: italic 400 clamp(20px, 1.7vw, 27px) / 1.25 var(--serif); color: var(--rose); }
.hero-quote span { display: block; }
.hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }




.hero-scroll { position: absolute; z-index: 40; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 10px/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); text-decoration: none; }
.hero-scroll i { width: 1px; height: 34px; background: linear-gradient(var(--hot), transparent); animation: cue 2.6s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0.2); opacity: 0.3; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0.2); opacity: 0.3; } }

@media (max-width: 820px), (max-aspect-ratio: 85/100) {
  .feature { top: 40%; height: auto; width: min(74vw, 46vh); }
  .feature img, .feature::after { border-radius: 16px; }
  .vf { width: 24px; height: 24px; }
  .vf-tl, .vf-bl { left: -12px; } .vf-tr, .vf-br { right: -12px; } .vf-tl, .vf-tr { top: -12px; } .vf-bl, .vf-br { bottom: -12px; }
  .rec { left: 10px; top: 10px; padding: 5px 8px; font-size: 9px; }
  .hero-pola { width: 31vw; left: -5vw; top: 24%; padding: 6px 6px 26px; }
  .hero-pola figcaption { font-size: 13px; bottom: 7px; left: 8px; }
  .hero-pola .tape { width: 56px; height: 18px; margin-left: -28px; top: -8px; }
  .hero-film { width: 25vw; left: auto; right: -4vw; top: 15%; padding: 8px 14px; gap: 7px; }
  .hero-film img:nth-child(3) { display: none; }
  .hero-copy { left: var(--pad); right: var(--pad); max-width: none; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .hero-copy::before { inset: -70px -40px -30px -40px; }
  .hero-title { font-size: clamp(42px, 12vw, 60px); margin: 8px 0 8px; }
  .hero-copy .lede { font-size: 15px; line-height: 1.5; }
  .hero-quote { font-size: 18px; margin-bottom: 8px; }
  .hero-quote span { display: inline; }
  .hero-cta { margin-top: 14px; gap: 16px; }
  .hero-cta .btn { padding: 13px 22px; }
  .hero-scroll, .beam { display: none; }
}
@media (prefers-reduced-motion: reduce) { .beam, .hero-glow, .rec i { animation: none; } }