* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: #0b0908; color: #f2ead9; font-family: 'Cormorant Garamond', Georgia, serif; }
a { color: #c9a24b; text-decoration: none; }
a:hover { color: #e8c97a; }
::selection { background: #c9a24b; color: #0b0908; }
:focus-visible { outline: 2px solid #e8c97a; outline-offset: 6px; }
.story { overflow-x: clip; }
#om-bar { position: fixed; inset: 0 0 auto; height: 2px; background: #e8c97a; z-index: 90; transform: scaleX(0); transform-origin: left; pointer-events: none; }
#om-lab { position: fixed; left: clamp(20px, 3vw, 48px); top: max(24px, env(safe-area-inset-top)); z-index: 90; max-width: calc(100% - 210px); font: 10px/1.6 Cinzel, serif; letter-spacing: .2em; color: #f0d9a2; text-transform: uppercase; text-shadow: 0 1px 9px #000; pointer-events: none; }
.cinema-toggle { position: fixed; top: max(16px, env(safe-area-inset-top)); right: clamp(16px, 3vw, 48px); z-index: 90; border: 1px solid #c9a24b55; border-radius: 30px; padding: 11px 16px; background: #0b09087d; color: #f2ead9; font: 10px/1.2 Cinzel, serif; letter-spacing: .08em; cursor: pointer; }
.cinema-toggle:hover { background: #211b12; border-color: #c9a24b; }
.scene { position: relative; }
.scene-stage { position: sticky; top: 0; height: 100svh; background: #0b0908; pointer-events: none; }
.scene-media { position: absolute; inset: 0; overflow: hidden; background: #0b0908; }
.scene-media video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.scene-copy { position: relative; z-index: 2; margin-top: -100svh; padding-bottom: 65svh; pointer-events: none; }
[data-reveal] { opacity: 1; transform: none; }
.story-ready [data-reveal] { transition: opacity .9s ease, transform .9s ease; }
.story-ready [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(30px); }
.story.is-cinema .scene-copy { visibility: hidden; pointer-events: none; }
.story.is-cinema .scene-copy * { pointer-events: none; }
.back-top { display: inline-block; margin-top: 34px; font: 10px Cinzel, serif; letter-spacing: .25em; text-transform: uppercase; }
@media (max-width: 700px) {
  #om-lab { top: max(21px, env(safe-area-inset-top)); left: 16px; max-width: calc(100% - 155px); font-size: 8px; letter-spacing: .1em; }
  .cinema-toggle { padding: 10px 12px; font-size: 9px; right: 12px; }
  .scene-stage { z-index: 0; }
  .scene-media { inset: 0; height: 100svh; }
  .scene-copy { z-index: 2; padding-bottom: 55svh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The cinematic gate applies to video scenes; prose remains in normal flow. */
.cinematic .scene.screen-section { opacity: 0; pointer-events: none; transition: none; }
.cinematic .scene.screen-section.is-active { opacity: 1; pointer-events: auto; }
.cinematic .scene.screen-section:not(.is-active) * { pointer-events: none !important; }
.cinematic .scene-stage { position: fixed; inset: 0; z-index: 0; height: 100svh; }
.cinematic .scene-copy { margin-top: 0; }
.cinematic .scene-media { overflow: hidden; }
.cinematic .scene.is-active video { transform: scale(var(--shot-scale, 1)); filter: brightness(var(--shot-light, 1)); transform-origin: 50% 48%; will-change: transform; }
.cinema-transition { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; --shutter: 0; }
.cinema-transition::before, .cinema-transition::after { content: ''; position: absolute; left: 0; width: 100%; height: 50.2%; background: #070605; transform: scaleY(var(--shutter)); will-change: transform; }
.cinema-transition::before { top: 0; transform-origin: center top; border-bottom: 1px solid #b6924e30; }
.cinema-transition::after { bottom: 0; transform-origin: center bottom; border-top: 1px solid #b6924e30; }
.cinema-transition-title { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; padding: 28px; text-align: center; color: #dcc18b; font: 400 clamp(12px, 1.3vw, 17px)/1.9 Cinzel, serif; letter-spacing: .23em; text-transform: uppercase; opacity: 0; }
.cinema-transition-title::after { content: ''; width: 44px; height: 1px; margin: 24px auto 0; background: #b6924e; }
@media (max-width: 700px) {
  .cinematic .scene-stage { z-index: 0; }
  .cinema-transition-title { letter-spacing: .12em; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-transition { display: none; }
  .cinematic .scene.is-active video { transform: none; filter: none; will-change: auto; }
}

/* The supplied site's original card geometry, color, blur, and type live inline. */
.story-beat, .scene-card { box-sizing: content-box; }
.scene-card { position: relative; min-width: 0; }
.cinematic > section:not(.scene), .cinematic > footer { position: relative; z-index: 5; }
.cinematic .scene-copy { opacity: 1; transition: opacity .65s ease; }
.cinematic.is-transitioning .scene-copy { opacity: 0; pointer-events: none; }
.cinematic.is-transitioning .scene-copy * { pointer-events: none !important; }
html { scrollbar-gutter: stable; }
html.cinema-holding { overflow: hidden; }
.cinema-transition-title { font-family: Cinzel, serif; color: #f2ead9; letter-spacing: normal; text-transform: none; }
.cinema-transition-kicker { color: #c9a24b; font: 400 11px/1.7 Cinzel, serif; letter-spacing: .32em; text-transform: uppercase; }
.cinema-transition-heading { font: 600 clamp(26px, 4.4vw, 50px)/1.14 Cinzel, serif; margin: 14px 0 0; }
@media (max-width: 700px) {
  .story-beat { box-sizing: border-box; min-height: 100svh !important; align-items: flex-end !important; padding: 62svh min(5vw, 64px) 10svh !important; }
  .scene-card { box-sizing: border-box; }
}