/* AGAPE / green scenic frame with a moving pale-pink inner curtain. */
:root { --stage-blue: #cce4ed; --stage-burgundy: #75142e; --stage-paper: #f5f1e6; }
.header { top: 0; left: 4%; right: 4%; height: 82px; padding: 0; align-items: center; color: var(--stage-burgundy); background: transparent; }
.header > .wordmark { margin-top: 0; }
.header .wordmark { font-family: var(--serif); font-weight: 400; font-size: 44px; letter-spacing: -.055em; }
.header .wordmark span { font-family: var(--sans); font-size: 9px; width: auto; letter-spacing: .02em; }
.header .desktop-nav { position: static !important; gap: clamp(20px, 3vw, 48px) !important; font: 400 12px/1.5 var(--sans); }
.header .desktop-nav a { width: auto !important; padding: 12px 0; }
.header .nav-cta { background: transparent; color: var(--stage-burgundy); border: 1px solid #75142e85; min-width: 184px; height: 44px; font-size: 11px; font-weight: 400; }
.header .nav-cta:hover { background: #75142e0c; }
.header.scrolled { top: 12px; height: 70px; background: #f5f1e6f2; color: var(--stage-burgundy); box-shadow: 0 6px 25px #3f304313; }
.header.scrolled .wordmark { font-size: 36px; }
.header .mobile-nav { background: var(--stage-paper); color: var(--stage-burgundy); border-color: #75142e24; }
.header :is(a, button):focus-visible, .theatre :is(a, button):focus-visible { outline-color: var(--stage-burgundy); }

.hero.theatre { display: block; width: 100%; height: auto; min-height: 0; max-width: none; margin: 0; padding: 82px 0 0; overflow: hidden; background: var(--stage-blue); color: var(--stage-burgundy); }
.stage-shell { position: relative; isolation: isolate; width: 100%; height: clamp(760px, calc(100svh - 82px), 1024px); overflow: hidden; background: radial-gradient(ellipse at 58% 34%, #d7eaf1 0, #cce4ed 50%, #b9d5e1 100%); }
.stage-floor { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(#c8e0e9, #b8d5e3 70%, #acd0e0); border-top: 1px solid #e9f4f755; box-shadow: inset 0 14px 30px #f4fafb26; }
.stage-floor::after { content: ''; position: absolute; left: -2%; right: -2%; top: 58%; height: 18%; border-radius: 0 0 50% 50%; background: linear-gradient(#d2e7ee, #c0dbe6); border-bottom: 1px solid #9bbdcc50; box-shadow: 0 10px 15px #55879e17; }
.cloth-host, .cloth-surface, .curtain-understudy { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cloth-host { z-index: 2; }
.cloth-surface { display: block; }
.curtain-understudy { z-index: 2; background: repeating-linear-gradient(90deg, #f5dde3 0, #fae7ec 3%, #f3dce3 5.6%, #f8e3e8 8.2%); }
.curtain-understudy::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid #d9bdc35c; }
.theatre:is([data-renderer="ready"], [data-state="open"]) .curtain-understudy { display: none; }
.stage-frame { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.stage-frame img { display: block; width: 100%; height: 100%; object-fit: fill; }
.theatre .hero-copy { position: absolute; z-index: 4; left: 27%; top: 25%; width: 65%; max-width: none; text-align: left; }
.theatre h1 { position: relative; isolation: isolate; inset: auto; width: 100%; margin: 0; color: var(--stage-burgundy); font: 500 clamp(44px, 5.7vw, 88px)/1.01 var(--serif); letter-spacing: -.035em; text-shadow: 0 1px 0 #fff7, 0 0 22px #fff7, 0 3px 20px #fff4; }
.theatre h1::before { content: ''; position: absolute; z-index: -1; inset: -20% -5% -25% -10%; background: radial-gradient(ellipse, #fff9f18c 0, #fff8f32b 47%, transparent 72%); filter: blur(18px); pointer-events: none; }
.theatre h1 > span { display: block; white-space: nowrap; }
.theatre h1 em { display: block; width: auto; max-width: none; margin: .06em 0 0; padding: 0; font: italic 500 1.12em/1.03 var(--serif); letter-spacing: -.045em; white-space: nowrap; }
.stage-open { display: inline-block; min-width: 100px; min-height: 48px; margin: 30px 0 0; padding: 10px 4px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--stage-burgundy); font: 500 18px/1.5 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-shadow: 0 0 15px #fff9; transition: opacity .4s ease; }
.stage-open:hover { text-decoration-thickness: 2px; }
.stage-open[aria-disabled="true"] { cursor: default; }
.theatre[data-state="opening"] .stage-open { opacity: 0; pointer-events: none; }
.stage-caption-slot { width: 84%; max-width: 720px; margin: 30px 0 0; padding: 0; border: 0; background: none; color: var(--stage-burgundy); visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
.stage-caption-slot:focus-visible { outline: 2px solid var(--stage-burgundy); outline-offset: 8px; }
.theatre .hero-description { position: static; inset: auto; width: 100%; max-width: none; margin: 0; color: var(--stage-burgundy); text-shadow: 0 1px 0 #ffffff55; }
.stage-caption-lead { display: block; font: 500 clamp(26px, 2.35vw, 36px)/1.12 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.stage-caption-body { display: block; max-width: 650px; margin: 15px 0 0; font: 400 clamp(16px, 1.25vw, 19px)/1.72 var(--sans); text-wrap: pretty; }
.theatre[data-state="open"] .stage-caption-slot { visibility: visible; opacity: 1; transform: translateY(0); }
.stage-crown { display: none; }
@supports ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .stage-crown { display: block; position: absolute; z-index: 1; right: 18%; bottom: 4.5%; width: clamp(140px, 12vw, 185px); height: auto; pointer-events: none; mask: url('/assets/reference-crown-mask.svg') center / contain no-repeat; -webkit-mask: url('/assets/reference-crown-mask.svg') center / contain no-repeat; opacity: 0; transform: rotate(-9deg); transition: opacity .7s ease; }
  .theatre[data-state="open"] .stage-crown { opacity: 1; }
}
.path-botanical { height: calc(100% - 40px); width: 100%; overflow: hidden; border-radius: 4px; }
.path-botanical img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
@media (max-width: 1150px) and (min-width: 761px) {
  .header { left: 4%; right: 4%; }
  .header .wordmark { font-size: 37px; }
  .header .wordmark span { display: none; }
  .header .desktop-nav { gap: 24px !important; }
  .header .nav-cta { min-width: 166px; font-size: 10px; }
  .theatre .hero-copy { top: 27%; }
  .stage-caption-slot { width: 88%; }
  .stage-caption-body { font-size: 16px; }
}
@media (max-width: 760px) {
  .header { top: 0; left: 24px; right: 24px; height: 78px; }
  .header .wordmark { font-size: 38px; gap: 13px; }
  .header .wordmark span { display: block; font-size: 8px; }
  .header.scrolled { height: 64px; }
  .header .desktop-nav, .header .nav-cta { display: none; }
  .header .menu-toggle { color: var(--stage-burgundy); }
  .header .mobile-nav { top: 72px; }
  .hero.theatre { padding: 78px 0 0; }
  .stage-shell { height: max(800px, calc(100svh - 78px)); }
  .theatre .hero-copy { left: 24%; top: 25%; width: 70%; }
  .theatre h1 { font-size: clamp(29px, 8.4vw, 56px); line-height: 1.04; letter-spacing: -.045em; }
  .theatre h1 em { font-size: 1.09em; line-height: 1.12; margin-top: .12em; letter-spacing: -.05em; }
  .stage-open { margin-top: 25px; font-size: 17px; }
  .stage-caption-slot { width: 91%; margin-top: 27px; }
  .stage-caption-lead { font-size: clamp(25px, 5.8vw, 34px); line-height: 1.15; }
  .stage-caption-body { font-size: 15px; line-height: 1.7; margin-top: 15px; }
  .stage-crown { width: 112px; right: 16%; bottom: 4.5%; }
  .path-botanical { height: 310px; }
}
@media (max-width: 374px) {
  .header { left: 20px; right: 20px; }
  .theatre .hero-copy { left: 23%; width: 72%; }
  .theatre h1 { font-size: 28px; }
  .stage-caption-slot { width: 92%; }
  .stage-caption-lead { font-size: 24px; }
  .stage-caption-body { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .theatre *, .theatre *::before, .theatre *::after { animation: none !important; transition: none !important; }
}